Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Focus Guard</title> | |
| <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;700&display=swap" rel="stylesheet"> | |
| <link rel="stylesheet" href="styles.css"> | |
| <!-- CSS --> | |
| <link rel="stylesheet" href="/static/styles.css" /> | |
| <!-- Font --> | |
| <link href="https://fonts.googleapis.com/css2?family=Nunito&display=swap" rel="stylesheet"> | |
| </head> | |
| <body> | |
| <h1>Focus Guard</h1> | |
| <!-- JS --> | |
| <script src="/static/script.js" defer></script> | |
| <!-- Top Menu --> | |
| <nav id="top-menu"> | |
| <button id="menu-start" class="menu-btn">Start Focus</button> | |
| <div class="separator"></div> | |
| <button id="menu-achievement" class="menu-btn">My Achievement</button> | |
| <div class="separator"></div> | |
| <button id="menu-records" class="menu-btn">My Records</button> | |
| <div class="separator"></div> | |
| <button id="menu-customise" class="menu-btn">Customise</button> | |
| <div class="separator"></div> | |
| <button id="menu-help" class="menu-btn">Help</button> | |
| </nav> | |
| <!-- Page A --> | |
| <main id="page-a" class="page"> | |
| <h1>Focus Guard</h1> | |
| <p>Your productivity monitor assistant.</p> | |
| <button id="start-button" class="btn-main">Start</button> | |
| </main> | |
| <!-- Page B --> | |
| <main id="page-b" class="page hidden"> | |
| <!-- 1. Camera / Display Area --> | |
| <section id="display-area"> | |
| <p id="display-placeholder">Nothing</p> | |
| </section> | |
| <!-- 2. Timeline Area --> | |
| <section id="timeline-area"> | |
| <div class="timeline-label">Timeline</div> | |
| <div id="timeline-visuals"></div> | |
| <div id="timeline-line"></div> | |
| </section> | |
| <!-- 3. Control Buttons --> | |
| <section id="control-panel"> | |
| <button id="btn-cam-start" class="action-btn green">Start</button> | |
| <button id="btn-floating" class="action-btn yellow">Floating Window</button> | |
| <button id="btn-models" class="action-btn blue">Models</button> | |
| <button id="btn-cam-stop" class="action-btn red">Stop</button> | |
| </section> | |
| <!-- 4. Frame Control --> | |
| <section id="frame-control"> | |
| <label for="frame-slider">Frame</label> | |
| <input type="range" id="frame-slider" min="1" max="60" value="30"> | |
| <input type="number" id="frame-input" value="30"> | |
| </section> | |
| </main> | |
| <main id="page-c" class="page hidden"><h1>My Achievement</h1><p>Coming Soon</p></main> | |
| <main id="page-d" class="page hidden"><h1>My Records</h1><p>Coming Soon</p></main> | |
| <main id="page-e" class="page hidden"><h1>Customise</h1><p>Coming Soon</p></main> | |
| <main id="page-f" class="page hidden"><h1>Help</h1><p>Coming Soon</p></main> | |
| <script src="script.js"></script> | |
| </body> | |
| </html> |