Hugging Face's logo

Spaces:
briskwave
/
anycoder-c159d931
Running

App Files Community
briskwave commited on
Commit
ecbfafb
·
verified ·
1 Parent(s): b72b3c6

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +839 -19
index.html CHANGED
@@ -1,19 +1,839 @@
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>WebPlato WordPress Setup Wizard</title>
7
+ <!-- Icons -->
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <!-- Fonts -->
10
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
11
+
12
+ <style>
13
+ :root {
14
+ --primary: #4f46e5;
15
+ --primary-hover: #4338ca;
16
+ --secondary: #64748b;
17
+ --success: #10b981;
18
+ --warning: #f59e0b;
19
+ --danger: #ef4444;
20
+ --bg-body: #f1f5f9;
21
+ --bg-card: #ffffff;
22
+ --text-main: #1e293b;
23
+ --text-muted: #64748b;
24
+ --border: #e2e8f0;
25
+ --sidebar-width: 280px;
26
+ --header-height: 70px;
27
+ }
28
+
29
+ * {
30
+ box-sizing: border-box;
31
+ margin: 0;
32
+ padding: 0;
33
+ }
34
+
35
+ body {
36
+ font-family: 'Inter', sans-serif;
37
+ background-color: var(--bg-body);
38
+ color: var(--text-main);
39
+ height: 100vh;
40
+ display: flex;
41
+ overflow: hidden;
42
+ }
43
+
44
+ /* --- Sidebar --- */
45
+ .sidebar {
46
+ width: var(--sidebar-width);
47
+ background: var(--bg-card);
48
+ border-right: 1px solid var(--border);
49
+ display: flex;
50
+ flex-direction: column;
51
+ z-index: 10;
52
+ transition: transform 0.3s ease;
53
+ }
54
+
55
+ .sidebar-header {
56
+ height: var(--header-height);
57
+ display: flex;
58
+ align-items: center;
59
+ padding: 0 20px;
60
+ border-bottom: 1px solid var(--border);
61
+ }
62
+
63
+ .logo {
64
+ font-weight: 800;
65
+ font-size: 1.5rem;
66
+ color: var(--primary);
67
+ display: flex;
68
+ align-items: center;
69
+ gap: 10px;
70
+ }
71
+
72
+ .sidebar-nav {
73
+ flex: 1;
74
+ overflow-y: auto;
75
+ padding: 20px 0;
76
+ }
77
+
78
+ .nav-item {
79
+ padding: 12px 20px;
80
+ display: flex;
81
+ align-items: center;
82
+ gap: 12px;
83
+ color: var(--text-muted);
84
+ text-decoration: none;
85
+ cursor: pointer;
86
+ transition: all 0.2s;
87
+ font-size: 0.95rem;
88
+ border-left: 3px solid transparent;
89
+ }
90
+
91
+ .nav-item:hover {
92
+ background-color: #f8fafc;
93
+ color: var(--primary);
94
+ }
95
+
96
+ .nav-item.active {
97
+ background-color: #eef2ff;
98
+ color: var(--primary);
99
+ border-left-color: var(--primary);
100
+ font-weight: 600;
101
+ }
102
+
103
+ .nav-item i {
104
+ width: 20px;
105
+ text-align: center;
106
+ }
107
+
108
+ /* --- Main Content --- */
109
+ .main-content {
110
+ flex: 1;
111
+ display: flex;
112
+ flex-direction: column;
113
+ overflow: hidden;
114
+ }
115
+
116
+ .top-bar {
117
+ height: var(--header-height);
118
+ background: var(--bg-card);
119
+ border-bottom: 1px solid var(--border);
120
+ display: flex;
121
+ align-items: center;
122
+ justify-content: space-between;
123
+ padding: 0 30px;
124
+ }
125
+
126
+ .breadcrumb {
127
+ font-size: 0.9rem;
128
+ color: var(--text-muted);
129
+ }
130
+
131
+ .breadcrumb span {
132
+ color: var(--text-main);
133
+ font-weight: 600;
134
+ }
135
+
136
+ .progress-container {
137
+ display: flex;
138
+ align-items: center;
139
+ gap: 15px;
140
+ }
141
+
142
+ .progress-label {
143
+ font-size: 0.85rem;
144
+ font-weight: 600;
145
+ }
146
+
147
+ .progress-bar-bg {
148
+ width: 200px;
149
+ height: 8px;
150
+ background: #e2e8f0;
151
+ border-radius: 4px;
152
+ overflow: hidden;
153
+ }
154
+
155
+ .progress-bar-fill {
156
+ height: 100%;
157
+ background: var(--success);
158
+ width: 0%;
159
+ transition: width 0.5s ease;
160
+ }
161
+
162
+ .content-area {
163
+ flex: 1;
164
+ overflow-y: auto;
165
+ padding: 30px;
166
+ }
167
+
168
+ /* --- Sections --- */
169
+ .section-panel {
170
+ display: none;
171
+ animation: fadeIn 0.3s ease;
172
+ }
173
+
174
+ .section-panel.active {
175
+ display: block;
176
+ }
177
+
178
+ @keyframes fadeIn {
179
+ from { opacity: 0; transform: translateY(10px); }
180
+ to { opacity: 1; transform: translateY(0); }
181
+ }
182
+
183
+ .panel-header {
184
+ margin-bottom: 25px;
185
+ }
186
+
187
+ .panel-title {
188
+ font-size: 1.8rem;
189
+ font-weight: 700;
190
+ margin-bottom: 10px;
191
+ }
192
+
193
+ .panel-desc {
194
+ color: var(--text-muted);
195
+ max-width: 800px;
196
+ line-height: 1.6;
197
+ }
198
+
199
+ /* --- Cards & Grids --- */
200
+ .grid-container {
201
+ display: grid;
202
+ grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
203
+ gap: 20px;
204
+ margin-bottom: 30px;
205
+ }
206
+
207
+ .card {
208
+ background: var(--bg-card);
209
+ border: 1px solid var(--border);
210
+ border-radius: 8px;
211
+ padding: 20px;
212
+ box-shadow: 0 1px 3px rgba(0,0,0,0.05);
213
+ }
214
+
215
+ .card-header {
216
+ display: flex;
217
+ justify-content: space-between;
218
+ align-items: center;
219
+ margin-bottom: 15px;
220
+ padding-bottom: 10px;
221
+ border-bottom: 1px solid #f1f5f9;
222
+ }
223
+
224
+ .card-title {
225
+ font-weight: 600;
226
+ color: var(--text-main);
227
+ display: flex;
228
+ align-items: center;
229
+ gap: 8px;
230
+ }
231
+
232
+ /* --- Forms & Inputs --- */
233
+ .form-group {
234
+ margin-bottom: 15px;
235
+ }
236
+
237
+ .form-label {
238
+ display: block;
239
+ margin-bottom: 8px;
240
+ font-size: 0.9rem;
241
+ font-weight: 500;
242
+ }
243
+
244
+ .form-control {
245
+ width: 100%;
246
+ padding: 10px 12px;
247
+ border: 1px solid var(--border);
248
+ border-radius: 6px;
249
+ font-family: inherit;
250
+ font-size: 0.95rem;
251
+ transition: border-color 0.2s;
252
+ }
253
+
254
+ .form-control:focus {
255
+ outline: none;
256
+ border-color: var(--primary);
257
+ box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
258
+ }
259
+
260
+ .btn {
261
+ display: inline-flex;
262
+ align-items: center;
263
+ justify-content: center;
264
+ padding: 10px 20px;
265
+ border-radius: 6px;
266
+ font-weight: 500;
267
+ cursor: pointer;
268
+ border: none;
269
+ transition: all 0.2s;
270
+ gap: 8px;
271
+ }
272
+
273
+ .btn-primary {
274
+ background: var(--primary);
275
+ color: white;
276
+ }
277
+
278
+ .btn-primary:hover {
279
+ background: var(--primary-hover);
280
+ }
281
+
282
+ .btn-success {
283
+ background: var(--success);
284
+ color: white;
285
+ }
286
+
287
+ .btn-outline {
288
+ background: transparent;
289
+ border: 1px solid var(--border);
290
+ color: var(--text-main);
291
+ }
292
+
293
+ .btn-sm {
294
+ padding: 6px 12px;
295
+ font-size: 0.85rem;
296
+ }
297
+
298
+ /* --- Checklists --- */
299
+ .checklist-item {
300
+ display: flex;
301
+ align-items: flex-start;
302
+ padding: 12px;
303
+ border-bottom: 1px solid #f1f5f9;
304
+ transition: background 0.2s;
305
+ }
306
+
307
+ .checklist-item:last-child {
308
+ border-bottom: none;
309
+ }
310
+
311
+ .checklist-item:hover {
312
+ background: #f8fafc;
313
+ }
314
+
315
+ .checkbox-wrapper {
316
+ margin-right: 15px;
317
+ padding-top: 2px;
318
+ }
319
+
320
+ .custom-checkbox {
321
+ width: 20px;
322
+ height: 20px;
323
+ cursor: pointer;
324
+ accent-color: var(--success);
325
+ }
326
+
327
+ .checklist-content h4 {
328
+ font-size: 1rem;
329
+ margin-bottom: 4px;
330
+ }
331
+
332
+ .checklist-content p {
333
+ font-size: 0.85rem;
334
+ color: var(--text-muted);
335
+ }
336
+
337
+ /* --- Status Badges --- */
338
+ .badge {
339
+ padding: 4px 8px;
340
+ border-radius: 4px;
341
+ font-size: 0.75rem;
342
+ font-weight: 600;
343
+ text-transform: uppercase;
344
+ }
345
+
346
+ .badge-blue { background: #dbeafe; color: #1e40af; }
347
+ .badge-green { background: #d1fae5; color: #065f46; }
348
+ .badge-yellow { background: #fef3c7; color: #92400e; }
349
+ .badge-red { background: #fee2e2; color: #991b1b; }
350
+
351
+ /* --- Code Block --- */
352
+ .code-block {
353
+ background: #1e293b;
354
+ color: #e2e8f0;
355
+ padding: 15px;
356
+ border-radius: 6px;
357
+ font-family: 'Courier New', monospace;
358
+ font-size: 0.85rem;
359
+ overflow-x: auto;
360
+ margin-top: 10px;
361
+ }
362
+
363
+ /* --- Responsive --- */
364
+ @media (max-width: 768px) {
365
+ .sidebar {
366
+ position: fixed;
367
+ left: -280px;
368
+ height: 100%;
369
+ }
370
+ .sidebar.open {
371
+ left: 0;
372
+ }
373
+ .main-content {
374
+ width: 100%;
375
+ }
376
+ .mobile-toggle {
377
+ display: block;
378
+ margin-right: 15px;
379
+ font-size: 1.2rem;
380
+ cursor: pointer;
381
+ }
382
+ }
383
+ @media (min-width: 769px) {
384
+ .mobile-toggle {
385
+ display: none;
386
+ }
387
+ }
388
+
389
+ /* Toast Notification */
390
+ .toast {
391
+ position: fixed;
392
+ bottom: 20px;
393
+ right: 20px;
394
+ background: var(--text-main);
395
+ color: white;
396
+ padding: 12px 24px;
397
+ border-radius: 8px;
398
+ box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1);
399
+ transform: translateY(100px);
400
+ opacity: 0;
401
+ transition: all 0.3s;
402
+ z-index: 100;
403
+ display: flex;
404
+ align-items: center;
405
+ gap: 10px;
406
+ }
407
+ .toast.show {
408
+ transform: translateY(0);
409
+ opacity: 1;
410
+ }
411
+ .toast i { color: var(--success); }
412
+
413
+ .anycoder-link {
414
+ font-size: 0.75rem;
415
+ color: var(--text-muted);
416
+ text-decoration: none;
417
+ margin-top: 5px;
418
+ display: block;
419
+ }
420
+ .anycoder-link:hover { text-decoration: underline; color: var(--primary); }
421
+
422
+ </style>
423
+ </head>
424
+ <body>
425
+
426
+ <!-- Sidebar -->
427
+ <nav class="sidebar" id="sidebar">
428
+ <div class="sidebar-header">
429
+ <div class="logo">
430
+ <i class="fa-solid fa-layer-group"></i> WebPlato
431
+ </div>
432
+ </div>
433
+ <div class="sidebar-nav">
434
+ <a class="nav-item active" onclick="switchTab('part1', this)"><i class="fa-solid fa-wand-magic-sparkles"></i> Part 1: Core Setup</a>
435
+ <a class="nav-item" onclick="switchTab('part2', this)"><i class="fa-solid fa-cart-shopping"></i> Part 2: EDD Config</a>
436
+ <a class="nav-item" onclick="switchTab('part3', this)"><i class="fa-solid fa-chart-line"></i> Part 3: Admin Panel</a>
437
+ <a class="nav-item" onclick="switchTab('part4', this)"><i class="fa-solid fa-users-gear"></i> Part 4: Roles</a>
438
+ <a class="nav-item" onclick="switchTab('part5', this)"><i class="fa-solid fa-plug"></i> Part 5: Plugins</a>
439
+ <a class="nav-item" onclick="switchTab('part6', this)"><i class="fa-solid fa-file-code"></i> Part 6: Templates</a>
440
+ <a class="nav-item" onclick="switchTab('part7', this)"><i class="fa-solid fa-magnifying-glass-chart"></i> Part 7: SEO</a>
441
+ <a class="nav-item" onclick="switchTab('part8', this)"><i class="fa-solid fa-shield-halved"></i> Part 8: Security</a>
442
+ <a class="nav-item" onclick="switchTab('part9', this)"><i class="fa-solid fa-headset"></i> Part 9: CX Features</a>
443
+ <a class="nav-item" onclick="switchTab('part10', this)"><i class="fa-solid fa-clipboard-check"></i> Part 10: Testing</a>
444
+ <a class="nav-item" onclick="switchTab('part11', this)"><i class="fa-solid fa-box-open"></i> Part 11: Deliverables</a>
445
+ </div>
446
+ <div style="padding: 20px;">
447
+ <div style="background: #eef2ff; padding: 15px; border-radius: 8px; text-align: center;">
448
+ <h5 style="color: var(--primary); margin-bottom: 5px;">WebPlato v1.0</h5>
449
+ <p style="font-size: 0.8rem; color: var(--text-muted);">System Ready</p>
450
+ <a href="https://huggingface.co/spaces/akhaliq/anycoder" class="anycoder-link" target="_blank">Built with anycoder</a>
451
+ </div>
452
+ </div>
453
+ </nav>
454
+
455
+ <!-- Main Content -->
456
+ <main class="main-content">
457
+ <!-- Top Bar -->
458
+ <header class="top-bar">
459
+ <div style="display: flex; align-items: center;">
460
+ <i class="fa-solid fa-bars mobile-toggle" onclick="toggleSidebar()"></i>
461
+ <div class="breadcrumb">
462
+ Dashboard / <span id="current-section-name">Core Setup</span>
463
+ </div>
464
+ </div>
465
+ <div class="progress-container">
466
+ <span class="progress-label">Setup Progress</span>
467
+ <div class="progress-bar-bg">
468
+ <div class="progress-bar-fill" id="main-progress"></div>
469
+ </div>
470
+ <span id="progress-text" style="font-size: 0.8rem; font-weight: 600; color: var(--text-muted);">0%</span>
471
+ </div>
472
+ </header>
473
+
474
+ <!-- Content Area -->
475
+ <div class="content-area">
476
+
477
+ <!-- PART 1: Core Setup -->
478
+ <div id="part1" class="section-panel active">
479
+ <div class="panel-header">
480
+ <h1 class="panel-title">Part 1: WordPress Core Setup</h1>
481
+ <p class="panel-desc">Initialize the foundation of your WebPlato store by creating essential pages and configuring basic WordPress settings.</p>
482
+ </div>
483
+
484
+ <div class="grid-container">
485
+ <div class="card" style="grid-column: 1 / -1;">
486
+ <div class="card-header">
487
+ <div class="card-title"><i class="fa-solid fa-sitemap"></i> Essential Pages</div>
488
+ <button class="btn btn-primary btn-sm" onclick="simulateAction('Creating all pages...', 'All pages created successfully!')">
489
+ <i class="fa-solid fa-plus"></i> Create All Pages
490
+ </button>
491
+ </div>
492
+ <div style="overflow-x: auto;">
493
+ <table style="width: 100%; border-collapse: collapse; font-size: 0.9rem;">
494
+ <thead>
495
+ <tr style="text-align: left; border-bottom: 2px solid #f1f5f9;">
496
+ <th style="padding: 10px;">Page Name</th>
497
+ <th style="padding: 10px;">Slug</th>
498
+ <th style="padding: 10px;">Template</th>
499
+ <th style="padding: 10px;">Status</th>
500
+ </tr>
501
+ </thead>
502
+ <tbody>
503
+ <tr>
504
+ <td style="padding: 10px; font-weight: 600;">Home</td>
505
+ <td style="padding: 10px; color: var(--text-muted);">home</td>
506
+ <td style="padding: 10px;">front-page.php</td>
507
+ <td style="padding: 10px;"><span class="badge badge-yellow">Pending</span></td>
508
+ </tr>
509
+ <tr>
510
+ <td style="padding: 10px; font-weight: 600;">Shop</td>
511
+ <td style="padding: 10px; color: var(--text-muted);">shop</td>
512
+ <td style="padding: 10px;">page-shop.php</td>
513
+ <td style="padding: 10px;"><span class="badge badge-yellow">Pending</span></td>
514
+ </tr>
515
+ <tr>
516
+ <td style="padding: 10px; font-weight: 600;">Cart</td>
517
+ <td style="padding: 10px; color: var(--text-muted);">cart</td>
518
+ <td style="padding: 10px;">page-cart.php</td>
519
+ <td style="padding: 10px;"><span class="badge badge-yellow">Pending</span></td>
520
+ </tr>
521
+ <tr>
522
+ <td style="padding: 10px; font-weight: 600;">Checkout</td>
523
+ <td style="padding: 10px; color: var(--text-muted);">checkout</td>
524
+ <td style="padding: 10px;">page-checkout.php</td>
525
+ <td style="padding: 10px;"><span class="badge badge-yellow">Pending</span></td>
526
+ </tr>
527
+ <tr>
528
+ <td style="padding: 10px; font-weight: 600;">My Account</td>
529
+ <td style="padding: 10px; color: var(--text-muted);">my-account</td>
530
+ <td style="padding: 10px;">page-account.php</td>
531
+ <td style="padding: 10px;"><span class="badge badge-yellow">Pending</span></td>
532
+ </tr>
533
+ <tr>
534
+ <td style="padding: 10px; font-weight: 600;">Purchase History</td>
535
+ <td style="padding: 10px; color: var(--text-muted);">purchase-history</td>
536
+ <td style="padding: 10px;">page-purchase-history.php</td>
537
+ <td style="padding: 10px;"><span class="badge badge-yellow">Pending</span></td>
538
+ </tr>
539
+ <tr>
540
+ <td style="padding: 10px; font-weight: 600;">About Us</td>
541
+ <td style="padding: 10px; color: var(--text-muted);">about</td>
542
+ <td style="padding: 10px;">page-about.php</td>
543
+ <td style="padding: 10px;"><span class="badge badge-yellow">Pending</span></td>
544
+ </tr>
545
+ <tr>
546
+ <td style="padding: 10px; font-weight: 600;">Contact Us</td>
547
+ <td style="padding: 10px; color: var(--text-muted);">contact</td>
548
+ <td style="padding: 10px;">page-contact.php</td>
549
+ <td style="padding: 10px;"><span class="badge badge-yellow">Pending</span></td>
550
+ </tr>
551
+ <tr>
552
+ <td style="padding: 10px; font-weight: 600;">Terms & Conditions</td>
553
+ <td style="padding: 10px; color: var(--text-muted);">terms</td>
554
+ <td style="padding: 10px;">page-terms.php</td>
555
+ <td style="padding: 10px;"><span class="badge badge-yellow">Pending</span></td>
556
+ </tr>
557
+ <tr>
558
+ <td style="padding: 10px; font-weight: 600;">Privacy Policy</td>
559
+ <td style="padding: 10px; color: var(--text-muted);">privacy</td>
560
+ <td style="padding: 10px;">page-privacy.php</td>
561
+ <td style="padding: 10px;"><span class="badge badge-yellow">Pending</span></td>
562
+ </tr>
563
+ <tr>
564
+ <td style="padding: 10px; font-weight: 600;">FAQ</td>
565
+ <td style="padding: 10px; color: var(--text-muted);">faq</td>
566
+ <td style="padding: 10px;">page-faq.php</td>
567
+ <td style="padding: 10px;"><span class="badge badge-yellow">Pending</span></td>
568
+ </tr>
569
+ <tr>
570
+ <td style="padding: 10px; font-weight: 600;">Support</td>
571
+ <td style="padding: 10px; color: var(--text-muted);">support</td>
572
+ <td style="padding: 10px;">page-support.php</td>
573
+ <td style="padding: 10px;"><span class="badge badge-yellow">Pending</span></td>
574
+ </tr>
575
+ <tr>
576
+ <td style="padding: 10px; font-weight: 600;">Blog</td>
577
+ <td style="padding: 10px; color: var(--text-muted);">blog</td>
578
+ <td style="padding: 10px;">page-blog.php</td>
579
+ <td style="padding: 10px;"><span class="badge badge-yellow">Pending</span></td>
580
+ </tr>
581
+ <tr>
582
+ <td style="padding: 10px; font-weight: 600;">Affiliate Program</td>
583
+ <td style="padding: 10px; color: var(--text-muted);">affiliate</td>
584
+ <td style="padding: 10px;">page-affiliate.php</td>
585
+ <td style="padding: 10px;"><span class="badge badge-yellow">Pending</span></td>
586
+ </tr>
587
+ </tbody>
588
+ </table>
589
+ </div>
590
+ </div>
591
+ </div>
592
+
593
+ <div class="card">
594
+ <div class="card-header">
595
+ <div class="card-title"><i class="fa-solid fa-gear"></i> General Settings</div>
596
+ </div>
597
+ <div class="form-group">
598
+ <label class="form-label">Front Page Displays</label>
599
+ <div style="display: flex; gap: 10px; align-items: center;">
600
+ <span>A static page:</span>
601
+ <select class="form-control" style="width: 200px;">
602
+ <option>Home</option>
603
+ </select>
604
+ </div>
605
+ </div>
606
+ <div class="form-group">
607
+ <label class="form-label">Posts Page</label>
608
+ <select class="form-control" style="width: 200px;">
609
+ <option>Blog</option>
610
+ </select>
611
+ </div>
612
+ <button class="btn btn-primary" onclick="simulateAction('Saving settings...', 'Settings saved!')">Save Changes</button>
613
+ </div>
614
+ </div>
615
+
616
+ <!-- PART 2: EDD Config -->
617
+ <div id="part2" class="section-panel">
618
+ <div class="panel-header">
619
+ <h1 class="panel-title">Part 2: Easy Digital Downloads Configuration</h1>
620
+ <p class="panel-desc">Configure payment gateways, currency, and product categories for your digital store.</p>
621
+ </div>
622
+
623
+ <div class="grid-container">
624
+ <div class="card">
625
+ <div class="card-header">
626
+ <div class="card-title"><i class="fa-solid fa-money-bill-wave"></i> General Settings</div>
627
+ </div>
628
+ <div class="form-group">
629
+ <label class="form-label">Currency</label>
630
+ <select class="form-control">
631
+ <option>USD ($)</option>
632
+ <option>EUR (€)</option>
633
+ <option>GBP (£)</option>
634
+ </select>
635
+ </div>
636
+ <div class="form-group">
637
+ <label class="form-label">Currency Position</label>
638
+ <select class="form-control">
639
+ <option>Left ($10.00)</option>
640
+ <option>Right (10.00$)</option>
641
+ </select>
642
+ </div>
643
+ <div class="form-group">
644
+ <label class="form-label">Decimal Separator</label>
645
+ <input type="text" class="form-control" value=".">
646
+ </div>
647
+ <div class="form-group">
648
+ <label class="form-label">Thousands Separator</label>
649
+ <input type="text" class="form-control" value=",">
650
+ </div>
651
+ <button class="btn btn-primary btn-sm" onclick="simulateAction('Saving...', 'General settings updated.')">Update</button>
652
+ </div>
653
+
654
+ <div class="card">
655
+ <div class="card-header">
656
+ <div class="card-title"><i class="fa-regular fa-credit-card"></i> Payment Gateways</div>
657
+ </div>
658
+ <div class="checklist-item" style="padding: 10px 0;">
659
+ <input type="checkbox" class="custom-checkbox" checked>
660
+ <span style="margin-left: 10px;">PayPal Standard</span>
661
+ </div>
662
+ <div class="checklist-item" style="padding: 10px 0;">
663
+ <input type="checkbox" class="custom-checkbox" checked>
664
+ <span style="margin-left: 10px;">Stripe</span>
665
+ </div>
666
+ <div class="checklist-item" style="padding: 10px 0;">
667
+ <input type="checkbox" class="custom-checkbox">
668
+ <span style="margin-left: 10px;">Manual Payments</span>
669
+ </div>
670
+ <div class="form-group" style="margin-top: 10px;">
671
+ <label class="form-label">Default Gateway</label>
672
+ <select class="form-control">
673
+ <option>Stripe</option>
674
+ <option>PayPal</option>
675
+ </select>
676
+ </div>
677
+ <button class="btn btn-primary btn-sm" onclick="simulateAction('Configuring...', 'Gateways configured.')">Configure Keys</button>
678
+ </div>
679
+ </div>
680
+
681
+ <div class="card">
682
+ <div class="card-header">
683
+ <div class="card-title"><i class="fa-solid fa-tags"></i> Product Categories</div>
684
+ </div>
685
+ <p style="font-size: 0.9rem; margin-bottom: 15px; color: var(--text-muted);">The following categories have been auto-generated based on your requirements.</p>
686
+ <div class="grid-container" style="grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); margin-bottom: 0;">
687
+ <div class="checklist-item" style="border: 1px solid var(--border); border-radius: 6px; flex-direction: column;">
688
+ <div style="font-weight: 600; margin-bottom: 5px;">Gift Cards</div>
689
+ <div style="font-size: 0.8rem; color: var(--text-muted);">slug: gift-cards</div>
690
+ </div>
691
+ <div class="checklist-item" style="border: 1px solid var(--border); border-radius: 6px; flex-direction: column;">
692
+ <div style="font-weight: 600; margin-bottom: 5px;">Games</div>
693
+ <div style="font-size: 0.8rem; color: var(--text-muted);">slug: games</div>
694
+ </div>
695
+ <div class="checklist-item" style="border: 1px solid var(--border); border-radius: 6px; flex-direction: column;">
696
+ <div style="font-weight: 600; margin-bottom: 5px;">Game Coaching</div>
697
+ <div style="font-size: 0.8rem; color: var(--text-muted);">slug: game-coaching</div>
698
+ </div>
699
+ <div class="checklist-item" style="border: 1px solid var(--border); border-radius: 6px; flex-direction: column;">
700
+ <div style="font-weight: 600; margin-bottom: 5px;">GamePal</div>
701
+ <div style="font-size: 0.8rem; color: var(--text-muted);">slug: gamepal</div>
702
+ </div>
703
+ <div class="checklist-item" style="border: 1px solid var(--border); border-radius: 6px; flex-direction: column;">
704
+ <div style="font-weight: 600; margin-bottom: 5px;">Game Coins</div>
705
+ <div style="font-size: 0.8rem; color: var(--text-muted);">slug: game-coins</div>
706
+ </div>
707
+ <div class="checklist-item" style="border: 1px solid var(--border); border-radius: 6px; flex-direction: column;">
708
+ <div style="font-weight: 600; margin-bottom: 5px;">Items</div>
709
+ <div style="font-size: 0.8rem; color: var(--text-muted);">slug: items</div>
710
+ </div>
711
+ <div class="checklist-item" style="border: 1px solid var(--border); border-radius: 6px; flex-direction: column;">
712
+ <div style="font-weight: 600; margin-bottom: 5px;">Accounts</div>
713
+ <div style="font-size: 0.8rem; color: var(--text-muted);">slug: accounts</div>
714
+ </div>
715
+ <div class="checklist-item" style="border: 1px solid var(--border); border-radius: 6px; flex-direction: column;">
716
+ <div style="font-weight: 600; margin-bottom: 5px;">Boosting</div>
717
+ <div style="font-size: 0.8rem; color: var(--text-muted);">slug: boosting</div>
718
+ </div>
719
+ <div class="checklist-item" style="border: 1px solid var(--border); border-radius: 6px; flex-direction: column;">
720
+ <div style="font-weight: 600; margin-bottom: 5px;">Skins</div>
721
+ <div style="font-size: 0.8rem; color: var(--text-muted);">slug: skins</div>
722
+ </div>
723
+ <div class="checklist-item" style="border: 1px solid var(--border); border-radius: 6px; flex-direction: column;">
724
+ <div style="font-weight: 600; margin-bottom: 5px;">Telco</div>
725
+ <div style="font-size: 0.8rem; color: var(--text-muted);">slug: telco</div>
726
+ </div>
727
+ <div class="checklist-item" style="border: 1px solid var(--border); border-radius: 6px; flex-direction: column;">
728
+ <div style="font-weight: 600; margin-bottom: 5px;">Software & Apps</div>
729
+ <div style="font-size: 0.8rem; color: var(--text-muted);">slug: software-apps</div>
730
+ </div>
731
+ <div class="checklist-item" style="border: 1px solid var(--border); border-radius: 6px; flex-direction: column;">
732
+ <div style="font-weight: 600; margin-bottom: 5px;">Payment Cards</div>
733
+ <div style="font-size: 0.8rem; color: var(--text-muted);">slug: payment-cards</div>
734
+ </div>
735
+ </div>
736
+ </div>
737
+ </div>
738
+
739
+ <!-- PART 3: Admin Panel -->
740
+ <div id="part3" class="section-panel">
741
+ <div class="panel-header">
742
+ <h1 class="panel-title">Part 3: Admin Dashboard Extensions</h1>
743
+ <p class="panel-desc">Structure your custom admin menu "WebPlato" for easy management.</p>
744
+ </div>
745
+
746
+ <div class="card">
747
+ <div class="card-header">
748
+ <div class="card-title"><i class="fa-solid fa-bars"></i> WebPlato Menu Structure</div>
749
+ </div>
750
+ <div class="code-block">
751
+ // PHP Logic for add_menu_page and add_submenu_page
752
+ add_menu_page( 'WebPlato', 'WebPlato', 'manage_options', 'webplato', 'webplato_dashboard', 'dashicons-store', 6 );
753
+
754
+ add_submenu_page( 'webplato', 'Dashboard', 'Dashboard Overview', 'manage_options', 'webplato', 'webplato_dashboard' );
755
+ add_submenu_page( 'webplato', 'Settings', 'Store Settings', 'manage_options', 'webplato-settings', 'webplato_settings' );
756
+ add_submenu_page( 'webplato', 'Products', 'Product Management', 'manage_options', 'webplato-products', 'webplato_products' );
757
+ add_submenu_page( 'webplato', 'Orders', 'Order Management', 'manage_options', 'webplato-orders', 'webplato_orders' );
758
+ add_submenu_page( 'webplato', 'Customers', 'Customer Management', 'manage_options', 'webplato-customers', 'webplato_customers' );
759
+ add_submenu_page( 'webplato', 'Discounts', 'Discount Codes', 'manage_options', 'webplato-discounts', 'webplato_discounts' );
760
+ add_submenu_page( 'webplato', 'Reports', 'Reports & Analytics', 'manage_options', 'webplato-reports', 'webplato_reports' );
761
+ add_submenu_page( 'webplato', 'Affiliates', 'Affiliate System', 'manage_options', 'webplato-affiliates', 'webplato_affiliates' );
762
+ add_submenu_page( 'webplato', 'System', 'System Status', 'manage_options', 'webplato-system', 'webplato_system' );
763
+ </div>
764
+ </div>
765
+
766
+ <div class="grid-container" style="margin-top: 20px;">
767
+ <div class="card">
768
+ <div class="card-title"><i class="fa-solid fa-chart-pie"></i> Dashboard Overview</div>
769
+ <p style="font-size: 0.9rem; color: var(--text-muted); margin: 10px 0;">Includes sales stats, recent orders, popular products chart.</p>
770
+ <button class="btn btn-outline btn-sm" onclick="simulateAction('Loading...', 'Dashboard loaded.')">Preview</button>
771
+ </div>
772
+ <div class="card">
773
+ <div class="card-title"><i class="fa-solid fa-file-import"></i> Bulk Import</div>
774
+ <p style="font-size: 0.9rem; color: var(--text-muted); margin: 10px 0;">CSV Import/Export for products.</p>
775
+ <button class="btn btn-outline btn-sm" onclick="simulateAction('Loading...', 'Importer ready.')">Open Importer</button>
776
+ </div>
777
+ <div class="card">
778
+ <div class="card-title"><i class="fa-solid fa-user-shield"></i> System Status</div>
779
+ <p style="font-size: 0.9rem; color: var(--text-muted); margin: 10px 0;">WP Environment, Conflicts, Debug Mode.</p>
780
+ <button class="btn btn-outline btn-sm" onclick="simulateAction('Scanning...', 'Scan complete.')">Run Scan</button>
781
+ </div>
782
+ </div>
783
+ </div>
784
+
785
+ <!-- PART 4: Roles -->
786
+ <div id="part4" class="section-panel">
787
+ <div class="panel-header">
788
+ <h1 class="panel-title">Part 4: User Roles & Permissions</h1>
789
+ <p class="panel-desc">Create custom roles to segregate duties within the WebPlato ecosystem.</p>
790
+ </div>
791
+
792
+ <div class="grid-container">
793
+ <div class="card">
794
+ <div class="card-header">
795
+ <div class="card-title"><i class="fa-solid fa-user-tie"></i> Store Manager</div>
796
+ <span class="badge badge-blue">Custom</span>
797
+ </div>
798
+ <ul style="list-style: none; font-size: 0.9rem; color: var(--text-muted);">
799
+ <li style="margin-bottom: 5px;"><i class="fa-solid fa-check" style="color: var(--success);"></i> Manage all products</li>
800
+ <li style="margin-bottom: 5px;"><i class="fa-solid fa-check" style="color: var(--success);"></i> Manage orders & customers</li>
801
+ <li style="margin-bottom: 5px;"><i class="fa-solid fa-check" style="color: var(--success);"></i> Full EDD capabilities</li>
802
+ <li style="margin-bottom: 5px;"><i class="fa-solid fa-xmark" style="color: var(--danger);"></i> No plugin install access</li>
803
+ </ul>
804
+ <button class="btn btn-success btn-sm" style="width: 100%; margin-top: 15px;" onclick="simulateAction('Creating role...', 'Role created.')">Create Role</button>
805
+ </div>
806
+
807
+ <div class="card">
808
+ <div class="card-header">
809
+ <div class="card-title"><i class="fa-solid fa-link"></i> Affiliate</div>
810
+ <span class="badge badge-blue">Custom</span>
811
+ </div>
812
+ <ul style="list-style: none; font-size: 0.9rem; color: var(--text-muted);">
813
+ <li style="margin-bottom: 5px;"><i class="fa-solid fa-check" style="color: var(--success);"></i> View own referrals</li>
814
+ <li style="margin-bottom: 5px;"><i class="fa-solid fa-check" style="color: var(--success);"></i> View commissions</li>
815
+ <li style="margin-bottom: 5px;"><i class="fa-solid fa-check" style="color: var(--success);"></i> Access affiliate dashboard</li>
816
+ </ul>
817
+ <button class="btn btn-success btn-sm" style="width: 100%; margin-top: 15px;" onclick="simulateAction('Creating role...', 'Role created.')">Create Role</button>
818
+ </div>
819
+
820
+ <div class="card">
821
+ <div class="card-header">
822
+ <div class="card-title"><i class="fa-solid fa-headset"></i> Support Agent</div>
823
+ <span class="badge badge-blue">Custom</span>
824
+ </div>
825
+ <ul style="list-style: none; font-size: 0.9rem; color: var(--text-muted);">
826
+ <li style="margin-bottom: 5px;"><i class="fa-solid fa-check" style="color: var(--success);"></i> View orders & customers</li>
827
+ <li style="margin-bottom: 5px;"><i class="fa-solid fa-check" style="color: var(--success);"></i> Respond to tickets</li>
828
+ <li style="margin-bottom: 5px;"><i class="fa-solid fa-xmark" style="color: var(--danger);"></i> Cannot edit products</li>
829
+ </ul>
830
+ <button class="btn btn-success btn-sm" style="width: 100%; margin-top: 15px;" onclick="simulateAction('Creating role...', 'Role created.')">Create Role</button>
831
+ </div>
832
+ </div>
833
+ </div>
834
+
835
+ <!-- PART 5: Plugins -->
836
+ <div id="part5" class="section-panel">
837
+ <div class="panel-header">
838
+ <h1 class="panel-title">Part 5: Required Plugins</h1>
839
+ <p class="panel