From 089d47379e77ccf87330a16346ffefef645652e2 Mon Sep 17 00:00:00 2001
From: Romelianism <Romelianism@gmail.com>
Date: Sun, 15 Dec 2024 17:38:48 +0800
Subject: [PATCH] improve responsiveness

---
 index.html | 297 ++++++++++++++++++++++++-----------------------------
 1 file changed, 132 insertions(+), 165 deletions(-)
diff --git a/index.html b/index.html
index 60eb604..2901e51 100644
--- a/index.html
+++ b/index.html
@@ -1,194 +1,161 @@
 <!DOCTYPE html>
 <html lang="en">
-
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
     <title>JavaScript Playground</title>
     <style>
-        :root {
-            --primary-color: #007BFF;
-            --hover-color: #0056b3;
-            --success-color: #28a745;
-            --background-color: #f7f7f7;
-            --container-bg: #fff;
-            --border-color: #ddd;
-            --text-color: #333;
-            --input-bg: #f4f4f4;
-            --font-family: 'Arial', sans-serif;
-            --font-size-base: 16px;
-            --font-size-heading: 2.5rem;
-        }
-
-        body {
-            font-family: var(--font-family);
-            background-color: var(--background-color);
-            margin: 0;
-            padding: 0;
-            display: flex;
-            flex-direction: column;
-            justify-content: center;
-            align-items: center;
-            height: 100vh;
-            box-sizing: border-box;
-            color: var(--text-color);
-        }
-
-        header {
-            text-align: center;
-            padding: 20px;
-            width: 100%;
-        }
-
-        h1 {
-            color: var(--text-color);
-            font-size: clamp(1.5rem, 5vw, var(--font-size-heading));
-            margin: 0;
-        }
-
+      :root {
+        --primary-color: #007bff;
+        --hover-color: #0056b3;
+        --success-color: #28a745;
+        --background-color: #f7f7f7;
+        --container-bg: #fff;
+        --border-color: #ddd;
+        --text-color: #333;
+        --input-bg: #f4f4f4;
+        --font-family: "Arial", sans-serif;
+      }
+
+      body {
+        font-family: var(--font-family);
+        background-color: var(--background-color);
+        margin: 0;
+        padding: 0;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        align-items: center;
+        height: 100vh;
+        box-sizing: border-box;
+      }
+
+      header {
+        text-align: center;
+        padding: 10px;
+        width: 100%;
+      }
+
+      h1 {
+        color: var(--text-color);
+        font-size: clamp(1.5rem, 5vw, 2.5rem);
+        margin: 0;
+      }
+
+      .container {
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        align-items: stretch;
+        max-width: 900px;
+        margin: 0 auto;
+        padding: 15px;
+        background-color: var(--container-bg);
+        border-radius: 8px;
+        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+        width: 100%;
+        height: 100%; /* Ensures the container takes the full height */
+        box-sizing: border-box;
+      }
+
+      textarea {
+        width: 100%;
+        height: 100px; /* Make textarea smaller initially */
+        font-family: monospace;
+        font-size: 16px;
+        padding: 10px;
+        border: 1px solid var(--border-color);
+        border-radius: 4px;
+        background-color: var(--input-bg);
+        margin-bottom: 10px;
+        resize: vertical; /* Allow vertical resizing */
+        box-sizing: border-box;
+        flex-grow: 1; /* Make it take available space */
+      }
+
+      button {
+        width: 100%;
+        padding: 10px;
+        background-color: var(--primary-color);
+        color: white;
+        font-size: 16px;
+        border: none;
+        border-radius: 4px;
+        cursor: pointer;
+        box-sizing: border-box;
+        transition: background-color 0.3s ease;
+      }
+
+      button:hover {
+        background-color: var(--hover-color);
+      }
+
+      .output {
+        margin-top: 10px;
+        padding: 15px;
+        background-color: var(--container-bg);
+        border: 1px solid var(--border-color);
+        border-radius: 4px;
+        min-height: 80px; /* Increased minimum height for better visibility */
+        font-family: monospace;
+        font-size: 14px;
+        white-space: pre-wrap;
+        color: var(--text-color);
+        overflow-y: auto;
+        max-height: 200px; /* Increased max height for larger output */
+        box-sizing: border-box;
+      }
+
+      .copy-btn {
+        margin-top: 10px;
+        background-color: var(--success-color);
+        width: auto;
+        padding: 8px 16px; /* Reduced padding for better sizing */
+        font-size: 14px; /* Smaller font size */
+        cursor: pointer;
+      }
+
+      @media (max-width: 768px) {
         .container {
-            max-width: 900px;
-            margin: 30px auto;
-            padding: 20px;
-            background-color: var(--container-bg);
-            border-radius: 8px;
-            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-            width: 100%;
-            box-sizing: border-box;
-            transition: box-shadow 0.3s ease;
-        }
-
-        .container:hover {
-            box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
+          padding: 10px;
         }
 
         textarea {
-            width: 100%;
-            height: 200px;
-            font-family: monospace;
-            font-size: var(--font-size-base);
-            padding: 10px;
-            border: 1px solid var(--border-color);
-            border-radius: 4px;
-            background-color: var(--input-bg);
-            margin-bottom: 15px;
-            resize: none;
-            box-sizing: border-box;
-            outline: none;
-            transition: border-color 0.3s ease;
+          height: 120px; /* Slightly taller textarea for smaller devices */
         }
 
-        textarea:focus {
-            border-color: var(--primary-color);
+        h1 {
+          font-size: clamp(
+            1.5rem,
+            8vw,
+            2.5rem
+          ); /* Larger header for small devices */
         }
 
         button {
-            width: 100%;
-            padding: 10px;
-            background-color: var(--primary-color);
-            color: white;
-            font-size: var(--font-size-base);
-            border: none;
-            border-radius: 4px;
-            cursor: pointer;
-            box-sizing: border-box;
-            transition: background-color 0.3s ease, transform 0.2s ease;
-        }
-
-        button:hover {
-            background-color: var(--hover-color);
-        }
-
-        button:active {
-            transform: scale(0.98);
+          padding: 12px; /* Slightly larger buttons on mobile */
         }
 
         .output {
-            margin-top: 20px;
-            padding: 15px;
-            background-color: var(--container-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 4px;
-            min-height: 50px;
-            font-family: monospace;
-            font-size: 14px;
-            white-space: pre-wrap;
-            color: var(--text-color);
-            overflow-y: auto;
-            max-height: 400px; /* Set a maximum height for the output box */
-            box-sizing: border-box;
+          max-height: 150px; /* Smaller output box for mobile */
         }
 
         .copy-btn {
-            margin-top: 10px;
-            background-color: var(--success-color);
-            width: auto;
-            padding: 8px 12px;
-            color: white;
-            border: none;
-            border-radius: 4px;
-            cursor: pointer;
-            transition: background-color 0.3s ease;
-        }
-
-        .copy-btn:hover {
-            background-color: #218838;
-        }
-
-        @media (max-width: 768px) {
-            .container {
-                padding: 15px;
-            }
-
-            h1 {
-                font-size: clamp(1.2rem, 4vw, 2rem);
-            }
-
-            textarea {
-                height: 150px;
-                font-size: 14px;
-            }
-
-            button {
-                font-size: 14px;
-            }
-
-            .output {
-                font-size: 12px;
-            }
-        }
-
-        @media (max-width: 480px) {
-            body {
-                padding: 10px;
-            }
-
-            .container {
-                padding: 10px;
-            }
-
-            textarea {
-                height: 120px;
-            }
-
-            button {
-                font-size: 14px;
-            }
+          font-size: 12px; /* Even smaller button on mobile */
+          padding: 6px 12px; /* Smaller button size */
         }
+      }
     </style>
+  </head>
 
-</head>
-
-<body>
-
+  <body>
     <header>
-        <h1>JavaScript Playground</h1>
+      <h1>JavaScript Playground</h1>
     </header>
 
     <main class="container">
-        <textarea id="jsCode" placeholder="Write your JavaScript code here..."
-            aria-label="JavaScript code editor"></textarea>
+        <textarea id="jsCode" placeholder="Write your JavaScript code here..." aria-label="JavaScript code editor"></textarea>
         <button id="runBtn" aria-label="Run JavaScript code">Run Code</button>
         <button id="copyBtn" class="copy-btn" aria-label="Copy output">Copy Output</button>
         <div id="output" class="output" role="region" aria-live="polite" aria-relevant="additions text"></div>
