init
Browse files- index.html +235 -14
- pyproject.toml +15 -0
- reachy_mini_app_example/__init__.py +0 -0
- reachy_mini_app_example/main.py +27 -0
- style.css +399 -16
index.html
CHANGED
@@ -1,19 +1,240 @@
|
|
1 |
<!doctype html>
|
2 |
<html>
|
3 |
-
|
4 |
-
|
5 |
-
|
6 |
-
|
7 |
-
|
8 |
-
|
9 |
-
|
10 |
-
|
11 |
-
|
12 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
13 |
<p>
|
14 |
-
|
15 |
-
<a href="https://
|
|
|
|
|
16 |
</p>
|
17 |
</div>
|
18 |
-
</
|
19 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
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 |
-
|
3 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
4 |
}
|
5 |
|
6 |
-
|
7 |
-
font-size:
|
8 |
-
margin-
|
|
|
9 |
}
|
10 |
|
11 |
-
|
12 |
-
|
13 |
-
font-
|
14 |
-
margin-bottom:
|
15 |
-
|
|
|
|
|
|
|
16 |
}
|
17 |
|
18 |
-
.
|
19 |
-
|
|
|
|
|
20 |
margin: 0 auto;
|
21 |
-
|
22 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
23 |
border-radius: 16px;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
24 |
}
|
25 |
|
26 |
-
.
|
27 |
-
|
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 |
+
}
|