Hugging Face's logo

nzgnzg73
/
HTML_JS_ETC

Model card Files
xet
 Community
nzgnzg73 commited on
Commit
5da0f26
·
verified ·
1 Parent(s): db64223

Upload N Priva Comment Generator.html

Browse files
Files changed (1) hide show
  1. N Priva Comment Generator/N Priva Comment Generator.html +1641 -0
N Priva Comment Generator/N Priva Comment Generator.html ADDED
@@ -0,0 +1,1641 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>N Priva Comment Generator</title>
8
+
9
+ <!-- html2canvas library for image export - START -->
10
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
11
+ <!-- html2canvas library for image export - END -->
12
+
13
+ <style>
14
+ /* ============================================
15
+ CSS STYLES - START
16
+ ============================================ */
17
+
18
+ /* Google Fonts Import - START */
19
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
20
+ /* Google Fonts Import - END */
21
+
22
+ /* CSS Variables for Theme - START */
23
+ :root {
24
+ --bg-primary: #ffffff;
25
+ --bg-secondary: #f5f5f5;
26
+ --bg-card: #ffffff;
27
+ --text-primary: #161823;
28
+ --text-secondary: #545454;
29
+ --text-muted: #8a8a8a;
30
+ --border-color: #e3e3e3;
31
+ --accent-color: #fe2c55;
32
+ --accent-hover: #e91e45;
33
+ --verified-color: #20d5ec;
34
+ --shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
35
+ --input-bg: #f1f1f2;
36
+ }
37
+
38
+ [data-theme="dark"] {
39
+ --bg-primary: #121212;
40
+ --bg-secondary: #1e1e1e;
41
+ --bg-card: #1e1e1e;
42
+ --text-primary: #ffffff;
43
+ --text-secondary: #b0b0b0;
44
+ --text-muted: #6a6a6a;
45
+ --border-color: #2f2f2f;
46
+ --shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
47
+ --input-bg: #2a2a2a;
48
+ }
49
+
50
+ /* CSS Variables for Theme - END */
51
+
52
+ /* Global Styles - START */
53
+ * {
54
+ margin: 0;
55
+ padding: 0;
56
+ box-sizing: border-box;
57
+ }
58
+
59
+ body {
60
+ font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
61
+ background: var(--bg-primary);
62
+ color: var(--text-primary);
63
+ min-height: 100vh;
64
+ transition: all 0.3s ease;
65
+ }
66
+
67
+ /* Global Styles - END */
68
+
69
+ /* Header Styles - START */
70
+ .header {
71
+ background: linear-gradient(135deg, #fe2c55 0%, #25f4ee 100%);
72
+ padding: 30px 20px;
73
+ text-align: center;
74
+ position: relative;
75
+ }
76
+
77
+ .header h1 {
78
+ color: white;
79
+ font-size: 2.5rem;
80
+ font-weight: 700;
81
+ text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
82
+ display: flex;
83
+ align-items: center;
84
+ justify-content: center;
85
+ gap: 15px;
86
+ }
87
+
88
+ .header h1 .logo-icon {
89
+ width: 50px;
90
+ height: 50px;
91
+ background: white;
92
+ border-radius: 12px;
93
+ display: flex;
94
+ align-items: center;
95
+ justify-content: center;
96
+ font-size: 1.8rem;
97
+ }
98
+
99
+ .header p {
100
+ color: rgba(255, 255, 255, 0.9);
101
+ margin-top: 10px;
102
+ font-size: 1.1rem;
103
+ }
104
+
105
+ .theme-toggle {
106
+ position: absolute;
107
+ top: 20px;
108
+ right: 20px;
109
+ background: rgba(255, 255, 255, 0.2);
110
+ border: none;
111
+ padding: 12px 20px;
112
+ border-radius: 25px;
113
+ color: white;
114
+ cursor: pointer;
115
+ font-size: 1rem;
116
+ display: flex;
117
+ align-items: center;
118
+ gap: 8px;
119
+ transition: all 0.3s ease;
120
+ backdrop-filter: blur(10px);
121
+ }
122
+
123
+ .theme-toggle:hover {
124
+ background: rgba(255, 255, 255, 0.3);
125
+ transform: scale(1.05);
126
+ }
127
+
128
+ /* Header Styles - END */
129
+
130
+ /* Main Container - START */
131
+ .container {
132
+ max-width: 1200px;
133
+ margin: 0 auto;
134
+ padding: 40px 20px;
135
+ display: grid;
136
+ grid-template-columns: 1fr 1fr;
137
+ gap: 40px;
138
+ }
139
+
140
+ @media (max-width: 900px) {
141
+ .container {
142
+ grid-template-columns: 1fr;
143
+ }
144
+ }
145
+
146
+ /* Main Container - END */
147
+
148
+ /* Card Styles - START */
149
+ .card {
150
+ background: var(--bg-card);
151
+ border-radius: 20px;
152
+ padding: 30px;
153
+ box-shadow: var(--shadow);
154
+ border: 1px solid var(--border-color);
155
+ }
156
+
157
+ .card-title {
158
+ font-size: 1.4rem;
159
+ font-weight: 600;
160
+ margin-bottom: 25px;
161
+ display: flex;
162
+ align-items: center;
163
+ gap: 10px;
164
+ color: var(--text-primary);
165
+ }
166
+
167
+ .card-title .icon {
168
+ width: 35px;
169
+ height: 35px;
170
+ background: linear-gradient(135deg, #fe2c55, #ff6b81);
171
+ border-radius: 10px;
172
+ display: flex;
173
+ align-items: center;
174
+ justify-content: center;
175
+ color: white;
176
+ }
177
+
178
+ /* Card Styles - END */
179
+
180
+ /* Form Elements - START */
181
+ .form-group {
182
+ margin-bottom: 20px;
183
+ }
184
+
185
+ .form-group label {
186
+ display: block;
187
+ margin-bottom: 8px;
188
+ font-weight: 500;
189
+ color: var(--text-secondary);
190
+ font-size: 0.95rem;
191
+ }
192
+
193
+ .form-group input[type="text"],
194
+ .form-group textarea {
195
+ width: 100%;
196
+ padding: 14px 18px;
197
+ border: 2px solid var(--border-color);
198
+ border-radius: 12px;
199
+ font-size: 1rem;
200
+ background: var(--input-bg);
201
+ color: var(--text-primary);
202
+ transition: all 0.3s ease;
203
+ }
204
+
205
+ .form-group input[type="text"]:focus,
206
+ .form-group textarea:focus {
207
+ outline: none;
208
+ border-color: var(--accent-color);
209
+ box-shadow: 0 0 0 4px rgba(254, 44, 85, 0.1);
210
+ }
211
+
212
+ .form-group textarea {
213
+ resize: vertical;
214
+ min-height: 100px;
215
+ }
216
+
217
+ /* Form Elements - END */
218
+
219
+ /* Toggle Switch - START */
220
+ .toggle-group {
221
+ display: flex;
222
+ align-items: center;
223
+ justify-content: space-between;
224
+ padding: 15px;
225
+ background: var(--input-bg);
226
+ border-radius: 12px;
227
+ margin-bottom: 15px;
228
+ }
229
+
230
+ .toggle-label {
231
+ display: flex;
232
+ align-items: center;
233
+ gap: 10px;
234
+ font-weight: 500;
235
+ color: var(--text-primary);
236
+ }
237
+
238
+ .toggle-switch {
239
+ position: relative;
240
+ width: 55px;
241
+ height: 30px;
242
+ }
243
+
244
+ .toggle-switch input {
245
+ opacity: 0;
246
+ width: 0;
247
+ height: 0;
248
+ }
249
+
250
+ .toggle-slider {
251
+ position: absolute;
252
+ cursor: pointer;
253
+ top: 0;
254
+ left: 0;
255
+ right: 0;
256
+ bottom: 0;
257
+ background-color: var(--border-color);
258
+ transition: 0.3s;
259
+ border-radius: 30px;
260
+ }
261
+
262
+ .toggle-slider:before {
263
+ position: absolute;
264
+ content: "";
265
+ height: 24px;
266
+ width: 24px;
267
+ left: 3px;
268
+ bottom: 3px;
269
+ background-color: white;
270
+ transition: 0.3s;
271
+ border-radius: 50%;
272
+ box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
273
+ }
274
+
275
+ .toggle-switch input:checked+.toggle-slider {
276
+ background: linear-gradient(135deg, #20d5ec, #25f4ee);
277
+ }
278
+
279
+ .toggle-switch input:checked+.toggle-slider:before {
280
+ transform: translateX(25px);
281
+ }
282
+
283
+ /* Toggle Switch - END */
284
+
285
+ /* Random Identity Buttons - START */
286
+ .identity-section {
287
+ margin-bottom: 25px;
288
+ }
289
+
290
+ .identity-section h3 {
291
+ font-size: 1rem;
292
+ color: var(--text-secondary);
293
+ margin-bottom: 15px;
294
+ font-weight: 500;
295
+ }
296
+
297
+ .identity-buttons {
298
+ display: grid;
299
+ grid-template-columns: repeat(4, 1fr);
300
+ gap: 12px;
301
+ }
302
+
303
+ .identity-btn {
304
+ padding: 15px 10px;
305
+ border: 2px solid var(--border-color);
306
+ border-radius: 12px;
307
+ background: var(--input-bg);
308
+ color: var(--text-primary);
309
+ cursor: pointer;
310
+ font-size: 0.9rem;
311
+ font-weight: 500;
312
+ display: flex;
313
+ flex-direction: column;
314
+ align-items: center;
315
+ gap: 8px;
316
+ transition: all 0.3s ease;
317
+ }
318
+
319
+ .identity-btn:hover {
320
+ border-color: var(--accent-color);
321
+ transform: translateY(-3px);
322
+ box-shadow: 0 5px 15px rgba(254, 44, 85, 0.2);
323
+ }
324
+
325
+ .identity-btn .icon {
326
+ font-size: 1.8rem;
327
+ }
328
+
329
+ .identity-btn.male:hover {
330
+ border-color: #3b82f6;
331
+ background: rgba(59, 130, 246, 0.1);
332
+ }
333
+
334
+ .identity-btn.female:hover {
335
+ border-color: #ec4899;
336
+ background: rgba(236, 72, 153, 0.1);
337
+ }
338
+
339
+ .identity-btn.celebrity:hover {
340
+ border-color: #f59e0b;
341
+ background: rgba(245, 158, 11, 0.1);
342
+ }
343
+
344
+ .identity-btn.realistic:hover {
345
+ border-color: #10b981;
346
+ background: rgba(16, 185, 129, 0.1);
347
+ }
348
+
349
+ /* Random Identity Buttons - END */
350
+
351
+ /* Profile Picture Section - START */
352
+ .profile-upload {
353
+ display: flex;
354
+ align-items: center;
355
+ gap: 20px;
356
+ padding: 20px;
357
+ background: var(--input-bg);
358
+ border-radius: 15px;
359
+ margin-bottom: 20px;
360
+ }
361
+
362
+ .profile-preview {
363
+ width: 70px;
364
+ height: 70px;
365
+ border-radius: 50%;
366
+ object-fit: cover;
367
+ border: 3px solid var(--accent-color);
368
+ }
369
+
370
+ .profile-upload-area {
371
+ flex: 1;
372
+ }
373
+
374
+ .upload-btn {
375
+ padding: 12px 20px;
376
+ background: var(--accent-color);
377
+ color: white;
378
+ border: none;
379
+ border-radius: 10px;
380
+ cursor: pointer;
381
+ font-weight: 500;
382
+ transition: all 0.3s ease;
383
+ }
384
+
385
+ .upload-btn:hover {
386
+ background: var(--accent-hover);
387
+ }
388
+
389
+ .upload-hint {
390
+ font-size: 0.85rem;
391
+ color: var(--text-muted);
392
+ margin-top: 8px;
393
+ }
394
+
395
+ #profileInput {
396
+ display: none;
397
+ }
398
+
399
+ /* Profile Picture Section - END */
400
+
401
+ /* Message Style Section - START */
402
+ .message-style-section {
403
+ margin-bottom: 25px;
404
+ }
405
+
406
+ .message-style-section h3 {
407
+ font-size: 1rem;
408
+ color: var(--text-secondary);
409
+ margin-bottom: 15px;
410
+ font-weight: 500;
411
+ }
412
+
413
+ .style-buttons {
414
+ display: grid;
415
+ grid-template-columns: repeat(3, 1fr);
416
+ gap: 12px;
417
+ }
418
+
419
+ .style-btn {
420
+ padding: 15px 10px;
421
+ border: 2px solid var(--border-color);
422
+ border-radius: 12px;
423
+ background: var(--input-bg);
424
+ color: var(--text-primary);
425
+ cursor: pointer;
426
+ font-size: 0.85rem;
427
+ font-weight: 500;
428
+ display: flex;
429
+ flex-direction: column;
430
+ align-items: center;
431
+ gap: 8px;
432
+ transition: all 0.3s ease;
433
+ }
434
+
435
+ .style-btn:hover {
436
+ border-color: var(--accent-color);
437
+ transform: translateY(-2px);
438
+ }
439
+
440
+ .style-btn.active {
441
+ border-color: var(--accent-color);
442
+ background: rgba(254, 44, 85, 0.1);
443
+ }
444
+
445
+ .style-btn .icon {
446
+ font-size: 1.5rem;
447
+ }
448
+
449
+ /* Message Style Section - END */
450
+
451
+ /* Advanced Edit Section - START */
452
+ .advanced-section {
453
+ border-top: 1px solid var(--border-color);
454
+ padding-top: 20px;
455
+ margin-top: 20px;
456
+ }
457
+
458
+ .advanced-toggle {
459
+ display: flex;
460
+ align-items: center;
461
+ justify-content: space-between;
462
+ cursor: pointer;
463
+ padding: 15px;
464
+ background: var(--input-bg);
465
+ border-radius: 12px;
466
+ margin-bottom: 15px;
467
+ }
468
+
469
+ .advanced-toggle:hover {
470
+ background: var(--border-color);
471
+ }
472
+
473
+ .advanced-content {
474
+ display: none;
475
+ padding: 15px;
476
+ background: var(--input-bg);
477
+ border-radius: 12px;
478
+ margin-top: 10px;
479
+ }
480
+
481
+ .advanced-content.show {
482
+ display: block;
483
+ animation: slideDown 0.3s ease;
484
+ }
485
+
486
+ @keyframes slideDown {
487
+ from {
488
+ opacity: 0;
489
+ transform: translateY(-10px);
490
+ }
491
+
492
+ to {
493
+ opacity: 1;
494
+ transform: translateY(0);
495
+ }
496
+ }
497
+
498
+ .blur-slider {
499
+ width: 100%;
500
+ margin-top: 10px;
501
+ }
502
+
503
+ .blur-value {
504
+ text-align: center;
505
+ font-weight: 600;
506
+ color: var(--accent-color);
507
+ margin-top: 5px;
508
+ }
509
+
510
+ /* Advanced Edit Section - END */
511
+
512
+ /* Comment Preview Section - START */
513
+ .preview-section {
514
+ position: sticky;
515
+ top: 20px;
516
+ }
517
+
518
+ .comment-preview {
519
+ background: var(--bg-card);
520
+ border-radius: 20px;
521
+ padding: 25px;
522
+ border: 1px solid var(--border-color);
523
+ }
524
+
525
+ /* Default Style - Style 1 */
526
+ .comment-container {
527
+ display: flex;
528
+ gap: 15px;
529
+ padding: 20px;
530
+ background: var(--input-bg);
531
+ border-radius: 15px;
532
+ transition: all 0.3s ease;
533
+ }
534
+
535
+ /* Bubble Style - Style 2 */
536
+ .comment-container.style-bubble {
537
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
538
+ border-radius: 20px 20px 20px 5px;
539
+ position: relative;
540
+ box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
541
+ }
542
+
543
+ .comment-container.style-bubble::after {
544
+ content: '';
545
+ position: absolute;
546
+ bottom: 0;
547
+ left: -10px;
548
+ width: 0;
549
+ height: 0;
550
+ border: 15px solid transparent;
551
+ border-right-color: #764ba2;
552
+ border-bottom-color: #764ba2;
553
+ border-left: 0;
554
+ margin-bottom: -5px;
555
+ }
556
+
557
+ .comment-container.style-bubble .comment-username,
558
+ .comment-container.style-bubble .comment-text,
559
+ .comment-container.style-bubble .comment-time,
560
+ .comment-container.style-bubble .comment-action {
561
+ color: white !important;
562
+ }
563
+
564
+ /* Card Style - Style 3 */
565
+ .comment-container.style-card {
566
+ background: var(--bg-card);
567
+ border: 2px solid var(--accent-color);
568
+ border-radius: 16px;
569
+ box-shadow: 0 8px 30px rgba(254, 44, 85, 0.15);
570
+ padding: 25px;
571
+ }
572
+
573
+ .comment-avatar {
574
+ width: 48px;
575
+ height: 48px;
576
+ border-radius: 50%;
577
+ object-fit: cover;
578
+ flex-shrink: 0;
579
+ }
580
+
581
+ .comment-content {
582
+ flex: 1;
583
+ }
584
+
585
+ .comment-header {
586
+ display: flex;
587
+ align-items: center;
588
+ gap: 8px;
589
+ margin-bottom: 6px;
590
+ }
591
+
592
+ .comment-username {
593
+ font-weight: 600;
594
+ font-size: 0.95rem;
595
+ color: var(--text-primary);
596
+ }
597
+
598
+ .verified-badge {
599
+ width: 16px;
600
+ height: 16px;
601
+ display: none;
602
+ }
603
+
604
+ .verified-badge.show {
605
+ display: inline-block;
606
+ }
607
+
608
+ .comment-time {
609
+ font-size: 0.8rem;
610
+ color: var(--text-muted);
611
+ }
612
+
613
+ .comment-text {
614
+ font-size: 0.95rem;
615
+ color: var(--text-primary);
616
+ line-height: 1.5;
617
+ word-wrap: break-word;
618
+ }
619
+
620
+ .comment-text.blurred {
621
+ filter: blur(var(--blur-amount, 0px));
622
+ }
623
+
624
+ .comment-actions {
625
+ display: flex;
626
+ align-items: center;
627
+ gap: 20px;
628
+ margin-top: 12px;
629
+ }
630
+
631
+ .comment-action {
632
+ display: flex;
633
+ align-items: center;
634
+ gap: 5px;
635
+ color: var(--text-muted);
636
+ font-size: 0.85rem;
637
+ }
638
+
639
+ .comment-action .heart {
640
+ color: #fe2c55;
641
+ }
642
+
643
+ .like-action {
644
+ display: flex;
645
+ align-items: center;
646
+ gap: 5px;
647
+ }
648
+
649
+ .like-action.hidden {
650
+ display: none;
651
+ }
652
+
653
+ /* Comment Preview Section - END */
654
+
655
+ /* Export Buttons - START */
656
+ .export-section {
657
+ display: grid;
658
+ grid-template-columns: 1fr 1fr;
659
+ gap: 15px;
660
+ margin-top: 25px;
661
+ }
662
+
663
+ .export-btn {
664
+ padding: 16px 25px;
665
+ border: none;
666
+ border-radius: 12px;
667
+ font-size: 1rem;
668
+ font-weight: 600;
669
+ cursor: pointer;
670
+ display: flex;
671
+ align-items: center;
672
+ justify-content: center;
673
+ gap: 10px;
674
+ transition: all 0.3s ease;
675
+ }
676
+
677
+ .export-btn.download {
678
+ background: linear-gradient(135deg, #fe2c55, #ff6b81);
679
+ color: white;
680
+ }
681
+
682
+ .export-btn.download:hover {
683
+ transform: translateY(-3px);
684
+ box-shadow: 0 8px 25px rgba(254, 44, 85, 0.4);
685
+ }
686
+
687
+ .export-btn.copy {
688
+ background: linear-gradient(135deg, #25f4ee, #20d5ec);
689
+ color: white;
690
+ }
691
+
692
+ .export-btn.copy:hover {
693
+ transform: translateY(-3px);
694
+ box-shadow: 0 8px 25px rgba(32, 213, 236, 0.4);
695
+ }
696
+
697
+ /* Export Buttons - END */
698
+
699
+ /* Notification Toast - START */
700
+ .toast {
701
+ position: fixed;
702
+ bottom: 30px;
703
+ left: 50%;
704
+ transform: translateX(-50%) translateY(100px);
705
+ background: #1e1e1e;
706
+ color: white;
707
+ padding: 16px 30px;
708
+ border-radius: 12px;
709
+ font-weight: 500;
710
+ z-index: 1000;
711
+ opacity: 0;
712
+ transition: all 0.4s ease;
713
+ display: flex;
714
+ align-items: center;
715
+ gap: 10px;
716
+ }
717
+
718
+ .toast.show {
719
+ transform: translateX(-50%) translateY(0);
720
+ opacity: 1;
721
+ }
722
+
723
+ .toast.success {
724
+ background: linear-gradient(135deg, #10b981, #059669);
725
+ }
726
+
727
+ /* Notification Toast - END */
728
+
729
+ /* Footer - START */
730
+ .footer {
731
+ text-align: center;
732
+ padding: 30px;
733
+ color: var(--text-muted);
734
+ font-size: 0.9rem;
735
+ }
736
+
737
+ .footer a {
738
+ color: var(--accent-color);
739
+ text-decoration: none;
740
+ }
741
+
742
+ /* Footer - END */
743
+
744
+ /* Style Switcher in Preview - START */
745
+ .style-switcher {
746
+ display: flex;
747
+ gap: 10px;
748
+ margin-bottom: 20px;
749
+ justify-content: center;
750
+ }
751
+
752
+ .style-switch-btn {
753
+ padding: 10px 20px;
754
+ border: 2px solid var(--border-color);
755
+ border-radius: 25px;
756
+ background: var(--input-bg);
757
+ color: var(--text-primary);
758
+ cursor: pointer;
759
+ font-size: 0.85rem;
760
+ font-weight: 500;
761
+ transition: all 0.3s ease;
762
+ }
763
+
764
+ .style-switch-btn:hover {
765
+ border-color: var(--accent-color);
766
+ }
767
+
768
+ .style-switch-btn.active {
769
+ background: var(--accent-color);
770
+ color: white;
771
+ border-color: var(--accent-color);
772
+ }
773
+
774
+ /* Style Switcher in Preview - END */
775
+
776
+ /* Responsive Styles - START */
777
+ @media (max-width: 600px) {
778
+ .header h1 {
779
+ font-size: 1.8rem;
780
+ }
781
+
782
+ .theme-toggle {
783
+ position: static;
784
+ margin-top: 15px;
785
+ }
786
+
787
+ .identity-buttons {
788
+ grid-template-columns: repeat(2, 1fr);
789
+ }
790
+
791
+ .style-buttons {
792
+ grid-template-columns: 1fr;
793
+ }
794
+
795
+ .export-section {
796
+ grid-template-columns: 1fr;
797
+ }
798
+
799
+ .card {
800
+ padding: 20px;
801
+ }
802
+
803
+ .style-switcher {
804
+ flex-wrap: wrap;
805
+ }
806
+ }
807
+
808
+ /* Responsive Styles - END */
809
+
810
+ /* ============================================
811
+ CSS STYLES - END
812
+ ============================================ */
813
+ </style>
814
+ </head>
815
+
816
+ <body data-theme="light">
817
+
818
+ <!-- ============================================
819
+ HEADER SECTION - START
820
+ ============================================ -->
821
+ <header class="header">
822
+ <h1>
823
+ <span class="logo-icon">🎵</span>
824
+ N Priva Comment Generator
825
+ </h1>
826
+ <p>Create realistic TikTok-style comments in seconds</p>
827
+ <button class="theme-toggle" onclick="toggleTheme()">
828
+ <span id="themeIcon">🌙</span>
829
+ <span id="themeText">Dark Mode</span>
830
+ </button>
831
+ </header>
832
+ <!-- ============================================
833
+ HEADER SECTION - END
834
+ ============================================ -->
835
+
836
+ <!-- ============================================
837
+ MAIN CONTAINER - START
838
+ ============================================ -->
839
+ <main class="container">
840
+
841
+ <!-- ============================================
842
+ EDITOR PANEL - START
843
+ ============================================ -->
844
+ <div class="card editor-panel">
845
+ <h2 class="card-title">
846
+ <span class="icon">✏️</span>
847
+ Comment Editor
848
+ </h2>
849
+
850
+ <!-- Random Identity Generator - START -->
851
+ <div class="identity-section">
852
+ <h3>🎲 Random Identity Generator</h3>
853
+ <div class="identity-buttons">
854
+ <button class="identity-btn male" onclick="generateIdentity('male')">
855
+ <span class="icon">👨</span>
856
+ Male
857
+ </button>
858
+ <button class="identity-btn female" onclick="generateIdentity('female')">
859
+ <span class="icon">👩</span>
860
+ Female
861
+ </button>
862
+ <button class="identity-btn celebrity" onclick="generateIdentity('celebrity')">
863
+ <span class="icon">⭐</span>
864
+ Celebrity
865
+ </button>
866
+ <!-- NEW: Realistic Button - START -->
867
+ <button class="identity-btn realistic" onclick="generateIdentity('realistic')">
868
+ <span class="icon">📸</span>
869
+ Realistic
870
+ </button>
871
+ <!-- NEW: Realistic Button - END -->
872
+ </div>
873
+ </div>
874
+ <!-- Random Identity Generator - END -->
875
+
876
+ <!-- Profile Picture Upload - START -->
877
+ <div class="profile-upload">
878
+ <img src="https://api.dicebear.com/7.x/avataaars/svg?seed=default" alt="Profile" class="profile-preview"
879
+ id="profilePreview">
880
+ <div class="profile-upload-area">
881
+ <button class="upload-btn" onclick="document.getElementById('profileInput').click()">
882
+ 📷 Upload Photo
883
+ </button>
884
+ <p class="upload-hint">Or use Random Identity above</p>
885
+ <input type="file" id="profileInput" accept="image/*" onchange="handleImageUpload(event)">
886
+ </div>
887
+ </div>
888
+ <!-- Profile Picture Upload - END -->
889
+
890
+ <!-- Username Input - START -->
891
+ <div class="form-group">
892
+ <label for="username">Username</label>
893
+ <input type="text" id="username" placeholder="Enter username..." value="user_name"
894
+ oninput="updatePreview()">
895
+ </div>
896
+ <!-- Username Input - END -->
897
+
898
+ <!-- Comment Text Input - START -->
899
+ <div class="form-group">
900
+ <label for="commentText">Comment Text</label>
901
+ <textarea id="commentText" placeholder="Write your comment here..."
902
+ oninput="updatePreview()">This is an amazing video! 🔥❤️</textarea>
903
+ </div>
904
+ <!-- Comment Text Input - END -->
905
+
906
+ <!-- Like Count Input - START -->
907
+ <div class="form-group">
908
+ <label for="likeCount">Like Count</label>
909
+ <input type="text" id="likeCount" placeholder="e.g., 1.2K" value="2.5K" oninput="updatePreview()">
910
+ </div>
911
+ <!-- Like Count Input - END -->
912
+
913
+ <!-- NEW: Show Like Icon Toggle - START -->
914
+ <div class="toggle-group">
915
+ <span class="toggle-label">
916
+ <span>❤️</span>
917
+ Show Like Icon
918
+ </span>
919
+ <label class="toggle-switch">
920
+ <input type="checkbox" id="likeIconToggle" checked onchange="updatePreview()">
921
+ <span class="toggle-slider"></span>
922
+ </label>
923
+ </div>
924
+ <!-- NEW: Show Like Icon Toggle - END -->
925
+
926
+ <!-- Time Ago Input - START -->
927
+ <div class="form-group">
928
+ <label for="timeAgo">Time</label>
929
+ <input type="text" id="timeAgo" placeholder="e.g., 2h, 1d, 3w" value="2h" oninput="updatePreview()">
930
+ </div>
931
+ <!-- Time Ago Input - END -->
932
+
933
+ <!-- Verified Badge Toggle - START -->
934
+ <div class="toggle-group">
935
+ <span class="toggle-label">
936
+ <span>✓</span>
937
+ Verified Badge (Blue Tick)
938
+ </span>
939
+ <label class="toggle-switch">
940
+ <input type="checkbox" id="verifiedToggle" onchange="updatePreview()">
941
+ <span class="toggle-slider"></span>
942
+ </label>
943
+ </div>
944
+ <!-- Verified Badge Toggle - END -->
945
+
946
+ <!-- NEW: Message Style Section - START -->
947
+ <div class="message-style-section">
948
+ <h3>💬 Advanced Message Styles</h3>
949
+ <div class="style-buttons">
950
+ <button class="style-btn active" onclick="changeMessageStyle('default')" id="styleDefault">
951
+ <span class="icon">📝</span>
952
+ Default
953
+ </button>
954
+ <button class="style-btn" onclick="changeMessageStyle('bubble')" id="styleBubble">
955
+ <span class="icon">💭</span>
956
+ Bubble
957
+ </button>
958
+ <button class="style-btn" onclick="changeMessageStyle('card')" id="styleCard">
959
+ <span class="icon">🎴</span>
960
+ Card
961
+ </button>
962
+ </div>
963
+ </div>
964
+ <!-- NEW: Message Style Section - END -->
965
+
966
+ <!-- Advanced Edit Section - START -->
967
+ <div class="advanced-section">
968
+ <div class="advanced-toggle" onclick="toggleAdvanced()">
969
+ <span class="toggle-label">
970
+ <span>⚙️</span>
971
+ Advanced Edit
972
+ </span>
973
+ <span id="advancedArrow">▼</span>
974
+ </div>
975
+
976
+ <div class="advanced-content" id="advancedContent">
977
+ <!-- Blur Text Option - START -->
978
+ <div class="form-group">
979
+ <label for="blurSlider">Blur Text Effect</label>
980
+ <input type="range" id="blurSlider" class="blur-slider" min="0" max="10" value="0"
981
+ oninput="updateBlur()">
982
+ <p class="blur-value" id="blurValue">0px</p>
983
+ </div>
984
+ <!-- Blur Text Option - END -->
985
+
986
+ <!-- Reply Count Toggle - START -->
987
+ <div class="toggle-group">
988
+ <span class="toggle-label">
989
+ <span>💬</span>
990
+ Show Reply Count
991
+ </span>
992
+ <label class="toggle-switch">
993
+ <input type="checkbox" id="replyToggle" checked onchange="updatePreview()">
994
+ <span class="toggle-slider"></span>
995
+ </label>
996
+ </div>
997
+ <!-- Reply Count Toggle - END -->
998
+
999
+ <!-- Reply Count Input - START -->
1000
+ <div class="form-group" id="replyCountGroup">
1001
+ <label for="replyCount">Reply Count</label>
1002
+ <input type="text" id="replyCount" placeholder="e.g., 50" value="12" oninput="updatePreview()">
1003
+ </div>
1004
+ <!-- Reply Count Input - END -->
1005
+ </div>
1006
+ </div>
1007
+ <!-- Advanced Edit Section - END -->
1008
+
1009
+ </div>
1010
+ <!-- ============================================
1011
+ EDITOR PANEL - END
1012
+ ============================================ -->
1013
+
1014
+ <!-- ============================================
1015
+ PREVIEW PANEL - START
1016
+ ============================================ -->
1017
+ <div class="card preview-section">
1018
+ <h2 class="card-title">
1019
+ <span class="icon">👁️</span>
1020
+ Live Preview
1021
+ </h2>
1022
+
1023
+ <!-- Style Switcher Buttons - START -->
1024
+ <div class="style-switcher">
1025
+ <button class="style-switch-btn active" onclick="switchPreviewStyle('default')"
1026
+ id="previewStyleDefault">
1027
+ Style 1
1028
+ </button>
1029
+ <button class="style-switch-btn" onclick="switchPreviewStyle('bubble')" id="previewStyleBubble">
1030
+ Style 2
1031
+ </button>
1032
+ <button class="style-switch-btn" onclick="switchPreviewStyle('card')" id="previewStyleCard">
1033
+ Style 3
1034
+ </button>
1035
+ </div>
1036
+ <!-- Style Switcher Buttons - END -->
1037
+
1038
+ <!-- Comment Preview Box - START -->
1039
+ <div class="comment-preview" id="commentPreview">
1040
+ <div class="comment-container" id="commentContainer">
1041
+ <img src="https://api.dicebear.com/7.x/avataaars/svg?seed=default" alt="Avatar"
1042
+ class="comment-avatar" id="commentAvatar">
1043
+ <div class="comment-content">
1044
+ <div class="comment-header">
1045
+ <span class="comment-username" id="previewUsername">user_name</span>
1046
+
1047
+ <!-- Verified Badge SVG - START -->
1048
+ <svg class="verified-badge" id="verifiedBadge" viewBox="0 0 20 20" fill="#20d5ec">
1049
+ <path fill-rule="evenodd"
1050
+ d="M6.267 3.455a3.066 3.066 0 001.745-.723 3.066 3.066 0 013.976 0 3.066 3.066 0 001.745.723 3.066 3.066 0 012.812 2.812c.051.643.304 1.254.723 1.745a3.066 3.066 0 010 3.976 3.066 3.066 0 00-.723 1.745 3.066 3.066 0 01-2.812 2.812 3.066 3.066 0 00-1.745.723 3.066 3.066 0 01-3.976 0 3.066 3.066 0 00-1.745-.723 3.066 3.066 0 01-2.812-2.812 3.066 3.066 0 00-.723-1.745 3.066 3.066 0 010-3.976 3.066 3.066 0 00.723-1.745 3.066 3.066 0 012.812-2.812zm7.44 5.252a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
1051
+ clip-rule="evenodd" />
1052
+ </svg>
1053
+ <!-- Verified Badge SVG - END -->
1054
+
1055
+ <span class="comment-time" id="previewTime">2h</span>
1056
+ </div>
1057
+ <p class="comment-text" id="previewText">This is an amazing video! 🔥❤️</p>
1058
+ <div class="comment-actions">
1059
+ <!-- Like Action with Toggle - START -->
1060
+ <span class="comment-action like-action" id="likeAction">
1061
+ <span class="heart">❤️</span>
1062
+ <span id="previewLikes">2.5K</span>
1063
+ </span>
1064
+ <!-- Like Action with Toggle - END -->
1065
+ <span class="comment-action" id="replyAction">
1066
+ <span>💬</span>
1067
+ <span id="previewReplies">12</span> replies
1068
+ </span>
1069
+ </div>
1070
+ </div>
1071
+ </div>
1072
+ </div>
1073
+ <!-- Comment Preview Box - END -->
1074
+
1075
+ <!-- Export Buttons - START -->
1076
+ <div class="export-section">
1077
+ <button class="export-btn download" onclick="downloadImage()">
1078
+ <span>📥</span>
1079
+ Download Image
1080
+ </button>
1081
+ <button class="export-btn copy" onclick="copyToClipboard()">
1082
+ <span>📋</span>
1083
+ Copy to Clipboard
1084
+ </button>
1085
+ </div>
1086
+ <!-- Export Buttons - END -->
1087
+
1088
+ </div>
1089
+ <!-- ============================================
1090
+ PREVIEW PANEL - END
1091
+ ============================================ -->
1092
+
1093
+ </main>
1094
+ <!-- ============================================
1095
+ MAIN CONTAINER - END
1096
+ ============================================ -->
1097
+
1098
+ <!-- ============================================
1099
+ TOAST NOTIFICATION - START
1100
+ ============================================ -->
1101
+ <div class="toast" id="toast">
1102
+ <span id="toastIcon">✓</span>
1103
+ <span id="toastMessage">Success!</span>
1104
+ </div>
1105
+ <!-- ============================================
1106
+ TOAST NOTIFICATION - END
1107
+ ============================================ -->
1108
+
1109
+ <!-- ============================================
1110
+ FOOTER SECTION - START
1111
+ ============================================ -->
1112
+ <footer class="footer">
1113
+ <p>Made with ❤️ by N Priva | Generate unlimited TikTok-style comments</p>
1114
+ </footer>
1115
+ <!-- ============================================
1116
+ FOOTER SECTION - END
1117
+ ============================================ -->
1118
+
1119
+ <!-- ============================================
1120
+ JAVASCRIPT CODE - START
1121
+ ============================================ -->
1122
+ <script>
1123
+ // ============================================
1124
+ // DATA ARRAYS FOR RANDOM IDENTITY - START
1125
+ // ============================================
1126
+
1127
+ // Male Names Array - START
1128
+ const maleNames = [
1129
+ 'james_smith', 'michael_johnson', 'david_williams', 'chris_brown',
1130
+ 'daniel_jones', 'matthew_davis', 'andrew_miller', 'joshua_wilson',
1131
+ 'ryan_taylor', 'brandon_anderson', 'kevin_thomas', 'jason_jackson',
1132
+ 'justin_white', 'tyler_harris', 'austin_martin', 'zachary_thompson',
1133
+ 'alex_garcia', 'nathan_martinez', 'adam_robinson', 'ethan_clark'
1134
+ ];
1135
+ // Male Names Array - END
1136
+
1137
+ // Female Names Array - START
1138
+ const femaleNames = [
1139
+ 'emma_watson', 'olivia_jones', 'sophia_williams', 'isabella_brown',
1140
+ 'mia_johnson', 'charlotte_davis', 'amelia_miller', 'harper_wilson',
1141
+ 'evelyn_moore', 'abigail_taylor', 'emily_anderson', 'elizabeth_thomas',
1142
+ 'avery_jackson', 'ella_white', 'scarlett_harris', 'grace_martin',
1143
+ 'lily_thompson', 'chloe_garcia', 'victoria_martinez', 'riley_robinson'
1144
+ ];
1145
+ // Female Names Array - END
1146
+
1147
+ // Celebrity Names Array - START
1148
+ const celebrityNames = [
1149
+ 'therock', 'kyliejenner', 'kimkardashian', 'selenagomez',
1150
+ 'arianagrande', 'beyonce', 'taylorswift', 'justinbieber',
1151
+ 'cristiano', 'leomessi', 'neymarjr', 'kingjames',
1152
+ 'travisscott', 'nickiminaj', 'badgalriri', 'theweeknd',
1153
+ 'billieeilish', 'charlidamelio', 'addisonraee', 'khloekardashian'
1154
+ ];
1155
+ // Celebrity Names Array - END
1156
+
1157
+ // Realistic Names Array - START
1158
+ const realisticNames = [
1159
+ 'john_doe_99', 'sarah_miller', 'mike_wilson', 'emily_davis',
1160
+ 'alex_johnson', 'jessica_brown', 'david_smith', 'amanda_jones',
1161
+ 'chris_taylor', 'ashley_anderson', 'ryan_thomas', 'stephanie_white',
1162
+ 'kevin_martin', 'nicole_garcia', 'brian_martinez', 'michelle_robinson',
1163
+ 'jason_lee', 'jennifer_clark', 'mark_lewis', 'lisa_walker'
1164
+ ];
1165
+ // Realistic Names Array - END
1166
+
1167
+ // Current Style Variable
1168
+ let currentStyle = 'default';
1169
+
1170
+ // ============================================
1171
+ // DATA ARRAYS FOR RANDOM IDENTITY - END
1172
+ // ============================================
1173
+
1174
+ // ============================================
1175
+ // THEME TOGGLE FUNCTION - START
1176
+ // ============================================
1177
+ function toggleTheme() {
1178
+ const body = document.body;
1179
+ const themeIcon = document.getElementById('themeIcon');
1180
+ const themeText = document.getElementById('themeText');
1181
+
1182
+ if (body.getAttribute('data-theme') === 'light') {
1183
+ body.setAttribute('data-theme', 'dark');
1184
+ themeIcon.textContent = '☀️';
1185
+ themeText.textContent = 'Light Mode';
1186
+ } else {
1187
+ body.setAttribute('data-theme', 'light');
1188
+ themeIcon.textContent = '🌙';
1189
+ themeText.textContent = 'Dark Mode';
1190
+ }
1191
+ }
1192
+ // ============================================
1193
+ // THEME TOGGLE FUNCTION - END
1194
+ // ============================================
1195
+
1196
+ // ============================================
1197
+ // LIVE PREVIEW UPDATE FUNCTION - START
1198
+ // ============================================
1199
+ function updatePreview() {
1200
+ // Get Input Values - START
1201
+ const username = document.getElementById('username').value || 'username';
1202
+ const commentText = document.getElementById('commentText').value || 'Your comment here...';
1203
+ const likeCount = document.getElementById('likeCount').value || '0';
1204
+ const timeAgo = document.getElementById('timeAgo').value || '1h';
1205
+ const replyCount = document.getElementById('replyCount').value || '0';
1206
+ const isVerified = document.getElementById('verifiedToggle').checked;
1207
+ const showReplies = document.getElementById('replyToggle').checked;
1208
+ const showLikeIcon = document.getElementById('likeIconToggle').checked;
1209
+ // Get Input Values - END
1210
+
1211
+ // Update Preview Elements - START
1212
+ document.getElementById('previewUsername').textContent = username;
1213
+ document.getElementById('previewText').textContent = commentText;
1214
+ document.getElementById('previewLikes').textContent = likeCount;
1215
+ document.getElementById('previewTime').textContent = timeAgo;
1216
+ document.getElementById('previewReplies').textContent = replyCount;
1217
+ // Update Preview Elements - END
1218
+
1219
+ // Toggle Verified Badge - START
1220
+ const verifiedBadge = document.getElementById('verifiedBadge');
1221
+ if (isVerified) {
1222
+ verifiedBadge.classList.add('show');
1223
+ } else {
1224
+ verifiedBadge.classList.remove('show');
1225
+ }
1226
+ // Toggle Verified Badge - END
1227
+
1228
+ // Toggle Like Icon - START
1229
+ const likeAction = document.getElementById('likeAction');
1230
+ if (showLikeIcon) {
1231
+ likeAction.classList.remove('hidden');
1232
+ } else {
1233
+ likeAction.classList.add('hidden');
1234
+ }
1235
+ // Toggle Like Icon - END
1236
+
1237
+ // Toggle Reply Section - START
1238
+ const replyAction = document.getElementById('replyAction');
1239
+ const replyCountGroup = document.getElementById('replyCountGroup');
1240
+ if (showReplies) {
1241
+ replyAction.style.display = 'flex';
1242
+ replyCountGroup.style.display = 'block';
1243
+ } else {
1244
+ replyAction.style.display = 'none';
1245
+ replyCountGroup.style.display = 'none';
1246
+ }
1247
+ // Toggle Reply Section - END
1248
+ }
1249
+ // ============================================
1250
+ // LIVE PREVIEW UPDATE FUNCTION - END
1251
+ // ============================================
1252
+
1253
+ // ============================================
1254
+ // RANDOM IDENTITY GENERATOR FUNCTION - START
1255
+ // ============================================
1256
+ // ============================================
1257
+ // HELPER TO FETCH IMAGE AS BASE64 - START
1258
+ // ============================================
1259
+ async function fetchImageAsBase64(url) {
1260
+ // Helper to convert blob to base64
1261
+ const blobToBase64 = (blob) => {
1262
+ return new Promise((resolve, reject) => {
1263
+ const reader = new FileReader();
1264
+ reader.onloadend = () => resolve(reader.result);
1265
+ reader.onerror = reject;
1266
+ reader.readAsDataURL(blob);
1267
+ });
1268
+ };
1269
+
1270
+ try {
1271
+ // Try direct fetch first
1272
+ const response = await fetch(url);
1273
+ if (!response.ok) throw new Error('Direct fetch failed');
1274
+ const blob = await response.blob();
1275
+ return await blobToBase64(blob);
1276
+ } catch (directError) {
1277
+ console.warn('Direct fetch failed, trying proxy...', directError);
1278
+ try {
1279
+ // Fallback to CORS proxy
1280
+ // Using corsproxy.io as a reliable public proxy
1281
+ const proxyUrl = 'https://corsproxy.io/?' + encodeURIComponent(url);
1282
+ const response = await fetch(proxyUrl);
1283
+ if (!response.ok) throw new Error('Proxy fetch failed');
1284
+ const blob = await response.blob();
1285
+ return await blobToBase64(blob);
1286
+ } catch (proxyError) {
1287
+ console.error('Error fetching image via proxy:', proxyError);
1288
+ return null;
1289
+ }
1290
+ }
1291
+ }
1292
+ // ============================================
1293
+ // HELPER TO FETCH IMAGE AS BASE64 - END
1294
+ // ============================================
1295
+
1296
+ // ============================================
1297
+ // RANDOM IDENTITY GENERATOR FUNCTION - START
1298
+ // ============================================
1299
+ async function generateIdentity(type) {
1300
+ let name;
1301
+ let avatarUrl;
1302
+
1303
+ // Select Name and Avatar Based on Type - START
1304
+ if (type === 'male') {
1305
+ name = maleNames[Math.floor(Math.random() * maleNames.length)];
1306
+ // CHANGED: Using .png instead of .svg to fix download distortion
1307
+ avatarUrl = `https://api.dicebear.com/7.x/avataaars/png?seed=male${Math.random()}`;
1308
+ } else if (type === 'female') {
1309
+ name = femaleNames[Math.floor(Math.random() * femaleNames.length)];
1310
+ // CHANGED: Using .png instead of .svg to fix download distortion
1311
+ avatarUrl = `https://api.dicebear.com/7.x/avataaars/png?seed=female${Math.random()}`;
1312
+ } else if (type === 'celebrity') {
1313
+ name = celebrityNames[Math.floor(Math.random() * celebrityNames.length)];
1314
+ // CHANGED: Using .png instead of .svg to fix download distortion
1315
+ avatarUrl = `https://api.dicebear.com/7.x/initials/png?seed=${name}`;
1316
+ // Turn on verified badge for celebrities
1317
+ document.getElementById('verifiedToggle').checked = true;
1318
+ } else if (type === 'realistic') {
1319
+ // NEW: Realistic Photos from randomuser.me API - START
1320
+ try {
1321
+ const response = await fetch('https://randomuser.me/api/');
1322
+ const data = await response.json();
1323
+ const user = data.results[0];
1324
+ name = user.login.username; // Random user username
1325
+ avatarUrl = user.picture.large; // High quality picture
1326
+ } catch (e) {
1327
+ // Fallback if API fails
1328
+ name = realisticNames[Math.floor(Math.random() * realisticNames.length)];
1329
+ const gender = Math.random() > 0.5 ? 'men' : 'women';
1330
+ const randomNum = Math.floor(Math.random() * 99) + 1;
1331
+ avatarUrl = `https://randomuser.me/api/portraits/${gender}/${randomNum}.jpg`;
1332
+ }
1333
+ // NEW: Realistic Photos from randomuser.me API - END
1334
+ }
1335
+ // Select Name and Avatar Based on Type - END
1336
+
1337
+ // Show loading state or toast if needed
1338
+ showToast('Generating identity...', 'info');
1339
+
1340
+ // Convert to Base64 - FIXED FOR ALL TYPES
1341
+ const base64Image = await fetchImageAsBase64(avatarUrl);
1342
+
1343
+ if (base64Image) {
1344
+ // Update Profile Preview and Comment Avatar - START
1345
+ document.getElementById('profilePreview').src = base64Image;
1346
+ document.getElementById('commentAvatar').src = base64Image;
1347
+ // Update Profile Preview and Comment Avatar - END
1348
+
1349
+ showToast(`Generated ${type} identity: ${name}`, 'success');
1350
+ } else {
1351
+ // Fallback to URL if base64 conversion fails
1352
+ document.getElementById('profilePreview').src = avatarUrl;
1353
+ document.getElementById('commentAvatar').src = avatarUrl;
1354
+ showToast(`Generated identity (standard load): ${name}`, 'warning');
1355
+ }
1356
+
1357
+ // Update Username - START
1358
+ document.getElementById('username').value = name;
1359
+ // Update Username - END
1360
+
1361
+ // Trigger Preview Update
1362
+ updatePreview();
1363
+ }
1364
+ // ============================================
1365
+ // RANDOM IDENTITY GENERATOR FUNCTION - END
1366
+ // ============================================
1367
+
1368
+ // ============================================
1369
+ // MESSAGE STYLE CHANGE FUNCTION - START
1370
+ // ============================================
1371
+ function changeMessageStyle(style) {
1372
+ currentStyle = style;
1373
+
1374
+ // Remove active class from all style buttons - START
1375
+ document.querySelectorAll('.style-btn').forEach(btn => {
1376
+ btn.classList.remove('active');
1377
+ });
1378
+ // Remove active class from all style buttons - END
1379
+
1380
+ // Add active class to selected button - START
1381
+ if (style === 'default') {
1382
+ document.getElementById('styleDefault').classList.add('active');
1383
+ } else if (style === 'bubble') {
1384
+ document.getElementById('styleBubble').classList.add('active');
1385
+ } else if (style === 'card') {
1386
+ document.getElementById('styleCard').classList.add('active');
1387
+ }
1388
+ // Add active class to selected button - END
1389
+
1390
+ // Apply style to preview - START
1391
+ applyMessageStyle(style);
1392
+ // Apply style to preview - END
1393
+
1394
+ showToast(`Style changed to ${style}`, 'success');
1395
+ }
1396
+
1397
+ function switchPreviewStyle(style) {
1398
+ currentStyle = style;
1399
+
1400
+ // Remove active class from all preview style buttons - START
1401
+ document.querySelectorAll('.style-switch-btn').forEach(btn => {
1402
+ btn.classList.remove('active');
1403
+ });
1404
+ // Remove active class from all preview style buttons - END
1405
+
1406
+ // Add active class to selected button - START
1407
+ if (style === 'default') {
1408
+ document.getElementById('previewStyleDefault').classList.add('active');
1409
+ } else if (style === 'bubble') {
1410
+ document.getElementById('previewStyleBubble').classList.add('active');
1411
+ } else if (style === 'card') {
1412
+ document.getElementById('previewStyleCard').classList.add('active');
1413
+ }
1414
+ // Add active class to selected button - END
1415
+
1416
+ // Apply style to preview - START
1417
+ applyMessageStyle(style);
1418
+ // Apply style to preview - END
1419
+ }
1420
+
1421
+ function applyMessageStyle(style) {
1422
+ const container = document.getElementById('commentContainer');
1423
+
1424
+ // Remove all style classes - START
1425
+ container.classList.remove('style-bubble', 'style-card');
1426
+ // Remove all style classes - END
1427
+
1428
+ // Add selected style class - START
1429
+ if (style === 'bubble') {
1430
+ container.classList.add('style-bubble');
1431
+ } else if (style === 'card') {
1432
+ container.classList.add('style-card');
1433
+ }
1434
+ // Add selected style class - END
1435
+ }
1436
+ // ============================================
1437
+ // MESSAGE STYLE CHANGE FUNCTION - END
1438
+ // ============================================
1439
+
1440
+ // ============================================
1441
+ // IMAGE UPLOAD HANDLER - START
1442
+ // ============================================
1443
+ function handleImageUpload(event) {
1444
+ const file = event.target.files[0];
1445
+ if (file) {
1446
+ const reader = new FileReader();
1447
+ reader.onload = function (e) {
1448
+ document.getElementById('profilePreview').src = e.target.result;
1449
+ document.getElementById('commentAvatar').src = e.target.result;
1450
+ showToast('Profile picture uploaded!', 'success');
1451
+ };
1452
+ reader.readAsDataURL(file);
1453
+ }
1454
+ }
1455
+ // ============================================
1456
+ // IMAGE UPLOAD HANDLER - END
1457
+ // ============================================
1458
+
1459
+ // ============================================
1460
+ // ADVANCED SECTION TOGGLE - START
1461
+ // ============================================
1462
+ function toggleAdvanced() {
1463
+ const content = document.getElementById('advancedContent');
1464
+ const arrow = document.getElementById('advancedArrow');
1465
+
1466
+ content.classList.toggle('show');
1467
+ arrow.textContent = content.classList.contains('show') ? '▲' : '▼';
1468
+ }
1469
+ // ============================================
1470
+ // ADVANCED SECTION TOGGLE - END
1471
+ // ============================================
1472
+
1473
+ // ============================================
1474
+ // BLUR EFFECT FUNCTION - START
1475
+ // ============================================
1476
+ function updateBlur() {
1477
+ const blurValue = document.getElementById('blurSlider').value;
1478
+ const commentText = document.getElementById('previewText');
1479
+
1480
+ commentText.style.filter = `blur(${blurValue}px)`;
1481
+ document.getElementById('blurValue').textContent = `${blurValue}px`;
1482
+ }
1483
+ // ============================================
1484
+ // BLUR EFFECT FUNCTION - END
1485
+ // ============================================
1486
+
1487
+ // ============================================
1488
+ // DOWNLOAD IMAGE FUNCTION - START
1489
+ // ============================================
1490
+ async function downloadImage() {
1491
+ const element = document.getElementById('commentContainer');
1492
+
1493
+ try {
1494
+ // Use html2canvas to Capture Element - START
1495
+ const canvas = await html2canvas(element, {
1496
+ backgroundColor: null,
1497
+ scale: 3, // معیار بہتر کیا گیا ہے
1498
+ useCORS: true, // پروفائل پکچر کو ٹھیک رکھنے کے لیے
1499
+ allowTaint: false, // یہ لائن تصویر خراب ہونے سے بچائے گی
1500
+ onclone: (clonedDoc) => {
1501
+ // یہ حصہ کٹنے والے مسئلے کو حل کرتا ہے
1502
+ const clonedEl = clonedDoc.getElementById('commentContainer');
1503
+ if (clonedEl.classList.contains('style-bubble')) {
1504
+ clonedEl.style.marginLeft = "15px"; // بائیں طرف جگہ بنائی گئی
1505
+ clonedEl.style.marginRight = "15px";
1506
+ }
1507
+ }
1508
+ });
1509
+ // Use html2canvas to Capture Element - END
1510
+
1511
+ // Create Download Link - START
1512
+ const link = document.createElement('a');
1513
+ link.download = 'npriva-comment-' + Date.now() + '.png';
1514
+ link.href = canvas.toDataURL('image/png');
1515
+ link.click();
1516
+ // Create Download Link - END
1517
+
1518
+ showToast('Image downloaded successfully!', 'success');
1519
+ } catch (error) {
1520
+ showToast('Error generating image', 'error');
1521
+ console.error(error);
1522
+ }
1523
+ }
1524
+ // ============================================
1525
+ // DOWNLOAD IMAGE FUNCTION - END
1526
+ // ============================================
1527
+
1528
+ // ============================================
1529
+ // COPY TO CLIPBOARD FUNCTION - START
1530
+ // ============================================
1531
+ async function copyToClipboard() {
1532
+ const element = document.getElementById('commentContainer');
1533
+
1534
+ try {
1535
+ // Use html2canvas to Capture Element - START
1536
+ const canvas = await html2canvas(element, {
1537
+ backgroundColor: null,
1538
+ scale: 2,
1539
+ useCORS: true,
1540
+ allowTaint: true
1541
+ });
1542
+ // Use html2canvas to Capture Element - END
1543
+
1544
+ // Convert to Blob and Copy - START
1545
+ canvas.toBlob(async (blob) => {
1546
+ try {
1547
+ await navigator.clipboard.write([
1548
+ new ClipboardItem({ 'image/png': blob })
1549
+ ]);
1550
+ showToast('Copied to clipboard!', 'success');
1551
+ } catch (err) {
1552
+ // Fallback for browsers that don't support clipboard API
1553
+ showToast('Clipboard access denied. Try downloading instead.', 'error');
1554
+ }
1555
+ });
1556
+ // Convert to Blob and Copy - END
1557
+
1558
+ } catch (error) {
1559
+ showToast('Error copying image', 'error');
1560
+ console.error(error);
1561
+ }
1562
+ }
1563
+ // ============================================
1564
+ // COPY TO CLIPBOARD FUNCTION - END
1565
+ // ============================================
1566
+
1567
+ // ============================================
1568
+ // TOAST NOTIFICATION FUNCTION - START
1569
+ // ============================================
1570
+ function showToast(message, type = 'success') {
1571
+ const toast = document.getElementById('toast');
1572
+ const toastIcon = document.getElementById('toastIcon');
1573
+ const toastMessage = document.getElementById('toastMessage');
1574
+
1575
+ // Set Toast Content - START
1576
+ toastMessage.textContent = message;
1577
+ toastIcon.textContent = type === 'success' ? '✓' : '✕';
1578
+ toast.className = 'toast ' + type;
1579
+ // Set Toast Content - END
1580
+
1581
+ // Show Toast - START
1582
+ toast.classList.add('show');
1583
+ // Show Toast - END
1584
+
1585
+ // Hide Toast After 3 Seconds - START
1586
+ setTimeout(() => {
1587
+ toast.classList.remove('show');
1588
+ }, 3000);
1589
+ // Hide Toast After 3 Seconds - END
1590
+ }
1591
+ // ============================================
1592
+ // TOAST NOTIFICATION FUNCTION - END
1593
+ // ============================================
1594
+
1595
+ // ============================================
1596
+ // INITIAL PREVIEW UPDATE ON PAGE LOAD - START
1597
+ // ============================================
1598
+ document.addEventListener('DOMContentLoaded', function () {
1599
+ updatePreview();
1600
+
1601
+ // Add Right Click / Long Press to Download - START
1602
+ const previewContainer = document.getElementById('commentContainer');
1603
+
1604
+ // Context Menu (Right Click)
1605
+ previewContainer.addEventListener('contextmenu', function (e) {
1606
+ e.preventDefault(); // Prevent default browser menu
1607
+ if (confirm('Do you want to download this image?')) {
1608
+ downloadImage();
1609
+ }
1610
+ });
1611
+
1612
+ // Long Press (Mobile)
1613
+ let pressTimer;
1614
+ previewContainer.addEventListener('touchstart', function (e) {
1615
+ pressTimer = setTimeout(function () {
1616
+ if (confirm('Do you want to download this image?')) {
1617
+ downloadImage();
1618
+ }
1619
+ }, 800); // 800ms long press
1620
+ });
1621
+
1622
+ previewContainer.addEventListener('touchend', function (e) {
1623
+ clearTimeout(pressTimer);
1624
+ });
1625
+ previewContainer.addEventListener('touchmove', function (e) {
1626
+ clearTimeout(pressTimer);
1627
+ });
1628
+ // Add Right Click / Long Press to Download - END
1629
+ });
1630
+ // ============================================
1631
+ // INITIAL PREVIEW UPDATE ON PAGE LOAD - END
1632
+ // ============================================
1633
+
1634
+ </script>
1635
+ <!-- ============================================
1636
+ JAVASCRIPT CODE - END
1637
+ ============================================ -->
1638
+
1639
+ </body>
1640
+
1641
+ </html>