-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
360 lines (354 loc) · 23.5 KB
/
index.html
File metadata and controls
360 lines (354 loc) · 23.5 KB
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
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Carte Hesta | Accueil</title>
<meta name="description" content="Accueil de la carte narrative interactive. Accedez a la carte, connectez-vous via Discord et retrouvez les liens de la communaute." />
<meta property="og:title" content="Carte Hesta | Accueil" />
<meta property="og:description" content="Hub d entree vers la carte narrative interactive, les quetes live et la communaute." />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://cartehesta.dannytech.fr/" />
<meta property="og:image" content="https://cartehesta.dannytech.fr/assets/logo.png" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Carte Hesta | Accueil" />
<meta name="twitter:description" content="Entrez sur la carte, connectez-vous via Discord et suivez les quetes en direct." />
<meta name="twitter:image" content="https://cartehesta.dannytech.fr/assets/logo.png" />
<link rel="stylesheet" href="/home.css">
<link rel="stylesheet" href="/admin-panels.css">
<link rel="icon" type="image/png" href="/assets/logo.png">
</head>
<body>
<a class="home-skip-link" href="#home-main">Aller au contenu principal</a>
<div class="home-shell">
<header class="home-header">
<a class="home-brand" href="/" aria-label="Accueil Carte Hesta">
<span class="home-brand-mark" aria-hidden="true">
<img src="/assets/logo.png" alt="" />
</span>
<span class="home-brand-text">
<strong>Carte Hesta</strong>
<small>Hub narratif & carte interactive</small>
</span>
</a>
<nav class="home-nav" aria-label="Navigation accueil">
<a href="#home-main">Accueil</a>
<a href="#home-features">Fonctionnalites</a>
<a href="#home-community">Communaute</a>
<a href="/timeline/">Chronologie</a>
<a href="#home-live-title">Live</a>
</nav>
<div class="home-header-actions">
<a class="home-link-button home-link-button-primary" href="/map/">Entrer sur la carte</a>
<button id="home-login" class="home-link-button" type="button">Connexion Discord</button>
<button id="home-profile-toggle" class="home-link-button home-profile-toggle" type="button" aria-expanded="false" aria-controls="home-profile-popover" hidden>
<span id="home-profile-toggle-avatar" class="home-profile-toggle-avatar" aria-hidden="true">?</span>
<span id="home-profile-toggle-name" class="home-profile-toggle-name">Profil</span>
</button>
</div>
<div id="home-profile-popover" class="home-profile-popover" hidden>
<section id="home-session-card" class="home-session-card home-session-popover" aria-live="polite">
<div class="home-session-header">
<span id="home-avatar" class="home-avatar" aria-hidden="true">?</span>
<div>
<p id="home-username" class="home-session-name">Invite</p>
<p id="home-role" class="home-session-role">Mode lecture</p>
</div>
</div>
<p id="home-session-status" class="home-session-status">Connectez-vous pour modifier des lieux, gerer vos personnages et utiliser les outils admin.</p>
<div class="home-session-meta">
<div>
<span class="label">Provider</span>
<strong id="home-provider">Invite</strong>
</div>
<div>
<span class="label">Discord</span>
<strong id="home-discord">--</strong>
</div>
<div>
<span class="label">Derniere connexion</span>
<strong id="home-last-login">--</strong>
</div>
</div>
<div class="home-session-links">
<a id="home-session-map" class="home-inline-map-link" href="/map/">Aller a la carte</a>
<a id="home-admin-link" class="home-inline-map-link home-inline-map-link-admin" href="/map/" hidden>Acces admin rapide</a>
</div>
<div class="home-session-atmosphere" aria-hidden="true">
<div class="home-orb"></div>
<div class="home-lines"></div>
<p id="home-atmosphere-copy">Accueil narratif - entree rapide vers l'univers, la carte et la communaute.</p>
</div>
<div class="home-session-actions">
<button id="home-logout" class="home-link-button home-session-logout" type="button" hidden>Se deconnecter</button>
</div>
</section>
</div>
</header>
<main id="home-main" class="home-main">
<section class="home-hero" aria-labelledby="home-hero-title">
<div class="home-hero-copy">
<p id="home-kicker" class="home-kicker">Accueil - Hub narratif</p>
<h1 id="home-hero-title">Entrez dans l'univers avant d'ouvrir la carte</h1>
<p id="home-hero-lead" class="home-lead">
Explorez les lieux, suivez les quetes en direct, retrouvez votre groupe JDR et centralisez vos personnages.
Cette page sert de point d'entree rapide pour la carte et la communaute.
</p>
<div id="home-hero-tags" class="home-hero-tags" aria-label="Points forts">
<span class="home-hero-tag">Carte narrative</span>
<span class="home-hero-tag">Quetes live</span>
<span class="home-hero-tag">Groupes JDR</span>
<span class="home-hero-tag">Profils & personnages</span>
</div>
<div id="home-hero-metrics" class="home-hero-metrics" aria-label="Resume accueil">
<div class="home-hero-metric">
<span>Hub</span>
<strong>Carte + Communaute</strong>
</div>
<div class="home-hero-metric">
<span>Acces</span>
<strong>Lecture / Discord / Admin</strong>
</div>
<div class="home-hero-metric">
<span>Etat</span>
<strong>Version actuelle en production</strong>
</div>
</div>
<div class="home-hero-actions">
<a id="home-enter-map" class="home-cta home-cta-primary" href="/map/">Entrer sur la carte</a>
</div>
<p id="home-auth-note" class="home-auth-note" role="status" aria-live="polite">Verification de la session...</p>
</div>
<aside class="home-hero-side">
<section class="home-hero-visual" aria-label="Apercu visuel de la carte">
<div class="home-map-showcase">
<article class="home-map-floating-card" aria-hidden="true">
<div class="home-map-floating-header">
<span class="home-map-floating-pill">Lieu mis en avant</span>
<strong id="home-floating-title">Les terres d'Hesta</strong>
</div>
<p id="home-floating-copy">Un apercu clair du monde, des routes, des villes et des quetes qui structurent vos campagnes.</p>
<div class="home-map-floating-tags">
<span>Carte</span>
<span>Lore</span>
<span>Quetes</span>
</div>
</article>
<div class="home-map-frame">
<img id="home-map-preview-image" src="/assets/home/mockups/map-preview-main.png" alt="Apercu de la carte Hesta" />
</div>
<img id="home-character-art" class="home-character-art" src="/assets/home/characters/Chevalier.png" alt="Chevalier de l'univers Hesta" />
</div>
</section>
</aside>
</section>
<section class="home-stats-strip" aria-label="Indicateurs de la communaute et de la carte">
<article class="home-stat-card">
<span class="home-stat-kicker">Communaute</span>
<strong>4</strong>
<span class="home-stat-label">canaux relies</span>
</article>
<article class="home-stat-card">
<span class="home-stat-kicker">Quetes</span>
<strong id="home-stat-news-value">0</strong>
<span id="home-stat-news-label" class="home-stat-label">mises a jour recentes</span>
</article>
<article class="home-stat-card">
<span class="home-stat-kicker">Exploration</span>
<strong id="home-stat-featured-value">0</strong>
<span id="home-stat-featured-label" class="home-stat-label">lieux mis en avant</span>
</article>
</section>
<section class="home-grid home-grid-topics" aria-label="Sections d'accueil principales">
<article id="home-features" class="home-card">
<p class="home-card-kicker">Explorer</p>
<h2>Fonctionnalites de la carte</h2>
<div class="home-feature-list" role="list">
<div class="home-feature-item" role="listitem">
<strong>Exploration</strong>
<p>Continents, lieux, favoris, filtres avances et navigation rapide.</p>
</div>
<div class="home-feature-item" role="listitem">
<strong>Quetes live</strong>
<p>Evenements de quete et flux temps reel pour suivre les evolutions.</p>
</div>
<div class="home-feature-item" role="listitem">
<strong>Profils & persos</strong>
<p>Personnages, groupes JDR, disponibilites et personnalisation du profil.</p>
</div>
</div>
<img class="home-features-bertholo" src="/assets/home/characters/Bertholo.png" alt="" aria-hidden="true" />
</article>
<article class="home-card">
<p class="home-card-kicker">Demarrer</p>
<h2>Comment commencer</h2>
<ol class="home-steps">
<li>
<strong>Entrez sur la carte</strong>
<p>Explorez en lecture seule ou connectez-vous ensuite.</p>
</li>
<li>
<strong>Connectez-vous via Discord</strong>
<p>Debloquez l'edition, le profil, les personnages et les groupes.</p>
</li>
<li>
<strong>Reprenez vos favoris</strong>
<p>Utilisez vos lieux favoris et votre dernier contexte pour repartir vite.</p>
</li>
</ol>
</article>
<article id="home-resume-card" class="home-card" hidden>
<p class="home-card-kicker">Reprendre</p>
<h2>Reprendre</h2>
<div class="home-resume-grid">
<div class="home-resume-metric">
<span class="label">Favoris locaux</span>
<strong id="home-resume-favorites">0</strong>
</div>
<div class="home-resume-metric">
<span class="label">Dernier lieu</span>
<strong id="home-resume-last-location">--</strong>
</div>
</div>
<div class="home-card-actions">
<a class="home-cta home-cta-secondary" href="/map/">Reprendre la carte</a>
<a class="home-cta home-cta-secondary" href="/map/">Mes lieux favoris</a>
</div>
<p id="home-resume-note" class="home-muted">Connecte pour retrouver vos reperes plus rapidement.</p>
</article>
<article id="home-community" class="home-card home-card-community">
<p class="home-card-kicker">Rester connecte</p>
<h2>Communaute</h2>
<div class="home-community-highlights">
<a id="home-community-discord-link" class="home-community-highlight home-community-highlight-link" href="https://discord.com/" target="_blank" rel="noopener noreferrer">
<span id="home-community-discord-badge" class="home-community-badge">Discord</span>
<strong id="home-community-discord-title">Serveur principal</strong>
<p id="home-community-discord-copy">Organisation de parties, annonces et coordination des groupes JDR.</p>
<span class="home-community-link-label">Ouvrir</span>
</a>
<a id="home-community-youtube-link" class="home-community-highlight home-community-highlight-link" href="https://www.youtube.com/" target="_blank" rel="noopener noreferrer">
<span id="home-community-youtube-badge" class="home-community-badge">YouTube</span>
<strong id="home-community-youtube-title">Lore & recaps</strong>
<p id="home-community-youtube-copy">Videos, recaps et ambiances pour prolonger l'univers hors session.</p>
<span class="home-community-link-label">Regarder</span>
</a>
<a id="home-community-reddit-link" class="home-community-highlight home-community-highlight-link" href="https://www.reddit.com/" target="_blank" rel="noopener noreferrer">
<span id="home-community-reddit-badge" class="home-community-badge">Reddit</span>
<strong id="home-community-reddit-title">Discussions</strong>
<p id="home-community-reddit-copy">Partage d'idees, retours et archives communautaires.</p>
<span class="home-community-link-label">Explorer</span>
</a>
<a id="home-community-github-link" class="home-community-highlight home-community-highlight-link" href="https://github.com/Daneisra/Carte-Interactive" target="_blank" rel="noopener noreferrer">
<span class="home-community-badge">GitHub</span>
<strong>Projet source</strong>
<p>Suivi du projet, historique des changements et acces rapide au depot.</p>
<span class="home-community-link-label">Consulter</span>
</a>
</div>
<section id="home-discord-widget-card" class="home-discord-widget-card" aria-labelledby="home-discord-widget-title" hidden>
<div class="home-card-header">
<div>
<p class="home-card-kicker">Widget Discord</p>
<h3 id="home-discord-widget-title">Serveur en direct</h3>
</div>
<a id="home-discord-widget-link" class="home-inline-map-link" href="https://discord.com/" target="_blank" rel="noopener noreferrer">Ouvrir Discord</a>
</div>
<iframe
id="home-discord-widget"
class="home-discord-widget"
title="Widget Discord Carte Hesta"
src=""
loading="lazy"
allowtransparency="true"
frameborder="0"
sandbox="allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts">
</iframe>
</section>
<p id="home-community-note" class="home-muted home-community-note">Les cartes ci-dessus ouvrent directement vos canaux externes. Le widget Discord reprend l'activite du serveur en direct.</p>
<section class="home-support-panel" aria-labelledby="home-support-title">
<p class="home-card-kicker">Soutenir</p>
<h3 id="home-support-title">Soutenir le projet</h3>
<p class="home-muted">Soutenez le projet via PayPal ou Ko-fi, et retrouvez aussi les wishlists Roll20 utiles pour faire vivre la table.</p>
<div class="home-support-tags" aria-hidden="true">
<span>Wishlist Roll20</span>
<span>PayPal</span>
<span>Ko-fi</span>
</div>
<div class="home-support-links">
<a id="home-donate-link" class="home-cta home-cta-primary" href="https://paypal.me/Daneisra?country.x=FR&locale.x=fr_FR" target="_blank" rel="noopener noreferrer">Soutenir via PayPal</a>
<a id="home-kofi-link" class="home-cta home-cta-secondary" href="https://ko-fi.com/daneisra" target="_blank" rel="noopener noreferrer">Soutenir via Ko-fi</a>
</div>
<div class="home-support-roll20">
<strong>Wishlists Roll20</strong>
<div class="home-support-roll20-list">
<a class="home-link-button" href="https://app.roll20.net/wishlist/195278" target="_blank" rel="noopener noreferrer">Maps Maps Never Enough Maps !</a>
<a class="home-link-button" href="https://app.roll20.net/wishlist/255153" target="_blank" rel="noopener noreferrer">Give It To Me !</a>
<a class="home-link-button" href="https://app.roll20.net/wishlist/255154" target="_blank" rel="noopener noreferrer">40k Addiction</a>
<a class="home-link-button" href="https://app.roll20.net/wishlist/255155" target="_blank" rel="noopener noreferrer">Boarding, Matey!</a>
<a class="home-link-button" href="https://app.roll20.net/wishlist/255156" target="_blank" rel="noopener noreferrer">Token's Love ❤</a>
</div>
</div>
</section>
</article>
</section>
<section class="home-grid home-grid-newsband" aria-label="Nouveautes de la carte">
<article class="home-card home-card-wide" aria-labelledby="home-news-title">
<p class="home-card-kicker">Dernieres mises a jour</p>
<div class="home-card-header">
<h2 id="home-news-title">Nouveautes</h2>
<span id="home-news-status" class="home-status-pill">Chargement...</span>
</div>
<p id="home-news-note" class="home-muted">Derniers evenements de quete detectes. Ce bloc reste lisible meme si l'API est indisponible.</p>
<ul id="home-news-list" class="home-news-list">
<li class="home-news-empty">Chargement des nouveautes...</li>
</ul>
</article>
</section>
<section class="home-grid home-grid-discovery" aria-label="Live et lieux mis en avant">
<div class="home-discovery-stack">
<article class="home-card home-card-live" aria-labelledby="home-live-title">
<p class="home-card-kicker">Temps reel</p>
<div class="home-card-header">
<h2 id="home-live-title">Flux live</h2>
<span id="home-live-status" class="home-status-pill">Connexion...</span>
</div>
<p id="home-live-note" class="home-muted">Apercu temps reel des quetes, annotations et synchronisations.</p>
<ul id="home-live-list" class="home-live-list">
<li class="home-news-empty">En attente d'evenements live...</li>
</ul>
</article>
</div>
<div class="home-discovery-stack">
<article class="home-card home-card-featured" aria-labelledby="home-featured-title">
<p class="home-card-kicker">A explorer ensuite</p>
<div class="home-card-header">
<h2 id="home-featured-title">Lieux mis en avant</h2>
<span id="home-featured-status" class="home-status-pill">Chargement...</span>
</div>
<p id="home-featured-note" class="home-muted">Selection de lieux riches en medias, tags ou quetes pour reprendre rapidement l'exploration.</p>
<div id="home-featured-list" class="home-featured-grid">
<article class="home-featured-empty">Chargement des lieux mis en avant...</article>
</div>
</article>
</div>
</section>
</main>
<footer class="home-footer">
<div class="home-footer-left">
<p>© <span id="home-year"></span> Carte Hesta. Tous droits reserves.</p>
<p id="home-footer-note" class="home-footer-note">Projet narratif / JDR - fan project / page d'accueil officielle.</p>
</div>
<div class="home-footer-right">
<a href="/map/">Acceder a la carte</a>
<a href="/auth/session">Etat session</a>
<a id="home-footer-support" href="https://github.com/Daneisra/Carte-Interactive/issues" target="_blank" rel="noopener noreferrer">Bugs / support</a>
<a id="home-footer-contact" href="mailto:contact@cartehesta.local">Contact</a>
<a id="home-footer-credits" href="/docs/credits-assets.md">Credits assets</a>
</div>
<img class="home-footer-alienor-egg" src="/assets/home/characters/Alienor.png" alt="" aria-hidden="true" />
</footer>
</div>
<script type="module" src="/js/home.js"></script>
<script type="module" src="/js/home-admin.js"></script>
</body>
</html>