one-for-all-framework 2.0.0 → 4.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (31) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +136 -31
  3. data/app/controllers/cart_controller.rb +52 -0
  4. data/app/controllers/dashboard_controller.rb +2 -1
  5. data/app/controllers/products_controller.rb +58 -0
  6. data/app/models/product.rb +8 -0
  7. data/app/views/cart_index.erb +112 -0
  8. data/app/views/cms/pages_form.erb +1 -1
  9. data/app/views/cms/pages_index.erb +61 -45
  10. data/app/views/cms/posts_form.erb +1 -1
  11. data/app/views/cms/posts_index.erb +54 -41
  12. data/app/views/cms/products_form.erb +89 -0
  13. data/app/views/cms/products_index.erb +129 -0
  14. data/app/views/cms/projects_form.erb +8 -8
  15. data/app/views/cms/projects_index.erb +47 -37
  16. data/app/views/dashboard.erb +18 -0
  17. data/app/views/docs.erb +197 -49
  18. data/app/views/index.erb +1 -1
  19. data/app/views/layout.erb +26 -7
  20. data/app/views/product_show.erb +42 -0
  21. data/app/views/products_index.erb +40 -0
  22. data/bin/ofa +145 -6
  23. data/config/boot.rb +1 -0
  24. data/config/database.json +1 -2
  25. data/config/database.rb +16 -0
  26. data/config/routes.rb +32 -0
  27. data/db/data.sqlite3 +0 -0
  28. data/db/development.sqlite3 +0 -0
  29. data/db/migrations/20260502000000_create_products.rb +17 -0
  30. data/db/target.sqlite3 +0 -0
  31. metadata +11 -1
data/app/views/docs.erb CHANGED
@@ -1,6 +1,6 @@
1
1
  <div class="space-y-12 pb-20">
2
2
  <div class="text-left">
3
- <div class="badge-premium">Documentation v2.0</div>
3
+ <div class="badge-premium">Documentation v4.0.0</div>
4
4
  <h1 class="text-5xl font-black tracking-tighter mb-4 text-slate-700 dark:text-white">Framework <span class="text-primary">Guide</span></h1>
5
5
  <p class="text-xl text-slate-500 max-w-2xl leading-relaxed">Everything you need to know about building premium web applications with the One-For-All framework.</p>
6
6
  </div>
@@ -15,6 +15,8 @@
15
15
  <a href="#structure" class="block px-4 py-2 rounded-xl hover:bg-primary/5 text-slate-600 hover:text-primary transition-all font-semibold border-l-2 border-transparent hover:border-primary">Project Structure</a>
16
16
  <a href="#routing" class="block px-4 py-2 rounded-xl hover:bg-primary/5 text-slate-600 hover:text-primary transition-all font-semibold border-l-2 border-transparent hover:border-primary">Routing System</a>
17
17
  <a href="#cms" class="block px-4 py-2 rounded-xl hover:bg-primary/5 text-slate-600 hover:text-primary transition-all font-semibold border-l-2 border-transparent hover:border-primary">CMS & Features</a>
18
+ <a href="#ecommerce" class="block px-4 py-2 rounded-xl hover:bg-primary/5 text-slate-600 hover:text-primary transition-all font-semibold border-l-2 border-transparent hover:border-primary">E-Commerce</a>
19
+ <a href="#deploy" class="block px-4 py-2 rounded-xl hover:bg-primary/5 text-slate-600 hover:text-primary transition-all font-semibold border-l-2 border-transparent hover:border-primary">Deployment</a>
18
20
  </nav>
19
21
  </aside>
20
22
 
@@ -26,7 +28,7 @@
26
28
  <i class="fas fa-star text-primary"></i> Introduction
27
29
  </h2>
28
30
  <div class="markdown-content">
29
- <p><strong>One-For-All (OFA)</strong> is a high-performance Ruby web framework focused on speed and aesthetics. It uses a modular architecture built on top of the <em>Eks-Cent</em> engine, allowing you to scale from simple landing pages to complex CMS-driven sites effortlessly.</p>
31
+ <p><strong>One-For-All (OFA)</strong> is a premium, ultra-fast Ruby MVC framework designed for developers who value both high performance and modern aesthetics. Built on the powerful <strong>Eks-Cent</strong> engine and optimized with <strong>Eksa Server</strong>, OFA v3.0 now supports <strong>Full E-Commerce integration</strong> alongside its stunning "Glassmorphism" UI.</p>
30
32
  <p>Our philosophy is "Premium by Default". You shouldn't have to spend hours tweaking CSS just to get a modern look. With OFA, you get Glassmorphism, animations, and responsive layouts baked in.</p>
31
33
  </div>
32
34
  </section>
@@ -36,71 +38,149 @@
36
38
  <h2 class="text-3xl font-black tracking-tight flex items-center gap-3 ml-2">
