Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Quantumize Browser</title> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| .error-actions { | |
| display: flex; | |
| gap: 10px; | |
| margin-top: 20px; | |
| } | |
| .error-action-btn { | |
| padding: 10px 20px; | |
| border: none; | |
| border-radius: 5px; | |
| background: var(--primary-color); | |
| color: white; | |
| cursor: pointer; | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| } | |
| .error-action-btn:hover { | |
| background: #306cce; | |
| } | |
| .browser-iframe { | |
| width: 100%; | |
| height: 100%; | |
| border: none; | |
| background: white; | |
| } | |
| .security-indicator { | |
| margin-right: 8px; | |
| font-size: 14px; | |
| } | |
| .secure { color: #0b8043; } | |
| .insecure { color: #d50000; } | |
| :root { | |
| --primary-color: #4285f4; | |
| --secondary-color: #f1f3f4; | |
| --dark-color: #202124; | |
| --light-color: #ffffff; | |
| --border-color: #dadce0; | |
| --highlight-color: #e8f0fe; | |
| } | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| font-family: 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; | |
| } | |
| body { | |
| background-color: #f8f9fa; | |
| height: 100vh; | |
| display: flex; | |
| flex-direction: column; | |
| overflow: hidden; | |
| } | |
| /* Header Styles */ | |
| .browser-header { | |
| background-color: var(--dark-color); | |
| color: var(--light-color); | |
| padding: 8px 16px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| height: 48px; | |
| -webkit-app-region: drag; | |
| } | |
| .browser-controls { | |
| display: flex; | |
| align-items: center; | |
| gap: 16px; | |
| -webkit-app-region: no-drag; | |
| } | |
| .control-btn { | |
| background: none; | |
| border: none; | |
| color: var(--light-color); | |
| font-size: 16px; | |
| cursor: pointer; | |
| padding: 4px; | |
| border-radius: 4px; | |
| transition: background-color 0.2s; | |
| } | |
| .control-btn:hover { | |
| background-color: rgba(255, 255, 255, 0.1); | |
| } | |
| .window-title { | |
| font-size: 14px; | |
| opacity: 0.8; | |
| flex: 1; | |
| text-align: center; | |
| padding: 0 20px; | |
| -webkit-app-region: drag; | |
| } | |
| /* Tab Bar */ | |
| .tab-bar { | |
| background-color: #fff; | |
| display: flex; | |
| height: 48px; | |
| padding: 0 16px; | |
| border-bottom: 1px solid rgba(0, 0, 0, 0.1); | |
| overflow-x: auto; | |
| overflow-y: hidden; | |
| scrollbar-width: none; | |
| } | |
| .tab-bar::-webkit-scrollbar { | |
| display: none; | |
| } | |
| .tab { | |
| background-color: rgba(0, 0, 0, 0.05); | |
| color: var(--dark-color); | |
| padding: 12px 20px; | |
| margin-right: 4px; | |
| border-radius: 8px 8px 0 0; | |
| font-size: 14px; | |
| display: flex; | |
| align-items: center; | |
| max-width: 220px; | |
| min-width: 120px; | |
| position: relative; | |
| cursor: pointer; | |
| transition: all 0.2s; | |
| border: 1px solid rgba(0, 0, 0, 0.1); | |
| border-bottom: none; | |
| } | |
| .tab.active { | |
| background-color: #fff; | |
| color: var(--dark-color); | |
| border-color: rgba(0, 0, 0, 0.1); | |
| } | |
| .tab:hover { | |
| background-color: rgba(0, 0, 0, 0.08); | |
| } | |
| .tab.active:hover { | |
| background-color: #fff; | |
| } | |
| .tab-title { | |
| white-space: nowrap; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| flex: 1; | |
| margin: 0 8px; | |
| } | |
| .tab-close { | |
| width: 18px; | |
| height: 18px; | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| transition: background-color 0.2s; | |
| color: #5f6368; | |
| } | |
| .tab:hover .tab-close { | |
| background-color: rgba(0, 0, 0, 0.1); | |
| } | |
| .new-tab-btn { | |
| color: #5f6368; | |
| font-size: 20px; | |
| margin-left: 8px; | |
| padding: 0 12px; | |
| display: flex; | |
| align-items: center; | |
| cursor: pointer; | |
| border-radius: 4px; | |
| transition: background-color 0.2s; | |
| min-width: 40px; | |
| flex-shrink: 0; | |
| } | |
| .new-tab-btn:hover { | |
| background-color: rgba(0, 0, 0, 0.1); | |
| } | |
| /* Navigation Bar */ | |
| .nav-bar { | |
| display: flex; | |
| padding: 8px; | |
| background-color: var(--light-color); | |
| border-bottom: 1px solid var(--border-color); | |
| align-items: center; | |
| } | |
| .nav-btn { | |
| background: none; | |
| border: none; | |
| font-size: 20px; | |
| width: 40px; | |
| height: 40px; | |
| border-radius: 50%; | |
| cursor: pointer; | |
| color: #5f6368; | |
| transition: background-color 0.2s; | |
| } | |
| .nav-btn:hover { | |
| background-color: var(--secondary-color); | |
| } | |
| .nav-btn.disabled { | |
| color: #dadce0; | |
| cursor: default; | |
| } | |
| .nav-btn.disabled:hover { | |
| background: none; | |
| } | |
| .address-bar { | |
| flex: 1; | |
| margin: 0 8px; | |
| height: 40px; | |
| border-radius: 20px; | |
| border: 1px solid var(--border-color); | |
| padding: 0 16px; | |
| font-size: 15px; | |
| outline: none; | |
| transition: box-shadow 0.2s; | |
| background-color: var(--secondary-color); | |
| } | |
| .address-bar:focus { | |
| background-color: #fff; | |
| border-color: var(--primary-color); | |
| box-shadow: 0 1px 6px rgba(32, 33, 36, 0.28); | |
| } | |
| .extensions-area { | |
| display: flex; | |
| margin-left: 8px; | |
| } | |
| .extension-icon { | |
| width: 24px; | |
| height: 24px; | |
| margin: 0 4px; | |
| cursor: pointer; | |
| border-radius: 4px; | |
| transition: transform 0.2s; | |
| } | |
| .extension-icon:hover { | |
| transform: scale(1.1); | |
| } | |
| .profile-btn { | |
| width: 32px; | |
| height: 32px; | |
| border-radius: 50%; | |
| background-color: var(--primary-color); | |
| color: white; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-weight: bold; | |
| margin-left: 8px; | |
| cursor: pointer; | |
| transition: transform 0.2s; | |
| } | |
| .profile-btn:hover { | |
| transform: scale(1.05); | |
| } | |
| /* Content Area */ | |
| .content-area { | |
| flex: 1; | |
| display: flex; | |
| background-color: var(--light-color); | |
| overflow: hidden; | |
| } | |
| /* Sidebar */ | |
| .sidebar { | |
| width: 72px; | |
| background-color: #f6f8fc; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| padding: 16px 0; | |
| border-right: 1px solid var(--border-color); | |
| } | |
| .sidebar-icon { | |
| width: 40px; | |
| height: 40px; | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| color: #5f6368; | |
| margin-bottom: 16px; | |
| cursor: pointer; | |
| transition: all 0.2s; | |
| } | |
| .sidebar-icon:hover { | |
| background-color: rgba(0, 0, 0, 0.08); | |
| } | |
| .sidebar-icon.active { | |
| background-color: var(--highlight-color); | |
| color: var(--primary-color); | |
| } | |
| /* Main View */ | |
| .main-view { | |
| flex: 1; | |
| display: flex; | |
| flex-direction: column; | |
| overflow: hidden; | |
| position: relative; | |
| } | |
| /* Current Page */ | |
| .current-page { | |
| flex: 1; | |
| border: none; | |
| background-color: var(--light-color); | |
| width: 100%; | |
| height: 100%; | |
| } | |
| /* Status Bar */ | |
| .status-bar { | |
| height: 24px; | |
| background-color: var(--light-color); | |
| border-top: 1px solid var(--border-color); | |
| display: flex; | |
| align-items: center; | |
| padding: 0 16px; | |
| font-size: 12px; | |
| color: #5f6368; | |
| justify-content: space-between; | |
| } | |
| /* Profile Menu */ | |
| .profile-menu { | |
| position: absolute; | |
| top: 80px; | |
| right: 16px; | |
| background-color: var(--light-color); | |
| width: 300px; | |
| border-radius: 8px; | |
| box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 4px 12px rgba(0, 0, 0, 0.2); | |
| z-index: 100; | |
| display: none; | |
| padding: 16px; | |
| border: 1px solid var(--border-color); | |
| } | |
| .profile-menu.active { | |
| display: block; | |
| } | |
| .profile-header { | |
| display: flex; | |
| align-items: center; | |
| padding-bottom: 16px; | |
| border-bottom: 1px solid var(--border-color); | |
| margin-bottom: 8px; | |
| } | |
| .profile-header-icon { | |
| width: 40px; | |
| height: 40px; | |
| border-radius: 50%; | |
| background-color: var(--primary-color); | |
| color: white; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-weight: bold; | |
| margin-right: 16px; | |
| } | |
| .profile-info h3 { | |
| font-size: 16px; | |
| margin-bottom: 4px; | |
| } | |
| .profile-info p { | |
| font-size: 14px; | |
| color: #5f6368; | |
| } | |
| .menu-items { | |
| padding: 8px 0; | |
| } | |
| .menu-item { | |
| padding: 12px 8px; | |
| display: flex; | |
| align-items: center; | |
| border-radius: 4px; | |
| cursor: pointer; | |
| } | |
| .menu-item:hover { | |
| background-color: var(--secondary-color); | |
| } | |
| .menu-item i { | |
| margin-right: 16px; | |
| color: #5f6368; | |
| width: 20px; | |
| text-align: center; | |
| } | |
| /* Extensions Menu */ | |
| .extensions-menu { | |
| position: absolute; | |
| top: 80px; | |
| right: 100px; | |
| background-color: var(--light-color); | |
| width: 300px; | |
| border-radius: 8px; | |
| box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 4px 12px rgba(0, 0, 0, 0.2); | |
| z-index: 100; | |
| display: none; | |
| padding: 16px; | |
| border: 1px solid var(--border-color); | |
| } | |
| .extensions-menu.active { | |
| display: block; | |
| } | |
| .extensions-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding-bottom: 16px; | |
| border-bottom: 1px solid var(--border-color); | |
| margin-bottom: 8px; | |
| } | |
| .extension { | |
| display: flex; | |
| align-items: center; | |
| padding: 8px; | |
| border-radius: 4px; | |
| margin-bottom: 8px; | |
| cursor: pointer; | |
| } | |
| .extension:hover { | |
| background-color: var(--secondary-color); | |
| } | |
| .extension-icon-small { | |
| width: 32px; | |
| height: 32px; | |
| background-color: #f1f3f4; | |
| border-radius: 4px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| margin-right: 12px; | |
| color: var(--primary-color); | |
| } | |
| .extension-info { | |
| flex: 1; | |
| } | |
| .extension-info h4 { | |
| font-size: 14px; | |
| margin-bottom: 2px; | |
| } | |
| .extension-info p { | |
| font-size: 12px; | |
| color: #5f6368; | |
| } | |
| .extension-toggle { | |
| width: 36px; | |
| height: 20px; | |
| background-color: #ccc; | |
| border-radius: 10px; | |
| position: relative; | |
| cursor: pointer; | |
| } | |
| .extension-toggle.active { | |
| background-color: var(--primary-color); | |
| } | |
| .toggle-knob { | |
| width: 16px; | |
| height: 16px; | |
| background-color: white; | |
| border-radius: 50%; | |
| position: absolute; | |
| top: 2px; | |
| left: 2px; | |
| transition: transform 0.2s; | |
| } | |
| .extension-toggle.active .toggle-knob { | |
| transform: translateX(16px); | |
| } | |
| /* Download Bar */ | |
| .download-bar { | |
| position: absolute; | |
| bottom: 0; | |
| left: 0; | |
| width: 100%; | |
| background-color: var(--light-color); | |
| border-top: 1px solid var(--border-color); | |
| padding: 8px 16px; | |
| display: none; | |
| z-index: 10; | |
| box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1); | |
| } | |
| .download-bar.active { | |
| display: block; | |
| animation: slideUp 0.3s ease-out; | |
| } | |
| @keyframes slideUp { | |
| from { transform: translateY(100%); } | |
| to { transform: translateY(0); } | |
| } | |
| .download-item { | |
| display: flex; | |
| align-items: center; | |
| padding: 8px; | |
| border-radius: 4px; | |
| } | |
| .download-item:hover { | |
| background-color: var(--secondary-color); | |
| } | |
| .download-icon { | |
| width: 24px; | |
| height: 24px; | |
| margin-right: 12px; | |
| color: var(--primary-color); | |
| } | |
| .download-info { | |
| flex: 1; | |
| } | |
| .download-info h4 { | |
| font-size: 14px; | |
| margin-bottom: 2px; | |
| white-space: nowrap; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| } | |
| .download-info p { | |
| font-size: 12px; | |
| color: #5f6368; | |
| } | |
| .download-progress { | |
| width: 120px; | |
| height: 4px; | |
| background-color: var(--secondary-color); | |
| border-radius: 2px; | |
| overflow: hidden; | |
| margin: 0 12px; | |
| } | |
| .download-progress-bar { | |
| height: 100%; | |
| background-color: var(--primary-color); | |
| width: 30%; | |
| transition: width 0.3s; | |
| } | |
| .download-actions i { | |
| margin-left: 12px; | |
| cursor: pointer; | |
| color: #5f6368; | |
| } | |
| /* Theme */ | |
| .theme-dark { | |
| --dark-color: #202124; | |
| --light-color: #35363a; | |
| --border-color: #5f6368; | |
| --secondary-color: #292a2d; | |
| --highlight-color: #414243; | |
| color: #e8eaed; | |
| } | |
| .theme-dark .address-bar { | |
| background-color: var(--dark-color); | |
| color: white; | |
| } | |
| .theme-dark .sidebar { | |
| background-color: #25272a; | |
| border-right-color: var(--border-color); | |
| } | |
| .theme-dark .content-area { | |
| background-color: var(--dark-color); | |
| } | |
| .theme-dark .current-page { | |
| background-color: var(--dark-color); | |
| } | |
| .theme-dark .nav-btn { | |
| color: #e8eaed; | |
| } | |
| .theme-dark .status-bar { | |
| background-color: var(--dark-color); | |
| color: #9aa0a6; | |
| border-top: 1px solid var(--border-color); | |
| } | |
| .theme-dark .sidebar-icon { | |
| color: #e8eaed; | |
| } | |
| .theme-dark .sidebar-icon:hover { | |
| background-color: rgba(255, 255, 255, 0.08); | |
| } | |
| .theme-dark .sidebar-icon.active { | |
| background-color: var(--highlight-color); | |
| color: var(--primary-color); | |
| } | |
| /* Tab dragging */ | |
| .tab.dragging { | |
| opacity: 0.8; | |
| transform: scale(0.98); | |
| box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); | |
| } | |
| /* Bookmarks bar */ | |
| .bookmarks-bar { | |
| display: flex; | |
| padding: 8px 16px; | |
| background-color: var(--secondary-color); | |
| border-bottom: 1px solid var(--border-color); | |
| gap: 12px; | |
| overflow-x: auto; | |
| } | |
| .bookmark { | |
| padding: 4px 12px; | |
| background-color: rgba(0, 0, 0, 0.05); | |
| border-radius: 4px; | |
| cursor: pointer; | |
| display: flex; | |
| align-items: center; | |
| gap: 6px; | |
| white-space: nowrap; | |
| font-size: 13px; | |
| transition: background-color 0.2s; | |
| } | |
| .bookmark:hover { | |
| background-color: rgba(0, 0, 0, 0.1); | |
| } | |
| .bookmark i { | |
| font-size: 12px; | |
| color: #5f6368; | |
| } | |
| /* Error page */ | |
| .error-page { | |
| padding: 20px; | |
| text-align: center; | |
| color: #ff4444; | |
| display: none; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| height: 100%; | |
| } | |
| .error-page i { | |
| font-size: 48px; | |
| margin-bottom: 16px; | |
| } | |
| .error-page h2 { | |
| margin-bottom: 8px; | |
| } | |
| .error-page p { | |
| margin-bottom: 16px; | |
| color: #5f6368; | |
| max-width: 400px; | |
| } | |
| .error-retry-btn { | |
| background-color: var(--primary-color); | |
| color: white; | |
| border: none; | |
| padding: 8px 16px; | |
| border-radius: 4px; | |
| cursor: pointer; | |
| transition: background-color 0.2s; | |
| } | |
| .error-retry-btn:hover { | |
| background-color: #3367d6; | |
| } | |
| /* Loading overlay */ | |
| .loading-overlay { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: rgba(255, 255, 255, 0.8); | |
| display: none; | |
| justify-content: center; | |
| align-items: center; | |
| z-index: 10; | |
| } | |
| .loading-overlay i { | |
| font-size: 32px; | |
| color: var(--primary-color); | |
| animation: spin 1s linear infinite; | |
| } | |
| @keyframes spin { | |
| from { transform: rotate(0deg); } | |
| to { transform: rotate(360deg); } | |
| } | |
| /* Search suggestions */ | |
| .search-suggestions { | |
| position: absolute; | |
| width: calc(100% - 32px); | |
| background: var(--light-color); | |
| border: 1px solid var(--border-color); | |
| border-radius: 0 0 8px 8px; | |
| margin-top: -4px; | |
| display: none; | |
| z-index: 1000; | |
| max-height: 300px; | |
| overflow-y: auto; | |
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); | |
| } | |
| .suggestion-item { | |
| padding: 8px 16px; | |
| cursor: pointer; | |
| display: flex; | |
| align-items: center; | |
| } | |
| .suggestion-item:hover { | |
| background-color: var(--secondary-color); | |
| } | |
| .suggestion-item i { | |
| margin-right: 10px; | |
| color: #5f6368; | |
| font-size: 14px; | |
| } | |
| /* Privacy and security indicators */ | |
| .security-indicator { | |
| margin-right: 8px; | |
| font-size: 14px; | |
| } | |
| .secure { | |
| color: #0b8043; | |
| } | |
| .insecure { | |
| color: #d50000; | |
| } | |
| /* Window controls */ | |
| .window-controls { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| } | |
| .window-btn { | |
| width: 16px; | |
| height: 16px; | |
| border-radius: 50%; | |
| border: none; | |
| cursor: pointer; | |
| transition: transform 0.2s; | |
| } | |
| .window-btn:hover { | |
| transform: scale(1.1); | |
| } | |
| .window-btn.close { | |
| background-color: #ff5f56; | |
| } | |
| .window-btn.minimize { | |
| background-color: #ffbd2e; | |
| } | |
| .window-btn.maximize { | |
| background-color: #27c93f; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="browser-header"> | |
| <div class="browser-controls"> | |
| <button class="control-btn"><i class="fas fa-bars"></i></button> | |
| <button class="control-btn"><i class="fas fa-download"></i></button> | |
| <button class="control-btn"><i class="fas fa-print"></i></button> | |
| </div> | |
| <div class="window-title">Quantumize Browser</div> | |
| <div class="window-controls"> | |
| <button class="window-btn minimize"></button> | |
| <button class="window-btn maximize"></button> | |
| <button class="window-btn close"></button> | |
| </div> | |
| </div> | |
| <!-- Tab Bar --> | |
| <div class="tab-bar" id="tab-bar"> | |
| <div class="tab active" data-url="https://www.google.com"> | |
| <i class="fas fa-lock security-indicator secure"></i> | |
| <div class="tab-title">Google</div> | |
| <div class="tab-close"><i class="fas fa-times"></i></div> | |
| </div> | |
| <div class="tab" data-url="https://www.youtube.com"> | |
| <i class="fab fa-youtube" style="font-size: 12px; color: red;"></i> | |
| <div class="tab-title">YouTube</div> | |
| <div class="tab-close"><i class="fas fa-times"></i></div> | |
| </div> | |
| <div class="tab" data-url="https://www.wikipedia.org"> | |
| <i class="fas fa-globe" style="font-size: 12px;"></i> | |
| <div class="tab-title">Wikipedia</div> | |
| <div class="tab-close"><i class="fas fa-times"></i></div> | |
| </div> | |
| <div class="new-tab-btn"> | |
| <i class="fas fa-plus"></i> | |
| </div> | |
| </div> | |
| <!-- Navigation Bar --> | |
| <div class="nav-bar"> | |
| <button class="nav-btn disabled" id="back-btn"><i class="fas fa-arrow-left"></i></button> | |
| <button class="nav-btn disabled" id="forward-btn"><i class="fas fa-arrow-right"></i></button> | |
| <button class="nav-btn" id="reload-btn"><i class="fas fa-redo"></i></button> | |
| <button class="nav-btn" id="home-btn"><i class="fas fa-home"></i></button> | |
| <div style="flex: 1; position: relative;"> | |
| <input type="text" class="address-bar" id="address-bar" value="https://www.google.com" autocomplete="off"> | |
| <div class="search-suggestions" id="search-suggestions"></div> | |
| </div> | |
| <div class="extensions-area"> | |
| <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"> | |
| <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"> | |
| <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"> | |
| </div> | |
| <div class="profile-btn" id="profile-btn">Q</div> | |
| </div> | |
| <div class="bookmarks-bar" id="bookmarks-bar"> | |
| <div class="bookmark" data-url="https://www.google.com"><i class="fas fa-search"></i> Google</div> | |
| <div class="bookmark" data-url="https://www.youtube.com"><i class="fab fa-youtube"></i> YouTube</div> | |
| <div class="bookmark" data-url="https://www.wikipedia.org"><i class="fas fa-book"></i> Wikipedia</div> | |
| <div class="bookmark" data-url="https://www.github.com"><i class="fab fa-github"></i> GitHub</div> | |
| <div class="bookmark" data-url="https://www.twitter.com"><i class="fab fa-twitter"></i> Twitter</div> | |
| </div> | |
| <!-- Content Area --> | |
| <div class="content-area"> | |
| <!-- Sidebar --> | |
| <div class="sidebar"> | |
| <div class="sidebar-icon active" title="Home"> | |
| <i class="fas fa-compass"></i> | |
| </div> | |
| <div class="sidebar-icon" title="Bookmarks"> | |
| <i class="fas fa-bookmark"></i> | |
| </div> | |
| <div class="sidebar-icon" title="History"> | |
| <i class="fas fa-history"></i> | |
| </div> | |
| <div class="sidebar-icon" title="Downloads" id="downloads-btn"> | |
| <i class="fas fa-download"></i> | |
| </div> | |
| <div class="sidebar-icon" title="Settings"> | |
| <i class="fas fa-cog"></i> | |
| </div> | |
| </div> | |
| <!-- Main View --> | |
| <div class="main-view"> | |
| <div class="loading-overlay" id="loading"> | |
| <i class="fas fa-spinner"></i> | |
| </div> | |
| <div class="error-page" id="error-page"> | |
| <i class="fas fa-exclamation-triangle"></i> | |
| <h2>Page not available</h2> | |
| <p>The webpage at <span id="error-url">https://example.com</span> could not be loaded.</p> | |
| <p>Check the internet connection or the website address.</p> | |
| <button class="error-retry-btn" id="retry-btn">Retry</button> | |
| </div> | |
| <iframe src="https://www.google.com" class="current-page" id="browser-iframe"></iframe> | |
| </div> | |
| </div> | |
| <!-- Status Bar --> | |
| <div class="status-bar"> | |
| <span id="status-text">Ready</span> | |
| <span id="page-url">https://www.google.com</span> | |
| </div> | |
| <!-- Profile Menu --> | |
| <div class="profile-menu" id="profile-menu"> | |
| <div class="profile-header"> | |
| <div class="profile-header-icon">Q</div> | |
| <div class="profile-info"> | |
| <h3>Quantumize User</h3> | |
| <p>[email protected]</p> | |
| </div> | |
| </div> | |
| <div class="menu-items"> | |
| <div class="menu-item"> | |
| <i class="fas fa-user"></i> | |
| <span>Profile</span> | |
| </div> | |
| <div class="menu-item"> | |
| <i class="fas fa-key"></i> | |
| <span>Manage accounts</span> | |
| </div> | |
| <div class="menu-item" id="dark-mode-btn"> | |
| <i class="fas fa-moon"></i> | |
| <span>Dark mode</span> | |
| </div> | |
| <div class="menu-item"> | |
| <i class="fas fa-sign-out-alt"></i> | |
| <span>Sign out</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Extensions Menu --> | |
| <div class="extensions-menu" id="extensions-menu"> | |
| <div class="extensions-header"> | |
| <h3>Extensions</h3> | |
| <button class="control-btn"><i class="fas fa-cog"></i></button> | |
| </div> | |
| <div class="extension"> | |
| <div class="extension-icon-small"> | |
| <i class="fas fa-shield-alt"></i> | |
| </div> | |
| <div class="extension-info"> | |
| <h4>AdBlocker</h4> | |
| <p>Blocks ads on web pages</p> | |
| </div> | |
| <div class="extension-toggle active"> | |
| <div class="toggle-knob"></div> | |
| </div> | |
| </div> | |
| <div class="extension"> | |
| <div class="extension-icon-small"> | |
| <i class="fas fa-language"></i> | |
| </div> | |
| <div class="extension-info"> | |
| <h4>Google Translate</h4> | |
| <p>Translates web pages</p> | |
| </div> | |
| <div class="extension-toggle active"> | |
| <div class="toggle-knob"></div> | |
| </div> | |
| </div> | |
| <div class="extension"> | |
| <div class="extension-icon-small"> | |
| <i class="fas fa-lock"></i> | |
| </div> | |
| <div class="extension-info"> | |
| <h4>Password Manager</h4> | |
| <p>Securely stores your passwords</p> | |
| </div> | |
| <div class="extension-toggle active"> | |
| <div class="toggle-knob"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Download Bar --> | |
| <div class="download-bar" id="download-bar"> | |
| <div class="download-item"> | |
| <i class="fas fa-file-pdf download-icon"></i> | |
| <div class="download-info"> | |
| <h4>document.pdf</h4> | |
| <p>Downloading from example.com</p> | |
| </div> | |
| <div class="download-progress"> | |
| <div class="download-progress-bar" id="progress-bar"></div> | |
| </div> | |
| <div class="download-actions"> | |
| <i class="fas fa-pause" id="pause-download"></i> | |
| <i class="fas fa-times" id="cancel-download"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // DOM Elements | |
| const profileBtn = document.getElementById('profile-btn'); | |
| const profileMenu = document.getElementById('profile-menu'); | |
| const extensionsBtn = document.getElementById('extensions-btn'); | |
| const extensionsMenu = document.getElementById('extensions-menu'); | |
| const darkModeBtn = document.getElementById('dark-mode-btn'); | |
| const addressBar = document.getElementById('address-bar'); | |
| const browserIframe = document.getElementById('browser-iframe'); | |
| const backBtn = document.getElementById('back-btn'); | |
| const forwardBtn = document.getElementById('forward-btn'); | |
| const reloadBtn = document.getElementById('reload-btn'); | |
| const homeBtn = document.getElementById('home-btn'); | |
| const tabBar = document.getElementById('tab-bar'); | |
| const newTabBtn = document.querySelector('.new-tab-btn'); | |
| const statusText = document.getElementById('status-text'); | |
| const pageUrl = document.getElementById('page-url'); | |
| const searchSuggestions = document.getElementById('search-suggestions'); | |
| const errorPage = document.getElementById('error-page'); | |
| const errorUrl = document.getElementById('error-url'); | |
| const retryBtn = document.getElementById('retry-btn'); | |
| const loadingOverlay = document.getElementById('loading'); | |
| const bookmarksBar = document.getElementById('bookmarks-bar'); | |
| const bookmarks = document.querySelectorAll('.bookmark'); | |
| const downloadBar = document.getElementById('download-bar'); | |
| const progressBar = document.getElementById('progress-bar'); | |
| const pauseDownloadBtn = document.getElementById('pause-download'); | |
| const cancelDownloadBtn = document.getElementById('cancel-download'); | |
| const downloadsBtn = document.getElementById('downloads-btn'); | |
| const closeBtn = document.querySelector('.window-btn.close'); | |
| const minimizeBtn = document.querySelector('.window-btn.minimize'); | |
| const maximizeBtn = document.querySelector('.window-btn.maximize'); | |
| // Tab management | |
| let tabs = Array.from(document.querySelectorAll('.tab')); | |
| let activeTab = document.querySelector('.tab.active'); | |
| let tabHistory = { | |
| 'https://www.google.com': ['https://www.google.com'], | |
| 'https://www.youtube.com': ['https://www.youtube.com'], | |
| 'https://www.wikipedia.org': ['https://www.wikipedia.org'] | |
| }; | |
| let historyIndex = { | |
| 'https://www.google.com': 0, | |
| 'https://www.youtube.com': 0, | |
| 'https://www.wikipedia.org': 0 | |
| }; | |
| // Initialize tabs | |
| function initTabs() { | |
| tabs.forEach(tab => { | |
| const url = tab.getAttribute('data-url'); | |
| tabHistory[url] = [url]; | |
| historyIndex[url] = 0; | |
| }); | |
| } | |
| // Add to tab history | |
| function addToHistory(url, currentUrl) { | |
| if (!tabHistory[currentUrl]) { | |
| tabHistory[currentUrl] = []; | |
| historyIndex[currentUrl] = 0; | |
| } | |
| if (tabHistory[currentUrl][historyIndex[currentUrl]] !== url) { | |
| // Remove forward history if we're not at the end | |
| tabHistory[currentUrl] = tabHistory[currentUrl].slice(0, historyIndex[currentUrl] + 1); | |
| tabHistory[currentUrl].push(url); | |
| historyIndex[currentUrl]++; | |
| } | |
| updateNavButtons(); | |
| } | |
| // Update navigation buttons state | |
| function updateNavButtons() { | |
| const currentUrl = activeTab.getAttribute('data-url'); | |
| const history = tabHistory[currentUrl] || []; | |
| const index = historyIndex[currentUrl] || 0; | |
| backBtn.classList.toggle('disabled', index <= 0); | |
| forwardBtn.classList.toggle('disabled', index >= history.length - 1); | |
| } | |
| // Switch tab | |
| function switchTab(tab) { | |
| tabs.forEach(t => t.classList.remove('active')); | |
| tab.classList.add('active'); | |
| activeTab = tab; | |
| const url = tab.getAttribute('data-url'); | |
| browserIframe.src = url; | |
| addressBar.value = url; | |
| pageUrl.textContent = url; | |
| updateNavButtons(); | |
| // Show loading indicator | |
| showLoading(); | |
| // Hide error page if it was shown | |
| errorPage.style.display = 'none'; | |
| browserIframe.style.display = 'block'; | |
| } | |
| // Create new tab | |
| function createNewTab(url = 'about:blank', title = 'New Tab') { | |
| const newTab = document.createElement('div'); | |
| newTab.className = 'tab'; | |
| newTab.setAttribute('data-url', url); | |
| newTab.innerHTML = ` | |
| <i class="fas fa-globe" style="font-size: 12px;"></i> | |
| <div class="tab-title">${title}</div> | |
| <div class="tab-close"><i class="fas fa-times"></i></div> | |
| `; | |
| newTab.addEventListener('click', function() { | |
| switchTab(this); | |
| }); | |
| const tabClose = newTab.querySelector('.tab-close'); | |
| tabClose.addEventListener('click', (e) => { | |
| e.stopPropagation(); | |
| closeTab(this); | |
| }); | |
| // Add drag and drop support for tabs | |
| newTab.draggable = true; | |
| newTab.addEventListener('dragstart', handleDragStart); | |
| newTab.addEventListener('dragover', handleDragOver); | |
| newTab.addEventListener('drop', handleDrop); | |
| newTab.addEventListener('dragend', handleDragEnd); | |
| tabBar.insertBefore(newTab, newTabBtn); | |
| tabs = Array.from(document.querySelectorAll('.tab')); | |
| if (!tabHistory[url]) { | |
| tabHistory[url] = [url]; | |
| historyIndex[url] = 0; | |
| } | |
| return newTab; | |
| } | |
| // Close tab | |
| function closeTab(tab) { | |
| if (tabs.length <= 1) { | |
| // Don't close the last tab | |
| return; | |
| } | |
| const tabIndex = tabs.indexOf(tab); | |
| tab.remove(); | |
| tabs = Array.from(document.querySelectorAll('.tab')); | |
| // If closing the active tab, activate another one | |
| if (tab === activeTab) { | |
| let newActiveTab = tabIndex > 0 ? tabs[tabIndex - 1] : tabs[0]; | |
| switchTab(newActiveTab); | |
| } | |
| } | |
| // Tab drag and drop handlers | |
| function handleDragStart(e) { | |
| this.classList.add('dragging'); | |
| e.dataTransfer.setData('text/plain', this.getAttribute('data-url')); | |
| } | |
| function handleDragOver(e) { | |
| e.preventDefault(); | |
| const dragTab = document.querySelector('.tab.dragging'); | |
| if (this !== dragTab) { | |
| const rect = this.getBoundingClientRect(); | |
| const midpoint = rect.left + rect.width / 2; | |
| if (e.clientX < midpoint) { | |
| tabBar.insertBefore(dragTab, this); | |
| } else { | |
| tabBar.insertBefore(dragTab, this.nextSibling); | |
| } | |
| tabs = Array.from(document.querySelectorAll('.tab')); | |
| } | |
| } | |
| function handleDrop(e) { | |
| e.preventDefault(); | |
| } | |
| function handleDragEnd() { | |
| this.classList.remove('dragging'); | |
| } | |
| // Navigation functions | |
| function navigateTo(url) { | |
| // Show loading indicator | |
| showLoading(); | |
| // Hide error page if it was shown | |
| errorPage.style.display = 'none'; | |
| browserIframe.style.display = 'block'; | |
| // Update iframe and address bar | |
| browserIframe.src = url; | |
| addressBar.value = url; | |
| pageUrl.textContent = url; | |
| // Update active tab | |
| activeTab.setAttribute('data-url', url); | |
| // Update tab title (we'll update it properly after page loads) | |
| activeTab.querySelector('.tab-title').textContent = new URL(url).hostname; | |
| // Add to history | |
| addToHistory(url, url); | |
| } | |
| function goBack() { | |
| const currentUrl = activeTab.getAttribute('data-url'); | |
| if (historyIndex[currentUrl] > 0) { | |
| historyIndex[currentUrl]--; | |
| const url = tabHistory[currentUrl][historyIndex[currentUrl]]; | |
| navigateTo(url); | |
| } | |
| } | |
| function goForward() { | |
| const currentUrl = activeTab.getAttribute('data-url'); | |
| if (historyIndex[currentUrl] < tabHistory[currentUrl].length - 1) { | |
| historyIndex[currentUrl]++; | |
| const url = tabHistory[currentUrl][historyIndex[currentUrl]]; | |
| navigateTo(url); | |
| } | |
| } | |
| // Loading and error handling | |
| function showLoading() { | |
| loadingOverlay.style.display = 'flex'; | |
| statusText.textContent = 'Loading...'; | |
| } | |
| function hideLoading() { | |
| loadingOverlay.style.display = 'none'; | |
| statusText.textContent = 'Done'; | |
| // Update tab title with page title | |
| try { | |
| const title = browserIframe.contentDocument.title || new URL(browserIframe.src).hostname; | |
| activeTab.querySelector('.tab-title').textContent = title; | |
| // Update window title | |
| document.querySelector('.window-title').textContent = `${title} - Quantumize Browser`; | |
| // Update security indicator | |
| const securityIcon = activeTab.querySelector('.security-indicator'); | |
| if (browserIframe.src.startsWith('https://')) { | |
| securityIcon.className = 'fas fa-lock security-indicator secure'; | |
| securityIcon.title = 'Secure connection'; | |
| } else { | |
| securityIcon.className = 'fas fa-unlock security-indicator insecure'; | |
| securityIcon.title = 'Not secure'; | |
| } | |
| } catch (e) { | |
| console.log('Could not access iframe content:', e); | |
| } | |
| } | |
| function showError() { | |
| loadingOverlay.style.display = 'none'; | |
| browserIframe.style.display = 'none'; | |
| errorPage.style.display = 'flex'; | |
| errorUrl.textContent = browserIframe.src; | |
| statusText.textContent = 'Failed to load page'; | |
| } | |
| // Search suggestions | |
| function showSuggestions() { | |
| const query = addressBar.value.toLowerCase(); | |
| const popularSites = [ | |
| { name: 'Google', url: 'https://www.google.com', icon: 'fa-search' }, | |
| { name: 'YouTube', url: 'https://www.youtube.com', icon: 'fa-youtube' }, | |
| { name: 'Wikipedia', url: 'https://www.wikipedia.org', icon: 'fa-wikipedia-w' }, | |
| { name: 'GitHub', url: 'https://www.github.com', icon: 'fa-github' }, | |
| { name: 'Twitter', url: 'https://www.twitter.com', icon: 'fa-twitter' } | |
| ]; | |
| if (query.length === 0) { | |
| searchSuggestions.style.display = 'none'; | |
| return; | |
| } | |
| const filtered = popularSites.filter(site => | |
| site.name.toLowerCase().includes(query) || | |
| site.url.toLowerCase().includes(query) | |
| ); | |
| if (filtered.length > 0) { | |
| searchSuggestions.innerHTML = filtered.map(site => ` | |
| <div class="suggestion-item" data-url="${site.url}"> | |
| <i class="fab ${site.icon}"></i> | |
| <span>${site.name} - ${site.url}</span> | |
| </div> | |
| `).join(''); | |
| // Add click handlers to suggestions | |
| document.querySelectorAll('.suggestion-item').forEach(item => { | |
| item.addEventListener('click', () => { | |
| navigateTo(item.getAttribute('data-url')); | |
| searchSuggestions.style.display = 'none'; | |
| }); | |
| }); | |
| searchSuggestions.style.display = 'block'; | |
| } else { | |
| searchSuggestions.style.display = 'none'; | |
| } | |
| } | |
| // Downloads | |
| function simulateDownload() { | |
| downloadBar.classList.add('active'); | |
| let progress = 0; | |
| const interval = setInterval(() => { | |
| progress += 1; | |
| progressBar.style.width = `${progress}%`; | |
| if (progress >= 100) { | |
| clearInterval(interval); | |
| setTimeout(() => { | |
| downloadBar.classList.remove('active'); | |
| }, 2000); | |
| } | |
| }, 30); | |
| // Add to downloads list in sidebar | |
| const downloadsIcon = document.querySelector('.sidebar-icon:nth-child(4)'); | |
| downloadsIcon.innerHTML = '<i class="fas fa-download"></i><span class="badge">1</span>'; | |
| } | |
| // Event listeners | |
| profileBtn.addEventListener('click', (e) => { | |
| profileMenu.classList.toggle('active'); | |
| extensionsMenu.classList.remove('active'); | |
| e.stopPropagation(); | |
| }); | |
| extensionsBtn.addEventListener('click', (e) => { | |
| extensionsMenu.classList.toggle('active'); | |
| profileMenu.classList.remove('active'); | |
| e.stopPropagation(); | |
| }); | |
| document.addEventListener('click', () => { | |
| profileMenu.classList.remove('active'); | |
| extensionsMenu.classList.remove('active'); | |
| searchSuggestions.style.display = 'none'; | |
| }); | |
| darkModeBtn.addEventListener('click', () => { | |
| document.body.classList.toggle('theme-dark'); | |
| }); | |
| addressBar.addEventListener('keypress', (e) => { | |
| if (e.key === 'Enter') { | |
| let url = addressBar.value.trim(); | |
| if (!url.startsWith('http://') && !url.startsWith('https://') && !url.startsWith('about:')) { | |
| if (url.includes(' ') || url.includes('.')) { | |
| // Search with Google if there are spaces or dots | |
| url = `https://www.google.com/search?q=${encodeURIComponent(url)}`; | |
| } else { | |
| // Try adding https:// for simple domain names | |
| url = 'https://' + url; | |
| } | |
| } | |
| navigateTo(url); | |
| } | |
| }); | |
| addressBar.addEventListener('input', showSuggestions); | |
| addressBar.addEventListener('focus', showSuggestions); | |
| backBtn.addEventListener('click', goBack); | |
| forwardBtn.addEventListener('click', goForward); | |
| reloadBtn.addEventListener('click', () => { | |
| browserIframe.src = browserIframe.src; | |
| showLoading(); | |
| }); | |
| homeBtn.addEventListener('click', () => navigateTo('https://www.google.com')); | |
| // Setup tab events | |
| tabs.forEach(tab => { | |
| tab.addEventListener('click', function() { | |
| switchTab(this); | |
| }); | |
| const tabClose = tab.querySelector('.tab-close'); | |
| tabClose.addEventListener('click', (e) => { | |
| e.stopPropagation(); | |
| closeTab(tab); | |
| }); | |
| // Add drag and drop support for tabs | |
| tab.draggable = true; | |
| tab.addEventListener('dragstart', handleDragStart); | |
| tab.addEventListener('dragover', handleDragOver); | |
| tab.addEventListener('drop', handleDrop); | |
| tab.addEventListener('dragend', handleDragEnd); | |
| }); | |
| newTabBtn.addEventListener('click', () => { | |
| const newTab = createNewTab(); | |
| switchTab(newTab); | |
| }); | |
| // Bookmarks | |
| bookmarks.forEach(bookmark => { | |
| bookmark.addEventListener('click', () => { | |
| navigateTo(bookmark.getAttribute('data-url')); | |
| }); | |
| }); | |
| // Error retry | |
| retryBtn.addEventListener('click', () => { | |
| navigateTo(browserIframe.src); | |
| }); | |
| // Iframe load/error events | |
| browserIframe.addEventListener('load', hideLoading); | |
| browserIframe.addEventListener('error', showError); | |
| // Download events | |
| document.querySelector('.control-btn:nth-child(2)').addEventListener('click', simulateDownload); | |
| pauseDownloadBtn.addEventListener('click', () => { | |
| alert('Download paused'); | |
| }); | |
| cancelDownloadBtn.addEventListener('click', () => { | |
| downloadBar.classList.remove('active'); | |
| }); | |
| downloadsBtn.addEventListener('click', () => { | |
| alert('Downloads page will open here'); | |
| }); | |
| // Window controls | |
| closeBtn.addEventListener('click', () => { | |
| alert('Closing window (in a real app, this would close the window)'); | |
| }); | |
| minimizeBtn.addEventListener('click', () => { | |
| alert('Minimizing window (in a real app, this would minimize the window)'); | |
| }); | |
| maximizeBtn.addEventListener('click', () => { | |
| alert('Maximizing window (in a real app, this would maximize the window)'); | |
| }); | |
| // Initialize | |
| initTabs(); | |
| switchTab(tabs[0]); | |
| </script> | |
| </body> | |
| </html> |