addet some features

2025-03-22 02:13:26 +01:00 · 2025-03-22 02:13:26 +01:00 · 97e3262506
commit 97e3262506
parent 0861ae20c3
11 changed files with 1369 additions and 208 deletions
--- a/app/templates/base.html
+++ b/app/templates/base.html
@ -0,0 +1,97 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    {% block head %}
+    <title>Histogram Viewer</title>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/digitallytailored/classless@latest/classless.min.css">
+    <link rel="stylesheet" href="https://esm.sh/@wooorm/starry-night@3/style/both">
+    <style>
+        .card {
+            padding: 1rem;
+            border-radius: 0.5rem;
+            background-color: var(--background-color);
+            color: var(--text-color);
+            box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.1);
+            border-radius: 1rem;
+        }
+
+        .card:hover {
+            box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.2);
+        }
+
+        .card-title {
+            text-decoration: none;
+            color: var(--text-color);
+        }
+
+        .card-title:hover {
+            text-decoration: underline;
+        }
+
+        .delete-button {
+            position: relative;
+            float: right;
+            margin: 0;
+            padding: 0.25rem 0.5rem;
+            font-size: 0.8rem;
+            background-color: var(--red);
+            color: var(--text-color);
+            border: none;
+            border-radius: 0.5rem;
+            cursor: pointer;
+        }
+
+        .container {
+            display: flex;
+            flex-direction: column;
+            gap: 1rem;
+            max-width: 65%;
+            margin: 0 auto;
+        }
+    </style>
+    {% endblock %}
+    <script>
+        document.addEventListener('DOMContentLoaded', function () {
+            // Dark mode toggle button
+            const darkModeToggle = document.getElementById('darkModeToggle');
+
+            function setColorScheme(scheme) {
+                document.documentElement.setAttribute('color-scheme', scheme);
+                localStorage.setItem('color-scheme', scheme);
+            }
+
+            function getColorScheme() {
+                let scheme = localStorage.getItem('color-scheme');
+                if (scheme) {
+                    return scheme;
+                }
+                return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+            }
+
+            setColorScheme(getColorScheme());
+
+            darkModeToggle.addEventListener('click', function () {
+                const newScheme = getColorScheme() === 'dark' ? 'light' : 'dark';
+                setColorScheme(newScheme);
+            });
+
+            darkModeToggle.checked = getColorScheme() === 'dark';
+        });
+    </script>
+</head>
+
+<nav>
+    <a class="glass" href="{{ url_for('main.index') }}">Home</a>
+    <a class="glass" href="{{ url_for('main.upload_file') }}">Upload</a>
+    <button class="outline" id="darkModeToggle">Toggle Theme</button>
+</nav>
+
+<body>
+    <div class="container">
+        {% block content %}
+        {% endblock %}
+    </div>
+</body>
+
+</html>