37
39
  <i class="fas fa-terminal text-primary"></i> CLI Power Tools
38
40
  </h2>
39
- <div class="glass-panel overflow-hidden">
40
- <table class="w-full text-left border-collapse">
41
- <thead class="bg-primary/5 border-b border-white/10">
41
+
42
+ <!-- Desktop Table View -->
43
+ <div class="hidden md:block glass-panel overflow-hidden">
44
+ <table class="w-full text-left border-collapse text-sm">
45
+ <thead class="bg-primary/5 border-b border-white/10 text-xs font-black uppercase text-slate-400">
42
46
  <tr>
43
- <th class="px-6 py-4 text-xs font-black uppercase text-slate-400">Command</th>
44
- <th class="px-6 py-4 text-xs font-black uppercase text-slate-400">Action</th>
47
+ <th class="px-6 py-4">Command</th>
48
+ <th class="px-6 py-4">Detailed Description</th>
45
49
  </tr>
46
50
  </thead>
47
51
  <tbody class="divide-y divide-white/5">
48
- <tr class="bg-slate-500/5"><td colspan="2" class="px-6 py-2 text-[10px] font-black uppercase tracking-tighter text-slate-400">Project Management</td></tr>
52
+ <tr class="bg-slate-500/5"><td colspan="2" class="px-6 py-2 text-[10px] font-black uppercase tracking-tighter text-slate-400">Project Lifecycle</td></tr>
49
53
  <tr>
50
- <td class="px-6 py-4 font-mono text-sm text-primary">./ofa new [name]</td>
51
- <td class="px-6 py-4 text-slate-600 dark:text-slate-400">Creates a new project from scratch.</td>
54
+ <td class="px-6 py-4 font-mono text-primary">./ofa new NAME [TYPE]</td>
55
+ <td class="px-6 py-4 text-slate-600 dark:text-slate-400">Create a new project. Generates structure and runs bundle install automatically.</td>
52
56
  </tr>
53
57
  <tr>
54
- <td class="px-6 py-4 font-mono text-sm text-primary">./ofa init</td>
55
- <td class="px-6 py-4 text-slate-600 dark:text-slate-400">Initializes environment & DB via wizard.</td>
58
+ <td class="px-6 py-4 font-mono text-primary">./ofa init [TYPE]</td>
59
+ <td class="px-6 py-4 text-slate-600 dark:text-slate-400">Initialize in current folder via interactive wizard for DB & Cloudinary.</td>
56
60
  </tr>
57
61
  <tr>
58
- <td class="px-6 py-4 font-mono text-sm text-primary">./ofa run</td>
59
- <td class="px-6 py-4 text-slate-600 dark:text-slate-400">Starts the development server.</td>
62
+ <td class="px-6 py-4 font-mono text-primary">./ofa run</td>
63
+ <td class="px-6 py-4 text-slate-600 dark:text-slate-400">Starts the high-performance Eksa Server on port 3000.</td>
60
64
  </tr>
61
65
  <tr>
62
- <td class="px-6 py-4 font-mono text-sm text-primary">./ofa deploy</td>
63
- <td class="px-6 py-4 text-slate-600 dark:text-slate-400">Deploys to production environment.</td>
66
+ <td class="px-6 py-4 font-mono text-primary">./ofa deploy</td>
67
+ <td class="px-6 py-4 text-slate-600 dark:text-slate-400 text-xs italic">Railway/Docker/Git auto-detection for production.</td>
64
68
  </tr>
65
69
 
66
- <tr class="bg-slate-500/5"><td colspan="2" class="px-6 py-2 text-[10px] font-black uppercase tracking-tighter text-slate-400">Generators</td></tr>
70
+ <tr class="bg-slate-500/5"><td colspan="2" class="px-6 py-2 text-[10px] font-black uppercase tracking-tighter text-slate-400">Generators (Scaffolding)</td></tr>
67
71
  <tr>
68
- <td class="px-6 py-4 font-mono text-sm text-primary">./ofa g controller [name]</td>
69
- <td class="px-6 py-4 text-slate-600 dark:text-slate-400">Generates a RESTful controller.</td>
72
+ <td class="px-6 py-4 font-mono text-primary">./ofa g controller NAME</td>
73
+ <td class="px-6 py-4 text-slate-600 dark:text-slate-400">Generates <code>app/controllers/{name}_controller.rb</code>.</td>
70
74
  </tr>
71
75
  <tr>
72
- <td class="px-6 py-4 font-mono text-sm text-primary">./ofa g model [name]</td>
73
- <td class="px-6 py-4 text-slate-600 dark:text-slate-400">Generates a model & migration.</td>
76
+ <td class="px-6 py-4 font-mono text-primary">./ofa g model NAME</td>
77
+ <td class="px-6 py-4 text-slate-600 dark:text-slate-400">Creates model & migration linked to Sequel/NoSQL.</td>
74
78
  </tr>
