one-for-all-framework 1.0.0

data/app/views/docs.erb

@@ -0,0 +1,140 @@
+<div class="space-y-12 pb-20">
+    <div class="text-left">
+        <div class="badge-premium">Documentation v1.0</div>
+        <h1 class="text-5xl font-black tracking-tighter mb-4 text-slate-700 dark:text-white">Framework <span class="text-primary">Guide</span></h1>
+        <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>
+    </div>
+
+    <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
+        <!-- Sidebar Navigation -->
+        <aside class="md:col-span-1 space-y-4 sticky top-28 h-fit hidden md:block">
+            <h4 class="text-xs font-black uppercase tracking-widest text-slate-400 mb-4 ml-4">Table of Contents</h4>
+            <nav class="space-y-1">
+                <a href="#intro" 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">Introduction</a>
+                <a href="#cli" 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">CLI Power Tools</a>
+                <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>
+                <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>
+                <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>
+            </nav>
+        </aside>
+
+        <!-- Main Content -->
+        <div class="md:col-span-3 space-y-16">
+            <!-- Introduction -->
+            <section id="intro" class="glass-panel p-8 md:p-12 text-left">
+                <h2 class="text-3xl font-black tracking-tight mb-6 flex items-center gap-3">
+                    <i class="fas fa-star text-primary"></i> Introduction
+                </h2>
+                <div class="markdown-content">
+                    <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>
+                    <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>
+                </div>
+            </section>
+
+            <!-- CLI Commands -->
+            <section id="cli" class="space-y-6 text-left">
+                <h2 class="text-3xl font-black tracking-tight flex items-center gap-3 ml-2">
+                    <i class="fas fa-terminal text-primary"></i> CLI Power Tools
+                </h2>
+                <div class="glass-panel overflow-hidden">
+                    <table class="w-full text-left border-collapse">
+                        <thead class="bg-primary/5 border-b border-white/10">
+                            <tr>
+                                <th class="px-6 py-4 text-xs font-black uppercase text-slate-400">Command</th>
+                                <th class="px-6 py-4 text-xs font-black uppercase text-slate-400">Action</th>
+                            </tr>
+                        </thead>
+                        <tbody class="divide-y divide-white/5">
+                            <tr>
+                                <td class="px-6 py-4 font-mono text-sm text-primary">./ofa init</td>
+                                <td class="px-6 py-4 text-slate-600 dark:text-slate-400">Initializes the project environment and DB.</td>
+                            </tr>
+                            <tr>
+                                <td class="px-6 py-4 font-mono text-sm text-primary">./ofa run</td>
+                                <td class="px-6 py-4 text-slate-600 dark:text-slate-400">Starts the Eksa development server.</td>
+                            </tr>
+                            <tr>
+                                <td class="px-6 py-4 font-mono text-sm text-primary">./ofa g controller [name]</td>
+                                <td class="px-6 py-4 text-slate-600 dark:text-slate-400">Generates a new controller in app/controllers.</td>
+                            </tr>
+                            <tr>
+                                <td class="px-6 py-4 font-mono text-sm text-primary">./ofa theme [light|dark]</td>
+                                <td class="px-6 py-4 text-slate-600 dark:text-slate-400">Instantly toggles between UI themes.</td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+            </section>
+
+            <!-- Structure -->
+            <section id="structure" class="glass-panel p-8 md:p-12 text-left">
+                <h2 class="text-3xl font-black tracking-tight mb-6 flex items-center gap-3">
+                    <i class="fas fa-folder-tree text-primary"></i> Project Structure
+                </h2>
+                <div class="space-y-4">
+                    <div class="p-4 bg-slate-900 rounded-2xl font-mono text-sm text-blue-400 overflow-x-auto">
+<pre>
+/app
+  /controllers  # Logic handlers
+  /models       # Database entities
+  /views        # ERB templates
+/config
+  /database.rb  # DB connections
+  /routes.rb    # URL mapping
+/public
+  /images       # Static assets
+  /css          # Custom styles
+</pre>
+                    </div>
+                    <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>
+                </div>
+            </section>
+
+            <!-- Routing -->
+            <section id="routing" class="space-y-6 text-left">
+                <h2 class="text-3xl font-black tracking-tight flex items-center gap-3 ml-2">
+                    <i class="fas fa-route text-primary"></i> Routing System
+                </h2>
+                <div class="glass-panel p-8">
+                    <p class="text-slate-600 dark:text-slate-400 mb-6">Routes are defined in <code>config/routes.rb</code> using a clean Ruby DSL. You can map simple URLs or use the <code>resources</code> helper for full CRUD.</p>
+                    <div class="p-4 bg-slate-900 rounded-2xl font-mono text-sm text-green-400">
+<pre>
+# config/routes.rb
+get "/" do |req, res|
+  res.render "home"
+end
+
+resources :posts
+</pre>
+                    </div>
+                </div>
+            </section>
+
+            <!-- CMS -->
+            <section id="cms" class="glass-panel p-8 md:p-12 text-left bg-gradient-to-br from-primary/10 to-transparent">
+                <h2 class="text-3xl font-black tracking-tight mb-6 flex items-center gap-3">
+                    <i class="fas fa-shield-halved text-primary"></i> CMS & Auth
+                </h2>
+                <div class="markdown-content">
+                    <p>OFA comes with a secure built-in CMS dashboard accessible at <code>/dashboard</code>. To manage features, use the CLI:</p>
+                    <div class="p-4 bg-white/5 border border-white/10 rounded-2xl mb-4 font-mono text-sm">
+                        ./ofa feature enable auth<br>
+                        ./ofa feature enable cms
+                    </div>
+                    <p>Authentication is handled via BCrypt hashing with an 8-hour session sliding expiration window for optimal security.</p>
+                </div>
+            </section>
+        </div>
+    </div>
+</div>
+
+<script>
+    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+        anchor.addEventListener('click', function (e) {
+            e.preventDefault();
+            document.querySelector(this.getAttribute('href')).scrollIntoView({
+                behavior: 'smooth'
+            });
+        });
+    });
+</script>

