Hugging Face's logo

Spaces:
smashmash
/
wordpress-prompts
Running

App Files Community
smashmash commited on
Commit
a792c39
·
verified ·
1 Parent(s): 3deadb3

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +441 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Wordpress Prompts
3
- emoji: 🐨
4
- colorFrom: purple
5
- colorTo: indigo
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: wordpress-prompts
3
+ emoji: 🐳
4
+ colorFrom: pink
5
+ colorTo: purple
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,441 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>WordPress Plugin Prompt Builder</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ .feature-card:hover {
11
+ transform: translateY(-5px);
12
+ box-shadow: 0 10px 20px rgba(0,0,0,0.1);
13
+ }
14
+ .prompt-container {
15
+ transition: all 0.3s ease;
16
+ max-height: 0;
17
+ overflow: hidden;
18
+ }
19
+ .prompt-container.show {
20
+ max-height: 1000px;
21
+ }
22
+ .customize-panel {
23
+ transition: max-height 0.5s ease-in-out;
24
+ max-height: 0;
25
+ overflow: hidden;
26
+ }
27
+ .customize-panel.open {
28
+ max-height: 500px;
29
+ }
30
+ #promptOutput {
31
+ white-space: pre-wrap;
32
+ word-break: break-word;
33
+ }
34
+ </style>
35
+ </head>
36
+ <body class="bg-gray-50 min-h-screen">
37
+ <div class="container mx-auto px-4 py-12">
38
+ <header class="text-center mb-12">
39
+ <h1 class="text-4xl font-bold text-indigo-700 mb-4">WordPress Plugin Prompt Builder</h1>
40
+ <p class="text-gray-600 text-lg max-w-2xl mx-auto">Create the perfect AI prompt to generate WordPress plugins with exactly the features you need.</p>
41
+ </header>
42
+
43
+ <div class="bg-white rounded-xl shadow-lg overflow-hidden mb-8">
44
+ <div class="p-6">
45
+ <h2 class="text-2xl font-semibold text-gray-800 mb-6">Step 1: Basic Information</h2>
46
+
47
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
48
+ <div>
49
+ <label class="block text-sm font-medium text-gray-700 mb-1">Plugin Name</label>
50
+ <input type="text" id="pluginName" placeholder="My Awesome Plugin"
51
+ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">
52
+ </div>
53
+ <div>
54
+ <label class="block text-sm font-medium text-gray-700 mb-1">Purpose/Functionality</label>
55
+ <textarea id="pluginPurpose" rows="2" placeholder="Briefly describe what your plugin should do..."
56
+ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"></textarea>
57
+ </div>
58
+ </div>
59
+ </div>
60
+ </div>
61
+
62
+ <div class="bg-white rounded-xl shadow-lg overflow-hidden mb-8">
63
+ <div class="p-6">
64
+ <h2 class="text-2xl font-semibold text-gray-800 mb-6">Step 2: Select Features</h2>
65
+ <p class="text-gray-600 mb-6">Select the features your WordPress plugin should include:</p>
66
+
67
+ <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 mb-8">
68
+ <div class="feature-card bg-gray-50 border border-gray-200 rounded-lg p-4 cursor-pointer transition-all"
69
+ onclick="toggleFeature(this, 'admin_panel')">
70
+ <div class="flex items-center">
71
+ <input type="checkbox" id="admin_panel" class="h-5 w-5 text-indigo-600">
72
+ <label for="admin_panel" class="ml-3 font-medium text-gray-700">Admin Panel</label>
73
+ </div>
74
+ <p class="text-sm text-gray-500 mt-2">Custom admin interface for settings and controls</p>
75
+ </div>
76
+
77
+ <div class="feature-card bg-gray-50 border border-gray-200 rounded-lg p-4 cursor-pointer transition-all"
78
+ onclick="toggleFeature(this, 'shortcodes')">
79
+ <div class="flex items-center">
80
+ <input type="checkbox" id="shortcodes" class="h-5 w-5 text-indigo-600">
81
+ <label for="shortcodes" class="ml-3 font-medium text-gray-700">Shortcodes</label>
82
+ </div>
83
+ <p class="text-sm text-gray-500 mt-2">Create custom shortcodes for frontend output</p>
84
+ </div>
85
+
86
+ <div class="feature-card bg-gray-50 border border-gray-200 rounded-lg p-4 cursor-pointer transition-all"
87
+ onclick="toggleFeature(this, 'widgets')">
88
+ <div class="flex items-center">
89
+ <input type="checkbox" id="widgets" class="h-5 w-5 text-indigo-600">
90
+ <label for="widgets" class="ml-3 font-medium text-gray-700">Widgets</label>
91
+ </div>
92
+ <p class="text-sm text-gray-500 mt-2">Add custom widgets for drag-and-drop functionality</p>
93
+ </div>
94
+
95
+ <div class="feature-card bg-gray-50 border border-gray-200 rounded-lg p-4 cursor-pointer transition-all"
96
+ onclick="toggleFeature(this, 'rest_api')">
97
+ <div class="flex items-center">
98
+ <input type="checkbox" id="rest_api" class="h-5 w-5 text-indigo-600">
99
+ <label for="rest_api" class="ml-3 font-medium text-gray-700">REST API</label>
100
+ </div>
101
+ <p class="text-sm text-gray-500 mt-2">Expose custom endpoints for external integrations</p>
102
+ </div>
103
+
104
+ <div class="feature-card bg-gray-50 border border-gray-200 rounded-lg p-4 cursor-pointer transition-all"
105
+ onclick="toggleFeature(this, 'cpt')">
106
+ <div class="flex items-center">
107
+ <input type="checkbox" id="cpt" class="h-5 w-5 text-indigo-600">
108
+ <label for="cpt" class="ml-3 font-medium text-gray-700">Custom Post Types</label>
109
+ </div>
110
+ <p class="text-sm text-gray-500 mt-2">Create and manage custom content types</p>
111
+ </div>
112
+
113
+ <div class="feature-card bg-gray-50 border border-gray-200 rounded-lg p-4 cursor-pointer transition-all"
114
+ onclick="toggleFeature(this, 'taxonomy')">
115
+ <div class="flex items-center">
116
+ <input type="checkbox" id="taxonomy" class="h-5 w-5 text-indigo-600">
117
+ <label for="taxonomy" class="ml-3 font-medium text-gray-700">Custom Taxonomies</label>
118
+ </div>
119
+ <p class="text-sm text-gray-500 mt-2">Add classification and organization systems</p>
120
+ </div>
121
+
122
+ <div class="feature-card bg-gray-50 border border-gray-200 rounded-lg p-4 cursor-pointer transition-all"
123
+ onclick="toggleFeature(this, 'settings_page')">
124
+ <div class="flex items-center">
125
+ <input type="checkbox" id="settings_page" class="h-5 w-5 text-indigo-600">
126
+ <label for="settings_page" class="ml-3 font-medium text-gray-700">Settings Page</label>
127
+ </div>
128
+ <p class="text-sm text-gray-500 mt-2">Create options for users to customize behavior</p>
129
+ </div>
130
+
131
+ <div class="feature-card bg-gray-50 border border-gray-200 rounded-lg p-4 cursor-pointer transition-all"
132
+ onclick="toggleFeature(this, 'cron_jobs')">
133
+ <div class="flex items-center">
134
+ <input type="checkbox" id="cron_jobs" class="h-5 w-5 text-indigo-600">
135
+ <label for="cron_jobs" class="ml-3 font-medium text-gray-700">Cron Jobs</label>
136
+ </div>
137
+ <p class="text-sm text-gray-500 mt-2">Schedule automatic background tasks</p>
138
+ </div>
139
+
140
+ <div class="feature-card bg-gray-50 border border-gray-200 rounded-lg p-4 cursor-pointer transition-all"
141
+ onclick="toggleFeature(this, 'multilingual')">
142
+ <div class="flex items-center">
143
+ <input type="checkbox" id="multilingual" class="h-5 w-5 text-indigo-600">
144
+ <label for="multilingual" class="ml-3 font-medium text-gray-700">Multilingual</label>
145
+ </div>
146
+ <p class="text-sm text-gray-500 mt-2">Prepare for translation (i18n ready)</p>
147
+ </div>
148
+ </div>
149
+
150
+ <!-- Advanced options toggle -->
151
+ <div class="flex items-center justify-center mb-6">
152
+ <button id="advancedToggle" class="flex items-center text-indigo-600 hover:text-indigo-800">
153
+ <span class="mr-2">Show Advanced Options</span>
154
+ <i class="fas fa-chevron-down text-sm"></i>
155
+ </button>
156
+ </div>
157
+
158
+ <!-- Advanced options panel -->
159
+ <div id="advancedOptions" class="customize-panel border-t border-gray-200 pt-6">
160
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
161
+ <div>
162
+ <label class="block text-sm font-medium text-gray-700 mb-2">Development Approach</label>
163
+ <select id="devApproach" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">
164
+ <option value="oop">Object-Oriented Programming (OOP)</option>
165
+ <option value="functional">Functional Programming</option>
166
+ <option value="mixed">Mixed Approach</option>
167
+ </select>
168
+ </div>
169
+ <div>
170
+ <label class="block text-sm font-medium text-gray-700 mb-2">Code Standards</label>
171
+ <select id="codeStandards" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">
172
+ <option value="wp">WordPress Coding Standards</option>
173
+ <option value="psr">PSR Standards</option>
174
+ <option value="custom">Custom Organization Standards</option>
175
+ </select>
176
+ </div>
177
+ </div>
178
+
179
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
180
+ <div>
181
+ <label class="block text-sm font-medium text-gray-700 mb-2">Security Requirements</label>
182
+ <div class="space-y-2">
183
+ <div class="flex items-center">
184
+ <input type="checkbox" id="nonces" class="h-4 w-4 text-indigo-600">
185
+ <label for="nonces" class="ml-2 text-gray-700">Nonces for all forms</label>
186
+ </div>
187
+ <div class="flex items-center">
188
+ <input type="checkbox" id="sanitization" class="h-4 w-4 text-indigo-600">
189
+ <label for="sanitization" class="ml-2 text-gray-700">Data sanitization</label>
190
+ </div>
191
+ <div class="flex items-center">
192
+ <input type="checkbox" id="escaping" class="h-4 w-4 text-indigo-600">
193
+ <label for="escaping" class="ml-2 text-gray-700">Output escaping</label>
194
+ </div>
195
+ <div class="flex items-center">
196
+ <input type="checkbox" id="capabilities" class="h-4 w-4 text-indigo-600">
197
+ <label for="capabilities" class="ml-2 text-gray-700">Capability checks</label>
198
+ </div>
199
+ </div>
200
+ </div>
201
+
202
+ <div>
203
+ <label class="block text-sm font-medium text-gray-700 mb-2">Tests</label>
204
+ <div class="space-y-2">
205
+ <div class="flex items-center">
206
+ <input type="checkbox" id="unit_tests" class="h-4 w-4 text-indigo-600">
207
+ <label for="unit_tests" class="ml-2 text-gray-700">Unit tests</label>
208
+ </div>
209
+ <div class="flex items-center">
210
+ <input type="checkbox" id="integration_tests" class="h-4 w-4 text-indigo-600">
211
+ <label for="integration_tests" class="ml-2 text-gray-700">Integration tests</label>
212
+ </div>
213
+ <div class="flex items-center">
214
+ <input type="checkbox" id="phpunit" class="h-4 w-4 text-indigo-600">
215
+ <label for="phpunit" class="ml-2 text-gray-700">PHPUnit setup</label>
216
+ </div>
217
+ </div>
218
+ </div>
219
+ </div>
220
+ </div>
221
+ </div>
222
+ </div>
223
+
224
+ <div class="bg-white rounded-xl shadow-lg overflow-hidden mb-8">
225
+ <div class="p-6">
226
+ <h2 class="text-2xl font-semibold text-gray-800 mb-6">Step 3: Additional Requirements</h2>
227
+
228
+ <div class="mb-6">
229
+ <label class="block text-sm font-medium text-gray-700 mb-2">Third-Party Integrations</label>
230
+ <div class="flex flex-wrap gap-2">
231
+ <span class="integration-tag bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm flex items-center"
232
+ onclick="toggleIntegration(this)" data-value="woocommerce">
233
+ <input type="checkbox" class="hidden" id="int_woocommerce" value="woocommerce">
234
+ WooCommerce <i class="fas fa-check ml-2"></i>
235
+ </span>
236
+ <span class="integration-tag bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm flex items-center"
237
+ onclick="toggleIntegration(this)" data-value="gravity_forms">
238
+ <input type="checkbox" class="hidden" id="int_gravity_forms" value="gravity_forms">
239
+ Gravity Forms <i class="fas fa-check ml-2"></i>
240
+ </span>
241
+ <span class="integration-tag bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm flex items-center"
242
+ onclick="toggleIntegration(this)" data-value="cf7">
243
+ <input type="checkbox" class="hidden" id="int_cf7" value="cf7">
244
+ Contact Form 7 <i class="fas fa-check ml-2"></i>
245
+ </span>
246
+ <span class="integration-tag bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm flex items-center"
247
+ onclick="toggleIntegration(this)" data-value="elementor">
248
+ <input type="checkbox" class="hidden" id="int_elementor" value="elementor">
249
+ Elementor <i class="fas fa-check ml-2"></i>
250
+ </span>
251
+ <span class="integration-tag bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm flex items-center"
252
+ onclick="toggleIntegration(this)" data-value="acf">
253
+ <input type="checkbox" class="hidden" id="int_acf" value="acf">
254
+ ACF <i class="fas fa-check ml-2"></i>
255
+ </span>
256
+ </div>
257
+ </div>
258
+
259
+ <div>
260
+ <label for="customRequirements" class="block text-sm font-medium text-gray-700 mb-2">Custom Requirements</label>
261
+ <textarea id="customRequirements" rows="3" placeholder="Any other specific requirements for your plugin..."
262
+ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 mb-4"></textarea>
263
+ </div>
264
+
265
+ <div class="flex justify-center mt-8">
266
+ <button id="generatePrompt" class="px-8 py-3 bg-indigo-600 text-white font-medium rounded-lg hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 transition-colors flex items-center">
267
+ <i class="fas fa-magic mr-2"></i> Generate Plugin Prompt
268
+ </button>
269
+ </div>
270
+ </div>
271
+ </div>
272
+
273
+ <!-- Prompt Output -->
274
+ <div class="prompt-container bg-white rounded-xl shadow-lg overflow-hidden">
275
+ <div class="p-6">
276
+ <div class="flex justify-between items-center mb-6">
277
+ <h2 class="text-2xl font-semibold text-gray-800">Your Generated Prompt</h2>
278
+ <button id="copyPrompt" class="flex items-center text-sm text-indigo-600 hover:text-indigo-800">
279
+ <i class="fas fa-copy mr-1"></i> Copy to Clipboard
280
+ </button>
281
+ </div>
282
+
283
+ <div id="promptOutput" class="bg-gray-50 p-6 rounded-lg text-gray-800 font-mono text-sm overflow-x-auto"></div>
284
+
285
+ <div class="mt-6 text-right">
286
+ <button id="copyPrompt" class="px-6 py-2 bg-indigo-100 text-indigo-700 font-medium rounded-lg hover:bg-indigo-200 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 transition-colors flex items-center ml-auto" onclick="copyToClipboard()">
287
+ <i class="fas fa-copy mr-2"></i> Copy Prompt
288
+ </button>
289
+ </div>
290
+ </div>
291
+ </div>
292
+ </div>
293
+
294
+ <script>
295
+ // Toggle feature selection
296
+ function toggleFeature(card, featureId) {
297
+ const checkbox = card.querySelector('input[type="checkbox"]');
298
+ checkbox.checked = !checkbox.checked;
299
+
300
+ if (checkbox.checked) {
301
+ card.classList.add('bg-indigo-50', 'border-indigo-300');
302
+ } else {
303
+ card.classList.remove('bg-indigo-50', 'border-indigo-300');
304
+ }
305
+ }
306
+
307
+ // Toggle integration selection
308
+ function toggleIntegration(tag) {
309
+ const checkbox = tag.querySelector('input[type="checkbox"]');
310
+ checkbox.checked = !checkbox.checked;
311
+
312
+ if (checkbox.checked) {
313
+ tag.classList.add('bg-indigo-200', 'text-indigo-900');
314
+ } else {
315
+ tag.classList.remove('bg-indigo-200', 'text-indigo-900');
316
+ }
317
+ }
318
+
319
+ // Toggle advanced options
320
+ document.getElementById('advancedToggle').addEventListener('click', function() {
321
+ const panel = document.getElementById('advancedOptions');
322
+ const icon = this.querySelector('i');
323
+
324
+ panel.classList.toggle('open');
325
+
326
+ if (panel.classList.contains('open')) {
327
+ this.innerHTML = '<span class="mr-2">Hide Advanced Options</span><i class="fas fa-chevron-up text-sm"></i>';
328
+ } else {
329
+ this.innerHTML = '<span class="mr-2">Show Advanced Options</span><i class="fas fa-chevron-down text-sm"></i>';
330
+ }
331
+ });
332
+
333
+ // Generate the prompt
334
+ document.getElementById('generatePrompt').addEventListener('click', function() {
335
+ const pluginName = document.getElementById('pluginName').value.trim();
336
+ const pluginPurpose = document.getElementById('pluginPurpose').value.trim();
337
+
338
+ if (!pluginName || !pluginPurpose) {
339
+ alert('Please fill in the plugin name and purpose before generating the prompt.');
340
+ return;
341
+ }
342
+
343
+ // Collect features
344
+ const features = [];
345
+ document.querySelectorAll('.feature-card input[type="checkbox"]:checked').forEach(checkbox => {
346
+ const label = checkbox.nextElementSibling.textContent;
347
+ features.push(label);
348
+ });
349
+
350
+ // Collect advanced options
351
+ const devApproach = document.getElementById('devApproach').value;
352
+ const codeStandards = document.getElementById('codeStandards').value;
353
+
354
+ // Collect security requirements
355
+ const security = [];
356
+ document.querySelectorAll('#advancedOptions input[type="checkbox"]:checked').forEach(checkbox => {
357
+ security.push(checkbox.nextElementSibling.textContent);
358
+ });
359
+
360
+ // Collect integrations
361
+ const integrations = [];
362
+ document.querySelectorAll('.integration-tag input[type="checkbox"]:checked').forEach(checkbox => {
363
+ integrations.push(checkbox.value);
364
+ });
365
+
366
+ const customRequirements = document.getElementById('customRequirements').value.trim();
367
+
368
+ // Build the prompt
369
+ let prompt = `Create a WordPress plugin called "${pluginName}" with the following specifications:\n\n`;
370
+ prompt += `=== PURPOSE ===\n${pluginPurpose}\n\n`;
371
+
372
+ if (features.length > 0) {
373
+ prompt += `=== REQUIRED FEATURES ===\n`;
374
+ prompt += `${features.join('\n')}\n\n`;
375
+ }
376
+
377
+ if (integrations.length > 0) {
378
+ prompt += `=== INTEGRATIONS ===\n`;
379
+ prompt += integrations.map(int => {
380
+ switch(int) {
381
+ case 'woocommerce': return "Integrate with WooCommerce";
382
+ case 'gravity_forms': return "Integrate with Gravity Forms";
383
+ case 'cf7': return "Integrate with Contact Form 7";
384
+ case 'elementor': return "Integrate with Elementor";
385
+ case 'acf': return "Integrate with Advanced Custom Fields";
386
+ default: return `Integrate with ${int}`;
387
+ }
388
+ }).join('\n') + '\n\n';
389
+ }
390
+
391
+ prompt += `=== DEVELOPMENT APPROACH ===\n`;
392
+ switch(devApproach) {
393
+ case 'oop': prompt += "Use object-oriented programming with proper class structure.\n"; break;
394
+ case 'functional': prompt += "Use functional programming approach.\n"; break;
395
+ case 'mixed': prompt += "Use a combination of OOP and functional programming as appropriate.\n"; break;
396
+ }
397
+
398
+ prompt += `=== CODING STANDARDS ===\n`;
399
+ switch(codeStandards) {
400
+ case 'wp': prompt += "Follow WordPress coding standards.\n"; break;
401
+ case 'psr': prompt += "Follow PSR standards (specify which ones if needed).\n"; break;
402
+ case 'custom': prompt += "Follow custom organizational standards.\n"; break;
403
+ }
404
+
405
+ if (security.length > 0) {
406
+ prompt += `=== SECURITY REQUIREMENTS ===\n`;
407
+ prompt += `${security.join('\n')}\n\n`;
408
+ }
409
+
410
+ if (customRequirements) {
411
+ prompt += `=== ADDITIONAL REQUIREMENTS ===\n`;
412
+ prompt += `${customRequirements}\n\n`;
413
+ }
414
+
415
+ prompt += `=== OUTPUT FORMAT ===\n`;
416
+ prompt += `Provide the complete plugin code in a single file with appropriate comments and documentation. Include installation instructions and basic usage examples.`;
417
+
418
+ // Display the prompt
419
+ document.getElementById('promptOutput').textContent = prompt;
420
+ document.querySelector('.prompt-container').classList.add('show');
421
+ });
422
+
423
+ // Copy to clipboard
424
+ function copyToClipboard() {
425
+ const promptText = document.getElementById('promptOutput').textContent;
426
+ if (!promptText) {
427
+ alert('Please generate a prompt first.');
428
+ return;
429
+ }
430
+
431
+ navigator.clipboard.writeText(promptText).then(() => {
432
+ const copyBtn = document.querySelector('#copyPrompt');
433
+ copyBtn.innerHTML = '<i class="fas fa-check mr-2"></i> Copied!';
434
+ setTimeout(() => {
435
+ copyBtn.innerHTML = '<i class="fas fa-copy mr-2"></i> Copy Prompt';
436
+ }, 2000);
437
+ });
438
+ }
439
+ </script>
440
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - <a href="https://enzostvs-deepsite.hf.space?remix=smashmash/wordpress-prompts" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body>
441
+ </html>