75
79
  <tr>
76
- <td class="px-6 py-4 font-mono text-sm text-primary">./ofa g migration [name]</td>
77
- <td class="px-6 py-4 text-slate-600 dark:text-slate-400">Creates a new schema migration.</td>
80
+ <td class="px-6 py-4 font-mono text-primary">./ofa g migration NAME</td>
81
+ <td class="px-6 py-4 text-slate-600 dark:text-slate-400">Creates timestamped migration in <code>db/migrations/</code>.</td>
78
82
  </tr>
83
+
84
+ <tr class="bg-slate-500/5"><td colspan="2" class="px-6 py-2 text-[10px] font-black uppercase tracking-tighter text-slate-400">Customization</td></tr>
79
85
  <tr>
80
- <td class="px-6 py-4 font-mono text-sm text-primary">./ofa g post [title]</td>
81
- <td class="px-6 py-4 text-slate-600 dark:text-slate-400">Creates a Markdown-based blog post.</td>
86
+ <td class="px-6 py-4 font-mono text-primary">./ofa theme NAME</td>
87
+ <td class="px-6 py-4 text-slate-600 dark:text-slate-400 text-xs">Switch UI: light_glass, dark_glass, cyber_sidebar, light_sidebar, retro_terminal.</td>
82
88
  </tr>
83
-
84
- <tr class="bg-slate-500/5"><td colspan="2" class="px-6 py-2 text-[10px] font-black uppercase tracking-tighter text-slate-400">Configuration</td></tr>
85
89
  <tr>
86
- <td class="px-6 py-4 font-mono text-sm text-primary">./ofa theme [name]</td>
87
- <td class="px-6 py-4 text-slate-600 dark:text-slate-400">Switch between UI themes instantly.</td>
90
+ <td class="px-6 py-4 font-mono text-primary">./ofa type NAME</td>
91
+ <td class="px-6 py-4 text-slate-600 dark:text-slate-400 text-xs">Change mode: portfolio, blog, landing_page, e_commerce.</td>
88
92
  </tr>
89
93
  <tr>
90
- <td class="px-6 py-4 font-mono text-sm text-primary">./ofa type [type]</td>
91
- <td class="px-6 py-4 text-slate-600 dark:text-slate-400">Change app mode (blog, portfolio, etc).</td>
94
+ <td class="px-6 py-4 font-mono text-primary">./ofa storage NAME</td>
95
+ <td class="px-6 py-4 text-slate-600 dark:text-slate-400 text-xs">Hot-swap storage: <code>local</code> or <code>cloudinary</code>.</td>
92
96
  </tr>
97
+ <tr class="bg-slate-500/5"><td colspan="2" class="px-6 py-2 text-[10px] font-black uppercase tracking-tighter text-slate-400">Database & Security</td></tr>
93
98
  <tr>
94
- <td class="px-6 py-4 font-mono text-sm text-primary">./ofa storage [name]</td>
95
- <td class="px-6 py-4 text-slate-600 dark:text-slate-400">Configure Local or Cloudinary storage.</td>
99
+ <td class="px-6 py-4 font-mono text-primary">./ofa db migrate-data TYPE [NAME]</td>
100
+ <td class="px-6 py-4 text-slate-600 dark:text-slate-400 text-xs">
101
+ Migrate all data from current DB to a new destination (SQL/Mongo).
102
+ <div class="mt-2 p-2 bg-slate-900 rounded font-mono text-[10px] text-green-400 border border-white/5">
103
+ 📦 Starting data migration: sqlite -> mongo...<br>
104
+ Migrating users... 12 rows.<br>
105
+ ✅ Migration successful!
106
+ </div>
107
+ </td>
96
108
  </tr>
97
109
  <tr>
98
- <td class="px-6 py-4 font-mono text-sm text-primary">./ofa db switch [name]</td>
99
- <td class="px-6 py-4 text-slate-600 dark:text-slate-400">Switch DB adapter (SQLite, MySQL, etc).</td>
110
+ <td class="px-6 py-4 font-mono text-primary">./ofa reset-password USR PWD</td>
111
+ <td class="px-6 py-4 text-slate-600 dark:text-slate-400 text-xs">
112
+ Reset admin password (min 8 chars, 1 upper, 1 num).
113
+ <div class="mt-2 p-2 bg-slate-900 rounded font-mono text-[10px] text-green-400 border border-white/5">
114
+ ✅ Password for 'admin' updated successfully.
115
+ </div>
116
+ </td>
100
117
  </tr>
101
118
  </tbody>
102
119
  </table>
103
120
  </div>
