hms

Running

App Files Files Community

deepak191z commited on Apr 4, 2025

Commit

7b17262

verified ·

1 Parent(s): a80c6f1

Update index.html

Browse files

Files changed (1) hide show

index.html +78 -36

index.html CHANGED Viewed

@@ -9,7 +9,7 @@
         .code-block {
             font-family: 'Courier New', Courier, monospace;
             white-space: pre-wrap;
-            background: #000000; /* Solid black background */
             color: #e2e8f0;
             padding: 1.5rem;
             border-radius: 0.5rem;
@@ -54,39 +54,85 @@
             border: 1px solid rgba(255, 255, 255, 0.2);
             box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
         }
         @media (max-width: 640px) {
-            .code-block { height: calc(100vh - 16rem); }
-            .flex.space-x-3 { flex-direction: column; space-x-0; space-y-3; }
-            .btn { width: 100%; margin-bottom: 0.5rem; }
-            .step-indicator { width: 8rem; height: 2.5rem; }
-            .glass-container { padding: 1rem; }
         }
     </style>
 </head>
-<body class="bg-gradient-to-br from-gray-200 via-gray-300 to-gray-400 min-h-screen font-sans p-4 sm:p-8">
     <!-- Progress Steps -->
-    <div class="flex justify-center space-x-4 sm:space-x-8 mb-6 sm:mb-8">
-        <div class="step-indicator flex items-center justify-center w-10 h-10 sm:w-10 sm:h-10 rounded-full text-gray-700 font-semibold">1</div>
-        <div class="step-indicator flex items-center justify-center w-10 h-10 sm:w-10 sm:h-10 rounded-full text-gray-700 font-semibold">2</div>
-        <div class="step-indicator flex items-center justify-center w-10 h-10 sm:w-10 sm:h-10 rounded-full text-gray-700 font-semibold">3</div>
     </div>
     <!-- Main Content Sections -->
-    <div class="max-w-4xl mx-auto glass-container rounded-xl p-4 sm:p-6">
         <!-- Set Columns Section -->
         <div id="columns" class="section active">
-            <h1 class="text-2xl sm:text-3xl font-extrabold text-gray-900 mb-6 sm:mb-8 text-center">Set Columns</h1>
-            <div id="columnInputs" class="space-y-4 sm:space-y-5">
-                <div class="flex space-x-3 sm:space-x-3">
-                    <input type="text" class="column-input input-field flex-1 px-3 sm:px-4 py-2 rounded-lg" placeholder="Column name (e.g., Status)" value="word">
                     <button onclick="removeColumn(this)" class="delete-btn btn bg-red-600 text-white p-2 rounded-lg">
                         <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                         </svg>
                     </button>
                 </div>
-                <div class="flex space-x-3 sm:space-x-3">
-                    <input type="text" class="column-input input-field flex-1 px-3 sm:px-4 py-2 rounded-lg" placeholder="Column name (e.g., Category)" value="meaning">
                     <button onclick="removeColumn(this)" class="delete-btn btn bg-red-600 text-white p-2 rounded-lg">
                         <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
@@ -94,32 +140,32 @@
                     </button>
                 </div>
             </div>
-            <div class="flex flex-col sm:flex-row justify-between mt-6 space-y-3 sm:space-y-0 sm:space-x-4">
-                <button onclick="addColumn()" class="btn bg-blue-600 text-white px-4 py-3 rounded-lg hover:bg-blue-700 text-base sm:text-lg font-medium">Add Column</button>
-                <button onclick="nextSection('code')" class="btn bg-green-600 text-white px-6 py-3 rounded-lg hover:bg-green-700 text-base sm:text-lg font-medium">Next</button>
             </div>
         </div>
         <!-- Generated Code Section -->
         <div id="code" class="section">
-            <h1 class="text-2xl sm:text-3xl font-extrabold text-gray-900 mb-6 sm:mb-8 text-center">Generated Code</h1>
-            <div class="flex flex-col sm:flex-row justify-between items-center mb-4 space-y-3 sm:space-y-0">
-                <h2 class="text-xl sm:text-2xl font-semibold text-gray-800">Code Preview</h2>
                 <button onclick="copyCode()" class="btn bg-gray-700 p-2 rounded-lg hover:bg-gray-600" 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>
             </div>
             <div id="codePreview" class="code-block"></div>
