Hugging Face's logo

Spaces:
FocusGuard
/
Org-FocusGuard
Sleeping

App Files Community
Org-FocusGuard
File size: 2,887 Bytes
026f99a
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
596eec7
026f99a
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
fda4324
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
<!DOCTYPE html>
<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>