121
+
122
+ <!-- Mobile Card View -->
123
+ <div class="md:hidden space-y-4">
124
+ <div class="glass-panel p-6 space-y-4">
125
+ <h4 class="text-[10px] font-black uppercase tracking-widest text-primary border-b border-white/5 pb-2">Project Lifecycle</h4>
126
+ <div class="space-y-4">
127
+ <div>
128
+ <code class="text-primary font-bold text-xs">./ofa new NAME [TYPE]</code>
129
+ <p class="text-slate-500 text-xs mt-1">Create a new project. Generates structure and runs bundle install automatically.</p>
130
+ </div>
131
+ <div>
132
+ <code class="text-primary font-bold text-xs">./ofa init [TYPE]</code>
133
+ <p class="text-slate-500 text-xs mt-1">Initialize in current folder via interactive wizard for DB & Cloudinary.</p>
134
+ </div>
135
+ <div>
136
+ <code class="text-primary font-bold text-xs">./ofa run</code>
137
+ <p class="text-slate-500 text-xs mt-1">Starts the high-performance Eksa Server on port 3000.</p>
138
+ </div>
139
+ </div>
140
+ </div>
141
+
142
+ <div class="glass-panel p-6 space-y-4">
143
+ <h4 class="text-[10px] font-black uppercase tracking-widest text-primary border-b border-white/5 pb-2">Scaffolding</h4>
144
+ <div class="space-y-4">
145
+ <div>
146
+ <code class="text-primary font-bold text-xs">./ofa g controller NAME</code>
147
+ <p class="text-slate-500 text-xs mt-1">Generates <code>app/controllers/{name}_controller.rb</code>.</p>
148
+ </div>
149
+ <div>
150
+ <code class="text-primary font-bold text-xs">./ofa g model NAME</code>
151
+ <p class="text-slate-500 text-xs mt-1">Creates model & migration linked to Sequel/NoSQL.</p>
152
+ </div>
153
+ </div>
154
+ </div>
155
+
156
+ <div class="glass-panel p-6 space-y-4">
157
+ <h4 class="text-[10px] font-black uppercase tracking-widest text-primary border-b border-white/5 pb-2">Customization</h4>
158
+ <div class="space-y-4">
159
+ <div>
160
+ <code class="text-primary font-bold text-xs">./ofa theme NAME</code>
161
+ <p class="text-slate-500 text-xs mt-1">Switch UI: light_glass, dark_glass, cyber_sidebar, light_sidebar, retro_terminal.</p>
162
+ </div>
163
+ <div>
164
+ <code class="text-primary font-bold text-xs">./ofa type NAME</code>
165
+ <p class="text-slate-500 text-xs mt-1">Change mode: portfolio, blog, landing_page, e_commerce.</p>
166
+ </div>
167
+ </div>
168
+ </div>
169
+
170
+ <div class="glass-panel p-6 space-y-4">
171
+ <h4 class="text-[10px] font-black uppercase tracking-widest text-primary border-b border-white/5 pb-2">Database & Security</h4>
172
+ <div class="space-y-4">
173
+ <div>
174
+ <code class="text-primary font-bold text-xs">./ofa db migrate-data TYPE [NAME]</code>
175
+ <p class="text-slate-500 text-xs mt-1">Migrate data to new DB destination.</p>
176
+ </div>
177
+ <div>
178
+ <code class="text-primary font-bold text-xs">./ofa reset-password USR PWD</code>
179
+ <p class="text-slate-500 text-xs mt-1">Manage admin credentials.</p>
180
+ </div>
181
+ </div>
182
+ </div>
183
+ </div>
104
184
  </section>
105
185
 
106
186
  <!-- Structure -->
@@ -108,24 +188,32 @@
108
188
  <h2 class="text-3xl font-black tracking-tight mb-6 flex items-center gap-3">
109
189
  <i class="fas fa-folder-tree text-primary"></i> Project Structure
110
190
  </h2>
111
- <div class="space-y-4">
112
- <div class="p-4 bg-slate-900 rounded-2xl font-mono text-sm text-blue-400 overflow-x-auto">
191
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
192
+ <div>
193
+ <p class="text-slate-600 dark:text-slate-400 mb-4 text-sm">OFA follows a strict MVC pattern to keep your code organized and maintainable as your project grows.</p>
194
+ <ul class="space-y-2 text-xs">
195
+ <li><strong class="text-primary uppercase tracking-widest font-black text-[10px]">/app</strong>: Core logic, models, and UI templates.</li>
196
+ <li><strong class="text-primary uppercase tracking-widest font-black text-[10px]">/config</strong>: Routing and application features.</li>
197
+ <li><strong class="text-primary uppercase tracking-widest font-black text-[10px]">/db</strong>: Migrations and data store.</li>
198
+ <li><strong class="text-primary uppercase tracking-widest font-black text-[10px]">/public</strong>: Optimized assets (CSS/JS).</li>
199
+ </ul>
200
+ </div>
201
+ <div class="p-4 bg-slate-900 rounded-2xl font-mono text-[11px] text-blue-400 overflow-x-auto border border-white/5">
113
202
  <pre>
