Hugging Face's logo

Spaces:
RemiFabre
/
SimpleDances
Running

App Files Community
RemiFabre commited on
Commit
36e0611
·
1 Parent(s): acc5c7e

Updating default landing page

Browse files
Files changed (2) hide show
  1. index.html +32 -12
  2. style.css +55 -1
index.html CHANGED
@@ -11,9 +11,9 @@
11
  <body>
12
  <div class="hero">
13
  <div class="hero-content">
14
- <div class="app-icon">🤖⚡</div>
15
- <h1> Simpledances </h1>
16
- <p class="tagline">Enter your tagline here</p>
17
  </div>
18
  </div>
19
 
@@ -21,7 +21,30 @@
21
  <div class="main-card">
22
  <div class="app-preview">
23
  <div class="preview-image">
24
- <div class="camera-feed">🛠️</div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
25
  </div>
26
  </div>
27
  </div>
@@ -29,17 +52,17 @@
29
 
30
  <div class="download-section">
31
  <div class="download-card">
32
- <h2>Install This App</h2>
33
 
34
  <div class="dashboard-config">
35
- <label for="dashboardUrl">Your Reachy Dashboard URL:</label>
36
  <input type="url" id="dashboardUrl" value="http://localhost:8000"
37
  placeholder="http://your-reachy-ip:8000" />
38
  </div>
39
 
40
  <button id="installBtn" class="install-btn primary">
41
  <span class="btn-icon">📥</span>
42
- Install Simpledances to Reachy Mini
43
  </button>
44
 
45
  <div id="installStatus" class="install-status"></div>
@@ -49,10 +72,7 @@
49
 
50
  <div class="footer">
51
  <p>
52
- 🤖 Simpledances •
53
- <a href="https://github.com/pollen-robotics" target="_blank">Pollen Robotics</a> •
54
- <a href="https://huggingface.co/spaces/pollen-robotics/Reachy_Mini_Apps" target="_blank">Browse More
55
- Apps</a>
56
  </p>
57
  </div>
58
  </div>
@@ -232,4 +252,4 @@
232
  </script>
233
  </body>
234
 
235
- </html>
 
11
  <body>
12
  <div class="hero">
13
  <div class="hero-content">
14
+ <div class="app-icon">🕺🤖</div>
15
+ <h1>Simple Dances Studio</h1>
16
+ <p class="tagline">Play Reachy Mini dances! Tune BPM, sculpt parameters, and keep the groove looping.</p>
17
  </div>
18
  </div>
19
 
 
21
  <div class="main-card">
22
  <div class="app-preview">
23
  <div class="preview-image">
24
+ <div class="chip-row">
25
+ <span class="preview-chip">Playing</span>
26
+ <span class="preview-chip">Saved just now</span>
27
+ </div>
28
+ <div class="preview-title">Groovy Sway &amp; Roll</div>
29
+ <div class="preview-params">
30
+ <div class="param-card">
31
+ <p class="param-label">BPM</p>
32
+ <p class="param-value">110</p>
33
+ </div>
34
+ <div class="param-card">
35
+ <p class="param-label">Amplitude</p>
36
+ <p class="param-value">0.70×</p>
37
+ </div>
38
+ <div class="param-card">
39
+ <p class="param-label">Head roll</p>
40
+ <p class="param-value">+12°</p>
41
+ </div>
42
+ <div class="param-card">
43
+ <p class="param-label">Pitch sway</p>
44
+ <p class="param-value">–8°</p>
45
+ </div>
46
+ </div>
47
+ <p class="preview-note">This mockup mirrors the live UI: choose a dance, tweak sliders, smash “Apply”, then “Save” once you love the move.</p>
48
  </div>
49
  </div>
50
  </div>
 
52
 
53
  <div class="download-section">
54
  <div class="download-card">
55
+ <h2>Get the app running on your Reachy Mini</h2>
56
 
57
  <div class="dashboard-config">
58
+ <label for="dashboardUrl">Reachy Dashboard URL</label>
59
  <input type="url" id="dashboardUrl" value="http://localhost:8000"
60
  placeholder="http://your-reachy-ip:8000" />
61
  </div>
62
 
63
  <button id="installBtn" class="install-btn primary">
64
  <span class="btn-icon">📥</span>
65
+ Install Simple Dances Studio
66
  </button>
67
 
68
  <div id="installStatus" class="install-status"></div>
 
72
 
73
  <div class="footer">
74
  <p>
75
+ 🕺 Simple Dances Studio • Crafted by <a href="https://github.com/pollen-robotics" target="_blank">Pollen Robotics</a> • <a href="https://huggingface.co/spaces/pollen-robotics/Reachy_Mini_Apps" target="_blank">See more Reachy Mini apps</a>
 
 
 
76
  </p>
77
  </div>
78
  </div>
 
252
  </script>
253
  </body>
254
 
255
+ </html>
style.css CHANGED
@@ -82,6 +82,60 @@ body {
82
  overflow: hidden;
83
  }
84
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
85
  .camera-feed {
86
  font-size: 4rem;
87
  margin-bottom: 1rem;
@@ -408,4 +462,4 @@ body {
408
  .download-options {
409
  grid-template-columns: 1fr;
410
  }
411
- }
 
82
  overflow: hidden;
83
  }
84
 
85
+ .chip-row {
86
+ display: flex;
87
+ gap: 0.6rem;
88
+ margin-bottom: 1rem;
89
+ justify-content: center;
90
+ }
91
+
92
+ .preview-chip {
93
+ padding: 0.35rem 0.9rem;
94
+ border-radius: 999px;
95
+ border: 1px solid rgba(255, 255, 255, 0.2);
96
+ background: rgba(255, 255, 255, 0.08);
97
+ font-size: 0.85rem;
98
+ color: #fff;
99
+ }
100
+
101
+ .preview-title {
102
+ font-size: 1.4rem;
103
+ font-weight: 600;
104
+ margin-bottom: 1rem;
105
+ }
106
+
107
+ .preview-params {
108
+ display: grid;
109
+ grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
110
+ gap: 0.8rem;
111
+ }
112
+
113
+ .param-card {
114
+ background: rgba(255, 255, 255, 0.08);
115
+ border-radius: 10px;
116
+ padding: 0.75rem;
117
+ text-align: left;
118
+ }
119
+
120
+ .param-label {
121
+ text-transform: uppercase;
122
+ font-size: 0.75rem;
123
+ letter-spacing: 0.08em;
124
+ color: rgba(255, 255, 255, 0.6);
125
+ margin-bottom: 0.2rem;
126
+ }
127
+
128
+ .param-value {
129
+ font-size: 1.1rem;
130
+ font-weight: 600;
131
+ }
132
+
133
+ .preview-note {
134
+ margin-top: 1.2rem;
135
+ font-size: 0.9rem;
136
+ color: rgba(255, 255, 255, 0.8);
137
+ }
138
+
139
  .camera-feed {
140
  font-size: 4rem;
141
  margin-bottom: 1rem;
 
462
  .download-options {
463
  grid-template-columns: 1fr;
464
  }
465
+ }