| <!DOCTYPE html> |
| <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; |
| } |
| |
| |
| .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 { |
| 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); |
| } |
| |
| |
| .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 { |
| flex: 1; |
| display: flex; |
| background-color: var(--light-color); |
| overflow: hidden; |
| } |
| |
| |
| .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 { |
| flex: 1; |
| display: flex; |
| flex-direction: column; |
| overflow: hidden; |
| position: relative; |
| } |
| |
| |
| .current-page { |
| flex: 1; |
| border: none; |
| background-color: var(--light-color); |
| width: 100%; |
| height: 100%; |
| } |
| |
| |
| .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 { |
| 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 { |
| 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 { |
| 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-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 { |
| opacity: 0.8; |
| transform: scale(0.98); |
| box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); |
| } |
| |
| |
| .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 { |
| 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 { |
| 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 { |
| 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; |
| } |
| |
| |
| .security-indicator { |
| margin-right: 8px; |
| font-size: 14px; |
| } |
| |
| .secure { |
| color: #0b8043; |
| } |
| |
| .insecure { |
| color: #d50000; |
| } |
| |
| |
| .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> |
|
|
| |
| <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> |
|
|
| |
| <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> |
|
|
| |
| <div class="content-area"> |
| |
| <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> |
|
|
| |
| <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> |
|
|
| |
| <div class="status-bar"> |
| <span id="status-text">Ready</span> |
| <span id="page-url">https://www.google.com</span> |
| </div> |
|
|
| |
| <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>user@quantumize.com</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> |
|
|
| |
| <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> |
|
|
| |
| <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> |
| |
| 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'); |
| |
| |
| 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 |
| }; |
| |
| |
| function initTabs() { |
| tabs.forEach(tab => { |
| const url = tab.getAttribute('data-url'); |
| tabHistory[url] = [url]; |
| historyIndex[url] = 0; |
| }); |
| } |
| |
| |
| function addToHistory(url, currentUrl) { |
| if (!tabHistory[currentUrl]) { |
| tabHistory[currentUrl] = []; |
| historyIndex[currentUrl] = 0; |
| } |
| |
| if (tabHistory[currentUrl][historyIndex[currentUrl]] !== url) { |
| |
| tabHistory[currentUrl] = tabHistory[currentUrl].slice(0, historyIndex[currentUrl] + 1); |
| tabHistory[currentUrl].push(url); |
| historyIndex[currentUrl]++; |
| } |
| |
| updateNavButtons(); |
| } |
| |
| |
| 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); |
| } |
| |
| |
| 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(); |
| |
| |
| showLoading(); |
| |
| |
| errorPage.style.display = 'none'; |
| browserIframe.style.display = 'block'; |
| } |
| |
| |
| 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); |
| }); |
| |
| |
| 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; |
| } |
| |
| |
| function closeTab(tab) { |
| if (tabs.length <= 1) { |
| |
| return; |
| } |
| |
| const tabIndex = tabs.indexOf(tab); |
| tab.remove(); |
| tabs = Array.from(document.querySelectorAll('.tab')); |
| |
| |
| if (tab === activeTab) { |
| let newActiveTab = tabIndex > 0 ? tabs[tabIndex - 1] : tabs[0]; |
| switchTab(newActiveTab); |
| } |
| } |
| |
| |
| 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'); |
| } |
| |
| |
| function navigateTo(url) { |
| |
| showLoading(); |
| |
| |
| errorPage.style.display = 'none'; |
| browserIframe.style.display = 'block'; |
| |
| |
| browserIframe.src = url; |
| addressBar.value = url; |
| pageUrl.textContent = url; |
| |
| |
| activeTab.setAttribute('data-url', url); |
| |
| |
| activeTab.querySelector('.tab-title').textContent = new URL(url).hostname; |
| |
| |
| 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); |
| } |
| } |
| |
| |
| function showLoading() { |
| loadingOverlay.style.display = 'flex'; |
| statusText.textContent = 'Loading...'; |
| } |
| |
| function hideLoading() { |
| loadingOverlay.style.display = 'none'; |
| statusText.textContent = 'Done'; |
| |
| |
| try { |
| const title = browserIframe.contentDocument.title || new URL(browserIframe.src).hostname; |
| activeTab.querySelector('.tab-title').textContent = title; |
| |
| |
| document.querySelector('.window-title').textContent = `${title} - Quantumize Browser`; |
| |
| |
| 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'; |
| } |
| |
| |
| 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(''); |
| |
| |
| 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'; |
| } |
| } |
| |
| |
| 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); |
| |
| |
| const downloadsIcon = document.querySelector('.sidebar-icon:nth-child(4)'); |
| downloadsIcon.innerHTML = '<i class="fas fa-download"></i><span class="badge">1</span>'; |
| } |
| |
| |
| 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('.')) { |
| |
| url = `https://www.google.com/search?q=${encodeURIComponent(url)}`; |
| } else { |
| |
| 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')); |
| |
| |
| tabs.forEach(tab => { |
| tab.addEventListener('click', function() { |
| switchTab(this); |
| }); |
| |
| const tabClose = tab.querySelector('.tab-close'); |
| tabClose.addEventListener('click', (e) => { |
| e.stopPropagation(); |
| closeTab(tab); |
| }); |
| |
| |
| 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.forEach(bookmark => { |
| bookmark.addEventListener('click', () => { |
| navigateTo(bookmark.getAttribute('data-url')); |
| }); |
| }); |
| |
| |
| retryBtn.addEventListener('click', () => { |
| navigateTo(browserIframe.src); |
| }); |
| |
| |
| browserIframe.addEventListener('load', hideLoading); |
| browserIframe.addEventListener('error', showError); |
| |
| |
| 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'); |
| }); |
| |
| |
| 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)'); |
| }); |
| |
| |
| initTabs(); |
| switchTab(tabs[0]); |
| </script> |
| </body> |
| </html> |