114
203
  /app
115
- /controllers # Logic handlers
116
- /models # Database entities
117
- /views # ERB templates
204
+ /controllers # Controllers
205
+ /models # Models (Sequel/NoSQL)
206
+ /views # Views (ERB)
118
207
  /config
119
- /database.json # DB configurations
120
- /features.json # Feature toggles
208
+ /routes.rb # URL Mapping
209
+ /features.json # Feature Management
121
210
  /db
122
- /migrations # Schema versions
211
+ /migrations # Schema Evolution
123
212
  /public
124
- /images # Static assets
125
- /css # Custom styles
213
+ /images # Multimedia
214
+ /css # Tailwind/Custom
126
215
  </pre>
127
216
  </div>
128
- <p class="text-slate-500 text-sm">Most of your work will happen inside the <code>/app</code> directory following the standard MVC pattern.</p>
129
217
  </div>
130
218
  </section>
131
219
 
@@ -163,6 +251,58 @@ resources :posts
163
251
  <p>Authentication is handled via BCrypt hashing with an 8-hour session sliding expiration window for optimal security.</p>
164
252
  </div>
165
253
  </section>
254
+
255
+ <!-- E-Commerce -->
256
+ <section id="ecommerce" class="space-y-6 text-left">
257
+ <h2 class="text-3xl font-black tracking-tight flex items-center gap-3 ml-2">
258
+ <i class="fas fa-shopping-bag text-primary"></i> E-Commerce Module
259
+ </h2>
260
+ <div class="glass-panel p-8">
261
+ <p class="text-slate-600 dark:text-slate-400 mb-6">Version 3.0.0 introduces a full-featured e-commerce system. Activate it with a single command:</p>
262
+ <div class="p-4 bg-slate-900 rounded-2xl font-mono text-sm text-green-400 mb-6">
263
+ ./ofa type e_commerce
264
+ </div>
265
+ <ul class="space-y-3">
266
+ <li class="flex items-start gap-3">
267
+ <i class="fas fa-check-circle text-primary mt-1"></i>
268
+ <div><strong class="text-slate-700 dark:text-white">Shopping Cart:</strong> Fully functional cart with real-time quantity updates and session persistence.</div>
269
+ </li>
270
+ <li class="flex items-start gap-3">
271
+ <i class="fas fa-check-circle text-primary mt-1"></i>
272
+ <div><strong class="text-slate-700 dark:text-white">Product CMS:</strong> Dedicated management interface for products, inventory, and categories.</div>
273
+ </li>
274
+ <li class="flex items-start gap-3">
275
+ <i class="fas fa-check-circle text-primary mt-1"></i>
276
+ <div><strong class="text-slate-700 dark:text-white">Mobile Optimized:</strong> 100% responsive checkout and product listing pages.</div>
277
+ </li>
278
+ </ul>
279
+ </div>
280
+ </section>
281
+
282
+ <!-- Deployment -->
283
+ <section id="deploy" class="glass-panel p-8 md:p-12 text-left border-primary/20">
284
+ <h2 class="text-3xl font-black tracking-tight mb-6 flex items-center gap-3">
285
+ <i class="fas fa-rocket text-primary"></i> Deployment Guide
286
+ </h2>
287
+ <div class="space-y-8">
288
+ <div>
289
+ <h4 class="font-bold text-lg mb-2">1. Railway (Recommended)</h4>
290
+ <p class="text-slate-500 text-sm mb-4">Run <code>./ofa deploy</code>. The CLI will automatically detect your project and push it to Railway using the included Procfile.</p>
291
+ </div>
292
+ <div>
293
+ <h4 class="font-bold text-lg mb-2">2. Docker Support</h4>
294
+ <p class="text-slate-500 text-sm mb-4">Use the provided <code>Dockerfile</code> for containerized hosting on any cloud provider.</p>
295
+ <div class="p-4 bg-slate-900 rounded-2xl font-mono text-xs text-slate-400">
296
+ docker build -t ofa-app .<br>
297
+ docker run -p 3000:3000 ofa-app
298
+ </div>
299
+ </div>
300
+ <div>
301
+ <h4 class="font-bold text-lg mb-2">3. VPS Deployment</h4>
302
+ <p class="text-slate-500 text-sm mb-4">On a raw Linux server, use PM2 to manage the process and Nginx as a reverse proxy.</p>
303
+ </div>
304
+ </div>
305
+ </section>
166
306
  </div>
167
307
  </div>
168
308
  </div>