data/app/views/error.erb

@@ -0,0 +1,159 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title><%= @code || "Error" %> — <%= @title || "One-For-All Framework" %></title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;800&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            <% if FEATURES_CONFIG['theme'] == 'light_glass' %>
+            --primary: #4f46e5;
+            --bg: #f8fafc;
+            --card-bg: rgba(255, 255, 255, 0.7);
+            --text: #1e293b;
+            --text-muted: #64748b;
+            --accent: #8b5cf6;
+            --border: rgba(0, 0, 0, 0.05);
+            --error-color: #ef4444;
+            <% else %>
+            --primary: #818cf8;
+            --bg: #030712;
+            --card-bg: rgba(17, 24, 39, 0.7);
+            --text: #f9fafb;
+            --text-muted: #9ca3af;
+            --accent: #c084fc;
+            --border: rgba(255, 255, 255, 0.1);
+            --error-color: #f87171;
+            <% end %>
+        }
+
+        * { margin: 0; padding: 0; box-sizing: border-box; }
+
+        body {
+            font-family: 'Outfit', sans-serif;
+            background-color: var(--bg);
+            <% if FEATURES_CONFIG['theme'] == 'light_glass' %>
+            background-image: radial-gradient(at 0% 0%, hsla(220,100%,95%,1) 0, transparent 50%),
+                radial-gradient(at 100% 0%, hsla(320,100%,95%,0.5) 0, transparent 50%);
+            <% else %>
+            background-image: radial-gradient(at 0% 0%, hsla(253,16%,7%,1) 0, transparent 50%),
+                radial-gradient(at 100% 0%, hsla(339,49%,30%,0.1) 0, transparent 50%);
+            <% end %>
+            color: var(--text);
+            min-height: 100vh;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+
+        .error-card {
+            width: 100%;
+            max-width: 520px;
+            padding: 4rem 3rem;
+            border-radius: 3rem;
+            background: var(--card-bg);
+            backdrop-filter: blur(30px);
+            -webkit-backdrop-filter: blur(30px);
+            border: 1px solid var(--border);
+            box-shadow: 0 50px 100px -20px rgba(0,0,0,0.5);
+            text-align: center;
+            animation: fadeIn 0.8s cubic-bezier(0.16, 1, 0.3, 1);
+            position: relative;
+            overflow: hidden;
+        }
+
+        @keyframes fadeIn {
+            from { opacity: 0; transform: translateY(30px); }
+            to   { opacity: 1; transform: translateY(0); }
+        }
+
+        .error-code {
+            font-size: 8rem;
+            font-weight: 900;
+            line-height: 1;
+            background: linear-gradient(135deg, var(--error-color), var(--accent));
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            margin-bottom: 1.5rem;
+            letter-spacing: -0.05em;
+        }
+
+        h1 {
+            font-size: 2rem;
+            font-weight: 800;
+            color: var(--text);
+            margin-bottom: 1rem;
+        }
+
+        p {
+            color: var(--text-muted);
+            margin-bottom: 3rem;
+            line-height: 1.8;
+            font-size: 1.1rem;
+        }
+
+        .btn-group {
+            display: flex;
+            gap: 1rem;
+            justify-content: center;
+            flex-wrap: wrap;
+        }
+
+        a {
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            padding: 1rem 2rem;
+            border-radius: 1.25rem;
+            text-decoration: none;
+            font-weight: 800;
+            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+            font-size: 0.95rem;
+        }
+
+        .btn-primary {
+            background: var(--primary);
+            color: white;
+            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3);
+        }
+
+        .btn-primary:hover {
+            transform: scale(1.05) translateY(-2px);
+            box-shadow: 0 20px 35px -5px rgba(0, 0, 0, 0.4);
+            filter: brightness(1.1);
+        }
+
+        .btn-secondary {
+            background: rgba(255, 255, 255, 0.05);
+            color: var(--text-muted);
+            border: 1px solid var(--border);
+        }
+
+        .btn-secondary:hover {
+            background: rgba(255, 255, 255, 0.1);
+            color: var(--text);
+            border-color: var(--primary);
+            transform: scale(1.05);
+        }
+    </style>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+</head>
+<body>
+    <div class="error-card">
+        <div class="error-code"><%= @code || "???" %></div>
+        <h1><%= @title || "System Error" %></h1>
+        <p><%= @message || "An unexpected anomaly occurred." %></p>
+        <div class="btn-group">
+            <a href="/" class="btn-primary">
+                <i class="fas fa-home mr-2"></i> Home
+            </a>
+            <a href="javascript:history.back()" class="btn-secondary">
+                <i class="fas fa-chevron-left mr-2"></i> Back
+            </a>
+        </div>
+    </div>
+</body>
+</html>

