settings.html

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>NoteZone - Settings</title>
   <link rel="stylesheet" href="assets/css/styles.css">
   <link rel="preconnect" href="https://fonts.gstatic.com">
   <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap" rel="stylesheet">
</head>
<body>
   <div class="container">
       <header class="titlebar">
           <h1>NoteZone</h1>
           <nav>
               <ul>
                   <li><a href="index.html">Notes</a></li>
                   <li><a href="reminders.html">Reminders</a></li>
                   <li><a href="settings.html" class="active">Settings</a></li>
                   <li><button class="close-btn">&#10005;</button></li>
               </ul>
           </nav>
       </header>
       <main>
           <div class="settings">
               <h2>Settings</h2>
               <div class="setting-group">
                   <h3>Theme</h3>
                   <div class="theme-options">
                       <button class="theme-btn active" data-theme="dark">Dark</button>
                       <button class="theme-btn" data-theme="light">Light</button>
                   </div>
               </div>
               <div class="setting-group">
                   <h3>Font</h3>
                   <div class="font-options">
                       <button class="font-btn active" data-font="Poppins">Poppins</button>
                       <button class="font-btn" data-font="Arial">Arial</button>
                       <button class="font-btn" data-font="Verdana">Verdana</button>
                   </div>
               </div>
               <div class="setting-group">
                   <h3>Accessibility</h3>
                   <div class="accessibility-options">
                       <label>
                           <input type="checkbox" id="high-contrast" />
                           High Contrast
                       </label>
                       <label>
                           <input type="checkbox" id="larger-text" />
                           Larger Text
                       </label>
                   </div>
               </div>
           </div>
       </main>
   </div>
   <script src="assets/js/renderer.js"></script>
   <script src="assets/js/reminders.js"></script>
   <script src="assets/js/settings.js"></script>
</body>
</html>