85 lines
3.3 KiB
HTML
85 lines
3.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<link rel="icon" type="image/png" href="./favicon.png" />
|
|
<title>claude-devtools</title>
|
|
<style>
|
|
/* Splash: spotlight gradient + noise overlay */
|
|
#splash {
|
|
position: fixed; inset: 0; z-index: 9999;
|
|
display: flex; flex-direction: column;
|
|
align-items: center; justify-content: center;
|
|
background: radial-gradient(ellipse 60% 50% at 50% 45%, #1c1c20 0%, #0e0e10 100%);
|
|
transition: opacity 0.3s ease-out;
|
|
}
|
|
#splash-noise {
|
|
position: absolute; inset: 0; width: 100%; height: 100%;
|
|
opacity: 0.03; pointer-events: none;
|
|
}
|
|
#splash-logo { margin-bottom: 18px; }
|
|
#splash-text {
|
|
font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
|
|
font-size: 15px; font-weight: 500; letter-spacing: 0.05em;
|
|
color: #a1a1aa;
|
|
}
|
|
|
|
/* Logo quadrant breathing — clockwise: TL → TR → BR → BL */
|
|
@keyframes splash-q {
|
|
0%, 100% { opacity: 0.12; }
|
|
10%, 25% { opacity: 0.95; }
|
|
40% { opacity: 0.12; }
|
|
}
|
|
.splash-q {
|
|
animation: splash-q 3.2s cubic-bezier(0.4, 0, 0.2, 1) infinite both;
|
|
}
|
|
|
|
/* Light theme splash overrides */
|
|
:root.light #splash {
|
|
background: radial-gradient(ellipse 60% 50% at 50% 45%, #fafafa 0%, #e4e4e7 100%);
|
|
}
|
|
:root.light #splash-text { color: #52525b; }
|
|
:root.light #splash-noise { opacity: 0.02; }
|
|
:root.light .splash-logo-bg { fill: #e4e4e7; }
|
|
:root.light .splash-logo-shape { fill: #52525b; }
|
|
</style>
|
|
<script>
|
|
// Flash prevention: Apply cached theme before React loads
|
|
(function() {
|
|
try {
|
|
var theme = localStorage.getItem('claude-devtools-theme-cache');
|
|
if (theme === 'light') {
|
|
document.documentElement.classList.add('light');
|
|
}
|
|
} catch(e) {}
|
|
})();
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<div id="splash">
|
|
<!-- SVG noise texture — matte paper grain -->
|
|
<svg id="splash-noise" xmlns="http://www.w3.org/2000/svg">
|
|
<filter id="noiseFilter">
|
|
<feTurbulence type="fractalNoise" baseFrequency="0.65" numOctaves="3" stitchTiles="stitch"/>
|
|
</filter>
|
|
<rect width="100%" height="100%" filter="url(#noiseFilter)"/>
|
|
</svg>
|
|
<!-- Logo with animated quadrants -->
|
|
<svg id="splash-logo" viewBox="0 0 56 56" width="56" height="56" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<rect class="splash-logo-bg" width="56" height="56" rx="14" fill="#1c1c20"/>
|
|
<!-- TL: small circle -->
|
|
<circle class="splash-q splash-logo-shape" style="animation-delay:0s" cx="19" cy="19" r="5" fill="#d4d4d8"/>
|
|
<!-- TR: right-facing semicircle -->
|
|
<path class="splash-q splash-logo-shape" style="animation-delay:0.8s" d="M34,12 A7,7 0 0,1 34,26 Z" fill="#d4d4d8"/>
|
|
<!-- BR: large circle -->
|
|
<circle class="splash-q splash-logo-shape" style="animation-delay:1.6s" cx="37" cy="37" r="6.5" fill="#d4d4d8"/>
|
|
<!-- BL: down-facing semicircle -->
|
|
<path class="splash-q splash-logo-shape" style="animation-delay:2.4s" d="M12,34 A7,7 0 0,0 26,34 Z" fill="#d4d4d8"/>
|
|
</svg>
|
|
<div id="splash-text">claude-devtools</div>
|
|
</div>
|
|
<div id="root"></div>
|
|
<script type="module" src="./main.tsx"></script>
|
|
</body>
|
|
</html>
|