data/app/views/index.erb

@@ -0,0 +1,70 @@
+<div class="text-center space-y-6 max-w-2xl mx-auto py-12">
+    <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">
+        Framework Version 1.0.0
+    </div>
+    
+    <h1 class="text-5xl md:text-7xl font-black tracking-tight leading-tight">
+        One-For-All
+    </h1>
+    
+    <p class="text-lg md:text-xl text-slate-500 dark:text-slate-400 max-w-xl mx-auto">
+        The high-performance MVC framework for modern Rubyists. Built for speed, aesthetics, and developer happiness.
+    </p>
+
+    <div class="flex flex-wrap justify-center gap-4 pt-4">
+        <% if session[:user_id] || session[:username] %>
+            <a href="/dashboard" class="btn-premium">
+                <i class="fas fa-gauge-high mr-2"></i> Dashboard
+            </a>
+            <form action="/logout" method="POST" class="inline">
+                <%= csrf_tag if defined?(csrf_tag) %>
+                <button type="submit" class="px-8 py-3 rounded-2xl border border-white/10 dark:border-white/5 font-semibold text-slate-600 dark:text-slate-300 hover:bg-white/5 transition-all">
+                    Logout
+                </button>
+            </form>
+        <% else %>
+            <a href="/login" class="btn-premium">
+                Get Started <i class="fas fa-arrow-right ml-2 text-sm"></i>
+            </a>
+            <a href="/docs" class="px-8 py-3 rounded-2xl border border-white/10 dark:border-white/5 font-semibold text-slate-600 dark:text-slate-300 hover:bg-white/5 transition-all">
+                Read Documentation
+            </a>
+        <% end %>
+    </div>
+</div>
+
+<div class="grid grid-cols-1 md:grid-cols-3 gap-8 mt-24">
+    <div class="glass-card !p-10 group">
+        <div class="card-glow"></div>
+        <div class="w-16 h-16 bg-primary/10 rounded-2xl flex items-center justify-center text-primary text-3xl mb-8 group-hover:scale-110 group-hover:bg-primary group-hover:text-white transition-all duration-500 shadow-xl shadow-primary/10">
+            <i class="fas fa-rocket"></i>
+        </div>
+        <h3 class="text-2xl font-black mb-4 tracking-tighter">Lightning Fast</h3>
+        <p class="text-slate-500 dark:text-slate-400 leading-relaxed">
+            Optimized runtime performance and zero-config caching out of the box. Experience 100/100 Lighthouse scores.
+        </p>
+    </div>
+
+    <div class="glass-card !p-10 group">
+        <div class="card-glow !bg-secondary/10"></div>
+        <div class="w-16 h-16 bg-secondary/10 rounded-2xl flex items-center justify-center text-secondary text-3xl mb-8 group-hover:scale-110 group-hover:bg-secondary group-hover:text-white transition-all duration-500 shadow-xl shadow-secondary/10">
+            <i class="fas fa-gem"></i>
+        </div>
+        <h3 class="text-2xl font-black mb-4 tracking-tighter">Clean MVC</h3>
+        <p class="text-slate-500 dark:text-slate-400 leading-relaxed">
+            Beautifully structured code inspired by the best modern web paradigms. Scalable, maintainable, and elegant.
+        </p>
+    </div>
+
+    <div class="glass-card !p-10 group">
+        <div class="card-glow"></div>
+        <div class="w-16 h-16 bg-primary/10 rounded-2xl flex items-center justify-center text-primary text-3xl mb-8 group-hover:scale-110 group-hover:bg-primary group-hover:text-white transition-all duration-500 shadow-xl shadow-primary/10">
+            <i class="fas fa-shield-halved"></i>
+        </div>
+        <h3 class="text-2xl font-black mb-4 tracking-tighter">Secure by Default</h3>
+        <p class="text-slate-500 dark:text-slate-400 leading-relaxed">
+            Built-in protection against common vulnerabilities. CSRF, XSS, and SQL Injection mitigation ready.
+        </p>
+    </div>
+</div>
+

