cduss commited on
Commit
b44cc91
·
1 Parent(s): 0bd1f77
index.html CHANGED
@@ -1,19 +1,240 @@
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>
3
+
4
+ <head>
5
+ <meta charset="utf-8" />
6
+ <meta name="viewport" content="width=device-width" />
7
+ <title>Example App - Reachy Mini Template</title>
8
+ <link rel="stylesheet" href="style.css" />
9
+ </head>
10
+
11
+ <body>
12
+ <div class="hero">
13
+ <div class="hero-content">
14
+ <div class="app-icon">🤖⚡</div>
15
+ <h1>Example Reachy Mini App</h1>
16
+ <p class="tagline">Template for creating your own Reachy Mini applications</p>
17
+ </div>
18
+ </div>
19
+
20
+ <div class="container">
21
+ <div class="main-card">
22
+ <div class="app-preview">
23
+ <div class="preview-image">
24
+ <div class="camera-feed">🛠️</div>
25
+ <div class="detection-overlay">
26
+ <div class="bbox">🎯 Your Code Here</div>
27
+ <div class="bbox">⚙️ Build Something Cool</div>
28
+ </div>
29
+ </div>
30
+ </div>
31
+
32
+ <div class="app-details">
33
+ <h2>Example Template App</h2>
34
+ <div class="template-info">
35
+ <div class="info-box">
36
+ <h3>🎨 Template Purpose</h3>
37
+ <p>This is an example landing page for Reachy Mini apps. Feel free to duplicate this template
38
+ and customize it for your own applications!</p>
39
+ </div>
40
+ <div class="info-box">
41
+ <h3>🚀 Getting Started</h3>
42
+ <p>Use this template to showcase your Reachy Mini app with a professional landing page. Simply
43
+ modify the content, add your app's repository URL, and deploy!</p>
44
+ </div>
45
+ </div>
46
+
47
+ <div class="features-grid">
48
+ <div class="feature">
49
+ <span class="feature-icon">📝</span>
50
+ <div>
51
+ <h3>Easy to Customize</h3>
52
+ <p>Simple HTML/CSS template that's easy to modify for your needs</p>
53
+ </div>
54
+ </div>
55
+ <div class="feature">
56
+ <span class="feature-icon">🔌</span>
57
+ <div>
58
+ <h3>Dashboard Integration</h3>
59
+ <p>Built-in install button connects directly to Reachy dashboards</p>
60
+ </div>
61
+ </div>
62
+ <div class="feature">
63
+ <span class="feature-icon">📱</span>
64
+ <div>
65
+ <h3>Responsive Design</h3>
66
+ <p>Looks great on desktop, tablet, and mobile devices</p>
67
+ </div>
68
+ </div>
69
+ <div class="feature">
70
+ <span class="feature-icon">⚡</span>
71
+ <div>
72
+ <h3>Fast & Modern</h3>
73
+ <p>Clean, professional design with smooth animations</p>
74
+ </div>
75
+ </div>
76
+ </div>
77
+
78
+ <div class="how-to-use">
79
+ <h3>How to Use This Template</h3>
80
+ <div class="steps">
81
+ <div class="step">
82
+ <span class="step-number">1</span>
83
+ <div>
84
+ <h4>Duplicate & Customize</h4>
85
+ <p>Copy this template and modify the content for your app</p>
86
+ </div>
87
+ </div>
88
+ <div class="step">
89
+ <span class="step-number">2</span>
90
+ <div>
91
+ <h4>Update Repository URL</h4>
92
+ <p>Change the JavaScript to point to your app's Git repository</p>
93
+ </div>
94
+ </div>
95
+ <div class="step">
96
+ <span class="step-number">3</span>
97
+ <div>
98
+ <h4>Deploy to HF Spaces</h4>
99
+ <p>Upload your customized version to Hugging Face Spaces</p>
100
+ </div>
101
+ </div>
102
+ </div>
103
+ </div>
104
+ </div>
105
+ </div>
106
+
107
+ <div class="download-section">
108
+ <div class="download-card">
109
+ <h2>Install This Example App</h2>
110
+ <p>Try out the installation process with this template app</p>
111
+
112
+ <div class="dashboard-config">
113
+ <label for="dashboardUrl">Your Reachy Dashboard URL:</label>
114
+ <input type="url" id="dashboardUrl" value="http://localhost:8000"
115
+ placeholder="http://your-reachy-ip:8000" />
116
+ </div>
117
+
118
+ <button id="installBtn" class="install-btn primary">
119
+ <span class="btn-icon">📥</span>
120
+ Install Example App to Reachy
121
+ </button>
122
+
123
+ <div id="installStatus" class="install-status"></div>
124
+
125
+ <div class="manual-option">
126
+ <h3>Manual Installation</h3>
127
+ <p>Or copy this repository URL for manual installation:</p>
128
+ <div class="manual-install">
129
+ <code id="repoUrl">https://github.com/your-username/your-reachy-app.git</code>
130
+ <button onclick="copyToClipboard()" class="copy-btn">📋 Copy</button>
131
+ </div>
132
+ </div>
133
+ </div>
134
+ </div>
135
+
136
+ <div class="footer">
137
  <p>
