Merge pull request #6 from Dot-ser/main

Basic Changes

Author: IRON-M4N

README.md

@@ -19,7 +19,7 @@ npm install
 [![Heroku](https://img.shields.io/badge/Heroku-000000?style=for-the-badge&logo=heroku&logoColor=white)](https://heroku.com/deploy?template=https://github.com/IRON-M4N/MegaCDN)
 
 #### Deploy on Vercel
-1. *[Create Verce Account](https://vercel.com/signup) If You Don't Have.*
+1. *[Create Vercel Account](https://vercel.com/signup) If You Don't Have.*
 2. *Deploy on Vercel.* <br>
 [![Vercel](https://img.shields.io/badge/Vercel-000000?style=for-the-badge&logo=vercel&logoColor=white)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2FIRON-M4N%2FMegaCDN&env=MEGA_ACCOUNT,PORT&envDescription=provide%20multiple%20accounts%20in%20this%20format%20email%3Apass%3Bemail%3Apass%0Afor%20port%20use%203000%20or%20any)
 

public/index.html

@@ -4,6 +4,11 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>MegaCDN.mg</title>
+    <meta name="description" content="A lightweight and serverless CDN utilizing MEGA for file storage and delivery.">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="keywords" content="math, quiz, game, difficulty, levels, learning">
+    <meta name="author" content="IRON-M4N">
+    <link rel="icon" type="image/jpeg" href="https://cdn.ironman.my.id/i/6506j4.jpeg">
     <link rel="stylesheet" href="styles.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
 </head>
@@ -12,7 +17,7 @@
     <div id="particles-js"></div> 
     <header>
         <div class="logo">
-            <i class="fa fa-cloud"></i> megaCDN.<span class="red-dot">mg</span>
+            <i class="fa fa-cloud"></i> mega<span class="red-dot">CDN</span>
         </div>
         <div class="header-buttons">
             <a href="https://github.com/IRON-M4N/MegaCDN/" target="_blank" class="github-btn">

public/styles.css

@@ -25,8 +25,6 @@ header {
     justify-content: space-between;
     align-items: center;
     padding: 15px 20px;
-    background: #1e1e1e;
-    box-shadow: 0 2px 5px rgba(255, 255, 255, 0.1);
 }
 
 .logo {
@@ -44,10 +42,15 @@ header {
     flex: 1;
 }
 .awesome-container {
+    width: 80%; 
+    max-width: 1200px; 
+    margin: 0 auto; 
+    padding: 20px;
     display: flex;
-    justify-content: center;
-    align-items: center;
-    margin-top: 20px;
+    flex-direction: column; 
+    align-items: center; 
+    justify-content: center; 
+    min-height: 50vh; 
 }
 .upload-box {
     background: rgba(255, 255, 255, 0.1);
@@ -154,3 +157,25 @@ footer {
     box-shadow: 0 3px 8px rgba(255,255,255,0.1);
 }
 
+/* Mobile Optimization */
+@media (max-width: 768px) {
+    .middle-container {
+        width: 95%; 
+        padding: 15px;
+        min-height: auto; 
+    }
+
+    .upload-box{
+        width:70%;
+        margin-left: auto;
+        margin-right: auto;
+    }
+}
+
+@media (max-width: 480px) {
+    .middle-container {
+        width: 100%;
+        padding: 10px;
+        text-align: center; /* Center text for better readability */
+    }
+}