-            <div class="flex flex-col sm:flex-row justify-between mt-6 space-y-3 sm:space-y-0 sm:space-x-4">
-                <button onclick="nextSection('columns')" class="btn bg-gray-600 text-white px-6 py-3 rounded-lg hover:bg-gray-700 text-base sm:text-lg font-medium">Back</button>
-                <button onclick="nextSection('howto')" class="btn bg-green-600 text-white px-6 py-3 rounded-lg hover:bg-green-700 text-base sm:text-lg font-medium">Next</button>
             </div>
         </div>
         <!-- How to Use Section -->
         <div id="howto" class="section">
-            <h1 class="text-2xl sm:text-3xl font-extrabold text-gray-900 mb-6 sm:mb-8 text-center">How to Use</h1>
-            <div class="flex flex-wrap gap-2 sm:gap-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" 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" 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" onclick="showCurlExample('fetchAll')">Fetch All</button>
@@ -130,7 +176,7 @@
             </div>
             <div id="curlExamples" class="code-block"></div>
             <div class="flex justify-start mt-6">
-                <button onclick="nextSection('code')" class="btn bg-gray-600 text-white px-6 py-3 rounded-lg hover:bg-gray-700 text-base sm:text-lg font-medium">Back</button>
             </div>
         </div>
     </div>
@@ -140,18 +186,14 @@
             document.querySelectorAll('.section').forEach(section => section.classList.remove('active'));
             document.getElementById(sectionId).classList.add('active');
-            // Update step indicators
             const steps = ['columns', 'code', 'howto'];
             const currentStep = steps.indexOf(sectionId);
             document.querySelectorAll('.step-indicator').forEach((indicator, index) => {
                 indicator.classList.toggle('active', index === currentStep);
             });
         }
-        // Initial step indicator
         document.querySelector('.step-indicator').classList.add('active');
     </script>
-<script src="script.js"></script>
 </body>
 </html>

         .code-block {
             font-family: 'Courier New', Courier, monospace;
             white-space: pre-wrap;
+            background: #000000;
             color: #e2e8f0;
             padding: 1.5rem;
             border-radius: 0.5rem;
             border: 1px solid rgba(255, 255, 255, 0.2);
             box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
         }
+        body {
+            padding: 1rem;
+        }
+        .max-w-4xl {
+            width: 100%;
+            max-width: 100%;
+            margin-left: auto;
+            margin-right: auto;
+        }
         @media (max-width: 640px) {
+            .code-block {
+                height: calc(100vh - 16rem);
+            }
+            .flex.space-x-3 {
+                flex-direction: column;
+                gap: 0.5rem;
+            }
+            .btn {
+                width: 100%;
+                margin-bottom: 0.5rem;
+            }
+            .step-indicator {
+                width: 2.5rem;
+                height: 2.5rem;
+            }
+            .glass-container {
+                padding: 1rem;
+            }
+            .flex.sm\:flex-row {
+                flex-direction: column;
+            }
+            .space-x-4 > * + * {
+                margin-top: 0.75rem;
+                margin-left: 0;
+            }
+            .column-input {
+                width: 100%;
+            }
+            .flex.justify-center.space-x-4 {
+                flex-direction: row;
+                gap: 0.5rem;
+                flex-wrap: wrap;
+                justify-content: center;
+            }
+            .flex.flex-col.sm\:flex-row {
+                gap: 0.75rem;
+            }
+        }
+        @media (min-width: 641px) {
+            body {
+                padding: 2rem;
+            }
         }
     </style>
 </head>
+<body class="bg-gradient-to-br from-gray-200 via-gray-300 to-gray-400 min-h-screen font-sans">
     <!-- Progress Steps -->
