browser / index.html
gaur3009's picture
Update index.html
df88719 verified
Raw History Blame Contribute Delete
47.7 kB
<!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; } /* 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>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> <!-- 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>
<!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;
}
/* 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 {