|
1 | | - |
2 | 1 | <!doctype html> |
3 | 2 | <html lang="en" data-lang="en"> |
4 | 3 | <head> |
|
14 | 13 | </head> |
15 | 14 | <body> |
16 | 15 | <header class="nav" id="siteNav"> |
17 | | - <div class="container nav-inner"> |
| 16 | + <div class="container nav-inner nav-container-wide"> |
18 | 17 | <div class="brand"><span class="logo-mark">M</span><span class="logo-text">Metridex</span></div> |
19 | 18 | <nav class="nav-links" aria-label="Primary"> |
20 | | - <a href="/">Home</a> |
21 | | - <a href="/#features">Features</a> |
22 | | - <a href="/#screens">Screens</a> |
23 | | - <a href="/#partners">Partners</a> |
24 | | - <a href="/#how-it-works">How it works</a> |
25 | | - <a href="/#security">Security</a> |
26 | | - <a href="/#pricing">Pricing</a> |
27 | | - <a href="/articles.html">Articles</a> |
28 | | - <a href="/videos.html" aria-current="page">Videos</a> |
29 | | - <a href="/#faq">FAQ</a> |
30 | | - <a href="/#contact">Contact</a> |
| 19 | + <a data-i18n="nav.home" href="/">Home</a> |
| 20 | + <a data-i18n="nav.features" href="/#features">Features</a> |
| 21 | + <a data-i18n="nav.screens" href="/#screens">Screens</a> |
| 22 | + <a data-i18n="nav.partners" href="/#partners">Partners</a> |
| 23 | + <a data-i18n="nav.how" href="/#how-it-works">How it works</a> |
| 24 | + <a data-i18n="nav.security" href="/#security">Security</a> |
| 25 | + <a data-i18n="nav.pricing" href="/#pricing">Pricing</a> |
| 26 | + <a data-i18n="nav.articles" href="/articles.html">Articles</a> |
| 27 | + <a data-i18n="nav.videos" href="/videos.html" aria-current="page">Videos</a> |
| 28 | + <a data-i18n="nav.faq" href="/#faq">FAQ</a> |
| 29 | + <a data-i18n="nav.contact" href="/#contact">Contact</a> |
31 | 30 | </nav> |
32 | 31 | <div class="nav-actions"> |
33 | 32 | <button id="langToggle" class="icon-btn" aria-label="Toggle language" title="EN / RU">EN</button> |
|
39 | 38 |
|
40 | 39 | <main class="section"> |
41 | 40 | <div class="container"> |
42 | | - <h1>Videos</h1> |
| 41 | + <h1 data-i18n="videos.title">Videos</h1> |
43 | 42 | <div class="videos-grid"> |
44 | 43 | <article class="video-card glass"> |
45 | 44 | <div class="thumb" data-video="promo"> |
46 | 45 | <img src="/posters/promo.jpg" alt="Promo video"> |
47 | 46 | <button class="play" aria-label="Play promo">▶</button> |
48 | 47 | </div> |
49 | | - <h3>Metridex — Promo</h3> |
50 | | - <p>60s intro for QuickScan and deep checks.</p> |
| 48 | + <h3 data-i18n="videos.promo_t">Metridex — Promo</h3> |
| 49 | + <p data-i18n="videos.promo_d">60s intro for QuickScan and deep checks.</p> |
51 | 50 | </article> |
52 | 51 | <article class="video-card glass"> |
53 | 52 | <div class="thumb" data-video="tour"> |
54 | 53 | <img src="/posters/tour.jpg" alt="Quick Tour video"> |
55 | 54 | <button class="play" aria-label="Play tour">▶</button> |
56 | 55 | </div> |
57 | | - <h3>Quick Tour</h3> |
58 | | - <p>2‑minute walkthrough of the main flows.</p> |
| 56 | + <h3 data-i18n="videos.tour_t">Quick Tour</h3> |
| 57 | + <p data-i18n="videos.tour_d">2‑minute walkthrough of the main flows.</p> |
59 | 58 | </article> |
60 | 59 | <article class="video-card glass"> |
61 | 60 | <div class="thumb" data-video="usecase"> |
62 | 61 | <img src="/posters/usecase.jpg" alt="Use case video"> |
63 | 62 | <button class="play" aria-label="Play use case">▶</button> |
64 | 63 | </div> |
65 | | - <h3>Use Case</h3> |
66 | | - <p>Scanning a token with red flags and next actions.</p> |
| 64 | + <h3 data-i18n="videos.use_t">Use Case</h3> |
| 65 | + <p data-i18n="videos.use_d">Scanning a token with red flags and next actions.</p> |
67 | 66 | </article> |
68 | 67 | </div> |
69 | 68 | </div> |
70 | 69 | </main> |
71 | 70 |
|
72 | | - <!-- Reuse the same modal --> |
73 | 71 | <div id="videoModal" class="modal" aria-modal="true" role="dialog" hidden> |
74 | 72 | <div class="modal-backdrop" data-close></div> |
75 | 73 | <div class="modal-dialog glass" role="document"> |
|
0 commit comments