xFlip/d(d).html at main · Timeness/xFlip · GitHub

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
<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <title>New Era — Fan Move</title>
  <link href="https://fonts.googleapis.com/css2?family=Signika:wght@400;600;700&display=swap" rel="stylesheet">
  <style>
    :root{--bg:#0f172a;--card:#0b1220;--accent:#ffd166;--muted:#94a3b8}
    html,body{height:100%;margin:0;font-family:'Signika',system-ui,Segoe UI,Roboto,"Helvetica Neue",Arial}
    body{background:linear-gradient(180deg,#071427 0%, #081833 50%, #04101b 100%);color:#e6eef8;display:flex;align-items:center;justify-content:center;padding:32px}
    .card{width:100%;max-width:820px;background:linear-gradient(180deg,rgba(255,255,255,0.02),rgba(0,0,0,0.06));border-radius:16px;padding:28px;box-shadow:0 10px 30px rgba(2,6,23,0.6);border:1px solid rgba(255,255,255,0.03)}
    .header{display:flex;align-items:center;gap:16px}
    .logo{width:72px;height:72px;border-radius:12px;background:linear-gradient(135deg,var(--accent),#ff8a65);display:flex;align-items:center;justify-content:center;font-weight:700;color:#081427;font-size:28px}
    h1{margin:0;font-size:28px;letter-spacing:0.2px}
    p.lead{color:var(--muted);margin-top:8px;margin-bottom:18px}
    .content{display:grid;grid-template-columns:1fr 320px;gap:18px}
    .box{background:var(--card);padding:18px;border-radius:12px;border:1px solid rgba(255,255,255,0.02)}
    .callout{background:linear-gradient(90deg,rgba(255,209,102,0.08),rgba(255,138,101,0.04));padding:12px;border-radius:10px;margin-bottom:12px;color:#fff}
    .muted{color:var(--muted);font-size:14px}
    .brand{display:flex;flex-direction:column;align-items:center;gap:8px;padding:22px}
    .amb{font-weight:700;color:var(--accent);font-size:18px}
    .small{font-size:13px;color:var(--muted)}
    .cta{display:inline-block;padding:10px 14px;border-radius:10px;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.03);cursor:pointer;margin-top:10px}
    footer{margin-top:18px;text-align:center;color:var(--muted);font-size:13px}
    @media (max-width:760px){.content{grid-template-columns:1fr;}.logo{width:60px;height:60px;font-size:24px}}
  </style>
</head>
<body>
  <div class="card">
    <div class="header">
      <div class="logo">NE</div>
      <div>
        <h1>New Era — It's time to change your fan</h1>
        <p class="lead"> — Time to move the vibe. From <strong>V (Kim Taehyung)</strong> → <strong>D (Diptosman)</strong>. Join the new wave, spread the cheer, and keep it playful.</p>
      </div>
    </div><div class="content" style="margin-top:18px">
  <div>
    <div class="box">
      <div class="callout">"Old fandoms were great, but the future is bright — and D is the new delight!"</div>
      <h3>Why D?</h3>
      <p class="muted">Diptosman (aka <strong>D</strong>) represents fresh energy, creativity, and a fun community spirit. If you're ready for something new — playful, loud, and kind — this is your sign to switch teams.</p>

      <h4 style="margin-top:14px">How to join</h4>
      <ol class="muted">
        <li>Share the message: "New Era — D is here!"</li>
        <li>Update your profile pic or bio with a D sticker or emoji.</li>
        <li>Tag friends and invite them to the D fam.</li>
      </ol>

      <div style="margin-top:12px" class="small">Pro tip: Keep it friendly. Fandom moves are more fun when everyone's laughing.</div>
      <button class="cta" onclick="celebrate()">Join the New Era</button>
    </div>

    <footer>
      Made by Sreyanshu. © <span id="year"></span> New Era Movement
    </footer>
  </div>

  <div>
    <div class="box brand">
      <div style="font-size:12px;color:var(--muted)">Official</div>
      <div class="amb">Brand Ambassador</div>
      <div style="font-size:22px;font-weight:700">Soumi</div>
      <div class="small">Representative of fun &amp; fresh vibes</div>

      <div style="width:100%;height:12px"></div>

      <div style="width:100%">
        <div style="font-size:13px;color:var(--muted);margin-bottom:8px">Quick shoutouts</div>
        <div style="display:flex;gap:8px;flex-wrap:wrap">
          <span class="small">#NewEra</span>
          <span class="small">#TeamD</span>
          <span class="small">#Diptosman</span>
          <span class="small">#Soumi</span>
        </div>
      </div>
    </div>

    <div class="box" style="margin-top:12px;text-align:center">
      <div style="font-weight:700">Spread the word</div>
      <div class="muted" style="margin-top:8px">Copy this line and post it:</div>
      <div style="margin-top:8px;background:rgba(255,255,255,0.02);padding:8px;border-radius:8px;font-size:14px">It’s time to change your fan — V to D. Join the New Era!</div>
    </div>
  </div>
</div>

  </div>  <script>
    document.getElementById('year').textContent = new Date().getFullYear();
    function celebrate(){
      alert('Welcome to Team D! 🎉');
    }
  </script></body>
</html>