Christoph Brandau
a7faaceb83
The application has been rebranded from GitLite to Gitty, which involved updating various references across the codebase, including titles, descriptions, and identifiers. This change reflects the new branding strategy and ensures consistency in the user interface and backend. - Updated project name and identifiers in configuration files - Changed all instances of "GitLite" to "Gitty" in HTML and Svelte files - Adjusted descriptions and help texts to match the new branding
242 lines
6.2 KiB
HTML
242 lines
6.2 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Gitty</title>
|
|
<style>
|
|
:root {
|
|
color-scheme: dark;
|
|
--ink: #f3f5ff;
|
|
--muted: #9aa3c5;
|
|
--purple: #9b70ff;
|
|
--orange: #ff6d26;
|
|
--panel: rgba(15, 18, 31, 0.9);
|
|
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html,
|
|
body {
|
|
width: 100%;
|
|
height: 100%;
|
|
margin: 0;
|
|
overflow: hidden;
|
|
background: #050712;
|
|
}
|
|
|
|
body {
|
|
display: grid;
|
|
place-items: center;
|
|
background:
|
|
radial-gradient(circle at 50% 38%, rgba(137, 92, 255, 0.22), transparent 36%),
|
|
linear-gradient(135deg, #050712 0%, #080b16 48%, #140b18 100%);
|
|
}
|
|
|
|
.grid {
|
|
position: fixed;
|
|
inset: 0;
|
|
opacity: 0.28;
|
|
background-image:
|
|
linear-gradient(rgba(151, 118, 255, 0.12) 1px, transparent 1px),
|
|
linear-gradient(90deg, rgba(255, 109, 38, 0.08) 1px, transparent 1px);
|
|
background-size: 42px 42px;
|
|
mask-image: radial-gradient(circle at center, black 0%, transparent 70%);
|
|
animation: grid-drift 10s linear infinite;
|
|
}
|
|
|
|
.splash {
|
|
position: relative;
|
|
display: grid;
|
|
justify-items: center;
|
|
gap: 16px;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
align-content: center;
|
|
padding: 32px;
|
|
border: 0;
|
|
border-radius: 0;
|
|
background:
|
|
linear-gradient(180deg, rgba(23, 26, 43, 0.92), rgba(12, 15, 27, 0.94)),
|
|
var(--panel);
|
|
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.mark {
|
|
position: relative;
|
|
display: grid;
|
|
place-items: center;
|
|
width: 174px;
|
|
height: 174px;
|
|
isolation: isolate;
|
|
}
|
|
|
|
.halo {
|
|
position: absolute;
|
|
inset: 10px;
|
|
border: 1px solid rgba(151, 118, 255, 0.25);
|
|
border-radius: 36px;
|
|
transform: rotate(45deg);
|
|
animation: halo-breathe 2.4s ease-in-out infinite;
|
|
}
|
|
|
|
.halo.secondary {
|
|
inset: 25px;
|
|
border-color: rgba(255, 109, 38, 0.28);
|
|
animation-direction: reverse;
|
|
}
|
|
|
|
.traces {
|
|
position: absolute;
|
|
inset: -18px;
|
|
width: 210px;
|
|
height: 210px;
|
|
overflow: visible;
|
|
}
|
|
|
|
.trace {
|
|
fill: none;
|
|
stroke-width: 3;
|
|
stroke-linecap: round;
|
|
stroke-dasharray: 165;
|
|
stroke-dashoffset: 165;
|
|
filter: drop-shadow(0 0 8px rgba(151, 118, 255, 0.55));
|
|
animation: trace-draw 2.6s ease-in-out infinite;
|
|
}
|
|
|
|
.trace.main {
|
|
stroke: var(--purple);
|
|
}
|
|
|
|
.trace.branch {
|
|
stroke: var(--orange);
|
|
animation-delay: 0.28s;
|
|
}
|
|
|
|
.trace.base {
|
|
stroke: rgba(255, 255, 255, 0.42);
|
|
stroke-dasharray: 128;
|
|
stroke-dashoffset: 128;
|
|
animation-delay: 0.55s;
|
|
}
|
|
|
|
.icon {
|
|
position: relative;
|
|
z-index: 1;
|
|
width: 136px;
|
|
height: 136px;
|
|
object-fit: contain;
|
|
filter:
|
|
drop-shadow(0 18px 24px rgba(0, 0, 0, 0.55))
|
|
drop-shadow(0 0 18px rgba(151, 118, 255, 0.3));
|
|
animation: icon-float 2.4s ease-in-out infinite;
|
|
}
|
|
|
|
.copy {
|
|
position: relative;
|
|
display: grid;
|
|
gap: 4px;
|
|
justify-items: center;
|
|
text-align: center;
|
|
}
|
|
|
|
.copy strong {
|
|
color: var(--ink);
|
|
font-size: 22px;
|
|
font-weight: 900;
|
|
line-height: 1;
|
|
}
|
|
|
|
.copy span {
|
|
color: var(--muted);
|
|
font-size: 12.5px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.bar {
|
|
position: relative;
|
|
width: 230px;
|
|
height: 4px;
|
|
margin-top: 2px;
|
|
overflow: hidden;
|
|
border-radius: 999px;
|
|
background: rgba(151, 118, 255, 0.14);
|
|
}
|
|
|
|
.bar span {
|
|
position: absolute;
|
|
inset: 0;
|
|
width: 46%;
|
|
border-radius: inherit;
|
|
background: linear-gradient(90deg, transparent, var(--purple) 40%, var(--orange) 74%, transparent);
|
|
box-shadow: 0 0 16px rgba(255, 109, 38, 0.32);
|
|
animation: bar-slide 1.35s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes grid-drift {
|
|
to { transform: translate3d(42px, 42px, 0); }
|
|
}
|
|
|
|
@keyframes icon-float {
|
|
0%, 100% { transform: translateY(0) scale(1); }
|
|
50% { transform: translateY(-5px) scale(1.015); }
|
|
}
|
|
|
|
@keyframes halo-breathe {
|
|
0%, 100% { opacity: 0.35; transform: rotate(45deg) scale(0.95); }
|
|
50% { opacity: 0.8; transform: rotate(45deg) scale(1.04); }
|
|
}
|
|
|
|
@keyframes trace-draw {
|
|
0% { stroke-dashoffset: 165; opacity: 0; }
|
|
36% { opacity: 1; }
|
|
64%, 100% { stroke-dashoffset: 0; opacity: 0.72; }
|
|
}
|
|
|
|
@keyframes bar-slide {
|
|
0% { transform: translateX(-120%); }
|
|
100% { transform: translateX(320%); }
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.grid,
|
|
.halo,
|
|
.trace,
|
|
.icon,
|
|
.bar span {
|
|
animation: none;
|
|
}
|
|
|
|
.trace {
|
|
stroke-dashoffset: 0;
|
|
opacity: 0.72;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="grid" aria-hidden="true"></div>
|
|
<main class="splash" role="status" aria-live="polite">
|
|
<div class="mark" aria-hidden="true">
|
|
<span class="halo"></span>
|
|
<span class="halo secondary"></span>
|
|
<svg class="traces" viewBox="0 0 220 220">
|
|
<path class="trace main" d="M28 154 C72 114, 88 108, 110 110 S156 116, 192 68" />
|
|
<path class="trace branch" d="M62 74 C100 88, 126 124, 158 166" />
|
|
<path class="trace base" d="M46 180 L174 180" />
|
|
</svg>
|
|
<img class="icon" src="/splash-icon.png" alt="" />
|
|
</div>
|
|
<div class="copy">
|
|
<strong>Gitty</strong>
|
|
<span>Starting workspace</span>
|
|
</div>
|
|
<div class="bar" aria-hidden="true"><span></span></div>
|
|
</main>
|
|
</body>
|
|
</html>
|