git-tm
Version:
An elegant visual Git history explorer with real-time commit comparison capabilities
89 lines (83 loc) • 2.81 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Git Time Machine</title>
<link rel="icon" type="image/svg+xml" href="./images/logo.svg" />
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div id="loader-container">
<div class="loader">
<svg viewBox="0 0 80 80">
<circle r="32" cy="40" cx="40" id="test"></circle>
</svg>
</div>
<div class="loader triangle">
<svg viewBox="0 0 86 80">
<polygon points="43 8 79 72 7 72"></polygon>
</svg>
</div>
<div class="loader">
<svg viewBox="0 0 80 80">
<rect height="64" width="64" y="8" x="8"></rect>
</svg>
</div>
</div>
<div id="app">
<header>
<div class="title-container">
<img
src="./images/logo.png"
alt="Git Time Machine Logo"
class="app-logo"
width="40"
height="40"
/>
<h1><span style="color: #e84d31">Git</span> Time Machine</h1>
</div>
<div id="repo-info"></div>
</header>
<div class="layout">
<aside class="sidebar">
<h2>Branches</h2>
<div id="branch-list" class="branch-list"></div>
</aside>
<main>
<section id="timeline" class="timeline-section">
<h2>Commits</h2>
<div class="commits-container"></div>
</section>
</main>
</div>
</div>
<div id="comparison-panel">
<div class="comparison-header">
<h3>Compare Commits</h3>
<div class="commit-selectors">
<div class="select-group">
<label>Base Commit:</label>
<select id="base-commit-select" class="commit-select"></select>
</div>
<div class="select-group">
<label>Compare Commit:</label>
<select id="compare-commit-select" class="commit-select"></select>
</div>
<button id="compare-button" class="compare-button">Compare</button>
<button id="clear-button" class="clear-button">Clear</button>
<div class="dropdown">
<input type="checkbox" id="panel-toggle" />
<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
<path
d="M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z"
></path>
</svg>
</div>
</div>
</div>
<div id="diff-output" class="diff-content"></div>
</div>
<script src="app.js"></script>
</body>
</html>