Upload 4 files

templates/admin.html

@@ -54,233 +54,16 @@
                     </button>
                     <button onclick="showTab('users')" class="admin-tab" data-tab="users">
                         👥 Users
-                    </button>
-                    <button onclick="showTab('database')" class="admin-tab" data-tab="database">
-                        🗄️ Database
-                    </button>
-                    <button onclick="showTab('tokens')" class="admin-tab" data-tab="tokens">
-                        🎯 Token Usage
-                    </button>
-                    <button onclick="showTab('system')" class="admin-tab" data-tab="system">
-                        🖥️ System Health
-                    </button>
-                </nav>
-            </div>
-        </div>
-
-        <!-- Tab Content -->
-        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
-            <!-- Dashboard Tab -->
-            <div id="dashboardTab" class="tab-content">
-                <h2 class="text-2xl font-bold mb-6">📊 System Dashboard</h2>
-                
-                <!-- System Stats Cards -->
-                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
-                    <div class="stat-card">
-                        <h3 class="text-lg font-semibold mb-2">👥 Total Users</h3>
-                        <p id="totalUsers" class="text-3xl font-bold">-</p>
-                        <p class="text-sm opacity-80">
-                            <span id="newUsersWeek">-</span> this week
-                        </p>
-                    </div>
-                    <div class="stat-card">
-                        <h3 class="text-lg font-semibold mb-2">📚 Study Sessions</h3>
-                        <p id="totalSessions" class="text-3xl font-bold">-</p>
-                        <p class="text-sm opacity-80">All time</p>
-                    </div>
-                    <div class="stat-card">
-                        <h3 class="text-lg font-semibold mb-2">🎯 API Tokens</h3>
-                        <p id="totalTokens" class="text-3xl font-bold">-</p>
-                        <p class="text-sm opacity-80">
-                            $<span id="estimatedCost">-</span> estimated cost
-                        </p>
-                    </div>
-                    <div class="stat-card">
-                        <h3 class="text-lg font-semibold mb-2">📝 Content Items</h3>
-                        <p id="totalContent" class="text-3xl font-bold">-</p>
-                        <p class="text-sm opacity-80">Articles & flashcards</p>
-                    </div>
-                </div>
-
-                <!-- Charts Section -->
-                <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
-                    <div class="admin-card">
-                        <h3 class="text-lg font-semibold mb-4">📈 User Growth</h3>
-                        <canvas id="userGrowthChart" width="400" height="200"></canvas>
-                    </div>
-                    <div class="admin-card">
-                        <h3 class="text-lg font-semibold mb-4">💰 Token Usage Costs</h3>
-                        <canvas id="tokenCostChart" width="400" height="200"></canvas>
-                    </div>
-                </div>
-
-                <!-- Recent Activity -->
-                <div class="admin-card">
-                    <h3 class="text-lg font-semibold mb-4">🔄 Recent Activity</h3>
-                    <div id="recentActivity" class="space-y-2">
-                        <div class="text-center text-gray-500 py-4">Loading recent activity...</div>
-                    </div>
-                </div>
-            </div>
-
-            <!-- Users Tab -->
-            <!-- Users Tab removed: user management is not available in open version -->
-
-            <!-- Database Tab -->
-            <div id="databaseTab" class="tab-content hidden">
-                <h2 class="text-2xl font-bold mb-6">🗄️ Database Overview</h2>
-                
-                <div class="admin-card">
-                    <h3 class="text-lg font-semibold mb-4">📋 Database Schema</h3>
-                    <div id="databaseSchema" class="space-y-4">
-                        <div class="text-center text-gray-500 py-4">Loading schema...</div>
-                    </div>
-                </div>
-            </div>
-
-            <!-- Token Usage Tab -->
-            <div id="tokensTab" class="tab-content hidden">
-                <div class="flex justify-between items-center mb-6">
-                    <h2 class="text-2xl font-bold">🎯 Token Usage Analytics</h2>
-                    <button onclick="exportTokens()" class="bg-green-500 text-white px-4 py-2 rounded-lg hover:bg-green-600">
-                        📥 Export Token Data
-                    </button>
-                </div>
-                
-                <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
-                    <div class="admin-card">
-                        <h3 class="text-lg font-semibold mb-4">📊 Usage by Provider</h3>
-                        <canvas id="providerUsageChart" width="400" height="300"></canvas>
-                    </div>
-                    <div class="admin-card">
-                        <h3 class="text-lg font-semibold mb-4">💰 Cost Breakdown</h3>
-                        <canvas id="costBreakdownChart" width="400" height="300"></canvas>
-                    </div>
-                </div>
-            </div>
-
-            <!-- System Health Tab -->
-            <div id="systemTab" class="tab-content hidden">
-                <h2 class="text-2xl font-bold mb-6">🖥️ System Health Monitor</h2>
-                
-                <!-- System Alerts -->
-                <div class="admin-card mb-6">
-                    <h3 class="text-lg font-semibold mb-4">⚠️ System Alerts</h3>
-                    <div id="systemAlerts">
-                        <div class="text-center text-gray-500 py-4">Loading alerts...</div>
-                    </div>
-                </div>
-
-                <!-- System Metrics -->
-                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-6">
-                    <div class="admin-card">
-                        <h4 class="font-semibold mb-3">💾 Memory Usage</h4>
-                        <div id="memoryMetrics">
-                            <div class="text-sm text-gray-500">Loading...</div>
-                        </div>
-                    </div>
-                    
-                    <div class="admin-card">
-                        <h4 class="font-semibold mb-3">💿 Disk Usage</h4>
-                        <div id="diskMetrics">
-                            <div class="text-sm text-gray-500">Loading...</div>
-                        </div>
-                    </div>
-                    
-                    <div class="admin-card">
-                        <h4 class="font-semibold mb-3">🗄️ Database</h4>
-                        <div id="databaseMetrics">
-                            <div class="text-sm text-gray-500">Loading...</div>
-                        </div>
-                    </div>
-                </div>
-
-                <!-- Error Logs -->
-                <div class="admin-card">
-                    <h3 class="text-lg font-semibold mb-4">🚨 Recent Errors</h3>
-                    <div id="errorLogs">
-                        <div class="text-center text-gray-500 py-4">Loading error logs...</div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-
-    <!-- User Detail Modal removed -->
-
-    <!-- Toast Notifications -->
-    <div id="toastContainer" class="fixed top-4 right-4 z-50"></div>
-
-    <script>
-        // User logic, authentication, and user management removed. Admin panel is always accessible.
-
-        // Tab management (users tab removed)
-        function showTab(tabName) {
-            document.querySelectorAll('.tab-content').forEach(tab => {
-                tab.classList.add('hidden');
-            });
-            document.querySelectorAll('.admin-tab').forEach(btn => {
-                btn.classList.remove('active', 'border-blue-500', 'text-blue-600');
-                btn.classList.add('border-transparent', 'text-gray-500');
-            });
-            document.getElementById(tabName + 'Tab').classList.remove('hidden');
-            const activeBtn = document.querySelector(`[data-tab="${tabName}"]`);
-            activeBtn.classList.add('active', 'border-blue-500', 'text-blue-600');
-            activeBtn.classList.remove('border-transparent', 'text-gray-500');
-            if (tabName === 'dashboard') {
-                loadDashboard();
-            } else if (tabName === 'database') {
-                loadDatabaseSchema();
-            } else if (tabName === 'tokens') {
-                loadTokenUsage();
-            } else if (tabName === 'system') {
-                loadSystemHealth();
-            }
-        }
-
-        async function loadDashboard() {
-            try {
-                const response = await fetch('/admin/dashboard');
-                const data = await response.json();
-                
-                if (data.success) {
-                    const stats = data.stats;
-                    
-                    // Update stat cards
-                    document.getElementById('totalUsers').textContent = stats.users?.total || 0;
-                    document.getElementById('newUsersWeek').textContent = stats.users?.new_week || 0;
-                    document.getElementById('totalSessions').textContent = stats.activity?.total_sessions || 0;
-                    document.getElementById('totalTokens').textContent = (stats.api_usage?.total_tokens || 0).toLocaleString();
-                    document.getElementById('estimatedCost').textContent = stats.api_usage?.estimated_cost || '0.00';
-                    document.getElementById('totalContent').textContent = 
-                        (stats.activity?.total_flashcards || 0) + (stats.activity?.total_articles || 0);
-                    
-                    // Update recent activity
-                    updateRecentActivity(stats.recent_activity || []);
-                    
-                    // Create charts
-                    createCharts(stats);
-                }
-            } catch (error) {
-                console.error('Dashboard loading error:', error);
-                showToast('Failed to load dashboard', 'error');
-            }
-        }
-
-        function updateRecentActivity(activities) {
-            const container = document.getElementById('recentActivity');
-            
-            if (activities.length === 0) {
-                container.innerHTML = '<div class="text-center text-gray-500 py-4">No recent activity</div>';
-                return;
-            }
-            
-            container.innerHTML = activities.map(activity => `
-                <div class="flex items-center justify-between py-2 border-b border-gray-100">
-                    <div>
-                        <span class="font-medium">${activity.user}</span>
-                        <span class="text-gray-600">performed ${activity.activity}</span>
+                    {% extends "base.html" %}
+                    {% block title %}Admin - English Helper{% endblock %}
+                    {% block content %}
+                    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
+                        <h1 class="text-2xl font-bold mb-4">Painel de Administração</h1>
+                        <!-- Aqui vai o conteúdo do painel admin, tabs, cards, gráficos, etc. -->
+                        <p>Gerencie usuários, flashcards e estatísticas do sistema.</p>
+                        <!-- Mantenha seus scripts JS e componentes aqui, se necessário -->
                     </div>
+                    {% endblock %}
                     <span class="text-sm text-gray-500">${formatDate(activity.timestamp)}</span>
                 </div>
             `).join('');

templates/base.html

@@ -4,31 +4,15 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>English Helper - Admin Panel</title>
-    <script src="https://cdn.tailwindcss.com"></script>
-    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
-    <style>
-        /* Tailwind utility classes should be used directly in HTML, not via @apply in <style> */
-        .spinner {
-            border: 3px solid #f3f3f3;
-            border-top: 3px solid #3498db;
-            border-radius: 50%;
-            width: 20px;
-            height: 20px;
-            animation: spin 1s linear infinite;
-            display: inline-block;
-            margin-right: 10px;
-        }
-        @keyframes spin {
-            0% { transform: rotate(0deg); }
-            100% { transform: rotate(360deg); }
-        }
-        .table-container {
-            max-height: 600px;
-            overflow-y: auto;
-        }
-    </style>
-</head>
-<body class="bg-gray-100 min-h-screen">
+        <meta charset="UTF-8">
+        <title>{% block title %}English Helper{% endblock %}</title>
+        <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
+        <style>
+            nav { background: #f5f5f5; padding: 1em; margin-bottom: 2em; }
+            nav a { margin-right: 1em; text-decoration: none; color: #333; font-weight: bold; }
+            nav a:hover { color: #007bff; }
+            main { max-width: 900px; margin: auto; }
+        </style>
     <!-- Admin Login Modal removed: admin panel is always accessible -->
 
     <!-- Admin Interface -->

templates/index.html

@@ -8,202 +8,16 @@
     <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
     <style>
         @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
-        body { font-family: 'Inter', sans-serif; background-color: #f7f9fc; }
-        .card { background-color: white; border-radius: 12px; box-shadow: 0 4px_12px rgba(0,0,0,0.08); padding: 24px; }
-        .btn { padding: 0.5rem 1rem; border-radius: 8px; font-weight: 600; transition: all 0.2s; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
-        .btn:disabled { cursor: not-allowed; opacity: 0.5; }
-        .btn-primary { background-color: #4f46e5; color: white; }
-        .btn-primary:hover:not(:disabled) { background-color: #4338ca; }
-        .spinner { border: 2px solid rgba(255,255,255,0.3); width: 20px; height: 20px; border-radius: 50%; border-left-color: #fff; animation: spin 1s ease infinite; }
-        @keyframes spin { to { transform: rotate(360deg); } }
-        .flashcard-container { perspective: 1000px; position: relative; }
-        .flashcard-inner { position: relative; width: 100%; transition: transform 0.6s; transform-style: preserve-3d; }
-        .flashcard-container.flipped .flashcard-inner { transform: rotateY(180deg); }
-        .flashcard-front, .flashcard-back { position: absolute; width: 100%; height:100%; backface-visibility: hidden; border: 1px solid #e5e7eb; border-radius: 12px; padding: 20px; display: flex; flex-direction: column; justify-content: space-between; }
-        .flashcard-front { background-color: #f9fafb; }
-        .flashcard-back { background-color: #ffffff; transform: rotateY(180deg); }
-        .audio-btn { background: none; border: none; font-size: 1.5rem; cursor: pointer; color: #4f46e5; padding: 0; }
-        .delete-btn { position: absolute; top: 10px; right: 10px; background: none; border: none; font-size: 1.2rem; cursor: pointer; color: #9ca3af; z-index: 10; }
-        .delete-btn:hover { color: #ef4444; }
-        #activityChatDisplay { border: 1px solid #e5e7eb; border-radius: 8px; padding: 1rem; min-height: 150px; background-color: #f9fafb; }
-        .ai-prompt { border-bottom: 2px dashed #d1d5db; padding-bottom: 1rem; margin-bottom: 1rem; }
-        .user-response-display { background-color: #eef2ff; border-left: 4px solid #4f46e5; padding: 0.75rem; margin-bottom: 1rem; font-style: italic; }
-        .ai-feedback { background-color: #f0fdf4; border-left: 4px solid #22c55e; padding: 0.75rem; }
-        .ai-feedback h3 { font-weight: 700; }
-        
-        /* Toast Notifications */
-        .toast-container { position: fixed; top: 20px; right: 20px; z-index: 1000; max-width: 400px; }
-        .toast { background: white; border-left: 4px solid #4f46e5; border-radius: 8px; box-shadow: 0 10px 25px rgba(0,0,0,0.15); padding: 1rem; margin-bottom: 0.5rem; opacity: 0; transform: translateX(100%); transition: all 0.3s ease; }
-        .toast.show { opacity: 1; transform: translateX(0); }
-        .toast.error { border-left-color: #ef4444; }
-        .toast.success { border-left-color: #10b981; }
-        .toast.warning { border-left-color: #f59e0b; }
-        .toast-close { float: right; background: none; border: none; font-size: 1.2rem; cursor: pointer; color: #9ca3af; }
-        
-        /* Loading States & Skeleton */
-        .loading-skeleton { 
-            background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); 
-            background-size: 200% 100%; 
-            animation: loading 1.5s infinite; 
-            border-radius: 4px;
-        }
-        @keyframes loading { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
-        
-        .skeleton-text { height: 1rem; margin: 0.25rem 0; }
-        .skeleton-text.large { height: 1.5rem; }
-        .skeleton-text.small { height: 0.75rem; }
-        .skeleton-box { height: 100px; border-radius: 8px; }
-        
-        /* Enhanced Loading Spinner */
-        .spinner-container { display: flex; align-items: center; justify-content: center; padding: 2rem; }
-        .spinner-large { width: 40px; height: 40px; border-width: 4px; }
-        
-        /* Fade in animations */
-        .fade-in { animation: fadeIn 0.5s ease-in; }
-        @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
-        
-        /* Slide in animations */
-        .slide-in { animation: slideIn 0.3s ease-out; }
-        @keyframes slideIn { from { transform: translateX(-20px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
-        
-        /* Empty states */
-        .empty-state { 
-            text-align: center; padding: 3rem 1rem; color: #6b7280; 
-            background: #f9fafb; border: 2px dashed #d1d5db; border-radius: 12px; margin: 1rem 0;
-        }
-        .empty-state-icon { font-size: 3rem; margin-bottom: 1rem; opacity: 0.5; }
-        .empty-state-title { font-size: 1.25rem; font-weight: 600; margin-bottom: 0.5rem; color: #374151; }
-        .empty-state-description { font-size: 0.875rem; line-height: 1.5; }
-        
-        /* Enhanced Flashcards - Responsive */
-        .flashcard-container { perspective: 1000px; position: relative; }
-        .flashcard-inner { position: relative; width: 100%; min-height: 280px; transition: transform 0.6s; transform-style: preserve-3d; }
-        .flashcard-container.flipped .flashcard-inner { transform: rotateY(180deg); }
-        .flashcard-front, .flashcard-back { 
-            position: absolute; width: 100%; height: 100%; min-height: 280px; backface-visibility: hidden; 
-            border: 1px solid #e5e7eb; border-radius: 12px; padding: 20px; display: flex; flex-direction: column; 
-            justify-content: space-between; word-wrap: break-word; overflow-wrap: break-word; 
-        }
-        .flashcard-front { background-color: #f9fafb; }
-        .flashcard-back { background-color: #ffffff; transform: rotateY(180deg); }
-        
-        /* Responsive text handling */
-        .flashcard-text { 
-            font-size: 1rem; line-height: 1.5; max-height: 150px; overflow-y: auto; 
-            word-break: break-word; hyphens: auto; padding: 0.25rem 0;
-        }
-        
-        /* Mobile responsiveness */
-        @media (max-width: 768px) {
-            .flashcard-text { font-size: 0.9rem; max-height: 120px; line-height: 1.4; }
-            .flashcard-container { margin-bottom: 1rem; }
-            .flashcard-inner { min-height: 250px; }
-            .flashcard-front, .flashcard-back { min-height: 250px; padding: 16px; }
-            .card { padding: 16px; }
-            body { padding: 0.5rem; }
-            .container { padding: 0; }
-            
-            /* Adjust grid for mobile */
-            .grid.grid-cols-1.md\\:grid-cols-3 { grid-template-columns: 1fr; }
-            .grid.grid-cols-1.lg\\:grid-cols-2 { grid-template-columns: 1fr; }
-        }
-        
-        @media (max-width: 480px) {
-            .flashcard-text { font-size: 0.85rem; max-height: 100px; }
-            .flashcard-inner { min-height: 220px; }
-            .flashcard-front, .flashcard-back { min-height: 220px; padding: 12px; }
-            
-            /* Make buttons more touch-friendly */
-            .btn { padding: 0.75rem 1rem; min-height: 44px; }
-            .audio-btn { font-size: 1.25rem; padding: 0.5rem; }
-            .delete-btn { font-size: 1rem; padding: 0.5rem; }
-        }
-        
-        /* Text overflow handling */
-        .text-truncate { 
-            overflow: hidden; 
-            text-overflow: ellipsis; 
-            white-space: nowrap; 
-        }
-        
-        .text-wrap { 
-            white-space: normal; 
-            word-wrap: break-word; 
-            overflow-wrap: break-word; 
-        }
-        
-        /* Form Validation */
-        .form-error { border-color: #ef4444 !important; }
-        .error-message { color: #ef4444; font-size: 0.875rem; margin-top: 0.25rem; }
-        
-        /* Enhanced buttons */
-        .btn { position: relative; overflow: hidden; }
-        .btn::after { content: ''; position: absolute; top: 50%; left: 50%; width: 0; height: 0; border-radius: 50%; background: rgba(255,255,255,0.3); transform: translate(-50%, -50%); transition: width 0.3s, height 0.3s; }
-        .btn:active::after { width: 300px; height: 300px; }
-        
-        /* Pulse animation for mic button */
-        .mic-button.is-recording { animation: pulse 1.5s infinite; }
-        @keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } }
-        
-        /* Auth Modal */
-        .modal { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); }
-        .modal.show { display: block; }
-        .modal-content { 
-            background-color: white; margin: 5% auto; padding: 0; width: 90%; max-width: 400px; 
-            border-radius: 12px; position: relative; animation: modalSlideIn 0.3s ease;
-        }
-        @keyframes modalSlideIn { from { opacity: 0; transform: translateY(-50px); } to { opacity: 1; transform: translateY(0); } }
-        .modal-header { padding: 1.5rem; border-bottom: 1px solid #e5e7eb; }
-        .modal-body { padding: 1.5rem; }
-        .modal-footer { padding: 1rem 1.5rem; border-top: 1px solid #e5e7eb; display: flex; justify-content: flex-end; gap: 0.5rem; }
-        .close { color: #aaa; float: right; font-size: 28px; font-weight: bold; cursor: pointer; }
-        .close:hover { color: #000; }
-        
-        /* Auth Form */
-        .auth-form { display: none; }
-        .auth-form.active { display: block; }
-        .form-group { margin-bottom: 1rem; }
-        .form-group label { display: block; margin-bottom: 0.25rem; font-weight: 500; color: #374151; }
-        .form-group input { width: 100%; padding: 0.75rem; border: 1px solid #d1d5db; border-radius: 6px; font-size: 0.875rem; }
-        .form-group input:focus { outline: none; border-color: #4f46e5; box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1); }
-        
-        /* User Menu */
-        .user-menu { position: relative; display: inline-block; }
-        .user-menu-content { display: none; position: absolute; right: 0; background-color: white; min-width: 200px; box-shadow: 0 8px 16px rgba(0,0,0,0.1); border-radius: 8px; z-index: 1; border: 1px solid #e5e7eb; }
-        .user-menu.show .user-menu-content { display: block; }
-        .user-menu-item { padding: 0.75rem 1rem; display: block; color: #374151; text-decoration: none; border-bottom: 1px solid #f3f4f6; }
-        .user-menu-item:hover { background-color: #f9fafb; }
-        .user-menu-item:last-child { border-bottom: none; }
-        
-        /* Header Auth Section */
-        .auth-section { display: flex; align-items: center; gap: 0.5rem; }
-        .user-avatar { width: 40px; height: 40px; border-radius: 50%; background-color: #4f46e5; color: white; display: flex; align-items: center; justify-content: center; font-weight: 600; cursor: pointer; }
-        
-        /* Content Curation Styles */
-        .content-item { 
-            border: 1px solid #e5e7eb; border-radius: 8px; padding: 1rem; margin-bottom: 1rem;
-            background: white; transition: all 0.2s;
-        }
-        .content-item:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.1); border-color: #4f46e5; }
-        .content-item-title { font-weight: 600; color: #1f2937; margin-bottom: 0.5rem; }
-        .content-item-meta { font-size: 0.75rem; color: #6b7280; margin-bottom: 0.5rem; }
-        .content-item-summary { font-size: 0.875rem; color: #4b5563; line-height: 1.5; }
-        .difficulty-badge { 
-            display: inline-block; padding: 0.25rem 0.5rem; border-radius: 4px; font-size: 0.75rem; font-weight: 500;
-        }
-        .difficulty-easy { background-color: #dcfce7; color: #166534; }
-        .difficulty-medium { background-color: #fef3c7; color: #92400e; }
-        .difficulty-hard { background-color: #fee2e2; color: #991b1b; }
-        
-        /* Analytics Styles */
-        .metric-card { 
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); 
-            color: white; border-radius: 12px; padding: 1.5rem; text-align: center; 
-        }
-        .metric-value { font-size: 2rem; font-weight: bold; margin-bottom: 0.5rem; }
-        .metric-label { font-size: 0.875rem; opacity: 0.9; }
-        
-        /* Study Plan Styles */
+        {% extends "base.html" %}
+        {% block title %}Início - English Helper{% endblock %}
+        {% block content %}
+        <div class="container mx-auto max-w-5xl">
+            <!-- Conteúdo principal da página inicial aqui -->
+            <h1 class="text-2xl font-bold mb-4">Bem-vindo ao English Helper!</h1>
+            <p>Use o menu acima para navegar entre as funções do sistema.</p>
+            <!-- Você pode inserir aqui os blocos e componentes do seu app -->
+        </div>
+        {% endblock %}
         .plan-activity { 
             display: flex; align-items: center; padding: 0.75rem; border-radius: 6px; 
             border-left: 4px solid #4f46e5; background-color: #f8fafc; margin-bottom: 0.5rem;

templates/status.html

@@ -0,0 +1,6 @@
+{% extends "base.html" %}
+{% block title %}Status - English Helper{% endblock %}
+{% block content %}
+<h1>Status do Sistema</h1>
+<p>Veja informações sobre o funcionamento e APIs do sistema.</p>
+{% endblock %}