hms

Running

App Files Files Community

deepak191z commited on Apr 4

Commit

007a061

verified ·

1 Parent(s): 8a0fd23

Update index.html

Browse files

Files changed (1) hide show

index.html +49 -21

index.html CHANGED Viewed

@@ -9,8 +9,8 @@
         .code-block {
             font-family: 'Courier New', Courier, monospace;
             white-space: pre-wrap;
-            background-color: #1e293b; /* Dark slate background */
-            color: #e2e8f0; /* Light gray text */
             padding: 1.5rem;
             border-radius: 0.5rem;
             height: calc(100vh - 8rem);
@@ -20,7 +20,16 @@
         .tab-content { display: none; }
         .tab-content.active { display: block; }
         .curl-button.active { background-color: #1d4ed8; color: white; }
-        .sidebar { transition: all 0.3s ease; }
         .input-field {
             transition: border-color 0.2s ease, box-shadow 0.2s ease;
             background-color: #f1f5f9;
@@ -34,12 +43,26 @@
         .btn:hover { transform: translateY(-1px); }
         .btn:active { transform: translateY(0); }
         .tab-button.active { border-color: #3b82f6; color: #3b82f6; }
     </style>
 </head>
-<body class="bg-gray-100 flex font-sans">
     <!-- Sidebar -->
-    <div class="w-1/4 bg-white p-6 shadow-xl h-screen overflow-y-auto sidebar">
-        <h1 class="text-3xl font-extrabold text-gray-900 mb-8">GS Generator</h1>
         <div id="columnInputs" class="space-y-5">
             <div>
                 <label class="block text-sm font-medium text-gray-700 mb-2">Columns</label>
@@ -59,16 +82,21 @@
     </div>
     <!-- Main Content -->
-    <div class="w-3/4 p-8">
-        <div class="flex border-b-2 border-gray-300 mb-6">
-            <button class="tab-button px-6 py-3 font-semibold text-gray-700 border-b-2 border-transparent hover:border-blue-600 hover:text-blue-600 transition-colors duration-200" onclick="showTab('code')">Code Preview</button>
-            <button class="tab-button px-6 py-3 font-semibold text-gray-700 border-b-2 border-transparent hover:border-blue-600 hover:text-blue-600 transition-colors duration-200" onclick="showTab('howto')">How to Use</button>
         </div>
         <!-- Code Preview Tab -->
         <div id="code" class="tab-content active">
-            <div class="flex justify-between items-center mb-4">
-                <h2 class="text-2xl font-semibold text-gray-800">Generated Code</h2>
                 <button onclick="copyCode()" class="btn bg-gray-700 p-2 rounded-lg hover:bg-gray-600 transition-colors duration-200" title="Copy to clipboard">
                     <svg class="w-6 h-6 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h12a2 2 0 002-2V7a2 2 0 00-2-2h-2M8 5a2 2 0 002 2h4a2 2 0 002-2M8 5a2 2 0 012-2h4a2 2 0 012 2"></path></svg>
                 </button>
@@ -78,15 +106,15 @@
         <!-- How to Use Tab -->
         <div id="howto" class="tab-content">
-            <h2 class="text-2xl font-semibold text-gray-800 mb-4">How to Use (cURL Examples)</h2>
-            <div class="flex space-x-3 mb-6 overflow-x-auto pb-2">
-                <button class="curl-button btn px-4 py-2 bg-gray-200 rounded-lg hover:bg-blue-600 hover:text-white text-sm font-medium transition-colors duration-200" onclick="showCurlExample('appendSingle')">Append Single</button>
-                <button class="curl-button btn px-4 py-2 bg-gray-200 rounded-lg hover:bg-blue-600 hover:text-white text-sm font-medium transition-colors duration-200" onclick="showCurlExample('appendMultiple')">Append Multiple</button>
-                <button class="curl-button btn px-4 py-2 bg-gray-200 rounded-lg hover:bg-blue-600 hover:text-white text-sm font-medium transition-colors duration-200" onclick="showCurlExample('fetchAll')">Fetch All</button>
-                <button class="curl-button btn px-4 py-2 bg-gray-200 rounded-lg hover:bg-blue-600 hover:text-white text-sm font-medium transition-colors duration-200" onclick="showCurlExample('fetchRange')">Fetch Range</button>
-                <button class="curl-button btn px-4 py-2 bg-gray-200 rounded-lg hover:bg-blue-600 hover:text-white text-sm font-medium transition-colors duration-200" onclick="showCurlExample('search')">Search</button>
-                <button class="curl-button btn px-4 py-2 bg-gray-200 rounded-lg hover:bg-blue-600 hover:text-white text-sm font-medium transition-colors duration-200" onclick="showCurlExample('update')">Update</button>
-                <button class="curl-button btn px-4 py-2 bg-gray-200 rounded-lg hover:bg-blue-600 hover:text-white text-sm font-medium transition-colors duration-200" onclick="showCurlExample('delete')">Delete</button>
             </div>
             <div id="curlExamples" class="code-block"></div>
         </div>

         .code-block {
             font-family: 'Courier New', Courier, monospace;
             white-space: pre-wrap;
+            background-color: #1e293b;
+            color: #e2e8f0;
             padding: 1.5rem;
             border-radius: 0.5rem;
             height: calc(100vh - 8rem);
         .tab-content { display: none; }
         .tab-content.active { display: block; }
         .curl-button.active { background-color: #1d4ed8; color: white; }
+        .sidebar {
+            transition: all 0.3s ease;
+            position: fixed;
+            top: 0;
+            left: -100%;
+            width: 75%;
+            max-width: 300px;
+            z-index: 50;
+        }
+        .sidebar.open { left: 0; }
         .input-field {
             transition: border-color 0.2s ease, box-shadow 0.2s ease;
             background-color: #f1f5f9;
         .btn:hover { transform: translateY(-1px); }
         .btn:active { transform: translateY(0); }
         .tab-button.active { border-color: #3b82f6; color: #3b82f6; }
+        @media (min-width: 768px) {
+            .sidebar {
+                position: static;
+                width: 25%;
+                max-width: none;
+            }
+            .main-content { margin-left: 25%; }
+            .code-block { height: calc(100vh - 8rem); }
+        }
     </style>
 </head>
+<body class="bg-gray-100 font-sans min-h-screen">
     <!-- Sidebar -->
+    <div id="sidebar" class="sidebar bg-white p-6 shadow-xl h-screen overflow-y-auto">
+        <div class="flex justify-between items-center mb-8">
+            <h1 class="text-3xl font-extrabold text-gray-900">GS Generator</h1>
+            <button id="closeSidebar" class="md:hidden btn bg-gray-200 p-2 rounded-lg hover:bg-gray-300" onclick="toggleSidebar()">
+                <svg class="w-6 h-6 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
+            </button>
+        </div>
         <div id="columnInputs" class="space-y-5">
             <div>
                 <label class="block text-sm font-medium text-gray-700 mb-2">Columns</label>
     </div>
     <!-- Main Content -->
+    <div class="main-content w-full md:w-3/4 p-4 md:p-8">
+        <!-- Mobile Menu Button -->
+        <button id="openSidebar" class="md:hidden fixed top-4 left-4 btn bg-blue-600 p-2 rounded-lg hover:bg-blue-700 z-50" onclick="toggleSidebar()">
+            <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path></svg>
+        </button>
+        <div class="flex flex-col sm:flex-row border-b-2 border-gray-300 mb-6 space-y-2 sm:space-y-0 sm:space-x-4">
+            <button class="tab-button px-4 py-2 sm:px-6 sm:py-3 font-semibold text-gray-700 border-b-2 border-transparent hover:border-blue-600 hover:text-blue-600 transition-colors duration-200" onclick="showTab('code')">Code Preview</button>
+            <button class="tab-button px-4 py-2 sm:px-6 sm:py-3 font-semibold text-gray-700 border-b-2 border-transparent hover:border-blue-600 hover:text-blue-600 transition-colors duration-200" onclick="showTab('howto')">How to Use</button>
         </div>
         <!-- Code Preview Tab -->
         <div id="code" class="tab-content active">
+            <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center mb-4 space-y-2 sm:space-y-0">
+                <h2 class="text-xl sm:text-2xl font-semibold text-gray-800">Generated Code</h2>
                 <button onclick="copyCode()" class="btn bg-gray-700 p-2 rounded-lg hover:bg-gray-600 transition-colors duration-200" title="Copy to clipboard">
                     <svg class="w-6 h-6 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h12a2 2 0 002-2V7a2 2 0 00-2-2h-2M8 5a2 2 0 002 2h4a2 2 0 002-2M8 5a2 2 0 012-2h4a2 2 0 012 2"></path></svg>
                 </button>
         <!-- How to Use Tab -->
         <div id="howto" class="tab-content">
+            <h2 class="text-xl sm:text-2xl font-semibold text-gray-800 mb-4">How to Use (cURL Examples)</h2>
+            <div class="flex flex-wrap gap-2 mb-6 overflow-x-auto pb-2">
+                <button class="curl-button btn px-3 py-1 sm:px-4 sm:py-2 bg-gray-200 rounded-lg hover:bg-blue-600 hover:text-white text-sm font-medium transition-colors duration-200" onclick="showCurlExample('appendSingle')">Append Single</button>
+                <button class="curl-button btn px-3 py-1 sm:px-4 sm:py-2 bg-gray-200 rounded-lg hover:bg-blue-600 hover:text-white text-sm font-medium transition-colors duration-200" onclick="showCurlExample('appendMultiple')">Append Multiple</button>
+                <button class="curl-button btn px-3 py-1 sm:px-4 sm:py-2 bg-gray-200 rounded-lg hover:bg-blue-600 hover:text-white text-sm font-medium transition-colors duration-200" onclick="showCurlExample('fetchAll')">Fetch All</button>
+                <button class="curl-button btn px-3 py-1 sm:px-4 sm:py-2 bg-gray-200 rounded-lg hover:bg-blue-600 hover:text-white text-sm font-medium transition-colors duration-200" onclick="showCurlExample('fetchRange')">Fetch Range</button>
+                <button class="curl-button btn px-3 py-1 sm:px-4 sm:py-2 bg-gray-200 rounded-lg hover:bg-blue-600 hover:text-white text-sm font-medium transition-colors duration-200" onclick="showCurlExample('search')">Search</button>
+                <button class="curl-button btn px-3 py-1 sm:px-4 sm:py-2 bg-gray-200 rounded-lg hover:bg-blue-600 hover:text-white text-sm font-medium transition-colors duration-200" onclick="showCurlExample('update')">Update</button>
+                <button class="curl-button btn px-3 py-1 sm:px-4 sm:py-2 bg-gray-200 rounded-lg hover:bg-blue-600 hover:text-white text-sm font-medium transition-colors duration-200" onclick="showCurlExample('delete')">Delete</button>
             </div>
             <div id="curlExamples" class="code-block"></div>
         </div>