Update index.js

index.js

@@ -42,6 +42,7 @@ app.get("/", async (req, res) => {
 <html>
 <head>
 <meta charset="UTF-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>IQC Canvas Premium</title>
 
 <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;800&display=swap" rel="stylesheet">
@@ -61,49 +62,55 @@ body {
   justify-content: center;
   align-items: center;
   color: white;
+  padding: 20px;
 }
 
+/* ================= RESPONSIVE CONTAINER ================= */
 .container {
-  width: 95%;
-  max-width: 600px;
-  padding: 40px;
-  border-radius: 25px;
+  width: 100%;
+  max-width: 650px;
+  padding: clamp(20px, 5vw, 40px);
+  border-radius: clamp(15px, 3vw, 25px);
   backdrop-filter: blur(25px);
   background: rgba(255,255,255,0.05);
   box-shadow: 0 0 60px rgba(0,0,0,0.6);
   text-align: center;
+  transition: 0.3s ease;
 }
 
+/* ================= RESPONSIVE TITLE ================= */
 h1 {
-  font-size: 28px;
+  font-size: clamp(20px, 5vw, 28px);
   font-weight: 800;
-  margin-bottom: 30px;
+  margin-bottom: clamp(20px, 4vw, 30px);
   background: linear-gradient(90deg,#00f5ff,#7b2ff7);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
 }
 
+/* ================= INPUT ================= */
 input {
   width: 100%;
-  padding: 14px;
-  margin: 12px 0;
-  border-radius: 15px;
+  padding: clamp(10px, 3vw, 14px);
+  margin: 10px 0;
+  border-radius: clamp(10px, 3vw, 15px);
   border: none;
   outline: none;
   background: rgba(255,255,255,0.1);
   color: white;
-  font-size: 14px;
+  font-size: clamp(13px, 3.5vw, 14px);
 }
 
+/* ================= BUTTON ================= */
 button {
   width: 100%;
-  padding: 14px;
+  padding: clamp(10px, 3vw, 14px);
   margin-top: 15px;
-  border-radius: 15px;
+  border-radius: clamp(10px, 3vw, 15px);
   border: none;
   cursor: pointer;
   font-weight: 600;
-  font-size: 15px;
+  font-size: clamp(14px, 3.5vw, 15px);
   background: linear-gradient(90deg,#00f5ff,#7b2ff7);
   color: white;
   transition: 0.3s;
@@ -114,22 +121,43 @@ button:hover {
   box-shadow: 0 0 25px #7b2ff7;
 }
 
+/* ================= PREVIEW ================= */
 .preview {
-  margin-top: 30px;
+  margin-top: clamp(20px, 4vw, 30px);
   display: none;
 }
 
 .preview img {
-  max-width: 100%;
-  border-radius: 20px;
+  width: 100%;
+  max-width: 350px;
+  height: auto;
+  border-radius: clamp(15px, 3vw, 20px);
   box-shadow: 0 0 40px rgba(0,0,0,0.6);
+  transition: 0.3s;
 }
 
+/* ================= FOOTER ================= */
 .footer {
-  margin-top: 25px;
-  font-size: 12px;
+  margin-top: clamp(15px, 4vw, 25px);
+  font-size: clamp(11px, 3vw, 12px);
   opacity: 0.6;
 }
+
+/* ================= EXTRA BREAKPOINTS ================= */
+
+/* Tablet */
+@media (min-width: 768px) {
+  .container {
+    max-width: 550px;
+  }
+}
+
+/* Desktop */
+@media (min-width: 1200px) {
+  .container {
+    max-width: 650px;
+  }
+}
 </style>
 </head>