angle-guessr/index.html at Master · GrandTh/angle-guessr · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
  <link rel="icon" href="/favicon.ico" sizes="any">
  <link rel="icon" type="image/png" sizes="32x32" href="/icon-32.png?v=2">
  <link rel="icon" type="image/png" sizes="16x16" href="/icon-16.png?v=2">
  <link rel="apple-touch-icon" href="/icon-192.png?v=2">
  <link rel="manifest" href="/manifest.json">
  <meta name="theme-color" content="#0f1222">
  <title>Angle Guessr</title>
  <style>
    :root{
      --bg:#0f1222; --panel:#171a2b; --ink:#e9ecff; --muted:#a6adda; --accent:#7c5cff;
      --good:#2bd576; --bad:#ff6b6b; --outline: rgba(255,255,255,.08);
    }
    *{box-sizing:border-box}
    html,body{height:100%}
    html{background:#0b0e1a}
    body{
      margin:0; font-family:Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;
      background: radial-gradient(1200px 800px at 70% -10%, #1a1f3a 0%, #0f1222 60%, #0b0e1a 100%);
      color:var(--ink); display:flex; align-items:center; justify-content:center;
      padding:24px;
      min-height:100vh; min-height:100dvh; min-height:100svh;
      padding-left:max(16px, env(safe-area-inset-left));
      padding-right:max(16px, env(safe-area-inset-right));
      padding-bottom:max(24px, env(safe-area-inset-bottom));
      -webkit-text-size-adjust:100%;
      overscroll-behavior:contain;
    }
    .app{width:min(920px, 100%);}

    .card{
      background:linear-gradient(180deg,#1a1e33 0%, #14182b 100%);
      border:1px solid rgba(255,255,255,.06);
      box-shadow:0 10px 30px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.04);
      border-radius:20px; padding:24px; backdrop-filter:blur(6px);
    }

    h1{
      margin:0 0 8px; font-size: clamp(40px, 6vw, 70px); letter-spacing:.3px;
      display:flex; align-items:center; justify-content:center; gap:12px;
    }
    .sub{ color:var(--muted); text-align:center; margin-bottom:18px; font-weight:700 }

    .stack{ display:grid; gap:14px; margin-top:8px; }
    .mode{
      display:flex; align-items:center; justify-content:space-between; gap:16px;
      width:100%;
      padding:18px 20px;
      background: var(--panel);
      border:1px solid var(--outline);
      border-radius:16px;
      text-decoration:none;
      color: var(--ink);
      transition: transform .05s ease, border-color .15s ease, box-shadow .15s ease, background .15s ease;
      box-shadow: 0 6px 16px rgba(0,0,0,.25);
    }
    .mode:hover{ border-color: rgba(124,92,255,.35); box-shadow:0 8px 22px rgba(124,92,255,.15); }
    .mode:active{ transform: translateY(1px); }

    .mode__label{
      display:flex; align-items:center; gap:10px; font-weight:700; letter-spacing:.2px;
      font-size: clamp(16px, 2.4vw, 20px);
    }
    .mode__streak{
      display:inline-flex; align-items:center; gap:8px;
      padding:8px 12px;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.12);
      background:#0e1326;
      color:var(--ink);
      font-weight:700;
      font-size: clamp(14px, 2.2vw, 16px);
      min-width:84px; justify-content:center;
    }

    .section{
      background: radial-gradient(600px 400px at 60% -20%, #1f2444, #151a2f);
      border:1px solid rgba(255,255,255,.06);
      border-radius:16px; padding:18px;
    }

    .footer{ margin-top:14px; text-align:center; color:var(--muted); font-size:14px }

    @media (max-width: 560px){
      .card{ padding:16px; border-radius:16px; }
      .stack{ gap:12px; }
      .mode{ padding:16px; border-radius:14px; }
    }
    @media (max-width: 360px){
      .card{ padding:12px; border-radius:14px; }
      .mode{ padding:14px; }
      .mode__streak{ padding:7px 10px; }
    }
    .madeby {
      position: fixed;
      bottom: 12px;
      left: 50%;
      transform: translateX(-50%);
      text-align: center;
      font-size: 13px;
      color: var(--muted);
      opacity: 0.75;
      letter-spacing: 0.3px;
      transition: opacity .2s ease, color .2s ease;
      pointer-events: none; /* évite les clics dessus */
    }

    .madeby strong {
      color: var(--ink);
    }

    .madeby:hover {
      opacity: 1;
      color: var(--accent);
    }
  </style>
</head>
<body>
  <div class="app">
    <div style="text-align:center;">
      <h1>🎯 Angle Guessr</h1>
      <div class="sub">(choose a mode)</div>
    </div>

    <div class="card">
      <div class="section">
        <div class="stack">
          <!-- Daily -->
          <a class="mode" href="/daily.html" id="btn-daily">
            <span class="mode__label">📅 Daily</span>
            <span class="mode__streak" id="daily-streak">🔥 0</span>
          </a>

          <!-- Endless (mode infini en anglais) -->
          <a class="mode" href="/game.html" id="btn-endless">
            <span class="mode__label">♾️ Endless</span>
            <span class="mode__streak" id="endless-streak">🔥 0</span>
          </a>
        </div>
      </div>

      <div class="footer">Best of luck !</div>
    </div>
    <footer class="madeby">
    Made with ❤️ by <strong>GrandTh</strong>
  </footer>
  </div>

  <script>
    // Clés de streak utilisées par tes deux modes
    const DAILY_STREAK_KEY   = 'angle_guessr_daily_streak_v1';
    const ENDLESS_STREAK_KEY = 'angle_guessr_streak_v1';

    function getNum(key){
      const v = Number(localStorage.getItem(key));
      return Number.isFinite(v) ? v : 0;
    }

    function setStreakBadge(id, value){
      const el = document.getElementById(id);
      if(!el) return;
      // 🔥 + valeur ; si 0 on affiche juste 0 pour rester explicite
      el.textContent = `🔥 ${value}`;
    }

    // Init affichage
    (function init(){
      setStreakBadge('daily-streak',   getNum(DAILY_STREAK_KEY));
      setStreakBadge('endless-streak', getNum(ENDLESS_STREAK_KEY));

      // Réagit aux changements depuis d'autres onglets
      window.addEventListener('storage', (e)=>{
        if(e.key === DAILY_STREAK_KEY){
          setStreakBadge('daily-streak', getNum(DAILY_STREAK_KEY));
        } else if(e.key === ENDLESS_STREAK_KEY){
          setStreakBadge('endless-streak', getNum(ENDLESS_STREAK_KEY));
        }
      }, { passive:true });
    })();
  </script>
</body>
</html>