Skip to content

Commit 7520d78

Browse files
MissCrispenCakesMissCrispenCakes
committed
Replace redirect with proper GitHub Pages landing page
- Remove auto-redirect, stays on Pages domain - Beautiful hero section with project overview - Feature grid showcasing capabilities - Links to documentation sections - GitHub and sponsor links - KDF Entertainment branding
1 parent 2dd8a18 commit 7520d78

File tree

1 file changed

+171
-23
lines changed

1 file changed

+171
-23
lines changed

‎index.html‎

Lines changed: 171 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -3,59 +3,207 @@
33
<head>
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6-
<meta http-equiv="refresh" content="0; url=https://github.com/MissCrispenCakes/On-body-haptics">
76
<title>On-Body Haptics - Open Source Wearable Haptic Feedback Systems</title>
87
<style>
8+
* {
9+
margin: 0;
10+
padding: 0;
11+
box-sizing: border-box;
12+
}
913
body {
1014
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
11-
display: flex;
12-
justify-content: center;
13-
align-items: center;
14-
min-height: 100vh;
15-
margin: 0;
15+
line-height: 1.6;
16+
color: #333;
17+
}
18+
.hero {
1619
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
1720
color: white;
18-
}
19-
.container {
21+
padding: 4rem 2rem;
2022
text-align: center;
21-
padding: 2rem;
22-
max-width: 600px;
2323
}
24-
h1 {
25-
font-size: 2.5rem;
24+
.hero h1 {
25+
font-size: 3rem;
2626
margin-bottom: 1rem;
2727
}
28-
p {
29-
font-size: 1.2rem;
28+
.hero p {
29+
font-size: 1.3rem;
3030
margin-bottom: 2rem;
3131
opacity: 0.95;
3232
}
33+
.buttons {
34+
display: flex;
35+
gap: 1rem;
36+
justify-content: center;
37+
flex-wrap: wrap;
38+
}
3339
.button {
3440
display: inline-block;
35-
padding: 12px 24px;
41+
padding: 12px 28px;
3642
background: white;
3743
color: #667eea;
3844
text-decoration: none;
3945
border-radius: 6px;
4046
font-weight: 600;
41-
transition: transform 0.2s;
47+
transition: transform 0.2s, box-shadow 0.2s;
4248
}
4349
.button:hover {
4450
transform: translateY(-2px);
51+
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
52+
}
53+
.button.secondary {
54+
background: transparent;
55+
border: 2px solid white;
56+
color: white;
57+
}
58+
.container {
59+
max-width: 1200px;
60+
margin: 0 auto;
61+
padding: 3rem 2rem;
62+
}
63+
.features {
64+
display: grid;
65+
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
66+
gap: 2rem;
67+
margin: 3rem 0;
68+
}
69+
.feature {
70+
padding: 2rem;
71+
background: #f8f9fa;
72+
border-radius: 8px;
73+
}
74+
.feature h3 {
75+
color: #667eea;
76+
margin-bottom: 1rem;
77+
font-size: 1.3rem;
78+
}
79+
.links {
80+
margin-top: 3rem;
81+
padding-top: 3rem;
82+
border-top: 1px solid #e1e4e8;
83+
}
84+
.links h2 {
85+
margin-bottom: 1.5rem;
86+
color: #667eea;
87+
}
88+
.link-grid {
89+
display: grid;
90+
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
91+
gap: 1.5rem;
4592
}
46-
.spinner {
47-
margin-top: 2rem;
48-
opacity: 0.7;
93+
.link-card {
94+
padding: 1.5rem;
95+
background: white;
96+
border: 1px solid #e1e4e8;
97+
border-radius: 6px;
98+
text-decoration: none;
99+
color: inherit;
100+
transition: border-color 0.2s, box-shadow 0.2s;
101+
}
102+
.link-card:hover {
103+
border-color: #667eea;
104+
box-shadow: 0 2px 8px rgba(102, 126, 234, 0.1);
105+
}
106+
.link-card h4 {
107+
color: #667eea;
108+
margin-bottom: 0.5rem;
109+
}
110+
footer {
111+
background: #24292e;
112+
color: white;
113+
text-align: center;
114+
padding: 2rem;
115+
margin-top: 4rem;
116+
}
117+
footer a {
118+
color: #667eea;
119+
text-decoration: none;
49120
}
50121
</style>
51122
</head>
52123
<body>
53-
<div class="container">
124+
<div class="hero">
54125
<h1>🎮 On-Body Haptics</h1>
55126
<p>Open-source wearable haptic feedback systems for spatial audio, VR/AR, and interactive installations</p>
56-
<p>Redirecting to the project repository...</p>
57-
<a href="https://github.com/MissCrispenCakes/On-body-haptics" class="button">View Project on GitHub</a>
58-
<div class="spinner">⚡</div>
127+
<div class="buttons">
128+
<a href="https://github.com/MissCrispenCakes/On-body-haptics" class="button" target="_blank">View on GitHub</a>
129+
<a href="https://github.com/MissCrispenCakes/On-body-haptics#-quick-start" class="button secondary" target="_blank">Quick Start Guide</a>
130+
</div>
131+
</div>
132+
133+
<div class="container">
134+
<div class="features">
135+
<div class="feature">
136+
<h3>🔧 Two Complete Implementations</h3>
137+
<p>Arduino + Bluetooth for portable systems, or Raspberry Pi + I2C for high-fidelity effects with 120+ haptic patterns</p>
138+
</div>
139+
<div class="feature">
140+
<h3>🎯 OSC Protocol Integration</h3>
141+
<p>Works seamlessly with Max/MSP, TouchDesigner, Unity, Pure Data, and any OSC-compatible software</p>
142+
</div>
143+
<div class="feature">
144+
<h3>⚡ Open Hardware</h3>
145+
<p>Complete PCB designs, Gerber files, 3D-printable enclosures, and Bill of Materials included</p>
146+
</div>
147+
<div class="feature">
148+
<h3>📚 Comprehensive Docs</h3>
149+
<p>15-minute quick start guides, API references, and integration examples for popular platforms</p>
150+
</div>
151+
<div class="feature">
152+
<h3>💰 Low Cost</h3>
153+
<p>Build an Arduino system for ~$30 or a Raspberry Pi system for ~$150</p>
154+
</div>
155+
<div class="feature">
156+
<h3>🎨 Production Ready</h3>
157+
<p>Used in VR experiences, art installations, research projects, and interactive exhibits</p>
158+
</div>
159+
</div>
160+
161+
<div class="links">
162+
<h2>📖 Documentation</h2>
163+
<div class="link-grid">
164+
<a href="docs/getting-started/choosing-platform.html" class="link-card">
165+
<h4>🤔 Choosing a Platform</h4>
166+
<p>Arduino vs Raspberry Pi comparison guide</p>
167+
</a>
168+
<a href="docs/getting-started/arduino-quickstart.html" class="link-card">
169+
<h4>⚡ Arduino Quick Start</h4>
170+
<p>15-minute setup for portable systems</p>
171+
</a>
172+
<a href="docs/getting-started/raspberry-pi-quickstart.html" class="link-card">
173+
<h4>🥧 Raspberry Pi Quick Start</h4>
174+
<p>15-minute setup for high-fidelity effects</p>
175+
</a>
176+
<a href="docs/api/osc-protocol.html" class="link-card">
177+
<h4>📡 OSC Protocol</h4>
178+
<p>Complete API specification and examples</p>
179+
</a>
180+
<a href="docs/hardware/assembly-guide.html" class="link-card">
181+
<h4>🔨 Hardware Assembly</h4>
182+
<p>Step-by-step build instructions</p>
183+
</a>
184+
<a href="docs/hardware/pcb-fabrication.html" class="link-card">
185+
<h4>⚙️ PCB Fabrication</h4>
186+
<p>How to order custom PCBs</p>
187+
</a>
188+
</div>
189+
</div>
190+
191+
<div class="links">
192+
<h2>💡 Use Cases</h2>
193+
<p>Perfect for spatial audio feedback, VR/AR navigation, interactive installations, accessibility applications, research projects, gaming, and telepresence.</p>
194+
</div>
59195
</div>
196+
197+
<footer>
198+
<p>Built with ❤️ for the haptics and HCI community</p>
199+
<p>
200+
<a href="https://github.com/MissCrispenCakes/On-body-haptics" target="_blank">GitHub</a> •
201+
<a href="https://github.com/sponsors/KDF-dev" target="_blank">Sponsor</a> •
202+
<a href="https://github.com/MissCrispenCakes/On-body-haptics/blob/main/LICENSE" target="_blank">MIT License</a>
203+
</p>
204+
<p style="margin-top: 1rem; opacity: 0.7; font-size: 0.9rem;">
205+
Part of <a href="https://www.kdfentertainment.com" target="_blank">KDF Entertainment</a> open source tools
206+
</p>
207+
</footer>
60208
</body>
61209
</html>

0 commit comments

Comments
 (0)