andrew
26126982e2
Adds a frameless window with custom title bar controls for Windows, including minimize, maximize/restore, and close buttons. Refactors theme color application to use CSS variables and color-mix for improved consistency and dynamic theming across home, settings, and main UI. Updates renderer and styles to support the new title bar, platform detection, and improved color handling. No changes to lock files.
120 lines
4.4 KiB
HTML
120 lines
4.4 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Nebula Browser</title>
|
|
<link rel="stylesheet" href="style.css">
|
|
<style>
|
|
/* Removed custom draggable bar CSS to allow use of native title bar */
|
|
|
|
:root { --resize-border: 8px; }
|
|
|
|
body {
|
|
padding: var(--resize-border);
|
|
margin: 0;
|
|
height: calc(100vh - 2 * var(--resize-border));
|
|
display: flex;
|
|
flex-direction: column;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
::placeholder {
|
|
color: rgba(255, 255, 255, 0.5);
|
|
/* Adjust the color and transparency as needed */
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<!-- Windows title bar controls wrapper - sits above tab bar -->
|
|
<div id="titlebar-container">
|
|
<div id="tab-bar"></div>
|
|
<div id="window-controls">
|
|
<button id="min-btn" title="Minimize" aria-label="Minimize">
|
|
<svg width="10" height="10" viewBox="0 0 10 10">
|
|
<path d="M0 5h10" stroke="currentColor" stroke-width="1" fill="none"/>
|
|
</svg>
|
|
</button>
|
|
<button id="max-btn" title="Maximize" aria-label="Maximize">
|
|
<svg width="10" height="10" viewBox="0 0 10 10" class="maximize-icon">
|
|
<rect x="0.5" y="0.5" width="9" height="9" stroke="currentColor" stroke-width="1" fill="none"/>
|
|
</svg>
|
|
<svg width="10" height="10" viewBox="0 0 10 10" class="restore-icon" style="display:none">
|
|
<path d="M2.5 0.5h7v7M0.5 2.5h7v7h-7z" stroke="currentColor" stroke-width="1" fill="none"/>
|
|
</svg>
|
|
</button>
|
|
<button id="close-btn" title="Close" aria-label="Close">
|
|
<svg width="10" height="10" viewBox="0 0 10 10">
|
|
<path d="M0 0l10 10M10 0l-10 10" stroke="currentColor" stroke-width="1" fill="none"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="nav">
|
|
<div class="nav-left">
|
|
<button onclick="goBack()">←</button>
|
|
<button onclick="goForward()">→</button>
|
|
<button id="reload-btn">⟳</button>
|
|
</div>
|
|
|
|
<div class="nav-center">
|
|
<input id="url" type="text" placeholder="Type URL here" />
|
|
<button onclick="navigate()">Go</button>
|
|
</div>
|
|
|
|
<div class="nav-right">
|
|
<div class="downloads-wrapper">
|
|
<button id="downloads-btn" title="Downloads" aria-label="Downloads">
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
|
<path d="M12 3v12"/>
|
|
<path d="M7 10l5 5 5-5"/>
|
|
<path d="M5 21h14"/>
|
|
</svg>
|
|
</button>
|
|
<div id="downloads-popup" class="hidden">
|
|
<div class="downloads-pop-header">
|
|
<span>Downloads</span>
|
|
<button id="downloads-show-all">Show all</button>
|
|
</div>
|
|
<div id="downloads-list" class="downloads-pop-list"></div>
|
|
<div id="downloads-empty" class="downloads-empty">No downloads</div>
|
|
</div>
|
|
</div>
|
|
<div class="menu-wrapper">
|
|
<button id="menu-btn">☰</button>
|
|
<div id="menu-popup" class="hidden">
|
|
<button onclick="openSettings()">Settings</button>
|
|
<!-- You can add more options here -->
|
|
<button id="bigpicture-btn" title="Launch Big Picture Mode (Controller/Steam Deck UI)">🎮 Big Picture Mode</button>
|
|
<button id="devtools-btn" title="Open / Close Developer Tools">Toggle Developer Tools</button>
|
|
<div class="zoom-controls">
|
|
<button id="zoom-out-btn">-</button>
|
|
<span id="zoom-percent">100%</span>
|
|
<button id="zoom-in-btn">+</button>
|
|
</div>
|
|
<button id="hard-reload-btn">Hard Reload (Ignore Cache)</button>
|
|
<button id="fresh-reload-btn">Reload Fresh (Add Cache-Buster)</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div id="webviews" class="hidden"></div>
|
|
|
|
<!-- Home page container for direct loading -->
|
|
<div id="home-container" class="active">
|
|
<webview id="home-webview"
|
|
src="home.html"
|
|
preload="../preload.js"
|
|
partition="persist:main"
|
|
allowpopups
|
|
webpreferences="allowRunningInsecureContent=false,javascript=true,webSecurity=true"
|
|
useragent="Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36 Nebula/1.0.0"
|
|
style="width:100%; height:100%; border:none;">
|
|
</webview>
|
|
</div>
|
|
|
|
<script src="script.js"></script>
|
|
</body>
|
|
</html> |