Hugging Face's logo

Spaces:
ReikerXx
/
strikes
Running

App Files Community
Reaperxxxx commited on
Commit
f254854
·
verified ·
1 Parent(s): 5caedd3

Create me.html

Browse files
Files changed (1) hide show
  1. me.html +431 -0
me.html ADDED
@@ -0,0 +1,431 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>User Strikes Dashboard</title>
7
+ <style>
8
+ * {
9
+ margin: 0;
10
+ padding: 0;
11
+ box-sizing: border-box;
12
+ }
13
+
14
+ body {
15
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
16
+ background: linear-gradient(135deg, #000000 0%, #1a0a2e 50%, #551b6e 100%);
17
+ color: #ffffff;
18
+ min-height: 100vh;
19
+ overflow-x: hidden;
20
+ position: relative;
21
+ }
22
+
23
+ /* Animated background particles */
24
+ .particles {
25
+ position: fixed;
26
+ top: 0;
27
+ left: 0;
28
+ width: 100%;
29
+ height: 100%;
30
+ pointer-events: none;
31
+ z-index: 1;
32
+ }
33
+
34
+ .particle {
35
+ position: absolute;
36
+ width: 4px;
37
+ height: 4px;
38
+ background: #551b6e;
39
+ border-radius: 50%;
40
+ animation: float 6s infinite ease-in-out;
41
+ opacity: 0.6;
42
+ }
43
+
44
+ @keyframes float {
45
+ 0%, 100% { transform: translateY(0px) rotate(0deg); }
46
+ 33% { transform: translateY(-20px) rotate(120deg); }
47
+ 66% { transform: translateY(10px) rotate(240deg); }
48
+ }
49
+
50
+ .container {
51
+ position: relative;
52
+ z-index: 2;
53
+ max-width: 900px;
54
+ margin: 0 auto;
55
+ padding: 40px 20px;
56
+ min-height: 100vh;
57
+ display: flex;
58
+ flex-direction: column;
59
+ justify-content: center;
60
+ }
61
+
62
+ .header {
63
+ text-align: center;
64
+ margin-bottom: 40px;
65
+ animation: slideDown 1s ease-out;
66
+ }
67
+
68
+ .header h1 {
69
+ font-size: 3rem;
70
+ background: linear-gradient(45deg, #ffffff, #551b6e, #9d4edd);
71
+ -webkit-background-clip: text;
72
+ -webkit-text-fill-color: transparent;
73
+ background-clip: text;
74
+ margin-bottom: 10px;
75
+ text-shadow: 0 0 30px rgba(85, 27, 110, 0.5);
76
+ }
77
+
78
+ .header p {
79
+ font-size: 1.2rem;
80
+ opacity: 0.8;
81
+ letter-spacing: 1px;
82
+ }
83
+
84
+ .dashboard {
85
+ display: grid;
86
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
87
+ gap: 30px;
88
+ animation: fadeInUp 1s ease-out 0.3s both;
89
+ }
90
+
91
+ .card {
92
+ background: rgba(85, 27, 110, 0.1);
93
+ backdrop-filter: blur(10px);
94
+ border: 1px solid rgba(85, 27, 110, 0.3);
95
+ border-radius: 20px;
96
+ padding: 30px;
97
+ position: relative;
98
+ overflow: hidden;
99
+ transition: all 0.3s ease;
100
+ }
101
+
102
+ .card:hover {
103
+ transform: translateY(-5px);
104
+ box-shadow: 0 20px 40px rgba(85, 27, 110, 0.3);
105
+ border-color: #551b6e;
106
+ }
107
+
108
+ .card::before {
109
+ content: '';
110
+ position: absolute;
111
+ top: 0;
112
+ left: -100%;
113
+ width: 100%;
114
+ height: 100%;
115
+ background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
116
+ transition: left 0.5s;
117
+ }
118
+
119
+ .card:hover::before {
120
+ left: 100%;
121
+ }
122
+
123
+ .card-title {
124
+ font-size: 1.4rem;
125
+ margin-bottom: 20px;
126
+ color: #9d4edd;
127
+ display: flex;
128
+ align-items: center;
129
+ gap: 10px;
130
+ }
131
+
132
+ .card-title::before {
133
+ content: '';
134
+ width: 8px;
135
+ height: 8px;
136
+ background: #551b6e;
137
+ border-radius: 50%;
138
+ box-shadow: 0 0 15px #551b6e;
139
+ }
140
+
141
+ .info-item {
142
+ display: flex;
143
+ justify-content: space-between;
144
+ align-items: center;
145
+ padding: 15px 0;
146
+ border-bottom: 1px solid rgba(85, 27, 110, 0.2);
147
+ }
148
+
149
+ .info-item:last-child {
150
+ border-bottom: none;
151
+ }
152
+
153
+ .info-label {
154
+ font-weight: 600;
155
+ opacity: 0.8;
156
+ text-transform: uppercase;
157
+ letter-spacing: 1px;
158
+ font-size: 0.9rem;
159
+ }
160
+
161
+ .info-value {
162
+ font-size: 1.1rem;
163
+ font-weight: 700;
164
+ color: #ffffff;
165
+ }
166
+
167
+ .strikes-display {
168
+ grid-column: 1 / -1;
169
+ text-align: center;
170
+ background: rgba(0, 0, 0, 0.3);
171
+ border: 2px solid #551b6e;
172
+ position: relative;
173
+ }
174
+
175
+ .strikes-number {
176
+ font-size: 6rem;
177
+ font-weight: 900;
178
+ margin: 20px 0;
179
+ text-shadow: 0 0 30px rgba(85, 27, 110, 0.8);
180
+ }
181
+
182
+ .strikes-0 {
183
+ color: #00ff88;
184
+ text-shadow: 0 0 30px rgba(0, 255, 136, 0.5);
185
+ }
186
+
187
+ .strikes-1 {
188
+ color: #ffaa00;
189
+ text-shadow: 0 0 30px rgba(255, 170, 0, 0.5);
190
+ }
191
+
192
+ .strikes-2 {
193
+ color: #ff6b35;
194
+ text-shadow: 0 0 30px rgba(255, 107, 53, 0.5);
195
+ }
196
+
197
+ .strikes-3-plus {
198
+ color: #ff0040;
199
+ text-shadow: 0 0 30px rgba(255, 0, 64, 0.5);
200
+ animation: pulse 2s infinite;
201
+ }
202
+
203
+ @keyframes pulse {
204
+ 0%, 100% { transform: scale(1); }
205
+ 50% { transform: scale(1.05); }
206
+ }
207
+
208
+ .strikes-message {
209
+ font-size: 1.3rem;
210
+ margin-top: 15px;
211
+ font-weight: 600;
212
+ letter-spacing: 1px;
213
+ }
214
+
215
+ .strikes-description {
216
+ font-size: 1rem;
217
+ margin-top: 10px;
218
+ opacity: 0.8;
219
+ max-width: 600px;
220
+ margin-left: auto;
221
+ margin-right: auto;
222
+ }
223
+
224
+ .warning-icon {
225
+ position: absolute;
226
+ top: 20px;
227
+ right: 20px;
228
+ font-size: 2rem;
229
+ opacity: 0.3;
230
+ }
231
+
232
+ @keyframes slideDown {
233
+ from {
234
+ opacity: 0;
235
+ transform: translateY(-50px);
236
+ }
237
+ to {
238
+ opacity: 1;
239
+ transform: translateY(0);
240
+ }
241
+ }
242
+
243
+ @keyframes fadeInUp {
244
+ from {
245
+ opacity: 0;
246
+ transform: translateY(50px);
247
+ }
248
+ to {
249
+ opacity: 1;
250
+ transform: translateY(0);
251
+ }
252
+ }
253
+
254
+ .no-data {
255
+ text-align: center;
256
+ padding: 60px 20px;
257
+ opacity: 0.6;
258
+ }
259
+
260
+ .no-data h2 {
261
+ font-size: 2rem;
262
+ margin-bottom: 20px;
263
+ color: #551b6e;
264
+ }
265
+
266
+ @media (max-width: 768px) {
267
+ .header h1 {
268
+ font-size: 2rem;
269
+ }
270
+
271
+ .strikes-number {
272
+ font-size: 4rem;
273
+ }
274
+
275
+ .dashboard {
276
+ grid-template-columns: 1fr;
277
+ }
278
+ }
279
+ </style>
280
+ </head>
281
+ <body>
282
+ <!-- Animated background particles -->
283
+ <div class="particles" id="particles"></div>
284
+
285
+ <div class="container">
286
+ <div class="header">
287
+ <h1>User Strike Dashboard</h1>
288
+ <p>Content Moderation System</p>
289
+ </div>
290
+
291
+ <div id="content">
292
+ <div class="no-data">
293
+ <h2>Loading user data...</h2>
294
+ <p>Please wait while we fetch the information from URL parameters.</p>
295
+ </div>
296
+ </div>
297
+ </div>
298
+
299
+ <script>
300
+ // Create animated particles
301
+ function createParticles() {
302
+ const particles = document.getElementById('particles');
303
+ const particleCount = 50;
304
+
305
+ for (let i = 0; i < particleCount; i++) {
306
+ const particle = document.createElement('div');
307
+ particle.className = 'particle';
308
+ particle.style.left = Math.random() * 100 + '%';
309
+ particle.style.top = Math.random() * 100 + '%';
310
+ particle.style.animationDelay = Math.random() * 6 + 's';
311
+ particle.style.animationDuration = (Math.random() * 3 + 3) + 's';
312
+ particles.appendChild(particle);
313
+ }
314
+ }
315
+
316
+ // Parse URL parameters
317
+ function getUrlParams() {
318
+ const urlParams = new URLSearchParams(window.location.search);
319
+ return {
320
+ group: urlParams.get('group') || 'N/A',
321
+ chat_id: urlParams.get('chat_id') || 'N/A',
322
+ userid: urlParams.get('userid') || 'N/A',
323
+ username: urlParams.get('username') || 'N/A',
324
+ strikes: parseInt(urlParams.get('strikes')) || 0
325
+ };
326
+ }
327
+
328
+ // Get strike status information
329
+ function getStrikeInfo(strikes) {
330
+ if (strikes === 0) {
331
+ return {
332
+ class: 'strikes-0',
333
+ message: 'CLEAN RECORD',
334
+ description: 'This user has no strikes and follows all community guidelines perfectly.',
335
+ icon: '✅'
336
+ };
337
+ } else if (strikes === 1) {
338
+ return {
339
+ class: 'strikes-1',
340
+ message: 'FIRST WARNING',
341
+ description: 'User received 1 strike for posting NSFW content against community rules. Please be more careful.',
342
+ icon: '⚠️'
343
+ };
344
+ } else if (strikes === 2) {
345
+ return {
346
+ class: 'strikes-2',
347
+ message: 'SECOND WARNING',
348
+ description: 'User has 2 strikes for posting NSFW content. Final warning before potential restrictions.',
349
+ icon: '🚨'
350
+ };
351
+ } else {
352
+ return {
353
+ class: 'strikes-3-plus',
354
+ message: 'CRITICAL VIOLATIONS',
355
+ description: 'User has multiple strikes for posting NSFW content. May face severe restrictions or bans.',
356
+ icon: '🔴'
357
+ };
358
+ }
359
+ }
360
+
361
+ // Display user information
362
+ function displayUserInfo() {
363
+ const params = getUrlParams();
364
+ const strikeInfo = getStrikeInfo(params.strikes);
365
+
366
+ const content = `
367
+ <div class="dashboard">
368
+ <div class="strikes-display card">
369
+ <div class="warning-icon">${strikeInfo.icon}</div>
370
+ <div class="card-title">STRIKE STATUS</div>
371
+ <div class="strikes-number ${strikeInfo.class}">${params.strikes}</div>
372
+ <div class="strikes-message ${strikeInfo.class}">${strikeInfo.message}</div>
373
+ <div class="strikes-description">${strikeInfo.description}</div>
374
+ </div>
375
+
376
+ <div class="card">
377
+ <div class="card-title">User Information</div>
378
+ <div class="info-item">
379
+ <span class="info-label">Username</span>
380
+ <span class="info-value">@${params.username}</span>
381
+ </div>
382
+ <div class="info-item">
383
+ <span class="info-label">User ID</span>
384
+ <span class="info-value">${params.userid}</span>
385
+ </div>
386
+ <div class="info-item">
387
+ <span class="info-label">Group</span>
388
+ <span class="info-value">${params.group}</span>
389
+ </div>
390
+ <div class="info-item">
391
+ <span class="info-label">Chat ID</span>
392
+ <span class="info-value">${params.chat_id}</span>
393
+ </div>
394
+ </div>
395
+
396
+ <div class="card">
397
+ <div class="card-title">Violation Details</div>
398
+ <div class="info-item">
399
+ <span class="info-label">Total Strikes</span>
400
+ <span class="info-value">${params.strikes}</span>
401
+ </div>
402
+ <div class="info-item">
403
+ <span class="info-label">Violation Type</span>
404
+ <span class="info-value">NSFW Content</span>
405
+ </div>
406
+ <div class="info-item">
407
+ <span class="info-label">Status</span>
408
+ <span class="info-value ${strikeInfo.class}">${strikeInfo.message}</span>
409
+ </div>
410
+ <div class="info-item">
411
+ <span class="info-label">Action Required</span>
412
+ <span class="info-value">${params.strikes === 0 ? 'None' : params.strikes >= 3 ? 'Review Required' : 'Warning Issued'}</span>
413
+ </div>
414
+ </div>
415
+ </div>
416
+ `;
417
+
418
+ document.getElementById('content').innerHTML = content;
419
+ }
420
+
421
+ // Initialize the page
422
+ function init() {
423
+ createParticles();
424
+ displayUserInfo();
425
+ }
426
+
427
+ // Run when page loads
428
+ window.addEventListener('load', init);
429
+ </script>
430
+ </body>
431
+ </html>