Skip to content

Commit 1252f38

Browse files
omarakhmedov-webomarakhmedov-web
authored
Add files via upload
1 parent 6cee5a7 commit 1252f38

1 file changed

Lines changed: 89 additions & 0 deletions

File tree

‎videos.html‎

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
2+
<!doctype html>
3+
<html lang="en" data-lang="en">
4+
<head>
5+
<meta charset="utf-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1">
7+
<title>Metridex — Videos</title>
8+
<meta name="description" content="Videos: promo, quick tours and use cases for Metridex QuickScan.">
9+
<link rel="preconnect" href="https://fonts.googleapis.com">
10+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
11+
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;800;900&display=swap" rel="stylesheet">
12+
<link rel="stylesheet" href="/styles.css">
13+
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
14+
</head>
15+
<body>
16+
<header class="nav" id="siteNav">
17+
<div class="container nav-inner">
18+
<div class="brand"><span class="logo-mark">M</span><span class="logo-text">Metridex</span></div>
19+
<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>
31+
</nav>
32+
<div class="nav-actions">
33+
<button id="langToggle" class="icon-btn" aria-label="Toggle language" title="EN / RU">EN</button>
34+
<button id="themeToggle" class="icon-btn" aria-label="Toggle theme" title="Toggle theme">🌙</button>
35+
</div>
36+
<button class="burger" id="burger" aria-label="Open menu" aria-expanded="false">☰</button>
37+
</div>
38+
</header>
39+
40+
<main class="section">
41+
<div class="container">
42+
<h1>Videos</h1>
43+
<div class="videos-grid">
44+
<article class="video-card glass">
45+
<div class="thumb" data-video="promo">
46+
<img src="/posters/promo.jpg" alt="Promo video">
47+
<button class="play" aria-label="Play promo">▶</button>
48+
</div>
49+
<h3>Metridex — Promo</h3>
50+
<p>60s intro for QuickScan and deep checks.</p>
51+
</article>
52+
<article class="video-card glass">
53+
<div class="thumb" data-video="tour">
54+
<img src="/posters/tour.jpg" alt="Quick Tour video">
55+
<button class="play" aria-label="Play tour">▶</button>
56+
</div>
57+
<h3>Quick Tour</h3>
58+
<p>2‑minute walkthrough of the main flows.</p>
59+
</article>
60+
<article class="video-card glass">
61+
<div class="thumb" data-video="usecase">
62+
<img src="/posters/usecase.jpg" alt="Use case video">
63+
<button class="play" aria-label="Play use case">▶</button>
64+
</div>
65+
<h3>Use Case</h3>
66+
<p>Scanning a token with red flags and next actions.</p>
67+
</article>
68+
</div>
69+
</div>
70+
</main>
71+
72+
<!-- Reuse the same modal -->
73+
<div id="videoModal" class="modal" aria-modal="true" role="dialog" hidden>
74+
<div class="modal-backdrop" data-close></div>
75+
<div class="modal-dialog glass" role="document">
76+
<button class="modal-close" aria-label="Close" data-close>✕</button>
77+
<div class="modal-body">
78+
<video id="lightboxVideo" controls playsinline poster="/posters/promo.jpg"></video>
79+
</div>
80+
</div>
81+
</div>
82+
83+
<footer class="footer">
84+
<div class="container"><p>© <span id="year"></span> Metridex.</p></div>
85+
</footer>
86+
87+
<script src="/script.js"></script>
88+
</body>
89+
</html>

0 commit comments

Comments
 (0)