DeblockStatus/index.html at main · Deblock-Studios/DeblockStatus · 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
187
188
189
<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Statut des services — Deblock Studios</title>
  <meta name="description" content="État en temps réel des sites, outils et infrastructures de Deblock Studios." />
  <meta name="theme-color" content="#0b0703" />
  <link rel="icon" href="images/logo-deblock.svg" type="image/svg+xml" />
  <meta property="og:title" content="Statut des services — Deblock Studios" />
  <meta property="og:description" content="État en temps réel des sites, outils et infrastructures de Deblock Studios." />
  <meta property="og:type" content="website" />

  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet" />
  <link rel="stylesheet" href="css/main.css" />
  <link rel="stylesheet" href="css/status.css" />
</head>
<body>
  <div class="noise" aria-hidden="true"></div>

  <nav class="nav" id="nav">
    <a href="#top" class="nav-logo" aria-label="Deblock Status — accueil">
      <img class="brand-logo" src="images/logo-deblock.svg" alt="" />
      <span class="brand-word">Deblock <span>Status</span></span>
    </a>

    <ul class="nav-links">
      <li><a href="#overview">Vue d'ensemble</a></li>
      <li><a href="#services">Services</a></li>
      <li><a href="#incidents">Incidents</a></li>
      <li>
        <a class="btn nav-cta" href="https://github.com/Deblock-Studios" target="_blank" rel="noopener">
          Notre GitHub
        </a>
      </li>
    </ul>

    <a class="nav-mobile" href="https://github.com/Deblock-Studios" aria-label="GitHub Deblock Studios" target="_blank" rel="noopener">
      <svg width="18" height="18" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 .5C5.65.5.5 5.65.5 12c0 5.08 3.29 9.39 7.86 10.91.58.11.79-.25.79-.55 0-.27-.01-1.17-.02-2.12-3.2.7-3.87-1.36-3.87-1.36-.52-1.33-1.28-1.68-1.28-1.68-1.04-.71.08-.7.08-.7 1.15.08 1.76 1.18 1.76 1.18 1.03 1.75 2.69 1.25 3.34.95.1-.74.4-1.25.72-1.54-2.55-.29-5.23-1.28-5.23-5.68 0-1.26.45-2.28 1.18-3.09-.12-.29-.51-1.46.11-3.05 0 0 .96-.31 3.15 1.18a10.9 10.9 0 0 1 5.74 0c2.19-1.49 3.15-1.18 3.15-1.18.62 1.59.23 2.76.11 3.05.74.81 1.18 1.83 1.18 3.09 0 4.41-2.69 5.38-5.25 5.67.41.35.77 1.05.77 2.12 0 1.53-.01 2.76-.01 3.14 0 .3.2.67.8.55A11.51 11.51 0 0 0 23.5 12C23.5 5.65 18.35.5 12 .5z"/></svg>
    </a>
  </nav>

  <noscript>
    <div class="noscript">
      Cette page a besoin de JavaScript pour afficher l'état des services.
    </div>
  </noscript>

  <header class="status-hero" id="top">
    <span class="eyebrow">État des services</span>
    <h1 class="status-title">Deblock <span class="grad">Status</span></h1>
    <p class="hero-sub">
      Supervision en direct des sites, outils et infrastructures du studio.
      Chaque service est testé automatiquement, les résultats sont conservés pour calculer la disponibilité.
    </p>
  </header>

  <main>
    <section class="section status-section" id="overview">
      <div class="overall" id="overall" data-status="unknown" aria-live="polite">
        <div class="overall-main">
          <span class="status-dot is-live" id="overall-dot" data-status="unknown" aria-hidden="true"></span>
          <div>
            <h2 class="overall-title" id="overall-title">Chargement du statut…</h2>
            <p class="overall-sub" id="overall-sub">Connexion à l'API de supervision.</p>
          </div>
        </div>

        <div class="overall-actions">
          <span class="updated" id="updated">
            <strong>—</strong>
            dernière vérification
          </span>
          <button class="btn btn-ghost btn-refresh" id="refresh" type="button">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" aria-hidden="true">
              <path d="M20 11a8 8 0 1 0-2.34 5.66M20 4v7h-7" />
            </svg>
            Actualiser
          </button>
        </div>
      </div>

      <div class="notice" id="notice" hidden></div>

      <div class="stats">
        <div class="stat">
          <b id="stat-uptime">—</b>
          <span>Disponibilité 24 h</span>
        </div>
        <div class="stat">
          <b id="stat-total">—</b>
          <span>Services surveillés</span>
        </div>
        <div class="stat">
          <b id="stat-incidents">—</b>
          <span>Services impactés</span>
        </div>
        <div class="stat">
          <b id="stat-latency">—</b>
          <span>Latence moyenne</span>
        </div>
      </div>
    </section>

    <section class="section status-section" id="services">
      <div class="section-head">
        <span class="eyebrow">Infrastructure</span>
        <h2>Services surveillés</h2>
        <p>
          Chaque barre représente les dernières vérifications, de la plus ancienne (gauche)
          à la plus récente (droite).
        </p>
      </div>

      <div class="services-groups" id="services-list">
        <div class="empty">Chargement des services…</div>
      </div>

      <div class="legend">
        <span><i class="l-up"></i>Opérationnel</span>
        <span><i class="l-degraded"></i>Ralenti</span>
        <span><i class="l-down"></i>Indisponible</span>
        <span><i class="l-empty"></i>Pas encore de mesure</span>
      </div>
    </section>

    <section class="section status-section" id="incidents">
      <div class="section-head">
        <span class="eyebrow">Historique</span>
        <h2>Incidents récents</h2>
        <p>Déduits des dernières vérifications conservées par l'API de supervision.</p>
      </div>

      <div class="incident-list" id="incidents-list">
        <div class="empty">Chargement…</div>
      </div>
    </section>
  </main>

  <footer class="footer">
    <div class="footer-grid">
      <div class="footer-brand">
        <a href="#top" class="nav-logo">
          <img class="brand-logo" src="images/logo-deblock.svg" alt="Deblock Studios" />
        </a>
        <p>
          Page de statut du studio. Les données proviennent d'un Worker Cloudflare qui teste
          chaque service à intervalle régulier.
        </p>
        <div class="socials">
          <a href="https://github.com/Deblock-Studios" aria-label="GitHub" target="_blank" rel="noopener">
            <svg width="19" height="19" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 .5C5.65.5.5 5.65.5 12c0 5.08 3.29 9.39 7.86 10.91.58.11.79-.25.79-.55 0-.27-.01-1.17-.02-2.12-3.2.7-3.87-1.36-3.87-1.36-.52-1.33-1.28-1.68-1.28-1.68-1.04-.71.08-.7.08-.7 1.15.08 1.76 1.18 1.76 1.18 1.03 1.75 2.69 1.25 3.34.95.1-.74.4-1.25.72-1.54-2.55-.29-5.23-1.28-5.23-5.68 0-1.26.45-2.28 1.18-3.09-.12-.29-.51-1.46.11-3.05 0 0 .96-.31 3.15 1.18a10.9 10.9 0 0 1 5.74 0c2.19-1.49 3.15-1.18 3.15-1.18.62 1.59.23 2.76.11 3.05.74.81 1.18 1.83 1.18 3.09 0 4.41-2.69 5.38-5.25 5.67.41.35.77 1.05.77 2.12 0 1.53-.01 2.76-.01 3.14 0 .3.2.67.8.55A11.51 11.51 0 0 0 23.5 12C23.5 5.65 18.35.5 12 .5z"/></svg>
          </a>
        </div>
      </div>

      <div class="footer-col">
        <h5>Projets</h5>
        <ul>
          <li><a href="https://multicraft-info.netlify.app" target="_blank" rel="noopener">MultiCraft Info</a></li>
          <li><a href="https://multidb.vercel.app" target="_blank" rel="noopener">MultiDB</a></li>
          <li><a href="https://deblockcord.netlify.app/" target="_blank" rel="noopener">DeblockCord</a></li>
          <li><a href="https://blog-deblock-studios.vercel.app" target="_blank" rel="noopener">Blog</a></li>
        </ul>
      </div>

      <div class="footer-col">
        <h5>Supervision</h5>
        <ul>
          <li><a href="#services">Services</a></li>
          <li><a href="#incidents">Incidents</a></li>
          <li><a id="api-link" href="backend/README.md">Documentation API</a></li>
          <li><a href="https://github.com/Deblock-Studios" target="_blank" rel="noopener">GitHub</a></li>
        </ul>
      </div>
    </div>

    <div class="footer-bottom">
      <span>© 2026 Deblock Studios — Tous droits réservés</span>
      <span id="footer-status">Supervision en cours de connexion…</span>
    </div>
  </footer>

  <script src="js/config.js"></script>
  <script src="js/app.js"></script>
</body>
</html>