frontend/settings.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="AutoForge Settings">
    <title>AutoForge — Settings</title>
    <link rel="stylesheet" href="/css/style.css">
</head>
<body>
    <div class="app-layout">
        <!-- Sidebar -->
        <nav class="sidebar">
            <div class="sidebar-header">
                <div class="sidebar-brand">
                    <div class="logo">⚡</div>
                    <h1>AutoForge</h1>
                </div>
            </div>
            <div class="sidebar-nav">
                <a href="dashboard.html" class="nav-item">
                    <span class="icon">📊</span><span>Dashboard</span>
                </a>
                <a href="workflow.html" class="nav-item">
                    <span class="icon">⚙️</span><span>Workflow</span>
                </a>
                <a href="history.html" class="nav-item">
                    <span class="icon">📜</span><span>History</span>
                </a>
                <a href="settings.html" class="nav-item active">
                    <span class="icon">🔧</span><span>Settings</span>
                </a>
            </div>
            <div class="sidebar-footer">
                <div class="user-menu" id="logout-btn">
                    <div class="user-avatar" id="user-avatar">U</div>
                    <span class="user-name" id="user-display-name">User</span>
                </div>
            </div>
        </nav>

        <!-- Main Content -->
        <main class="main-content">
            <div class="page-header">
                <h2>Settings</h2>
                <p>Configure your AutoForge environment</p>
            </div>

            <div class="card glass fade-in" style="max-width: 640px; margin-bottom: 1.5rem;">
                <div class="card-header">
                    <span class="card-title">LLM Configuration</span>
                </div>
                <div class="form-group">
                    <label class="form-label" for="gemini-key">Gemini API Key</label>
                    <input class="form-input" type="password" id="gemini-key" placeholder="Your API key (stored server-side via .env)" disabled>
                </div>
                <div class="form-group">
                    <label class="form-label" for="gemini-model">Model</label>
                    <input class="form-input" type="text" id="gemini-model" placeholder="gemini-2.0-flash" disabled>
                </div>
                <p style="color: var(--text-muted); font-size: 0.85rem;">
                    LLM settings are configured via the <code style="color: var(--accent-blue);">.env</code> file on the server.
                    UI-based configuration will be available in a future phase.
                </p>
            </div>

            <div class="card glass fade-in" style="max-width: 640px; animation-delay: 0.1s;">
                <div class="card-header">
                    <span class="card-title">Account</span>
                </div>
                <div id="account-info" style="color: var(--text-secondary); margin-bottom: 1rem;">
                    Loading…
                </div>
                <button class="btn btn-danger" onclick="Auth.logout()">Sign Out</button>
            </div>
        </main>
    </div>

    <script src="/js/api.js"></script>
    <script src="/js/auth.js"></script>
    <script src="/js/router.js"></script>
    <script src="/js/app.js"></script>
    <script>
        if (Router.init()) {
            App.initSidebar();
            const user = Auth.getUser();
            if (user) {
                document.getElementById('account-info').innerHTML = `
                    <p><strong>Username:</strong> ${user.username}</p>
                    <p><strong>Email:</strong> ${user.email}</p>
                    <p><strong>Member since:</strong> ${new Date(user.created_at).toLocaleDateString()}</p>
                `;
            }
        }
    </script>
</body>
</html>