Update html_template.html

html_template.html

@@ -12,55 +12,61 @@
         }
         /* Dark Mode (Default) */
         body.dark-mode {
-            background: linear-gradient(to bottom right, #2C3E50, #34495E);
-            color: #ECF0F1;
+            background: linear-gradient(to bottom right, #1A252F, #2C3E50);
+            color: #E0E6ED;
         }
         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);
+            background: #2F4054;
+            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
         }
         body.dark-mode input[type="text"],
         body.dark-mode input[type="file"] {
-            background: #3E5C76;
-            color: #ECF0F1;
+            background: #3A5063;
+            color: #FFFFFF;
             border: 1px solid #4A6FA5;
         }
         body.dark-mode input[type="text"]:focus,
         body.dark-mode input[type="file"]:focus {
-            border-color: #8D5524;
+            border-color: #A66F3A;
         }
         body.dark-mode button {
-            background: linear-gradient(to right, #2980B9, #7F8C8D);
+            background: linear-gradient(to right, #3498DB, #2C7DB2);
+            box-shadow: inset 0 0 5px rgba(52, 152, 219, 0.3);
         }
         body.dark-mode button:hover {
-            background: linear-gradient(to right, #7F8C8D, #2980B9);
+            background: linear-gradient(to right, #2C7DB2, #3498DB);
+            box-shadow: inset 0 0 8px rgba(52, 152, 219, 0.5);
         }
         body.dark-mode #downloadBtn {
-            background: linear-gradient(to right, #5D4037, #7F8C8D);
+            background: linear-gradient(to right, #8B5A2B, #7F4D1A);
+            box-shadow: inset 0 0 5px rgba(139, 90, 43, 0.3);
         }
         body.dark-mode #downloadBtn:hover {
-            background: linear-gradient(to right, #7F8C8D, #5D4037);
+            background: linear-gradient(to right, #7F4D1A, #8B5A2B);
+            box-shadow: inset 0 0 8px rgba(139, 90, 43, 0.5);
         }
         body.dark-mode textarea {
-            background: #3E5C76;
-            color: #ECF0F1;
+            background: #3A5063;
+            color: #FFFFFF;
             border: 1px solid #4A6FA5;
         }
         body.dark-mode #output {
-            background: #3E5C76;
+            background: #3A5063;
         }
         body.dark-mode #output h1, body.dark-mode #output h2, body.dark-mode #output h3 {
             color: #FFFFFF;
+            font-weight: 500;
+            letter-spacing: 0.5px;
         }
         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;
+            border: 4px solid #2F4054;
+            border-top: 4px solid #E0E6ED;
         }
 
         /* Light Mode */
@@ -144,10 +150,11 @@
             border-radius: 5px;
             cursor: pointer;
             margin: 5px;
-            transition: background 0.3s, transform 0.1s;
+            transition: background 0.3s, transform 0.1s, box-shadow 0.3s;
         }
         button:active {
-            transform: scale(0.98);
+            transform: scale(0.97) translateY(2px);
+            box-shadow: none;
         }
         .spinner {
             display: none;
@@ -172,7 +179,7 @@
         }
         textarea {
             width: 100%;
-            height: 1000px !important;
+            height: 400px;
             margin-top: 10px;
             padding: 10px;
             border-radius: 5px;
@@ -187,7 +194,8 @@
             max-height: 600px;
             overflow-y: auto;
             border-radius: 5px;
-            transition: background 0.3s;
+            border: 1px solid #4A6FA5;
+            transition: background 0.3s, border 0.3s;
         }
         #output code {
             padding: 2px 4px;
@@ -202,8 +210,8 @@
             animation: fadeIn 0.5s ease-in;
         }
         @keyframes fadeIn {
-            from { opacity: 0; }
-            to { opacity: 1; }
+            from { opacity: 0; transform: scale(0.98); }
+            to { opacity: 1; transform: scale(1.02); }
         }
 
         /* Toggle Switch */
@@ -217,6 +225,7 @@
         .mode-toggle label {
             margin-left: 10px;
             font-size: 14px;
+            color: #E0E6ED;
         }
         .switch {
             position: relative;
@@ -257,6 +266,24 @@
         input:checked + .slider:before {
             transform: translateX(26px);
         }
+
+        /* Copy Button */
+        .copy-button {
+            padding: 8px 16px;
+            background: #3498DB;
+            color: white;
+            border: none;
+            border-radius: 5px;
+            cursor: pointer;
+            margin-left: 10px;
+            transition: background 0.3s, transform 0.1s;
+        }
+        .copy-button:hover {
+            background: #2C7DB2;
+        }
+        .copy-button:active {
+            transform: scale(0.97) translateY(2px);
+        }
     </style>
 </head>
 <body class="dark-mode">
@@ -282,7 +309,7 @@
         </div>
         <div class="output-container">
             <div class="markdown-section">
-                <h2>Markdown Output:</h2>
+                <h2>Markdown Output: <button class="copy-button" onclick="copyToClipboard()">Copy</button></h2>
                 <textarea id="markdownOutput" readonly></textarea>
             </div>
             <div class="preview-section">
@@ -390,6 +417,16 @@
                 alert('Error downloading file: ' + error.message);
             }
         }
+
+        async function copyToClipboard() {
+            const markdownOutput = document.getElementById('markdownOutput');
+            try {
+                await navigator.clipboard.writeText(markdownOutput.value);
+                alert('Markdown copied to clipboard!');
+            } catch (err) {
+                alert('Failed to copy to clipboard: ' + err.message);
+            }
+        }
     </script>
 </body>
 </html>