Update index.html

index.html

@@ -7,10 +7,10 @@
     <script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.7/MathJax.js?config=TeX-AMS_HTML"></script>
     <style>
         body {
-            font-family: Arial, sans-serif;
+            font-family: 'Arial', sans-serif;
             margin: 0;
             padding: 0;
-            background-color: #121212; /* Dark background */
+            background-color: rgba(18, 18, 18, 0.9); /* Dark background with slight transparency */
             color: #e0e0e0; /* Light text color */
             display: flex;
             flex-direction: column;
@@ -19,67 +19,128 @@
             height: 100vh;
             transition: background-color 0.3s;
         }
+
+        .background {
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: linear-gradient(45deg, rgba(26, 1, 117, 0.5), rgba(225, 5, 34, 0.5)), 
+                        linear-gradient(135deg, rgba(225, 5, 152, 0.5), rgba(49, 5, 209, 0.5)),
+                        rgba(255, 255, 255, 0.1);
+            backdrop-filter: blur(15px); /* Glassmorphism effect */
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+
+        .glass-panel {
+            background-color: rgba(255, 255, 255, 0.1);
+            border-radius: 15px;
+            padding: 32px;
+            box-shadow: 8px 8px 20px rgba(0, 0, 0, 0.2), 
+                        -8px -8px 20px rgba(255, 255, 255, 0.2);
+            border: 1px solid rgba(255, 255, 255, 0.2);
+            transition: transform 0.3s;
+        }
+
+        .glass-panel:hover {
+            transform: translateY(-5px); /* Neumorphism hover effect */
+        }
+
         h1 {
             margin-bottom: 20px;
         }
+
         label {
             margin-top: 10px;
+            opacity: 0.8;
+            font-size: 0.9rem;
+            font-weight: bold;
+            text-transform: uppercase;
+            display: block;
         }
+
         input[type="number"] {
             padding: 10px;
             margin: 10px 0;
             border: none;
             border-radius: 5px;
-            background-color: #1f1f1f; /* Darker input background */
+            background-color: rgba(31, 31, 31, 0.9); /* Darker input background */
             color: #e0e0e0; /* Input text color */
-            width: 200px;
-            transition: background-color 0.3s;
+            width: 100%;
+            transition: background-color 0.3s, border-color 0.3s;
+            box-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.5), 
+                        inset -5px -5px 10px rgba(255, 255, 255, 0.1);
         }
+
         input[type="number"]:focus {
-            background-color: #272727; /* Input focus color */
+            background-color: rgba(39, 39, 39, 0.9); /* Input focus color */
             outline: none;
         }
+
         button {
             padding: 10px 20px;
             border: none;
             border-radius: 5px;
-            background-color: #6200ea; /* Button color */
+            background-color: rgba(98, 0, 234, 0.9); /* Button color */
             color: white;
             cursor: pointer;
-            transition: background-color 0.3s;
+            transition: background-color 0.3s, transform 0.3s;
+            box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5), 
+                        -5px -5px 10px rgba(255, 255, 255, 0.1);
         }
+
         button:hover {
-            background-color: #3700b3; /* Button hover color */
+            background-color: rgba(55, 0, 179, 0.9); /* Button hover color */
+            transform: translateY(-2px); /* Button hover effect */
         }
+
         .output {
             margin-top: 20px;
             padding: 15px;
             border: 1px solid #444; /* Output border */
             border-radius: 4px;
-            background-color: #1f1f1f; /* Output background */
-            width: 300px; /* Set width for output */
+            background-color: rgba(31, 31, 31, 0.9); /* Output background */
+            width: 100%; /* Responsive output */
             text-align: center;
         }
+
         .latex {
             margin-top: 10px;
             color: #90caf9; /* LaTeX output color */
         }
+
+        @media (max-width: 600px) {
+            .glass-panel {
+                padding: 20px;
+            }
+
+            input[type="number"], button {
+                width: calc(100% - 20px); /* Full width inputs */
+            }
+        }
     </style>
 </head>
 <body>
 
-    <h1>Time Calculation for Dataset Training</h1>
-    <label for="dataset_size">Dataset Size (kB):</label>
-    <input type="number" id="dataset_size" value="67.4" step="0.1"><br>
-    
-    <label for="epochs">Number of Epochs:</label>
-    <input type="number" id="epochs" value="1"><br>
-    
-    <button id="calculate_btn">Calculate</button>
-
-    <div class="output">
-        <h3 id="result_text"></h3>
-        <div id="result_latex" class="latex"></div>
+    <div class="background">
+        <div class="glass-panel">
+            <h1>Time Calculation for Dataset Training</h1>
+            <label for="dataset_size">Dataset Size (kB):</label>
+            <input type="number" id="dataset_size" value="67.4" step="0.1"><br>
+            
+            <label for="epochs">Number of Epochs:</label>
+            <input type="number" id="epochs" value="1"><br>
+            
+            <button id="calculate_btn">Calculate</button>
+
+            <div class="output">
+                <h3 id="result_text"></h3>
+                <div id="result_latex" class="latex"></div>
+            </div>
+        </div>
     </div>
 
     <script>