138
+ 🤖 Template for Reachy Mini Apps •
139
+ <a href="https://github.com/pollen-robotics" target="_blank">Pollen Robotics</a> •
140
+ <a href="https://huggingface.co/spaces/pollen-robotics/Reachy_Mini_Apps" target="_blank">Browse More
141
+ Apps</a>
142
  </p>
143
  </div>
144
+ </div>
145
+
146
+ <script>
147
+ // 🔧 CUSTOMIZE THESE VALUES FOR YOUR APP:
148
+ const APP_REPO_URL = "https://github.com/your-username/your-reachy-app.git";
149
+ const APP_NAME = "example-app";
150
+
151
+ async function installToReachy() {
152
+ const dashboardUrl = document.getElementById('dashboardUrl').value.trim();
153
+ const statusDiv = document.getElementById('installStatus');
154
+ const installBtn = document.getElementById('installBtn');
155
+
156
+ if (!dashboardUrl) {
157
+ showStatus('error', 'Please enter your Reachy dashboard URL');
158
+ return;
159
+ }
160
+
161
+ try {
162
+ installBtn.disabled = true;
163
+ installBtn.innerHTML = '<span class="btn-icon">⏳</span>Installing...';
164
+ showStatus('loading', 'Connecting to your Reachy dashboard...');
165
+
166
+ // Test connection
167
+ const testResponse = await fetch(`${dashboardUrl}/api/status`, {
168
+ method: 'GET',
169
+ mode: 'cors',
170
+ });
171
+
172
+ if (!testResponse.ok) {
173
+ throw new Error('Cannot connect to dashboard. Make sure the URL is correct and the dashboard is running.');
174
+ }
175
+
176
+ showStatus('loading', 'Starting installation...');
177
+
178
+ // Start installation
179
+ const installResponse = await fetch(`${dashboardUrl}/api/install`, {
180
+ method: 'POST',
181
+ mode: 'cors',
182
+ headers: {
183
+ 'Content-Type': 'application/json',
184
+ },
185
+ body: JSON.stringify({
186
+ url: APP_REPO_URL,
187
+ name: APP_NAME
188
+ })
189
+ });
190
+
191
+ const result = await installResponse.json();
192
+
193
+ if (installResponse.ok) {
194
+ showStatus('success', `✅ Installation started! Check your dashboard for progress.`);
195
+ setTimeout(() => {
196
+ showStatus('info', `Open your dashboard at ${dashboardUrl} to see the installed app.`);
197
+ }, 3000);
198
+ } else {
199
+ throw new Error(result.detail || 'Installation failed');
200
+ }
201
+
202
+ } catch (error) {
203
+ console.error('Installation error:', error);
204
+ showStatus('error', `❌ ${error.message}`);
205
+ } finally {
206
+ installBtn.disabled = false;
207
+ installBtn.innerHTML = '<span class="btn-icon">📥</span>Install Example App to Reachy';
208
+ }
209
+ }
210
+
211
+ function showStatus(type, message) {
212
+ const statusDiv = document.getElementById('installStatus');
213
+ statusDiv.className = `install-status ${type}`;
214
+ statusDiv.textContent = message;
215
+ statusDiv.style.display = 'block';
216
+ }
217
+
218
+ function copyToClipboard() {
219
+ const repoUrl = document.getElementById('repoUrl').textContent;
220
+ navigator.clipboard.writeText(repoUrl).then(() => {
221
+ showStatus('success', '📋 Repository URL copied to clipboard!');
222
+ }).catch(() => {
223
+ showStatus('error', 'Failed to copy URL. Please copy manually.');
224
+ });
225
+ }
226
+
227
+ // Event listeners
228
+ document.getElementById('installBtn').addEventListener('click', installToReachy);
229
+
230
+ // Auto-detect local dashboard
231
+ document.addEventListener('DOMContentLoaded', () => {
232
+ const isLocalhost = window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1';
233
+ if (isLocalhost) {
234
+ document.getElementById('dashboardUrl').value = 'http://localhost:8000';
235
+ }
236
+ });
237
+ </script>
238
+ </body>
239
+
240
+ </html>
pyproject.toml ADDED
@@ -0,0 +1,15 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ [build-system]
2
+ requires = ["setuptools>=61.0"]
3
+ build-backend = "setuptools.build_meta"
4
+
5
+
6
+ [project]
7
+ name = "reachy_mini_app_example"
8
+ version = "0.1.0"
9
+ description = "Add your description here"
10
+ readme = "README.md"
11
+ requires-python = ">=3.8"
12
+ dependencies = ["reachy-mini"]
13
+
14
+ [project.entry-points."reachy_mini_apps"]
15
+ reachy_mini_app_example = "reachy_mini_app_example.main:ExampleApp"
reachy_mini_app_example/__init__.py ADDED
File without changes
reachy_mini_app_example/main.py ADDED
@@ -0,0 +1,27 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ import threading
2
+ import time
3
+
4
+ import numpy as np
5
+ from reachy_mini import ReachyMiniApp
6
+ from reachy_mini.reachy_mini import ReachyMini
7
+ from scipy.spatial.transform import Rotation as R
8
+
9
+
10
+ class ExampleApp(ReachyMiniApp):
11
+ def run(self, reachy_mini: ReachyMini, stop_event: threading.Event):
12
+ t0 = time.time()
13
+ while not stop_event.is_set():
14
+ t = time.time() - t0
15
+
16
+ target = np.deg2rad(30) * np.sin(2 * np.pi * 0.5 * t)
17
+
18
+ yaw = target
19
+ head = np.eye(4)
20
+ head[:3, :3] = R.from_euler("xyz", [0, 0, yaw], degrees=False).as_matrix()
21
+
22
+ reachy_mini.set_position(head=head, antennas=np.array([target, -target]))
23
+
24
+ time.sleep(0.01)
25
+ # if more than one second since last ping, print ping
26
+ if t % 1 < 0.01:
27
+ print("Ping")
style.css CHANGED
@@ -1,28 +1,411 @@
 
 
 
 
 
 
1
  body {
2
- padding: 2rem;
3
- font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
4
  }
