Hugging Face's logo

Spaces:
AccidentalCoder80
/
Haven_ReachyMini_Contest_Final
Running

App Files Community
devvibes commited on
Commit
ae45a8e
·
1 Parent(s): 3af59d0

Add full Python package

Browse files
Files changed (2) hide show
  1. index_new.html +110 -0
  2. style_new.css +277 -0
index_new.html ADDED
@@ -0,0 +1,110 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Haven Kitchen OS - Olivia & Brie</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=Playfair+Display:wght@400;600&family=Inter:wght@300;400;500&display=swap" rel="stylesheet">
11
+ </head>
12
+ <body>
13
+ <div class="container">
14
+ <header>
15
+ <div class="hero-icons">
16
+ <span class="icon">👩🏻‍💼</span>
17
+ <span class="icon leaf">🌿</span>
18
+ <span class="icon">👩🏻‍🍳</span>
19
+ </div>
20
+ <h1>Olivia & Brie</h1>
21
+ <p class="subtitle">THE HAVEN SYSTEM</p>
22
+ <p class="tagline">Your AI Home Companions for Reachy Mini</p>
23
+ </header>
24
+
25
+ <main>
26
+ <div class="personas">
27
+ <div class="persona olivia">
28
+ <div class="persona-header">
29
+ <span class="emoji">👩🏻‍💼</span>
30
+ <h3>Olivia</h3>
31
+ </div>
32
+ <p class="role">Household Manager</p>
33
+ <p>Your calm, professional companion who handles scheduling, reminders, and keeps your home running smoothly with a warm sage-green presence.</p>
34
+ </div>
35
+ <div class="persona brie">
36
+ <div class="persona-header">
37
+ <span class="emoji">👩🏻‍🍳</span>
38
+ <h3>Brie</h3>
39
+ </div>
40
+ <p class="role">Personal Chef</p>
41
+ <p>Your enthusiastic culinary guide who creates recipes, walks you through cooking step-by-step, and makes every meal magical with amber warmth.</p>
42
+ </div>
43
+ </div>
44
+
45
+ <section class="features">
46
+ <h2>What Haven Can Do</h2>
47
+ <div class="feature-grid">
48
+ <div class="feature">
49
+ <span class="feature-icon">🗣️</span>
50
+ <h4>Voice Interaction</h4>
51
+ <p>Talk naturally with Olivia & Brie</p>
52
+ </div>
53
+ <div class="feature">
54
+ <span class="feature-icon">🤖</span>
55
+ <h4>Expressive Robot</h4>
56
+ <p>Unique animations for each persona</p>
57
+ </div>
58
+ <div class="feature">
59
+ <span class="feature-icon">📖</span>
60
+ <h4>Recipe Guidance</h4>
61
+ <p>Step-by-step cooking with voice commands</p>
62
+ </div>
63
+ <div class="feature">
64
+ <span class="feature-icon">📱</span>
65
+ <h4>Cast to Phone</h4>
66
+ <p>Send recipes via QR code</p>
67
+ </div>
68
+ <div class="feature">
69
+ <span class="feature-icon">🎭</span>
70
+ <h4>Personality Eyes</h4>
71
+ <p>Sage green for Olivia, amber for Brie</p>
72
+ </div>
73
+ <div class="feature">
74
+ <span class="feature-icon">💾</span>
75
+ <h4>Memory System</h4>
76
+ <p>Remembers your preferences</p>
77
+ </div>
78
+ </div>
79
+ </section>
80
+
81
+ <section class="voice-commands">
82
+ <h2>Voice Commands</h2>
83
+ <p>While cooking with Brie, just say:</p>
84
+ <div class="commands">
85
+ <span class="cmd">"Next"</span>
86
+ <span class="cmd">"Repeat"</span>
87
+ <span class="cmd">"Back"</span>
88
+ <span class="cmd">"Ingredients"</span>
89
+ <span class="cmd">"Let's cook"</span>
90
+ </div>
91
+ </section>
92
+
93
+ <section class="installation">
94
+ <h2>Installation</h2>
95
+ <p>Install from your Reachy Mini dashboard or run:</p>
96
+ <code>reachy-mini-app-assistant install AccidentalCoder80/Haven_ReachyMini_Contest_Final</code>
97
+ </section>
98
+ </main>
99
+
100
+ <footer>
101
+ <p>Built with 💚 for the NVIDIA Reachy Mini Golden Ticket Contest</p>
102
+ <div class="hashtags">
103
+ <span>#ReachyMini</span>
104
+ <span>#HuggingFace</span>
105
+ <span>#NVIDIAGTC</span>
106
+ </div>
107
+ </footer>
108
+ </div>
109
+ </body>
110
+ </html>
style_new.css ADDED
@@ -0,0 +1,277 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ * {
2
+ margin: 0;
3
+ padding: 0;
4
+ box-sizing: border-box;
5
+ }
6
+
7
+ body {
8
+ font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
9
+ background: linear-gradient(135deg, #f5f0e8 0%, #ede6db 100%);
10
+ min-height: 100vh;
11
+ color: #3d3d3d;
12
+ line-height: 1.6;
13
+ }
14
+
15
+ .container {
16
+ max-width: 900px;
17
+ margin: 0 auto;
18
+ padding: 40px 20px;
19
+ }
20
+
21
+ /* Header */
22
+ header {
23
+ text-align: center;
24
+ margin-bottom: 50px;
25
+ }
26
+
27
+ .hero-icons {
28
+ font-size: 3rem;
29
+ margin-bottom: 20px;
30
+ display: flex;
31
+ justify-content: center;
32
+ gap: 15px;
33
+ }
34
+
35
+ .hero-icons .leaf {
36
+ animation: gentle-sway 3s ease-in-out infinite;
37
+ }
38
+
39
+ @keyframes gentle-sway {
40
+ 0%, 100% { transform: rotate(-5deg); }
41
+ 50% { transform: rotate(5deg); }
42
+ }
43
+
44
+ h1 {
45
+ font-family: 'Playfair Display', Georgia, serif;
46
+ font-size: 3.5rem;
47
+ font-weight: 400;
48
+ color: #2d2d2d;
49
+ margin-bottom: 8px;
50
+ letter-spacing: 1px;
51
+ }
52
+
53
+ .subtitle {
54
+ font-size: 0.9rem;
55
+ letter-spacing: 4px;
56
+ color: #7a8b6e;
57
+ text-transform: uppercase;
58
+ margin-bottom: 15px;
59
+ }
60
+
61
+ .tagline {
62
+ font-size: 1.1rem;
63
+ color: #666;
64
+ }
65
+
66
+ /* Personas */
67
+ .personas {
68
+ display: grid;
69
+ grid-template-columns: 1fr 1fr;
70
+ gap: 25px;
71
+ margin-bottom: 50px;
72
+ }
73
+
74
+ .persona {
75
+ padding: 30px;
76
+ border-radius: 16px;
77
+ transition: transform 0.3s ease, box-shadow 0.3s ease;
78
+ }
79
+
80
+ .persona:hover {
81
+ transform: translateY(-5px);
82
+ }
83
+
84
+ .persona.olivia {
85
+ background: linear-gradient(145deg, #c8d4bc 0%, #b5c4a8 100%);
86
+ box-shadow: 0 8px 30px rgba(122, 139, 110, 0.2);
87
+ }
88
+
89
+ .persona.brie {
90
+ background: linear-gradient(145deg, #e8dcc8 0%, #ddd0b8 100%);
91
+ box-shadow: 0 8px 30px rgba(200, 180, 140, 0.2);
92
+ }
93
+
94
+ .persona-header {
95
+ display: flex;
96
+ align-items: center;
97
+ gap: 12px;
98
+ margin-bottom: 10px;
99
+ }
100
+
101
+ .persona .emoji {
102
+ font-size: 2rem;
103
+ }
104
+
105
+ .persona h3 {
106
+ font-family: 'Playfair Display', Georgia, serif;
107
+ font-size: 1.8rem;
108
+ font-weight: 400;
109
+ color: #2d2d2d;
110
+ }
111
+
112
+ .persona .role {
113
+ font-size: 0.85rem;
114
+ text-transform: uppercase;
115
+ letter-spacing: 2px;
116
+ color: #555;
117
+ margin-bottom: 12px;
118
+ }
119
+
120
+ .persona p:last-child {
121
+ font-size: 0.95rem;
122
+ color: #444;
123
+ }
124
+
125
+ /* Features */
126
+ .features {
127
+ margin-bottom: 50px;
128
+ }
129
+
130
+ .features h2, .voice-commands h2, .installation h2 {
131
+ font-family: 'Playfair Display', Georgia, serif;
132
+ font-size: 1.8rem;
133
+ font-weight: 400;
134
+ text-align: center;
135
+ margin-bottom: 30px;
136
+ color: #2d2d2d;
137
+ }
138
+
139
+ .feature-grid {
140
+ display: grid;
141
+ grid-template-columns: repeat(3, 1fr);
142
+ gap: 20px;
143
+ }
144
+
145
+ .feature {
146
+ background: rgba(255, 255, 255, 0.6);
147
+ padding: 25px;
148
+ border-radius: 12px;
149
+ text-align: center;
150
+ transition: transform 0.2s ease;
151
+ }
152
+
153
+ .feature:hover {
154
+ transform: scale(1.02);
155
+ }
156
+
157
+ .feature-icon {
158
+ font-size: 2rem;
159
+ display: block;
160
+ margin-bottom: 12px;
161
+ }
162
+
163
+ .feature h4 {
164
+ font-family: 'Inter', sans-serif;
165
+ font-weight: 500;
166
+ font-size: 1rem;
167
+ margin-bottom: 8px;
168
+ color: #2d2d2d;
169
+ }
170
+
171
+ .feature p {
172
+ font-size: 0.85rem;
173
+ color: #666;
174
+ }
175
+
176
+ /* Voice Commands */
177
+ .voice-commands {
178
+ text-align: center;
179
+ margin-bottom: 50px;
180
+ }
181
+
182
+ .voice-commands > p {
183
+ margin-bottom: 20px;
184
+ color: #666;
185
+ }
186
+
187
+ .commands {
188
+ display: flex;
189
+ flex-wrap: wrap;
190
+ justify-content: center;
191
+ gap: 12px;
192
+ }
193
+
194
+ .cmd {
195
+ background: linear-gradient(145deg, #c8d4bc, #b5c4a8);
196
+ padding: 10px 20px;
197
+ border-radius: 25px;
198
+ font-size: 0.9rem;
199
+ font-weight: 500;
200
+ color: #3d3d3d;
201
+ box-shadow: 0 3px 10px rgba(122, 139, 110, 0.15);
202
+ }
203
+
204
+ /* Installation */
205
+ .installation {
206
+ text-align: center;
207
+ margin-bottom: 50px;
208
+ }
209
+
210
+ .installation p {
211
+ margin-bottom: 15px;
212
+ color: #666;
213
+ }
214
+
215
+ .installation code {
216
+ display: inline-block;
217
+ background: #2d2d2d;
218
+ color: #c8d4bc;
219
+ padding: 15px 25px;
220
+ border-radius: 8px;
221
+ font-family: 'Monaco', 'Consolas', monospace;
222
+ font-size: 0.85rem;
223
+ word-break: break-all;
224
+ }
225
+
226
+ /* Footer */
227
+ footer {
228
+ text-align: center;
229
+ padding-top: 30px;
230
+ border-top: 1px solid rgba(0, 0, 0, 0.1);
231
+ }
232
+
233
+ footer > p {
234
+ color: #666;
235
+ margin-bottom: 15px;
236
+ }
237
+
238
+ .hashtags {
239
+ display: flex;
240
+ justify-content: center;
241
+ gap: 15px;
242
+ }
243
+
244
+ .hashtags span {
245
+ color: #7a8b6e;
246
+ font-weight: 500;
247
+ }
248
+
249
+ /* Responsive */
250
+ @media (max-width: 768px) {
251
+ .personas {
252
+ grid-template-columns: 1fr;
253
+ }
254
+
255
+ .feature-grid {
256
+ grid-template-columns: 1fr 1fr;
257
+ }
258
+
259
+ h1 {
260
+ font-size: 2.5rem;
261
+ }
262
+
263
+ .hero-icons {
264
+ font-size: 2.5rem;
265
+ }
266
+ }
267
+
268
+ @media (max-width: 480px) {
269
+ .feature-grid {
270
+ grid-template-columns: 1fr;
271
+ }
272
+
273
+ .commands {
274
+ flex-direction: column;
275
+ align-items: center;
276
+ }
277
+ }