Spaces:
Running
Running
File size: 9,759 Bytes
9905a94 84a03e0 adf2bbe 84a03e0 adf2bbe 1ee1406 267d45f 1624c45 267d45f 1a0c316 81e63ef 1a0c316 267d45f 7fdca6a 267d45f 81e63ef 7fdca6a 81e63ef 7fdca6a 267d45f 7fdca6a 81e63ef 1624c45 81e63ef 267d45f 81e63ef 267d45f 81e63ef 1a0c316 84a03e0 81e63ef 267d45f 81e63ef 267d45f 81e63ef 267d45f 81e63ef b211d42 db3b452 1a0c316 81e63ef b211d42 db3b452 b8229e3 adf2bbe 81e63ef 267d45f adf2bbe b8229e3 267d45f 81e63ef 267d45f 7fdca6a adf2bbe 81e63ef 267d45f adf2bbe b8229e3 267d45f 81e63ef 267d45f adf2bbe db3b452 81e63ef db3b452 adf2bbe 267d45f 81e63ef 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 |
<!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>
<script src="https://cdn.tailwindcss.com"></script>
<style>
.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;
height: calc(100vh - 12rem);
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.2);
color: #1e293b;
border: 1px solid rgba(255, 255, 255, 0.3);
}
.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;
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(8px);
border: 1px solid rgba(255, 255, 255, 0.2);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.step-indicator {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(5px);
border: 1px solid rgba(255, 255, 255, 0.2);
}
.step-indicator.active {
background: rgba(59, 130, 246, 0.8);
color: white;
}
.delete-btn:hover { background: rgba(220, 38, 38, 0.9); }
.glass-container {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(12px);
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" />
</svg>
</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>
<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('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" 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" 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" onclick="showCurlExample('delete')">Delete</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 sm:text-lg font-medium">Back</button>
</div>
</div>
</div>
<script>
function nextSection(sectionId) {
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> |