Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Google Apps Script Generator</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <style> | |
| .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); | |
| overflow-y: auto; | |
| box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2); | |
| } | |
| .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; | |
| color: #1e293b; | |
| } | |
| .input-field:focus { | |
| border-color: #3b82f6; | |
| box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3); | |
| } | |
| .btn { transition: background-color 0.2s ease, transform 0.1s ease; } | |
| .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> | |
| <div class="flex space-x-3"> | |
| <input type="text" class="column-input input-field flex-1 px-4 py-2 border border-gray-300 rounded-lg" placeholder="Column name (e.g., Status)" value="word"> | |
| <button onclick="removeColumn(this)" class="btn bg-red-600 text-white px-3 py-2 rounded-lg hover:bg-red-700">X</button> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex space-x-3"> | |
| <input type="text" class="column-input input-field flex-1 px-4 py-2 border border-gray-300 rounded-lg" placeholder="Column name (e.g., Category)" value="meaning"> | |
| <button onclick="removeColumn(this)" class="btn bg-red-600 text-white px-3 py-2 rounded-lg hover:bg-red-700">X</button> | |
| </div> | |
| </div> | |
| </div> | |
| <button onclick="addColumn()" class="btn mt-6 w-full bg-blue-600 text-white px-4 py-3 rounded-lg hover:bg-blue-700 text-lg font-medium">Add Column</button> | |
| </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> | |
| </div> | |
| <div id="codePreview" class="code-block"></div> | |
| </div> | |
| <!-- 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> | |
| </div> | |
| <script src="script.js"></script> | |
| </body> | |
| </html> |