@@ -171,9 +311,17 @@ resources :posts
171
311
  document.querySelectorAll('a[href^="#"]').forEach(anchor => {
172
312
  anchor.addEventListener('click', function (e) {
173
313
  e.preventDefault();
174
- document.querySelector(this.getAttribute('href')).scrollIntoView({
175
- behavior: 'smooth'
176
- });
314
+ const target = document.querySelector(this.getAttribute('href'));
315
+ if (target) {
316
+ const headerOffset = 100;
317
+ const elementPosition = target.getBoundingClientRect().top;
318
+ const offsetPosition = elementPosition + window.pageYOffset - headerOffset;
319
+
320
+ window.scrollTo({
321
+ top: offsetPosition,
322
+ behavior: 'smooth'
323
+ });
324
+ }
177
325
  });
178
326
  });
179
327
  </script>
data/app/views/index.erb CHANGED
@@ -1,6 +1,6 @@
1
1
  <div class="text-center space-y-6 max-w-2xl mx-auto py-12">
2
2
  <div class="inline-flex items-center px-4 py-1.5 rounded-full bg-primary/10 border border-primary/20 text-primary text-xs font-bold uppercase tracking-wider animate-pulse">
3
- Framework Version 2.0.0
3
+ Framework Version 4.0.0
4
4
  </div>
5
5
 
6
6
  <h1 class="text-5xl md:text-7xl font-black tracking-tight leading-tight">
data/app/views/layout.erb CHANGED
@@ -316,7 +316,7 @@
316
316
  <!-- Sidebar Layout -->
317
317
  <div class="flex min-h-screen">
318
318
  <!-- Sidebar -->
319
- <aside class="fixed left-0 top-0 bottom-0 w-64 <%= FEATURES_CONFIG['theme'] == 'light_sidebar' ? 'glass-panel !rounded-none border-r border-black/5' : 'bg-black border-r-4 border-primary' %> p-6 z-50 hidden md:flex flex-col gap-10">
319
+ <aside class="fixed left-0 top-0 bottom-0 w-64 <%= FEATURES_CONFIG['theme'] == 'light_sidebar' ? 'glass-panel !rounded-none border-r border-black/5' : 'bg-black border-r-4 border-primary shadow-[10px_0_30px_rgba(0,0,0,0.5)]' %> p-6 pb-12 z-50 hidden md:flex flex-col gap-10 overflow-y-auto custom-scrollbar">
320
320
  <div class="flex items-center gap-3">
321
321
  <% if FEATURES_CONFIG['theme'] == 'light_sidebar' %>
322
322
  <div class="w-10 h-10 bg-primary text-white flex items-center justify-center font-black text-xl rounded-xl shadow-lg shadow-primary/20">OF</div>
@@ -331,6 +331,11 @@
331
331
  <a href="/" class="p-4 <%= FEATURES_CONFIG['theme'] == 'light_sidebar' ? (req.path == '/' ? 'bg-primary/10 text-primary rounded-xl' : 'text-slate-600 hover:bg-primary/5 rounded-xl') : (req.path == '/' ? 'bg-primary text-white border-primary border-2 rounded-2xl' : 'border-white/10 text-white hover:border-primary border-2 rounded-2xl') %> font-bold transition-all">
332
332
  <i class="fas fa-grid-2 mr-3"></i> OVERVIEW
333
333
  </a>
334
+ <% if FEATURES_CONFIG['type'] == 'e_commerce' %>
335
+ <a href="/cart" class="p-4 <%= FEATURES_CONFIG['theme'] == 'light_sidebar' ? (req.path == '/cart' ? 'bg-primary/10 text-primary rounded-xl' : 'text-slate-600 hover:bg-primary/5 rounded-xl') : (req.path == '/cart' ? 'bg-primary text-white border-primary border-2 rounded-2xl' : 'border-white/10 text-white hover:border-primary border-2 rounded-2xl') %> font-bold transition-all">
336
+ <i class="fas fa-shopping-cart mr-3"></i> MY CART
337
+ </a>
338
+ <% end %>
334
339
  <% Page.where(is_nav: true, is_active: true).all.each do |p| %>
335
340
  <a href="/<%= p.slug %>" class="p-4 <%= FEATURES_CONFIG['theme'] == 'light_sidebar' ? (req.path == "/#{p.slug}" ? 'bg-primary/10 text-primary rounded-xl' : 'text-slate-600 hover:bg-primary/5 rounded-xl') : (req.path == "/#{p.slug}" ? 'bg-primary text-white border-primary border-2 rounded-2xl' : 'border-white/10 text-white hover:border-primary border-2 rounded-2xl') %> font-bold transition-all">
336
341
  <i class="fas fa-file-code mr-3"></i> <%= p.title.upcase %>
