Spaces:
Running
Running
Update index.html
#3
by
Anne-Charlotte - opened
- index.html +498 -217
index.html
CHANGED
|
@@ -1,235 +1,516 @@
|
|
| 1 |
<!DOCTYPE html>
|
| 2 |
<html lang="en">
|
| 3 |
<head>
|
| 4 |
-
|
| 5 |
-
|
| 6 |
-
|
| 7 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 8 |
</head>
|
| 9 |
<body>
|
| 10 |
-
<div class="container">
|
| 11 |
-
<!-- Hero Section -->
|
| 12 |
-
<header class="hero">
|
| 13 |
-
<div class="hero-content">
|
| 14 |
-
<h1 class="title">
|
| 15 |
-
<span class="emoji">🤖</span>
|
| 16 |
-
Simon
|
| 17 |
-
<span class="emoji">🎮</span>
|
| 18 |
-
</h1>
|
| 19 |
-
<p class="subtitle">A Memory Game for Reachy Mini</p>
|
| 20 |
-
<p class="tagline">Watch, Remember, Repeat - Three Difficulty Modes!</p>
|
| 21 |
-
</div>
|
| 22 |
-
</header>
|
| 23 |
|
| 24 |
-
|
| 25 |
-
|
| 26 |
-
|
| 27 |
-
|
| 28 |
-
|
| 29 |
-
|
| 30 |
-
|
| 31 |
-
|
| 32 |
-
|
| 33 |
-
<div class="direction-row">
|
| 34 |
-
<div class="direction left">
|
| 35 |
-
<span class="arrow">←</span>
|
| 36 |
-
<span class="label">LEFT</span>
|
| 37 |
-
</div>
|
| 38 |
-
<div class="direction right">
|
| 39 |
-
<span class="arrow">→</span>
|
| 40 |
-
<span class="label">RIGHT</span>
|
| 41 |
-
</div>
|
| 42 |
-
</div>
|
| 43 |
-
<div class="direction down">
|
| 44 |
-
<span class="arrow">↓</span>
|
| 45 |
-
<span class="label">DOWN</span>
|
| 46 |
-
</div>
|
| 47 |
-
</div>
|
| 48 |
-
</div>
|
| 49 |
-
</section>
|
| 50 |
|
| 51 |
-
<
|
| 52 |
-
|
| 53 |
-
<
|
| 54 |
-
<
|
| 55 |
-
|
| 56 |
-
<div class="difficulty-badge">1</div>
|
| 57 |
-
<h3>Head Only</h3>
|
| 58 |
-
<p><strong>4 Directions</strong></p>
|
| 59 |
-
<p>Classic Simon - just head tilts (Up, Down, Left, Right)</p>
|
| 60 |
-
<div class="difficulty-hint">Left antenna: Straight up (0°)</div>
|
| 61 |
-
</div>
|
| 62 |
-
<div class="difficulty-card">
|
| 63 |
-
<div class="difficulty-badge">2</div>
|
| 64 |
-
<h3>Head + Body</h3>
|
| 65 |
-
<p><strong>6 Directions</strong></p>
|
| 66 |
-
<p>Head tilts + body yaw rotation (adds Body Left, Body Right)</p>
|
| 67 |
-
<div class="difficulty-hint">Left antenna: ~45°</div>
|
| 68 |
-
</div>
|
| 69 |
-
<div class="difficulty-card">
|
| 70 |
-
<div class="difficulty-badge">3</div>
|
| 71 |
-
<h3>Full Robot</h3>
|
| 72 |
-
<p><strong>10 Directions!</strong></p>
|
| 73 |
-
<p>Head + body + antenna movements (4 antenna directions)</p>
|
| 74 |
-
<div class="difficulty-hint">Left antenna: ~90°</div>
|
| 75 |
-
</div>
|
| 76 |
-
</div>
|
| 77 |
-
</section>
|
| 78 |
|
| 79 |
-
|
| 80 |
-
|
| 81 |
-
<
|
| 82 |
-
<
|
| 83 |
-
|
| 84 |
-
<div class="step-number">1</div>
|
| 85 |
-
<div class="step-content">
|
| 86 |
-
<h3>Select Difficulty</h3>
|
| 87 |
-
<p>Move the LEFT antenna to choose difficulty (1, 2, or 3)</p>
|
| 88 |
-
</div>
|
| 89 |
-
</div>
|
| 90 |
-
<div class="step">
|
| 91 |
-
<div class="step-number">2</div>
|
| 92 |
-
<div class="step-content">
|
| 93 |
-
<h3>Start the Game</h3>
|
| 94 |
-
<p>Pull the RIGHT antenna to start (it twitches when ready!)</p>
|
| 95 |
-
</div>
|
| 96 |
-
</div>
|
| 97 |
-
<div class="step">
|
| 98 |
-
<div class="step-number">3</div>
|
| 99 |
-
<div class="step-content">
|
| 100 |
-
<h3>Watch the Sequence</h3>
|
| 101 |
-
<p>Reachy demonstrates with head, body, and/or antennas</p>
|
| 102 |
-
</div>
|
| 103 |
-
</div>
|
| 104 |
-
<div class="step">
|
| 105 |
-
<div class="step-number">4</div>
|
| 106 |
-
<div class="step-content">
|
| 107 |
-
<h3>Repeat & Win!</h3>
|
| 108 |
-
<p>Repeat the sequence - each round adds one more move!</p>
|
| 109 |
-
</div>
|
| 110 |
-
</div>
|
| 111 |
-
</div>
|
| 112 |
-
</section>
|
| 113 |
|
| 114 |
-
|
| 115 |
-
|
| 116 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 117 |
|
| 118 |
-
|
| 119 |
-
|
| 120 |
-
|
| 121 |
-
|
| 122 |
-
|
| 123 |
-
|
| 124 |
-
|
| 125 |
-
|
| 126 |
-
|
| 127 |
-
|
| 128 |
-
|
| 129 |
-
|
| 130 |
-
|
| 131 |
-
</div>
|
| 132 |
-
<div class="control-card">
|
| 133 |
-
<div class="control-icon">←</div>
|
| 134 |
-
<h3>LEFT</h3>
|
| 135 |
-
<p>Tilt head to the <strong>left</strong></p>
|
| 136 |
-
<div class="tilt-indicator">12° left</div>
|
| 137 |
-
</div>
|
| 138 |
-
<div class="control-card">
|
| 139 |
-
<div class="control-icon">→</div>
|
| 140 |
-
<h3>RIGHT</h3>
|
| 141 |
-
<p>Tilt head to the <strong>right</strong></p>
|
| 142 |
-
<div class="tilt-indicator">12° right</div>
|
| 143 |
</div>
|
| 144 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 145 |
|
| 146 |
-
|
| 147 |
-
|
| 148 |
-
|
| 149 |
-
|
| 150 |
-
|
| 151 |
-
|
| 152 |
-
|
| 153 |
-
|
| 154 |
-
|
| 155 |
-
|
| 156 |
-
|
| 157 |
-
|
| 158 |
-
|
| 159 |
-
|
| 160 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 161 |
|
| 162 |
-
|
| 163 |
-
|
| 164 |
-
|
| 165 |
-
|
| 166 |
-
|
| 167 |
-
|
| 168 |
-
|
| 169 |
-
|
| 170 |
-
|
| 171 |
-
|
| 172 |
-
|
| 173 |
-
</div>
|
| 174 |
-
<div class="control-card">
|
| 175 |
-
<div class="control-icon">📡←</div>
|
| 176 |
-
<h3>RIGHT ANTENNA LEFT</h3>
|
| 177 |
-
<p>Move right antenna <strong>left</strong></p>
|
| 178 |
-
</div>
|
| 179 |
-
<div class="control-card">
|
| 180 |
-
<div class="control-icon">📡→</div>
|
| 181 |
-
<h3>RIGHT ANTENNA RIGHT</h3>
|
| 182 |
-
<p>Move right antenna <strong>right</strong></p>
|
| 183 |
-
</div>
|
| 184 |
-
</div>
|
| 185 |
|
| 186 |
-
|
| 187 |
-
|
| 188 |
-
|
| 189 |
-
|
|
|
|
|
|
|
|
|
|
| 190 |
|
| 191 |
-
<
|
| 192 |
-
|
| 193 |
-
|
| 194 |
-
<
|
| 195 |
-
|
| 196 |
-
|
| 197 |
-
|
| 198 |
-
|
| 199 |
-
|
| 200 |
-
|
| 201 |
-
|
| 202 |
-
|
| 203 |
-
|
| 204 |
-
|
| 205 |
-
|
| 206 |
-
|
| 207 |
-
|
| 208 |
-
|
| 209 |
-
|
| 210 |
-
|
| 211 |
-
|
| 212 |
-
<h3>Celebrations</h3>
|
| 213 |
-
<p>Reachy performs a happy dance when you set new records</p>
|
| 214 |
-
</div>
|
| 215 |
-
<div class="feature-card">
|
| 216 |
-
<div class="feature-icon">🎯</div>
|
| 217 |
-
<h3>Instant Feedback</h3>
|
| 218 |
-
<p>Hear sounds immediately - lose on first wrong move!</p>
|
| 219 |
-
</div>
|
| 220 |
-
<div class="feature-card">
|
| 221 |
-
<div class="feature-icon">🤖</div>
|
| 222 |
-
<h3>Full Body Control</h3>
|
| 223 |
-
<p>Use head, body rotation, and antennas in Difficulty 3</p>
|
| 224 |
-
</div>
|
| 225 |
-
</div>
|
| 226 |
-
</section>
|
| 227 |
|
| 228 |
-
|
| 229 |
-
<
|
| 230 |
-
|
| 231 |
-
<p class="tech-stack">Python • Reachy Mini SDK • Simon Classic</p>
|
| 232 |
-
</footer>
|
| 233 |
</div>
|
|
|
|
|
|
|
| 234 |
</body>
|
| 235 |
-
</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>Simon - A Memory Game for Reachy Mini</title>
|
| 7 |
+
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
|
| 8 |
+
<style>
|
| 9 |
+
*, *::before, *::after {
|
| 10 |
+
box-sizing: border-box;
|
| 11 |
+
margin: 0;
|
| 12 |
+
padding: 0;
|
| 13 |
+
}
|
| 14 |
+
:root {
|
| 15 |
+
--background: hsl(240 7% 97%);
|
| 16 |
+
--foreground: hsl(240 10% 3.9%);
|
| 17 |
+
--card: hsl(0 0% 100%);
|
| 18 |
+
--card-foreground: hsl(240 10% 3.9%);
|
| 19 |
+
--primary: hsl(36 100% 50%);
|
| 20 |
+
--primary-foreground: hsl(0 0% 100%);
|
| 21 |
+
--muted: hsl(240 4.8% 95.9%);
|
| 22 |
+
--muted-foreground: hsl(240 3.8% 46.1%);
|
| 23 |
+
--border: hsl(240 5.9% 90%);
|
| 24 |
+
}
|
| 25 |
+
body {
|
| 26 |
+
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
| 27 |
+
background-color: var(--background);
|
| 28 |
+
color: var(--foreground);
|
| 29 |
+
line-height: 1.6;
|
| 30 |
+
min-height: 100vh;
|
| 31 |
+
}
|
| 32 |
+
.container {
|
| 33 |
+
max-width: 72rem;
|
| 34 |
+
margin: 0 auto;
|
| 35 |
+
padding: 0 1.5rem;
|
| 36 |
+
}
|
| 37 |
+
/* Hero Section */
|
| 38 |
+
.hero {
|
| 39 |
+
padding: 4rem 0;
|
| 40 |
+
}
|
| 41 |
+
.hero-grid {
|
| 42 |
+
display: grid;
|
| 43 |
+
grid-template-columns: 1fr;
|
| 44 |
+
gap: 3rem;
|
| 45 |
+
align-items: center;
|
| 46 |
+
}
|
| 47 |
+
@media (min-width: 768px) {
|
| 48 |
+
.hero-grid {
|
| 49 |
+
grid-template-columns: 1fr 1fr;
|
| 50 |
+
}
|
| 51 |
+
}
|
| 52 |
+
.hero video {
|
| 53 |
+
width: 100%;
|
| 54 |
+
max-width: 700px;
|
| 55 |
+
border-radius: 0.5rem;
|
| 56 |
+
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
|
| 57 |
+
}
|
| 58 |
+
.hero-content {
|
| 59 |
+
text-align: left;
|
| 60 |
+
}
|
| 61 |
+
.hero-title-wrapper {
|
| 62 |
+
display: flex;
|
| 63 |
+
align-items: center;
|
| 64 |
+
justify-content: center;
|
| 65 |
+
gap: 1rem;
|
| 66 |
+
margin-bottom: 1.5rem;
|
| 67 |
+
}
|
| 68 |
+
.hero-emoji {
|
| 69 |
+
font-size: 3.75rem;
|
| 70 |
+
}
|
| 71 |
+
.hero-title {
|
| 72 |
+
font-size: 3rem;
|
| 73 |
+
font-weight: 700;
|
| 74 |
+
color: var(--foreground);
|
| 75 |
+
}
|
| 76 |
+
.tags {
|
| 77 |
+
display: flex;
|
| 78 |
+
flex-wrap: wrap;
|
| 79 |
+
justify-content: center;
|
| 80 |
+
gap: 0.5rem;
|
| 81 |
+
margin-bottom: 1.5rem;
|
| 82 |
+
}
|
| 83 |
+
.tag {
|
| 84 |
+
display: inline-flex;
|
| 85 |
+
align-items: center;
|
| 86 |
+
padding: 0.25rem 0.75rem;
|
| 87 |
+
font-size: 0.75rem;
|
| 88 |
+
font-weight: 500;
|
| 89 |
+
border-radius: 9999px;
|
| 90 |
+
background-color: rgba(255, 153, 0, 0.15);
|
| 91 |
+
color: var(--primary);
|
| 92 |
+
}
|
| 93 |
+
.hero-description {
|
| 94 |
+
font-size: 1.125rem;
|
| 95 |
+
color: var(--muted-foreground);
|
| 96 |
+
max-width: 600px;
|
| 97 |
+
margin: 0 auto;
|
| 98 |
+
}
|
| 99 |
+
.hero-description strong {
|
| 100 |
+
color: var(--foreground);
|
| 101 |
+
}
|
| 102 |
+
/* Technical Section */
|
| 103 |
+
.technical {
|
| 104 |
+
padding: 4rem 0;
|
| 105 |
+
background-color: var(--card);
|
| 106 |
+
}
|
| 107 |
+
.technical-grid {
|
| 108 |
+
display: grid;
|
| 109 |
+
grid-template-columns: 1fr;
|
| 110 |
+
gap: 4rem;
|
| 111 |
+
align-items: flex-start;
|
| 112 |
+
}
|
| 113 |
+
@media (min-width: 768px) {
|
| 114 |
+
.technical-grid {
|
| 115 |
+
grid-template-columns: 1fr 1fr;
|
| 116 |
+
}
|
| 117 |
+
}
|
| 118 |
+
.technical h2 {
|
| 119 |
+
font-size: 1.5rem;
|
| 120 |
+
font-weight: 700;
|
| 121 |
+
color: var(--foreground);
|
| 122 |
+
margin-bottom: 1rem;
|
| 123 |
+
margin-top: 2rem;
|
| 124 |
+
}
|
| 125 |
+
.steps {
|
| 126 |
+
list-style: none;
|
| 127 |
+
display: flex;
|
| 128 |
+
flex-direction: column;
|
| 129 |
+
gap: 1rem;
|
| 130 |
+
}
|
| 131 |
+
.step {
|
| 132 |
+
display: flex;
|
| 133 |
+
align-items: flex-start;
|
| 134 |
+
gap: 1rem;
|
| 135 |
+
color: var(--muted-foreground);
|
| 136 |
+
}
|
| 137 |
+
.step-number {
|
| 138 |
+
display: flex;
|
| 139 |
+
align-items: center;
|
| 140 |
+
justify-content: center;
|
| 141 |
+
min-width: 1.75rem;
|
| 142 |
+
height: 1.75rem;
|
| 143 |
+
border-radius: 9999px;
|
| 144 |
+
background-color: var(--primary);
|
| 145 |
+
color: white;
|
| 146 |
+
font-size: 0.875rem;
|
| 147 |
+
font-weight: 600;
|
| 148 |
+
}
|
| 149 |
+
.step-content {
|
| 150 |
+
display: flex;
|
| 151 |
+
flex-direction: column;
|
| 152 |
+
gap: 0.25rem;
|
| 153 |
+
}
|
| 154 |
+
.step-title {
|
| 155 |
+
font-size: 0.875rem;
|
| 156 |
+
font-weight: 600;
|
| 157 |
+
color: var(--foreground);
|
| 158 |
+
}
|
| 159 |
+
.step-body {
|
| 160 |
+
font-size: 0.875rem;
|
| 161 |
+
color: var(--muted-foreground);
|
| 162 |
+
}
|
| 163 |
+
.step-body a {
|
| 164 |
+
color: var(--muted-foreground);
|
| 165 |
+
text-decoration: underline;
|
| 166 |
+
transition: color 0.2s;
|
| 167 |
+
}
|
| 168 |
+
.step-body a:hover {
|
| 169 |
+
color: var(--primary);
|
| 170 |
+
}
|
| 171 |
+
.technical video {
|
| 172 |
+
width: 100%;
|
| 173 |
+
border-radius: 0.5rem;
|
| 174 |
+
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
|
| 175 |
+
}
|
| 176 |
+
/* Features section */
|
| 177 |
+
.features-section {
|
| 178 |
+
padding: 4rem 0;
|
| 179 |
+
background-color: var(--card);
|
| 180 |
+
}
|
| 181 |
+
.features-section h2 {
|
| 182 |
+
font-size: 2.25rem;
|
| 183 |
+
font-weight: 700;
|
| 184 |
+
text-align: center;
|
| 185 |
+
margin-bottom: 1rem;
|
| 186 |
+
}
|
| 187 |
+
.features-section .subtitle {
|
| 188 |
+
color: var(--muted-foreground);
|
| 189 |
+
text-align: center;
|
| 190 |
+
max-width: 42rem;
|
| 191 |
+
margin: 0 auto 3rem;
|
| 192 |
+
}
|
| 193 |
+
.features-grid {
|
| 194 |
+
display: grid;
|
| 195 |
+
grid-template-columns: repeat(1, 1fr);
|
| 196 |
+
gap: 1.5rem;
|
| 197 |
+
}
|
| 198 |
+
@media (min-width: 768px) {
|
| 199 |
+
.features-grid {
|
| 200 |
+
grid-template-columns: repeat(2, 1fr);
|
| 201 |
+
}
|
| 202 |
+
}
|
| 203 |
+
@media (min-width: 1024px) {
|
| 204 |
+
.features-grid {
|
| 205 |
+
grid-template-columns: repeat(3, 1fr);
|
| 206 |
+
}
|
| 207 |
+
}
|
| 208 |
+
.feature-card {
|
| 209 |
+
background-color: var(--card);
|
| 210 |
+
border-radius: 0.75rem;
|
| 211 |
+
padding: 1.5rem;
|
| 212 |
+
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
| 213 |
+
border: 1px solid var(--border);
|
| 214 |
+
transition: box-shadow 0.3s ease;
|
| 215 |
+
}
|
| 216 |
+
.feature-card:hover {
|
| 217 |
+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
| 218 |
+
}
|
| 219 |
+
.feature-icon {
|
| 220 |
+
width: 3rem;
|
| 221 |
+
height: 3rem;
|
| 222 |
+
border-radius: 0.5rem;
|
| 223 |
+
background-color: rgba(255, 153, 0, 0.15);
|
| 224 |
+
display: flex;
|
| 225 |
+
align-items: center;
|
| 226 |
+
justify-content: center;
|
| 227 |
+
margin-bottom: 1rem;
|
| 228 |
+
color: var(--primary);
|
| 229 |
+
}
|
| 230 |
+
.feature-icon svg {
|
| 231 |
+
width: 1.5rem;
|
| 232 |
+
height: 1.5rem;
|
| 233 |
+
}
|
| 234 |
+
.feature-card h3 {
|
| 235 |
+
font-size: 1.125rem;
|
| 236 |
+
font-weight: 600;
|
| 237 |
+
color: var(--card-foreground);
|
| 238 |
+
margin-bottom: 0.5rem;
|
| 239 |
+
}
|
| 240 |
+
.feature-card p {
|
| 241 |
+
color: var(--muted-foreground);
|
| 242 |
+
font-size: 0.875rem;
|
| 243 |
+
line-height: 1.6;
|
| 244 |
+
}
|
| 245 |
+
|
| 246 |
+
/* Footer */
|
| 247 |
+
footer {
|
| 248 |
+
background-color: var(--background);
|
| 249 |
+
border-top: 1px solid var(--border);
|
| 250 |
+
padding: 3rem 0;
|
| 251 |
+
}
|
| 252 |
+
.footer-grid {
|
| 253 |
+
display: grid;
|
| 254 |
+
grid-template-columns: 1fr;
|
| 255 |
+
gap: 2rem;
|
| 256 |
+
margin-bottom: 2rem;
|
| 257 |
+
}
|
| 258 |
+
@media (min-width: 768px) {
|
| 259 |
+
.footer-grid {
|
| 260 |
+
grid-template-columns: repeat(3, 1fr);
|
| 261 |
+
}
|
| 262 |
+
}
|
| 263 |
+
.footer-section h4 {
|
| 264 |
+
font-size: 0.875rem;
|
| 265 |
+
font-weight: 600;
|
| 266 |
+
color: var(--foreground);
|
| 267 |
+
margin-bottom: 0.75rem;
|
| 268 |
+
}
|
| 269 |
+
.footer-section ul {
|
| 270 |
+
list-style: none;
|
| 271 |
+
display: flex;
|
| 272 |
+
flex-direction: column;
|
| 273 |
+
gap: 0.5rem;
|
| 274 |
+
}
|
| 275 |
+
.footer-section a {
|
| 276 |
+
font-size: 0.875rem;
|
| 277 |
+
color: var(--muted-foreground);
|
| 278 |
+
text-decoration: none;
|
| 279 |
+
transition: color 0.2s;
|
| 280 |
+
}
|
| 281 |
+
.footer-section a:hover {
|
| 282 |
+
color: var(--primary);
|
| 283 |
+
}
|
| 284 |
+
.social-links {
|
| 285 |
+
display: flex;
|
| 286 |
+
gap: 0.75rem;
|
| 287 |
+
}
|
| 288 |
+
.social-link {
|
| 289 |
+
display: flex;
|
| 290 |
+
align-items: center;
|
| 291 |
+
justify-content: center;
|
| 292 |
+
width: 2.25rem;
|
| 293 |
+
height: 2.25rem;
|
| 294 |
+
border-radius: 9999px;
|
| 295 |
+
background-color: var(--muted);
|
| 296 |
+
color: var(--muted-foreground);
|
| 297 |
+
transition: all 0.2s;
|
| 298 |
+
}
|
| 299 |
+
.social-link:hover {
|
| 300 |
+
background-color: var(--primary);
|
| 301 |
+
color: white;
|
| 302 |
+
}
|
| 303 |
+
.social-link svg {
|
| 304 |
+
width: 1.25rem;
|
| 305 |
+
height: 1.25rem;
|
| 306 |
+
}
|
| 307 |
+
.footer-credit {
|
| 308 |
+
font-size: 0.875rem;
|
| 309 |
+
color: var(--muted-foreground);
|
| 310 |
+
text-align: center;
|
| 311 |
+
padding-top: 1.5rem;
|
| 312 |
+
border-top: 1px solid var(--border);
|
| 313 |
+
}
|
| 314 |
+
.footer-credit a {
|
| 315 |
+
color: var(--foreground);
|
| 316 |
+
font-weight: 600;
|
| 317 |
+
text-decoration: none;
|
| 318 |
+
transition: color 0.2s;
|
| 319 |
+
}
|
| 320 |
+
.footer-credit a:hover {
|
| 321 |
+
color: var(--primary);
|
| 322 |
+
}
|
| 323 |
+
</style>
|
| 324 |
</head>
|
| 325 |
<body>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 326 |
|
| 327 |
+
<!-- Hero Section -->
|
| 328 |
+
<section class="hero">
|
| 329 |
+
<div class="container">
|
| 330 |
+
<div class="hero-grid">
|
| 331 |
+
<div>
|
| 332 |
+
<video autoplay loop muted playsinline>
|
| 333 |
+
<source src="reachy_mini_simon/assets/reachy-mini-demo-simon.mp4" type="video/mp4" />
|
| 334 |
+
</video>
|
| 335 |
+
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 336 |
|
| 337 |
+
<div class="hero-content">
|
| 338 |
+
<div class="hero-title-wrapper">
|
| 339 |
+
<span class="hero-emoji">🎮</span>
|
| 340 |
+
<h1 class="hero-title">Simon</h1>
|
| 341 |
+
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 342 |
|
| 343 |
+
<div class="tags">
|
| 344 |
+
<span class="tag">Motion</span>
|
| 345 |
+
<span class="tag">Game</span>
|
| 346 |
+
<span class="tag">Kids</span>
|
| 347 |
+
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 348 |
|
| 349 |
+
<p class="hero-description">
|
| 350 |
+
<strong>Watch, Remember, Repeat - Three Difficulty Modes!</strong><br />
|
| 351 |
+
A Simon-style memory game with three difficulty levels, progressing from simple head movements to full robot control with body rotation and antennas.<br>
|
| 352 |
+
Players choose the difficulty with the left antenna, start with the right, watch Reachy play an increasing sequence, and repeat it to win, with sounds, instant feedback, scoring, and celebrations making the challenge fun and engaging.
|
| 353 |
+
</p>
|
| 354 |
+
</div>
|
| 355 |
+
</div>
|
| 356 |
+
</div>
|
| 357 |
+
</section>
|
| 358 |
|
| 359 |
+
<!-- Technical Section -->
|
| 360 |
+
<section class="technical">
|
| 361 |
+
<div class="container">
|
| 362 |
+
<div class="technical-grid">
|
| 363 |
+
<div>
|
| 364 |
+
<h2>How it works</h2>
|
| 365 |
+
<ol class="steps">
|
| 366 |
+
<li class="step">
|
| 367 |
+
<span class="step-number">1</span>
|
| 368 |
+
<div class="step-content">
|
| 369 |
+
<div class="step-title">Connect Reachy Mini & launch the app</div>
|
| 370 |
+
<div class="step-body">
|
| 371 |
+
Connect to your Reachy Mini, navigate to the "Applications" tab, find "Simon" and click "Launch" (make sure you already have the <a href="https://hf.co/reachy-mini/#download" target="_blank" rel="noreferrer">dashboard</a> installed).
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 372 |
</div>
|
| 373 |
+
</div>
|
| 374 |
+
</li>
|
| 375 |
+
<li class="step">
|
| 376 |
+
<span class="step-number">2</span>
|
| 377 |
+
<div class="step-content">
|
| 378 |
+
<div class="step-title">Select Difficulty</div>
|
| 379 |
+
<div class="step-body">Move the LEFT antenna to choose difficulty (1, 2, or 3)</div>
|
| 380 |
+
</div>
|
| 381 |
+
</li>
|
| 382 |
+
<li class="step">
|
| 383 |
+
<span class="step-number">3</span>
|
| 384 |
+
<div class="step-content">
|
| 385 |
+
<div class="step-title">Start the Game</div>
|
| 386 |
+
<div class="step-body">Pull the RIGHT antenna to start (it twitches when ready!)</div>
|
| 387 |
+
</div>
|
| 388 |
+
</li>
|
| 389 |
+
<li class="step">
|
| 390 |
+
<span class="step-number">4</span>
|
| 391 |
+
<div class="step-content">
|
| 392 |
+
<div class="step-title">Watch the Sequence</div>
|
| 393 |
+
<div class="step-body">Reachy demonstrates with head, body, and/or antennas</div>
|
| 394 |
+
</div>
|
| 395 |
+
</li>
|
| 396 |
+
<li class="step">
|
| 397 |
+
<span class="step-number">5</span>
|
| 398 |
+
<div class="step-content">
|
| 399 |
+
<div class="step-title">Repeat & Win!</div>
|
| 400 |
+
<div class="step-body">Repeat the sequence - each round adds one more move!</div>
|
| 401 |
+
</div>
|
| 402 |
+
</li>
|
| 403 |
+
</ol>
|
| 404 |
+
</div>
|
| 405 |
|
| 406 |
+
<div>
|
| 407 |
+
<video autoplay loop muted playsinline>
|
| 408 |
+
<source src="reachy_mini_simon/assets/reachy-mini-demo-simon-dashboard.mp4" type="video/mp4" />
|
| 409 |
+
</video>
|
| 410 |
+
</div>
|
| 411 |
+
</div>
|
| 412 |
+
</div>
|
| 413 |
+
</section>
|
| 414 |
+
|
| 415 |
+
<!-- Features Section -->
|
| 416 |
+
<section class="features-section">
|
| 417 |
+
<div class="container">
|
| 418 |
+
<h2>Features</h2>
|
| 419 |
+
<p class="subtitle">Discover all the exciting features that make Simon a unique memory game experience</p>
|
| 420 |
+
<div class="features-grid">
|
| 421 |
+
<div class="feature-card">
|
| 422 |
+
<div class="feature-icon">
|
| 423 |
+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M21 6H3M21 12H3M21 18H3M6 6v12M18 6v12"/></svg>
|
| 424 |
+
</div>
|
| 425 |
+
<h3>3 Difficulty Modes</h3>
|
| 426 |
+
<p>From 4 to 10 directions - choose your challenge!</p>
|
| 427 |
+
</div>
|
| 428 |
+
<div class="feature-card">
|
| 429 |
+
<div class="feature-icon">
|
| 430 |
+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M9 18V5l12-2v13M9 9l12-2"/><circle cx="6" cy="18" r="3"/><circle cx="18" cy="16" r="3"/></svg>
|
| 431 |
+
</div>
|
| 432 |
+
<h3>Unique Sounds</h3>
|
| 433 |
+
<p>Each of the 10 directions has its own musical tone</p>
|
| 434 |
+
</div>
|
| 435 |
+
<div class="feature-card">
|
| 436 |
+
<div class="feature-icon">
|
| 437 |
+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M6 9H4.5a2.5 2.5 0 0 1 0-5H6M18 9h1.5a2.5 2.5 0 0 0 0-5H18M4 22h16M10 14.66V17c0 .55-.47.98-.97 1.21C7.85 18.75 7 20.24 7 22M14 14.66V17c0 .55.47.98.97 1.21C16.15 18.75 17 20.24 17 22M18 2H6v7a6 6 0 0 0 12 0V2Z"/></svg>
|
| 438 |
+
</div>
|
| 439 |
+
<h3>Score Tracking</h3>
|
| 440 |
+
<p>Beat your personal best at each difficulty level</p>
|
| 441 |
+
</div>
|
| 442 |
+
<div class="feature-card">
|
| 443 |
+
<div class="feature-icon">
|
| 444 |
+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M5.8 11.3 2 22l10.7-3.79M4 3h.01M22 8h.01M15 2h.01M22 20h.01M22 2l-2.24.75a2.9 2.9 0 0 0-1.96 3.12c.1.86-.57 1.63-1.45 1.63h-.38c-.86 0-1.6.6-1.76 1.44L14 10m8 3-.82-.33c-.86-.34-1.82.2-1.98 1.11c-.11.7-.72 1.22-1.43 1.22H17M11 2l.33.82c.34.86-.2 1.82-1.11 1.98-.7.11-1.22.72-1.22 1.43V8m-6 9-.82-.33c-.86-.34-1.82.2-1.98 1.11-.11.7-.72 1.22-1.43 1.22H0"/></svg>
|
| 445 |
+
</div>
|
| 446 |
+
<h3>Celebrations</h3>
|
| 447 |
+
<p>Reachy performs a happy dance when you set new records</p>
|
| 448 |
+
</div>
|
| 449 |
+
<div class="feature-card">
|
| 450 |
+
<div class="feature-icon">
|
| 451 |
+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="6"/><circle cx="12" cy="12" r="2"/></svg>
|
| 452 |
+
</div>
|
| 453 |
+
<h3>Instant Feedback</h3>
|
| 454 |
+
<p>Hear sounds immediately - lose on first wrong move!</p>
|
| 455 |
+
</div>
|
| 456 |
+
<div class="feature-card">
|
| 457 |
+
<div class="feature-icon">
|
| 458 |
+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M12 8V4H8"/><rect width="16" height="12" x="4" y="8" rx="2"/><path d="M2 14h2M20 14h2M15 13v2M9 13v2"/></svg>
|
| 459 |
+
</div>
|
| 460 |
+
<h3>Full Body Control</h3>
|
| 461 |
+
<p>Use head, body rotation, and more to play the game</p>
|
| 462 |
+
</div>
|
| 463 |
+
</div>
|
| 464 |
+
</div>
|
| 465 |
+
</section>
|
| 466 |
|
| 467 |
+
<!-- Footer -->
|
| 468 |
+
<footer>
|
| 469 |
+
<div class="container">
|
| 470 |
+
<div class="footer-grid">
|
| 471 |
+
<div class="footer-section">
|
| 472 |
+
<h4>Resources</h4>
|
| 473 |
+
<ul>
|
| 474 |
+
<li><a href="https://huggingface.co/docs/reachy_mini/index" target="_blank" rel="noopener noreferrer">Read the Documentation</a></li>
|
| 475 |
+
<li><a href="https://github.com/pollen-robotics/reachy_mini/blob/develop/docs/troubleshooting.md" target="_blank" rel="noopener noreferrer">Troubleshooting & FAQ</a></li>
|
| 476 |
+
</ul>
|
| 477 |
+
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 478 |
|
| 479 |
+
<div class="footer-section">
|
| 480 |
+
<h4>Reachy Mini Apps</h4>
|
| 481 |
+
<ul>
|
| 482 |
+
<li><a href="https://hf.co/reachy-mini/#apps" target="_blank" rel="noopener noreferrer">Browse other apps</a></li>
|
| 483 |
+
<li><a href="https://huggingface.co/blog/pollen-robotics/make-and-publish-your-reachy-mini-apps" target="_blank" rel="noopener noreferrer">Make and publish your own app</a></li>
|
| 484 |
+
</ul>
|
| 485 |
+
</div>
|
| 486 |
|
| 487 |
+
<div class="footer-section">
|
| 488 |
+
<h4>Follow us</h4>
|
| 489 |
+
<div class="social-links">
|
| 490 |
+
<a href="https://discord.gg/2bAhWfXme9" target="_blank" rel="noopener noreferrer" aria-label="Discord" class="social-link">
|
| 491 |
+
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028 14.09 14.09 0 0 0 1.226-1.994.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.946 2.418-2.157 2.418z"/></svg>
|
| 492 |
+
</a>
|
| 493 |
+
<a href="https://www.linkedin.com/company/pollen-robotics" target="_blank" rel="noopener noreferrer" aria-label="LinkedIn" class="social-link">
|
| 494 |
+
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"/><rect width="4" height="12" x="2" y="9"/><circle cx="4" cy="4" r="2"/></svg>
|
| 495 |
+
</a>
|
| 496 |
+
<a href="https://www.youtube.com/c/pollenrobotics" target="_blank" rel="noopener noreferrer" aria-label="YouTube" class="social-link">
|
| 497 |
+
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2.5 17a24.12 24.12 0 0 1 0-10 2 2 0 0 1 1.4-1.4 49.56 49.56 0 0 1 16.2 0A2 2 0 0 1 21.5 7a24.12 24.12 0 0 1 0 10 2 2 0 0 1-1.4 1.4 49.55 49.55 0 0 1-16.2 0A2 2 0 0 1 2.5 17"/><path d="m10 15 5-3-5-3z"/></svg>
|
| 498 |
+
</a>
|
| 499 |
+
<a href="https://github.com/pollen-robotics" target="_blank" rel="noopener noreferrer" aria-label="GitHub" class="social-link">
|
| 500 |
+
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4"/><path d="M9 18c-4.51 2-5-2-7-2"/></svg>
|
| 501 |
+
</a>
|
| 502 |
+
<a href="https://x.com/pollenrobotics" target="_blank" rel="noopener noreferrer" aria-label="X" class="social-link">
|
| 503 |
+
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 4s-.7 2.1-2 3.4c1.6 10-9.4 17.3-18 11.6 2.2.1 4.4-.6 6-2C3 15.5.5 9.6 3 5c2.2 2.6 5.6 4.1 9 4-.9-4.2 4-6.6 7-3.8 1.1 0 3-1.2 3-1.2z"/></svg>
|
| 504 |
+
</a>
|
| 505 |
+
</div>
|
| 506 |
+
</div>
|
| 507 |
+
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 508 |
|
| 509 |
+
<div class="footer-credit">
|
| 510 |
+
Proudly brought by <a href="https://www.pollen-robotics.com/" target="_blank" rel="noopener noreferrer">Pollen Robotics</a> x 🤗 <a href="https://huggingface.co" target="_blank" rel="noopener noreferrer">Hugging Face</a>
|
| 511 |
+
</div>
|
|
|
|
|
|
|
| 512 |
</div>
|
| 513 |
+
</footer>
|
| 514 |
+
|
| 515 |
</body>
|
| 516 |
+
</html>
|