Update templates/index.html

templates/index.html

@@ -0,0 +1,123 @@
+<!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>
+            <!-- Scripts will be dynamically added here -->
+        </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>