@@ -351,7 +356,7 @@
351
356
  UPLINK: <span class="text-primary">ENCRYPTED</span>
352
357
  <% end %>
353
358
  </div>
354
- <a href="https://github.com/IshikawaUta/one-for-all-framework" class="flex items-center justify-center w-full p-4 <%= FEATURES_CONFIG['theme'] == 'light_sidebar' ? 'bg-slate-900 text-white rounded-xl shadow-lg shadow-slate-200' : 'bg-primary text-black border-2 border-primary rounded-2xl shadow-[4px_4px_0px_var(--secondary)]' %> font-black hover:opacity-90 hover:-translate-y-0.5 transition-all">
359
+ <a href="https://github.com/IshikawaUta/one-for-all-framework" class="flex items-center justify-center w-full p-4 mb-4 <%= FEATURES_CONFIG['theme'] == 'light_sidebar' ? 'bg-slate-900 text-white rounded-xl shadow-lg shadow-slate-200' : 'bg-primary text-black border-2 border-primary rounded-2xl shadow-[4px_4px_0px_var(--secondary)]' %> font-black hover:opacity-90 hover:-translate-y-0.5 transition-all">
355
360
  <i class="fab fa-github mr-2 text-lg"></i> <%= FEATURES_CONFIG['theme'] == 'light_sidebar' ? 'VIEW SOURCE' : 'ACCESS REPO' %>
356
361
  </a>
357
362
  </div>
@@ -368,6 +373,11 @@
368
373
  <div class="max-w-5xl mx-auto">
369
374
  <%= @content %>
370
375
  </div>
376
+
377
+ <!-- Footer -->
378
+ <footer class="w-full py-12 mt-20 border-t <%= FEATURES_CONFIG['theme'] == 'light_sidebar' ? 'border-black/5' : 'border-white/5' %> text-center text-slate-500 text-sm">
379
+ <p>&copy; <%= Time.now.year %> One-For-All Framework.</p>
380
+ </footer>
371
381
  </main>
372
382
  </div>
373
383
  <% else %>
@@ -380,6 +390,9 @@
380
390
 
381
391
  <ul class="hidden md:flex items-center gap-8">
382
392
  <li><a href="/" class="nav-item <%= req.path == '/' ? 'active' : '' %>">Home</a></li>
393
+ <% if FEATURES_CONFIG['type'] == 'e_commerce' %>
394
+ <li><a href="/cart" class="nav-item <%= req.path == '/cart' ? 'active' : '' %>"><i class="fas fa-shopping-cart mr-1"></i> Cart</a></li>
395
+ <% end %>
383
396
  <% Page.where(is_nav: true, is_active: true).all.each do |p| %>
384
397
  <li><a href="/<%= p.slug %>" class="nav-item <%= req.path == "/#{p.slug}" ? 'active' : '' %>"><%= p.title %></a></li>
385
398
  <% end %>
@@ -396,8 +409,13 @@
396
409
  </header>
397
410
 
398
411
 
399
- <main class="container mx-auto max-w-4xl px-6 py-12">
412
+ <main class="container mx-auto max-w-6xl px-6 py-12">
400
413
  <%= @content %>
414
+
415
+ <!-- Footer -->
416
+ <footer class="w-full py-12 mt-20 border-t border-white/5 text-center text-slate-500 text-sm">
417
+ <p>&copy; <%= Time.now.year %> One-For-All Framework.</p>
418
+ </footer>
401
419
  </main>
402
420
  <% end %>
403
421
 
@@ -416,6 +434,11 @@
416
434
  <a href="/" class="text-lg font-bold <%= req.path == '/' ? 'text-primary' : 'text-slate-500' %>">
417
435
  <i class="fas fa-home w-8"></i> Home
418
436
  </a>
437
+ <% if FEATURES_CONFIG['type'] == 'e_commerce' %>
438
+ <a href="/cart" class="text-lg font-bold <%= req.path == '/cart' ? 'text-primary' : 'text-slate-500' %>">
439
+ <i class="fas fa-shopping-cart w-8"></i> Cart
440
+ </a>
441
+ <% end %>
419
442
  <% Page.where(is_nav: true, is_active: true).all.each do |p| %>
420
443
  <a href="/<%= p.slug %>" class="text-lg font-bold <%= req.path == "/#{p.slug}" ? 'text-primary' : 'text-slate-500' %>">
421
444
  <i class="fas fa-file-alt w-8"></i> <%= p.title %>
@@ -435,10 +458,6 @@
435
458
  </div>
436
459
  </div>
437
460
 
438
- <!-- Footer -->
439
- <footer class="w-full py-12 mt-20 border-t border-white/5 text-center text-slate-500 text-sm">
440
- <p>&copy; <%= Time.now.year %> One-For-All Framework.</p>
441
- </footer>
442
461
 