data/app/views/layout.erb

@@ -0,0 +1,251 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title><%= @title || "One-For-All Framework" %></title>
+    <link rel="icon" type="image/png" href="/images/logo.png">
+    
+    <!-- Fonts & Icons -->
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;800&family=Fira+Code&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+
+    <!-- Tailwind CSS CDN -->
+    <script src="https://cdn.tailwindcss.com"></script>
+    
+    <!-- Anime.js & Prism.js -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-tomorrow.min.css" rel="stylesheet" />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-ruby.min.js"></script>
+    
+    <script>
+        tailwind.config = {
+            darkMode: 'class',
+            theme: {
+                extend: {
+                    colors: {
+                        primary: '<%= FEATURES_CONFIG["theme"] == "light_glass" ? "#4f46e5" : "#818cf8" %>',
+                        secondary: '<%= FEATURES_CONFIG["theme"] == "light_glass" ? "#8b5cf6" : "#c084fc" %>',
+                        surface: '<%= FEATURES_CONFIG["theme"] == "light_glass" ? "rgba(255, 255, 255, 0.7)" : "rgba(17, 24, 39, 0.6)" %>',
+                        bg: '<%= FEATURES_CONFIG["theme"] == "light_glass" ? "#f8fafc" : "#030712" %>',
+                    },
+                    fontFamily: {
+                        sans: ['Outfit', 'sans-serif'],
+                        mono: ['Fira Code', 'monospace'],
+                    },
+                    backdropBlur: {
+                        xs: '2px',
+                    }
+                }
+            }
+        }
+    </script>
+
+    <style>
+        :root {
+            --primary: <%= FEATURES_CONFIG["theme"] == "light_glass" ? "#4f46e5" : "#818cf8" %>;
+            --secondary: <%= FEATURES_CONFIG["theme"] == "light_glass" ? "#8b5cf6" : "#c084fc" %>;
+            --surface: <%= FEATURES_CONFIG["theme"] == "light_glass" ? "rgba(255, 255, 255, 0.7)" : "rgba(17, 24, 39, 0.6)" %>;
+            --bg-color: <%= FEATURES_CONFIG["theme"] == "light_glass" ? "#f8fafc" : "#030712" %>;
+            --glass-border: <%= FEATURES_CONFIG["theme"] == "light_glass" ? "rgba(0, 0, 0, 0.05)" : "rgba(255, 255, 255, 0.1)" %>;
+        }
+
+        body {
+            background-color: var(--bg-color);
+            background-image: 
+                <% if FEATURES_CONFIG['theme'] == 'light_glass' %>
+                radial-gradient(at 0% 0%, hsla(220,100%,95%,1) 0, transparent 50%), 
+                radial-gradient(at 50% 0%, hsla(250,100%,95%,0.8) 0, transparent 50%), 
+                radial-gradient(at 100% 0%, hsla(320,100%,95%,0.8) 0, transparent 50%);
+                <% else %>
+                radial-gradient(at 0% 0%, hsla(253,16%,7%,1) 0, transparent 50%), 
+                radial-gradient(at 50% 0%, hsla(225,39%,30%,0.15) 0, transparent 50%), 
+                radial-gradient(at 100% 0%, hsla(339,49%,30%,0.15) 0, transparent 50%);
+                <% end %>
+            background-attachment: fixed;
+        }
+
+        .glass-panel {
+            background: var(--surface);
+            backdrop-filter: blur(20px);
+            -webkit-backdrop-filter: blur(20px);
+            border: 1px solid var(--glass-border);
+            border-radius: 1.5rem;
+            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.1);
+        }
+
+        .glass-card {
+            background: var(--surface);
+            backdrop-filter: blur(24px);
+            -webkit-backdrop-filter: blur(24px);
+            border: 1px solid var(--glass-border);
+            border-radius: 2.5rem;
+            padding: 2rem;
+            transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
+            position: relative;
+            overflow: hidden;
+        }
+
+        .glass-card:hover {
+            transform: translateY(-8px);
+            box-shadow: 0 30px 60px -12px rgba(0, 0, 0, 0.2), 0 0 40px var(--primary);
+            border-color: rgba(255, 255, 255, 0.2);
+        }
+
+        .card-glow {
+            position: absolute;
+            top: -50px;
+            right: -50px;
+            width: 200px;
+            height: 200px;
+            background: var(--primary);
+            filter: blur(80px);
+            opacity: 0.1;
+            border-radius: 50%;
+            transition: opacity 0.5s;
+            pointer-events: none;
+        }
+
+        .glass-card:hover .card-glow {
+            opacity: 0.2;
+        }
+
+        .btn-premium {
+            background: var(--primary);
+            color: white;
+            padding: 0.85rem 2rem;
+            border-radius: 1rem;
+            font-weight: 800;
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            transition: all 0.3s;
+            box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.2);
+            position: relative;
+            overflow: hidden;
+        }
+
+        .btn-premium:hover {
+            transform: scale(1.05);
+            box-shadow: 0 15px 30px -5px rgba(0, 0, 0, 0.3);
+            filter: brightness(1.1);
+        }
+
+        .btn-secondary {
+            background: rgba(255, 255, 255, 0.05);
+            color: var(--text-muted);
+            padding: 0.85rem 2rem;
+            border-radius: 1rem;
+            font-weight: 700;
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            transition: all 0.3s;
+            border: 1px solid var(--glass-border);
+            backdrop-filter: blur(10px);
+        }
+
+        .btn-secondary:hover {
+            background: rgba(255, 255, 255, 0.1);
+            color: var(--primary);
+            border-color: var(--primary);
+            transform: translateX(-5px);
+        }
+
+        .badge-premium {
+            display: inline-flex;
+            padding: 0.25rem 0.75rem;
+            border-radius: 9999px;
+            background: rgba(79, 70, 229, 0.1);
+            color: var(--primary);
+            font-size: 0.65rem;
+            font-weight: 900;
+            text-transform: uppercase;
+            letter-spacing: 0.1em;
+            border: 1px solid rgba(79, 70, 229, 0.2);
+            margin-bottom: 1rem;
+        }
+
+        .nav-item {
+            color: #64748b;
+            font-weight: 600;
+            transition: color 0.3s;
+        }
+
+        .nav-item:hover, .nav-item.active {
+            color: var(--primary);
+        }
+
+        /* Markdown Overrides */
+        .markdown-content { text-align: left; line-height: 1.6; }
+        .markdown-content h1 { font-size: 2.25rem; font-weight: 800; margin: 2rem 0 1rem; color: var(--primary); }
+        .markdown-content p { font-size: 1.125rem; color: #475569; margin-bottom: 1.5rem; }
+        .dark .markdown-content p { color: #cbd5e1; }
+    </style>
+</head>
+<body class="<%= FEATURES_CONFIG['theme'] == 'dark_glass' ? 'dark' : '' %>">
+    
+    <!-- Animated Background Shapes -->
+    <div class="fixed inset-0 -z-10 overflow-hidden opacity-30 pointer-events-none">
+        <div class="absolute -top-24 -left-24 w-96 h-96 bg-primary rounded-full blur-[120px] animate-pulse"></div>
+        <div class="absolute top-1/2 -right-24 w-80 h-80 bg-secondary rounded-full blur-[100px] delay-700 animate-bounce"></div>
+    </div>
+
+    <!-- Navigation -->
+    <header class="w-full flex justify-center p-4 sticky top-0 z-50">
+        <nav class="glass-panel w-full max-w-4xl px-8 py-4 flex items-center justify-between">
+            <div class="flex items-center gap-3">
+                <span class="text-xl font-extrabold tracking-tighter">OFA<span class="text-primary">.framework</span></span>
+            </div>
+            
+            <ul class="hidden md:flex items-center gap-8">
+                <li><a href="/" class="nav-item <%= req.path == '/' ? 'active' : '' %>">Home</a></li>
+                <% Page.where(is_nav: true, is_active: true).all.each do |p| %>
+                    <li><a href="/<%= p.slug %>" class="nav-item <%= req.path == "/#{p.slug}" ? 'active' : '' %>"><%= p.title %></a></li>
+                <% end %>
+                <li><a href="/dashboard" class="nav-item <%= req.path.start_with?('/dashboard') ? 'active' : '' %>">Dashboard</a></li>
+            </ul>
+
+            <div class="flex items-center gap-4">
+                <a href="https://github.com" class="text-slate-400 hover:text-primary transition-colors"><i class="fab fa-github text-xl"></i></a>
+                <button class="md:hidden text-slate-400"><i class="fas fa-bars text-xl"></i></button>
+            </div>
+        </nav>
+    </header>
+
+    <main class="container mx-auto max-w-4xl px-6 py-12">
+        <%= @content %>
+    </main>
+
+    <!-- Footer -->
+    <footer class="w-full py-12 mt-20 border-t border-white/5 text-center text-slate-500 text-sm">
+        <p>&copy; <%= Time.now.year %> One-For-All Framework.</p>
+    </footer>
+
+    <script>
+        document.addEventListener('DOMContentLoaded', () => {
+            // Initial Page Load Animation
+            anime({
+                targets: 'header nav',
+                translateY: [-50, 0],
+                opacity: [0, 1],
+                duration: 1200,
+                easing: 'easeOutElastic(1, .8)'
+            });
+
+            anime({
+                targets: 'main > *',
+                translateY: [30, 0],
+                opacity: [0, 1],
+                delay: anime.stagger(100, {start: 300}),
+                duration: 1000,
+                easing: 'easeOutCubic'
+            });
+        });
+    </script>
+</body>
+</html>
+

data/app/views/login.erb

@@ -0,0 +1,45 @@
+<div class="glass-panel max-w-md mx-auto p-10 space-y-8">
+    <div class="text-center">
+        <h2 class="text-3xl font-black tracking-tight">Welcome Back</h2>
+        <p class="text-slate-500 dark:text-slate-400 mt-2">Sign in to manage your framework.</p>
+    </div>
+
+    <% if @error %>
+        <div class="bg-red-500/10 border border-red-500/20 text-red-500 p-4 rounded-2xl text-sm font-semibold flex items-center gap-3">
+            <i class="fas fa-circle-exclamation"></i>
+            <%= @error %>
+        </div>
+    <% end %>
+
+    <form action="/login" method="POST" class="space-y-4">
+        <%= csrf_tag %>
+        <div class="space-y-1">
+            <label class="text-xs font-bold uppercase tracking-wider text-slate-400 ml-1">Username</label>
+            <div class="relative">
+                <i class="fas fa-user absolute left-4 top-1/2 -translate-y-1/2 text-slate-400 text-sm"></i>
+                <input type="text" name="username" placeholder="admin" required autofocus
+                    class="w-full pl-12 pr-4 py-3 bg-white/5 border border-white/10 rounded-2xl focus:border-primary focus:ring-4 focus:ring-primary/10 outline-none transition-all">
+            </div>
+        </div>
+        
+        <div class="space-y-1">
+            <label class="text-xs font-bold uppercase tracking-wider text-slate-400 ml-1">Password</label>
+            <div class="relative">
+                <i class="fas fa-lock absolute left-4 top-1/2 -translate-y-1/2 text-slate-400 text-sm"></i>
+                <input type="password" name="password" placeholder="••••••••" required
+                    class="w-full pl-12 pr-4 py-3 bg-white/5 border border-white/10 rounded-2xl focus:border-primary focus:ring-4 focus:ring-primary/10 outline-none transition-all">
+            </div>
+        </div>
+
+        <button type="submit" class="btn-premium w-full mt-4">
+            Sign In <i class="fas fa-sign-in-alt ml-2"></i>
+        </button>
+    </form>
+
+    <div class="text-center pt-4 border-t border-white/5">
+        <p class="text-sm text-slate-500 dark:text-slate-400">
+            Forgot password? <a href="#" class="text-primary font-bold hover:underline">Contact System Admin</a>
+        </p>
+    </div>
+</div>
+