andrew
5c837aecd8
Introduces a new Big Picture Mode with a controller-friendly, console-style UI optimized for Steam Deck and handheld devices. Adds new renderer files (HTML, CSS, JS) for the mode, updates main and preload scripts to support window management and IPC for Big Picture Mode, and documents features and usage in BIG_PICTURE_MODE.md. Updates settings and navigation to allow launching and exiting Big Picture Mode.
97 lines
3.3 KiB
HTML
97 lines
3.3 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>
|
|
<div id="tab-bar"></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> |