Spaces:
Running
Running
File size: 21,342 Bytes
9905a94 84a03e0 adf2bbe 1b19cab 84a03e0 daf90d7 4a50a97 daf90d7 4a50a97 daf90d7 4a50a97 daf90d7 4a50a97 daf90d7 4a50a97 daf90d7 66fabcf daf90d7 4a50a97 daf90d7 4a50a97 adf2bbe 7b17262 267d45f 34a4957 1624c45 daf90d7 1a0c316 81e63ef 1a0c316 267d45f 4a50a97 267d45f 4a50a97 7fdca6a 4a50a97 34a4957 daf90d7 7fdca6a 4a50a97 daf90d7 4a50a97 daf90d7 4a50a97 daf90d7 4a50a97 daf90d7 81e63ef daf90d7 66fabcf daf90d7 267d45f 81e63ef 4a50a97 81e63ef 4a50a97 daf90d7 81e63ef daf90d7 81e63ef 34a4957 daf90d7 34a4957 daf90d7 34a4957 7b17262 daf90d7 66fabcf daf90d7 7b17262 daf90d7 66fabcf daf90d7 66fabcf daf90d7 66fabcf daf90d7 66fabcf daf90d7 66fabcf daf90d7 7b17262 daf90d7 7b17262 daf90d7 34a4957 daf90d7 66fabcf daf90d7 81e63ef 1a0c316 84a03e0 4a50a97 daf90d7 4a50a97 5c76ba4 4a50a97 5c76ba4 4a50a97 267d45f 4a50a97 267d45f 4a50a97 daf90d7 4a50a97 db3b452 b8229e3 adf2bbe daf90d7 267d45f adf2bbe b8229e3 267d45f 4a50a97 daf90d7 7fdca6a daf90d7 adf2bbe 4a50a97 daf90d7 267d45f adf2bbe b8229e3 267d45f 4a50a97 daf90d7 db3b452 adf2bbe 267d45f f75fa0e daf90d7 f75fa0e 267d45f daf90d7 66fabcf daf90d7 66fabcf daf90d7 267d45f daf90d7 267d45f daf90d7 267d45f 66fabcf daf90d7 66fabcf daf90d7 b8229e3 84a03e0 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 386 387 388 389 390 391 392 393 394 395 396 397 398 399 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414 415 416 417 418 419 420 421 422 423 424 425 426 427 428 429 430 431 432 433 434 435 436 437 438 439 440 441 442 443 |
<!DOCTYPE html>
<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>
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
<style>
/* Base body padding for fixed header */
body {
padding-top: 5rem; /* Start with a base padding */
}
/* Hero section base style */
#heroSection {
display: flex; /* Use flex by default */
transition: opacity 0.3s ease-out, max-height 0.3s ease-out; /* Add transition */
opacity: 1;
max-height: 500px; /* Estimate max height */
overflow: hidden;
}
/* Style to hide hero section smoothly */
#heroSection.hidden-section {
opacity: 0;
max-height: 0;
padding-top: 0;
padding-bottom: 0;
margin-bottom: 0;
/* display: none; /* Re-add if transition is not desired or causes layout shifts */
}
/* Progress steps base style */
#progressSteps {
display: flex; /* Use flex by default */
transition: opacity 0.3s ease-out, max-height 0.3s ease-out; /* Add transition */
opacity: 1;
max-height: 100px; /* Estimate max height */
overflow: hidden;
}
/* Style to hide steps smoothly */
#progressSteps.hidden-section {
opacity: 0;
max-height: 0;
margin-bottom: 0;
/* display: none; */
}
.code-block {
font-family: 'Courier New', Courier, monospace;
white-space: pre-wrap;
background: #000000;
color: #e2e8f0;
padding: 1rem;
border-radius: 0.5rem;
height: calc(80vh - 22rem); /* Adjusted height slightly */
min-height: 150px; /* Adjusted min-height */
overflow-y: auto;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
}
.section { display: none; }
.section.active { display: block; }
.input-field {
transition: border-color 0.2s ease, box-shadow 0.2s ease;
background: rgba(255, 255, 255, 0.25);
color: #1e293b;
border: 1px solid rgba(255, 255, 255, 0.4);
width: 100%;
padding: 0.65rem 0.75rem; /* Adjusted padding slightly */
border-radius: 0.375rem; /* Standard Tailwind rounded-md */
}
.input-field::placeholder { color: #4b5563; opacity: 1; }
.input-field:focus {
border-color: #3b82f6;
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.4);
background: rgba(255, 255, 255, 0.35);
}
.btn {
transition: background-color 0.2s ease, transform 0.1s ease, box-shadow 0.1s ease;
backdrop-filter: blur(8px);
border: 1px solid rgba(255, 255, 255, 0.2);
padding: 0.75rem 1.25rem; /* Default padding */
border-radius: 0.375rem; /* Standard Tailwind rounded-md */
font-weight: 500; /* Medium weight */
text-align: center;
box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
.btn:hover {
transform: translateY(-1px);
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.btn:active { transform: translateY(0); box-shadow: 0 1px 2px rgba(0,0,0,0.05); }
/* Specific Button Colors */
.btn-blue { background: #2563eb; color: white; } .btn-blue:hover { background: #1d4ed8; }
.btn-green { background: #16a34a; color: white; } .btn-green:hover { background: #15803d; }
.btn-gray-dark { background: #374151; color: white; } .btn-gray-dark:hover { background: #1f2937; }
.btn-gray { background: #4b5563; color: white; } .btn-gray:hover { background: #374151; }
.btn-red { background: #dc2626; color: white; } .btn-red:hover { background: #b91c1c; }
.btn-light { background: #e5e7eb; color: #1f2937; } .btn-light:hover { background: #d1d5db; }
.btn-light-active { background: #dbeafe; color: #1e40af; } /* For active cURL button */
/* Small icon button style (e.g., delete, copy) */
.btn-icon {
padding: 0.5rem; /* Smaller padding for icons */
flex-shrink: 0; /* Prevent shrinking */
line-height: 1; /* Ensure icon aligns well */
}
.btn-icon svg {
width: 1.25rem; /* w-5 */
height: 1.25rem; /* h-5 */
}
.step-indicator {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(5px);
border: 1px solid rgba(255, 255, 255, 0.2);
width: 2.5rem; /* w-10 */
height: 2.5rem; /* h-10 */
border-radius: 9999px; /* rounded-full */
display: flex;
align-items: center;
justify-content: center;
font-weight: 600; /* semibold */
color: #4b5563; /* gray-600 text */
transition: all 0.3s ease-in-out;
}
.step-indicator.active {
background: rgba(59, 130, 246, 0.9);
color: white;
box-shadow: 0 2px 4px rgba(59, 130, 246, 0.3);
}
.step-indicator.completed { /* Style for completed steps */
background: rgba(22, 163, 74, 0.8); /* Green */
color: white;
}
.glass-container {
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.25);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
border-radius: 0.75rem; /* rounded-xl */
padding: 1.5rem; /* Default padding */
}
/* --- Mobile-specific styles --- */
@media (max-width: 640px) {
body {
padding-top: 4.5rem; /* Adjust for potentially smaller header */
padding-left: 0.5rem;
padding-right: 0.5rem;
}
.glass-container {
padding: 1rem; /* Reduce padding slightly */
}
.code-block {
height: calc(70vh - 15rem); /* Adjust height calc for mobile */
padding: 0.75rem;
min-height: 120px;
}
/* Input row layout */
.column-input-row {
flex-direction: row; /* Keep input and button in a row */
align-items: center;
gap: 0.75rem; /* space-x-3 equivalent */
}
.column-input-row input {
flex-grow: 1; /* Allow input to take space */
}
.column-input-row .btn-icon {
/* Delete button already has flex-shrink-0 */
}
/* Button container for main actions */
.button-container-mobile-stack {
display: flex;
flex-direction: column;
width: 100%;
gap: 0.75rem; /* space-y-3 */
}
.button-container-mobile-stack .btn {
width: 100%; /* Make buttons full width */
}
/* Make specific containers stack buttons */
#columns .button-container,
#code .button-container,
#howto .button-container {
flex-direction: column;
gap: 0.75rem;
}
#columns .button-container .btn,
#code .button-container .btn,
#howto .button-container .btn {
width: 100%; /* Ensure buttons inside stack full width */
margin-left: 0 !important; /* Override potential sm: space-x */
}
.step-indicator {
width: 2.25rem; height: 2.25rem; /* Slightly smaller */
font-size: 0.875rem; /* text-sm */
}
/* Adjust heading sizes for mobile */
.text-4xl { font-size: 1.875rem; line-height: 2.25rem; } /* text-3xl */
.text-2xl { font-size: 1.25rem; line-height: 1.75rem; } /* text-xl */
.text-xl { font-size: 1.125rem; line-height: 1.75rem; } /* text-lg */
.text-lg { font-size: 1rem; line-height: 1.5rem; } /* text-base */
/* Adjust margins */
.mb-12 { margin-bottom: 2rem; } /* mb-8 */
.mb-8 { margin-bottom: 1.5rem; } /* mb-6 */
.mb-6 { margin-bottom: 1rem; } /* mb-4 */
.mt-6 { margin-top: 1rem; } /* mt-4 */
.py-16 { padding-top: 2.5rem; padding-bottom: 2.5rem; } /* py-10 */
/* cURL buttons adjustments */
#howto .flex-wrap {
gap: 0.5rem; /* gap-2 */
}
#howto .flex-wrap .btn {
padding: 0.5rem 0.75rem; /* Smaller padding */
font-size: 0.875rem; /* text-sm */
}
/* Copy button on mobile */
#code .flex > .btn-icon {
/* padding: 0.6rem; /* Slightly larger tap area if needed */
}
}
/* Larger screen adjustments */
@media (min-width: 641px) {
body {
padding-top: 6rem; /* Restore larger padding */
padding-left: 1rem;
padding-right: 1rem;
}
.glass-container {
padding: 2rem; /* Restore larger padding */
}
/* Restore row layout for buttons on desktop */
#columns .button-container,
#code .button-container {
flex-direction: row;
justify-content: space-between;
gap: 1rem; /* space-x-4 */
}
#columns .button-container .btn,
#code .button-container .btn {
width: auto; /* Allow buttons to size naturally */
}
/* How-to back button on desktop */
#howto .button-container {
justify-content: flex-start;
flex-direction: row; /* Ensure it's row */
}
#howto .button-container .btn {
width: auto;
}
}
</style>
</head>
<body class="bg-gradient-to-br from-gray-200 via-gray-300 to-gray-400 min-h-screen font-sans text-gray-800">
<header class="fixed top-0 left-0 w-full bg-white shadow-md p-4 z-50">
<div class="max-w-6xl mx-auto text-xl font-bold text-gray-900">GSheet2DB</div>
</header>
<section id="heroSection" class="flex flex-col justify-center items-center text-center px-6 py-16 mb-12">
<h1 class="text-4xl font-bold text-gray-900">Convert Google Sheets to a Database</h1>
<p class="text-lg text-gray-700 mt-3 max-w-2xl">
Generate Google Apps Script code to turn your spreadsheet into a simple REST API. Fast, simple, and free!
</p>
</section>
<div id="progressSteps" class="max-w-xl mx-auto flex justify-center space-x-4 mb-8 px-4">
<div data-step="columns" class="step-indicator">1</div>
<div data-step="code" class="step-indicator">2</div>
<div data-step="howto" class="step-indicator">3</div>
</div>
<div class="max-w-4xl mx-auto glass-container mb-12">
<div id="columns" class="section active">
<h2 class="text-2xl font-extrabold text-gray-900 mb-6 text-center">Step 1: Define Your Columns</h2>
<div id="columnInputs" class="space-y-4 mb-6">
<div class="flex items-center space-x-3 column-input-row">
<input type="text" class="column-input input-field flex-1" placeholder="Column name (e.g., Status)" value="word">
<button onclick="removeColumn(this)" class="btn btn-icon btn-red" aria-label="Remove column">
<svg 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 items-center space-x-3 column-input-row">
<input type="text" class="column-input input-field flex-1" placeholder="Column name (e.g., Category)" value="meaning">
<button onclick="removeColumn(this)" class="btn btn-icon btn-red" aria-label="Remove column">
<svg 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>
<div class="mt-6 button-container"> <button onclick="addColumn()" class="btn btn-blue w-full sm:w-auto">Add Column</button>
<button onclick="nextSection('code')" class="btn btn-green w-full sm:w-auto">Next: Generate Code</button>
</div>
</div>
<div id="code" class="section">
<h2 class="text-2xl font-extrabold text-gray-900 mb-6 text-center">Step 2: Generated Apps Script Code</h2>
<div class="flex flex-col sm:flex-row justify-between items-center mb-4 gap-3 sm:gap-0"> <h3 class="text-xl font-semibold text-gray-800">Code Preview</h3>
<button onclick="copyCode()" class="btn btn-icon btn-gray-dark self-end sm:self-center" title="Copy to clipboard" aria-label="Copy code 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>
<span class="sr-only">Copy Code</span>
</button>
</div>
<div id="codePreview" class="code-block mb-6"></div>
<div class="mt-6 button-container"> <button onclick="nextSection('columns')" class="btn btn-gray w-full sm:w-auto">Back</button>
<button onclick="nextSection('howto')" class="btn btn-green w-full sm:w-auto">Next: How to Use</button>
</div>
</div>
<div id="howto" class="section">
<h2 class="text-2xl font-extrabold text-gray-900 mb-6 text-center">Step 3: How to Use the API</h2>
<h3 class="text-lg font-semibold text-gray-800 mb-3">Example cURL Commands:</h3>
<div class="flex flex-wrap gap-2 mb-6 pb-2">
<button class="curl-button btn btn-light text-sm px-3 py-1.5" onclick="showCurlExample('appendSingle', this)">Append Single</button>
<button class="curl-button btn btn-light text-sm px-3 py-1.5" onclick="showCurlExample('appendMultiple', this)">Append Multiple</button>
<button class="curl-button btn btn-light text-sm px-3 py-1.5" onclick="showCurlExample('fetchAll', this)">Fetch All</button>
<button class="curl-button btn btn-light text-sm px-3 py-1.5" onclick="showCurlExample('fetchRange', this)">Fetch Range</button>
<button class="curl-button btn btn-light text-sm px-3 py-1.5" onclick="showCurlExample('search', this)">Search</button>
<button class="curl-button btn btn-light text-sm px-3 py-1.5" onclick="showCurlExample('update', this)">Update</button>
<button class="curl-button btn btn-light text-sm px-3 py-1.5" onclick="showCurlExample('delete', this)">Delete</button>
</div>
<div id="curlExamples" class="code-block mb-6"></div>
<div class="mt-6 flex justify-start button-container"> <button onclick="nextSection('code')" class="btn btn-gray w-full sm:w-auto">Back</button>
</div>
</div>
</div>
<section class="px-4 py-16 max-w-5xl mx-auto">
<h2 class="text-3xl font-semibold text-center mb-10">Why Use This Tool?</h2>
<div class="grid gap-8 md:grid-cols-3 text-center">
<div>
<div class="text-4xl mb-4">⚡</div>
<h3 class="text-xl font-medium mb-2">Fast Setup</h3>
<p class="text-gray-600 text-sm">Turn your Google Sheet into a REST API in under a minute. No server, no hosting required.</p>
</div>
<div>
<div class="text-4xl mb-4">🧠</div>
<h3 class="text-xl font-medium mb-2">No Coding Needed</h3>
<p class="text-gray-600 text-sm">Generate the exact Google Apps Script code you need—just copy and paste.</p>
</div>
<div>
<div class="text-4xl mb-4">💸</div>
<h3 class="text-xl font-medium mb-2">Completely Free</h3>
<p class="text-gray-600 text-sm">No signup, no cost, no limits. Just paste your spreadsheet and go.</p>
</div>
</div>
</section>
<!-- FAQ Section -->
<section class="px-4 py-16 max-w-2xl mx-auto">
<h2 class="text-3xl font-semibold text-center mb-10">FAQs</h2>
<div class="space-y-4">
<!-- FAQ Item -->
<div>
<button class="w-full text-left flex justify-between items-center text-lg font-medium faq-toggle">
<span>What does this tool do?</span>
<svg class="w-5 h-5 transition-transform duration-200" viewBox="0 0 24 24" fill="none" stroke="currentColor">
<path d="M6 9l6 6 6-6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</button>
<div class="mt-2 text-gray-600 hidden text-sm faq-content">
It generates Google Apps Script code to convert your spreadsheet into a REST API.
</div>
</div>
<div>
<button class="w-full text-left flex justify-between items-center text-lg font-medium faq-toggle">
<span>Is it really free?</span>
<svg class="w-5 h-5 transition-transform duration-200" viewBox="0 0 24 24" fill="none" stroke="currentColor">
<path d="M6 9l6 6 6-6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</button>
<div class="mt-2 text-gray-600 hidden text-sm faq-content">
Yes, it's completely free. No signups, no limits.
</div>
</div>
<div>
<button class="w-full text-left flex justify-between items-center text-lg font-medium faq-toggle">
<span>Do I need to know coding?</span>
<svg class="w-5 h-5 transition-transform duration-200" viewBox="0 0 24 24" fill="none" stroke="currentColor">
<path d="M6 9l6 6 6-6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</button>
<div class="mt-2 text-gray-600 hidden text-sm faq-content">
Nope. Just copy the generated code and paste it into your Apps Script editor.
</div>
</div>
</div>
</section>
<!-- FAQ Toggle Script -->
<script>
document.querySelectorAll('.faq-toggle').forEach(button => {
button.addEventListener('click', () => {
const content = button.nextElementSibling;
const icon = button.querySelector('svg');
const isOpen = !content.classList.contains('hidden');
// Close all
document.querySelectorAll('.faq-content').forEach(el => el.classList.add('hidden'));
document.querySelectorAll('.faq-toggle svg').forEach(i => i.classList.remove('rotate-180'));
// Open if not already open
if (!isOpen) {
content.classList.remove('hidden');
icon.classList.add('rotate-180');
}
});
});
</script>
<script>
function nextSection(sectionId) {
// Toggle section visibility
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);
indicator.classList.toggle('completed', index < currentStep); // Optional: mark previous steps as completed
});
// Show hero section only on the first step (columns)
const heroSection = document.getElementById('heroSection');
if (sectionId === 'columns') {
heroSection.classList.remove('hidden-section');
} else {
heroSection.classList.add('hidden-section');
}
}
// Initialize the first step as active
document.querySelector('.step-indicator[data-step="columns"]').classList.add('active');
</script>
<script src="script.js"></script>
</body>
</html> |