<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Settings - RowSQL</title>    <link rel="stylesheet" href="style.css">    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap" rel="stylesheet"></head><body>    <aside class="sidebar">        <div class="logo">RowSQL</div>        <nav class="nav-main">            <a href="index.html" class="nav-item"><span class="icon">📊</span> Dashboard</a>            <a href="tables.html" class="nav-item"><span class="icon">🗄️</span> Tables</a>            <a href="queries.html" class="nav-item"><span class="icon">🔍</span> Queries</a>            <a href="settings.html" class="nav-item active"><span class="icon">⚙️</span> Settings</a>        </nav>        <div class="user-profile">            <div class="avatar">JD</div>            <div class="user-info">Jane Doe <span class="status">Online</span></div>        </div>    </aside>
    <main class="dashboard-container">        <header class="header">            <h1 class="dashboard-title">System Settings</h1>            <div class="header-actions">                <button class="btn-primary">Save Changes</button>            </div>        </header>
        <section class="section settings-area fade-in-up">            <h2>Connection & Security</h2>            <div class="setting-group">                <div class="setting-item">                    <label for="theme">Interface Theme</label>                    <select id="theme">                        <option value="dark" selected>Dark Mode</option>                        <option value="light">Light Mode</option>                    </select>                </div>                <div class="setting-item">                    <label for="timeout">Query Timeout (seconds)</label>                    <input type="number" id="timeout" value="60">                </div>                <div class="setting-item toggle-switch">                    <label>Two-Factor Authentication</label>                    <input type="checkbox" id="tfa" checked>                    <span class="slider round"></span>                </div>            </div>
            <h2>Data Retention</h2>            <div class="setting-group">                <div class="setting-item">                    <label for="retention">Log Archive Period (Days)</label>                    <input type="number" id="retention" value="90">                </div>                <div class="setting-item toggle-switch">                    <label>Auto-Vacuum Tables</label>                    <input type="checkbox" id="autovacuum">                    <span class="slider round"></span>                </div>            </div>        </section>
    </main>
    <script src="script.js"></script></body></html>