djs-builder 0.6.401 → 0.7.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,437 @@
1
+ <!DOCTYPE html>
2
+ <html lang="ar" dir="rtl">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>تسجيل الدخول - DJS-Builder</title>
7
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
8
+ <link href="https://cdn.jsdelivr.net/npm/remixicon@3.5.0/fonts/remixicon.css" rel="stylesheet">
9
+ <style>
10
+ :root {
11
+ --bg-primary: #030305;
12
+ --bg-secondary: #0a0a0f;
13
+ --bg-card: #12121a;
14
+ --accent: #5865F2;
15
+ --accent-glow: rgba(88,101,242,0.15);
16
+ --purple: #9b59b6;
17
+ --pink: #e91e63;
18
+ --success: #10b981;
19
+ --text-primary: #ffffff;
20
+ --text-secondary: #a1a1aa;
21
+ --text-muted: #52525b;
22
+ --border: rgba(255,255,255,0.06);
23
+ --radius: 16px;
24
+ --radius-sm: 10px;
25
+ }
26
+
27
+ * { margin: 0; padding: 0; box-sizing: border-box; }
28
+
29
+ body {
30
+ font-family: 'Inter', sans-serif;
31
+ background: var(--bg-primary);
32
+ color: var(--text-primary);
33
+ min-height: 100vh;
34
+ display: flex;
35
+ align-items: center;
36
+ justify-content: center;
37
+ overflow: hidden;
38
+ position: relative;
39
+ }
40
+
41
+ /* Background Effects */
42
+ .bg-gradient {
43
+ position: fixed;
44
+ inset: 0;
45
+ background:
46
+ radial-gradient(circle at 20% 20%, var(--accent-glow) 0%, transparent 40%),
47
+ radial-gradient(circle at 80% 80%, rgba(155,89,182,0.1) 0%, transparent 40%),
48
+ radial-gradient(circle at 50% 50%, rgba(233,30,99,0.05) 0%, transparent 50%);
49
+ pointer-events: none;
50
+ }
51
+
52
+ .grid-pattern {
53
+ position: fixed;
54
+ inset: 0;
55
+ background-image: linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
56
+ linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
57
+ background-size: 60px 60px;
58
+ pointer-events: none;
59
+ }
60
+
61
+ /* Floating Orbs */
62
+ .orb {
63
+ position: fixed;
64
+ border-radius: 50%;
65
+ filter: blur(80px);
66
+ animation: orbFloat 15s ease-in-out infinite;
67
+ pointer-events: none;
68
+ }
69
+ .orb-1 { width: 400px; height: 400px; background: var(--accent); opacity: 0.1; top: -100px; left: -100px; animation-delay: 0s; }
70
+ .orb-2 { width: 300px; height: 300px; background: var(--purple); opacity: 0.08; bottom: -50px; right: -50px; animation-delay: -5s; }
71
+ .orb-3 { width: 200px; height: 200px; background: var(--pink); opacity: 0.06; top: 50%; left: 50%; animation-delay: -10s; }
72
+
73
+ @keyframes orbFloat {
74
+ 0%, 100% { transform: translate(0, 0) scale(1); }
75
+ 33% { transform: translate(30px, -30px) scale(1.05); }
76
+ 66% { transform: translate(-20px, 20px) scale(0.95); }
77
+ }
78
+
79
+ /* Main Container */
80
+ .login-wrapper {
81
+ position: relative;
82
+ z-index: 10;
83
+ width: 100%;
84
+ max-width: 460px;
85
+ padding: 24px;
86
+ }
87
+
88
+ /* Back Button */
89
+ .back-home {
90
+ position: fixed;
91
+ top: 24px;
92
+ right: 24px;
93
+ display: flex;
94
+ align-items: center;
95
+ gap: 8px;
96
+ color: var(--text-secondary);
97
+ font-size: 14px;
98
+ font-weight: 500;
99
+ padding: 10px 16px;
100
+ background: rgba(255,255,255,0.03);
101
+ border: 1px solid var(--border);
102
+ border-radius: var(--radius-sm);
103
+ text-decoration: none;
104
+ transition: all 0.3s;
105
+ z-index: 100;
106
+ }
107
+ .back-home:hover {
108
+ color: var(--accent);
109
+ background: rgba(88,101,242,0.1);
110
+ border-color: var(--accent);
111
+ }
112
+
113
+ /* Login Card */
114
+ .login-card {
115
+ background: linear-gradient(145deg, var(--bg-card), rgba(18,18,26,0.8));
116
+ border: 1px solid var(--border);
117
+ border-radius: var(--radius);
118
+ overflow: hidden;
119
+ position: relative;
120
+ animation: cardAppear 0.5s ease-out;
121
+ }
122
+
123
+ @keyframes cardAppear {
124
+ from { opacity: 0; transform: translateY(20px) scale(0.98); }
125
+ to { opacity: 1; transform: translateY(0) scale(1); }
126
+ }
127
+
128
+ .login-card::before {
129
+ content: '';
130
+ position: absolute;
131
+ top: 0;
132
+ left: 0;
133
+ right: 0;
134
+ height: 3px;
135
+ background: linear-gradient(90deg, var(--accent), var(--purple), var(--pink));
136
+ }
137
+
138
+ .login-card-glow {
139
+ position: absolute;
140
+ inset: -1px;
141
+ border-radius: var(--radius);
142
+ background: linear-gradient(145deg, var(--accent), var(--purple), var(--pink));
143
+ z-index: -1;
144
+ opacity: 0.2;
145
+ filter: blur(20px);
146
+ }
147
+
148
+ /* Header */
149
+ .login-header {
150
+ padding: 48px 40px 32px;
151
+ text-align: center;
152
+ position: relative;
153
+ }
154
+
155
+ .bot-avatar-wrapper {
156
+ position: relative;
157
+ display: inline-block;
158
+ margin-bottom: 24px;
159
+ }
160
+
161
+ .bot-avatar {
162
+ width: 90px;
163
+ height: 90px;
164
+ border-radius: 50%;
165
+ border: 3px solid transparent;
166
+ background: linear-gradient(var(--bg-card), var(--bg-card)) padding-box,
167
+ linear-gradient(135deg, var(--accent), var(--purple)) border-box;
168
+ object-fit: cover;
169
+ }
170
+
171
+ .bot-avatar-status {
172
+ position: absolute;
173
+ bottom: 4px;
174
+ right: 4px;
175
+ width: 22px;
176
+ height: 22px;
177
+ background: var(--success);
178
+ border: 4px solid var(--bg-card);
179
+ border-radius: 50%;
180
+ animation: pulse 2s ease-in-out infinite;
181
+ }
182
+
183
+ @keyframes pulse {
184
+ 0%, 100% { box-shadow: 0 0 0 0 rgba(16,185,129,0.4); }
185
+ 50% { box-shadow: 0 0 0 8px transparent; }
186
+ }
187
+
188
+ .login-header h1 {
189
+ font-size: 28px;
190
+ font-weight: 700;
191
+ margin-bottom: 8px;
192
+ background: linear-gradient(135deg, #fff, #a1a1aa);
193
+ -webkit-background-clip: text;
194
+ -webkit-text-fill-color: transparent;
195
+ background-clip: text;
196
+ }
197
+
198
+ .login-header p {
199
+ color: var(--text-secondary);
200
+ font-size: 15px;
201
+ }
202
+
203
+ /* Body */
204
+ .login-body {
205
+ padding: 0 40px 40px;
206
+ }
207
+
208
+ .discord-btn {
209
+ width: 100%;
210
+ padding: 16px 28px;
211
+ background: linear-gradient(135deg, #5865F2, #4752C4);
212
+ color: white;
213
+ border: none;
214
+ border-radius: var(--radius-sm);
215
+ font-size: 16px;
216
+ font-weight: 600;
217
+ display: flex;
218
+ align-items: center;
219
+ justify-content: center;
220
+ gap: 12px;
221
+ cursor: pointer;
222
+ transition: all 0.3s;
223
+ text-decoration: none;
224
+ position: relative;
225
+ overflow: hidden;
226
+ }
227
+
228
+ .discord-btn::before {
229
+ content: '';
230
+ position: absolute;
231
+ inset: 0;
232
+ background: linear-gradient(135deg, transparent, rgba(255,255,255,0.1), transparent);
233
+ transform: translateX(-100%);
234
+ transition: transform 0.5s;
235
+ }
236
+
237
+ .discord-btn:hover {
238
+ transform: translateY(-3px);
239
+ box-shadow: 0 12px 35px rgba(88,101,242,0.4);
240
+ }
241
+
242
+ .discord-btn:hover::before {
243
+ transform: translateX(100%);
244
+ }
245
+
246
+ .discord-btn i {
247
+ font-size: 22px;
248
+ }
249
+
250
+ /* Features */
251
+ .login-features {
252
+ margin-top: 32px;
253
+ padding-top: 28px;
254
+ border-top: 1px solid var(--border);
255
+ }
256
+
257
+ .features-title {
258
+ font-size: 12px;
259
+ color: var(--text-muted);
260
+ text-transform: uppercase;
261
+ letter-spacing: 1px;
262
+ margin-bottom: 16px;
263
+ text-align: center;
264
+ display: flex;
265
+ align-items: center;
266
+ justify-content: center;
267
+ gap: 8px;
268
+ }
269
+
270
+ .features-title::before,
271
+ .features-title::after {
272
+ content: '';
273
+ height: 1px;
274
+ width: 30px;
275
+ background: var(--border);
276
+ }
277
+
278
+ .feature-grid {
279
+ display: grid;
280
+ grid-template-columns: repeat(2, 1fr);
281
+ gap: 12px;
282
+ }
283
+
284
+ .feature-item {
285
+ display: flex;
286
+ flex-direction: column;
287
+ align-items: center;
288
+ text-align: center;
289
+ gap: 8px;
290
+ padding: 16px 12px;
291
+ background: rgba(255,255,255,0.02);
292
+ border: 1px solid var(--border);
293
+ border-radius: var(--radius-sm);
294
+ transition: all 0.3s;
295
+ }
296
+
297
+ .feature-item:hover {
298
+ background: rgba(255,255,255,0.04);
299
+ border-color: rgba(88,101,242,0.3);
300
+ transform: translateY(-2px);
301
+ }
302
+
303
+ .feature-item i {
304
+ font-size: 22px;
305
+ margin-bottom: 2px;
306
+ }
307
+
308
+ .feature-item:nth-child(1) i { color: var(--accent); }
309
+ .feature-item:nth-child(2) i { color: var(--success); }
310
+ .feature-item:nth-child(3) i { color: var(--purple); }
311
+ .feature-item:nth-child(4) i { color: var(--pink); }
312
+
313
+ .feature-item span {
314
+ font-size: 12px;
315
+ color: var(--text-secondary);
316
+ font-weight: 500;
317
+ }
318
+
319
+ /* Footer */
320
+ .login-footer {
321
+ padding: 20px 40px;
322
+ background: rgba(0,0,0,0.2);
323
+ border-top: 1px solid var(--border);
324
+ text-align: center;
325
+ }
326
+
327
+ .login-footer a {
328
+ color: var(--text-muted);
329
+ font-size: 13px;
330
+ text-decoration: none;
331
+ transition: color 0.3s;
332
+ display: inline-flex;
333
+ align-items: center;
334
+ gap: 6px;
335
+ }
336
+
337
+ .login-footer a:hover {
338
+ color: var(--accent);
339
+ }
340
+
341
+ /* Responsive */
342
+ @media (max-width: 500px) {
343
+ .login-wrapper { padding: 16px; }
344
+ .login-header { padding: 32px 20px 20px; }
345
+ .login-body { padding: 0 20px 28px; }
346
+ .login-footer { padding: 14px 20px; }
347
+ .feature-grid { gap: 6px; }
348
+ .feature-item { padding: 10px 12px; font-size: 12px; }
349
+ .feature-item i { font-size: 14px; }
350
+ .login-btn { padding: 14px 24px; font-size: 14px; }
351
+ .bot-avatar-wrapper { width: 70px; height: 70px; }
352
+ .bot-avatar { width: 60px; height: 60px; }
353
+ .login-title { font-size: 22px; }
354
+ .login-subtitle { font-size: 13px; }
355
+ .back-home { top: 16px; right: 16px; padding: 10px 16px; font-size: 12px; }
356
+ .orb { display: none; }
357
+ }
358
+ @media (max-width: 380px) {
359
+ .login-card { border-radius: 16px; }
360
+ .login-header { padding: 28px 16px 16px; }
361
+ .login-body { padding: 0 16px 24px; }
362
+ .login-title { font-size: 20px; }
363
+ .feature-grid { grid-template-columns: 1fr 1fr; }
364
+ }
365
+ </style>
366
+ </head>
367
+ <body>
368
+ <!-- Background Effects -->
369
+ <div class="bg-gradient"></div>
370
+ <div class="grid-pattern"></div>
371
+ <div class="orb orb-1"></div>
372
+ <div class="orb orb-2"></div>
373
+ <div class="orb orb-3"></div>
374
+
375
+ <a href="/" class="back-home">
376
+ <i class="ri-arrow-right-line"></i>
377
+ الصفحة الرئيسية
378
+ </a>
379
+
380
+ <div class="login-wrapper">
381
+ <div class="login-card">
382
+ <div class="login-card-glow"></div>
383
+
384
+ <div class="login-header">
385
+ <div class="bot-avatar-wrapper">
386
+ <% if (botStats && botStats.botAvatar) { %>
387
+ <img src="<%= botStats.botAvatar %>" alt="Bot" class="bot-avatar">
388
+ <% } else { %>
389
+ <div class="bot-avatar" style="display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--accent), var(--purple));">
390
+ <i class="ri-robot-line" style="font-size: 40px; color: white;"></i>
391
+ </div>
392
+ <% } %>
393
+ <div class="bot-avatar-status"></div>
394
+ </div>
395
+ <h1>مرحباً بك!</h1>
396
+ <p>سجل دخولك للوصول إلى لوحة التحكم</p>
397
+ </div>
398
+
399
+ <div class="login-body">
400
+ <a href="/auth/discord" class="discord-btn">
401
+ <i class="ri-discord-fill"></i>
402
+ تسجيل الدخول بـ Discord
403
+ </a>
404
+
405
+ <div class="login-features">
406
+ <div class="features-title">المميزات</div>
407
+ <div class="feature-grid">
408
+ <div class="feature-item">
409
+ <i class="ri-dashboard-line"></i>
410
+ <span>لوحة تحكم</span>
411
+ </div>
412
+ <div class="feature-item">
413
+ <i class="ri-trophy-line"></i>
414
+ <span>نظام اللفلات</span>
415
+ </div>
416
+ <div class="feature-item">
417
+ <i class="ri-gift-line"></i>
418
+ <span>المسابقات</span>
419
+ </div>
420
+ <div class="feature-item">
421
+ <i class="ri-settings-3-line"></i>
422
+ <span>إعدادات البوت</span>
423
+ </div>
424
+ </div>
425
+ </div>
426
+ </div>
427
+
428
+ <div class="login-footer">
429
+ <a href="/">
430
+ <i class="ri-arrow-right-s-line"></i>
431
+ العودة للصفحة الرئيسية
432
+ </a>
433
+ </div>
434
+ </div>
435
+ </div>
436
+ </body>
437
+ </html>