Hugging Face's logo

Spaces:
RyeCatcher
/
focus_guardian
Running

App Files Community
RyeCatcher commited on
Commit
728fe53
·
verified ·
1 Parent(s): df7ac7e

Upload index.html with huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +235 -18
index.html CHANGED
@@ -1,19 +1,236 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
19
  </html>
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Focus Guardian - Reachy Mini App</title>
7
+ <link rel="stylesheet" href="style.css">
8
+ <link rel="preconnect" href="https://fonts.googleapis.com">
9
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10
+ <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
11
+ </head>
12
+ <body>
13
+ <div class="container">
14
+ <header>
15
+ <a href="https://www.runreachyrun.com" class="logo-link">
16
+ <img src="logo.png" alt="runreachyrun" class="logo">
17
+ </a>
18
+ <div class="badge-wrapper">
19
+ <span class="badge">Reachy Mini App</span>
20
+ </div>
21
+ <h1>Focus Guardian</h1>
22
+ <p class="tagline">Your productivity body-double for deep work sessions</p>
23
+ </header>
24
+
25
+ <main>
26
+ <!-- Animated Pomodoro Demo -->
27
+ <section class="demo-section">
28
+ <div class="demo-box">
29
+ <div class="robot-icon">🤖</div>
30
+ <div class="timer-display">
31
+ <div class="timer-ring">
32
+ <svg viewBox="0 0 80 80">
33
+ <defs>
34
+ <linearGradient id="timer-gradient" x1="0%" y1="0%" x2="100%" y2="100%">
35
+ <stop offset="0%" style="stop-color:#667eea"/>
36
+ <stop offset="100%" style="stop-color:#00ffd5"/>
37
+ </linearGradient>
38
+ </defs>
39
+ <circle class="bg" cx="40" cy="40" r="36"/>
40
+ <circle class="progress" cx="40" cy="40" r="36"/>
41
+ </svg>
42
+ <span class="timer-text">25:00</span>
43
+ </div>
44
+ </div>
45
+ <div class="focus-dots">
46
+ <span></span><span></span><span></span><span></span><span></span>
47
+ </div>
48
+ </div>
49
+ </section>
50
+
51
+ <!-- Hero with 6 feature cards -->
52
+ <section class="hero">
53
+ <div class="feature-grid">
54
+ <div class="feature">
55
+ <div class="icon-box purple">
56
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12,6 12,12 16,14"/></svg>
57
+ </div>
58
+ <h3>Pomodoro Timer</h3>
59
+ <p>Configurable 5-60 minute focus sessions with visual countdown</p>
60
+ </div>
61
+ <div class="feature">
62
+ <div class="icon-box cyan">
63
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
64
+ </div>
65
+ <h3>Presence Detection</h3>
66
+ <p>Motion-based tracking knows when you leave your desk</p>
67
+ </div>
68
+ <div class="feature">
69
+ <div class="icon-box amber">
70
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="10" x="3" y="11" rx="2"/><circle cx="12" cy="5" r="2"/><path d="M12 7v4"/><line x1="8" x2="8" y1="16" y2="16"/><line x1="16" x2="16" y1="16" y2="16"/></svg>
71
+ </div>
72
+ <h3>Physical Nudges</h3>
73
+ <p>Antenna wiggles and head shakes bring you back to focus</p>
74
+ </div>
75
+ <div class="feature">
76
+ <div class="icon-box green">
77
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><polygon points="12,2 15.09,8.26 22,9.27 17,14.14 18.18,21.02 12,17.77 5.82,21.02 7,14.14 2,9.27 8.91,8.26"/></svg>
78
+ </div>
79
+ <h3>Victory Dance</h3>
80
+ <p>Celebrate completed sessions with robot celebrations</p>
81
+ </div>
82
+ <div class="feature">
83
+ <div class="icon-box purple">
84
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/></svg>
85
+ </div>
86
+ <h3>Session Stats</h3>
87
+ <p>Track focus time, nudges received, and completion rate</p>
88
+ </div>
89
+ <div class="feature">
90
+ <div class="icon-box cyan">
91
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/></svg>
92
+ </div>
93
+ <h3>Configurable</h3>
94
+ <p>Adjust duration, thresholds, and robot position</p>
95
+ </div>
96
+ </div>
97
+ </section>
98
+
99
+ <!-- Install Section -->
100
+ <section class="install">
101
+ <h2>Install on Your Reachy Mini</h2>
102
+ <div class="install-steps">
103
+ <div class="step">
104
+ <span class="step-num">1</span>
105
+ <div class="step-content">
106
+ <h4>Install the package</h4>
107
+ <div class="code-block">
108
+ <code>pip install git+https://huggingface.co/spaces/RyeCatcher/focus-guardian</code>
109
+ <button class="copy-btn" onclick="copyCode(this)">Copy</button>
110
+ </div>
111
+ </div>
112
+ </div>
113
+ <div class="step">
114
+ <span class="step-num">2</span>
115
+ <div class="step-content">
116
+ <h4>Start the Reachy Mini daemon</h4>
117
+ <div class="code-block">
118
+ <code>reachy-mini-daemon</code>
119
+ <button class="copy-btn" onclick="copyCode(this)">Copy</button>
120
+ </div>
121
+ </div>
122
+ </div>
123
+ <div class="step">
124
+ <span class="step-num">3</span>
125
+ <div class="step-content">
126
+ <h4>Launch from dashboard</h4>
127
+ <p>Find Focus Guardian in Applications at <strong>localhost:8000</strong></p>
128
+ </div>
129
+ </div>
130
+ </div>
131
+ </section>
132
+
133
+ <!-- How it works -->
134
+ <section class="how-it-works">
135
+ <h2>How It Works</h2>
136
+ <div class="workflow">
137
+ <div class="workflow-step">
138
+ <div class="workflow-icon">
139
+ <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/><circle cx="12" cy="13" r="4"/></svg>
140
+ </div>
141
+ <p>Camera captures at 2Hz</p>
142
+ </div>
143
+ <div class="workflow-arrow">→</div>
144
+ <div class="workflow-step">
145
+ <div class="workflow-icon">
146
+ <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20v-6M6 20V10M18 20V4"/></svg>
147
+ </div>
148
+ <p>Motion analyzed in your area</p>
149
+ </div>
150
+ <div class="workflow-arrow">→</div>
151
+ <div class="workflow-step">
152
+ <div class="workflow-icon">
153
+ <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>
154
+ </div>
155
+ <p>3+ seconds still = away</p>
156
+ </div>
157
+ <div class="workflow-arrow">→</div>
158
+ <div class="workflow-step">
159
+ <div class="workflow-icon">
160
+ <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="10" x="3" y="11" rx="2"/><circle cx="12" cy="5" r="2"/><path d="M12 7v4"/><line x1="8" x2="8" y1="16" y2="16"/><line x1="16" x2="16" y1="16" y2="16"/></svg>
161
+ </div>
162
+ <p>Robot nudges you back!</p>
163
+ </div>
164
+ </div>
165
+ </section>
166
+
167
+ <!-- About -->
168
+ <section class="about">
169
+ <h2>About This Project</h2>
170
+ <p>
171
+ Focus Guardian implements <strong>body doubling</strong> — the productivity technique
172
+ where having someone nearby helps you stay on task. Reachy Mini becomes your
173
+ accountability partner, watching over your work sessions and providing gentle
174
+ physical reminders when you drift away.
175
+ </p>
176
+ <p>
177
+ Part of the <strong>Run Reachy Run</strong> project — documenting the journey
178
+ of building apps with Reachy Mini. Built with Claude Code.
179
+ </p>
180
+ <div class="about-links">
181
+ <a href="https://www.runreachyrun.com/apps/focus-guardian" target="_blank" rel="noopener">Learn more on runreachyrun.com →</a>
182
+ <a href="https://huggingface.co/spaces/RyeCatcher/focus-guardian/tree/main" target="_blank" rel="noopener">View Source Code →</a>
183
+ </div>
184
+ </section>
185
+ </main>
186
+
187
+ <footer>
188
+ <a href="https://www.runreachyrun.com" class="footer-logo-link">
189
+ <img src="logo.png" alt="runreachyrun" class="footer-logo">
190
+ <span class="footer-site-name">runreachyrun.com</span>
191
+ </a>
192
+ <div class="footer-links">
193
+ <a href="https://github.com/BioInfo/reachy" target="_blank" rel="noopener">
194
+ <svg viewBox="0 0 24 24" fill="currentColor" class="social-icon">
195
+ <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
196
+ </svg>
197
+ GitHub
198
+ </a>
199
+ <a href="https://twitter.com/bioinfo" target="_blank" rel="noopener">
200
+ <svg viewBox="0 0 24 24" fill="currentColor" class="social-icon">
201
+ <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/>
202
+ </svg>
203
+ Twitter
204
+ </a>
205
+ <a href="https://huggingface.co/spaces/RyeCatcher/focus-guardian" target="_blank" rel="noopener">
206
+ <svg viewBox="0 0 24 24" fill="currentColor" class="social-icon">
207
+ <path d="M12 2C6.477 2 2 6.477 2 12c0 4.42 2.865 8.166 6.839 9.489.5.092.682-.217.682-.482 0-.237-.008-.866-.013-1.7-2.782.603-3.369-1.342-3.369-1.342-.454-1.155-1.11-1.462-1.11-1.462-.908-.62.069-.608.069-.608 1.003.07 1.531 1.03 1.531 1.03.892 1.529 2.341 1.087 2.91.831.092-.646.35-1.086.636-1.336-2.22-.253-4.555-1.11-4.555-4.943 0-1.091.39-1.984 1.029-2.683-.103-.253-.446-1.27.098-2.647 0 0 .84-.269 2.75 1.025A9.578 9.578 0 0112 6.836c.85.004 1.705.114 2.504.336 1.909-1.294 2.747-1.025 2.747-1.025.546 1.377.203 2.394.1 2.647.64.699 1.028 1.592 1.028 2.683 0 3.842-2.339 4.687-4.566 4.935.359.309.678.919.678 1.852 0 1.336-.012 2.415-.012 2.743 0 .267.18.578.688.48C19.138 20.163 22 16.418 22 12c0-5.523-4.477-10-10-10z"/>
208
+ </svg>
209
+ HuggingFace
210
+ </a>
211
+ <a href="https://github.com/pollen-robotics/reachy_mini" target="_blank" rel="noopener">
212
+ <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="social-icon">
213
+ <rect x="3" y="11" width="18" height="10" rx="2"/>
214
+ <circle cx="12" cy="5" r="3"/>
215
+ </svg>
216
+ Reachy Mini SDK
217
+ </a>
218
+ </div>
219
+ <p class="copyright">MIT License · Built with Claude Code</p>
220
+ </footer>
221
+ </div>
222
+ <script>
223
+ function copyCode(btn) {
224
+ const code = btn.parentElement.querySelector('code').textContent;
225
+ navigator.clipboard.writeText(code).then(() => {
226
+ btn.textContent = 'Copied!';
227
+ btn.classList.add('copied');
228
+ setTimeout(() => {
229
+ btn.textContent = 'Copy';
230
+ btn.classList.remove('copied');
231
+ }, 2000);
232
+ });
233
+ }
234
+ </script>
235
+ </body>
236
  </html>