-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathd.html
More file actions
225 lines (206 loc) · 12.2 KB
/
Copy pathd.html
File metadata and controls
225 lines (206 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
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
<!DOCTYPE html>
<html lang="en" class="dark">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>D's era</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;600;700;800&family=Space+Grotesk:wght@500;700&display=swap" rel="stylesheet">
<script src="https://unpkg.com/lucide@latest"></script>
<style>
:root {
--brand-gold: #fbbf24;
--brand-dark: #020617;
}
body {
font-family: 'Plus Jakarta Sans', sans-serif;
background-color: var(--brand-dark);
color: #f1f5f9;
overflow-x: hidden;
}
.mesh-gradient {
position: fixed;
top: 0; left: 0; width: 100%; height: 100%;
background:
radial-gradient(at 0% 0%, rgba(251, 191, 36, 0.1) 0px, transparent 50%),
radial-gradient(at 100% 0%, rgba(249, 115, 22, 0.1) 0px, transparent 50%),
radial-gradient(at 50% 100%, rgba(30, 64, 175, 0.15) 0px, transparent 50%);
z-index: -1;
}
.glass-card {
background: rgba(15, 23, 42, 0.3);
backdrop-filter: blur(20px) saturate(180%);
border: 1px solid rgba(255, 255, 255, 0.08);
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}
.hero-text {
font-family: 'Space Grotesk', sans-serif;
background: linear-gradient(to right, #fff 20%, #fbbf24 80%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.share-btn {
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.share-btn:hover {
transform: translateY(-3px) scale(1.05);
}
@keyframes pulse-gold {
0%, 100% { box-shadow: 0 0 0 0 rgba(251, 191, 36, 0.4); }
50% { box-shadow: 0 0 0 15px rgba(251, 191, 36, 0); }
}
.badge-pulse { animation: pulse-gold 2s infinite; }
</style>
</head>
<body class="antialiased">
<div class="mesh-gradient"></div>
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-10">
<nav class="flex justify-between items-center mb-16">
<div class="flex items-center gap-2 group cursor-pointer">
<div class="w-10 h-10 bg-amber-400 rounded-lg flex items-center justify-center font-black text-slate-900">D</div>
<span class="font-bold tracking-tighter text-xl">NEW ERA</span>
</div>
<div class="hidden md:flex gap-8 text-sm font-medium text-slate-400">
<a href="#" class="hover:text-amber-400 transition-colors">Vision</a>
<a href="#" class="hover:text-amber-400 transition-colors">Community</a>
<a href="#" class="hover:text-amber-400 transition-colors">Ambassador</a>
</div>
<button onclick="shareContent('wa')" class="px-5 py-2 rounded-full border border-white/10 hover:bg-white/5 transition-all text-sm font-semibold">
Share Now
</button>
</nav>
<div class="grid grid-cols-1 lg:grid-cols-12 gap-8 items-start">
<div class="lg:col-span-8 space-y-8">
<div class="glass-card rounded-[2.5rem] p-8 md:p-12 relative overflow-hidden">
<div class="absolute top-0 right-0 p-8 opacity-10">
<i data-lucide="zap" class="w-32 h-32 text-amber-400"></i>
</div>
<div class="inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-amber-400/10 border border-amber-400/20 text-amber-400 text-xs font-bold tracking-widest uppercase mb-8">
<span class="relative flex h-2 w-2">
<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-amber-400 opacity-75"></span>
<span class="relative inline-flex rounded-full h-2 w-2 bg-amber-400"></span>
</span>
The Evolution is Here
</div>
<h1 class="hero-text text-5xl md:text-7xl font-bold leading-tight mb-6">
Out with the Old. <br> In with <span class="text-amber-400 italic">Diptosman.</span>
</h1>
<p class="text-slate-400 text-lg md:text-xl max-w-2xl leading-relaxed mb-10">
Transitioning from <strong>V (Kim Taehyung)</strong> to the fresh, dynamic energy of <strong>D</strong>. It's more than a fan move—it's a community upgrade.
</p>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-12 text-sm">
<div class="p-4 rounded-2xl bg-white/5 border border-white/5">
<i data-lucide="smile" class="text-amber-400 mb-3"></i>
<h4 class="font-bold text-white mb-1">Playful Vibe</h4>
<p class="text-slate-500">Pure fun and positive energy only.</p>
</div>
<div class="p-4 rounded-2xl bg-white/5 border border-white/5">
<i data-lucide="crown" class="text-amber-400 mb-3"></i>
<h4 class="font-bold text-white mb-1">Fresh Creatives</h4>
<p class="text-slate-500">Supporting new-age digital art.</p>
</div>
<div class="p-4 rounded-2xl bg-white/5 border border-white/5">
<i data-lucide="heart" class="text-amber-400 mb-3"></i>
<h4 class="font-bold text-white mb-1">Kindness First</h4>
<p class="text-slate-500">A community that respects everyone.</p>
</div>
</div>
<button onclick="celebrate()" class="w-full md:w-auto px-10 py-5 bg-amber-400 hover:bg-amber-300 text-slate-900 font-extrabold rounded-2xl text-lg flex items-center justify-center gap-3 transition-all transform hover:-translate-y-1">
JOIN THE D FAM <i data-lucide="arrow-right"></i>
</button>
</div>
<div class="glass-card rounded-[2rem] p-8">
<h3 class="text-xl font-bold text-white mb-6 flex items-center gap-2">
<i data-lucide="share-2" class="text-amber-400"></i> Spread the Word
</h3>
<div class="grid grid-cols-2 md:grid-cols-4 gap-4">
<button onclick="shareContent('wa')" class="share-btn flex items-center justify-center gap-2 p-4 rounded-xl bg-[#25D366]/10 border border-[#25D366]/20 text-[#25D366]">
<i data-lucide="message-circle"></i> <span class="font-bold">WhatsApp</span>
</button>
<button onclick="shareContent('tw')" class="share-btn flex items-center justify-center gap-2 p-4 rounded-xl bg-white/10 border border-white/20 text-white">
<i data-lucide="twitter"></i> <span class="font-bold">X / Twitter</span>
</button>
<button onclick="shareContent('fb')" class="share-btn flex items-center justify-center gap-2 p-4 rounded-xl bg-[#1877F2]/10 border border-[#1877F2]/20 text-[#1877F2]">
<i data-lucide="facebook"></i> <span class="font-bold">Facebook</span>
</button>
<button onclick="copyLink()" class="share-btn flex items-center justify-center gap-2 p-4 rounded-xl bg-amber-400/10 border border-amber-400/20 text-amber-400">
<i data-lucide="link"></i> <span class="font-bold">Copy Link</span>
</button>
</div>
</div>
</div>
<div class="lg:col-span-4 space-y-8">
<div class="glass-card rounded-[2.5rem] overflow-hidden group">
<div class="h-32 bg-gradient-to-r from-amber-400 to-orange-500"></div>
<div class="px-8 pb-8 -mt-12 text-center">
<div class="relative inline-block">
<div class="w-24 h-24 rounded-full border-4 border-slate-900 bg-slate-800 mx-auto flex items-center justify-center text-3xl font-bold text-amber-400">
S
</div>
<div class="absolute bottom-0 right-0 w-8 h-8 bg-blue-500 border-4 border-slate-900 rounded-full flex items-center justify-center badge-pulse">
<i data-lucide="check" class="text-white w-4 h-4"></i>
</div>
</div>
<h2 class="mt-4 text-2xl font-black text-white uppercase tracking-tight">Soumi</h2>
<div class="text-amber-400 text-xs font-bold uppercase tracking-widest mb-4">Official Brand Ambassador</div>
<p class="text-slate-400 text-sm leading-relaxed mb-6 italic">
"The era of D is about freedom, fun, and being your authentic self. Join us!"
</p>
<div class="flex justify-center gap-4 border-t border-white/5 pt-6">
<div>
<div class="text-white font-bold">100%</div>
<div class="text-[10px] text-slate-500 uppercase">Vibe match</div>
</div>
<div class="w-px h-8 bg-white/10"></div>
<div>
<div class="text-white font-bold text-lg leading-none">∞</div>
<div class="text-[10px] text-slate-500 uppercase">Energy</div>
</div>
</div>
</div>
</div>
<div class="glass-card rounded-[2rem] p-6 text-center border-amber-400/20 border-2 border-dashed">
<div class="text-xs font-bold text-slate-500 mb-2 uppercase">Member Invitation</div>
<div class="text-lg font-bold text-white mb-4 italic">"Time to change your fan — V to D"</div>
<button onclick="shareContent('wa')" class="w-full py-3 bg-white text-slate-900 font-bold rounded-xl hover:bg-amber-400 transition-colors">
Send Invite 🚀
</button>
</div>
</div>
</div>
<footer class="mt-24 pb-12 text-center text-slate-500 text-xs tracking-widest uppercase">
Designed by <span class="text-white">Sreyanshu</span> •
Verified by <span class="text-white">Soumi</span> •
© <span id="year"></span> The New Era Global
</footer>
</div>
<script>
lucide.createIcons();
document.getElementById('year').textContent = new Date().getFullYear();
const shareMessage = "It’s time to change your fan — V to D. Join the New Era with Diptosman! 🚀";
const currentUrl = window.location.href;
function shareContent(platform) {
let url = '';
switch(platform) {
case 'wa':
url = `https://api.whatsapp.com/send?text=${encodeURIComponent(shareMessage + " " + currentUrl)}`;
break;
case 'tw':
url = `https://twitter.com/intent/tweet?text=${encodeURIComponent(shareMessage)}&url=${encodeURIComponent(currentUrl)}`;
break;
case 'fb':
url = `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(currentUrl)}`;
break;
}
window.open(url, '_blank');
}
function copyLink() {
navigator.clipboard.writeText(currentUrl);
alert("Link copied! Share it everywhere! 🔥");
}
function celebrate() {
alert('🎉 WELCOME TO THE NEW ERA! Team D is proud to have you.');
}
</script>
</body>
</html>