| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Pomodoro Timer</title> |
| <link rel="stylesheet" href="/static/css/style.css"> |
| <link rel="manifest" href="/manifest.json"> |
| <script src="https://hammerjs.github.io/dist/hammer.min.js"></script> |
| </head> |
| <body> |
| <div id="login-form"> |
| <h2>Login</h2> |
| <input type="text" id="username" placeholder="Username"> |
| <input type="password" id="password" placeholder="Password"> |
| <button onclick="login()">Login</button> |
| <p>Don't have an account? <a href="#" onclick="showRegisterForm()">Register</a></p> |
| </div> |
|
|
| <div id="register-form" style="display: none;"> |
| <h2>Register</h2> |
| <input type="text" id="reg-username" placeholder="Username"> |
| <input type="password" id="reg-password" placeholder="Password"> |
| <button onclick="register()">Register</button> |
| <p>Already have an account? <a href="#" onclick="showLoginForm()">Login</a></p> |
| </div> |
|
|
| <div id="main-content" style="display: none;"> |
| <div class="grid-container"> |
| <div class="grid-item" id="timer-container"> |
| <h2 id="session-type">Work</h2> |
| <div id="timer">25:00</div> |
| <button class="button" onclick="startTimer()">Start</button> |
| <button class="button" onclick="pauseTimer()">Pause</button> |
| <button class="button" onclick="resetTimer()">Reset</button> |
| </div> |
|
|
| <div class="grid-item" id="task-manager"> |
| <h2>Task Manager</h2> |
| <input type="text" id="task-input" placeholder="Add a new task"> |
| <button onclick="addTask()">Add Task</button> |
| <ul id="task-list"></ul> |
| </div> |
|
|
| <div class="grid-item" id="statistics"> |
| <h2>Statistics</h2> |
| <p>Total Sessions: <span id="total-sessions">0</span></p> |
| <p>Total Work Time: <span id="total-work-time">0h 0m</span></p> |
| <p>Average Rating: <span id="average-rating">0.00</span></p> |
| <p>Current Streak: <span id="streak">0</span></p> |
| </div> |
| </div> |
|
|
| <div id="settings"> |
| <h2>Settings</h2> |
| <label> |
| <input type="checkbox" id="sound-enabled" checked> |
| Enable Sound |
| </label> |
| <label> |
| <input type="checkbox" id="dark-mode"> |
| Dark Mode |
| </label> |
| <label> |
| <input type="checkbox" id="notification-enabled" checked> |
| Enable Notifications |
| </label> |
| <label> |
| Work Duration (minutes): |
| <input type="number" id="work-duration" value="25" min="1" max="60"> |
| </label> |
| <label> |
| Rest Duration (minutes): |
| <input type="number" id="rest-duration" value="5" min="1" max="30"> |
| </label> |
| <button onclick="updateSettings()">Save Settings</button> |
| </div> |
|
|
| <div id="scripts"> |
| <h2>Saved Sessions</h2> |
| |
| </div> |
|
|
| <button onclick="exportData()">Export Data</button> |
| <button onclick="logout()">Logout</button> |
| </div> |
|
|
| <div id="admin-panel" style="display: none;"> |
| <h2>Admin Panel</h2> |
| <div id="feature-toggles"> |
| <h3>Feature Toggles</h3> |
| <label> |
| <input type="checkbox" id="enable-sound" checked> |
| Enable Sound |
| </label> |
| <label> |
| <input type="checkbox" id="enable-notifications" checked> |
| Enable Notifications |
| </label> |
| <label> |
| <input type="checkbox" id="enable-dark-mode" checked> |
| Enable Dark Mode Option |
| </label> |
| <label> |
| <input type="checkbox" id="enable-task-manager" checked> |
| Enable Task Manager |
| </label> |
| <label> |
| <input type="checkbox" id="enable-statistics" checked> |
| Enable Statistics |
| </label> |
| </div> |
| <button onclick="saveAdminSettings()">Save Admin Settings</button> |
| <div id="database-actions"> |
| <h3>Database Actions</h3> |
| <button onclick="generateOtp()">Generate OTP</button> |
| <input type="text" id="otp" placeholder="Enter OTP"> |
| <button onclick="resetDatabase()">Reset Database</button> |
| </div> |
| </div> |
|
|
| <script src="/static/js/script.js"></script> |
| </body> |
| </html> |
