Project added to repo
This commit is contained in:
@@ -0,0 +1,64 @@
|
||||
<!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>
|
||||
@@ -0,0 +1,18 @@
|
||||
// home-preload.js
|
||||
const { contextBridge, ipcRenderer } = require('electron');
|
||||
|
||||
contextBridge.exposeInMainWorld('homeAPI', {
|
||||
navigateTo: (url) => ipcRenderer.sendToHost('navigate', url),
|
||||
|
||||
// Bookmarks
|
||||
getBookmarks: () => ipcRenderer.invoke('get-home-bookmarks'),
|
||||
addBookmark: (bookmark) => ipcRenderer.invoke('add-home-bookmark', bookmark),
|
||||
removeBookmark: (url) => ipcRenderer.invoke('remove-home-bookmark', url),
|
||||
});
|
||||
// Expose settings API for settings page
|
||||
contextBridge.exposeInMainWorld('settingsAPI', {
|
||||
clearCookies: () => ipcRenderer.invoke('clear-cookies'),
|
||||
goHome: () => ipcRenderer.invoke('go-home'),
|
||||
clearBookmarks: () => ipcRenderer.invoke('clear-bookmarks'),
|
||||
clearHomeBookmarks: () => ipcRenderer.invoke('clear-home-bookmarks')
|
||||
});
|
||||
@@ -0,0 +1,774 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Nebula Browser - Home</title>
|
||||
<!-- Google Material Icons -->
|
||||
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
|
||||
<style>
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
src: url('../../assets/fonts/InterVariable.ttf') format('truetype');
|
||||
}
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
|
||||
background: #1a1724;
|
||||
min-height: 100vh;
|
||||
color: #333;
|
||||
overflow-x: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 40px 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.main-content {
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* Header Section */
|
||||
.header {
|
||||
text-align: center;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.logo {
|
||||
height: 100px;
|
||||
margin-bottom: 10px;
|
||||
filter: drop-shadow(0 2px 10px rgba(0,0,0,0.3));
|
||||
}
|
||||
|
||||
.title {
|
||||
color: white;
|
||||
font-size: 3.5rem;
|
||||
font-weight: 600;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 40px;
|
||||
text-shadow: 0 2px 10px rgba(0,0,0,0.3);
|
||||
}
|
||||
|
||||
/* Search Section */
|
||||
.search-section {
|
||||
text-align: center;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.search-container {
|
||||
position: relative;
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
width: 100%;
|
||||
padding: 18px 60px 18px 20px;
|
||||
font-size: 16px;
|
||||
border: none;
|
||||
border-radius: 25px;
|
||||
background: rgba(255,255,255,0.95);
|
||||
backdrop-filter: blur(10px);
|
||||
box-shadow: 0 8px 32px rgba(0,0,0,0.1);
|
||||
outline: none;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.search-input:focus {
|
||||
background: white;
|
||||
box-shadow: 0 12px 40px rgba(0,0,0,0.15);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.search-button {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
background: #792fff;
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.search-button:hover {
|
||||
background: #0384ff;
|
||||
transform: translateY(-50%) scale(1.1);
|
||||
}
|
||||
|
||||
.search-button svg {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
fill: white;
|
||||
}
|
||||
|
||||
/* Quick Links Section */
|
||||
.quick-links {
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
color: white;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 30px;
|
||||
text-align: center;
|
||||
text-shadow: 0 2px 10px rgba(0,0,0,0.3);
|
||||
}
|
||||
|
||||
.links-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
|
||||
gap: 20px;
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.link-item {
|
||||
background: rgba(255,255,255,0.1);
|
||||
backdrop-filter: blur(10px);
|
||||
border-radius: 15px;
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
color: white;
|
||||
transition: all 0.3s ease;
|
||||
border: 1px solid rgba(255,255,255,0.2);
|
||||
}
|
||||
|
||||
.link-item:hover {
|
||||
background: rgba(255,255,255,0.2);
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 10px 30px rgba(0,0,0,0.2);
|
||||
}
|
||||
|
||||
.link-icon {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
margin: 0 auto 12px;
|
||||
background: rgba(255,255,255,0.2);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.link-title {
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.link-item {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.delete-bookmark-btn {
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
right: 5px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background: rgba(0,0,0,0.5);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s ease;
|
||||
}
|
||||
|
||||
.link-item:hover .delete-bookmark-btn {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Add Link Button */
|
||||
.add-link-item {
|
||||
background: rgba(255,255,255,0.1);
|
||||
border: 2px dashed rgba(255,255,255,0.3);
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 48px;
|
||||
color: rgba(255,255,255,0.5);
|
||||
min-height: 125px; /* Ensure consistent height */
|
||||
}
|
||||
|
||||
.add-link-item:hover {
|
||||
background: rgba(255,255,255,0.2);
|
||||
color: white;
|
||||
border-color: white;
|
||||
}
|
||||
|
||||
/* Modal Styles */
|
||||
.modal-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
backdrop-filter: blur(5px);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
background: white;
|
||||
padding: 30px;
|
||||
border-radius: 15px;
|
||||
width: 90%;
|
||||
max-width: 400px;
|
||||
box-shadow: 0 10px 40px rgba(0,0,0,0.2);
|
||||
animation: fadeInUp 0.3s ease forwards;
|
||||
}
|
||||
|
||||
.modal-content h2 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 25px;
|
||||
color: #333;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
font-weight: 500;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.form-group input {
|
||||
width: 100%;
|
||||
padding: 12px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 8px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.form-actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 10px;
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.form-actions button {
|
||||
padding: 10px 20px;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s ease;
|
||||
}
|
||||
|
||||
.form-actions button[type="submit"] {
|
||||
background-color: #667eea;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.form-actions button[type="submit"]:hover {
|
||||
background-color: #5a67d8;
|
||||
}
|
||||
|
||||
.form-actions button[type="button"] {
|
||||
background-color: #e0e0e0;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.form-actions button[type="button"]:hover {
|
||||
background-color: #ccc;
|
||||
}
|
||||
|
||||
/* Icon Selector Styles */
|
||||
.icon-selector {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
|
||||
gap: 8px;
|
||||
max-height: 200px;
|
||||
overflow-y: auto;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 8px;
|
||||
padding: 10px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.icon-option {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 2px solid transparent;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
.icon-option:hover {
|
||||
background: #e0e0e0;
|
||||
border-color: #667eea;
|
||||
}
|
||||
|
||||
.icon-option.selected {
|
||||
background: #667eea;
|
||||
color: white;
|
||||
border-color: #5a67d8;
|
||||
}
|
||||
|
||||
.icon-option .material-icons {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.icon-input-group {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.icon-input-group input {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.icon-preview {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #f5f5f5;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 6px;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
/* Footer */
|
||||
.footer {
|
||||
text-align: center;
|
||||
color: rgba(255,255,255,0.7);
|
||||
font-size: 14px;
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
/* Responsive Design */
|
||||
@media (max-width: 768px) {
|
||||
.container {
|
||||
padding: 20px 15px;
|
||||
}
|
||||
|
||||
.logo {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
padding: 15px 50px 15px 18px;
|
||||
}
|
||||
|
||||
.links-grid {
|
||||
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.recent-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
/* Animations */
|
||||
@keyframes fadeInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.container > * {
|
||||
animation: fadeInUp 0.6s ease forwards;
|
||||
}
|
||||
|
||||
.search-section {
|
||||
animation-delay: 0.1s;
|
||||
}
|
||||
|
||||
.quick-links {
|
||||
animation-delay: 0.2s;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="main-content">
|
||||
<!-- Header -->
|
||||
<div class="header">
|
||||
<img src="../../assets/images/Nebula-Logo.svg" alt="Nebula Browser Logo" class="logo">
|
||||
<h1 class="title">Nebula Browser</h1>
|
||||
</div>
|
||||
|
||||
<!-- Search Section -->
|
||||
<div class="search-section">
|
||||
<div class="search-container">
|
||||
<input type="text" class="search-input" placeholder="Search" id="searchInput">
|
||||
<button class="search-button" id="searchButton">
|
||||
<svg viewBox="0 0 24 24">
|
||||
<path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Quick Links -->
|
||||
<div class="quick-links">
|
||||
<h2 class="section-title">Quick Access</h2>
|
||||
<div class="links-grid" id="quickLinksGrid">
|
||||
<!-- Bookmarks will be populated by JavaScript -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Add Bookmark Modal -->
|
||||
<div id="addBookmarkModal" class="modal-overlay" style="display: none;">
|
||||
<div class="modal-content">
|
||||
<h2>Add New Bookmark</h2>
|
||||
<form id="addBookmarkForm">
|
||||
<div class="form-group">
|
||||
<label for="bookmarkTitle">Title</label>
|
||||
<input type="text" id="bookmarkTitle" required>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="bookmarkUrl">URL</label>
|
||||
<input type="url" id="bookmarkUrl" required>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="bookmarkIcon">Icon</label>
|
||||
<div class="icon-input-group">
|
||||
<input type="text" id="bookmarkIcon" placeholder="Search for icon or enter emoji">
|
||||
<div class="icon-preview" id="iconPreview">⭐</div>
|
||||
</div>
|
||||
<div class="icon-selector" id="iconSelector">
|
||||
<!-- Icons will be generated dynamically -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-actions">
|
||||
<button type="button" id="cancelAddBookmark">Cancel</button>
|
||||
<button type="submit">Add</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Footer -->
|
||||
<div class="footer">
|
||||
<p>© 2025 Nebula Browser.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="module">
|
||||
import { materialIcons } from './iconData.js';
|
||||
// Search functionality
|
||||
const searchInput = document.getElementById('searchInput');
|
||||
const searchButton = document.getElementById('searchButton');
|
||||
|
||||
function performSearch() {
|
||||
const query = searchInput.value.trim();
|
||||
if (query) {
|
||||
// Check if it's a URL
|
||||
if (query.includes('.') && !query.includes(' ')) {
|
||||
const url = query.startsWith('http') ? query : `https://${query}`;
|
||||
navigateToUrl(url);
|
||||
} else {
|
||||
// Perform search
|
||||
const searchUrl = `https://www.google.com/search?q=${encodeURIComponent(query)}`;
|
||||
navigateToUrl(searchUrl);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function navigateToUrl(url) {
|
||||
if (window.homeAPI) {
|
||||
window.homeAPI.navigateTo(url);
|
||||
} else {
|
||||
console.error('Home API not available');
|
||||
// Fallback for when preload script fails
|
||||
window.parent.postMessage({ type: 'navigate', url: url }, '*');
|
||||
}
|
||||
}
|
||||
|
||||
searchButton.addEventListener('click', performSearch);
|
||||
searchInput.addEventListener('keypress', (e) => {
|
||||
if (e.key === 'Enter') {
|
||||
performSearch();
|
||||
}
|
||||
});
|
||||
|
||||
// Quick links and recent items navigation
|
||||
document.addEventListener('click', (e) => {
|
||||
// Handle delete button click
|
||||
if (e.target.classList.contains('delete-bookmark-btn')) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
const urlToDelete = e.target.dataset.url;
|
||||
deleteBookmark(urlToDelete);
|
||||
return; // Stop further processing
|
||||
}
|
||||
|
||||
// Handle add bookmark button click
|
||||
if (e.target.id === 'addBookmarkBtn' || e.target.closest('#addBookmarkBtn')) {
|
||||
modal.style.display = 'flex';
|
||||
resetModal();
|
||||
return; // Stop further processing
|
||||
}
|
||||
|
||||
// Handle navigation for links
|
||||
const linkItem = e.target.closest('.link-item');
|
||||
if (linkItem) {
|
||||
e.preventDefault();
|
||||
const url = linkItem.dataset.url;
|
||||
if (url) {
|
||||
navigateToUrl(url);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Focus search input on load
|
||||
window.addEventListener('load', () => {
|
||||
searchInput.focus();
|
||||
loadQuickLinks();
|
||||
});
|
||||
|
||||
// Handle keyboard shortcuts
|
||||
document.addEventListener('keydown', (e) => {
|
||||
// Ctrl+L or F6 to focus address bar (search input)
|
||||
if ((e.ctrlKey && e.key === 'l') || e.key === 'F6') {
|
||||
e.preventDefault();
|
||||
searchInput.focus();
|
||||
searchInput.select();
|
||||
}
|
||||
});
|
||||
|
||||
// Load quick links from bookmarks
|
||||
async function loadQuickLinks() {
|
||||
const quickLinksGrid = document.getElementById('quickLinksGrid');
|
||||
if (!quickLinksGrid) return;
|
||||
|
||||
if (window.homeAPI && window.homeAPI.getBookmarks) {
|
||||
try {
|
||||
const { home_bookmarks } = await window.homeAPI.getBookmarks();
|
||||
quickLinksGrid.innerHTML = ''; // Clear existing links
|
||||
|
||||
if (home_bookmarks && home_bookmarks.length > 0) {
|
||||
home_bookmarks.forEach(bookmark => {
|
||||
const linkItem = document.createElement('a');
|
||||
linkItem.href = '#';
|
||||
linkItem.className = 'link-item';
|
||||
linkItem.dataset.url = bookmark.url;
|
||||
|
||||
const linkIcon = document.createElement('div');
|
||||
linkIcon.className = 'link-icon';
|
||||
|
||||
// Check if it's a Material Icon or emoji
|
||||
if (bookmark.icon && bookmark.icon.startsWith('material:')) {
|
||||
const materialIcon = document.createElement('span');
|
||||
materialIcon.className = 'material-icons';
|
||||
materialIcon.textContent = bookmark.icon.replace('material:', '');
|
||||
linkIcon.appendChild(materialIcon);
|
||||
} else {
|
||||
linkIcon.textContent = bookmark.icon || '⭐';
|
||||
}
|
||||
|
||||
const linkTitle = document.createElement('div');
|
||||
linkTitle.className = 'link-title';
|
||||
linkTitle.textContent = bookmark.title;
|
||||
|
||||
const deleteBtn = document.createElement('button');
|
||||
deleteBtn.className = 'delete-bookmark-btn';
|
||||
deleteBtn.textContent = 'x';
|
||||
deleteBtn.dataset.url = bookmark.url;
|
||||
|
||||
linkItem.appendChild(linkIcon);
|
||||
linkItem.appendChild(linkTitle);
|
||||
linkItem.appendChild(deleteBtn);
|
||||
quickLinksGrid.appendChild(linkItem);
|
||||
});
|
||||
}
|
||||
|
||||
// Add the "Add" button
|
||||
const addButton = document.createElement('div');
|
||||
addButton.className = 'link-item add-link-item';
|
||||
addButton.id = 'addBookmarkBtn';
|
||||
addButton.textContent = '+';
|
||||
quickLinksGrid.appendChild(addButton);
|
||||
|
||||
} catch (error) {
|
||||
console.error('Error loading home bookmarks:', error);
|
||||
quickLinksGrid.innerHTML = '<p style="color: white; text-align: center; grid-column: 1 / -1;">Could not load bookmarks.</p>';
|
||||
}
|
||||
} else {
|
||||
console.error('Home API for bookmarks not available');
|
||||
quickLinksGrid.innerHTML = '<p style="color: white; text-align: center; grid-column: 1 / -1;">Could not load bookmarks.</p>';
|
||||
}
|
||||
}
|
||||
|
||||
// Modal handling
|
||||
const modal = document.getElementById('addBookmarkModal');
|
||||
const cancelBtn = document.getElementById('cancelAddBookmark');
|
||||
const form = document.getElementById('addBookmarkForm');
|
||||
|
||||
// Icon selector functionality
|
||||
const iconInput = document.getElementById('bookmarkIcon');
|
||||
const iconPreview = document.getElementById('iconPreview');
|
||||
const iconSelector = document.getElementById('iconSelector');
|
||||
// Dynamically generate icon options
|
||||
materialIcons.forEach(name => {
|
||||
const option = document.createElement('div');
|
||||
option.className = 'icon-option';
|
||||
option.dataset.icon = name;
|
||||
const span = document.createElement('span');
|
||||
span.className = 'material-icons';
|
||||
span.textContent = name;
|
||||
option.appendChild(span);
|
||||
iconSelector.appendChild(option);
|
||||
});
|
||||
let selectedIconType = 'emoji'; // 'emoji' or 'material'
|
||||
let selectedIcon = '⭐';
|
||||
|
||||
// Handle icon input changes
|
||||
iconInput.addEventListener('input', (e) => {
|
||||
const value = e.target.value.trim();
|
||||
if (value) {
|
||||
selectedIconType = 'emoji';
|
||||
selectedIcon = value;
|
||||
updateIconPreview(value);
|
||||
clearIconSelection();
|
||||
}
|
||||
});
|
||||
|
||||
// Handle icon selector clicks
|
||||
iconSelector.addEventListener('click', (e) => {
|
||||
const iconOption = e.target.closest('.icon-option');
|
||||
if (iconOption) {
|
||||
const iconName = iconOption.dataset.icon;
|
||||
selectedIconType = 'material';
|
||||
selectedIcon = iconName;
|
||||
|
||||
// Update input and preview
|
||||
iconInput.value = iconName;
|
||||
updateIconPreview(`material:${iconName}`);
|
||||
|
||||
// Update selection visual
|
||||
clearIconSelection();
|
||||
iconOption.classList.add('selected');
|
||||
}
|
||||
});
|
||||
|
||||
function updateIconPreview(icon) {
|
||||
iconPreview.innerHTML = '';
|
||||
if (icon.startsWith('material:')) {
|
||||
const materialIcon = document.createElement('span');
|
||||
materialIcon.className = 'material-icons';
|
||||
materialIcon.textContent = icon.replace('material:', '');
|
||||
iconPreview.appendChild(materialIcon);
|
||||
} else {
|
||||
iconPreview.textContent = icon || '⭐';
|
||||
}
|
||||
}
|
||||
|
||||
function clearIconSelection() {
|
||||
iconSelector.querySelectorAll('.icon-option').forEach(option => {
|
||||
option.classList.remove('selected');
|
||||
});
|
||||
}
|
||||
|
||||
// Reset modal when opened
|
||||
function resetModal() {
|
||||
form.reset();
|
||||
selectedIconType = 'emoji';
|
||||
selectedIcon = '⭐';
|
||||
updateIconPreview('⭐');
|
||||
clearIconSelection();
|
||||
}
|
||||
|
||||
cancelBtn.addEventListener('click', () => {
|
||||
modal.style.display = 'none';
|
||||
});
|
||||
|
||||
modal.addEventListener('click', (e) => {
|
||||
if (e.target === modal) {
|
||||
modal.style.display = 'none';
|
||||
}
|
||||
});
|
||||
|
||||
form.addEventListener('submit', async (e) => {
|
||||
e.preventDefault();
|
||||
const title = document.getElementById('bookmarkTitle').value;
|
||||
const url = document.getElementById('bookmarkUrl').value;
|
||||
|
||||
// Determine the final icon format
|
||||
let icon;
|
||||
if (selectedIconType === 'material') {
|
||||
icon = `material:${selectedIcon}`;
|
||||
} else {
|
||||
icon = selectedIcon || iconInput.value || '⭐';
|
||||
}
|
||||
|
||||
if (window.homeAPI && window.homeAPI.addBookmark) {
|
||||
const result = await window.homeAPI.addBookmark({ title, url, icon });
|
||||
if (result.success) {
|
||||
loadQuickLinks();
|
||||
modal.style.display = 'none';
|
||||
resetModal();
|
||||
} else {
|
||||
alert(result.message);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
async function deleteBookmark(url) {
|
||||
if (window.homeAPI && window.homeAPI.removeBookmark) {
|
||||
const result = await window.homeAPI.removeBookmark(url);
|
||||
if (result.success) {
|
||||
loadQuickLinks();
|
||||
} else {
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,377 @@
|
||||
// List of popular Material Icons
|
||||
export const materialIcons = [
|
||||
'home',
|
||||
'favorite',
|
||||
'star',
|
||||
'work',
|
||||
'school',
|
||||
'shopping_cart',
|
||||
'music_note',
|
||||
'movie',
|
||||
'games',
|
||||
'sports_esports',
|
||||
'library_books',
|
||||
'camera_alt',
|
||||
'flight',
|
||||
'restaurant',
|
||||
'sports_soccer',
|
||||
'code',
|
||||
'build',
|
||||
'palette',
|
||||
'analytics',
|
||||
'security',
|
||||
'account_circle',
|
||||
'alarm',
|
||||
'alarm_on',
|
||||
'android',
|
||||
'apartment',
|
||||
'arrow_back',
|
||||
'arrow_forward',
|
||||
'attach_file',
|
||||
'autorenew',
|
||||
'book',
|
||||
'bookmark',
|
||||
'build_circle',
|
||||
'calendar_today',
|
||||
'chevron_left',
|
||||
'chevron_right',
|
||||
'cloud',
|
||||
'delete',
|
||||
'directions',
|
||||
'edit',
|
||||
'email',
|
||||
'add',
|
||||
'add_alert',
|
||||
'add_box',
|
||||
'add_circle',
|
||||
'add_circle_outline',
|
||||
'adjust',
|
||||
'airline_seat_flat',
|
||||
'airline_seat_individual_suite',
|
||||
'airplanemode_active',
|
||||
'announcement',
|
||||
'aspect_ratio',
|
||||
'assessment',
|
||||
'assignment',
|
||||
'assistant',
|
||||
'attach_money',
|
||||
'attachment',
|
||||
'backspace',
|
||||
'backup',
|
||||
'battery_alert',
|
||||
'beenhere',
|
||||
'block',
|
||||
'bluetooth',
|
||||
'bluetooth_audio',
|
||||
'book_online',
|
||||
'bookmark_border',
|
||||
'border_all',
|
||||
'brightness_1',
|
||||
'brightness_2',
|
||||
'brightness_7',
|
||||
'bug_report',
|
||||
'cached',
|
||||
'cake',
|
||||
'call',
|
||||
'camera',
|
||||
'cancel_presentation',
|
||||
'card_giftcard',
|
||||
'casino',
|
||||
'cast',
|
||||
'change_history',
|
||||
'check',
|
||||
'check_box',
|
||||
'check_circle',
|
||||
'child_care',
|
||||
'chrome_reader_mode',
|
||||
'class',
|
||||
'clean_hands',
|
||||
'clear',
|
||||
'close',
|
||||
'cloud_download',
|
||||
'cloud_upload',
|
||||
'code_off',
|
||||
'collections',
|
||||
'color_lens',
|
||||
'comment',
|
||||
'compare_arrows',
|
||||
'computer',
|
||||
'confirmation_number',
|
||||
'contact_mail',
|
||||
'content_copy',
|
||||
'content_paste',
|
||||
'control_point',
|
||||
'copyright',
|
||||
'create',
|
||||
'credit_card',
|
||||
'crop',
|
||||
'dashboard',
|
||||
'date_range',
|
||||
'delete_forever',
|
||||
'description',
|
||||
'desktop_mac',
|
||||
'desktop_windows',
|
||||
'directions_bike',
|
||||
'directions_boat',
|
||||
'directions_bus',
|
||||
'directions_car',
|
||||
'directions_run',
|
||||
'directions_transit',
|
||||
'dns',
|
||||
'done',
|
||||
'done_all',
|
||||
'donut_large',
|
||||
'double_arrow',
|
||||
'drafts',
|
||||
'drag_handle',
|
||||
'drive_eta',
|
||||
'dvr',
|
||||
'edit_attributes',
|
||||
'eject',
|
||||
'emoji_emotions',
|
||||
'event',
|
||||
'exit_to_app',
|
||||
'expand_less',
|
||||
'expand_more',
|
||||
'explore',
|
||||
'extension',
|
||||
'face',
|
||||
'favorite_border',
|
||||
'file_copy',
|
||||
'filter_list',
|
||||
'flag',
|
||||
'flaky',
|
||||
'flight_takeoff',
|
||||
'folder',
|
||||
'format_bold',
|
||||
'format_clear',
|
||||
'format_color_fill',
|
||||
'format_indent_decrease',
|
||||
'format_indent_increase',
|
||||
'format_italic',
|
||||
'format_list_bulleted',
|
||||
'format_list_numbered',
|
||||
'format_quote',
|
||||
'format_underlined',
|
||||
'forum',
|
||||
'forward',
|
||||
'fullscreen',
|
||||
'functions',
|
||||
'g_translate',
|
||||
'gesture',
|
||||
'get_app',
|
||||
'gif',
|
||||
'grade',
|
||||
'group',
|
||||
'help',
|
||||
'history',
|
||||
'home_filled',
|
||||
'hourglass_empty',
|
||||
'http',
|
||||
'image',
|
||||
'input',
|
||||
'insert_chart',
|
||||
'invert_colors',
|
||||
'iso',
|
||||
'keyboard',
|
||||
'label',
|
||||
'language',
|
||||
'laptop_mac',
|
||||
'launch',
|
||||
'lightbulb',
|
||||
'line_style',
|
||||
'link',
|
||||
'list',
|
||||
'list_alt',
|
||||
'lock',
|
||||
'lock_open',
|
||||
'loop',
|
||||
'loupe',
|
||||
'mail_outline',
|
||||
'map',
|
||||
'markunread_mailbox',
|
||||
'memory',
|
||||
'menu',
|
||||
'merge_type',
|
||||
'mic',
|
||||
'mic_off',
|
||||
'mood',
|
||||
'more_horiz',
|
||||
'more_vert',
|
||||
'mouse',
|
||||
'movie_creation',
|
||||
'multiline_chart',
|
||||
'music_video',
|
||||
'nature',
|
||||
'navigate_before',
|
||||
'navigate_next',
|
||||
'network_cell',
|
||||
'new_releases',
|
||||
'nfc',
|
||||
'no_encryption',
|
||||
'not_interested',
|
||||
'open_in_browser',
|
||||
'open_with',
|
||||
'pageview',
|
||||
'pan_tool',
|
||||
'pause',
|
||||
'payment',
|
||||
'people',
|
||||
'perm_camera_mic',
|
||||
'perm_contact_calendar',
|
||||
'perm_identity',
|
||||
'perm_media',
|
||||
'perm_phone_msg',
|
||||
'perm_scan_wifi',
|
||||
'person',
|
||||
'person_add',
|
||||
'photo',
|
||||
'pie_chart',
|
||||
'pin_drop',
|
||||
'place',
|
||||
'play_arrow',
|
||||
'play_circle_filled',
|
||||
'playlist_add',
|
||||
'poll',
|
||||
'polymer',
|
||||
'power_settings_new',
|
||||
'print',
|
||||
'priority_high',
|
||||
'public',
|
||||
'publish',
|
||||
'query_builder',
|
||||
'question_answer',
|
||||
'radio',
|
||||
'receipt',
|
||||
'redo',
|
||||
'refresh',
|
||||
'remove',
|
||||
'remove_circle',
|
||||
'reorder',
|
||||
'report',
|
||||
'report_problem',
|
||||
'restaurant_menu',
|
||||
'restore',
|
||||
'ring_volume',
|
||||
'room',
|
||||
'rotate_left',
|
||||
'rotate_right',
|
||||
'rounded_corner',
|
||||
'rowing',
|
||||
'rss_feed',
|
||||
'rv_hookup',
|
||||
'satellite',
|
||||
'save',
|
||||
'scanner',
|
||||
'schedule',
|
||||
'screen_lock_landscape',
|
||||
'screen_lock_portrait',
|
||||
'screen_rotation',
|
||||
'sd_storage',
|
||||
'search',
|
||||
'send',
|
||||
'settings',
|
||||
'settings_cell',
|
||||
'settings_backup_restore',
|
||||
'settings_input_component',
|
||||
'share',
|
||||
'shield',
|
||||
'shop',
|
||||
'shopping_bag',
|
||||
'shuffle',
|
||||
'signal_cellular_4_bar',
|
||||
'sim_card',
|
||||
'skip_next',
|
||||
'skip_previous',
|
||||
'slideshow',
|
||||
'smartphone',
|
||||
'smoke_free',
|
||||
'sms',
|
||||
'snooze',
|
||||
'sort',
|
||||
'spa',
|
||||
'spellcheck',
|
||||
'star_border',
|
||||
'star_half',
|
||||
'stars',
|
||||
'stay_primary_landscape',
|
||||
'stay_current_portrait',
|
||||
'stop',
|
||||
'storage',
|
||||
'store',
|
||||
'straighten',
|
||||
'streetview',
|
||||
'style',
|
||||
'swap_calls',
|
||||
'sync',
|
||||
'system_update_alt',
|
||||
'tab',
|
||||
'table_chart',
|
||||
'tag',
|
||||
'text_fields',
|
||||
'text_format',
|
||||
'thumb_down',
|
||||
'thumb_up',
|
||||
'thumbs_up_down',
|
||||
'time_to_leave',
|
||||
'timer',
|
||||
'timer_off',
|
||||
'toc',
|
||||
'today',
|
||||
'toll',
|
||||
'tonality',
|
||||
'touch_app',
|
||||
'traffic',
|
||||
'train',
|
||||
'tram',
|
||||
'transfer_within_a_station',
|
||||
'translate',
|
||||
'trending_down',
|
||||
'trending_flat',
|
||||
'trending_up',
|
||||
'tune',
|
||||
'turned_in',
|
||||
'turned_in_not',
|
||||
'unarchive',
|
||||
'undo',
|
||||
'unfold_less',
|
||||
'unfold_more',
|
||||
'update',
|
||||
'usb',
|
||||
'verified_user',
|
||||
'vertical_align_bottom',
|
||||
'vertical_align_center',
|
||||
'vertical_align_top',
|
||||
'vibration',
|
||||
'video_call',
|
||||
'video_label',
|
||||
'video_library',
|
||||
'visibility',
|
||||
'visibility_off',
|
||||
'voice_chat',
|
||||
'voicemail',
|
||||
'volume_down',
|
||||
'volume_mute',
|
||||
'volume_off',
|
||||
'volume_up',
|
||||
'vpn_key',
|
||||
'wallpaper',
|
||||
'warning',
|
||||
'watch',
|
||||
'wb_auto',
|
||||
'wb_cloudy',
|
||||
'wb_incandescent',
|
||||
'wb_iridescent',
|
||||
'wb_sunny',
|
||||
'web',
|
||||
'whatshot',
|
||||
'widgets',
|
||||
'wifi',
|
||||
'wifi_off',
|
||||
'work_outline',
|
||||
'youtube_searched_for',
|
||||
'zoom_in',
|
||||
'alternate_email',
|
||||
'fax',
|
||||
'zoom_out'
|
||||
];
|
||||
@@ -0,0 +1,93 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Nebula Browser - Settings</title>
|
||||
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
|
||||
<link rel="stylesheet" href="../style.css">
|
||||
<style>
|
||||
body {
|
||||
background: #1a1724;
|
||||
color: white;
|
||||
}
|
||||
.container {
|
||||
padding: 20px;
|
||||
}
|
||||
.settings-section {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-radius: 8px;
|
||||
padding: 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.settings-section h2 {
|
||||
margin-top: 0;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
|
||||
padding-bottom: 10px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.setting-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 15px 0;
|
||||
}
|
||||
.setting-item p {
|
||||
margin: 0;
|
||||
}
|
||||
.setting-item .description {
|
||||
font-size: 0.9em;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
button {
|
||||
background-color: #792fff;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 10px 15px;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
button:hover {
|
||||
background-color: #0384ff;
|
||||
}
|
||||
#backToHome {
|
||||
margin-top: 20px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<h1>Settings</h1>
|
||||
|
||||
<div class="settings-section">
|
||||
<h2>Privacy and Security</h2>
|
||||
<div class="setting-item">
|
||||
<div>
|
||||
<p>Clear browsing data</p>
|
||||
<span class="description">Clear cookies, and other site data.</span>
|
||||
</div>
|
||||
<button id="clearCookiesBtn">Clear data</button>
|
||||
</div>
|
||||
<div class="setting-item">
|
||||
<div>
|
||||
<p>Clear bookmarks</p>
|
||||
<span class="description">Remove all bookmarks from bookmarks.json.</span>
|
||||
</div>
|
||||
<button id="clearBookmarksBtn">Clear bookmarks</button>
|
||||
</div>
|
||||
<div class="setting-item">
|
||||
<div>
|
||||
<p>Clear home bookmarks</p>
|
||||
<span class="description">Remove all bookmarks from home-bookmarks.json.</span>
|
||||
</div>
|
||||
<button id="clearHomeBookmarksBtn">Clear home bookmarks</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button id="backToHome">Back to Home</button>
|
||||
</div>
|
||||
|
||||
<script src="./settings.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,65 @@
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const clearCookiesBtn = document.getElementById('clearCookiesBtn');
|
||||
const backToHomeBtn = document.getElementById('backToHome');
|
||||
|
||||
if (clearCookiesBtn) {
|
||||
clearCookiesBtn.addEventListener('click', () => {
|
||||
if (window.settingsAPI && window.settingsAPI.clearCookies) {
|
||||
window.settingsAPI.clearCookies();
|
||||
alert('Cookies have been cleared.');
|
||||
} else {
|
||||
console.error('Settings API not available.');
|
||||
alert('Could not clear cookies. API not found.');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
if (backToHomeBtn) {
|
||||
backToHomeBtn.addEventListener('click', () => {
|
||||
if (window.settingsAPI && window.settingsAPI.goHome) {
|
||||
window.settingsAPI.goHome();
|
||||
} else {
|
||||
// Fallback if the API isn't available
|
||||
window.history.back();
|
||||
}
|
||||
});
|
||||
}
|
||||
// Clear bookmarks button
|
||||
const clearBookmarksBtn = document.getElementById('clearBookmarksBtn');
|
||||
if (clearBookmarksBtn) {
|
||||
clearBookmarksBtn.addEventListener('click', () => {
|
||||
if (window.settingsAPI && window.settingsAPI.clearBookmarks) {
|
||||
window.settingsAPI.clearBookmarks().then(result => {
|
||||
if (result && result.success) {
|
||||
alert('All bookmarks have been cleared.');
|
||||
} else {
|
||||
alert('Could not clear bookmarks.');
|
||||
console.error(result.error);
|
||||
}
|
||||
});
|
||||
} else {
|
||||
console.error('Settings API for clearing bookmarks not available.');
|
||||
alert('Could not clear bookmarks. API not found.');
|
||||
}
|
||||
});
|
||||
}
|
||||
// Clear home bookmarks button
|
||||
const clearHomeBookmarksBtn = document.getElementById('clearHomeBookmarksBtn');
|
||||
if (clearHomeBookmarksBtn) {
|
||||
clearHomeBookmarksBtn.addEventListener('click', () => {
|
||||
if (window.settingsAPI && window.settingsAPI.clearHomeBookmarks) {
|
||||
window.settingsAPI.clearHomeBookmarks().then(result => {
|
||||
if (result && result.success) {
|
||||
alert('All home bookmarks have been cleared.');
|
||||
} else {
|
||||
alert('Could not clear home bookmarks.');
|
||||
console.error(result.error);
|
||||
}
|
||||
});
|
||||
} else {
|
||||
console.error('Settings API for clearing home bookmarks not available.');
|
||||
alert('Could not clear home bookmarks. API not found.');
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
@@ -0,0 +1,39 @@
|
||||
/* steamos.css */
|
||||
|
||||
/* Big Picture Mode inspired UI for SteamOS */
|
||||
body {
|
||||
background-color: #1b2838 !important;
|
||||
color: #c7d5e0 !important;
|
||||
}
|
||||
|
||||
#browser-bar {
|
||||
background-color: #171a21 !important;
|
||||
padding: 10px !important;
|
||||
}
|
||||
|
||||
#nav-buttons button {
|
||||
background-color: #4c6b22 !important;
|
||||
color: white !important;
|
||||
border: none !important;
|
||||
border-radius: 5px !important;
|
||||
font-size: 1.2em !important;
|
||||
padding: 10px 20px !important;
|
||||
margin-right: 10px !important;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
#nav-buttons button:hover {
|
||||
background-color: #5f862a !important;
|
||||
}
|
||||
|
||||
#url-bar {
|
||||
background-color: #2a475e !important;
|
||||
border: 1px solid #66c0f4 !important;
|
||||
color: white !important;
|
||||
font-size: 1.2em !important;
|
||||
padding: 10px !important;
|
||||
}
|
||||
|
||||
#url-bar::placeholder {
|
||||
color: #c7d5e0;
|
||||
}
|
||||
@@ -0,0 +1,33 @@
|
||||
/* style.css */
|
||||
@import 'https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css';
|
||||
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
src: url('../assets/fonts/InterVariable.ttf') format('truetype');
|
||||
}
|
||||
|
||||
/* General styles for the browser UI */
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||||
overflow: hidden; /* Hide scrollbars on the main window */
|
||||
}
|
||||
|
||||
#browser-bar {
|
||||
-webkit-app-region: drag; /* Allows dragging the window from the browser bar */
|
||||
}
|
||||
|
||||
#nav-buttons button, #url-bar {
|
||||
-webkit-app-region: no-drag; /* Prevents dragging from interactive elements */
|
||||
}
|
||||
|
||||
#home-btn {
|
||||
font-size: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#webview {
|
||||
height: calc(100vh - 56px); /* Adjust height to fill space below the browser bar */
|
||||
}
|
||||
Reference in New Issue
Block a user