-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
195 lines (175 loc) · 12.2 KB
/
index.html
File metadata and controls
195 lines (175 loc) · 12.2 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SRK - Verification System</title>
<link rel="stylesheet" href="style.css">
<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=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300&family=Jost:wght@300;400;500&display=swap" rel="stylesheet">
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
gold: '#c9a84c',
'gold-light': '#e0c47a',
}
}
}
}
</script>
</head>
<body class="antialiased min-h-screen relative flex flex-col" style="font-family: 'Jost', sans-serif; color: #e8e0d0;">
<!-- Background Overlay -->
<div class="fixed inset-0 pointer-events-none z-0 overflow-hidden">
<div class="absolute inset-0 bg-[#0c0b08]"></div>
<div class="absolute inset-0 bg-[url('bg.jpeg')] bg-cover bg-center opacity-30 scale-105" style="filter: grayscale(0.2) contrast(1.1);"></div>
<div class="absolute inset-0 bg-gradient-to-b from-transparent via-[#0c0b08]/40 to-[#0c0b08] opacity-95"></div>
</div>
<!-- Main Content -->
<div class="relative z-10 flex-grow">
<!-- HERO -->
<section class="fade-in flex flex-col items-center text-center pt-20 pb-12 px-6">
<div class="w-56 h-56 rounded-full flex items-center justify-center mb-6 overflow-hidden bg-black"
style="border: 1px solid rgba(201,168,76,0.3); box-shadow: 0 0 48px rgba(201,168,76,0.15);">
<img src="logo.png" alt="MK Gold Lab Logo" class="w-full h-full object-contain p-6">
</div>
<p style="color: #c9a84c; font-size: 0.6rem; font-weight: 500; letter-spacing: 0.28em; text-transform: uppercase; margin-bottom: 0.75rem;">
Official Verification System
</p>
<h1 style="font-family: 'Cormorant Garamond', Georgia, serif; font-size: clamp(2rem,5.5vw,3.6rem); font-weight: 300; line-height: 1; color: #e8e0d0; margin-bottom: 1rem;">
MK Gold Lab
</h1>
<p style="font-size: 0.88rem; font-weight: 600; color: #7a7060; letter-spacing: 0.04em; max-width: 24rem;">
Authenticate your bar with a single serial number
</p>
</section>
<!-- SEARCH CARD -->
<section class="w-full mx-auto px-5 mb-10" style="max-width: 580px;">
<div style="background: rgba(23,22,15,0.88); border: 1px solid rgba(201,168,76,0.28); border-radius: 2px; padding: 2rem; box-shadow: 0 24px 64px rgba(0,0,0,0.6); backdrop-filter: blur(8px);">
<h2 style="font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.55rem; font-weight: 400; color: #e8e0d0; text-align: center; margin-bottom: 0.3rem;">
Verify Your Bar
</h2>
<p style="font-size: 0.75rem; font-weight: 300; color: #7a7060; text-align: center; margin-bottom: 1.5rem; letter-spacing: 0.04em;">
Enter the serial number printed on your bar
</p>
<div class="flex gap-2">
<input id="serial-input" type="text" placeholder="e.g. KHI0B7C6Y"
class="flex-1 bg-[rgba(255,255,255,0.03)] border border-[rgba(201,168,76,0.2)] rounded-[2px] text-[#e8e0d0] text-[0.88rem] font-light py-[0.8rem] px-[1rem] outline-none transition-all duration-200 focus:border-[#c9a84c] focus:ring-4 focus:ring-[rgba(201,168,76,0.1)]">
<button id="search-btn"
style="background: #c9a84c; color: #0a0805; border: none; border-radius: 2px; font-family: 'Jost', sans-serif; font-size: 0.7rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; padding: 0.8rem 1.25rem; cursor: pointer; display: flex; align-items: center; gap: 0.4rem; white-space: nowrap; transition: background 0.2s;">
<span id="btn-icon">
<svg width="13" height="13" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
</svg>
</span>
<span id="btn-text">Search</span>
</button>
</div>
</div>
</section>
<!-- ERROR MESSAGE -->
<div id="error-message" class="hidden w-full mx-auto px-5 mb-8" style="max-width: 480px;">
<div style="background: rgba(192,57,43,0.1); border: 1px solid rgba(192,57,43,0.3); border-radius: 2px; padding: 0.85rem 1rem; display: flex; align-items: center; gap: 0.75rem;">
<svg style="color: #e87060; flex-shrink: 0;" width="17" height="17" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
</svg>
<div>
<p style="font-size: 0.83rem; font-weight: 500; color: #e87060;">Serial Number Not Found</p>
<p style="font-size: 0.7rem; font-weight: 300; color: #7a7060; margin-top: 0.1rem;">Please check the number and try again.</p>
</div>
</div>
</div>
<!-- PRODUCTS CAROUSEL -->
<section id="products-section" class="hidden w-full py-20 relative overflow-hidden group/main">
<div class="absolute top-8 left-1/2 -translate-x-1/2 text-[14vw] font-black uppercase pointer-events-none select-none text-[rgba(255,255,255,0.018)] tracking-[0.05em] whitespace-nowrap">
Authentic
</div>
<div class="relative z-10 text-center mb-14">
<h2 style="font-family: 'Cormorant Garamond', Georgia, serif; font-size: clamp(1.8rem,4vw,2.6rem); font-weight: 300; color: #e8e0d0;">
Our Products
</h2>
<div style="width: 48px; height: 1px; background: #c9a84c; margin: 1rem auto 0; opacity: 0.4;"></div>
</div>
<!-- Carousel Controls -->
<button id="prev-btn" class="absolute left-6 top-[58%] -translate-y-1/2 z-40 opacity-0 group-hover/main:opacity-100 transition-all duration-300 w-12 h-12 rounded-full border border-[rgba(201,168,76,0.3)] bg-[rgba(0,0,0,0.5)] backdrop-blur-md text-[#c9a84c] flex items-center justify-center cursor-pointer hover:border-[#c9a84c]">
<svg width="20" height="20" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24"><path d="M15 19l-7-7 7-7"/></svg>
</button>
<button id="next-btn" class="absolute right-6 top-[58%] -translate-y-1/2 z-40 opacity-0 group-hover/main:opacity-100 transition-all duration-300 w-12 h-12 rounded-full border border-[rgba(201,168,76,0.3)] bg-[rgba(0,0,0,0.5)] backdrop-blur-md text-[#c9a84c] flex items-center justify-center cursor-pointer hover:border-[#c9a84c]">
<svg width="20" height="20" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24"><path d="M9 5l7 7-7 7"/></svg>
</button>
<!-- Edge Fades -->
<div class="absolute inset-y-0 left-0 w-32 z-30 pointer-events-none bg-gradient-to-r from-[rgba(10,8,5,0.95)] to-transparent"></div>
<div class="absolute inset-y-0 right-0 w-32 z-30 pointer-events-none bg-gradient-to-l from-[rgba(10,8,5,0.95)] to-transparent"></div>
<!-- Carousel Track -->
<div class="overflow-hidden" id="carousel-container">
<div id="carousel-track" class="flex gap-6 px-4 transition-transform duration-500 ease-out" style="width: max-content;">
<!-- Products will be injected here -->
</div>
</div>
</section>
</div>
<!-- FOOTER -->
<footer style="margin-top: auto; border-top: 1px solid rgba(201,168,76,0.08); padding: 2rem 1.5rem; text-align: center;">
<p style="color: #fbbf24; font-size: 0.68rem; font-weight: 300; letter-spacing: 0.12em; text-transform: uppercase;">
© 2026 All Rights · Reserved MK Gold Lab
</p>
</footer>
<!-- MODAL -->
<div id="modal" class="hidden fixed inset-0 z-50 flex items-center justify-center p-4">
<!-- Backdrop -->
<div id="modal-backdrop" class="absolute inset-0 bg-[rgba(0,0,0,0.78)] backdrop-blur-md"></div>
<!-- Card -->
<div id="modal-card" class="relative z-10 w-full max-w-[400px] bg-[#17160f] border border-[rgba(201,168,76,0.3)] rounded-[2px] shadow-2xl overflow-y-auto max-h-[92vh]">
<!-- Top row -->
<div class="flex items-center justify-between p-6 pb-0">
<div class="inline-flex items-center gap-[0.4rem] bg-[rgba(74,222,128,0.08)] border border-[rgba(74,222,128,0.22)] rounded-[2px] px-[0.65rem] py-[0.25rem] color-[#4ade80] text-[0.58rem] font-medium tracking-[0.14em] uppercase text-[#4ade80]">
<svg width="9" height="9" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
</svg>
Verified
</div>
<button id="close-modal-btn" class="bg-[rgba(255,255,255,0.05)] border border-[rgba(255,255,255,0.08)] text-[#7a7060] rounded-[2px] px-[0.5rem] py-[0.25rem] text-[0.85rem] cursor-pointer hover:text-[#e8e0d0]">✕</button>
</div>
<!-- Hero -->
<div class="p-6 pt-5 pb-5 border-b border-[rgba(201,168,76,0.1)]">
<div class="w-12 h-12 rounded-full bg-[rgba(74,222,128,0.08)] border border-[rgba(74,222,128,0.25)] flex items-center justify-center mb-4">
<svg width="22" height="22" fill="none" stroke="#4ade80" stroke-width="2.5" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
</svg>
</div>
<h3 style="font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.55rem; font-weight: 300; color: #e8e0d0; margin-bottom: 0.25rem;">
Authenticity Confirmed
</h3>
<p style="font-size: 0.73rem; font-weight: 300; color: #7a7060; line-height: 1.55;">
This bar is verified from the Official MK Gold Lab production.
</p>
</div>
<!-- Details -->
<div id="modal-details" class="px-6">
<!-- Data will be injected here -->
</div>
<!-- Download Button -->
<div class="p-6 pt-5 pb-6">
<button id="download-btn"
style="width: 100%; background: #c9a84c; color: #0a0805; border: none; border-radius: 2px; font-family: 'Jost', sans-serif; font-size: 0.7rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; padding: 0.9rem 1rem; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 0.5rem; transition: background 0.2s;">
<svg width="13" height="13" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"/>
</svg>
Download Certificate
</button>
</div>
</div>
</div>
<!-- Copyright Footer -->
<footer class="relative z-10 py-12 text-center border-t border-white/5 bg-[#0a0805]/80 backdrop-blur-sm mt-auto">
<p class="text-[0.65rem] opacity-30 tracking-[0.25em] uppercase font-light">
© 2026 MK GOLD lab. All Rights Reserved.
</p>
</footer>
<script src="script.js"></script>
</body>
</html>