Update html_template.html

html_template.html

@@ -10,118 +10,143 @@
             padding: 0;
             transition: background 0.3s, color 0.3s;
         }
+        
         /* Dark Mode (Default) */
         body.dark-mode {
             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: #021021;
+            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: #3A5063;
             color: #FFFFFF;
             border: 1px solid #4A6FA5;
         }
+        
         body.dark-mode input[type="text"]:focus,
         body.dark-mode input[type="file"]:focus {
             border-color: #A66F3A;
         }
+        
         body.dark-mode button {
             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, #2C7DB2, #3498DB);
             box-shadow: inset 0 0 8px rgba(52, 152, 219, 0.5);
         }
+        
         body.dark-mode #downloadBtn {
             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, #7F4D1A, #8B5A2B);
             box-shadow: inset 0 0 8px rgba(139, 90, 43, 0.5);
         }
+        
         body.dark-mode textarea {
             background: #3A5063;
             color: #FFFFFF;
             border: 1px solid #4A6FA5;
         }
+        
         body.dark-mode #output {
             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 #2F4054;
             border-top: 4px solid #E0E6ED;
         }
-
+        
         /* 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;
@@ -129,20 +154,23 @@
             padding: 20px;
             position: relative;
         }
+        
         .input-section, .markdown-section, .preview-section {
             border-radius: 10px;
             padding: 20px;
             margin-bottom: 20px;
             transition: background 0.3s, box-shadow 0.3s;
         }
+        
         input[type="text"], input[type="file"] {
-            width: 95%;
+            width: 100%;
             padding: 10px;
-            margin: 10px;
+            margin: 10px 0;
             border-radius: 5px;
             box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
             transition: border-color 0.3s;
         }
+        
         button {
             padding: 10px 20px;
             color: white;
@@ -152,10 +180,12 @@
             margin: 5px;
             transition: background 0.3s, transform 0.1s, box-shadow 0.3s;
         }
+        
         button:active {
             transform: scale(0.97) translateY(2px);
             box-shadow: none;
         }
+        
         .spinner {
             display: none;
             border-radius: 50%;
@@ -164,22 +194,26 @@
             animation: spin 1s linear infinite;
             margin: 20px auto;
         }
+        
         @keyframes spin {
             0% { transform: rotate(0deg); }
             100% { transform: rotate(360deg); }
         }
+        
         .output-container {
             display: flex;
             flex-wrap: wrap;
             gap: 20px;
         }
+        
         .markdown-section, .preview-section {
             flex: 1;
             min-width: 300px;
         }
+        
         textarea {
-            width: 95%;
-            height: 400px;
+            width: 100%;
+            height: 400px; /* This will be dynamically adjusted by JavaScript */
             margin-top: 10px;
             padding: 10px;
             border-radius: 5px;
@@ -188,6 +222,7 @@
             resize: vertical;
             transition: background 0.3s, color 0.3s, border 0.3s;
         }
+        
         #output {
             margin-top: 10px;
             padding: 10px;
@@ -197,23 +232,27 @@
             border: 1px solid #4A6FA5;
             transition: background 0.3s, border 0.3s;
         }
+        
         #output code {
             padding: 2px 4px;
             border-radius: 3px;
         }
+        
         #output pre {
             padding: 10px;
             border-radius: 5px;
             overflow-x: auto;
         }
+        
         .fade-in {
             animation: fadeIn 0.5s ease-in;
         }
+        
         @keyframes fadeIn {
             from { opacity: 0; transform: scale(0.98); }
             to { opacity: 1; transform: scale(1.02); }
         }
-
+        
         /* Toggle Switch */
         .mode-toggle {
             position: absolute;
@@ -222,22 +261,26 @@
             display: flex;
             align-items: center;
         }
+        
         .mode-toggle label {
             margin-left: 10px;
             font-size: 14px;
             color: #E0E6ED;
         }
+        
         .switch {
             position: relative;
             display: inline-block;
             width: 50px;
             height: 24px;
         }
+        
         .switch input {
             opacity: 0;
             width: 0;
             height: 0;
         }
+        
         .slider {
             position: absolute;
             cursor: pointer;
@@ -249,6 +292,7 @@
             transition: 0.3s;
             border-radius: 24px;
         }
+        
         .slider:before {
             position: absolute;
             content: "";
@@ -260,13 +304,15 @@
             transition: 0.3s;
             border-radius: 50%;
         }
+        
         input:checked + .slider {
             background: #4CAF50;
         }
+        
         input:checked + .slider:before {
             transform: translateX(26px);
         }
-
+        
         /* Copy Button */
         .copy-button {
             padding: 8px 16px;
@@ -278,9 +324,11 @@
             margin-left: 10px;
             transition: background 0.3s, transform 0.1s;
         }
+        
         .copy-button:hover {
             background: #2C7DB2;
         }
+        
         .copy-button:active {
             transform: scale(0.97) translateY(2px);
         }