Update index.html

Author: andy64lol

index.html

@@ -6,60 +6,104 @@
   <title>ScriptJSON Downloads</title>
   <style>
     body {
-      font-family: Arial, sans-serif;
+      font-family: 'Arial', sans-serif;
       margin: 0;
-      background-color: #f5f5f5;
+      background-color: #f0f4f8;
       color: #333;
       line-height: 1.6;
     }
+
     header {
       background-color: #007BFF;
       color: #fff;
-      padding: 20px;
+      padding: 30px 20px;
       text-align: center;
+      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    }
+    header h1 {
+      margin: 0;
+      font-size: 2.5rem;
+      letter-spacing: 2px;
     }
+
     main {
-      max-width: 900px;
+      max-width: 1000px;
       margin: 20px auto;
       padding: 0 20px;
     }
+
     section {
       margin-bottom: 40px;
       background: #fff;
-      padding: 20px;
-      border-radius: 8px;
-      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+      padding: 30px;
+      border-radius: 10px;
+      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+      transition: all 0.3s ease-in-out;
     }
+
+    section:hover {
+      transform: translateY(-10px);
+      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
+    }
+
     h2 {
       margin-top: 0;
       border-bottom: 2px solid #007BFF;
       padding-bottom: 10px;
+      font-size: 1.5rem;
+      color: #007BFF;
     }
+
+    p {
+      margin: 10px 0;
+      font-size: 1rem;
+    }
+
     .buttons {
       display: flex;
       flex-wrap: wrap;
-      gap: 10px;
+      gap: 20px;
       margin-top: 20px;
+      justify-content: center;
     }
+
     .button {
-      flex: 1 1 200px;
-      max-width: 250px;
-      padding: 10px 20px;
+      flex: 1 1 220px;
+      max-width: 260px;
+      padding: 12px 25px;
       background-color: #007BFF;
       color: #fff;
       text-align: center;
       text-decoration: none;
-      border-radius: 5px;
-      transition: background-color 0.3s;
+      border-radius: 8px;
+      font-size: 1rem;
+      font-weight: 500;
+      transition: background-color 0.3s, transform 0.2s;
+      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
     }
+
     .button:hover {
       background-color: #0056b3;
+      transform: translateY(-3px);
+      box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
     }
+
     footer {
       text-align: center;
-      padding: 10px 20px;
+      padding: 15px 20px;
       background-color: #007BFF;
       color: #fff;
+      font-size: 0.9rem;
+    }
+
+    footer a {
+      color: #fff;
+      text-decoration: none;
+      font-weight: bold;
+    }
+
+    footer a:hover {
+      text-decoration: underline;
     }
   </style>
 </head>
@@ -68,7 +112,6 @@
     <h1>ScriptJSON Downloads</h1>
   </header>
   <main>
-
     <section id="json-files">
       <h2>Download JSON Files</h2>
       <p>Click the buttons below to download the JSON files:</p>
@@ -115,7 +158,16 @@ <h2>Download JavaScript Files</h2>
 
   </main>
   <footer>
-    &copy; 2025 ScriptJSON by 4ndy64 (https://github.com/andy64lol/ScriptJSON.github.io)
+    &copy; 2025 ScriptJSON by 4ndy64 | <a href="https://github.com/andy64lol/ScriptJSON.github.io" target="_blank">GitHub Repository</a>
   </footer>
+
+  <script>
+    document.querySelectorAll('.button').forEach(button => {
+      button.addEventListener('click', (event) => {
+        event.preventDefault();
+        window.location.href = button.getAttribute('href');
+      });
+    });
+  </script>
 </body>
 </html>