Update html_template.html

html_template.html

@@ -6,38 +6,139 @@
     <style>
         body {
             font-family: 'Roboto', sans-serif;
-            background: linear-gradient(to bottom right, #f0f4f8, #d9e2ec);
             margin: 0;
             padding: 0;
+            transition: background 0.3s, color 0.3s;
+        }
+        /* Dark Mode (Default) */
+        body.dark-mode {
+            background: linear-gradient(to bottom right, #2C3E50, #34495E);
+            color: #ECF0F1;
+        }
+        body.dark-mode .input-section,
+        body.dark-mode .markdown-section,
+        body.dark-mode .preview-section {
+            background: #34495E;
+            box-shadow: 0 4px 6px rgba(93, 64, 55, 0.2);
+        }
+        body.dark-mode input[type="text"],
+        body.dark-mode input[type="file"] {
+            background: #3E5C76;
+            color: #ECF0F1;
+            border: 1px solid #4A6FA5;
+        }
+        body.dark-mode input[type="text"]:focus,
+        body.dark-mode input[type="file"]:focus {
+            border-color: #8D5524;
+        }
+        body.dark-mode button {
+            background: linear-gradient(to right, #2980B9, #7F8C8D);
+        }
+        body.dark-mode button:hover {
+            background: linear-gradient(to right, #7F8C8D, #2980B9);
+        }
+        body.dark-mode #downloadBtn {
+            background: linear-gradient(to right, #5D4037, #7F8C8D);
+        }
+        body.dark-mode #downloadBtn:hover {
+            background: linear-gradient(to right, #7F8C8D, #5D4037);
+        }
+        body.dark-mode textarea {
+            background: #3E5C76;
+            color: #ECF0F1;
+            border: 1px solid #4A6FA5;
+        }
+        body.dark-mode #output {
+            background: #3E5C76;
+        }
+        body.dark-mode #output h1, body.dark-mode #output h2, body.dark-mode #output h3 {
+            color: #FFFFFF;
+        }
+        body.dark-mode #output code,
+        body.dark-mode #output pre {
+            background: #2C3E50;
+        }
+        body.dark-mode .spinner {
+            border: 4px solid #34495E;
+            border-top: 4px solid #ECF0F1;
+        }
+
+        /* Light Mode */
+        body.light-mode {
+            background: linear-gradient(to bottom right, #f0f4f8, #d9e2ec);
+            color: #333;
+        }
+        body.light-mode .input-section,
+        body.light-mode .markdown-section,
+        body.light-mode .preview-section {
+            background: white;
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+        }
+        body.light-mode input[type="text"],
+        body.light-mode input[type="file"] {
+            background: white;
+            color: #333;
+            border: 1px solid #ccc;
+        }
+        body.light-mode input[type="text"]:focus,
+        body.light-mode input[type="file"]:focus {
+            border-color: #4CAF50;
+        }
+        body.light-mode button {
+            background: linear-gradient(to right, #4CAF50, #45a049);
+        }
+        body.light-mode button:hover {
+            background: linear-gradient(to right, #45a049, #4CAF50);
+        }
+        body.light-mode #downloadBtn {
+            background: linear-gradient(to right, #3498db, #2980b9);
+        }
+        body.light-mode #downloadBtn:hover {
+            background: linear-gradient(to right, #2980b9, #3498db);
+        }
+        body.light-mode textarea {
+            background: white;
+            color: #333;
+            border: 1px solid #ccc;
+        }
+        body.light-mode #output {
+            background: white;
+        }
+        body.light-mode #output h1, body.light-mode #output h2, body.light-mode #output h3 {
+            color: #333;
+        }
+        body.light-mode #output code,
+        body.light-mode #output pre {
+            background: #f4f4f4;
+        }
+        body.light-mode .spinner {
+            border: 4px solid #f3f3f3;
+            border-top: 4px solid #3498db;
         }
+
+        /* Common Styles */
         .container {
             max-width: 1200px;
             margin: 20px auto;
             padding: 20px;
+            position: relative;
         }
         .input-section, .markdown-section, .preview-section {
-            background: white;
             border-radius: 10px;
-            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
             padding: 20px;
             margin-bottom: 20px;
+            transition: background 0.3s, box-shadow 0.3s;
         }
         input[type="text"], input[type="file"] {
             width: 100%;
             padding: 10px;
             margin: 10px 0;
-            border: 1px solid #ccc;
             border-radius: 5px;
             box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
             transition: border-color 0.3s;
         }
-        input[type="text"]:focus, input[type="file"]:focus {
-            border-color: #4CAF50;
-            outline: none;
-        }
         button {
             padding: 10px 20px;
-            background: linear-gradient(to right, #4CAF50, #45a049);
             color: white;
             border: none;
             border-radius: 5px;
@@ -45,22 +146,11 @@
             margin: 5px;
             transition: background 0.3s, transform 0.1s;
         }
-        button:hover {
-            background: linear-gradient(to right, #45a049, #4CAF50);
-        }
         button:active {
             transform: scale(0.98);
         }
-        #downloadBtn {
-            background: linear-gradient(to right, #3498db, #2980b9);
-        }
-        #downloadBtn:hover {
-            background: linear-gradient(to right, #2980b9, #3498db);
-        }
         .spinner {
             display: none;
-            border: 4px solid #f3f3f3;
-            border-top: 4px solid #3498db;
             border-radius: 50%;
             width: 30px;
             height: 30px;
@@ -85,28 +175,25 @@
             height: 400px;
             margin-top: 10px;
             padding: 10px;
-            border: 1px solid #ccc;
             border-radius: 5px;
             box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
             font-family: monospace;
             resize: vertical;
+            transition: background 0.3s, color 0.3s, border 0.3s;
         }
         #output {
             margin-top: 10px;
             padding: 10px;
             max-height: 600px;
             overflow-y: auto;
-        }
-        #output h1, #output h2, #output h3 {
-            color: #333;
+            border-radius: 5px;
+            transition: background 0.3s;
         }
         #output code {
-            background: #f4f4f4;
             padding: 2px 4px;
             border-radius: 3px;
         }
         #output pre {
