65 lines
3.3 KiB
HTML
65 lines
3.3 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>SteamOS Browser</title>
|
|
<!-- Google Material Icons -->
|
|
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
|
|
<link rel="stylesheet" href="style.css">
|
|
<!-- This is where we will link to our SteamOS specific styles -->
|
|
<link rel="stylesheet" id="steam-os-style" href="">
|
|
</head>
|
|
<body class="bg-gray-800 text-white">
|
|
|
|
<div id="browser-bar" class="flex items-center p-2 bg-gray-900">
|
|
<div id="nav-buttons" class="flex">
|
|
<button id="back-btn" class="px-4 py-2 mr-2 bg-gray-700 rounded hover:bg-gray-600 flex items-center justify-center">
|
|
<span class="material-icons">arrow_back</span>
|
|
</button>
|
|
<button id="forward-btn" class="px-4 py-2 mr-2 bg-gray-700 rounded hover:bg-gray-600 flex items-center justify-center">
|
|
<span class="material-icons">arrow_forward</span>
|
|
</button>
|
|
<button id="reload-btn" class="px-4 py-2 mr-2 bg-gray-700 rounded hover:bg-gray-600 flex items-center justify-center">
|
|
<span class="material-icons">refresh</span>
|
|
</button>
|
|
<button id="home-btn" class="px-4 py-2 mr-2 bg-blue-600 rounded hover:bg-blue-500 flex items-center justify-center">
|
|
<span class="material-icons">home</span>
|
|
</button>
|
|
</div>
|
|
<input type="text" id="url-bar" class="flex-grow p-2 bg-gray-700 border border-gray-600 rounded" placeholder="https://...">
|
|
<div id="bookmark-controls" class="flex ml-2">
|
|
<button id="bookmark-btn" class="px-4 py-2 mr-2 bg-blue-600 rounded hover:bg-blue-500 flex items-center justify-center">
|
|
<span class="material-icons">star_border</span>
|
|
</button>
|
|
<button id="bookmarks-menu-btn" class="px-4 py-2 mr-2 bg-gray-700 rounded hover:bg-gray-600 flex items-center justify-center">
|
|
<span class="material-icons">bookmarks</span>
|
|
</button>
|
|
<button id="menu-btn" class="px-4 py-2 bg-gray-700 rounded hover:bg-gray-600 flex items-center justify-center">
|
|
<span class="material-icons">menu</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Burger menu dropdown -->
|
|
<div id="menu-dropdown" class="hidden absolute right-2 top-16 bg-gray-800 border border-gray-600 rounded shadow-lg z-10 w-48">
|
|
<a href="#" id="settings-link" class="block px-4 py-2 text-white hover:bg-gray-700">Settings</a>
|
|
<a href="#" id="history-link" class="block px-4 py-2 text-white hover:bg-gray-700">History</a>
|
|
<a href="#" id="downloads-link" class="block px-4 py-2 text-white hover:bg-gray-700">Downloads</a>
|
|
</div>
|
|
|
|
<!-- Bookmarks dropdown menu -->
|
|
<div id="bookmarks-menu" class="hidden absolute right-2 top-16 bg-gray-800 border border-gray-600 rounded shadow-lg z-10 w-64 max-h-96 overflow-y-auto">
|
|
<div class="p-2 border-b border-gray-600">
|
|
<h3 class="text-sm font-semibold">Bookmarks</h3>
|
|
</div>
|
|
<div id="bookmarks-list" class="p-2">
|
|
<!-- Bookmarks will be populated here -->
|
|
</div>
|
|
</div>
|
|
|
|
<webview id="webview" class="w-full h-screen" preload="pages/home-preload.js"></webview>
|
|
|
|
<script src="../renderer.js"></script>
|
|
</body>
|
|
</html>
|