Verbessere die Benutzeroberfläche und Meta-Tags in index.html für bessere Sichtbarkeit und Benutzererfahrung
This commit is contained in:
177
css/style.css
177
css/style.css
@@ -1,34 +1,157 @@
|
||||
/* Mobile-first styles */
|
||||
html,body,#stage{height:100%;margin:0;padding:0}
|
||||
html,body{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
|
||||
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,'Helvetica Neue',Arial;background:#111;color:#fff}
|
||||
#stage{position:relative;overflow:hidden;touch-action:none;-webkit-user-select:none;user-select:none}
|
||||
#overlay{position:absolute;left:12px;right:12px;top:18px;text-align:center}
|
||||
#overlay h1{margin:0;font-size:20px;letter-spacing:0.5px}
|
||||
.hint{opacity:.7;font-size:13px}
|
||||
/* ── Reset & base ── */
|
||||
html,body,#stage { height:100%; margin:0; padding:0; }
|
||||
html,body { -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; }
|
||||
|
||||
.finger{position:absolute;pointer-events:none;width:88px;height:88px;border-radius:50%;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;font-weight:600;color:#fff;background:rgba(255,255,255,0.06);border:3px solid rgba(255,255,255,0.12);backdrop-filter: blur(6px)}
|
||||
.finger .label{font-size:18px}
|
||||
.finger.highlight{border-color:#ffd54f;box-shadow:0 0 24px rgba(255,213,79,0.18)}
|
||||
.finger.winner{background:linear-gradient(135deg,#66ff99,#00b894);border-color:#00a86b;color:#00311a;box-shadow:0 8px 30px rgba(0,168,107,0.28);transform:translate(-50%,-50%) scale(1.05)}
|
||||
.finger.lost{opacity:0;transform:translate(-50%,-50%) scale(0.6);transition:all 350ms ease}
|
||||
.finger{transition:all 120ms linear}
|
||||
|
||||
@media (min-width:600px){
|
||||
.finger{width:72px;height:72px}
|
||||
.finger .label{font-size:16px}
|
||||
body {
|
||||
font-family: system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
|
||||
background: #0c0c14;
|
||||
color: #fff;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.pulse{animation:pulse 1200ms infinite}
|
||||
@keyframes pulse{0%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.08)}100%{transform:translate(-50%,-50%) scale(1)}}
|
||||
/* Subtle ambient background */
|
||||
body::before {
|
||||
content: '';
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background:
|
||||
radial-gradient(ellipse 80% 50% at 50% -5%, rgba(120,60,255,0.12) 0%, transparent 70%),
|
||||
radial-gradient(ellipse 55% 40% at 90% 110%, rgba(0,180,130,0.07) 0%, transparent 60%);
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.top-center-hint{position:absolute;left:50%;transform:translateX(-50%);top:8px;font-size:12px;opacity:.9}
|
||||
/* ── Stage ── */
|
||||
#stage {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
touch-action: none;
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* Spinner visuals (subtle ring around centroid while selecting) */
|
||||
#spinner{position:absolute;left:0;top:0;width:0;height:0;pointer-events:none;transform-origin:0 0}
|
||||
#spinner .ring{position:absolute;left:0;top:0;width:0;height:0;border-radius:50%;border:2px dashed rgba(255,255,255,0.06);box-shadow:0 2px 12px rgba(0,0,0,0.35)}
|
||||
#spinner .pointer{position:absolute;left:50%;top:0;width:12px;height:12px;margin-left:-6px;background:#ffd54f;border-radius:50%;box-shadow:0 6px 18px rgba(255,213,79,0.18)}
|
||||
/* ── Overlay card ── */
|
||||
#overlay {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 28px;
|
||||
transform: translateX(-50%);
|
||||
text-align: center;
|
||||
background: rgba(255,255,255,0.04);
|
||||
border: 1px solid rgba(255,255,255,0.09);
|
||||
border-radius: 20px;
|
||||
padding: 20px 28px 16px;
|
||||
backdrop-filter: blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
box-shadow: 0 4px 40px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.07);
|
||||
pointer-events: none;
|
||||
width: max-content;
|
||||
max-width: calc(100vw - 48px);
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
/* Transition helpers */
|
||||
.finger{transition:transform 130ms linear, opacity 220ms ease, border-color 160ms ease}
|
||||
#overlay h1 {
|
||||
margin: 0 0 8px;
|
||||
font-size: 24px;
|
||||
font-weight: 800;
|
||||
letter-spacing: -0.5px;
|
||||
background: linear-gradient(135deg, #c084fc 0%, #818cf8 45%, #34d399 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
#overlay p {
|
||||
margin: 0 0 4px;
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
color: rgba(255,255,255,0.65);
|
||||
}
|
||||
|
||||
.hint {
|
||||
font-size: 12px !important;
|
||||
color: rgba(255,255,255,0.35) !important;
|
||||
margin-top: 4px !important;
|
||||
}
|
||||
|
||||
/* ── Finger circles ── */
|
||||
.finger {
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
width: 88px;
|
||||
height: 88px;
|
||||
border-radius: 50%;
|
||||
transform: translate(-50%,-50%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: 700;
|
||||
color: rgba(255,255,255,0.88);
|
||||
background: rgba(255,255,255,0.07);
|
||||
border: 2px solid rgba(255,255,255,0.14);
|
||||
backdrop-filter: blur(8px);
|
||||
-webkit-backdrop-filter: blur(8px);
|
||||
box-shadow:
|
||||
0 0 0 1px rgba(255,255,255,0.04),
|
||||
0 8px 28px rgba(0,0,0,0.35);
|
||||
transition:
|
||||
transform 130ms ease,
|
||||
opacity 250ms ease,
|
||||
border-color 160ms ease,
|
||||
background 160ms ease,
|
||||
box-shadow 160ms ease,
|
||||
color 160ms ease;
|
||||
}
|
||||
|
||||
.finger .label {
|
||||
font-size: 22px;
|
||||
font-weight: 800;
|
||||
letter-spacing: -0.5px;
|
||||
}
|
||||
|
||||
/* Highlight: amber glow */
|
||||
.finger.highlight {
|
||||
border-color: #f59e0b;
|
||||
background: rgba(245,158,11,0.14);
|
||||
color: #fef3c7;
|
||||
box-shadow:
|
||||
0 0 0 2px rgba(245,158,11,0.18),
|
||||
0 0 32px rgba(245,158,11,0.28),
|
||||
0 8px 28px rgba(0,0,0,0.35);
|
||||
}
|
||||
|
||||
/* Winner: green gradient + strong glow */
|
||||
.finger.winner {
|
||||
background: linear-gradient(135deg, #34d399, #059669);
|
||||
border-color: #10b981;
|
||||
color: #022c22;
|
||||
font-weight: 900;
|
||||
box-shadow:
|
||||
0 0 0 3px rgba(52,211,153,0.28),
|
||||
0 0 48px rgba(52,211,153,0.35),
|
||||
0 8px 30px rgba(0,0,0,0.4);
|
||||
transform: translate(-50%,-50%) scale(1.08);
|
||||
}
|
||||
|
||||
/* Lost: shrink and fade */
|
||||
.finger.lost {
|
||||
opacity: 0;
|
||||
transform: translate(-50%,-50%) scale(0.45);
|
||||
transition: opacity 380ms ease, transform 380ms cubic-bezier(0.4,0,0.6,1);
|
||||
}
|
||||
|
||||
/* Pulse animation for winner */
|
||||
.pulse { animation: pulse 1400ms ease-in-out infinite; }
|
||||
|
||||
@keyframes pulse {
|
||||
0% { transform: translate(-50%,-50%) scale(1.08); }
|
||||
50% { transform: translate(-50%,-50%) scale(1.18); box-shadow: 0 0 0 5px rgba(52,211,153,0.18), 0 0 64px rgba(52,211,153,0.4), 0 8px 30px rgba(0,0,0,0.4); }
|
||||
100% { transform: translate(-50%,-50%) scale(1.08); }
|
||||
}
|
||||
|
||||
/* ── Responsive ── */
|
||||
@media (min-width: 600px) {
|
||||
.finger { width: 80px; height: 80px; }
|
||||
.finger .label { font-size: 19px; }
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user