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: #f5f5f5; | |
padding: 1rem; | |
border-radius: 0.375rem; | |
height: calc(100vh - 6rem); | |
overflow-y: auto; | |
} | |
.tab-content { display: none; } | |
.tab-content.active { display: block; } | |
.curl-button.active { background-color: #3b82f6; color: white; } | |
</style> | |
</head> | |
<body class="bg-gray-100 flex"> | |
<!-- Sidebar --> | |
<div class="w-1/4 bg-white p-6 shadow-lg h-screen overflow-y-auto"> | |
<h1 class="text-2xl font-bold mb-6">GS Generator</h1> | |
<div id="columnInputs" class="space-y-4"> | |
<div> | |
<label class="block text-sm font-medium text-gray-700 mb-1">Columns</label> | |
<div class="flex space-x-2"> | |
<input type="text" class="column-input flex-1 px-3 py-2 border rounded-md" placeholder="Column name" value="word"> | |
<button onclick="removeColumn(this)" class="bg-red-500 text-white px-2 py-1 rounded hover:bg-red-600">X</button> | |
</div> | |
</div> | |
<div> | |
<div class="flex space-x-2"> | |
<input type="text" class="column-input flex-1 px-3 py-2 border rounded-md" placeholder="Column name" value="meaning"> | |
<button onclick="removeColumn(this)" class="bg-red-500 text-white px-2 py-1 rounded hover:bg-red-600">X</button> | |
</div> | |
</div> | |
</div> | |
<button onclick="addColumn()" class="mt-4 bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">Add Column</button> | |
</div> | |
<!-- Main Content with Tabs --> | |
<div class="w-3/4 p-6"> | |
<div class="flex border-b mb-4"> | |
<button class="tab-button px-4 py-2 font-semibold text-gray-700 border-b-2 border-transparent hover:border-blue-500" onclick="showTab('code')">Code Preview</button> | |
<button class="tab-button px-4 py-2 font-semibold text-gray-700 border-b-2 border-transparent hover:border-blue-500" 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-2"> | |
<h2 class="text-xl font-semibold">Generated Code</h2> | |
<button onclick="copyCode()" class="bg-gray-200 p-2 rounded hover:bg-gray-300" title="Copy to clipboard"> | |
<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="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-xl font-semibold mb-4">How to Use (cURL Examples)</h2> | |
<div class="flex space-x-2 mb-4 overflow-x-auto"> | |
<button class="curl-button px-3 py-1 bg-gray-200 rounded hover:bg-blue-500 hover:text-white" onclick="showCurlExample('appendSingle')">Append Single</button> | |
<button class="curl-button px-3 py-1 bg-gray-200 rounded hover:bg-blue-500 hover:text-white" onclick="showCurlExample('appendMultiple')">Append Multiple</button> | |
<button class="curl-button px-3 py-1 bg-gray-200 rounded hover:bg-blue-500 hover:text-white" onclick="showCurlExample('fetchAll')">Fetch All</button> | |
<button class="curl-button px-3 py-1 bg-gray-200 rounded hover:bg-blue-500 hover:text-white" onclick="showCurlExample('fetchRange')">Fetch Range</button> | |
<button class="curl-button px-3 py-1 bg-gray-200 rounded hover:bg-blue-500 hover:text-white" onclick="showCurlExample('search')">Search</button> | |
<button class="curl-button px-3 py-1 bg-gray-200 rounded hover:bg-blue-500 hover:text-white" onclick="showCurlExample('update')">Update</button> | |
<button class="curl-button px-3 py-1 bg-gray-200 rounded hover:bg-blue-500 hover:text-white" onclick="showCurlExample('delete')">Delete</button> | |
</div> | |
<div id="curlExamples" class="code-block"></div> | |
</div> | |
</div> | |
<script src="script.js"></script> | |
</body> | |
</html> |