diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..52844e5 --- /dev/null +++ b/.gitignore @@ -0,0 +1,5 @@ +node_modules +dist +.astro +*.log +.DS_Store diff --git a/astro.config.mjs b/astro.config.mjs new file mode 100644 index 0000000..48fd85b --- /dev/null +++ b/astro.config.mjs @@ -0,0 +1,5 @@ +import { defineConfig } from 'astro/config'; + +// Astro builds with Vite under the hood. The page ships as static HTML; +// the interactive logic lives in a bundled client + + diff --git a/src/styles/style.css b/src/styles/style.css new file mode 100644 index 0000000..4570c60 --- /dev/null +++ b/src/styles/style.css @@ -0,0 +1,168 @@ +* { box-sizing: border-box; } +html, body { height: 100%; margin: 0; } +body { + background: #362582; + display: flex; + align-items: center; + justify-content: center; + font-family: 'Anton', 'Bebas Neue', Impact, sans-serif; + overflow: hidden; + transition: background 0.15s; +} +.logo { + font-size: 18vw; + font-weight: 400; + color: #f6d939; + line-height: 1.05; + letter-spacing: 0.01em; + transform: rotate(-10deg) skewX(-8deg); + transform-origin: center; + text-align: center; + user-select: none; + transition: color 0.15s; + white-space: pre-line; +} + +.panel { + position: fixed; + top: 12px; + right: 12px; + background: rgba(0,0,0,0.72); + color: #eee; + padding: 14px 18px; + border-radius: 10px; + font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; + font-size: 12px; + width: 320px; + backdrop-filter: blur(10px); + max-height: 96vh; + overflow-y: auto; + box-shadow: 0 6px 30px rgba(0,0,0,0.4); +} +.panel h1 { margin: 0 0 10px; font-size: 14px; color: #fff; } +.panel h2 { + margin: 14px 0 6px; + font-size: 11px; + color: #f6d939; + text-transform: uppercase; + letter-spacing: 0.08em; + border-bottom: 1px solid rgba(255,255,255,0.1); + padding-bottom: 4px; +} +.panel .hint { + font-size: 10px; + color: #aaa; + margin: 0 0 8px; + font-style: italic; +} +.panel label { + display: block; + margin: 6px 0 3px; + font-size: 11px; + color: #ccc; +} +.panel input[type=range] { width: 100%; margin: 0; } +.panel input[type=text], +.panel textarea, +.panel select { + width: 100%; + padding: 5px 8px; + background: rgba(255,255,255,0.08); + color: white; + border: 1px solid rgba(255,255,255,0.2); + border-radius: 4px; + font-family: inherit; + font-size: 12px; +} +.panel textarea { + resize: vertical; + min-height: 60px; +} +.panel input:focus, .panel textarea:focus, .panel select:focus { + outline: 2px solid #f6d939; + outline-offset: 1px; + border-color: rgba(246,217,57,0.6); +} +.toggle-panel:focus-visible, +.copy-btn:focus-visible, +.reset-btn:focus-visible { + outline: 2px solid #f6d939; + outline-offset: 2px; +} +.color-row { + display: grid; + grid-template-columns: auto 1fr auto; + gap: 8px; + align-items: center; + margin: 4px 0; +} +.color-row input[type=color] { + width: 36px; + height: 28px; + border: 1px solid rgba(255,255,255,0.2); + border-radius: 4px; + background: transparent; + cursor: pointer; + padding: 2px; +} +.color-row .swatch-label { font-size: 11px; color: #ccc; } +.color-row .hex { font-size: 10px; color: #aaa; text-align: right; width: 60px; } +.val { color: #f6d939; font-weight: bold; } +.row-2col { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 8px; +} +.panel code { + display: block; + background: rgba(0,0,0,0.5); + padding: 8px; + margin-top: 10px; + border-radius: 4px; + font-size: 10px; + max-height: 220px; + overflow-y: auto; + white-space: pre; + color: #aaa; + font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; +} +.copy-btn, .reset-btn { + width: 100%; + padding: 6px; + margin-top: 6px; + border-radius: 4px; + cursor: pointer; + font-family: inherit; + font-size: 11px; +} +.copy-btn { + background: rgba(246,217,57,0.15); + color: #f6d939; + border: 1px solid rgba(246,217,57,0.4); +} +.copy-btn:hover { background: rgba(246,217,57,0.25); } +.copy-btn.copied { background: rgba(120,200,120,0.25); color: #cfc; border-color: rgba(120,200,120,0.5); } +.reset-btn { + background: rgba(255,255,255,0.05); + color: #ccc; + border: 1px solid rgba(255,255,255,0.15); +} +.reset-btn:hover { background: rgba(255,255,255,0.1); } + +.toggle-panel { + position: fixed; + top: 12px; + left: 12px; + background: rgba(0,0,0,0.6); + color: white; + border: 1px solid rgba(255,255,255,0.2); + padding: 6px 10px; + border-radius: 4px; + cursor: pointer; + font-family: inherit; + font-size: 11px; + z-index: 10; +} +summary.toggle-panel { list-style: none; } +summary.toggle-panel::-webkit-details-marker { display: none; } +.disclosure { position: static; }