|
|
<!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> |
