Hugging Face's logo

Spaces:
gaur3009
/
Web_Browser
Running

App Files Community
gaur3009 commited on
Commit
df88719
·
verified ·
1 Parent(s): 4fd5374

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +1515 -19
index.html CHANGED
@@ -1,19 +1,1515 @@
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>Quantumize Browser</title>
7
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
8
+ <style>
9
+ .error-actions {
10
+ display: flex;
11
+ gap: 10px;
12
+ margin-top: 20px;
13
+ }
14
+
15
+ .error-action-btn {
16
+ padding: 10px 20px;
17
+ border: none;
18
+ border-radius: 5px;
19
+ background: var(--primary-color);
20
+ color: white;
21
+ cursor: pointer;
22
+ display: flex;
23
+ align-items: center;
24
+ gap: 8px;
25
+ }
26
+
27
+ .error-action-btn:hover {
28
+ background: #306cce;
29
+ }
30
+
31
+ .browser-iframe {
32
+ width: 100%;
33
+ height: 100%;
34
+ border: none;
35
+ background: white;
36
+ }
37
+
38
+ .security-indicator {
39
+ margin-right: 8px;
40
+ font-size: 14px;
41
+ }
42
+
43
+ .secure { color: #0b8043; }
44
+ .insecure { color: #d50000; }
45
+
46
+ :root {
47
+ --primary-color: #4285f4;
48
+ --secondary-color: #f1f3f4;
49
+ --dark-color: #202124;
50
+ --light-color: #ffffff;
51
+ --border-color: #dadce0;
52
+ --highlight-color: #e8f0fe;
53
+ }
54
+
55
+ * {
56
+ margin: 0;
57
+ padding: 0;
58
+ box-sizing: border-box;
59
+ font-family: 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
60
+ }
61
+
62
+ body {
63
+ background-color: #f8f9fa;
64
+ height: 100vh;
65
+ display: flex;
66
+ flex-direction: column;
67
+ overflow: hidden;
68
+ }
69
+
70
+ /* Header Styles */
71
+ .browser-header {
72
+ background-color: var(--dark-color);
73
+ color: var(--light-color);
74
+ padding: 8px 16px;
75
+ display: flex;
76
+ align-items: center;
77
+ justify-content: space-between;
78
+ height: 48px;
79
+ -webkit-app-region: drag;
80
+ }
81
+
82
+ .browser-controls {
83
+ display: flex;
84
+ align-items: center;
85
+ gap: 16px;
86
+ -webkit-app-region: no-drag;
87
+ }
88
+
89
+ .control-btn {
90
+ background: none;
91
+ border: none;
92
+ color: var(--light-color);
93
+ font-size: 16px;
94
+ cursor: pointer;
95
+ padding: 4px;
96
+ border-radius: 4px;
97
+ transition: background-color 0.2s;
98
+ }
99
+
100
+ .control-btn:hover {
101
+ background-color: rgba(255, 255, 255, 0.1);
102
+ }
103
+
104
+ .window-title {
105
+ font-size: 14px;
106
+ opacity: 0.8;
107
+ flex: 1;
108
+ text-align: center;
109
+ padding: 0 20px;
110
+ -webkit-app-region: drag;
111
+ }
112
+
113
+ /* Tab Bar */
114
+ .tab-bar {
115
+ background-color: #fff;
116
+ display: flex;
117
+ height: 48px;
118
+ padding: 0 16px;
119
+ border-bottom: 1px solid rgba(0, 0, 0, 0.1);
120
+ overflow-x: auto;
121
+ overflow-y: hidden;
122
+ scrollbar-width: none;
123
+ }
124
+
125
+ .tab-bar::-webkit-scrollbar {
126
+ display: none;
127
+ }
128
+
129
+ .tab {
130
+ background-color: rgba(0, 0, 0, 0.05);
131
+ color: var(--dark-color);
132
+ padding: 12px 20px;
133
+ margin-right: 4px;
134
+ border-radius: 8px 8px 0 0;
135
+ font-size: 14px;
136
+ display: flex;
137
+ align-items: center;
138
+ max-width: 220px;
139
+ min-width: 120px;
140
+ position: relative;
141
+ cursor: pointer;
142
+ transition: all 0.2s;
143
+ border: 1px solid rgba(0, 0, 0, 0.1);
144
+ border-bottom: none;
145
+ }
146
+
147
+ .tab.active {
148
+ background-color: #fff;
149
+ color: var(--dark-color);
150
+ border-color: rgba(0, 0, 0, 0.1);
151
+ }
152
+
153
+ .tab:hover {
154
+ background-color: rgba(0, 0, 0, 0.08);
155
+ }
156
+
157
+ .tab.active:hover {
158
+ background-color: #fff;
159
+ }
160
+
161
+ .tab-title {
162
+ white-space: nowrap;
163
+ overflow: hidden;
164
+ text-overflow: ellipsis;
165
+ flex: 1;
166
+ margin: 0 8px;
167
+ }
168
+
169
+ .tab-close {
170
+ width: 18px;
171
+ height: 18px;
172
+ border-radius: 50%;
173
+ display: flex;
174
+ align-items: center;
175
+ justify-content: center;
176
+ transition: background-color 0.2s;
177
+ color: #5f6368;
178
+ }
179
+
180
+ .tab:hover .tab-close {
181
+ background-color: rgba(0, 0, 0, 0.1);
182
+ }
183
+
184
+ .new-tab-btn {
185
+ color: #5f6368;
186
+ font-size: 20px;
187
+ margin-left: 8px;
188
+ padding: 0 12px;
189
+ display: flex;
190
+ align-items: center;
191
+ cursor: pointer;
192
+ border-radius: 4px;
193
+ transition: background-color 0.2s;
194
+ min-width: 40px;
195
+ flex-shrink: 0;
196
+ }
197
+
198
+ .new-tab-btn:hover {
199
+ background-color: rgba(0, 0, 0, 0.1);
200
+ }
201
+
202
+ /* Navigation Bar */
203
+ .nav-bar {
204
+ display: flex;
205
+ padding: 8px;
206
+ background-color: var(--light-color);
207
+ border-bottom: 1px solid var(--border-color);
208
+ align-items: center;
209
+ }
210
+
211
+ .nav-btn {
212
+ background: none;
213
+ border: none;
214
+ font-size: 20px;
215
+ width: 40px;
216
+ height: 40px;
217
+ border-radius: 50%;
218
+ cursor: pointer;
219
+ color: #5f6368;
220
+ transition: background-color 0.2s;
221
+ }
222
+
223
+ .nav-btn:hover {
224
+ background-color: var(--secondary-color);
225
+ }
226
+
227
+ .nav-btn.disabled {
228
+ color: #dadce0;
229
+ cursor: default;
230
+ }
231
+
232
+ .nav-btn.disabled:hover {
233
+ background: none;
234
+ }
235
+
236
+ .address-bar {
237
+ flex: 1;
238
+ margin: 0 8px;
239
+ height: 40px;
240
+ border-radius: 20px;
241
+ border: 1px solid var(--border-color);
242
+ padding: 0 16px;
243
+ font-size: 15px;
244
+ outline: none;
245
+ transition: box-shadow 0.2s;
246
+ background-color: var(--secondary-color);
247
+ }
248
+
249
+ .address-bar:focus {
250
+ background-color: #fff;
251
+ border-color: var(--primary-color);
252
+ box-shadow: 0 1px 6px rgba(32, 33, 36, 0.28);
253
+ }
254
+
255
+ .extensions-area {
256
+ display: flex;
257
+ margin-left: 8px;
258
+ }
259
+
260
+ .extension-icon {
261
+ width: 24px;
262
+ height: 24px;
263
+ margin: 0 4px;
264
+ cursor: pointer;
265
+ border-radius: 4px;
266
+ transition: transform 0.2s;
267
+ }
268
+
269
+ .extension-icon:hover {
270
+ transform: scale(1.1);
271
+ }
272
+
273
+ .profile-btn {
274
+ width: 32px;
275
+ height: 32px;
276
+ border-radius: 50%;
277
+ background-color: var(--primary-color);
278
+ color: white;
279
+ display: flex;
280
+ align-items: center;
281
+ justify-content: center;
282
+ font-weight: bold;
283
+ margin-left: 8px;
284
+ cursor: pointer;
285
+ transition: transform 0.2s;
286
+ }
287
+
288
+ .profile-btn:hover {
289
+ transform: scale(1.05);
290
+ }
291
+
292
+ /* Content Area */
293
+ .content-area {
294
+ flex: 1;
295
+ display: flex;
296
+ background-color: var(--light-color);
297
+ overflow: hidden;
298
+ }
299
+
300
+ /* Sidebar */
301
+ .sidebar {
302
+ width: 72px;
303
+ background-color: #f6f8fc;
304
+ display: flex;
305
+ flex-direction: column;
306
+ align-items: center;
307
+ padding: 16px 0;
308
+ border-right: 1px solid var(--border-color);
309
+ }
310
+
311
+ .sidebar-icon {
312
+ width: 40px;
313
+ height: 40px;
314
+ border-radius: 50%;
315
+ display: flex;
316
+ align-items: center;
317
+ justify-content: center;
318
+ color: #5f6368;
319
+ margin-bottom: 16px;
320
+ cursor: pointer;
321
+ transition: all 0.2s;
322
+ }
323
+
324
+ .sidebar-icon:hover {
325
+ background-color: rgba(0, 0, 0, 0.08);
326
+ }
327
+
328
+ .sidebar-icon.active {
329
+ background-color: var(--highlight-color);
330
+ color: var(--primary-color);
331
+ }
332
+
333
+ /* Main View */
334
+ .main-view {
335
+ flex: 1;
336
+ display: flex;
337
+ flex-direction: column;
338
+ overflow: hidden;
339
+ position: relative;
340
+ }
341
+
342
+ /* Current Page */
343
+ .current-page {
344
+ flex: 1;
345
+ border: none;
346
+ background-color: var(--light-color);
347
+ width: 100%;
348
+ height: 100%;
349
+ }
350
+
351
+ /* Status Bar */
352
+ .status-bar {
353
+ height: 24px;
354
+ background-color: var(--light-color);
355
+ border-top: 1px solid var(--border-color);
356
+ display: flex;
357
+ align-items: center;
358
+ padding: 0 16px;
359
+ font-size: 12px;
360
+ color: #5f6368;
361
+ justify-content: space-between;
362
+ }
363
+
364
+ /* Profile Menu */
365
+ .profile-menu {
366
+ position: absolute;
367
+ top: 80px;
368
+ right: 16px;
369
+ background-color: var(--light-color);
370
+ width: 300px;
371
+ border-radius: 8px;
372
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 4px 12px rgba(0, 0, 0, 0.2);
373
+ z-index: 100;
374
+ display: none;
375
+ padding: 16px;
376
+ border: 1px solid var(--border-color);
377
+ }
378
+
379
+ .profile-menu.active {
380
+ display: block;
381
+ }
382
+
383
+ .profile-header {
384
+ display: flex;
385
+ align-items: center;
386
+ padding-bottom: 16px;
387
+ border-bottom: 1px solid var(--border-color);
388
+ margin-bottom: 8px;
389
+ }
390
+
391
+ .profile-header-icon {
392
+ width: 40px;
393
+ height: 40px;
394
+ border-radius: 50%;
395
+ background-color: var(--primary-color);
396
+ color: white;
397
+ display: flex;
398
+ align-items: center;
399
+ justify-content: center;
400
+ font-weight: bold;
401
+ margin-right: 16px;
402
+ }
403
+
404
+ .profile-info h3 {
405
+ font-size: 16px;
406
+ margin-bottom: 4px;
407
+ }
408
+
409
+ .profile-info p {
410
+ font-size: 14px;
411
+ color: #5f6368;
412
+ }
413
+
414
+ .menu-items {
415
+ padding: 8px 0;
416
+ }
417
+
418
+ .menu-item {
419
+ padding: 12px 8px;
420
+ display: flex;
421
+ align-items: center;
422
+ border-radius: 4px;
423
+ cursor: pointer;
424
+ }
425
+
426
+ .menu-item:hover {
427
+ background-color: var(--secondary-color);
428
+ }
429
+
430
+ .menu-item i {
431
+ margin-right: 16px;
432
+ color: #5f6368;
433
+ width: 20px;
434
+ text-align: center;
435
+ }
436
+
437
+ /* Extensions Menu */
438
+ .extensions-menu {
439
+ position: absolute;
440
+ top: 80px;
441
+ right: 100px;
442
+ background-color: var(--light-color);
443
+ width: 300px;
444
+ border-radius: 8px;
445
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 4px 12px rgba(0, 0, 0, 0.2);
446
+ z-index: 100;
447
+ display: none;
448
+ padding: 16px;
449
+ border: 1px solid var(--border-color);
450
+ }
451
+
452
+ .extensions-menu.active {
453
+ display: block;
454
+ }
455
+
456
+ .extensions-header {
457
+ display: flex;
458
+ justify-content: space-between;
459
+ align-items: center;
460
+ padding-bottom: 16px;
461
+ border-bottom: 1px solid var(--border-color);
462
+ margin-bottom: 8px;
463
+ }
464
+
465
+ .extension {
466
+ display: flex;
467
+ align-items: center;
468
+ padding: 8px;
469
+ border-radius: 4px;
470
+ margin-bottom: 8px;
471
+ cursor: pointer;
472
+ }
473
+
474
+ .extension:hover {
475
+ background-color: var(--secondary-color);
476
+ }
477
+
478
+ .extension-icon-small {
479
+ width: 32px;
480
+ height: 32px;
481
+ background-color: #f1f3f4;
482
+ border-radius: 4px;
483
+ display: flex;
484
+ align-items: center;
485
+ justify-content: center;
486
+ margin-right: 12px;
487
+ color: var(--primary-color);
488
+ }
489
+
490
+ .extension-info {
491
+ flex: 1;
492
+ }
493
+
494
+ .extension-info h4 {
495
+ font-size: 14px;
496
+ margin-bottom: 2px;
497
+ }
498
+
499
+ .extension-info p {
500
+ font-size: 12px;
501
+ color: #5f6368;
502
+ }
503
+
504
+ .extension-toggle {
505
+ width: 36px;
506
+ height: 20px;
507
+ background-color: #ccc;
508
+ border-radius: 10px;
509
+ position: relative;
510
+ cursor: pointer;
511
+ }
512
+
513
+ .extension-toggle.active {
514
+ background-color: var(--primary-color);
515
+ }
516
+
517
+ .toggle-knob {
518
+ width: 16px;
519
+ height: 16px;
520
+ background-color: white;
521
+ border-radius: 50%;
522
+ position: absolute;
523
+ top: 2px;
524
+ left: 2px;
525
+ transition: transform 0.2s;
526
+ }
527
+
528
+ .extension-toggle.active .toggle-knob {
529
+ transform: translateX(16px);
530
+ }
531
+
532
+ /* Download Bar */
533
+ .download-bar {
534
+ position: absolute;
535
+ bottom: 0;
536
+ left: 0;
537
+ width: 100%;
538
+ background-color: var(--light-color);
539
+ border-top: 1px solid var(--border-color);
540
+ padding: 8px 16px;
541
+ display: none;
542
+ z-index: 10;
543
+ box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
544
+ }
545
+
546
+ .download-bar.active {
547
+ display: block;
548
+ animation: slideUp 0.3s ease-out;
549
+ }
550
+
551
+ @keyframes slideUp {
552
+ from { transform: translateY(100%); }
553
+ to { transform: translateY(0); }
554
+ }
555
+
556
+ .download-item {
557
+ display: flex;
558
+ align-items: center;
559
+ padding: 8px;
560
+ border-radius: 4px;
561
+ }
562
+
563
+ .download-item:hover {
564
+ background-color: var(--secondary-color);
565
+ }
566
+
567
+ .download-icon {
568
+ width: 24px;
569
+ height: 24px;
570
+ margin-right: 12px;
571
+ color: var(--primary-color);
572
+ }
573
+
574
+ .download-info {
575
+ flex: 1;
576
+ }
577
+
578
+ .download-info h4 {
579
+ font-size: 14px;
580
+ margin-bottom: 2px;
581
+ white-space: nowrap;
582
+ overflow: hidden;
583
+ text-overflow: ellipsis;
584
+ }
585
+
586
+ .download-info p {
587
+ font-size: 12px;
588
+ color: #5f6368;
589
+ }
590
+
591
+ .download-progress {
592
+ width: 120px;
593
+ height: 4px;
594
+ background-color: var(--secondary-color);
595
+ border-radius: 2px;
596
+ overflow: hidden;
597
+ margin: 0 12px;
598
+ }
599
+
600
+ .download-progress-bar {
601
+ height: 100%;
602
+ background-color: var(--primary-color);
603
+ width: 30%;
604
+ transition: width 0.3s;
605
+ }
606
+
607
+ .download-actions i {
608
+ margin-left: 12px;
609
+ cursor: pointer;
610
+ color: #5f6368;
611
+ }
612
+
613
+ /* Theme */
614
+ .theme-dark {
615
+ --dark-color: #202124;
616
+ --light-color: #35363a;
617
+ --border-color: #5f6368;
618
+ --secondary-color: #292a2d;
619
+ --highlight-color: #414243;
620
+ color: #e8eaed;
621
+ }
622
+
623
+ .theme-dark .address-bar {
624
+ background-color: var(--dark-color);
625
+ color: white;
626
+ }
627
+
628
+ .theme-dark .sidebar {
629
+ background-color: #25272a;
630
+ border-right-color: var(--border-color);
631
+ }
632
+
633
+ .theme-dark .content-area {
634
+ background-color: var(--dark-color);
635
+ }
636
+
637
+ .theme-dark .current-page {
638
+ background-color: var(--dark-color);
639
+ }
640
+
641
+ .theme-dark .nav-btn {
642
+ color: #e8eaed;
643
+ }
644
+
645
+ .theme-dark .status-bar {
646
+ background-color: var(--dark-color);
647
+ color: #9aa0a6;
648
+ border-top: 1px solid var(--border-color);
649
+ }
650
+
651
+ .theme-dark .sidebar-icon {
652
+ color: #e8eaed;
653
+ }
654
+
655
+ .theme-dark .sidebar-icon:hover {
656
+ background-color: rgba(255, 255, 255, 0.08);
657
+ }
658
+
659
+ .theme-dark .sidebar-icon.active {
660
+ background-color: var(--highlight-color);
661
+ color: var(--primary-color);
662
+ }
663
+
664
+ /* Tab dragging */
665
+ .tab.dragging {
666
+ opacity: 0.8;
667
+ transform: scale(0.98);
668
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
669
+ }
670
+
671
+ /* Bookmarks bar */
672
+ .bookmarks-bar {
673
+ display: flex;
674
+ padding: 8px 16px;
675
+ background-color: var(--secondary-color);
676
+ border-bottom: 1px solid var(--border-color);
677
+ gap: 12px;
678
+ overflow-x: auto;
679
+ }
680
+
681
+ .bookmark {
682
+ padding: 4px 12px;
683
+ background-color: rgba(0, 0, 0, 0.05);
684
+ border-radius: 4px;
685
+ cursor: pointer;
686
+ display: flex;
687
+ align-items: center;
688
+ gap: 6px;
689
+ white-space: nowrap;
690
+ font-size: 13px;
691
+ transition: background-color 0.2s;
692
+ }
693
+
694
+ .bookmark:hover {
695
+ background-color: rgba(0, 0, 0, 0.1);
696
+ }
697
+
698
+ .bookmark i {
699
+ font-size: 12px;
700
+ color: #5f6368;
701
+ }
702
+
703
+ /* Error page */
704
+ .error-page {
705
+ padding: 20px;
706
+ text-align: center;
707
+ color: #ff4444;
708
+ display: none;
709
+ flex-direction: column;
710
+ align-items: center;
711
+ justify-content: center;
712
+ height: 100%;
713
+ }
714
+
715
+ .error-page i {
716
+ font-size: 48px;
717
+ margin-bottom: 16px;
718
+ }
719
+
720
+ .error-page h2 {
721
+ margin-bottom: 8px;
722
+ }
723
+
724
+ .error-page p {
725
+ margin-bottom: 16px;
726
+ color: #5f6368;
727
+ max-width: 400px;
728
+ }
729
+
730
+ .error-retry-btn {
731
+ background-color: var(--primary-color);
732
+ color: white;
733
+ border: none;
734
+ padding: 8px 16px;
735
+ border-radius: 4px;
736
+ cursor: pointer;
737
+ transition: background-color 0.2s;
738
+ }
739
+
740
+ .error-retry-btn:hover {
741
+ background-color: #3367d6;
742
+ }
743
+
744
+ /* Loading overlay */
745
+ .loading-overlay {
746
+ position: absolute;
747
+ top: 0;
748
+ left: 0;
749
+ width: 100%;
750
+ height: 100%;
751
+ background: rgba(255, 255, 255, 0.8);
752
+ display: none;
753
+ justify-content: center;
754
+ align-items: center;
755
+ z-index: 10;
756
+ }
757
+
758
+ .loading-overlay i {
759
+ font-size: 32px;
760
+ color: var(--primary-color);
761
+ animation: spin 1s linear infinite;
762
+ }
763
+
764
+ @keyframes spin {
765
+ from { transform: rotate(0deg); }
766
+ to { transform: rotate(360deg); }
767
+ }
768
+
769
+ /* Search suggestions */
770
+ .search-suggestions {
771
+ position: absolute;
772
+ width: calc(100% - 32px);
773
+ background: var(--light-color);
774
+ border: 1px solid var(--border-color);
775
+ border-radius: 0 0 8px 8px;
776
+ margin-top: -4px;
777
+ display: none;
778
+ z-index: 1000;
779
+ max-height: 300px;
780
+ overflow-y: auto;
781
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
782
+ }
783
+
784
+ .suggestion-item {
785
+ padding: 8px 16px;
786
+ cursor: pointer;
787
+ display: flex;
788
+ align-items: center;
789
+ }
790
+
791
+ .suggestion-item:hover {
792
+ background-color: var(--secondary-color);
793
+ }
794
+
795
+ .suggestion-item i {
796
+ margin-right: 10px;
797
+ color: #5f6368;
798
+ font-size: 14px;
799
+ }
800
+
801
+ /* Privacy and security indicators */
802
+ .security-indicator {
803
+ margin-right: 8px;
804
+ font-size: 14px;
805
+ }
806
+
807
+ .secure {
808
+ color: #0b8043;
809
+ }
810
+
811
+ .insecure {
812
+ color: #d50000;
813
+ }
814
+
815
+ /* Window controls */
816
+ .window-controls {
817
+ display: flex;
818
+ align-items: center;
819
+ gap: 8px;
820
+ }
821
+
822
+ .window-btn {
823
+ width: 16px;
824
+ height: 16px;
825
+ border-radius: 50%;
826
+ border: none;
827
+ cursor: pointer;
828
+ transition: transform 0.2s;
829
+ }
830
+
831
+ .window-btn:hover {
832
+ transform: scale(1.1);
833
+ }
834
+
835
+ .window-btn.close {
836
+ background-color: #ff5f56;
837
+ }
838
+
839
+ .window-btn.minimize {
840
+ background-color: #ffbd2e;
841
+ }
842
+
843
+ .window-btn.maximize {
844
+ background-color: #27c93f;
845
+ }
846
+ </style>
847
+ </head>
848
+ <body>
849
+ <div class="browser-header">
850
+ <div class="browser-controls">
851
+ <button class="control-btn"><i class="fas fa-bars"></i></button>
852
+ <button class="control-btn"><i class="fas fa-download"></i></button>
853
+ <button class="control-btn"><i class="fas fa-print"></i></button>
854
+ </div>
855
+
856
+ <div class="window-title">Quantumize Browser</div>
857
+
858
+ <div class="window-controls">
859
+ <button class="window-btn minimize"></button>
860
+ <button class="window-btn maximize"></button>
861
+ <button class="window-btn close"></button>
862
+ </div>
863
+ </div>
864
+
865
+ <!-- Tab Bar -->
866
+ <div class="tab-bar" id="tab-bar">
867
+ <div class="tab active" data-url="https://www.google.com">
868
+ <i class="fas fa-lock security-indicator secure"></i>
869
+ <div class="tab-title">Google</div>
870
+ <div class="tab-close"><i class="fas fa-times"></i></div>
871
+ </div>
872
+ <div class="tab" data-url="https://www.youtube.com">
873
+ <i class="fab fa-youtube" style="font-size: 12px; color: red;"></i>
874
+ <div class="tab-title">YouTube</div>
875
+ <div class="tab-close"><i class="fas fa-times"></i></div>
876
+ </div>
877
+ <div class="tab" data-url="https://www.wikipedia.org">
878
+ <i class="fas fa-globe" style="font-size: 12px;"></i>
879
+ <div class="tab-title">Wikipedia</div>
880
+ <div class="tab-close"><i class="fas fa-times"></i></div>
881
+ </div>
882
+ <div class="new-tab-btn">
883
+ <i class="fas fa-plus"></i>
884
+ </div>
885
+ </div>
886
+
887
+ <!-- Navigation Bar -->
888
+ <div class="nav-bar">
889
+ <button class="nav-btn disabled" id="back-btn"><i class="fas fa-arrow-left"></i></button>
890
+ <button class="nav-btn disabled" id="forward-btn"><i class="fas fa-arrow-right"></i></button>
891
+ <button class="nav-btn" id="reload-btn"><i class="fas fa-redo"></i></button>
892
+ <button class="nav-btn" id="home-btn"><i class="fas fa-home"></i></button>
893
+
894
+ <div style="flex: 1; position: relative;">
895
+ <input type="text" class="address-bar" id="address-bar" value="https://www.google.com" autocomplete="off">
896
+ <div class="search-suggestions" id="search-suggestions"></div>
897
+ </div>
898
+
899
+ <div class="extensions-area">
900
+ <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e1/Google_Chrome_icon_%28February_2022%29.svg/512px-Google_Chrome_icon_%28February_2022%29.svg.png" class="extension-icon" title="AdBlocker">
901
+ <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/9e/Google_Translate_logo.svg/800px-Google_Translate_logo.svg.png" class="extension-icon" title="Google Translate">
902
+ <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/45/LastPass_icon.svg/1024px-LastPass_icon.svg.png" class="extension-icon" title="Password Manager" id="extensions-btn">
903
+ </div>
904
+
905
+ <div class="profile-btn" id="profile-btn">Q</div>
906
+ </div>
907
+
908
+ <div class="bookmarks-bar" id="bookmarks-bar">
909
+ <div class="bookmark" data-url="https://www.google.com"><i class="fas fa-search"></i> Google</div>
910
+ <div class="bookmark" data-url="https://www.youtube.com"><i class="fab fa-youtube"></i> YouTube</div>
911
+ <div class="bookmark" data-url="https://www.wikipedia.org"><i class="fas fa-book"></i> Wikipedia</div>
912
+ <div class="bookmark" data-url="https://www.github.com"><i class="fab fa-github"></i> GitHub</div>
913
+ <div class="bookmark" data-url="https://www.twitter.com"><i class="fab fa-twitter"></i> Twitter</div>
914
+ </div>
915
+
916
+ <!-- Content Area -->
917
+ <div class="content-area">
918
+ <!-- Sidebar -->
919
+ <div class="sidebar">
920
+ <div class="sidebar-icon active" title="Home">
921
+ <i class="fas fa-compass"></i>
922
+ </div>
923
+ <div class="sidebar-icon" title="Bookmarks">
924
+ <i class="fas fa-bookmark"></i>
925
+ </div>
926
+ <div class="sidebar-icon" title="History">
927
+ <i class="fas fa-history"></i>
928
+ </div>
929
+ <div class="sidebar-icon" title="Downloads" id="downloads-btn">
930
+ <i class="fas fa-download"></i>
931
+ </div>
932
+ <div class="sidebar-icon" title="Settings">
933
+ <i class="fas fa-cog"></i>
934
+ </div>
935
+ </div>
936
+
937
+ <!-- Main View -->
938
+ <div class="main-view">
939
+ <div class="loading-overlay" id="loading">
940
+ <i class="fas fa-spinner"></i>
941
+ </div>
942
+
943
+ <div class="error-page" id="error-page">
944
+ <i class="fas fa-exclamation-triangle"></i>
945
+ <h2>Page not available</h2>
946
+ <p>The webpage at <span id="error-url">https://example.com</span> could not be loaded.</p>
947
+ <p>Check the internet connection or the website address.</p>
948
+ <button class="error-retry-btn" id="retry-btn">Retry</button>
949
+ </div>
950
+
951
+ <iframe src="https://www.google.com" class="current-page" id="browser-iframe"></iframe>
952
+ </div>
953
+ </div>
954
+
955
+ <!-- Status Bar -->
956
+ <div class="status-bar">
957
+ <span id="status-text">Ready</span>
958
+ <span id="page-url">https://www.google.com</span>
959
+ </div>
960
+
961
+ <!-- Profile Menu -->
962
+ <div class="profile-menu" id="profile-menu">
963
+ <div class="profile-header">
964
+ <div class="profile-header-icon">Q</div>
965
+ <div class="profile-info">
966
+ <h3>Quantumize User</h3>
967
+ <p>[email protected]</p>
968
+ </div>
969
+ </div>
970
+ <div class="menu-items">
971
+ <div class="menu-item">
972
+ <i class="fas fa-user"></i>
973
+ <span>Profile</span>
974
+ </div>
975
+ <div class="menu-item">
976
+ <i class="fas fa-key"></i>
977
+ <span>Manage accounts</span>
978
+ </div>
979
+ <div class="menu-item" id="dark-mode-btn">
980
+ <i class="fas fa-moon"></i>
981
+ <span>Dark mode</span>
982
+ </div>
983
+ <div class="menu-item">
984
+ <i class="fas fa-sign-out-alt"></i>
985
+ <span>Sign out</span>
986
+ </div>
987
+ </div>
988
+ </div>
989
+
990
+ <!-- Extensions Menu -->
991
+ <div class="extensions-menu" id="extensions-menu">
992
+ <div class="extensions-header">
993
+ <h3>Extensions</h3>
994
+ <button class="control-btn"><i class="fas fa-cog"></i></button>
995
+ </div>
996
+ <div class="extension">
997
+ <div class="extension-icon-small">
998
+ <i class="fas fa-shield-alt"></i>
999
+ </div>
1000
+ <div class="extension-info">
1001
+ <h4>AdBlocker</h4>
1002
+ <p>Blocks ads on web pages</p>
1003
+ </div>
1004
+ <div class="extension-toggle active">
1005
+ <div class="toggle-knob"></div>
1006
+ </div>
1007
+ </div>
1008
+ <div class="extension">
1009
+ <div class="extension-icon-small">
1010
+ <i class="fas fa-language"></i>
1011
+ </div>
1012
+ <div class="extension-info">
1013
+ <h4>Google Translate</h4>
1014
+ <p>Translates web pages</p>
1015
+ </div>
1016
+ <div class="extension-toggle active">
1017
+ <div class="toggle-knob"></div>
1018
+ </div>
1019
+ </div>
1020
+ <div class="extension">
1021
+ <div class="extension-icon-small">
1022
+ <i class="fas fa-lock"></i>
1023
+ </div>
1024
+ <div class="extension-info">
1025
+ <h4>Password Manager</h4>
1026
+ <p>Securely stores your passwords</p>
1027
+ </div>
1028
+ <div class="extension-toggle active">
1029
+ <div class="toggle-knob"></div>
1030
+ </div>
1031
+ </div>
1032
+ </div>
1033
+
1034
+ <!-- Download Bar -->
1035
+ <div class="download-bar" id="download-bar">
1036
+ <div class="download-item">
1037
+ <i class="fas fa-file-pdf download-icon"></i>
1038
+ <div class="download-info">
1039
+ <h4>document.pdf</h4>
1040
+ <p>Downloading from example.com</p>
1041
+ </div>
1042
+ <div class="download-progress">
1043
+ <div class="download-progress-bar" id="progress-bar"></div>
1044
+ </div>
1045
+ <div class="download-actions">
1046
+ <i class="fas fa-pause" id="pause-download"></i>
1047
+ <i class="fas fa-times" id="cancel-download"></i>
1048
+ </div>
1049
+ </div>
1050
+ </div>
1051
+
1052
+ <script>
1053
+ // DOM Elements
1054
+ const profileBtn = document.getElementById('profile-btn');
1055
+ const profileMenu = document.getElementById('profile-menu');
1056
+ const extensionsBtn = document.getElementById('extensions-btn');
1057
+ const extensionsMenu = document.getElementById('extensions-menu');
1058
+ const darkModeBtn = document.getElementById('dark-mode-btn');
1059
+ const addressBar = document.getElementById('address-bar');
1060
+ const browserIframe = document.getElementById('browser-iframe');
1061
+ const backBtn = document.getElementById('back-btn');
1062
+ const forwardBtn = document.getElementById('forward-btn');
1063
+ const reloadBtn = document.getElementById('reload-btn');
1064
+ const homeBtn = document.getElementById('home-btn');
1065
+ const tabBar = document.getElementById('tab-bar');
1066
+ const newTabBtn = document.querySelector('.new-tab-btn');
1067
+ const statusText = document.getElementById('status-text');
1068
+ const pageUrl = document.getElementById('page-url');
1069
+ const searchSuggestions = document.getElementById('search-suggestions');
1070
+ const errorPage = document.getElementById('error-page');
1071
+ const errorUrl = document.getElementById('error-url');
1072
+ const retryBtn = document.getElementById('retry-btn');
1073
+ const loadingOverlay = document.getElementById('loading');
1074
+ const bookmarksBar = document.getElementById('bookmarks-bar');
1075
+ const bookmarks = document.querySelectorAll('.bookmark');
1076
+ const downloadBar = document.getElementById('download-bar');
1077
+ const progressBar = document.getElementById('progress-bar');
1078
+ const pauseDownloadBtn = document.getElementById('pause-download');
1079
+ const cancelDownloadBtn = document.getElementById('cancel-download');
1080
+ const downloadsBtn = document.getElementById('downloads-btn');
1081
+ const closeBtn = document.querySelector('.window-btn.close');
1082
+ const minimizeBtn = document.querySelector('.window-btn.minimize');
1083
+ const maximizeBtn = document.querySelector('.window-btn.maximize');
1084
+
1085
+ // Tab management
1086
+ let tabs = Array.from(document.querySelectorAll('.tab'));
1087
+ let activeTab = document.querySelector('.tab.active');
1088
+ let tabHistory = {
1089
+ 'https://www.google.com': ['https://www.google.com'],
1090
+ 'https://www.youtube.com': ['https://www.youtube.com'],
1091
+ 'https://www.wikipedia.org': ['https://www.wikipedia.org']
1092
+ };
1093
+ let historyIndex = {
1094
+ 'https://www.google.com': 0,
1095
+ 'https://www.youtube.com': 0,
1096
+ 'https://www.wikipedia.org': 0
1097
+ };
1098
+
1099
+ // Initialize tabs
1100
+ function initTabs() {
1101
+ tabs.forEach(tab => {
1102
+ const url = tab.getAttribute('data-url');
1103
+ tabHistory[url] = [url];
1104
+ historyIndex[url] = 0;
1105
+ });
1106
+ }
1107
+
1108
+ // Add to tab history
1109
+ function addToHistory(url, currentUrl) {
1110
+ if (!tabHistory[currentUrl]) {
1111
+ tabHistory[currentUrl] = [];
1112
+ historyIndex[currentUrl] = 0;
1113
+ }
1114
+
1115
+ if (tabHistory[currentUrl][historyIndex[currentUrl]] !== url) {
1116
+ // Remove forward history if we're not at the end
1117
+ tabHistory[currentUrl] = tabHistory[currentUrl].slice(0, historyIndex[currentUrl] + 1);
1118
+ tabHistory[currentUrl].push(url);
1119
+ historyIndex[currentUrl]++;
1120
+ }
1121
+
1122
+ updateNavButtons();
1123
+ }
1124
+
1125
+ // Update navigation buttons state
1126
+ function updateNavButtons() {
1127
+ const currentUrl = activeTab.getAttribute('data-url');
1128
+ const history = tabHistory[currentUrl] || [];
1129
+ const index = historyIndex[currentUrl] || 0;
1130
+
1131
+ backBtn.classList.toggle('disabled', index <= 0);
1132
+ forwardBtn.classList.toggle('disabled', index >= history.length - 1);
1133
+ }
1134
+
1135
+ // Switch tab
1136
+ function switchTab(tab) {
1137
+ tabs.forEach(t => t.classList.remove('active'));
1138
+ tab.classList.add('active');
1139
+ activeTab = tab;
1140
+
1141
+ const url = tab.getAttribute('data-url');
1142
+ browserIframe.src = url;
1143
+ addressBar.value = url;
1144
+ pageUrl.textContent = url;
1145
+
1146
+ updateNavButtons();
1147
+
1148
+ // Show loading indicator
1149
+ showLoading();
1150
+
1151
+ // Hide error page if it was shown
1152
+ errorPage.style.display = 'none';
1153
+ browserIframe.style.display = 'block';
1154
+ }
1155
+
1156
+ // Create new tab
1157
+ function createNewTab(url = 'about:blank', title = 'New Tab') {
1158
+ const newTab = document.createElement('div');
1159
+ newTab.className = 'tab';
1160
+ newTab.setAttribute('data-url', url);
1161
+ newTab.innerHTML = `
1162
+ <i class="fas fa-globe" style="font-size: 12px;"></i>
1163
+ <div class="tab-title">${title}</div>
1164
+ <div class="tab-close"><i class="fas fa-times"></i></div>
1165
+ `;
1166
+
1167
+ newTab.addEventListener('click', function() {
1168
+ switchTab(this);
1169
+ });
1170
+
1171
+ const tabClose = newTab.querySelector('.tab-close');
1172
+ tabClose.addEventListener('click', (e) => {
1173
+ e.stopPropagation();
1174
+ closeTab(this);
1175
+ });
1176
+
1177
+ // Add drag and drop support for tabs
1178
+ newTab.draggable = true;
1179
+ newTab.addEventListener('dragstart', handleDragStart);
1180
+ newTab.addEventListener('dragover', handleDragOver);
1181
+ newTab.addEventListener('drop', handleDrop);
1182
+ newTab.addEventListener('dragend', handleDragEnd);
1183
+
1184
+ tabBar.insertBefore(newTab, newTabBtn);
1185
+ tabs = Array.from(document.querySelectorAll('.tab'));
1186
+
1187
+ if (!tabHistory[url]) {
1188
+ tabHistory[url] = [url];
1189
+ historyIndex[url] = 0;
1190
+ }
1191
+
1192
+ return newTab;
1193
+ }
1194
+
1195
+ // Close tab
1196
+ function closeTab(tab) {
1197
+ if (tabs.length <= 1) {
1198
+ // Don't close the last tab
1199
+ return;
1200
+ }
1201
+
1202
+ const tabIndex = tabs.indexOf(tab);
1203
+ tab.remove();
1204
+ tabs = Array.from(document.querySelectorAll('.tab'));
1205
+
1206
+ // If closing the active tab, activate another one
1207
+ if (tab === activeTab) {
1208
+ let newActiveTab = tabIndex > 0 ? tabs[tabIndex - 1] : tabs[0];
1209
+ switchTab(newActiveTab);
1210
+ }
1211
+ }
1212
+
1213
+ // Tab drag and drop handlers
1214
+ function handleDragStart(e) {
1215
+ this.classList.add('dragging');
1216
+ e.dataTransfer.setData('text/plain', this.getAttribute('data-url'));
1217
+ }
1218
+
1219
+ function handleDragOver(e) {
1220
+ e.preventDefault();
1221
+ const dragTab = document.querySelector('.tab.dragging');
1222
+ if (this !== dragTab) {
1223
+ const rect = this.getBoundingClientRect();
1224
+ const midpoint = rect.left + rect.width / 2;
1225
+
1226
+ if (e.clientX < midpoint) {
1227
+ tabBar.insertBefore(dragTab, this);
1228
+ } else {
1229
+ tabBar.insertBefore(dragTab, this.nextSibling);
1230
+ }
1231
+
1232
+ tabs = Array.from(document.querySelectorAll('.tab'));
1233
+ }
1234
+ }
1235
+
1236
+ function handleDrop(e) {
1237
+ e.preventDefault();
1238
+ }
1239
+
1240
+ function handleDragEnd() {
1241
+ this.classList.remove('dragging');
1242
+ }
1243
+
1244
+ // Navigation functions
1245
+ function navigateTo(url) {
1246
+ // Show loading indicator
1247
+ showLoading();
1248
+
1249
+ // Hide error page if it was shown
1250
+ errorPage.style.display = 'none';
1251
+ browserIframe.style.display = 'block';
1252
+
1253
+ // Update iframe and address bar
1254
+ browserIframe.src = url;
1255
+ addressBar.value = url;
1256
+ pageUrl.textContent = url;
1257
+
1258
+ // Update active tab
1259
+ activeTab.setAttribute('data-url', url);
1260
+
1261
+ // Update tab title (we'll update it properly after page loads)
1262
+ activeTab.querySelector('.tab-title').textContent = new URL(url).hostname;
1263
+
1264
+ // Add to history
1265
+ addToHistory(url, url);
1266
+ }
1267
+
1268
+ function goBack() {
1269
+ const currentUrl = activeTab.getAttribute('data-url');
1270
+ if (historyIndex[currentUrl] > 0) {
1271
+ historyIndex[currentUrl]--;
1272
+ const url = tabHistory[currentUrl][historyIndex[currentUrl]];
1273
+ navigateTo(url);
1274
+ }
1275
+ }
1276
+
1277
+ function goForward() {
1278
+ const currentUrl = activeTab.getAttribute('data-url');
1279
+ if (historyIndex[currentUrl] < tabHistory[currentUrl].length - 1) {
1280
+ historyIndex[currentUrl]++;
1281
+ const url = tabHistory[currentUrl][historyIndex[currentUrl]];
1282
+ navigateTo(url);
1283
+ }
1284
+ }
1285
+
1286
+ // Loading and error handling
1287
+ function showLoading() {
1288
+ loadingOverlay.style.display = 'flex';
1289
+ statusText.textContent = 'Loading...';
1290
+ }
1291
+
1292
+ function hideLoading() {
1293
+ loadingOverlay.style.display = 'none';
1294
+ statusText.textContent = 'Done';
1295
+
1296
+ // Update tab title with page title
1297
+ try {
1298
+ const title = browserIframe.contentDocument.title || new URL(browserIframe.src).hostname;
1299
+ activeTab.querySelector('.tab-title').textContent = title;
1300
+
1301
+ // Update window title
1302
+ document.querySelector('.window-title').textContent = `${title} - Quantumize Browser`;
1303
+
1304
+ // Update security indicator
1305
+ const securityIcon = activeTab.querySelector('.security-indicator');
1306
+ if (browserIframe.src.startsWith('https://')) {
1307
+ securityIcon.className = 'fas fa-lock security-indicator secure';
1308
+ securityIcon.title = 'Secure connection';
1309
+ } else {
1310
+ securityIcon.className = 'fas fa-unlock security-indicator insecure';
1311
+ securityIcon.title = 'Not secure';
1312
+ }
1313
+ } catch (e) {
1314
+ console.log('Could not access iframe content:', e);
1315
+ }
1316
+ }
1317
+
1318
+ function showError() {
1319
+ loadingOverlay.style.display = 'none';
1320
+ browserIframe.style.display = 'none';
1321
+ errorPage.style.display = 'flex';
1322
+ errorUrl.textContent = browserIframe.src;
1323
+ statusText.textContent = 'Failed to load page';
1324
+ }
1325
+
1326
+ // Search suggestions
1327
+ function showSuggestions() {
1328
+ const query = addressBar.value.toLowerCase();
1329
+ const popularSites = [
1330
+ { name: 'Google', url: 'https://www.google.com', icon: 'fa-search' },
1331
+ { name: 'YouTube', url: 'https://www.youtube.com', icon: 'fa-youtube' },
1332
+ { name: 'Wikipedia', url: 'https://www.wikipedia.org', icon: 'fa-wikipedia-w' },
1333
+ { name: 'GitHub', url: 'https://www.github.com', icon: 'fa-github' },
1334
+ { name: 'Twitter', url: 'https://www.twitter.com', icon: 'fa-twitter' }
1335
+ ];
1336
+
1337
+ if (query.length === 0) {
1338
+ searchSuggestions.style.display = 'none';
1339
+ return;
1340
+ }
1341
+
1342
+ const filtered = popularSites.filter(site =>
1343
+ site.name.toLowerCase().includes(query) ||
1344
+ site.url.toLowerCase().includes(query)
1345
+ );
1346
+
1347
+ if (filtered.length > 0) {
1348
+ searchSuggestions.innerHTML = filtered.map(site => `
1349
+ <div class="suggestion-item" data-url="${site.url}">
1350
+ <i class="fab ${site.icon}"></i>
1351
+ <span>${site.name} - ${site.url}</span>
1352
+ </div>
1353
+ `).join('');
1354
+
1355
+ // Add click handlers to suggestions
1356
+ document.querySelectorAll('.suggestion-item').forEach(item => {
1357
+ item.addEventListener('click', () => {
1358
+ navigateTo(item.getAttribute('data-url'));
1359
+ searchSuggestions.style.display = 'none';
1360
+ });
1361
+ });
1362
+
1363
+ searchSuggestions.style.display = 'block';
1364
+ } else {
1365
+ searchSuggestions.style.display = 'none';
1366
+ }
1367
+ }
1368
+
1369
+ // Downloads
1370
+ function simulateDownload() {
1371
+ downloadBar.classList.add('active');
1372
+ let progress = 0;
1373
+ const interval = setInterval(() => {
1374
+ progress += 1;
1375
+ progressBar.style.width = `${progress}%`;
1376
+
1377
+ if (progress >= 100) {
1378
+ clearInterval(interval);
1379
+ setTimeout(() => {
1380
+ downloadBar.classList.remove('active');
1381
+ }, 2000);
1382
+ }
1383
+ }, 30);
1384
+
1385
+ // Add to downloads list in sidebar
1386
+ const downloadsIcon = document.querySelector('.sidebar-icon:nth-child(4)');
1387
+ downloadsIcon.innerHTML = '<i class="fas fa-download"></i><span class="badge">1</span>';
1388
+ }
1389
+
1390
+ // Event listeners
1391
+ profileBtn.addEventListener('click', (e) => {
1392
+ profileMenu.classList.toggle('active');
1393
+ extensionsMenu.classList.remove('active');
1394
+ e.stopPropagation();
1395
+ });
1396
+
1397
+ extensionsBtn.addEventListener('click', (e) => {
1398
+ extensionsMenu.classList.toggle('active');
1399
+ profileMenu.classList.remove('active');
1400
+ e.stopPropagation();
1401
+ });
1402
+
1403
+ document.addEventListener('click', () => {
1404
+ profileMenu.classList.remove('active');
1405
+ extensionsMenu.classList.remove('active');
1406
+ searchSuggestions.style.display = 'none';
1407
+ });
1408
+
1409
+ darkModeBtn.addEventListener('click', () => {
1410
+ document.body.classList.toggle('theme-dark');
1411
+ });
1412
+
1413
+ addressBar.addEventListener('keypress', (e) => {
1414
+ if (e.key === 'Enter') {
1415
+ let url = addressBar.value.trim();
1416
+ if (!url.startsWith('http://') && !url.startsWith('https://') && !url.startsWith('about:')) {
1417
+ if (url.includes(' ') || url.includes('.')) {
1418
+ // Search with Google if there are spaces or dots
1419
+ url = `https://www.google.com/search?q=${encodeURIComponent(url)}`;
1420
+ } else {
1421
+ // Try adding https:// for simple domain names
1422
+ url = 'https://' + url;
1423
+ }
1424
+ }
1425
+
1426
+ navigateTo(url);
1427
+ }
1428
+ });
1429
+
1430
+ addressBar.addEventListener('input', showSuggestions);
1431
+ addressBar.addEventListener('focus', showSuggestions);
1432
+
1433
+ backBtn.addEventListener('click', goBack);
1434
+ forwardBtn.addEventListener('click', goForward);
1435
+ reloadBtn.addEventListener('click', () => {
1436
+ browserIframe.src = browserIframe.src;
1437
+ showLoading();
1438
+ });
1439
+
1440
+ homeBtn.addEventListener('click', () => navigateTo('https://www.google.com'));
1441
+
1442
+ // Setup tab events
1443
+ tabs.forEach(tab => {
1444
+ tab.addEventListener('click', function() {
1445
+ switchTab(this);
1446
+ });
1447
+
1448
+ const tabClose = tab.querySelector('.tab-close');
1449
+ tabClose.addEventListener('click', (e) => {
1450
+ e.stopPropagation();
1451
+ closeTab(tab);
1452
+ });
1453
+
1454
+ // Add drag and drop support for tabs
1455
+ tab.draggable = true;
1456
+ tab.addEventListener('dragstart', handleDragStart);
1457
+ tab.addEventListener('dragover', handleDragOver);
1458
+ tab.addEventListener('drop', handleDrop);
1459
+ tab.addEventListener('dragend', handleDragEnd);
1460
+ });
1461
+
1462
+ newTabBtn.addEventListener('click', () => {
1463
+ const newTab = createNewTab();
1464
+ switchTab(newTab);
1465
+ });
1466
+
1467
+ // Bookmarks
1468
+ bookmarks.forEach(bookmark => {
1469
+ bookmark.addEventListener('click', () => {
1470
+ navigateTo(bookmark.getAttribute('data-url'));
1471
+ });
1472
+ });
1473
+
1474
+ // Error retry
1475
+ retryBtn.addEventListener('click', () => {
1476
+ navigateTo(browserIframe.src);
1477
+ });
1478
+
1479
+ // Iframe load/error events
1480
+ browserIframe.addEventListener('load', hideLoading);
1481
+ browserIframe.addEventListener('error', showError);
1482
+
1483
+ // Download events
1484
+ document.querySelector('.control-btn:nth-child(2)').addEventListener('click', simulateDownload);
1485
+ pauseDownloadBtn.addEventListener('click', () => {
1486
+ alert('Download paused');
1487
+ });
1488
+
1489
+ cancelDownloadBtn.addEventListener('click', () => {
1490
+ downloadBar.classList.remove('active');
1491
+ });
1492
+
1493
+ downloadsBtn.addEventListener('click', () => {
1494
+ alert('Downloads page will open here');
1495
+ });
1496
+
1497
+ // Window controls
1498
+ closeBtn.addEventListener('click', () => {
1499
+ alert('Closing window (in a real app, this would close the window)');
1500
+ });
1501
+
1502
+ minimizeBtn.addEventListener('click', () => {
1503
+ alert('Minimizing window (in a real app, this would minimize the window)');
1504
+ });
1505
+
1506
+ maximizeBtn.addEventListener('click', () => {
1507
+ alert('Maximizing window (in a real app, this would maximize the window)');
1508
+ });
1509
+
1510
+ // Initialize
1511
+ initTabs();
1512
+ switchTab(tabs[0]);
1513
+ </script>
1514
+ </body>
1515
+ </html>