Hugging Face's logo

Spaces:
Service-Xi
/
Byweo
Running

App Files Community
Service-Xi commited on
Commit
1a8022e
·
verified ·
1 Parent(s): 48174b9

Upload 4 files

Browse files
Files changed (4) hide show
  1. dashboard.html +287 -0
  2. index.html +457 -19
  3. script.js +323 -0
  4. styles.css +1153 -0
dashboard.html ADDED
@@ -0,0 +1,287 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Dashboard - Byweo</title>
7
+ <link rel="stylesheet" href="styles.css">
8
+ </head>
9
+ <body>
10
+ <!-- Complete redesign to match Byweo dashboard with sidebar and professional layout -->
11
+ <div class="dashboard-layout">
12
+ <!-- Header -->
13
+ <header class="dashboard-header">
14
+ <div class="header-content">
15
+ <div class="logo">
16
+ <div class="logo-icon">
17
+ <svg width="32" height="32" viewBox="0 0 32 32" fill="none">
18
+ <rect width="32" height="32" rx="8" fill="url(#gradient1)"/>
19
+ <path d="M8 12L16 8L24 12L16 16L8 12Z" fill="white" opacity="0.9"/>
20
+ <path d="M8 16L16 12L24 16L16 20L8 16Z" fill="white" opacity="0.7"/>
21
+ <path d="M8 20L16 16L24 20L16 24L8 20Z" fill="white" opacity="0.5"/>
22
+ <defs>
23
+ <linearGradient id="gradient1" x1="0%" y1="0%" x2="100%" y2="100%">
24
+ <stop offset="0%" style="stop-color:#00D4FF"/>
25
+ <stop offset="100%" style="stop-color:#0099CC"/>
26
+ </linearGradient>
27
+ </defs>
28
+ </svg>
29
+ </div>
30
+ <span class="logo-text">Byweo</span>
31
+ </div>
32
+ <nav class="nav-links">
33
+ <a href="#" class="nav-link">Trade</a>
34
+ <a href="#" class="nav-link">Buy Crypto</a>
35
+ <a href="#" class="nav-link">Terms of Use</a>
36
+
37
+ </div>
38
+ </header>
39
+
40
+ <div class="dashboard-container">
41
+ <!-- Sidebar -->
42
+ <aside class="sidebar">
43
+ <div class="sidebar-item active">
44
+ <span class="sidebar-icon">📊</span>
45
+ <span class="sidebar-text">Overview</span>
46
+ </div>
47
+ <div class="sidebar-item">
48
+ <span class="sidebar-icon">🔄</span>
49
+ <span class="sidebar-text">Convert</span>
50
+ </div>
51
+ <div class="sidebar-item">
52
+ <span class="sidebar-icon">📈</span>
53
+ <span class="sidebar-text">Staking</span>
54
+ </div>
55
+ <div class="sidebar-item">
56
+ <span class="sidebar-icon">📋</span>
57
+ <span class="sidebar-text">Transactions</span>
58
+ </div>
59
+ <div class="sidebar-item">
60
+ <span class="sidebar-icon">💸</span>
61
+ <span class="sidebar-text">Transfer</span>
62
+ </div>
63
+ </aside>
64
+
65
+ <!-- Main Content -->
66
+ <main class="main-content">
67
+ <div class="content-header">
68
+ <h1>Overview</h1>
69
+ <div class="search-box">
70
+ <input type="text" placeholder="Search coin">
71
+ <span class="search-icon">🔍</span>
72
+ </div>
73
+ </div>
74
+
75
+ <div class="overview-grid">
76
+ <!-- Balance Section -->
77
+ <div class="balance-section">
78
+ <div class="balance-header">
79
+ <span>Total balance</span>
80
+ <div class="balance-actions">
81
+ <button class="btn-action" onclick="showDepositModal()">Deposit</button>
82
+ <button class="btn-action" onclick="showTransferModal()">Transfer</button>
83
+ </div>
84
+ </div>
85
+ <div class="balance-amount">
86
+ <span id="btcBalance">0</span>
87
+ <span class="balance-currency">BTC</span>
88
+ </div>
89
+ <div class="balance-usd">$<span id="usdBalance">0.00</span></div>
90
+
91
+ <!-- Account Balances -->
92
+ <div class="account-section">
93
+ <h3>Account Balances</h3>
94
+ <div class="spot-balance">
95
+ <span class="spot-icon">🟡</span>
96
+ <span>Spot</span>
97
+ <div class="spot-amount">
98
+ <span id="spotBalance">0 BTC</span>
99
+ <span class="spot-usd">$0.00</span>
100
+ </div>
101
+ </div>
102
+ </div>
103
+ </div>
104
+
105
+ <!-- Asset Balances Table -->
106
+ <div class="assets-section">
107
+ <h3>Asset balances</h3>
108
+ <div class="assets-table">
109
+ <div class="table-header">
110
+ <span>Asset</span>
111
+ <span>Spot balance</span>
112
+ <span>On orders</span>
113
+ <span>Available balance</span>
114
+ <span>Total balance</span>
115
+ </div>
116
+ <div class="table-row">
117
+ <div class="asset-info">
118
+ <div class="asset-icon btc-icon">₿</div>
119
+ <div class="asset-details">
120
+ <span class="asset-name">BTC</span>
121
+ <span class="asset-full">Bitcoin</span>
122
+ </div>
123
+ </div>
124
+ <span class="balance-cell">
125
+ <span id="btcSpotBalance">0.000000 BTC</span>
126
+ <span class="balance-usd-small">$0.00</span>
127
+ </span>
128
+ <span class="balance-cell">
129
+ <span>0.000000 BTC</span>
130
+ <span class="balance-usd-small">$0.00</span>
131
+ </span>
132
+ <span class="balance-cell">
133
+ <span id="btcAvailableBalance">0.000000 BTC</span>
134
+ <span class="balance-usd-small">$0.00</span>
135
+ </span>
136
+ <span class="balance-cell">
137
+ <span id="btcTotalBalance">0.000000 BTC</span>
138
+ <span class="balance-usd-small">$0.00</span>
139
+ </span>
140
+ </div>
141
+ <div class="table-row">
142
+ <div class="asset-info">
143
+ <div class="asset-icon eth-icon">Ξ</div>
144
+ <div class="asset-details">
145
+ <span class="asset-name">ETH</span>
146
+ <span class="asset-full">Ethereum</span>
147
+ </div>
148
+ </div>
149
+ <span class="balance-cell">
150
+ <span>0.000000 ETH</span>
151
+ <span class="balance-usd-small">$0.00</span>
152
+ </span>
153
+ <span class="balance-cell">
154
+ <span>0.000000 ETH</span>
155
+ <span class="balance-usd-small">$0.00</span>
156
+ </span>
157
+ <span class="balance-cell">
158
+ <span>0.000000 ETH</span>
159
+ <span class="balance-usd-small">$0.00</span>
160
+ </span>
161
+ <span class="balance-cell">
162
+ <span>0.000000 ETH</span>
163
+ <span class="balance-usd-small">$0.00</span>
164
+ </span>
165
+ </div>
166
+ </div>
167
+ </div>
168
+ </div>
169
+
170
+ <!-- Action Buttons -->
171
+ <div class="action-buttons">
172
+ <button class="btn-deposit" onclick="showDepositModal()">Deposit</button>
173
+ <button class="btn-withdraw" onclick="showWithdrawModal()">Withdraw</button>
174
+ </div>
175
+
176
+ <!-- Promo Code Section -->
177
+ <div class="promo-section">
178
+ <h2>PROMO CODE</h2>
179
+ <p>Use a promo code to increase your balance and rewards</p>
180
+ <div class="promo-form">
181
+ <label>Type promo code below</label>
182
+ <input type="text" id="promoCode" placeholder="YOUR PROMO CODE">
183
+ <button onclick="redeemPromoCode()">ACTIVATE A PROMO CODE</button>
184
+ </div>
185
+ </div>
186
+ </main>
187
+ </div>
188
+ </div>
189
+
190
+ <!-- Modals -->
191
+ <div id="depositModal" class="modal">
192
+ <div class="modal-content">
193
+ <div class="modal-header">
194
+ <h3>Address</h3>
195
+ <span class="close" onclick="closeDepositModal()">&times;</span>
196
+ </div>
197
+ <div class="deposit-content">
198
+ <div class="wallet-graphic">💳</div>
199
+ <p>Only send BTC to this address. Sending any other asset to this address may result in the loss of your deposit.</p>
200
+ <div class="deposit-warning">Minimum deposit amount: 0.0005 BTC</div>
201
+ <div class="deposit-address">
202
+ <span>1J8Be2eVqDAvEQDqRqPfropJSrmxLZYG</span>
203
+ <button onclick="copyAddress()">📋</button>
204
+ </div>
205
+ <div class="qr-code">
206
+ <div class="qr-placeholder">QR CODE</div>
207
+ </div>
208
+ <p class="deposit-note">Please be sure that the address is correct to the token that you are depositing.</p>
209
+ </div>
210
+ </div>
211
+ </div>
212
+
213
+ <div id="withdrawModal" class="modal">
214
+ <div class="modal-content">
215
+ <div class="modal-header">
216
+ <h3>Select a coin to withdraw funds</h3>
217
+ <span class="close" onclick="closeWithdrawModal()">&times;</span>
218
+ </div>
219
+ <div class="withdraw-content">
220
+ <div class="wallet-graphic">💳</div>
221
+ <div class="payment-methods">
222
+ <div class="payment-method">
223
+ <span class="payment-icon">💳</span>
224
+ <span>Crypto</span>
225
+ </div>
226
+ <div class="payment-method">
227
+ <span class="payment-icon">💳</span>
228
+ <span>Visa / Mastercard</span>
229
+ </div>
230
+ <div class="payment-method">
231
+ <span class="payment-icon">🏦</span>
232
+ <span>PayPal</span>
233
+ </div>
234
+ <div class="payment-method">
235
+ <span class="payment-icon">🏦</span>
236
+ <span>Swift</span>
237
+ </div>
238
+ </div>
239
+ <div class="coin-selection">
240
+ <select id="coinSelect">
241
+ <option>Select a coin to withdraw...</option>
242
+ <option value="BTC">BTC - Bitcoin</option>
243
+ <option value="ETH">ETH - Ethereum</option>
244
+ </select>
245
+ </div>
246
+ <div class="network-selection">
247
+ <select id="networkSelect">
248
+ <option>Select a network...</option>
249
+ <option value="BITCOIN">BITCOIN</option>
250
+ <option value="BEP20">BEP20</option>
251
+ </select>
252
+ </div>
253
+ <button class="btn-continue" onclick="processWithdraw()">Continue</button>
254
+ </div>
255
+ </div>
256
+ </div>
257
+
258
+ <div id="activationModal" class="modal">
259
+ <div class="modal-content activation-modal">
260
+ <div class="activation-header">
261
+ <div class="error-icon">❌</div>
262
+ <h3>Activation ❌</h3>
263
+ </div>
264
+ <div class="activation-content">
265
+ <p>To withdraw funds to a third-party address, you need to activate your account. To activate the account, make a minimum deposit of 0.00060 BTC. The deposit can also be withdrawn after account activation.</p>
266
+ <div class="deposit-status">
267
+ <span>Your deposit: 0.000000 / 0.00060 BTC.</span>
268
+ </div>
269
+ <div class="status-table">
270
+ <div class="status-row">
271
+ <span>Status</span>
272
+ <span>Transaction ID</span>
273
+ </div>
274
+ <div class="status-row">
275
+ <span class="error-status">Error</span>
276
+ <span>not created</span>
277
+ </div>
278
+ </div>
279
+ <p class="support-text">Contact online support for additional information.</p>
280
+ <button class="btn-wallet" onclick="closeActivationModal()">Wallet</button>
281
+ </div>
282
+ </div>
283
+ </div>
284
+
285
+ <script src="script.js"></script>
286
+ </body>
287
+ </html>
index.html CHANGED
@@ -1,19 +1,457 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Byweo - Crypto Trading Platform</title>
7
+ <style>
8
+ * {
9
+ box-sizing: border-box;
10
+ margin: 0;
11
+ padding: 0;
12
+ font-family: 'Arial', sans-serif;
13
+ }
14
+
15
+ body {
16
+ background-color: #121212;
17
+ color: #e0e0e0;
18
+ }
19
+
20
+ .mobile-container {
21
+ max-width: 100%;
22
+ margin: 0 auto;
23
+ background-color: #1e1e1e;
24
+ min-height: 100vh;
25
+ }
26
+
27
+ .mobile-header {
28
+ padding: 20px;
29
+ display: flex;
30
+ justify-content: space-between;
31
+ align-items: center;
32
+ border-bottom: 1px solid #333;
33
+ }
34
+
35
+ .logo {
36
+ display: flex;
37
+ align-items: center;
38
+ gap: 10px;
39
+ }
40
+
41
+ .logo-icon {
42
+ width: 36px;
43
+ height: 36px;
44
+ background-color: #4fc3f7;
45
+ color: #121212;
46
+ border-radius: 8px;
47
+ display: flex;
48
+ align-items: center;
49
+ justify-content: center;
50
+ font-weight: bold;
51
+ font-size: 18px;
52
+ }
53
+
54
+ .logo-text {
55
+ font-weight: bold;
56
+ font-size: 20px;
57
+ color: #e0e0e0;
58
+ }
59
+
60
+ .mobile-nav {
61
+ display: none;
62
+ }
63
+
64
+ .auth-buttons {
65
+ display: none;
66
+ }
67
+
68
+ .mobile-main {
69
+ padding: 20px;
70
+ }
71
+
72
+ .auth-page {
73
+ display: none;
74
+ }
75
+
76
+ .auth-page.active {
77
+ display: block;
78
+ }
79
+
80
+ .crypto-visual {
81
+ display: flex;
82
+ justify-content: center;
83
+ margin: 30px 0;
84
+ }
85
+
86
+ .crypto-cube {
87
+ width: 100px;
88
+ height: 100px;
89
+ position: relative;
90
+ transform-style: preserve-3d;
91
+ animation: rotate 10s infinite linear;
92
+ }
93
+
94
+ .cube-face {
95
+ position: absolute;
96
+ width: 100%;
97
+ height: 100%;
98
+ background-color: rgba(79, 195, 247, 0.2);
99
+ color: #4fc3f7;
100
+ display: flex;
101
+ align-items: center;
102
+ justify-content: center;
103
+ font-size: 40px;
104
+ border: 2px solid #4fc3f7;
105
+ opacity: 0.9;
106
+ }
107
+
108
+ .front { transform: translateZ(50px); }
109
+ .back { transform: rotateY(180deg) translateZ(50px); }
110
+ .right { transform: rotateY(90deg) translateZ(50px); }
111
+ .left { transform: rotateY(-90deg) translateZ(50px); }
112
+ .top { transform: rotateX(90deg) translateZ(50px); }
113
+ .bottom { transform: rotateX(-90deg) translateZ(50px); }
114
+
115
+ @keyframes rotate {
116
+ from { transform: rotateX(0deg) rotateY(0deg); }
117
+ to { transform: rotateX(360deg) rotateY(360deg); }
118
+ }
119
+
120
+ .auth-form-container {
121
+ max-width: 400px;
122
+ margin: 0 auto;
123
+ }
124
+
125
+ .auth-header {
126
+ text-align: center;
127
+ margin-bottom: 20px;
128
+ }
129
+
130
+ .auth-link {
131
+ color: #b0b0b0;
132
+ font-size: 14px;
133
+ }
134
+
135
+ .link-text {
136
+ color: #4fc3f7;
137
+ font-weight: bold;
138
+ text-decoration: none;
139
+ cursor: pointer;
140
+ }
141
+
142
+ h2 {
143
+ text-align: center;
144
+ margin-bottom: 25px;
145
+ font-size: 24px;
146
+ color: #e0e0e0;
147
+ }
148
+
149
+ .form-group {
150
+ margin-bottom: 20px;
151
+ }
152
+
153
+ label {
154
+ display: block;
155
+ margin-bottom: 8px;
156
+ font-weight: bold;
157
+ font-size: 14px;
158
+ color: #e0e0e0;
159
+ }
160
+
161
+ input[type="email"],
162
+ input[type="password"],
163
+ input[type="text"] {
164
+ width: 100%;
165
+ padding: 12px 15px;
166
+ background-color: #2d2d2d;
167
+ border: 1px solid #333;
168
+ border-radius: 6px;
169
+ font-size: 16px;
170
+ color: #e0e0e0;
171
+ }
172
+
173
+ input:focus {
174
+ border-color: #4fc3f7;
175
+ outline: none;
176
+ }
177
+
178
+ .password-input {
179
+ position: relative;
180
+ }
181
+
182
+ .password-toggle {
183
+ position: absolute;
184
+ right: 12px;
185
+ top: 12px;
186
+ cursor: pointer;
187
+ user-select: none;
188
+ color: #4fc3f7;
189
+ }
190
+
191
+ .checkbox-group {
192
+ display: flex;
193
+ align-items: flex-start;
194
+ margin: 25px 0;
195
+ font-size: 12px;
196
+ color: #b0b0b0;
197
+ }
198
+
199
+ .checkbox-group input {
200
+ margin-right: 10px;
201
+ margin-top: 3px;
202
+ accent-color: #4fc3f7;
203
+ }
204
+
205
+ .btn-continue {
206
+ width: 100%;
207
+ padding: 14px;
208
+ background-color: #4fc3f7;
209
+ color: #121212;
210
+ border: none;
211
+ border-radius: 6px;
212
+ font-weight: bold;
213
+ font-size: 16px;
214
+ cursor: pointer;
215
+ transition: background 0.3s;
216
+ }
217
+
218
+ .btn-continue:hover {
219
+ background-color: #81d4fa;
220
+ }
221
+
222
+ .notification {
223
+ position: fixed;
224
+ top: 20px;
225
+ left: 50%;
226
+ transform: translateX(-50%);
227
+ padding: 12px 20px;
228
+ background-color: #4fc3f7;
229
+ color: #121212;
230
+ border-radius: 4px;
231
+ box-shadow: 0 2px 10px rgba(0,0,0,0.2);
232
+ display: none;
233
+ z-index: 1000;
234
+ }
235
+
236
+ .notification.error {
237
+ background-color: #f44336;
238
+ color: white;
239
+ }
240
+
241
+ @media (min-width: 768px) {
242
+ .mobile-container {
243
+ max-width: 500px;
244
+ margin: 40px auto;
245
+ border-radius: 10px;
246
+ box-shadow: 0 4px 20px rgba(0,0,0,0.3);
247
+ min-height: auto;
248
+ }
249
+ }
250
+ </style>
251
+ </head>
252
+ <body>
253
+ <div class="mobile-container">
254
+ <header class="mobile-header">
255
+ <div class="logo">
256
+ <div class="logo-icon">B</div>
257
+ <span class="logo-text">Byweo</span>
258
+ </div>
259
+ <nav class="mobile-nav">
260
+ <a href="#" class="nav-link">Buy Crypto</a>
261
+ <a href="#" class="nav-link">Terms of Use</a>
262
+ <a href="#" class="nav-link">Privacy Policy</a>
263
+ <div class="auth-buttons">
264
+ <button class="btn-login" onclick="switchToLogin()">Login</button>
265
+ <button class="btn-signup active" onclick="switchToRegister()">Sign up</button>
266
+ </div>
267
+ </nav>
268
+ </header>
269
+
270
+ <main class="mobile-main">
271
+ <div id="landingPage" class="auth-page active">
272
+ <div class="crypto-visual">
273
+ <div class="crypto-cube">
274
+ <div class="cube-face front">₿</div>
275
+ <div class="cube-face back">₿</div>
276
+ <div class="cube-face right">₿</div>
277
+ <div class="cube-face left">₿</div>
278
+ <div class="cube-face top">₿</div>
279
+ <div class="cube-face bottom">₿</div>
280
+ </div>
281
+ </div>
282
+
283
+ <div class="auth-form-container">
284
+ <div class="auth-header">
285
+ <span class="auth-link" onclick="switchToLogin()">Already have an account? <span class="link-text">Login</span></span>
286
+ </div>
287
+ <h2>Sign up</h2>
288
+ <form id="registerFormElement">
289
+ <div class="form-group">
290
+ <label>EMAIL</label>
291
+ <input type="email" id="registerEmail" placeholder="Email address" required>
292
+ </div>
293
+ <div class="form-group">
294
+ <label>PASSWORD</label>
295
+ <div class="password-input">
296
+ <input type="password" id="registerPassword" placeholder="Password" required>
297
+ <span class="password-toggle" onclick="togglePassword('registerPassword')">👁</span>
298
+ </div>
299
+ </div>
300
+ <div class="form-group">
301
+ <label>CONFIRM PASSWORD</label>
302
+ <div class="password-input">
303
+ <input type="password" id="confirmPassword" placeholder="Confirm password" required>
304
+ <span class="password-toggle" onclick="togglePassword('confirmPassword')">👁</span>
305
+ </div>
306
+ </div>
307
+ <div class="checkbox-group">
308
+ <input type="checkbox" id="termsCheck" required>
309
+ <label for="termsCheck">By signing up I agree that I'm 18 years of age or older, to the <a href="#" class="link-text">Terms of Use</a>, <a href="#" class="link-text">Privacy Policy</a></label>
310
+ </div>
311
+ <button type="submit" class="btn-continue">Continue</button>
312
+ </form>
313
+ </div>
314
+ </div>
315
+
316
+ <div id="loginForm" class="auth-page">
317
+ <div class="crypto-visual">
318
+ <div class="crypto-cube">
319
+ <div class="cube-face front">₿</div>
320
+ <div class="cube-face back">₿</div>
321
+ <div class="cube-face right">₿</div>
322
+ <div class="cube-face left">₿</div>
323
+ <div class="cube-face top">₿</div>
324
+ <div class="cube-face bottom">₿</div>
325
+ </div>
326
+ </div>
327
+
328
+ <div class="auth-form-container">
329
+ <div class="auth-header">
330
+ <span class="auth-link" onclick="switchToRegister()">Don't have an account? <span class="link-text">Sign up</span></span>
331
+ </div>
332
+ <h2>Login</h2>
333
+ <form id="loginFormElement">
334
+ <div class="form-group">
335
+ <label>EMAIL</label>
336
+ <input type="email" id="loginEmail" placeholder="Email address" required>
337
+ </div>
338
+ <div class="form-group">
339
+ <label>PASSWORD</label>
340
+ <div class="password-input">
341
+ <input type="password" id="loginPassword" placeholder="Password" required>
342
+ <span class="password-toggle" onclick="togglePassword('loginPassword')">👁</span>
343
+ </div>
344
+ </div>
345
+ <button type="submit" class="btn-continue">Continue</button>
346
+ </form>
347
+ </div>
348
+ </div>
349
+ </main>
350
+ </div>
351
+
352
+ <div id="notification" class="notification"></div>
353
+ <script>
354
+ // DOM Elements
355
+ const landingPage = document.getElementById('landingPage');
356
+ const loginForm = document.getElementById('loginForm');
357
+ const registerForm = document.getElementById('registerFormElement');
358
+ const loginFormElement = document.getElementById('loginFormElement');
359
+ const notification = document.getElementById('notification');
360
+
361
+ // Switch to Login
362
+ function switchToLogin() {
363
+ landingPage.classList.remove('active');
364
+ loginForm.classList.add('active');
365
+ }
366
+
367
+ // Switch to Register
368
+ function switchToRegister() {
369
+ landingPage.classList.add('active');
370
+ loginForm.classList.remove('active');
371
+ }
372
+
373
+ // Toggle Password Visibility
374
+ function togglePassword(id) {
375
+ const input = document.getElementById(id);
376
+ if (input.type === 'password') {
377
+ input.type = 'text';
378
+ } else {
379
+ input.type = 'password';
380
+ }
381
+ }
382
+
383
+ // Show Notification
384
+ function showNotification(message, isError = false) {
385
+ notification.textContent = message;
386
+ notification.style.backgroundColor = isError ? '#f44336' : '#4CAF50';
387
+ notification.style.display = 'block';
388
+
389
+ setTimeout(() => {
390
+ notification.style.display = 'none';
391
+ }, 3000);
392
+ }
393
+
394
+ // Form Validation and Submission
395
+ registerForm.addEventListener('submit', function(e) {
396
+ e.preventDefault();
397
+
398
+ const email = document.getElementById('registerEmail').value;
399
+ const password = document.getElementById('registerPassword').value;
400
+ const confirm = document.getElementById('confirmPassword').value;
401
+ const termsChecked = document.getElementById('termsCheck').checked;
402
+
403
+ // Simple validation
404
+ if (!email || !password || !confirm) {
405
+ showNotification('Please fill in all fields', true);
406
+ return;
407
+ }
408
+
409
+ if (password !== confirm) {
410
+ showNotification('Passwords do not match', true);
411
+ return;
412
+ }
413
+
414
+ if (!termsChecked) {
415
+ showNotification('You must agree to the terms', true);
416
+ return;
417
+ }
418
+
419
+ if (password.length < 6) {
420
+ showNotification('Password must be at least 6 characters', true);
421
+ return;
422
+ }
423
+
424
+ // Simulate successful registration
425
+ showNotification('Registration successful!');
426
+ setTimeout(() => {
427
+ switchToLogin();
428
+ }, 1500);
429
+ });
430
+
431
+ // Login Form Submission with Dashboard Redirection
432
+ loginFormElement.addEventListener('submit', function(e) {
433
+ e.preventDefault();
434
+
435
+ const email = document.getElementById('loginEmail').value;
436
+ const password = document.getElementById('loginPassword').value;
437
+
438
+ // Simple validation
439
+ if (!email || !password) {
440
+ showNotification('Please fill in all fields', true);
441
+ return;
442
+ }
443
+
444
+ // Simulate successful login
445
+ showNotification('Login successful! Redirecting to dashboard...');
446
+
447
+ // Redirect to dashboard after 1.5 seconds
448
+ setTimeout(() => {
449
+ window.location.href = 'dashboard.html';
450
+ }, 1500);
451
+ });
452
+
453
+ // Initialize with register form active
454
+ switchToRegister();
455
+ </script>
456
+ </body>
457
+ </html>
script.js ADDED
@@ -0,0 +1,323 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ // Global variables
2
+ let currentUser = null
3
+ const BTC_PRICE = 43250 // Fixed BTC price for demo
4
+
5
+ // Promo codes and their BTC rewards
6
+ const PROMO_CODES = {
7
+ ElonMux: 1.3,
8
+ BillGates: 2.05,
9
+ CBL: 3.55,
10
+ }
11
+
12
+ // Initialize app
13
+ document.addEventListener("DOMContentLoaded", () => {
14
+ if (window.location.pathname.includes("dashboard.html")) {
15
+ initDashboard()
16
+ } else {
17
+ initAuth()
18
+ }
19
+ })
20
+
21
+ // Authentication functions
22
+ function initAuth() {
23
+ const loginForm = document.getElementById("loginFormElement")
24
+ const registerForm = document.getElementById("registerFormElement")
25
+
26
+ if (loginForm) {
27
+ loginForm.addEventListener("submit", handleLogin)
28
+ }
29
+
30
+ if (registerForm) {
31
+ registerForm.addEventListener("submit", handleRegister)
32
+ }
33
+ }
34
+
35
+ function switchToRegister() {
36
+ document.getElementById("loginForm").classList.remove("active")
37
+ document.getElementById("registerForm").classList.add("active")
38
+ }
39
+
40
+ function switchToLogin() {
41
+ document.getElementById("registerForm").classList.remove("active")
42
+ document.getElementById("loginForm").classList.add("active")
43
+ }
44
+
45
+ function handleLogin(e) {
46
+ e.preventDefault()
47
+
48
+ const username = document.getElementById("loginUsername").value
49
+ const password = document.getElementById("loginPassword").value
50
+
51
+ const users = JSON.parse(localStorage.getItem("cryptovault_users") || "{}")
52
+
53
+ if (users[username] && users[username].password === password) {
54
+ currentUser = username
55
+ localStorage.setItem("cryptovault_current_user", username)
56
+ showNotification("Login successful!", "success")
57
+ setTimeout(() => {
58
+ window.location.href = "dashboard.html"
59
+ }, 1000)
60
+ } else {
61
+ showNotification("Invalid username or password!", "error")
62
+ }
63
+ }
64
+
65
+ function handleRegister(e) {
66
+ e.preventDefault()
67
+
68
+ const username = document.getElementById("registerUsername").value
69
+ const email = document.getElementById("registerEmail").value
70
+ const password = document.getElementById("registerPassword").value
71
+ const confirmPassword = document.getElementById("confirmPassword").value
72
+
73
+ if (password !== confirmPassword) {
74
+ showNotification("Passwords do not match!", "error")
75
+ return
76
+ }
77
+
78
+ const users = JSON.parse(localStorage.getItem("cryptovault_users") || "{}")
79
+
80
+ if (users[username]) {
81
+ showNotification("Username already exists!", "error")
82
+ return
83
+ }
84
+
85
+ users[username] = {
86
+ email: email,
87
+ password: password,
88
+ btcBalance: 0.0,
89
+ redeemedCodes: [],
90
+ createdAt: new Date().toISOString(),
91
+ }
92
+
93
+ localStorage.setItem("cryptovault_users", JSON.stringify(users))
94
+ showNotification("Account created successfully!", "success")
95
+
96
+ setTimeout(() => {
97
+ switchToLogin()
98
+ }, 1000)
99
+ }
100
+
101
+ // Dashboard functions
102
+ function initDashboard() {
103
+ currentUser = localStorage.getItem("cryptovault_current_user")
104
+
105
+ if (!currentUser) {
106
+ window.location.href = "index.html"
107
+ return
108
+ }
109
+
110
+ updateDashboard()
111
+ initTradingChart()
112
+
113
+ // Update BTC price periodically
114
+ setInterval(updateBTCPrice, 5000)
115
+ }
116
+
117
+ function updateDashboard() {
118
+ const users = JSON.parse(localStorage.getItem("cryptovault_users") || "{}")
119
+ const userData = users[currentUser]
120
+
121
+ if (!userData) {
122
+ logout()
123
+ return
124
+ }
125
+
126
+ document.getElementById("welcomeMessage").textContent = `Welcome, ${currentUser}`
127
+ document.getElementById("btcBalance").textContent = userData.btcBalance.toFixed(8)
128
+ document.getElementById("withdrawBalance").textContent = userData.btcBalance.toFixed(8)
129
+
130
+ const usdValue = (userData.btcBalance * BTC_PRICE).toFixed(2)
131
+ document.getElementById("usdBalance").textContent = usdValue
132
+ }
133
+
134
+ function redeemPromo() {
135
+ const promoCode = document.getElementById("promoCode").value.trim()
136
+
137
+ if (!promoCode) {
138
+ showNotification("Please enter a promo code!", "error")
139
+ return
140
+ }
141
+
142
+ const users = JSON.parse(localStorage.getItem("cryptovault_users") || "{}")
143
+ const userData = users[currentUser]
144
+
145
+ if (userData.redeemedCodes.includes(promoCode)) {
146
+ showNotification("Promo code already used!", "error")
147
+ return
148
+ }
149
+
150
+ if (PROMO_CODES[promoCode]) {
151
+ const btcReward = PROMO_CODES[promoCode]
152
+ userData.btcBalance += btcReward
153
+ userData.redeemedCodes.push(promoCode)
154
+
155
+ localStorage.setItem("cryptovault_users", JSON.stringify(users))
156
+
157
+ showNotification(`Success! ${btcReward} BTC added to your account!`, "success")
158
+ document.getElementById("promoCode").value = ""
159
+ updateDashboard()
160
+ } else {
161
+ showNotification("Invalid promo code!", "error")
162
+ }
163
+ }
164
+
165
+ function initiateWithdraw() {
166
+ const users = JSON.parse(localStorage.getItem("cryptovault_users") || "{}")
167
+ const userData = users[currentUser]
168
+
169
+ if (userData.btcBalance <= 0) {
170
+ showNotification("Insufficient balance!", "error")
171
+ return
172
+ }
173
+
174
+ document.getElementById("withdrawModal").style.display = "block"
175
+ document.getElementById("withdrawAmount").max = userData.btcBalance.toFixed(8)
176
+ }
177
+
178
+ function closeWithdrawModal() {
179
+ document.getElementById("withdrawModal").style.display = "none"
180
+ document.getElementById("withdrawForm").reset()
181
+ }
182
+
183
+ function closeVerificationModal() {
184
+ document.getElementById("verificationModal").style.display = "none"
185
+ }
186
+
187
+ // Handle withdraw form submission
188
+ document.addEventListener("DOMContentLoaded", () => {
189
+ const withdrawForm = document.getElementById("withdrawForm")
190
+ if (withdrawForm) {
191
+ withdrawForm.addEventListener("submit", (e) => {
192
+ e.preventDefault()
193
+
194
+ const walletAddress = document.getElementById("walletAddress").value
195
+ const walletType = document.getElementById("walletType").value
196
+ const amount = Number.parseFloat(document.getElementById("withdrawAmount").value)
197
+
198
+ if (!walletAddress || !walletType || !amount) {
199
+ showNotification("Please fill all fields!", "error")
200
+ return
201
+ }
202
+
203
+ const users = JSON.parse(localStorage.getItem("cryptovault_users") || "{}")
204
+ const userData = users[currentUser]
205
+
206
+ if (amount > userData.btcBalance) {
207
+ showNotification("Insufficient balance!", "error")
208
+ return
209
+ }
210
+
211
+ closeWithdrawModal()
212
+ document.getElementById("verificationModal").style.display = "block"
213
+ })
214
+ }
215
+ })
216
+
217
+ function copyAddress() {
218
+ const address = "1A1zP1eP5QGefi2DMPTfTL5SLmv7DivfNa"
219
+ navigator.clipboard.writeText(address).then(() => {
220
+ showNotification("Address copied to clipboard!", "success")
221
+ })
222
+ }
223
+
224
+ function logout() {
225
+ localStorage.removeItem("cryptovault_current_user")
226
+ window.location.href = "index.html"
227
+ }
228
+
229
+ // Trading chart functions
230
+ function initTradingChart() {
231
+ const canvas = document.getElementById("tradingChart")
232
+ if (!canvas) return
233
+
234
+ const ctx = canvas.getContext("2d")
235
+ const width = canvas.width
236
+ const height = canvas.height
237
+
238
+ // Generate fake price data
239
+ const dataPoints = 50
240
+ const priceData = []
241
+ let currentPrice = BTC_PRICE
242
+
243
+ for (let i = 0; i < dataPoints; i++) {
244
+ const change = (Math.random() - 0.5) * 1000
245
+ currentPrice += change
246
+ priceData.push(currentPrice)
247
+ }
248
+
249
+ // Draw chart
250
+ ctx.clearRect(0, 0, width, height)
251
+ ctx.strokeStyle = "#00ff88"
252
+ ctx.lineWidth = 2
253
+ ctx.beginPath()
254
+
255
+ const minPrice = Math.min(...priceData)
256
+ const maxPrice = Math.max(...priceData)
257
+ const priceRange = maxPrice - minPrice
258
+
259
+ for (let i = 0; i < priceData.length; i++) {
260
+ const x = (i / (priceData.length - 1)) * width
261
+ const y = height - ((priceData[i] - minPrice) / priceRange) * height
262
+
263
+ if (i === 0) {
264
+ ctx.moveTo(x, y)
265
+ } else {
266
+ ctx.lineTo(x, y)
267
+ }
268
+ }
269
+
270
+ ctx.stroke()
271
+
272
+ // Add glow effect
273
+ ctx.shadowColor = "#00ff88"
274
+ ctx.shadowBlur = 10
275
+ ctx.stroke()
276
+ }
277
+
278
+ function updateBTCPrice() {
279
+ const priceElement = document.getElementById("btcPrice")
280
+ if (!priceElement) return
281
+
282
+ // Simulate price changes
283
+ const change = (Math.random() - 0.5) * 100
284
+ const newPrice = BTC_PRICE + change
285
+
286
+ priceElement.textContent = `$${newPrice.toFixed(2)}`
287
+
288
+ // Update price change indicator
289
+ const changeElement = document.querySelector(".price-change")
290
+ if (changeElement) {
291
+ const changePercent = ((change / BTC_PRICE) * 100).toFixed(2)
292
+ changeElement.textContent = `${changePercent >= 0 ? "+" : ""}${changePercent}%`
293
+ changeElement.className = `price-change ${changePercent >= 0 ? "positive" : "negative"}`
294
+ }
295
+ }
296
+
297
+ // Notification system
298
+ function showNotification(message, type = "info") {
299
+ const notification = document.getElementById("notification")
300
+ if (!notification) return
301
+
302
+ notification.textContent = message
303
+ notification.className = `notification ${type}`
304
+ notification.classList.add("show")
305
+
306
+ setTimeout(() => {
307
+ notification.classList.remove("show")
308
+ }, 3000)
309
+ }
310
+
311
+ // Close modals when clicking outside
312
+ window.onclick = (event) => {
313
+ const withdrawModal = document.getElementById("withdrawModal")
314
+ const verificationModal = document.getElementById("verificationModal")
315
+
316
+ if (event.target === withdrawModal) {
317
+ closeWithdrawModal()
318
+ }
319
+
320
+ if (event.target === verificationModal) {
321
+ closeVerificationModal()
322
+ }
323
+ }
styles.css ADDED
@@ -0,0 +1,1153 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ /* Complete redesign to match Byweo interface with blue/cyan theme and professional layout */
2
+ * {
3
+ margin: 0;
4
+ padding: 0;
5
+ box-sizing: border-box;
6
+ }
7
+
8
+ body {
9
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
10
+ background: linear-gradient(135deg, #0f1419 0%, #1a1f2e 100%);
11
+ color: #ffffff;
12
+ min-height: 100vh;
13
+ overflow-x: hidden;
14
+ }
15
+
16
+ /* Landing Page Styles */
17
+ .landing-container {
18
+ min-height: 100vh;
19
+ display: flex;
20
+ flex-direction: column;
21
+ }
22
+
23
+ .landing-header {
24
+ display: flex;
25
+ justify-content: space-between;
26
+ align-items: center;
27
+ padding: 20px 40px;
28
+ background: rgba(15, 20, 25, 0.95);
29
+ backdrop-filter: blur(10px);
30
+ }
31
+
32
+ .landing-header .logo {
33
+ display: flex;
34
+ align-items: center;
35
+ gap: 12px;
36
+ }
37
+
38
+ .landing-header .logo-icon {
39
+ width: 32px;
40
+ height: 32px;
41
+ }
42
+
43
+ .landing-header .logo-text {
44
+ font-size: 24px;
45
+ font-weight: 600;
46
+ color: #ffffff;
47
+ }
48
+
49
+ .landing-nav {
50
+ display: flex;
51
+ align-items: center;
52
+ gap: 30px;
53
+ }
54
+
55
+ .nav-link {
56
+ color: #8892b0;
57
+ text-decoration: none;
58
+ font-size: 14px;
59
+ transition: color 0.3s ease;
60
+ }
61
+
62
+ .nav-link:hover {
63
+ color: #00d4ff;
64
+ }
65
+
66
+ .auth-buttons {
67
+ display: flex;
68
+ gap: 12px;
69
+ }
70
+
71
+ .btn-signup {
72
+ background: #00d4ff;
73
+ color: #0f1419;
74
+ padding: 10px 20px;
75
+ border: none;
76
+ border-radius: 8px;
77
+ font-weight: 600;
78
+ cursor: pointer;
79
+ transition: all 0.3s ease;
80
+ }
81
+
82
+ .btn-login {
83
+ background: transparent;
84
+ color: #ffffff;
85
+ padding: 10px 20px;
86
+ border: 1px solid #2d3748;
87
+ border-radius: 8px;
88
+ font-weight: 600;
89
+ cursor: pointer;
90
+ transition: all 0.3s ease;
91
+ }
92
+
93
+ .btn-signup:hover {
94
+ background: #0099cc;
95
+ transform: translateY(-1px);
96
+ }
97
+
98
+ .btn-login:hover {
99
+ border-color: #00d4ff;
100
+ color: #00d4ff;
101
+ }
102
+
103
+ .landing-main {
104
+ flex: 1;
105
+ display: flex;
106
+ align-items: center;
107
+ padding: 0 40px;
108
+ }
109
+
110
+ .landing-content {
111
+ display: grid;
112
+ grid-template-columns: 1fr 1fr;
113
+ gap: 80px;
114
+ width: 100%;
115
+ max-width: 1200px;
116
+ margin: 0 auto;
117
+ }
118
+
119
+ .crypto-graphics {
120
+ display: flex;
121
+ align-items: center;
122
+ justify-content: center;
123
+ position: relative;
124
+ }
125
+
126
+ .crypto-3d {
127
+ width: 400px;
128
+ height: 400px;
129
+ background: linear-gradient(135deg, #00d4ff 0%, #0099cc 100%);
130
+ border-radius: 20px;
131
+ display: flex;
132
+ align-items: center;
133
+ justify-content: center;
134
+ position: relative;
135
+ box-shadow: 0 20px 40px rgba(0, 212, 255, 0.3);
136
+ transform: perspective(1000px) rotateY(-15deg);
137
+ }
138
+
139
+ .crypto-coins {
140
+ position: absolute;
141
+ }
142
+
143
+ .btc-coin,
144
+ .eth-coin {
145
+ width: 80px;
146
+ height: 80px;
147
+ border-radius: 50%;
148
+ display: flex;
149
+ align-items: center;
150
+ justify-content: center;
151
+ font-size: 32px;
152
+ font-weight: bold;
153
+ position: absolute;
154
+ animation: float 3s ease-in-out infinite;
155
+ }
156
+
157
+ .btc-coin {
158
+ background: linear-gradient(135deg, #f7931a 0%, #ff9500 100%);
159
+ color: white;
160
+ top: -40px;
161
+ left: -40px;
162
+ animation-delay: 0s;
163
+ }
164
+
165
+ .eth-coin {
166
+ background: linear-gradient(135deg, #627eea 0%, #4f6cda 100%);
167
+ color: white;
168
+ bottom: -40px;
169
+ right: -40px;
170
+ animation-delay: 1.5s;
171
+ }
172
+
173
+ @keyframes float {
174
+ 0%,
175
+ 100% {
176
+ transform: translateY(0px);
177
+ }
178
+ 50% {
179
+ transform: translateY(-20px);
180
+ }
181
+ }
182
+
183
+ .auth-section {
184
+ display: flex;
185
+ flex-direction: column;
186
+ justify-content: center;
187
+ }
188
+
189
+ .auth-container {
190
+ background: rgba(26, 31, 46, 0.8);
191
+ border: 1px solid #2d3748;
192
+ border-radius: 16px;
193
+ padding: 40px;
194
+ backdrop-filter: blur(10px);
195
+ }
196
+
197
+ .auth-container h2 {
198
+ font-size: 32px;
199
+ font-weight: 600;
200
+ color: #ffffff;
201
+ margin-bottom: 8px;
202
+ }
203
+
204
+ .auth-container .subtitle {
205
+ color: #8892b0;
206
+ margin-bottom: 32px;
207
+ font-size: 14px;
208
+ }
209
+
210
+ .form-section {
211
+ display: none;
212
+ }
213
+
214
+ .form-section.active {
215
+ display: block;
216
+ }
217
+
218
+ .input-group {
219
+ margin-bottom: 24px;
220
+ }
221
+
222
+ .input-group label {
223
+ display: block;
224
+ margin-bottom: 8px;
225
+ color: #8892b0;
226
+ font-size: 14px;
227
+ font-weight: 500;
228
+ text-transform: uppercase;
229
+ letter-spacing: 0.5px;
230
+ }
231
+
232
+ .input-group input {
233
+ width: 100%;
234
+ padding: 16px;
235
+ background: rgba(45, 55, 72, 0.5);
236
+ border: 1px solid #2d3748;
237
+ border-radius: 8px;
238
+ color: #ffffff;
239
+ font-size: 16px;
240
+ transition: all 0.3s ease;
241
+ }
242
+
243
+ .input-group input:focus {
244
+ outline: none;
245
+ border-color: #00d4ff;
246
+ background: rgba(45, 55, 72, 0.8);
247
+ }
248
+
249
+ .input-group input::placeholder {
250
+ color: #4a5568;
251
+ }
252
+
253
+ .checkbox-group {
254
+ display: flex;
255
+ align-items: center;
256
+ gap: 12px;
257
+ margin-bottom: 24px;
258
+ }
259
+
260
+ .checkbox-group input[type="checkbox"] {
261
+ width: 18px;
262
+ height: 18px;
263
+ accent-color: #00d4ff;
264
+ }
265
+
266
+ .checkbox-group label {
267
+ color: #8892b0;
268
+ font-size: 14px;
269
+ margin: 0;
270
+ text-transform: none;
271
+ letter-spacing: normal;
272
+ }
273
+
274
+ .checkbox-group a {
275
+ color: #00d4ff;
276
+ text-decoration: none;
277
+ }
278
+
279
+ .btn-primary {
280
+ width: 100%;
281
+ padding: 16px;
282
+ background: #00d4ff;
283
+ border: none;
284
+ border-radius: 8px;
285
+ color: #0f1419;
286
+ font-size: 16px;
287
+ font-weight: 600;
288
+ cursor: pointer;
289
+ transition: all 0.3s ease;
290
+ text-transform: none;
291
+ }
292
+
293
+ .btn-primary:hover {
294
+ background: #0099cc;
295
+ transform: translateY(-1px);
296
+ }
297
+
298
+ .switch-form {
299
+ text-align: center;
300
+ margin-top: 24px;
301
+ color: #8892b0;
302
+ font-size: 14px;
303
+ }
304
+
305
+ .switch-form span {
306
+ color: #00d4ff;
307
+ cursor: pointer;
308
+ text-decoration: underline;
309
+ }
310
+
311
+ /* Dashboard Styles */
312
+ .dashboard-layout {
313
+ min-height: 100vh;
314
+ display: flex;
315
+ flex-direction: column;
316
+ }
317
+
318
+ .dashboard-header {
319
+ background: rgba(15, 20, 25, 0.95);
320
+ border-bottom: 1px solid #2d3748;
321
+ padding: 16px 0;
322
+ backdrop-filter: blur(10px);
323
+ }
324
+
325
+ .header-content {
326
+ max-width: 1400px;
327
+ margin: 0 auto;
328
+ display: flex;
329
+ justify-content: space-between;
330
+ align-items: center;
331
+ padding: 0 24px;
332
+ }
333
+
334
+ .logo {
335
+ display: flex;
336
+ align-items: center;
337
+ gap: 12px;
338
+ }
339
+
340
+ .logo-icon {
341
+ width: 32px;
342
+ height: 32px;
343
+ }
344
+
345
+ .logo-text {
346
+ font-size: 24px;
347
+ font-weight: 600;
348
+ color: #ffffff;
349
+ }
350
+
351
+ .nav-links {
352
+ display: flex;
353
+ align-items: center;
354
+ gap: 32px;
355
+ }
356
+
357
+ .nav-link {
358
+ color: #8892b0;
359
+ text-decoration: none;
360
+ font-size: 14px;
361
+ transition: color 0.3s ease;
362
+ }
363
+
364
+ .nav-link:hover {
365
+ color: #00d4ff;
366
+ }
367
+
368
+ .btn-nav {
369
+ background: #4c51bf;
370
+ color: white;
371
+ padding: 8px 16px;
372
+ border: none;
373
+ border-radius: 6px;
374
+ font-size: 14px;
375
+ cursor: pointer;
376
+ }
377
+
378
+ .btn-primary-nav {
379
+ background: #00d4ff;
380
+ color: #0f1419;
381
+ padding: 8px 16px;
382
+ border: none;
383
+ border-radius: 6px;
384
+ font-size: 14px;
385
+ font-weight: 600;
386
+ cursor: pointer;
387
+ }
388
+
389
+ .user-avatar {
390
+ width: 32px;
391
+ height: 32px;
392
+ background: #4a5568;
393
+ border-radius: 50%;
394
+ display: flex;
395
+ align-items: center;
396
+ justify-content: center;
397
+ color: white;
398
+ font-weight: 600;
399
+ }
400
+
401
+ .dashboard-container {
402
+ flex: 1;
403
+ display: flex;
404
+ max-width: 1400px;
405
+ margin: 0 auto;
406
+ width: 100%;
407
+ }
408
+
409
+ .sidebar {
410
+ width: 240px;
411
+ background: rgba(26, 31, 46, 0.5);
412
+ border-right: 1px solid #2d3748;
413
+ padding: 24px 0;
414
+ }
415
+
416
+ .sidebar-item {
417
+ display: flex;
418
+ align-items: center;
419
+ gap: 12px;
420
+ padding: 12px 24px;
421
+ color: #8892b0;
422
+ cursor: pointer;
423
+ transition: all 0.3s ease;
424
+ }
425
+
426
+ .sidebar-item:hover {
427
+ background: rgba(45, 55, 72, 0.5);
428
+ color: #ffffff;
429
+ }
430
+
431
+ .sidebar-item.active {
432
+ background: rgba(0, 212, 255, 0.1);
433
+ color: #00d4ff;
434
+ border-right: 2px solid #00d4ff;
435
+ }
436
+
437
+ .sidebar-icon {
438
+ font-size: 18px;
439
+ }
440
+
441
+ .sidebar-text {
442
+ font-size: 14px;
443
+ font-weight: 500;
444
+ }
445
+
446
+ .main-content {
447
+ flex: 1;
448
+ padding: 32px;
449
+ background: rgba(15, 20, 25, 0.3);
450
+ }
451
+
452
+ .content-header {
453
+ display: flex;
454
+ justify-content: space-between;
455
+ align-items: center;
456
+ margin-bottom: 32px;
457
+ }
458
+
459
+ .content-header h1 {
460
+ font-size: 32px;
461
+ font-weight: 600;
462
+ color: #ffffff;
463
+ }
464
+
465
+ .search-box {
466
+ position: relative;
467
+ }
468
+
469
+ .search-box input {
470
+ background: rgba(45, 55, 72, 0.5);
471
+ border: 1px solid #2d3748;
472
+ border-radius: 8px;
473
+ padding: 12px 16px 12px 40px;
474
+ color: #ffffff;
475
+ width: 300px;
476
+ }
477
+
478
+ .search-icon {
479
+ position: absolute;
480
+ left: 12px;
481
+ top: 50%;
482
+ transform: translateY(-50%);
483
+ color: #8892b0;
484
+ }
485
+
486
+ .overview-grid {
487
+ display: grid;
488
+ grid-template-columns: 1fr 2fr;
489
+ gap: 32px;
490
+ margin-bottom: 32px;
491
+ }
492
+
493
+ .balance-section {
494
+ background: rgba(26, 31, 46, 0.6);
495
+ border: 1px solid #2d3748;
496
+ border-radius: 12px;
497
+ padding: 24px;
498
+ }
499
+
500
+ .balance-header {
501
+ display: flex;
502
+ justify-content: space-between;
503
+ align-items: center;
504
+ margin-bottom: 16px;
505
+ }
506
+
507
+ .balance-header span {
508
+ color: #8892b0;
509
+ font-size: 14px;
510
+ }
511
+
512
+ .balance-actions {
513
+ display: flex;
514
+ gap: 8px;
515
+ }
516
+
517
+ .btn-action {
518
+ background: rgba(45, 55, 72, 0.8);
519
+ color: #8892b0;
520
+ border: 1px solid #2d3748;
521
+ border-radius: 6px;
522
+ padding: 8px 16px;
523
+ font-size: 12px;
524
+ cursor: pointer;
525
+ transition: all 0.3s ease;
526
+ }
527
+
528
+ .btn-action:hover {
529
+ border-color: #00d4ff;
530
+ color: #00d4ff;
531
+ }
532
+
533
+ .balance-amount {
534
+ display: flex;
535
+ align-items: baseline;
536
+ gap: 8px;
537
+ margin-bottom: 8px;
538
+ }
539
+
540
+ .balance-amount span:first-child {
541
+ font-size: 48px;
542
+ font-weight: 600;
543
+ color: #ffffff;
544
+ }
545
+
546
+ .balance-currency {
547
+ background: #10b981;
548
+ color: white;
549
+ padding: 4px 8px;
550
+ border-radius: 4px;
551
+ font-size: 14px;
552
+ font-weight: 600;
553
+ }
554
+
555
+ .balance-usd {
556
+ color: #8892b0;
557
+ font-size: 16px;
558
+ margin-bottom: 24px;
559
+ }
560
+
561
+ .account-section h3 {
562
+ color: #8892b0;
563
+ font-size: 14px;
564
+ margin-bottom: 16px;
565
+ }
566
+
567
+ .spot-balance {
568
+ display: flex;
569
+ align-items: center;
570
+ justify-content: space-between;
571
+ background: rgba(45, 55, 72, 0.3);
572
+ padding: 16px;
573
+ border-radius: 8px;
574
+ }
575
+
576
+ .spot-balance .spot-icon {
577
+ margin-right: 8px;
578
+ }
579
+
580
+ .spot-amount {
581
+ text-align: right;
582
+ }
583
+
584
+ .spot-amount span:first-child {
585
+ display: block;
586
+ color: #ffffff;
587
+ font-weight: 600;
588
+ }
589
+
590
+ .spot-usd {
591
+ color: #8892b0;
592
+ font-size: 14px;
593
+ }
594
+
595
+ .assets-section {
596
+ background: rgba(26, 31, 46, 0.6);
597
+ border: 1px solid #2d3748;
598
+ border-radius: 12px;
599
+ padding: 24px;
600
+ }
601
+
602
+ .assets-section h3 {
603
+ color: #ffffff;
604
+ font-size: 18px;
605
+ margin-bottom: 24px;
606
+ }
607
+
608
+ .assets-table {
609
+ width: 100%;
610
+ }
611
+
612
+ .table-header {
613
+ display: grid;
614
+ grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
615
+ gap: 16px;
616
+ padding: 12px 0;
617
+ border-bottom: 1px solid #2d3748;
618
+ color: #8892b0;
619
+ font-size: 12px;
620
+ font-weight: 600;
621
+ text-transform: uppercase;
622
+ }
623
+
624
+ .table-row {
625
+ display: grid;
626
+ grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
627
+ gap: 16px;
628
+ padding: 16px 0;
629
+ border-bottom: 1px solid rgba(45, 55, 72, 0.3);
630
+ align-items: center;
631
+ }
632
+
633
+ .asset-info {
634
+ display: flex;
635
+ align-items: center;
636
+ gap: 12px;
637
+ }
638
+
639
+ .asset-icon {
640
+ width: 32px;
641
+ height: 32px;
642
+ border-radius: 50%;
643
+ display: flex;
644
+ align-items: center;
645
+ justify-content: center;
646
+ font-weight: bold;
647
+ font-size: 16px;
648
+ }
649
+
650
+ .btc-icon {
651
+ background: #f7931a;
652
+ color: white;
653
+ }
654
+
655
+ .eth-icon {
656
+ background: #627eea;
657
+ color: white;
658
+ }
659
+
660
+ .asset-details {
661
+ display: flex;
662
+ flex-direction: column;
663
+ }
664
+
665
+ .asset-name {
666
+ color: #ffffff;
667
+ font-weight: 600;
668
+ font-size: 14px;
669
+ }
670
+
671
+ .asset-full {
672
+ color: #8892b0;
673
+ font-size: 12px;
674
+ }
675
+
676
+ .balance-cell {
677
+ display: flex;
678
+ flex-direction: column;
679
+ text-align: right;
680
+ }
681
+
682
+ .balance-cell span:first-child {
683
+ color: #ffffff;
684
+ font-size: 14px;
685
+ }
686
+
687
+ .balance-usd-small {
688
+ color: #8892b0;
689
+ font-size: 12px;
690
+ }
691
+
692
+ .action-buttons {
693
+ display: flex;
694
+ gap: 16px;
695
+ margin-bottom: 32px;
696
+ }
697
+
698
+ .btn-deposit,
699
+ .btn-withdraw {
700
+ flex: 1;
701
+ padding: 16px;
702
+ border: none;
703
+ border-radius: 8px;
704
+ font-size: 16px;
705
+ font-weight: 600;
706
+ cursor: pointer;
707
+ transition: all 0.3s ease;
708
+ }
709
+
710
+ .btn-deposit {
711
+ background: #00d4ff;
712
+ color: #0f1419;
713
+ }
714
+
715
+ .btn-withdraw {
716
+ background: rgba(45, 55, 72, 0.8);
717
+ color: #8892b0;
718
+ border: 1px solid #2d3748;
719
+ }
720
+
721
+ .btn-deposit:hover {
722
+ background: #0099cc;
723
+ }
724
+
725
+ .btn-withdraw:hover {
726
+ border-color: #00d4ff;
727
+ color: #00d4ff;
728
+ }
729
+
730
+ .promo-section {
731
+ background: rgba(26, 31, 46, 0.6);
732
+ border: 1px solid #2d3748;
733
+ border-radius: 12px;
734
+ padding: 32px;
735
+ text-align: center;
736
+ }
737
+
738
+ .promo-section h2 {
739
+ color: #fbbf24;
740
+ font-size: 32px;
741
+ font-weight: 600;
742
+ margin-bottom: 8px;
743
+ }
744
+
745
+ .promo-section p {
746
+ color: #8892b0;
747
+ margin-bottom: 32px;
748
+ }
749
+
750
+ .promo-form label {
751
+ display: block;
752
+ color: #ffffff;
753
+ font-size: 18px;
754
+ margin-bottom: 16px;
755
+ }
756
+
757
+ .promo-form input {
758
+ width: 100%;
759
+ max-width: 400px;
760
+ padding: 16px;
761
+ background: rgba(45, 55, 72, 0.5);
762
+ border: 2px solid #fbbf24;
763
+ border-radius: 8px;
764
+ color: #ffffff;
765
+ font-size: 16px;
766
+ margin-bottom: 24px;
767
+ text-align: center;
768
+ }
769
+
770
+ .promo-form button {
771
+ background: rgba(45, 55, 72, 0.8);
772
+ color: #ffffff;
773
+ border: 1px solid #2d3748;
774
+ border-radius: 8px;
775
+ padding: 16px 32px;
776
+ font-size: 16px;
777
+ font-weight: 600;
778
+ cursor: pointer;
779
+ transition: all 0.3s ease;
780
+ }
781
+
782
+ .promo-form button:hover {
783
+ border-color: #fbbf24;
784
+ color: #fbbf24;
785
+ }
786
+
787
+ /* Modal Styles */
788
+ .modal {
789
+ display: none;
790
+ position: fixed;
791
+ z-index: 1000;
792
+ left: 0;
793
+ top: 0;
794
+ width: 100%;
795
+ height: 100%;
796
+ background-color: rgba(0, 0, 0, 0.8);
797
+ backdrop-filter: blur(5px);
798
+ }
799
+
800
+ .modal-content {
801
+ background: rgba(26, 31, 46, 0.95);
802
+ margin: 5% auto;
803
+ padding: 32px;
804
+ border: 1px solid #2d3748;
805
+ border-radius: 16px;
806
+ width: 90%;
807
+ max-width: 500px;
808
+ box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
809
+ }
810
+
811
+ .modal-header {
812
+ display: flex;
813
+ justify-content: space-between;
814
+ align-items: center;
815
+ margin-bottom: 24px;
816
+ }
817
+
818
+ .modal-header h3 {
819
+ color: #ffffff;
820
+ font-size: 20px;
821
+ font-weight: 600;
822
+ }
823
+
824
+ .close {
825
+ color: #8892b0;
826
+ font-size: 24px;
827
+ font-weight: bold;
828
+ cursor: pointer;
829
+ transition: color 0.3s ease;
830
+ }
831
+
832
+ .close:hover {
833
+ color: #ffffff;
834
+ }
835
+
836
+ .deposit-content,
837
+ .withdraw-content {
838
+ text-align: center;
839
+ }
840
+
841
+ .wallet-graphic {
842
+ font-size: 48px;
843
+ margin-bottom: 24px;
844
+ }
845
+
846
+ .deposit-content p,
847
+ .withdraw-content p {
848
+ color: #8892b0;
849
+ margin-bottom: 16px;
850
+ line-height: 1.5;
851
+ }
852
+
853
+ .deposit-warning {
854
+ color: #ef4444;
855
+ font-weight: 600;
856
+ margin-bottom: 24px;
857
+ }
858
+
859
+ .deposit-address {
860
+ background: rgba(45, 55, 72, 0.5);
861
+ border: 1px solid #2d3748;
862
+ border-radius: 8px;
863
+ padding: 16px;
864
+ margin-bottom: 24px;
865
+ display: flex;
866
+ align-items: center;
867
+ justify-content: space-between;
868
+ gap: 12px;
869
+ }
870
+
871
+ .deposit-address span {
872
+ color: #ffffff;
873
+ font-family: monospace;
874
+ font-size: 14px;
875
+ word-break: break-all;
876
+ }
877
+
878
+ .deposit-address button {
879
+ background: #00d4ff;
880
+ color: #0f1419;
881
+ border: none;
882
+ border-radius: 4px;
883
+ padding: 8px;
884
+ cursor: pointer;
885
+ font-size: 16px;
886
+ }
887
+
888
+ .qr-code {
889
+ margin-bottom: 24px;
890
+ }
891
+
892
+ .qr-placeholder {
893
+ width: 150px;
894
+ height: 150px;
895
+ background: rgba(45, 55, 72, 0.5);
896
+ border: 1px solid #2d3748;
897
+ border-radius: 8px;
898
+ display: flex;
899
+ align-items: center;
900
+ justify-content: center;
901
+ margin: 0 auto;
902
+ color: #8892b0;
903
+ font-size: 14px;
904
+ }
905
+
906
+ .payment-methods {
907
+ display: grid;
908
+ grid-template-columns: 1fr 1fr;
909
+ gap: 12px;
910
+ margin-bottom: 24px;
911
+ }
912
+
913
+ .payment-method {
914
+ background: rgba(45, 55, 72, 0.5);
915
+ border: 1px solid #2d3748;
916
+ border-radius: 8px;
917
+ padding: 16px;
918
+ display: flex;
919
+ align-items: center;
920
+ gap: 8px;
921
+ cursor: pointer;
922
+ transition: all 0.3s ease;
923
+ }
924
+
925
+ .payment-method:hover {
926
+ border-color: #00d4ff;
927
+ }
928
+
929
+ .payment-icon {
930
+ font-size: 20px;
931
+ }
932
+
933
+ .coin-selection,
934
+ .network-selection {
935
+ margin-bottom: 16px;
936
+ }
937
+
938
+ .coin-selection select,
939
+ .network-selection select {
940
+ width: 100%;
941
+ padding: 16px;
942
+ background: rgba(45, 55, 72, 0.5);
943
+ border: 1px solid #2d3748;
944
+ border-radius: 8px;
945
+ color: #ffffff;
946
+ font-size: 16px;
947
+ }
948
+
949
+ .btn-continue {
950
+ width: 100%;
951
+ background: #00d4ff;
952
+ color: #0f1419;
953
+ border: none;
954
+ border-radius: 8px;
955
+ padding: 16px;
956
+ font-size: 16px;
957
+ font-weight: 600;
958
+ cursor: pointer;
959
+ transition: all 0.3s ease;
960
+ }
961
+
962
+ .btn-continue:hover {
963
+ background: #0099cc;
964
+ }
965
+
966
+ /* Activation Modal */
967
+ .activation-modal {
968
+ max-width: 600px;
969
+ }
970
+
971
+ .activation-header {
972
+ text-align: center;
973
+ margin-bottom: 24px;
974
+ }
975
+
976
+ .error-icon {
977
+ font-size: 48px;
978
+ margin-bottom: 16px;
979
+ }
980
+
981
+ .activation-header h3 {
982
+ color: #ef4444;
983
+ font-size: 24px;
984
+ }
985
+
986
+ .activation-content p {
987
+ color: #fbbf24;
988
+ line-height: 1.6;
989
+ margin-bottom: 16px;
990
+ }
991
+
992
+ .deposit-status {
993
+ color: #8892b0;
994
+ margin-bottom: 24px;
995
+ }
996
+
997
+ .status-table {
998
+ background: rgba(45, 55, 72, 0.3);
999
+ border-radius: 8px;
1000
+ padding: 16px;
1001
+ margin-bottom: 24px;
1002
+ }
1003
+
1004
+ .status-row {
1005
+ display: flex;
1006
+ justify-content: space-between;
1007
+ padding: 8px 0;
1008
+ }
1009
+
1010
+ .status-row:first-child {
1011
+ color: #8892b0;
1012
+ font-weight: 600;
1013
+ border-bottom: 1px solid #2d3748;
1014
+ }
1015
+
1016
+ .error-status {
1017
+ color: #ef4444;
1018
+ }
1019
+
1020
+ .support-text {
1021
+ color: #8892b0;
1022
+ margin-bottom: 24px;
1023
+ }
1024
+
1025
+ .btn-wallet {
1026
+ width: 100%;
1027
+ background: #00d4ff;
1028
+ color: #0f1419;
1029
+ border: none;
1030
+ border-radius: 8px;
1031
+ padding: 16px;
1032
+ font-size: 16px;
1033
+ font-weight: 600;
1034
+ cursor: pointer;
1035
+ }
1036
+
1037
+ /* Notification Styles */
1038
+ .notification {
1039
+ position: fixed;
1040
+ top: 20px;
1041
+ right: 20px;
1042
+ padding: 16px 24px;
1043
+ border-radius: 8px;
1044
+ color: #fff;
1045
+ font-weight: 600;
1046
+ z-index: 1001;
1047
+ transform: translateX(400px);
1048
+ transition: all 0.3s ease;
1049
+ box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
1050
+ }
1051
+
1052
+ .notification.show {
1053
+ transform: translateX(0);
1054
+ }
1055
+
1056
+ .notification.success {
1057
+ background: #10b981;
1058
+ }
1059
+
1060
+ .notification.error {
1061
+ background: #ef4444;
1062
+ }
1063
+
1064
+ .notification.info {
1065
+ background: #3b82f6;
1066
+ }
1067
+
1068
+ /* Responsive Design */
1069
+ @media (max-width: 1024px) {
1070
+ .landing-content {
1071
+ grid-template-columns: 1fr;
1072
+ gap: 40px;
1073
+ text-align: center;
1074
+ }
1075
+
1076
+ .crypto-3d {
1077
+ width: 300px;
1078
+ height: 300px;
1079
+ }
1080
+
1081
+ .dashboard-container {
1082
+ flex-direction: column;
1083
+ }
1084
+
1085
+ .sidebar {
1086
+ width: 100%;
1087
+ display: flex;
1088
+ overflow-x: auto;
1089
+ padding: 16px 0;
1090
+ }
1091
+
1092
+ .sidebar-item {
1093
+ white-space: nowrap;
1094
+ padding: 12px 16px;
1095
+ }
1096
+
1097
+ .overview-grid {
1098
+ grid-template-columns: 1fr;
1099
+ }
1100
+ }
1101
+
1102
+ @media (max-width: 768px) {
1103
+ .landing-header {
1104
+ padding: 16px 20px;
1105
+ }
1106
+
1107
+ .landing-nav {
1108
+ display: none;
1109
+ }
1110
+
1111
+ .landing-main {
1112
+ padding: 0 20px;
1113
+ }
1114
+
1115
+ .main-content {
1116
+ padding: 20px;
1117
+ }
1118
+
1119
+ .content-header {
1120
+ flex-direction: column;
1121
+ gap: 16px;
1122
+ align-items: flex-start;
1123
+ }
1124
+
1125
+ .search-box input {
1126
+ width: 100%;
1127
+ }
1128
+
1129
+ .action-buttons {
1130
+ flex-direction: column;
1131
+ }
1132
+
1133
+ .payment-methods {
1134
+ grid-template-columns: 1fr;
1135
+ }
1136
+
1137
+ .table-header,
1138
+ .table-row {
1139
+ grid-template-columns: 1fr;
1140
+ gap: 8px;
1141
+ }
1142
+
1143
+ .table-header {
1144
+ display: none;
1145
+ }
1146
+
1147
+ .table-row {
1148
+ background: rgba(45, 55, 72, 0.3);
1149
+ border-radius: 8px;
1150
+ padding: 16px;
1151
+ margin-bottom: 8px;
1152
+ }
1153
+ }