c736387125
Credit goes to mike8643! https: //github.com/mike8643 Co-Authored-By: mike8643 <98910897+mike8643@users.noreply.github.com>
104 lines
4.0 KiB
HTML
104 lines
4.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" id="htmlElement">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="initial-scale=1, width=device-width">
|
|
<link href="/static/favicon.ico" rel="icon">
|
|
<!-- http://getbootstrap.com/docs/5.3/ -->
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>
|
|
<style>
|
|
.navbar-brand {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.navbar-brand img {
|
|
width: 80px;
|
|
height: 80px;
|
|
}
|
|
</style>
|
|
<!-- UIkit CSS -->
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uikit@3.9.2/dist/css/uikit.min.css" />
|
|
|
|
<!-- UIkit JS -->
|
|
<script src="https://cdn.jsdelivr.net/npm/uikit@3.9.2/dist/js/uikit.min.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/uikit@3.9.2/dist/js/uikit-icons.min.js"></script>
|
|
|
|
<style>
|
|
/* Dark mode styles */
|
|
#htmlElement.dark-mode,
|
|
#htmlElement.dark-mode input,
|
|
#htmlElement.dark-mode select,
|
|
#htmlElement.dark-mode body,
|
|
#htmlElement.dark-mode h1 {
|
|
background-color: #121212; /* Dark background color */
|
|
color: #ffffff; /* Light text color */
|
|
}
|
|
.nav-link {
|
|
display: inline-block;
|
|
padding: 0 15px;
|
|
text-align: center;
|
|
}
|
|
</style>
|
|
<title>FrogPilot: {% block title %}{% endblock %}</title>
|
|
</head>
|
|
<body>
|
|
<nav class="navbar navbar-fixed-top navbar-expand-sm navbar-dark bg-dark">
|
|
<div class="container">
|
|
<a href="/" class="navbar-brand mb-0 h1">
|
|
<img class="d-inline-block align-top mr-2" src="/static/frog.png" /> FrogPilot </a>
|
|
<button type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" class="navbar-toggler" aria-controls="navbarNav" aria-expanded="false" arial-label="Toggle navigation">
|
|
<span class="navbar-toggler-icon"></span>
|
|
</button>
|
|
<div class="collapse navbar-collapse ml-auto" id="navbarNav">
|
|
<ul class="navbar-nav">
|
|
<li class="nav-item active">
|
|
<a href="/footage" class="nav-link">Dashcam Routes</a>
|
|
</li>
|
|
<li class="nav-item active">
|
|
<a href="/screenrecords" class="nav-link">Screen Recordings</a>
|
|
</li>
|
|
<li class="nav-item active">
|
|
<a href="/error_logs" class="nav-link">Error Logs</a>
|
|
</li>
|
|
<li class="nav-item active">
|
|
<a href="/addr_input" class="nav-link">Navigation</a>
|
|
</li>
|
|
<li class="nav-item active">
|
|
<a href="/tools" class="nav-link">Tools</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
<main class="container-fluid p-7 text-center"> {% block main %}{% endblock %} </main>
|
|
{% block unformated %}{% endblock %}
|
|
|
|
<button class="uk-button uk-button-default uk-margin-small-right" onclick="toggleDarkMode()">Toggle Dark Mode</button>
|
|
|
|
<script>
|
|
function setCookie(name, value, days) {
|
|
const date = new Date();
|
|
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
|
|
document.cookie = `${name}=${value};expires=${date.toUTCString()};path=/`;
|
|
}
|
|
function getCookie(name) {
|
|
return document.cookie.split('; ')
|
|
.find(row => row.startsWith(name))
|
|
?.split('=')[1] || null;
|
|
}
|
|
function toggleDarkMode() {
|
|
console.log('Toggle Dark Mode function called');
|
|
const htmlElement = document.documentElement;
|
|
htmlElement.classList.toggle('dark-mode');
|
|
setCookie('darkMode', htmlElement.classList.contains('dark-mode'), 365);
|
|
}
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
const htmlElement = document.documentElement;
|
|
htmlElement.classList.toggle('dark-mode', getCookie('darkMode') === 'true');
|
|
});
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|