Add dark mode to portable.py

2024-08-14 13:38:33 +06:00
commit d89e451405
@@ -9,6 +9,7 @@ googlebot_headers = {
 html = """
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -25,19 +26,22 @@ html = """
            justify-content: center;
            align-items: center;
            height: 90vh;
+            transition: background-color 0.3s, color 0.3s;
        }
-        
+
        h1 {
            font-size: 1.5rem;
            margin-bottom: 20px;
            text-align: center;
            color: #333;
        }
+
        label {
            display: block;
            margin-bottom: 10px;
            font-weight: bold;
        }
+
        input[type=text] {
            padding: 10px;
            margin-bottom: 10px;
@@ -47,6 +51,7 @@ html = """
            font-size: 1rem;
            box-sizing: border-box;
        }
+
        input[type="submit"] {
            padding: 10px;
            background-color: #6a0dad;
@@ -59,29 +64,124 @@ html = """
            cursor: pointer;
            transition: background-color 0.3s ease;
        }
+
        input[type="submit"]:hover {
            background-color: #4e0875;
        }

+        /* Toggle switch styles */
+        .dark-mode-toggle {
+            position: absolute;
+            top: 10px;
+            right: 10px;
+        }
+
+        .dark-mode-toggle input {
+            display: none;
+        }
+
+        .dark-mode-toggle label {
+            cursor: pointer;
+            text-indent: -9999px;
+            width: 52px;
+            height: 27px;
+            background: grey;
+            display: block;
+            border-radius: 100px;
+            position: relative;
+        }
+
+        .dark-mode-toggle label:after {
+            content: '';
+            position: absolute;
+            top: 2px;
+            left: 2px;
+            width: 23px;
+            height: 23px;
+            background: #fff;
+            border-radius: 90px;
+            transition: 0.3s;
+        }
+
+        .dark-mode-toggle input:checked+label {
+            background: #6a0dad;
+        }
+
+        .dark-mode-toggle input:checked+label:after {
+            left: calc(100% - 2px);
+            transform: translateX(-100%);
+        }
+
        /* Responsive adjustments */
        @media only screen and (max-width: 600px) {
            form {
                padding: 10px;
            }
+
            h1 {
                font-size: 1.2rem;
            }
        }
+
+        /* Dark mode styles */
+        body.dark-mode {
+            background-color: #333;
+            color: #FFF;
+        }
+
+        body.dark-mode h1 {
+            color: #FFF;
+        }
+
+        body.dark-mode input[type=text] {
+            background-color: #555;
+            border: 1px solid #777;
+            color: #FFF;
+        }
+
+        body.dark-mode input[type="submit"] {
+            background-color: #9b30ff;
+        }
+
+        body.dark-mode input[type="submit"]:hover {
+            background-color: #7a1bb5;
+        }
    </style>
 </head>
+
 <body>
+    <div class="dark-mode-toggle">
+        <input type="checkbox" id="dark-mode-toggle">
+        <label for="dark-mode-toggle" title="Toggle Dark Mode"></label>
+    </div>
    <form action="/article" method="post">
        <h1>Enter Website Link</h1>
        <label for="link">Link of the website you want to remove paywall for:</label>
        <input type="text" id="link" name="link" required>
        <input type="submit" value="Submit">
    </form>
+
+    <script>
+        const toggleSwitch = document.getElementById('dark-mode-toggle');
+        const currentTheme = localStorage.getItem('theme') || (window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light");
+
+        if (currentTheme === "dark") {
+            document.body.classList.add("dark-mode");
+            toggleSwitch.checked = true;
+        }
+
+        toggleSwitch.addEventListener('change', function () {
+            if (this.checked) {
+                document.body.classList.add("dark-mode");
+                localStorage.setItem('theme', 'dark');
+            } else {
+                document.body.classList.remove("dark-mode");
+                localStorage.setItem('theme', 'light');
+            }
+        });
+    </script>
 </body>
+
 </html>
 """