shadowdrop/index.html at main · seekdaseek/shadowdrop · 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
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ShadowDrop — Send Crypto Anonymously</title>
<style>
  * { margin: 0; padding: 0; box-sizing: border-box; }
  :root {
    --gold: #ffd700;
    --gold-dark: #c9a227;
    --gold-dim: #5a4a2a;
    --bg: #0a0900;
    --bg2: #141100;
    --bg3: #1a1600;
    --text: #fff8e7;
    --text-muted: #8a7a4a;
  }
  body { background: var(--bg); color: var(--text); font-family: Georgia, serif; overflow-x: hidden; }

  /* NAV */
  nav { display: flex; justify-content: space-between; align-items: center; padding: 24px 48px; border-bottom: 1px solid rgba(255,215,0,0.1); }
  .logo { font-size: 22px; font-weight: 700; color: var(--gold); letter-spacing: 1px; }
  .nav-link { color: var(--text-muted); text-decoration: none; font-size: 14px; transition: color 0.2s; }
  .nav-link:hover { color: var(--gold); }
  .nav-cta { background: var(--gold-dark); color: var(--bg); padding: 10px 24px; border-radius: 24px; text-decoration: none; font-weight: 700; font-size: 14px; transition: background 0.2s; }
  .nav-cta:hover { background: var(--gold); }

  /* HERO */
  .hero { text-align: center; padding: 120px 24px 80px; position: relative; overflow: hidden; }
  .hero-glow { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 600px; height: 600px; border-radius: 50%; background: radial-gradient(circle, rgba(255,215,0,0.06) 0%, transparent 70%); pointer-events: none; }
  .hero-icon { font-size: 80px; margin-bottom: 32px; display: block; animation: pulse 2.5s ease-in-out infinite; }
  @keyframes pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.08); } }
  .hero h1 { font-size: clamp(48px, 8vw, 96px); font-weight: 700; color: var(--gold); letter-spacing: 2px; margin-bottom: 16px; }
  .hero-sub { font-size: clamp(18px, 3vw, 28px); color: var(--gold-dark); margin-bottom: 48px; }
  .hero-desc { font-size: 18px; color: var(--text-muted); max-width: 560px; margin: 0 auto 48px; line-height: 1.7; }
  .hero-btns { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
  .btn-primary { background: var(--gold); color: var(--bg); padding: 16px 40px; border-radius: 32px; text-decoration: none; font-weight: 700; font-size: 16px; transition: transform 0.2s, background 0.2s; }
  .btn-primary:hover { transform: translateY(-2px); background: #ffe44d; }
  .btn-secondary { border: 1px solid var(--gold-dark); color: var(--gold); padding: 16px 40px; border-radius: 32px; text-decoration: none; font-size: 16px; transition: all 0.2s; }
  .btn-secondary:hover { background: rgba(255,215,0,0.08); }

  /* DIVIDER */
  .divider { display: flex; align-items: center; gap: 16px; padding: 0 48px; opacity: 0.2; }
  .divider-line { flex: 1; height: 1px; background: var(--gold); }

  /* FEATURES */
  .features { padding: 80px 48px; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; max-width: 1100px; margin: 0 auto; }
  .feature { background: var(--bg2); border: 1px solid rgba(255,215,0,0.1); border-radius: 16px; padding: 32px; transition: border-color 0.2s, transform 0.2s; }
  .feature:hover { border-color: rgba(255,215,0,0.3); transform: translateY(-4px); }
  .feature-icon { font-size: 40px; margin-bottom: 16px; }
  .feature h3 { font-size: 20px; color: var(--gold); margin-bottom: 10px; }
  .feature p { font-size: 15px; color: var(--text-muted); line-height: 1.6; }

  /* HOW IT WORKS */
  .how { padding: 80px 48px; text-align: center; background: var(--bg2); }
  .how h2 { font-size: 42px; color: var(--gold); margin-bottom: 60px; }
  .steps { display: flex; justify-content: center; gap: 40px; flex-wrap: wrap; max-width: 900px; margin: 0 auto; }
  .step { flex: 1; min-width: 180px; max-width: 220px; }
  .step-num { width: 56px; height: 56px; border-radius: 50%; border: 2px solid var(--gold); display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 700; color: var(--gold); margin: 0 auto 16px; }
  .step h4 { font-size: 17px; color: var(--text); margin-bottom: 8px; }
  .step p { font-size: 14px; color: var(--text-muted); line-height: 1.5; }
  .step-arrow { font-size: 24px; color: var(--gold-dim); align-self: center; padding-top: 8px; }

  /* TRUST */
  .trust { padding: 80px 48px; text-align: center; }
  .trust h2 { font-size: 42px; color: var(--gold); margin-bottom: 16px; }
  .trust-sub { font-size: 18px; color: var(--text-muted); margin-bottom: 48px; }
  .trust-items { display: flex; justify-content: center; gap: 48px; flex-wrap: wrap; }
  .trust-item { text-align: center; }
  .trust-item .val { font-size: 48px; font-weight: 700; color: var(--gold); }
  .trust-item .label { font-size: 14px; color: var(--text-muted); margin-top: 4px; }

  /* CTA */
  .cta { padding: 100px 48px; text-align: center; background: var(--bg3); border-top: 1px solid rgba(255,215,0,0.1); }
  .cta h2 { font-size: 48px; color: var(--gold); margin-bottom: 16px; }
  .cta p { font-size: 20px; color: var(--text-muted); margin-bottom: 40px; }

  /* FOOTER */
  footer { padding: 32px 48px; border-top: 1px solid rgba(255,215,0,0.1); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; }
  footer p { font-size: 13px; color: var(--text-muted); }
  .footer-links { display: flex; gap: 24px; }
  .footer-links a { font-size: 13px; color: var(--text-muted); text-decoration: none; }
  .footer-links a:hover { color: var(--gold); }

  /* SOLANA BADGE */
  .badge { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,215,0,0.08); border: 1px solid rgba(255,215,0,0.2); border-radius: 24px; padding: 8px 20px; font-size: 13px; color: var(--text-muted); margin-bottom: 48px; }
  .badge span { color: var(--gold); font-weight: 700; }
</style>
</head>
<body>

<nav>
  <div class="logo">💚 ShadowDrop</div>
  <div style="display:flex;gap:32px;align-items:center;">
    <a href="#features" class="nav-link">Features</a>
    <a href="#how" class="nav-link">How it works</a>
    <a href="https://solanamobile.com" class="nav-cta">Get on Seeker</a>
  </div>
</nav>

<section class="hero">
  <div class="hero-glow"></div>
  <span class="hero-icon">💚</span>
  <div class="badge">Built exclusively for <span>Seeker</span> · Powered by <span>Solana</span></div>
  <h1>ShadowDrop</h1>
  <p class="hero-sub">Send crypto to anyone. No wallet. No trace.</p>
  <p class="hero-desc">Create a claim link or QR code loaded with SOL or USDC. Share it anywhere. Recipient claims instantly — no wallet address needed.</p>
  <div class="hero-btns">
    <a href="https://solanamobile.com" class="btn-primary">Download on Seeker</a>
    <a href="#how" class="btn-secondary">See how it works</a>
  </div>
</section>

<div class="divider"><div class="divider-line"></div></div>

<section class="features" id="features">
  <div class="feature">
    <div class="feature-icon">🔒</div>
    <h3>Fully Anonymous</h3>
    <p>Sender and recipient wallets are never linked on-chain. Your identity stays private every time.</p>
  </div>
  <div class="feature">
    <div class="feature-icon">⚡</div>
    <h3>Instant Claims</h3>
    <p>Recipients claim SOL or USDC in seconds directly to their Seeker wallet — no setup required.</p>
  </div>
  <div class="feature">
    <div class="feature-icon">👥</div>
    <h3>Multi-Recipient</h3>
    <p>Split one drop between multiple people. Perfect for group gifts, airdrops, or team payments.</p>
  </div>
  <div class="feature">
    <div class="feature-icon">🔁</div>
    <h3>Cancel Anytime</h3>
    <p>Changed your mind? Cancel the drop before it's claimed and get a full refund instantly.</p>
  </div>
  <div class="feature">
    <div class="feature-icon">🔍</div>
    <h3>On-Chain Verified</h3>
    <p>Every drop is verifiable on Solscan. Tap the escrow address to confirm your funds are safe.</p>
  </div>
  <div class="feature">
    <div class="feature-icon">💵</div>
    <h3>SOL & USDC</h3>
    <p>Send native SOL or USDC stablecoin. Choose the right currency for every situation.</p>
  </div>
</section>

<section class="how" id="how">
  <h2>How it works</h2>
  <div class="steps">
    <div class="step">
      <div class="step-num">1</div>
      <h4>Create a Drop</h4>
      <p>Choose SOL or USDC, enter the amount, approve in your Seeker wallet.</p>
    </div>
    <div class="step-arrow">→</div>
    <div class="step">
      <div class="step-num">2</div>
      <h4>Share the Link</h4>
      <p>Copy the claim link or show the QR code. Send it via any messaging app.</p>
    </div>
    <div class="step-arrow">→</div>
    <div class="step">
      <div class="step-num">3</div>
      <h4>Recipient Claims</h4>
      <p>They open the link, connect their wallet, and receive the crypto instantly.</p>
    </div>
  </div>
</section>

<section class="trust">
  <h2>Built on Solana</h2>
  <p class="trust-sub">Fast, cheap, and verifiable on-chain</p>
  <div class="trust-items">
    <div class="trust-item">
      <div class="val">&lt;1s</div>
      <div class="label">Transaction speed</div>
    </div>
    <div class="trust-item">
      <div class="val">$0.00</div>
      <div class="label">Fee under $100</div>
    </div>
    <div class="trust-item">
      <div class="val">1%</div>
      <div class="label">Fee over $100 only</div>
    </div>
    <div class="trust-item">
      <div class="val">48h</div>
      <div class="label">Drop validity</div>
    </div>
  </div>
</section>

<section class="cta">
  <h2>Ready to drop?</h2>
  <p>Download ShadowDrop on your Seeker phone today.</p>
  <a href="https://solanamobile.com" class="btn-primary">Get it on Seeker dApp Store</a>
</section>

<footer>
  <p>© 2026 ShadowDrop. Built for Seeker on Solana.</p>
  <div class="footer-links">
    <a href="https://solscan.io">Verify on Solscan</a>
    <a href="https://solanamobile.com">Seeker</a>
    <a href="terms.html">Terms of Service</a>
    <a href="privacy.html">Privacy Policy</a>
    <a href="mailto:support@shadowdrop.app">Contact</a>
  </div>
</footer>

</body>
</html>