-            background: #f4f4f4;
             padding: 10px;
             border-radius: 5px;
             overflow-x: auto;
@@ -118,10 +205,69 @@
             from { opacity: 0; }
             to { opacity: 1; }
         }
+
+        /* Toggle Switch */
+        .mode-toggle {
+            position: absolute;
+            top: 20px;
+            right: 20px;
+            display: flex;
+            align-items: center;
+        }
+        .mode-toggle label {
+            margin-left: 10px;
+            font-size: 14px;
+        }
+        .switch {
+            position: relative;
+            display: inline-block;
+            width: 50px;
+            height: 24px;
+        }
+        .switch input {
+            opacity: 0;
+            width: 0;
+            height: 0;
+        }
+        .slider {
+            position: absolute;
+            cursor: pointer;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: #7F8C8D;
+            transition: 0.3s;
+            border-radius: 24px;
+        }
+        .slider:before {
+            position: absolute;
+            content: "";
+            height: 18px;
+            width: 18px;
+            left: 3px;
+            bottom: 3px;
+            background: #ECF0F1;
+            transition: 0.3s;
+            border-radius: 50%;
+        }
+        input:checked + .slider {
+            background: #4CAF50;
+        }
+        input:checked + .slider:before {
+            transform: translateX(26px);
+        }
     </style>
 </head>
-<body>
+<body class="dark-mode">
     <div class="container">
+        <div class="mode-toggle">
+            <label class="switch">
+                <input type="checkbox" id="modeToggle" onchange="toggleMode()">
+                <span class="slider"></span>
+            </label>
+            <label for="modeToggle">Light Mode</label>
+        </div>
         <div class="input-section">
             <h1>Repository & Files to Markdown Converter</h1>
             <p>Enter a GitHub/Hugging Face Space URL (e.g., https://huggingface.co/spaces/username/space)</p>
@@ -149,6 +295,13 @@
         let currentMarkdown = '';
         let currentFilename = '';
 
+        function toggleMode() {
+            const body = document.body;
+            const toggle = document.getElementById('modeToggle');
+            body.classList.toggle('dark-mode', !toggle.checked);
+            body.classList.toggle('light-mode', toggle.checked);
+        }
+
         async function processRepo() {
             const repoUrl = document.getElementById('repoUrl').value;
             await processContent('/process', { repo_url: repoUrl });