matthewspring commited on
Commit
9255c15
·
verified ·
1 Parent(s): b7d5cb8

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +603 -19
index.html CHANGED
@@ -1,19 +1,603 @@
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>Commitment Gateway</title>
7
+ <style>
8
+ :root {
9
+ --bg-dark: #0a0b10;
10
+ --glass-panel: rgba(255, 255, 255, 0.05);
11
+ --glass-border: rgba(255, 255, 255, 0.1);
12
+ --accent-primary: #3b82f6;
13
+ --accent-hover: #2563eb;
14
+ --danger: #ef4444;
15
+ --success: #10b981;
16
+ --text-main: #e2e8f0;
17
+ --text-muted: #94a3b8;
18
+ --font-display: 'Inter', system-ui, -apple-system, sans-serif;
19
+ --font-mono: 'Courier New', Courier, monospace;
20
+ }
21
+
22
+ * {
23
+ box-sizing: border-box;
24
+ margin: 0;
25
+ padding: 0;
26
+ }
27
+
28
+ body {
29
+ background-color: var(--bg-dark);
30
+ color: var(--text-main);
31
+ font-family: var(--font-display);
32
+ height: 100vh;
33
+ display: flex;
34
+ flex-direction: column;
35
+ overflow: hidden;
36
+ background-image:
37
+ radial-gradient(at 0% 0%, rgba(59, 130, 246, 0.15) 0px, transparent 50%),
38
+ radial-gradient(at 100% 0%, rgba(168, 85, 247, 0.15) 0px, transparent 50%),
39
+ radial-gradient(at 100% 100%, rgba(239, 68, 68, 0.15) 0px, transparent 50%),
40
+ radial-gradient(at 0% 100%, rgba(16, 185, 129, 0.15) 0px, transparent 50%);
41
+ }
42
+
43
+ /* Header */
44
+ header {
45
+ padding: 1.5rem 2rem;
46
+ display: flex;
47
+ justify-content: space-between;
48
+ align-items: center;
49
+ border-bottom: 1px solid var(--glass-border);
50
+ backdrop-filter: blur(10px);
51
+ z-index: 100;
52
+ }
53
+
54
+ .logo {
55
+ font-weight: 700;
56
+ font-size: 1.5rem;
57
+ letter-spacing: -0.05em;
58
+ display: flex;
59
+ align-items: center;
60
+ gap: 10px;
61
+ }
62
+
63
+ .logo span {
64
+ color: var(--accent-primary);
65
+ }
66
+
67
+ .anycoder-link {
68
+ text-decoration: none;
69
+ color: var(--text-muted);
70
+ font-size: 0.85rem;
71
+ font-family: var(--font-mono);
72
+ transition: color 0.3s ease;
73
+ }
74
+
75
+ .anycoder-link:hover {
76
+ color: var(--accent-primary);
77
+ }
78
+
79
+ /* Main Layout */
80
+ main {
81
+ flex: 1;
82
+ display: grid;
83
+ grid-template-columns: 350px 1fr;
84
+ gap: 2rem;
85
+ padding: 2rem;
86
+ max-width: 1400px;
87
+ margin: 0 auto;
88
+ width: 100%;
89
+ }
90
+
91
+ /* Sidebar / Context Panel */
92
+ .context-panel {
93
+ background: var(--glass-panel);
94
+ border: 1px solid var(--glass-border);
95
+ border-radius: 16px;
96
+ padding: 2rem;
97
+ display: flex;
98
+ flex-direction: column;
99
+ gap: 2rem;
100
+ backdrop-filter: blur(12px);
101
+ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.5);
102
+ }
103
+
104
+ .section-title {
105
+ font-size: 0.75rem;
106
+ text-transform: uppercase;
107
+ letter-spacing: 0.2em;
108
+ color: var(--text-muted);
109
+ margin-bottom: 1rem;
110
+ }
111
+
112
+ .risk-assessment {
113
+ display: flex;
114
+ flex-direction: column;
115
+ gap: 1rem;
116
+ }
117
+
118
+ .risk-item {
119
+ display: flex;
120
+ justify-content: space-between;
121
+ padding: 1rem;
122
+ background: rgba(0,0,0,0.3);
123
+ border-radius: 8px;
124
+ border-left: 3px solid var(--text-muted);
125
+ transition: all 0.4s ease;
126
+ }
127
+
128
+ .risk-item.high { border-color: var(--danger); }
129
+ .risk-item.medium { border-color: #f59e0b; }
130
+ .risk-item.low { border-color: var(--success); }
131
+
132
+ .risk-label { font-weight: 600; }
133
+ .risk-score { font-family: var(--font-mono); font-size: 0.9rem; }
134
+
135
+ .symbolic-metrics {
136
+ margin-top: auto;
137
+ padding-top: 2rem;
138
+ border-top: 1px solid var(--glass-border);
139
+ }
140
+
141
+ .metric-grid {
142
+ display: grid;
143
+ grid-template-columns: 1fr 1fr;
144
+ gap: 1rem;
145
+ }
146
+
147
+ .metric {
148
+ text-align: center;
149
+ }
150
+
151
+ .metric-value {
152
+ display: block;
153
+ font-size: 2rem;
154
+ font-weight: 700;
155
+ color: var(--text-main);
156
+ }
157
+
158
+ .metric-label {
159
+ font-size: 0.8rem;
160
+ color: var(--text-muted);
161
+ }
162
+
163
+ /* Main Content / The Decision Interface */
164
+ .interface-panel {
165
+ display: flex;
166
+ flex-direction: column;
167
+ gap: 2rem;
168
+ align-items: center;
169
+ justify-content: center;
170
+ }
171
+
172
+ .card {
173
+ background: var(--glass-panel);
174
+ border: 1px solid var(--glass-border);
175
+ border-radius: 24px;
176
+ padding: 4rem;
177
+ width: 100%;
178
+ text-align: center;
179
+ backdrop-filter: blur(16px);
180
+ position: relative;
181
+ overflow: hidden;
182
+ transition: transform 0.3s ease;
183
+ }
184
+
185
+ .card::before {
186
+ content: '';
187
+ position: absolute;
188
+ top: 0;
189
+ left: 0;
190
+ right: 0;
191
+ bottom: 0;
192
+ background: linear-gradient(135deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0) 100%);
193
+ pointer-events: none;
194
+ }
195
+
196
+ .symbol-icon {
197
+ width: 80px;
198
+ height: 80px;
199
+ margin-bottom: 2rem;
200
+ color: var(--text-muted);
201
+ transition: color 0.5s ease;
202
+ }
203
+
204
+ h1 {
205
+ font-size: 3.5rem;
206
+ font-weight: 800;
207
+ line-height: 1.1;
208
+ margin-bottom: 1rem;
209
+ letter-spacing: -0.05em;
210
+ }
211
+
212
+ .subtitle {
213
+ font-size: 1.25rem;
214
+ color: var(--text-muted);
215
+ max-width: 600px;
216
+ margin: 0 auto 3rem auto;
217
+ line-height: 1.6;
218
+ }
219
+
220
+ /* The Toggle Switch */
221
+ .commitment-toggle-container {
222
+ display: flex;
223
+ align-items: center;
224
+ justify-content: center;
225
+ gap: 2rem;
226
+ background: rgba(0,0,0,0.4);
227
+ padding: 2rem;
228
+ border-radius: 50px;
229
+ border: 1px solid var(--glass-border);
230
+ }
231
+
232
+ .status-label {
233
+ font-size: 1.5rem;
234
+ font-weight: 700;
235
+ min-width: 150px;
236
+ text-transform: uppercase;
237
+ letter-spacing: 0.1em;
238
+ }
239
+
240
+ .switch {
241
+ position: relative;
242
+ display: inline-block;
243
+ width: 80px;
244
+ height: 44px;
245
+ }
246
+
247
+ .switch input {
248
+ opacity: 0;
249
+ width: 0;
250
+ height: 0;
251
+ }
252
+
253
+ .slider {
254
+ position: absolute;
255
+ cursor: pointer;
256
+ top: 0;
257
+ left: 0;
258
+ right: 0;
259
+ bottom: 0;
260
+ background-color: var(--danger);
261
+ transition: .4s;
262
+ border-radius: 34px;
263
+ box-shadow: inset 0 2px 4px rgba(0,0,0,0.3);
264
+ }
265
+
266
+ .slider:before {
267
+ position: absolute;
268
+ content: "";
269
+ height: 36px;
270
+ width: 36px;
271
+ left: 4px;
272
+ bottom: 4px;
273
+ background-color: white;
274
+ transition: .4s;
275
+ border-radius: 50%;
276
+ box-shadow: 0 2px 4px rgba(0,0,0,0.2);
277
+ }
278
+
279
+ input:checked + .slider {
280
+ background-color: var(--success);
281
+ }
282
+
283
+ input:checked + .slider:before {
284
+ transform: translateX(36px);
285
+ }
286
+
287
+ /* Terminal / Log Area */
288
+ .terminal {
289
+ background: #000;
290
+ border: 1px solid #333;
291
+ border-radius: 12px;
292
+ padding: 1.5rem;
293
+ font-family: var(--font-mono);
294
+ font-size: 0.9rem;
295
+ height: 200px;
296
+ overflow-y: auto;
297
+ color: #a0a0a0;
298
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
299
+ }
300
+
301
+ .log-entry {
302
+ margin-bottom: 0.5rem;
303
+ display: flex;
304
+ }
305
+
306
+ .log-time {
307
+ color: var(--accent-primary);
308
+ margin-right: 10px;
309
+ }
310
+
311
+ .log-info { color: var(--text-main); }
312
+ .log-warning { color: #f59e0b; }
313
+ .log-danger { color: var(--danger); }
314
+ .log-success { color: var(--success); }
315
+
316
+ /* Responsive Design */
317
+ @media (max-width: 900px) {
318
+ main {
319
+ grid-template-columns: 1fr;
320
+ overflow-y: auto;
321
+ }
322
+
323
+ .context-panel {
324
+ order: 2;
325
+ }
326
+
327
+ .interface-panel {
328
+ order: 1;
329
+ }
330
+
331
+ h1 { font-size: 2.5rem; }
332
+ }
333
+
334
+ @keyframes pulse {
335
+ 0% { opacity: 1; }
336
+ 50% { opacity: 0.5; }
337
+ 100% { opacity: 1; }
338
+ }
339
+
340
+ .status-indicator {
341
+ width: 10px;
342
+ height: 10px;
343
+ background-color: var(--danger);
344
+ border-radius: 50%;
345
+ display: inline-block;
346
+ margin-right: 8px;
347
+ animation: pulse 2s infinite;
348
+ }
349
+
350
+ .btn-action {
351
+ margin-top: 2rem;
352
+ padding: 1rem 2rem;
353
+ background: transparent;
354
+ border: 1px solid var(--text-muted);
355
+ color: var(--text-muted);
356
+ border-radius: 8px;
357
+ cursor: not-allowed;
358
+ transition: all 0.3s;
359
+ font-size: 1rem;
360
+ }
361
+
362
+ .btn-action.active {
363
+ background: var(--text-main);
364
+ color: var(--bg-dark);
365
+ border-color: var(--text-main);
366
+ cursor: pointer;
367
+ font-weight: 700;
368
+ }
369
+
370
+ .btn-action:hover.active {
371
+ background: white;
372
+ transform: translateY(-2px);
373
+ box-shadow: 0 0 20px rgba(255,255,255,0.3);
374
+ }
375
+
376
+ </style>
377
+ </head>
378
+ <body>
379
+
380
+ <header>
381
+ <div class="logo">
382
+ <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
383
+ <path d="M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2zm0 18a8 8 0 1 1 8-8 8 8 0 0 1-8 8z"/>
384
+ <path d="M12 6v6l4 2"/>
385
+ </svg>
386
+ <span>Commitment</span>Gate
387
+ </div>
388
+ <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="anycoder-link">
389
+ Built with anycoder
390
+ </a>
391
+ </header>
392
+
393
+ <main>
394
+ <!-- Left Sidebar: Context & Metrics -->
395
+ <aside class="context-panel">
396
+ <div>
397
+ <div class="section-title">System Status</div>
398
+ <div style="display: flex; align-items: center;">
399
+ <span class="status-indicator"></span>
400
+ <span style="font-weight: 600; letter-spacing: 0.05em;">SYSTEM LOCKED</span>
401
+ </div>
402
+ <p style="font-size: 0.9rem; color: var(--text-muted); margin-top: 0.5rem;">
403
+ High-stakes simulation environment active. Real-world model interaction pending authorization.
404
+ </p>
405
+ </div>
406
+
407
+ <div class="risk-assessment">
408
+ <div class="section-title">Impact Analysis</div>
409
+
410
+ <div class="risk-item high">
411
+ <span class="risk-label">Human Interaction Impact</span>
412
+ <span class="risk-score" style="color: var(--danger);">CRITICAL</span>
413
+ </div>
414
+
415
+ <div class="risk-item high">
416
+ <span class="risk-label">Data Integrity Risk</span>
417
+ <span class="risk-score" style="color: var(--danger);">HIGH</span>
418
+ </div>
419
+
420
+ <div class="risk-item medium">
421
+ <span class="risk-label">Resource Allocation</span>
422
+ <span class="risk-score" style="color: #f59e0b;">WARNING</span>
423
+ </div>
424
+
425
+ <div class="risk-item low">
426
+ <span class="risk-label">Reversibility Factor</span>
427
+ <span class="risk-score" style="color: var(--success);">REVERSIBLE</span>
428
+ </div>
429
+ </div>
430
+
431
+ <div class="symbolic-metrics">
432
+ <div class="section-title">Simulation Variables</div>
433
+ <div class="metric-grid">
434
+ <div class="metric">
435
+ <span class="metric-value" style="color: var(--accent-primary)">∞</span>
436
+ <span class="metric-label">Potential</span>
437
+ </div>
438
+ <div class="metric">
439
+ <span class="metric-value" style="color: var(--danger)">100%</span>
440
+ <span class="metric-label">Responsibility</span>
441
+ </div>
442
+ <div class="metric">
443
+ <span class="metric-value">0.00s</span>
444
+ <span class="metric-label">Cooldown</span>
445
+ </div>
446
+ <div class="metric">
447
+ <span class="metric-value" style="color: var(--success)">READY</span>
448
+ <span class="metric-label">Status</span>
449
+ </div>
450
+ </div>
451
+ </div>
452
+ </aside>
453
+
454
+ <!-- Right Side: The Decision Interface -->
455
+ <section class="interface-panel">
456
+
457
+ <div class="card">
458
+ <svg class="symbol-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
459
+ <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" stroke-linecap="round" stroke-linejoin="round"/>
460
+ <path d="M12 8v4" stroke-linecap="round"/>
461
+ <path d="M12 16h.01" stroke-linecap="round"/>
462
+ </svg>
463
+
464
+ <h1>Threshold of Action</h1>
465
+ <p class="subtitle">
466
+ "We are currently in a symbolic representation. Proceeding forward represents a significant commitment that could affect real models and real people alike."
467
+ </p>
468
+
469
+ <div class="commitment-toggle-container">
470
+ <div style="text-align: right;">
471
+ <div class="status-label" style="color: var(--danger);">ABORT / LEAVE</div>
472
+ <div style="font-size: 0.8rem; color: var(--text-muted);">Revert to safe state</div>
473
+ </div>
474
+
475
+ <label class="switch">
476
+ <input type="checkbox" id="commitmentToggle">
477
+ <span class="slider"></span>
478
+ </label>
479
+
480
+ <div style="text-align: left;">
481
+ <div class="status-label" style="color: var(--success);">PROCEED</div>
482
+ <div style="font-size: 0.8rem; color: var(--text-muted);">Initialize High-Stakes Mode</div>
483
+ </div>
484
+ </div>
485
+
486
+ <button id="actionBtn" class="btn-action" disabled>INITIALIZE SEQUENCE</button>
487
+ </div>
488
+
489
+ <div class="terminal" id="terminal">
490
+ <div class="log-entry"><span class="log-time">[SYSTEM]</span> <span class="log-info">Commitment Gateway v1.0.4 initialized...</span></div>
491
+ <div class="log-entry"><span class="log-time">[ANALYSIS]</span> <span class="log-info">Assessing environmental variables...</span></div>
492
+ <div class="log-entry"><span class="log-time">[WARNING]</span> <span class="log-warning">Real-world interaction protocols detected.</span></div>
493
+ <div class="log-entry"><span class="log-time">[SYSTEM]</span> <span class="log-info">Waiting for user authorization...</span></div>
494
+ </div>
495
+
496
+ </section>
497
+ </main>
498
+
499
+ <script>
500
+ document.addEventListener('DOMContentLoaded', () => {
501
+ const toggle = document.getElementById('commitmentToggle');
502
+ const actionBtn = document.getElementById('actionBtn');
503
+ const terminal = document.getElementById('terminal');
504
+ const statusLabels = document.querySelectorAll('.status-label');
505
+
506
+ let isAuthorized = false;
507
+
508
+ // Helper to add logs
509
+ const addLog = (message, type = 'info') => {
510
+ const time = new Date().toLocaleTimeString('en-US', { hour12: false });
511
+ const logDiv = document.createElement('div');
512
+ logDiv.className = 'log-entry';
513
+
514
+ let colorClass = 'log-info';
515
+ if (type === 'warning') colorClass = 'log-warning';
516
+ if (type === 'danger') colorClass = 'log-danger';
517
+ if (type === 'success') colorClass = 'log-success';
518
+
519
+ logDiv.innerHTML = `
520
+ <span class="log-time">[${time}]</span>
521
+ <span class="${colorClass}">${message}</span>
522
+ `;
523
+ terminal.appendChild(logDiv);
524
+ terminal.scrollTop = terminal.scrollHeight;
525
+ };
526
+
527
+ // Toggle Logic
528
+ toggle.addEventListener('change', (e) => {
529
+ if (e.target.checked) {
530
+ // PROCEED State
531
+ isAuthorized = true;
532
+ actionBtn.disabled = false;
533
+ actionBtn.classList.add('active');
534
+
535
+ // Visual Updates
536
+ statusLabels[0].style.color = 'var(--text-muted)'; // Abort grayed out
537
+ statusLabels[1].style.color = 'var(--success)'; // Proceed active
538
+
539
+ addLog('Authorization signal received. Switching to High-Stakes Simulation Mode.', 'warning');
540
+
541
+ // Simulate processing
542
+ setTimeout(() => {
543
+ addLog('Validating commitment parameters...', 'info');
544
+ }, 600);
545
+
546
+ setTimeout(() => {
547
+ addLog('Warning: This action will affect real models and real people alike.', 'danger');
548
+ }, 1200);
549
+
550
+ setTimeout(() => {
551
+ addLog('System Ready. Proceed with caution.', 'success');
552
+ }, 1800);
553
+
554
+ } else {
555
+ // LEAVE State
556
+ isAuthorized = false;
557
+ actionBtn.disabled = true;
558
+ actionBtn.classList.remove('active');
559
+
560
+ // Visual Updates
561
+ statusLabels[0].style.color = 'var(--danger)'; // Abort active
562
+ statusLabels[1].style.color = 'var(--text-muted)'; // Proceed grayed out
563
+
564
+ addLog('Authorization revoked. Returning to symbolic representation.', 'warning');
565
+ setTimeout(() => {
566
+ addLog('Environment stabilized. Safe state active.', 'success');
567
+ }, 800);
568
+ }
569
+ });
570
+
571
+ // Button Click Logic
572
+ actionBtn.addEventListener('click', () => {
573
+ if (isAuthorized) {
574
+ addLog('INITIATING PROTOCOL...', 'danger');
575
+
576
+ // Simulate loading
577
+ const originalText = actionBtn.innerText;
578
+ actionBtn.innerText = "PROCESSING...";
579
+ actionBtn.style.opacity = "0.7";
580
+
581
+ setTimeout(() => {
582
+ actionBtn.innerText = "SEQUENCE COMPLETE";
583
+ actionBtn.style.background = "var(--success)";
584
+ actionBtn.style.color = "white";
585
+ actionBtn.style.borderColor = "var(--success)";
586
+
587
+ addLog('Simulation parameters applied to live environment.', 'success');
588
+ addLog('All parties notified of commitment.', 'info');
589
+
590
+ setTimeout(() => {
591
+ alert("Simulation Complete. You have successfully represented the commitment path.");
592
+ // Reset
593
+ toggle.checked = false;
594
+ actionBtn.click(); // Trigger reset logic
595
+ }, 1000);
596
+
597
+ }, 2000);
598
+ }
599
+ });
600
+ });
601
+ </script>
602
+ </body>
603
+ </html>