Hugging Face's logo

Spaces:
FocusGuard
/
Org-FocusGuard
Sleeping

App Files Community
Kexin-251202 commited on
Commit
026f99a
·
verified ·
1 Parent(s): 54ef003

Update static/index.html

Browse files
Files changed (1) hide show
  1. static/index.html +73 -64
static/index.html CHANGED
@@ -1,65 +1,74 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="UTF-8">
5
- <title>Focus Guard</title>
6
- <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;700&display=swap" rel="stylesheet">
7
- <link rel="stylesheet" href="styles.css">
8
- </head>
9
- <body>
10
- <!-- Top Menu -->
11
- <nav id="top-menu">
12
- <button id="menu-start" class="menu-btn">Start Focus</button>
13
- <div class="separator"></div>
14
- <button id="menu-achievement" class="menu-btn">My Achievement</button>
15
- <div class="separator"></div>
16
- <button id="menu-records" class="menu-btn">My Records</button>
17
- <div class="separator"></div>
18
- <button id="menu-customise" class="menu-btn">Customise</button>
19
- <div class="separator"></div>
20
- <button id="menu-help" class="menu-btn">Help</button>
21
- </nav>
22
- <!-- Page A -->
23
- <main id="page-a" class="page">
24
- <h1>Focus Guard</h1>
25
- <p>Your productivity monitor assistant.</p>
26
- <button id="start-button" class="btn-main">Start</button>
27
- </main>
28
- <!-- Page B -->
29
- <main id="page-b" class="page hidden">
30
- <!-- 1. Camera / Display Area -->
31
- <section id="display-area">
32
- <p id="display-placeholder">Nothing</p>
33
- </section>
34
-
35
- <!-- 2. Timeline Area -->
36
- <section id="timeline-area">
37
- <div class="timeline-label">Timeline</div>
38
- <div id="timeline-visuals"></div>
39
- <div id="timeline-line"></div>
40
- </section>
41
-
42
- <!-- 3. Control Buttons -->
43
- <section id="control-panel">
44
- <button id="btn-cam-start" class="action-btn green">Start</button>
45
- <button id="btn-floating" class="action-btn yellow">Floating Window</button>
46
- <button id="btn-models" class="action-btn blue">Models</button>
47
- <button id="btn-cam-stop" class="action-btn red">Stop</button>
48
- </section>
49
-
50
- <!-- 4. Frame Control -->
51
- <section id="frame-control">
52
- <label for="frame-slider">Frame</label>
53
- <input type="range" id="frame-slider" min="1" max="60" value="30">
54
- <input type="number" id="frame-input" value="30">
55
- </section>
56
- </main>
57
-
58
- <main id="page-c" class="page hidden"><h1>My Achievement</h1><p>Coming Soon</p></main>
59
- <main id="page-d" class="page hidden"><h1>My Records</h1><p>Coming Soon</p></main>
60
- <main id="page-e" class="page hidden"><h1>Customise</h1><p>Coming Soon</p></main>
61
- <main id="page-f" class="page hidden"><h1>Help</h1><p>Coming Soon</p></main>
62
-
63
- <script src="script.js"></script>
64
- </body>
 
 
 
 
 
 
 
 
 
65
  </html>
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <title>Focus Guard</title>
6
+ <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;700&display=swap" rel="stylesheet">
7
+ <link rel="stylesheet" href="styles.css">
8
+ <!-- CSS -->
9
+ <link rel="stylesheet" href="/static/styles.css" />
10
+
11
+ <!-- Font -->
12
+ <link href="https://fonts.googleapis.com/css2?family=Nunito&display=swap" rel="stylesheet">
13
+ </head>
14
+ <body>
15
+ <h1>Focus Guard</h1>
16
+ <!-- JS -->
17
+ <script src="/static/script.js"></script>
18
+
19
+ <!-- Top Menu -->
20
+ <nav id="top-menu">
21
+ <button id="menu-start" class="menu-btn">Start Focus</button>
22
+ <div class="separator"></div>
23
+ <button id="menu-achievement" class="menu-btn">My Achievement</button>
24
+ <div class="separator"></div>
25
+ <button id="menu-records" class="menu-btn">My Records</button>
26
+ <div class="separator"></div>
27
+ <button id="menu-customise" class="menu-btn">Customise</button>
28
+ <div class="separator"></div>
29
+ <button id="menu-help" class="menu-btn">Help</button>
30
+ </nav>
31
+ <!-- Page A -->
32
+ <main id="page-a" class="page">
33
+ <h1>Focus Guard</h1>
34
+ <p>Your productivity monitor assistant.</p>
35
+ <button id="start-button" class="btn-main">Start</button>
36
+ </main>
37
+ <!-- Page B -->
38
+ <main id="page-b" class="page hidden">
39
+ <!-- 1. Camera / Display Area -->
40
+ <section id="display-area">
41
+ <p id="display-placeholder">Nothing</p>
42
+ </section>
43
+
44
+ <!-- 2. Timeline Area -->
45
+ <section id="timeline-area">
46
+ <div class="timeline-label">Timeline</div>
47
+ <div id="timeline-visuals"></div>
48
+ <div id="timeline-line"></div>
49
+ </section>
50
+
51
+ <!-- 3. Control Buttons -->
52
+ <section id="control-panel">
53
+ <button id="btn-cam-start" class="action-btn green">Start</button>
54
+ <button id="btn-floating" class="action-btn yellow">Floating Window</button>
55
+ <button id="btn-models" class="action-btn blue">Models</button>
56
+ <button id="btn-cam-stop" class="action-btn red">Stop</button>
57
+ </section>
58
+
59
+ <!-- 4. Frame Control -->
60
+ <section id="frame-control">
61
+ <label for="frame-slider">Frame</label>
62
+ <input type="range" id="frame-slider" min="1" max="60" value="30">
63
+ <input type="number" id="frame-input" value="30">
64
+ </section>
65
+ </main>
66
+
67
+ <main id="page-c" class="page hidden"><h1>My Achievement</h1><p>Coming Soon</p></main>
68
+ <main id="page-d" class="page hidden"><h1>My Records</h1><p>Coming Soon</p></main>
69
+ <main id="page-e" class="page hidden"><h1>Customise</h1><p>Coming Soon</p></main>
70
+ <main id="page-f" class="page hidden"><h1>Help</h1><p>Coming Soon</p></main>
71
+
72
+ <script src="script.js"></script>
73
+ </body>
74
  </html>