WildDragonLLC/dragonflight
1
0
Fork 0
Code Issues 18 Pull requests 3 Projects Releases Packages Wiki Activity Actions

rebrand: Dragonflight — index.html brand names, splash screen, accent colors

Browse source
This commit is contained in:
Zac Gaetano 2026-05-21 22:22:12 -04:00
parent b82cc73cf1
commit b4642b3c78
1 changed files with 15 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
services/web-ui/public/index.html
View file

@ -4,7 +4,7 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<title>Library — Z-AMPP</title>
<title>Library — Dragonflight</title>
<link rel="stylesheet" href="css/common.css">
<style>
/* ── Library layout ── */
@ -236,8 +236,8 @@
font-size: 10px;
font-weight: 500;
font-variant-numeric: tabular-nums;
color: oklch(93% 0.008 250);
background: oklch(8% 0.010 250 / 0.75);
color: oklch(93% 0.008 32);
background: oklch(8% 0.010 30 / 0.75);
padding: 1px 5px;
border-radius: 3px;
}
@ -290,7 +290,7 @@
.drop-overlay {
position: fixed;
inset: 0;
background: oklch(55% 0.20 266 / 0.09);
background: oklch(62% 0.22 32 / 0.09);
border: 2px dashed var(--accent);
pointer-events: none;
opacity: 0;
@ -333,23 +333,23 @@
width: 26px;
height: 26px;
border-radius: var(--r-sm);
background: oklch(8% 0.010 250 / 0.75);
background: oklch(8% 0.010 30 / 0.75);
border: none;
display: flex;
align-items: center;
justify-content: center;
color: oklch(93% 0.008 250);
color: oklch(93% 0.008 32);
cursor: pointer;
transition: background var(--t-fast);
}
.asset-action-btn:hover { background: oklch(8% 0.010 250 / 0.9); }
.asset-action-btn:hover { background: oklch(8% 0.010 30 / 0.9); }
.asset-action-btn svg { width: 13px; height: 13px; }
.first-splash{position:fixed;inset:0;z-index:60;background:radial-gradient(ellipse at 50% 45%,#1a1d28 0%,#08090d 70%);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:24px;opacity:1;transition:opacity .55s ease-out, visibility .55s}
.first-splash{position:fixed;inset:0;z-index:60;background:radial-gradient(ellipse at 50% 45%,#1a1410 0%,#08060d 70%);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:24px;opacity:1;transition:opacity .55s ease-out, visibility .55s}
.first-splash.hidden{opacity:0;visibility:hidden;pointer-events:none}
.first-splash-img{width:min(420px,46vw);aspect-ratio:3/2;background-image:url(img/ampp-safe.png?v=hardhat3);background-size:contain;background-position:center;background-repeat:no-repeat;filter:drop-shadow(0 20px 40px rgba(31,58,208,.15))}
.first-splash-stamp{display:flex;align-items:center;gap:10px;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:oklch(55% 0.20 266)}
.first-splash-dot{width:8px;height:8px;background:oklch(55% 0.20 266);border-radius:50%;animation:fsPulse 1.4s ease-in-out infinite}
.first-splash-img{width:min(420px,46vw);aspect-ratio:3/2;background-image:url(img/ampp-safe.png?v=hardhat3);background-size:contain;background-position:center;background-repeat:no-repeat;filter:drop-shadow(0 20px 40px oklch(50% 0.20 32 / 0.15))}
.first-splash-stamp{display:flex;align-items:center;gap:10px;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:oklch(62% 0.22 32)}
.first-splash-dot{width:8px;height:8px;background:oklch(62% 0.22 32);border-radius:50%;animation:fsPulse 1.4s ease-in-out infinite}
@keyframes fsPulse{0%,100%{opacity:.35;transform:scale(.9)}50%{opacity:1;transform:scale(1.1)}}
.first-splash-title{font-size:13px;color:var(--text-secondary);letter-spacing:.04em}
.badge-live { background: oklch(64% 0.22 25 / 0.18); color: oklch(70% 0.22 25); border: 1px solid oklch(64% 0.22 25 / 0.4); animation: liveBlink 1.4s ease-in-out infinite; }
@ -359,15 +359,15 @@
<body>
<div id="firstSplash" class="first-splash" aria-hidden="true">
<div class="first-splash-img"></div>
<div class="first-splash-stamp"><span class="first-splash-dot"></span><span>AMPP Safe</span></div>
<div class="first-splash-title">Z-AMPP — Media Asset Management</div>
<div class="first-splash-stamp"><span class="first-splash-dot"></span><span>Dragonflight</span></div>
<div class="first-splash-title">Dragonflight — Media Asset Management</div>
</div>
<div class="shell">
<!-- Sidebar -->
<nav class="sidebar" aria-label="Main navigation">
<div class="sidebar-brand">
<img src="img/dragon-logo.png?v=1" alt="Wild Dragon" class="sidebar-logo">
<span class="sidebar-brand-name">Z-AMPP</span>
<img src="img/dragon-logo.png?v=1" alt="Dragonflight" class="sidebar-logo">
<span class="sidebar-brand-name">Dragonflight</span>
</div>
<nav class="sidebar-nav">
<a href="home.html" class="nav-item">