Update WebUI design
This commit is contained in:
Alex X
+114
-180
@@ -1,200 +1,134 @@
|
||||
// main menu
|
||||
document.body.innerHTML = `
|
||||
document.head.innerHTML += `
|
||||
<style>
|
||||
ul {
|
||||
list-style: none;
|
||||
margin: 0 auto;
|
||||
}
|
||||
body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-family: Arial, sans-serif;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
font-family: 'Lora', serif;
|
||||
transition: .5s linear;
|
||||
}
|
||||
/* navigation block */
|
||||
nav {
|
||||
background-color: #333;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
i {
|
||||
margin-right: 10px;
|
||||
}
|
||||
nav a {
|
||||
float: left;
|
||||
display: block;
|
||||
color: #f2f2f2;
|
||||
text-align: center;
|
||||
padding: 14px 16px;
|
||||
text-decoration: none;
|
||||
font-size: 17px;
|
||||
}
|
||||
|
||||
nav {
|
||||
display: block;
|
||||
margin: 0 auto 10px;
|
||||
}
|
||||
nav a:hover {
|
||||
background-color: #ddd;
|
||||
color: black;
|
||||
}
|
||||
|
||||
nav ul {
|
||||
padding: 1em 0;
|
||||
background: #ECDAD6;
|
||||
}
|
||||
/* main block */
|
||||
main {
|
||||
padding: 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
nav a {
|
||||
padding: 1em;
|
||||
background: rgba(177, 152, 145, .3);
|
||||
border-right: 1px solid #b19891;
|
||||
color: #695753;
|
||||
}
|
||||
/* checkbox */
|
||||
label {
|
||||
display: flex;
|
||||
gap: 5px;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
nav a:hover {
|
||||
background: #b19891;
|
||||
}
|
||||
input[type="checkbox"] {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
nav li {
|
||||
display: inline;
|
||||
}
|
||||
/* form */
|
||||
form {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
background-color: white;
|
||||
}
|
||||
table {
|
||||
background-color: white;
|
||||
text-align: left;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
table thead {
|
||||
background: #CFCFCF;
|
||||
background: linear-gradient(to bottom, #dbdbdb 0%, #d3d3d3 66%, #CFCFCF 100%);
|
||||
border-bottom: 3px solid black;
|
||||
}
|
||||
table thead th {
|
||||
font-size: 15px;
|
||||
font-weight: bold;
|
||||
color: black;
|
||||
text-align: center;
|
||||
}
|
||||
table td, table th {
|
||||
border: 1px solid black;
|
||||
padding: 5px 5px;
|
||||
}
|
||||
input[type="text"] {
|
||||
padding: 10px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
/* Dark mode styles */
|
||||
body.dark-mode {
|
||||
background-color: #121212;
|
||||
color: #e0e0e0;
|
||||
}
|
||||
button {
|
||||
padding: 10px 20px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
body.dark-mode nav ul {
|
||||
background: #333;
|
||||
}
|
||||
/* table */
|
||||
table {
|
||||
width: 100%;
|
||||
background-color: white;
|
||||
border-collapse: collapse;
|
||||
margin: 0 auto;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
body.dark-mode a {
|
||||
background: rgba(45, 45, 45, .8);
|
||||
border-right: 1px solid #2c2c2c;
|
||||
color: #c7c7c7;
|
||||
}
|
||||
th, td {
|
||||
padding: 12px 15px;
|
||||
text-align: left;
|
||||
border-bottom: 1px solid #e0e0e0;
|
||||
}
|
||||
|
||||
body.dark-mode a:hover {
|
||||
background: #555;
|
||||
}
|
||||
th {
|
||||
background-color: #444;
|
||||
color: white;
|
||||
}
|
||||
|
||||
body.dark-mode a:visited {
|
||||
color: #999;
|
||||
}
|
||||
tr:nth-child(even) {
|
||||
background-color: #fafafa;
|
||||
}
|
||||
|
||||
body.dark-mode table {
|
||||
background-color: #222;
|
||||
color: #ddd;
|
||||
}
|
||||
tr:hover {
|
||||
background-color: #edf7ff;
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
body.dark-mode table thead {
|
||||
background: linear-gradient(to bottom, #444 0%, #3d3d3d 66%, #333 100%);
|
||||
border-bottom: 3px solid #888;
|
||||
}
|
||||
body.dark-mode table thead th {
|
||||
font-size: 15px;
|
||||
font-weight: bold;
|
||||
color: #ddd;
|
||||
text-align: center;
|
||||
}
|
||||
body.dark-mode table td, body.dark-mode table th {
|
||||
border: 1px solid #444;
|
||||
}
|
||||
/* table on mobile */
|
||||
@media (max-width: 480px) {
|
||||
table, thead, tbody, th, td, tr {
|
||||
display: block;
|
||||
}
|
||||
|
||||
body.dark-mode button {
|
||||
background: rgba(255, 255, 255, .1);
|
||||
border: 1px solid #444;
|
||||
color: #ccc;
|
||||
}
|
||||
th, td {
|
||||
box-sizing: border-box;
|
||||
width: 100% !important;
|
||||
border: none;
|
||||
}
|
||||
|
||||
body.dark-mode input,
|
||||
body.dark-mode select,
|
||||
body.dark-mode textarea {
|
||||
background-color: #333;
|
||||
color: #e0e0e0;
|
||||
border: 1px solid #444;
|
||||
}
|
||||
|
||||
body.dark-mode input::placeholder,
|
||||
body.dark-mode textarea::placeholder {
|
||||
color: #bbb;
|
||||
}
|
||||
|
||||
body.dark-mode hr {
|
||||
border-top: 1px solid #444;
|
||||
}
|
||||
tr {
|
||||
margin-bottom: 10px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="index.html">Streams</a></li>
|
||||
<li><a href="add.html">Add</a></li>
|
||||
<li><a href="editor.html">Config</a></li>
|
||||
<li><a href="log.html">Log</a></li>
|
||||
<li><a href="network.html">Net</a></li>
|
||||
<li><a href="#" id="darkModeToggle">
|
||||
🌙
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
`;
|
||||
|
||||
document.body.innerHTML = `
|
||||
<header>
|
||||
<nav>
|
||||
<a href="index.html"><b>go2rtc</b></a>
|
||||
<a href="add.html">add</a>
|
||||
<a href="config.html">config</a>
|
||||
<a href="log.html">log</a>
|
||||
<a href="net.html">net</a>
|
||||
</nav>
|
||||
</header>
|
||||
` + document.body.innerHTML;
|
||||
|
||||
const sunIcon = '☀️';
|
||||
const moonIcon = '🌕';
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const darkModeToggle = document.getElementById('darkModeToggle');
|
||||
const prefersDarkScheme = window.matchMedia('(prefers-color-scheme: dark)');
|
||||
|
||||
const isDarkModeEnabled = () => document.body.classList.contains('dark-mode');
|
||||
|
||||
// Update the toggle button based on the dark mode state
|
||||
const updateToggleButton = () => {
|
||||
if (isDarkModeEnabled()) {
|
||||
darkModeToggle.innerHTML = sunIcon;
|
||||
darkModeToggle.setAttribute('aria-label', 'Enable light mode');
|
||||
} else {
|
||||
darkModeToggle.innerHTML = moonIcon;
|
||||
darkModeToggle.setAttribute('aria-label', 'Enable dark mode');
|
||||
}
|
||||
};
|
||||
|
||||
const updateDarkMode = () => {
|
||||
if (localStorage.getItem('darkMode') === 'enabled' || prefersDarkScheme.matches && localStorage.getItem('darkMode') !== 'disabled') {
|
||||
document.body.classList.add('dark-mode');
|
||||
} else {
|
||||
document.body.classList.remove('dark-mode');
|
||||
}
|
||||
updateEditorTheme();
|
||||
updateToggleButton();
|
||||
};
|
||||
|
||||
// Update the editor theme based on the dark mode state
|
||||
const updateEditorTheme = () => {
|
||||
if (typeof editor !== 'undefined') {
|
||||
editor.setTheme(isDarkModeEnabled() ? 'ace/theme/tomorrow_night_eighties' : 'ace/theme/github');
|
||||
}
|
||||
};
|
||||
|
||||
// Initial update for dark mode and toggle button
|
||||
updateDarkMode();
|
||||
|
||||
// Listen for changes in the system's color scheme preference
|
||||
prefersDarkScheme.addEventListener('change', updateDarkMode); // Modern approach
|
||||
|
||||
// Toggle dark mode and update local storage on button click
|
||||
darkModeToggle.addEventListener('click', () => {
|
||||
const enabled = document.body.classList.toggle('dark-mode');
|
||||
localStorage.setItem('darkMode', enabled ? 'enabled' : 'disabled');
|
||||
updateToggleButton(); // Update the button after toggling
|
||||
updateEditorTheme();
|
||||
});
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user