5
 
6
- h1 {
7
- font-size: 16px;
8
- margin-top: 0;
 
9
  }
10
 
11
- p {
12
- color: rgb(107, 114, 128);
13
- font-size: 15px;
14
- margin-bottom: 10px;
15
- margin-top: 5px;
 
 
 
16
  }
17
 
18
- .card {
19
- max-width: 620px;
 
 
20
  margin: 0 auto;
21
- padding: 16px;
22
- border: 1px solid lightgray;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
23
  border-radius: 16px;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
24
  }
25
 
26
- .card p:last-child {
27
- margin-bottom: 0;
28
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ * {
2
+ margin: 0;
3
+ padding: 0;
4
+ box-sizing: border-box;
5
+ }
6
+
7
  body {
8
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
9
+ line-height: 1.6;
10
+ color: #333;
11
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
12
+ min-height: 100vh;
13
+ }
14
+
15
+ .hero {
16
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
17
+ color: white;
18
+ padding: 4rem 2rem;
19
+ text-align: center;
20
+ }
21
+
22
+ .hero-content {
23
+ max-width: 800px;
24
+ margin: 0 auto;
25
  }
26
 
27
+ .app-icon {
28
+ font-size: 4rem;
29
+ margin-bottom: 1rem;
30
+ display: inline-block;
31
  }
32
 
33
+ .hero h1 {
34
+ font-size: 3rem;
35
+ font-weight: 700;
36
+ margin-bottom: 1rem;
37
+ background: linear-gradient(45deg, #fff, #f0f9ff);
38
+ background-clip: text;
39
+ -webkit-background-clip: text;
40
+ -webkit-text-fill-color: transparent;
41
  }
42
 
43
+ .tagline {
44
+ font-size: 1.25rem;
45
+ opacity: 0.9;
46
+ max-width: 600px;
47
  margin: 0 auto;
48
+ }
49
+
50
+ .container {
51
+ max-width: 1200px;
52
+ margin: 0 auto;
53
+ padding: 0 2rem;
54
+ position: relative;
55
+ z-index: 2;
56
+ }
57
+
58
+ .main-card {
59
+ background: white;
60
+ border-radius: 20px;
61
+ box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
62
+ margin-top: -2rem;
63
+ overflow: hidden;
64
+ margin-bottom: 3rem;
65
+ }
66
+
67
+ .app-preview {
68
+ background: linear-gradient(135deg, #1e3a8a, #3b82f6);
69
+ padding: 3rem;
70
+ color: white;
71
+ text-align: center;
72
+ position: relative;
73
+ }
74
+
75
+ .preview-image {
76
+ background: #000;
77
+ border-radius: 15px;
78
+ padding: 2rem;
79
+ max-width: 500px;
80
+ margin: 0 auto;
81
+ position: relative;
82
+ overflow: hidden;
83
+ }
84
+
85
+ .camera-feed {
86
+ font-size: 4rem;
87
+ margin-bottom: 1rem;
88
+ opacity: 0.7;
89
+ }
90
+
91
+ .detection-overlay {
92
+ position: absolute;
93
+ top: 50%;
94
+ left: 50%;
95
+ transform: translate(-50%, -50%);
96
+ width: 100%;
97
+ }
98
+
99
+ .bbox {
100
+ background: rgba(34, 197, 94, 0.9);
101
+ color: white;
102
+ padding: 0.5rem 1rem;
103
+ border-radius: 8px;
104
+ font-size: 0.9rem;
105
+ font-weight: 600;
106
+ margin: 0.5rem;
107
+ display: inline-block;
108
+ border: 2px solid #22c55e;
109
+ }
110
+
111
+ .app-details {
112
+ padding: 3rem;
113
+ }
114
+
115
+ .app-details h2 {
116
+ font-size: 2rem;
117
+ color: #1e293b;
118
+ margin-bottom: 2rem;
119
+ text-align: center;
120
+ }
121
+
122
+ .template-info {
123
+ display: grid;
124
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
125
+ gap: 2rem;
126
+ margin-bottom: 3rem;
127
+ }
128
+
129
+ .info-box {
130
+ background: #f0f9ff;
131
+ border: 2px solid #e0f2fe;
132
+ border-radius: 12px;
133
+ padding: 2rem;
134
+ }
135
+
136
+ .info-box h3 {
137
+ color: #0c4a6e;
138
+ margin-bottom: 1rem;
139
+ font-size: 1.2rem;
140
+ }
141
+
142
+ .info-box p {
143
+ color: #0369a1;
144
+ line-height: 1.6;
145
+ }
146
+
147
+ .how-to-use {
148
+ background: #fefce8;
149
+ border: 2px solid #fde047;
150
+ border-radius: 12px;
151
+ padding: 2rem;
152
+ margin-top: 3rem;
153
+ }
154
+
155
+ .how-to-use h3 {
156
+ color: #a16207;
157
+ margin-bottom: 1.5rem;
158
+ font-size: 1.3rem;
159
+ text-align: center;
160
+ }
161
+
162
+ .steps {
163
+ display: flex;
164
+ flex-direction: column;
165
+ gap: 1.5rem;
166
+ }
167
+
168
+ .step {
169
+ display: flex;
170
+ align-items: flex-start;
171
+ gap: 1rem;
172
+ }
173
+
174
+ .step-number {
175
+ background: #eab308;
176
+ color: white;
177
+ width: 2rem;
178
+ height: 2rem;
179
+ border-radius: 50%;
180
+ display: flex;
181
+ align-items: center;
182
+ justify-content: center;
183
+ font-weight: bold;
184
+ flex-shrink: 0;
185
+ }
186
+
187
+ .step h4 {
188
+ color: #a16207;
189
+ margin-bottom: 0.5rem;
190
+ font-size: 1.1rem;
191
+ }
192
+
193
+ .step p {
194
+ color: #ca8a04;
195
+ }
196
+
197
+ .download-card {
198
+ background: white;
199
+ border-radius: 20px;
200
+ box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
201
+ padding: 3rem;
202
+ text-align: center;
203
+ }
204
+
205
+ .download-card h2 {
206
+ font-size: 2rem;
207
+ color: #1e293b;
208
+ margin-bottom: 1rem;
209
+ }
210
+
211
+ .download-card>p {
212
+ color: #64748b;
213
+ font-size: 1.1rem;
214
+ margin-bottom: 2rem;
215
+ }
216
+
217
+ .dashboard-config {
218
+ margin-bottom: 2rem;
219
+ text-align: left;
220
+ max-width: 400px;
221
+ margin-left: auto;
222
+ margin-right: auto;
223
+ }
224
+
225
+ .dashboard-config label {
226
+ display: block;
227
+ color: #374151;
228
+ font-weight: 600;
229
+ margin-bottom: 0.5rem;
230
+ }
231
+
232
+ .dashboard-config input {
233
+ width: 100%;
234
+ padding: 0.75rem 1rem;
235
+ border: 2px solid #e5e7eb;
236
+ border-radius: 8px;
237
+ font-size: 0.95rem;
238
+ transition: border-color 0.2s;
239
+ }
240
+
241
+ .dashboard-config input:focus {
242
+ outline: none;
243
+ border-color: #667eea;
244
+ }
245
+
246
+ .install-btn {
247
+ background: linear-gradient(135deg, #667eea, #764ba2);
248
+ color: white;
249
+ border: none;
250
+ padding: 1.25rem 3rem;
251
  border-radius: 16px;
252
+ font-size: 1.2rem;
253
+ font-weight: 700;
254
+ cursor: pointer;
255
+ transition: all 0.3s ease;
256
+ display: inline-flex;
257
+ align-items: center;
258
+ gap: 0.75rem;
259
+ margin-bottom: 2rem;
260
+ box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
261
+ }
262
+
263
+ .install-btn:hover:not(:disabled) {
264
+ transform: translateY(-3px);
265
+ box-shadow: 0 15px 35px rgba(102, 126, 234, 0.4);
266
+ }
267
+
268
+ .install-btn:disabled {
269
+ opacity: 0.7;
270
+ cursor: not-allowed;
271
+ transform: none;
272
+ }
273
+
274
+ .manual-option {
275
+ background: #f8fafc;
276
+ border-radius: 12px;
277
+ padding: 2rem;
278
+ margin-top: 2rem;
279
+ }
280
+
281
+ .manual-option h3 {
282
+ color: #1e293b;
283
+ margin-bottom: 1rem;
284
+ font-size: 1.2rem;
285
+ }
286
+
287
+ .manual-option>p {
288
+ color: #64748b;
289
+ margin-bottom: 1rem;
290
+ }
291
+
292
+ .btn-icon {
293
+ font-size: 1.1rem;
294
+ }
295
+
296
+ .install-status {
297
+ padding: 1rem;
298
+ border-radius: 8px;
299
+ font-size: 0.9rem;
300
+ text-align: center;
301
+ display: none;
302
+ margin-top: 1rem;
303
+ }
304
+
305
+ .install-status.success {
306
+ background: #dcfce7;
307
+ color: #166534;
308
+ border: 1px solid #bbf7d0;
309
+ }
310
+
311
+ .install-status.error {
312
+ background: #fef2f2;
313
+ color: #dc2626;
314
+ border: 1px solid #fecaca;
315
+ }
316
+
317
+ .install-status.loading {
318
+ background: #dbeafe;
319
+ color: #1d4ed8;
320
+ border: 1px solid #bfdbfe;
321
+ }
322
+
323
+ .install-status.info {
324
+ background: #e0f2fe;
325
+ color: #0369a1;
326
+ border: 1px solid #7dd3fc;
327
+ }
328
+
329
+ .manual-install {
330
+ background: #1f2937;
331
+ border-radius: 8px;
332
+ padding: 1rem;
333
+ margin-bottom: 1rem;
334
+ display: flex;
335
+ align-items: center;
336
+ gap: 1rem;
337
+ }
338
+
339
+ .manual-install code {
340
+ color: #10b981;
341
+ font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;
342
+ font-size: 0.85rem;
343
+ flex: 1;
344
+ overflow-x: auto;
345
+ }
346
+
347
+ .copy-btn {
348
+ background: #374151;
349
+ color: white;
350
+ border: none;
351
+ padding: 0.5rem 1rem;
352
+ border-radius: 6px;
353
+ font-size: 0.8rem;
354
+ cursor: pointer;
355
+ transition: background-color 0.2s;
356
+ }
357
+
358
+ .copy-btn:hover {
359
+ background: #4b5563;
360
+ }
361
+
362
+ .manual-steps {
363
+ color: #6b7280;
364
+ font-size: 0.9rem;
365
+ line-height: 1.8;
366
+ }
367
+
368
+ .footer {
369
+ text-align: center;
370
+ padding: 2rem;
371
+ color: white;
372
+ opacity: 0.8;
373
+ }
374
+
375
+ .footer a {
376
+ color: white;
377
+ text-decoration: none;
378
+ font-weight: 600;
379
  }
380
 
381
+ .footer a:hover {
382
+ text-decoration: underline;
383
  }
384
+
385
+ /* Responsive Design */
386
+ @media (max-width: 768px) {
387
+ .hero {
388
+ padding: 2rem 1rem;
389
+ }
390
+
391
+ .hero h1 {
392
+ font-size: 2rem;
393
+ }
394
+
395
+ .container {
396
+ padding: 0 1rem;
397
+ }
398
+
399
+ .app-details,
400
+ .download-card {
401
+ padding: 2rem;
402
+ }
403
+
404
+ .features-grid {
405
+ grid-template-columns: 1fr;
406
+ }
407
+
408
+ .download-options {
409
+ grid-template-columns: 1fr;
410
+ }
411
+ }