+    <div class="flex justify-center space-x-4 mb-6">
+        <div class="step-indicator flex items-center justify-center w-10 h-10 rounded-full text-gray-700 font-semibold">1</div>
+        <div class="step-indicator flex items-center justify-center w-10 h-10 rounded-full text-gray-700 font-semibold">2</div>
+        <div class="step-indicator flex items-center justify-center w-10 h-10 rounded-full text-gray-700 font-semibold">3</div>
     </div>
     <!-- Main Content Sections -->
+    <div class="max-w-4xl mx-auto glass-container rounded-xl p-4">
         <!-- Set Columns Section -->
         <div id="columns" class="section active">
+            <h1 class="text-2xl font-extrabold text-gray-900 mb-6 text-center">Set Columns</h1>
+            <div id="columnInputs" class="space-y-4">
+                <div class="flex space-x-3">
+                    <input type="text" class="column-input input-field flex-1 px-3 py-2 rounded-lg" placeholder="Column name (e.g., Status)" value="word">
                     <button onclick="removeColumn(this)" class="delete-btn btn bg-red-600 text-white p-2 rounded-lg">
                         <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.植物A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                         </svg>
                     </button>
                 </div>
+                <div class="flex space-x-3">
+                    <input type="text" class="column-input input-field flex-1 px-3 py-2 rounded-lg" placeholder="Column name (e.g., Category)" value="meaning">
                     <button onclick="removeColumn(this)" class="delete-btn btn bg-red-600 text-white p-2 rounded-lg">
                         <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                     </button>
                 </div>
             </div>
+            <div class="flex flex-col sm:flex-row justify-between mt-6 space-y-3 sm:space-x-4">
+                <button onclick="addColumn()" class="btn bg-blue-600 text-white px-4 py-3 rounded-lg hover:bg-blue-700 text-base font-medium">Add Column</button>
+                <button onclick="nextSection('code')" class="btn bg-green-600 text-white px-6 py-3 rounded-lg hover:bg-green-700 text-base font-medium">Next</button>
             </div>
         </div>
         <!-- Generated Code Section -->
         <div id="code" class="section">
+            <h1 class="text-2xl font-extrabold text-gray-900 mb-6 text-center">Generated Code</h1>
+            <div class="flex flex-col sm:flex-row justify-between items-center mb-4 space-y-3">
+                <h2 class="text-xl font-semibold text-gray-800">Code Preview</h2>
                 <button onclick="copyCode()" class="btn bg-gray-700 p-2 rounded-lg hover:bg-gray-600" 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>
             </div>
             <div id="codePreview" class="code-block"></div>
+            <div class="flex flex-col sm:flex-row justify-between mt-6 space-y-3 sm:space-x-4">
+                <button onclick="nextSection('columns')" class="btn bg-gray-600 text-white px-6 py-3 rounded-lg hover:bg-gray-700 text-base font-medium">Back</button>
+                <button onclick="nextSection('howto')" class="btn bg-green-600 text-white px-6 py-3 rounded-lg hover:bg-green-700 text-base font-medium">Next</button>
             </div>
         </div>
         <!-- How to Use Section -->
         <div id="howto" class="section">
+            <h1 class="text-2xl font-extrabold text-gray-900 mb-6 text-center">How to Use</h1>
+            <div class="flex flex-wrap gap-2 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" 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" 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" onclick="showCurlExample('fetchAll')">Fetch All</button>
             </div>
             <div id="curlExamples" class="code-block"></div>
             <div class="flex justify-start mt-6">
+                <button onclick="nextSection('code')" class="btn bg-gray-600 text-white px-6 py-3 rounded-lg hover:bg-gray-700 text-base font-medium">Back</button>
             </div>
         </div>
     </div>
             document.querySelectorAll('.section').forEach(section => section.classList.remove('active'));
             document.getElementById(sectionId).classList.add('active');
             const steps = ['columns', 'code', 'howto'];
             const currentStep = steps.indexOf(sectionId);
             document.querySelectorAll('.step-indicator').forEach((indicator, index) => {
                 indicator.classList.toggle('active', index === currentStep);
             });
         }
         document.querySelector('.step-indicator').classList.add('active');
     </script>
+    <script src="script.js"></script>
 </body>
 </html>