443
462
  <script>
444
463
  document.addEventListener('DOMContentLoaded', () => {
data/app/views/product_show.erb ADDED
@@ -0,0 +1,42 @@
1
+ <div class="mb-8">
2
+ <a href="/products" class="text-slate-400 hover:text-primary transition-colors">
3
+ <i class="fas fa-arrow-left mr-2"></i> Back to Shop
4
+ </a>
5
+ </div>
6
+
7
+ <div class="glass-panel p-8 md:p-12">
8
+ <div class="flex flex-col md:flex-row gap-12">
9
+ <div class="w-full md:w-1/2 aspect-square rounded-3xl overflow-hidden bg-slate-900/50 shadow-2xl">
10
+ <img src="<%= @product.image_url || '/images/logo.png' %>" class="w-full h-full object-cover">
11
+ </div>
12
+
13
+ <div class="w-full md:w-1/2 flex flex-col justify-center">
14
+ <div class="badge-premium"><%= @product.category || 'General' %></div>
15
+ <h1 class="text-4xl md:text-5xl font-black mb-4 tracking-tighter"><%= @product.name %></h1>
16
+ <div class="text-3xl font-bold text-primary mb-6">$<%= @product.price %></div>
17
+
18
+ <div class="markdown-content mb-10">
19
+ <%= markdown(@product.description) %>
20
+ </div>
21
+
22
+ <div class="flex items-center gap-6">
23
+ <form action="/cart/add" method="POST" class="flex items-center gap-4">
24
+ <%= csrf_tag %>
25
+ <input type="hidden" name="product_id" value="<%= @product.id %>">
26
+ <div class="flex items-center glass-panel !rounded-xl overflow-hidden">
27
+ <button type="button" onclick="this.nextElementSibling.stepDown()" class="px-4 py-2 hover:bg-white/5">-</button>
28
+ <input type="number" name="qty" value="1" min="1" class="w-12 bg-transparent text-center font-bold focus:outline-none">
29
+ <button type="button" onclick="this.previousElementSibling.stepUp()" class="px-4 py-2 hover:bg-white/5">+</button>
30
+ </div>
31
+ <button type="submit" class="btn-premium flex-1">
32
+ <i class="fas fa-shopping-cart mr-2"></i> Add to Cart
33
+ </button>
34
+ </form>
35
+ </div>
36
+
37
+ <div class="mt-8 pt-8 border-t border-white/5 text-sm text-slate-500">
38
+ <i class="fas fa-cubes mr-2"></i> Stock available: <%= @product.stock %> items
39
+ </div>
40
+ </div>
41
+ </div>
42
+ </div>
data/app/views/products_index.erb ADDED
@@ -0,0 +1,40 @@
1
+ <div class="text-center mb-16">
2
+ <div class="badge-premium">E-Commerce Mode</div>
3
+ <h1 class="text-5xl font-black mb-4 tracking-tighter">Premium Shop</h1>
4
+ <p class="text-slate-500 text-lg">Curated collection of state-of-the-art digital assets.</p>
5
+ </div>
6
+
7
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
8
+ <% @products.each do |product| %>
9
+ <div class="glass-card group">
10
+ <div class="card-glow"></div>
11
+ <div class="aspect-video mb-6 rounded-2xl overflow-hidden bg-slate-900/50 relative">
12
+ <img src="<%= product.image_url || '/images/logo.png' %>" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700">
13
+ <div class="absolute top-4 right-4 bg-primary text-white font-black px-4 py-2 rounded-xl shadow-xl">
14
+ $<%= product.price %>
15
+ </div>
16
+ </div>
17
+ <h3 class="text-2xl font-black mb-2"><%= product.name %></h3>
18
+ <p class="text-slate-500 mb-6 line-clamp-2"><%= product.description %></p>
19
+
20
+ <div class="flex items-center justify-between mt-auto">
21
+ <a href="/products/<%= product.slug %>" class="btn-secondary">Details</a>
22
+ <form action="/cart/add" method="POST">
23
+ <%= csrf_tag %>
24
+ <input type="hidden" name="product_id" value="<%= product.id %>">
25
+ <button type="submit" class="btn-premium">
26
+ <i class="fas fa-shopping-cart mr-2"></i> Add to Cart
27
+ </button>
28
+ </form>
29
+ </div>
30
+ </div>
31
+ <% end %>
32
+
33
+ <% if @products.empty? %>
34
+ <div class="col-span-full glass-card text-center py-20">
35
+ <i class="fas fa-box-open text-6xl text-slate-300 mb-6"></i>
36
+ <h2 class="text-2xl font-bold text-slate-400">No products available yet.</h2>
37
+ <p class="text-slate-500">Visit dashboard to add your first product.</p>
38
+ </div>
39
+ <% end %>
40
+ </div>