Skip to content

Commit 4859e6e

Browse files
andrewjongopenhands-agent
andrewjong
and
openhands-agent
authored
Enhance homepage with custom HTML template (#214)
* Enhance homepage with custom HTML template and modern styling * Add full-screen splash media background to homepage * Update splash background * fix: improve homepage styling - fix text visibility and layout --------- Co-authored-by: openhands <[email protected]>
1 parent c255c58 commit 4859e6e

File tree

6 files changed

+100793
-18
lines changed

6 files changed

+100793
-18
lines changed

‎docs/README.md

Lines changed: 7 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,7 @@
1-
# AirStack Boilerplate
2-
3-
Welcome to the AirStack Boilerplate! This repository template serves to kickstart the development of your own robotics autonomy stack. You're encouraged to customize your version in any way to best suit your project's needs.
4-
5-
This boilerplate is maintained by the [AirLab](https://theairlab.org) at Carnegie Mellon University's Robotics Institute.
6-
7-
Please head to our [Getting Started](getting_started.md) page to start.
8-
9-
10-
11-
12-
![Overview](overview.png)
13-
*AirStack*
14-
15-
1+
---
2+
template: home.html
3+
title: Home
4+
hide:
5+
- navigation
6+
- toc
7+
---

‎docs/assets/media/splash-background.gif

36 MB
Loading

‎docs/overrides/home.html

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
{% extends "main.html" %}
2+
3+
{% block tabs %}
4+
{{ super() }}
5+
6+
<!-- Hero section with background media -->
7+
<section class="splash-container">
8+
<!-- Background media -->
9+
<div class="splash-background">
10+
<div class="media-overlay"></div>
11+
<div class="media-container">
12+
<img src="assets/media/splash-background.gif" alt="Background Animation" class="splash-media">
13+
</div>
14+
</div>
15+
16+
<!-- Hero content -->
17+
<div class="md-grid md-typeset">
18+
<div class="mdx-hero">
19+
<div class="mdx-hero__content">
20+
<h1>Welcome to AirStack</h1>
21+
<p>A comprehensive robotics autonomy stack boilerplate for accelerating your robotics development</p>
22+
<a href="{{ 'docs/getting_started/' | url }}" class="md-button md-button--primary">
23+
Get Started
24+
</a>
25+
<a href="{{ config.repo_url }}" class="md-button">
26+
View on GitHub
27+
</a>
28+
</div>
29+
</div>
30+
</div>
31+
</section>
32+
{% endblock %}
33+
34+
{% block content %}
35+
<div class="md-content md-grid" data-md-component="content">
36+
<div class="md-content__inner">
37+
<!-- What is AirStack section -->
38+
<section class="mdx-container">
39+
<div class="md-grid md-typeset">
40+
<div class="what-is-section">
41+
<h2>What is AirStack?</h2>
42+
<p>
43+
AirStack is a powerful robotics development boilerplate maintained by the
44+
<a href="https://theairlab.org" target="_blank">AirLab</a> at Carnegie Mellon University's
45+
Robotics Institute. It provides a structured foundation for building advanced robotics
46+
applications with:
47+
</p>
48+
<ul class="feature-list">
49+
<li>🤖 <strong>Complete Autonomy Stack</strong> - From sensors to behavior planning</li>
50+
<li>🔧 <strong>Modular Architecture</strong> - Easy to customize and extend</li>
51+
<li>🚀 <strong>Development Tools</strong> - Docker support, VSCode integration, and testing frameworks</li>
52+
<li>📊 <strong>Ground Control Station</strong> - Built-in monitoring and control interface</li>
53+
<li>🎮 <strong>Simulation Ready</strong> - Integrated with Isaac Sim</li>
54+
<li>🔄 <strong>CI/CD Pipeline</strong> - Automated testing and deployment</li>
55+
</ul>
56+
</div>
57+
</div>
58+
</section>
59+
60+
<!-- Feature Cards section -->
61+
<section class="mdx-container">
62+
<div class="md-grid md-typeset">
63+
<h2>Key Features</h2>
64+
<div class="feature-grid">
65+
<div class="feature-card">
66+
<div class="feature-icon">🎯</div>
67+
<h3>Autonomy Modules</h3>
68+
<p>Complete suite of autonomy components including perception, planning, and control systems.</p>
69+
</div>
70+
<div class="feature-card">
71+
<div class="feature-icon">🌐</div>
72+
<h3>Ground Control</h3>
73+
<p>Built-in ground control station for robot monitoring and control, with multi-robot support.</p>
74+
</div>
75+
<div class="feature-card">
76+
<div class="feature-icon">🎲</div>
77+
<h3>Simulation</h3>
78+
<p>Integrated simulation environment with Isaac Sim for testing and development.</p>
79+
</div>
80+
<div class="feature-card">
81+
<div class="feature-icon">🛠️</div>
82+
<h3>Development Tools</h3>
83+
<p>Comprehensive development environment with Docker, VSCode, and testing frameworks.</p>
84+
</div>
85+
</div>
86+
</div>
87+
</section>
88+
89+
<!-- Architecture Overview section -->
90+
<section class="mdx-container">
91+
<div class="md-grid md-typeset">
92+
<div class="architecture-section">
93+
<img src="overview.png" alt="AirStack Architecture Overview" class="architecture-image">
94+
<p class="image-caption">AirStack Architecture Overview</p>
95+
</div>
96+
</div>
97+
</section>
98+
</div>
99+
</div>
100+
{% endblock %}

‎docs/stylesheets/extra.css

Lines changed: 232 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,237 @@
22
--md-primary-fg-color: #EE0F0F;
33
--md-primary-fg-color--light: #ECB7B7;
44
--md-primary-fg-color--dark: #90030C;
5-
}
5+
}
66

7-
[data-md-color-scheme="slate"] {
7+
[data-md-color-scheme="slate"] {
88
--md-hue: 210;
9-
}
9+
}
10+
11+
/* Ensure navigation tabs are above splash content */
12+
.md-tabs {
13+
position: relative;
14+
z-index: 10;
15+
}
16+
17+
/* Splash container and background */
18+
.splash-container {
19+
position: relative;
20+
width: 100%;
21+
height: calc(100vh - 98px); /* Subtract header height to prevent overlap */
22+
min-height: 600px;
23+
overflow: hidden;
24+
margin-top: 0; /* Remove negative margin */
25+
padding-top: 1rem; /* Add some padding from the navigation */
26+
}
27+
28+
.splash-background {
29+
position: absolute;
30+
top: 0;
31+
left: 0;
32+
width: 100%;
33+
height: 100%;
34+
z-index: 1;
35+
}
36+
37+
.media-overlay {
38+
position: absolute;
39+
top: 0;
40+
left: 0;
41+
width: 100%;
42+
height: 100%;
43+
background: rgba(0, 0, 0, 0.5); /* Darkens the background media */
44+
z-index: 2;
45+
}
46+
47+
.media-container {
48+
position: absolute;
49+
top: 0;
50+
left: 0;
51+
width: 100%;
52+
height: 100%;
53+
z-index: 1;
54+
}
55+
56+
.splash-media {
57+
width: 100%;
58+
height: 100%;
59+
object-fit: cover;
60+
}
61+
62+
/* Hero section */
63+
.mdx-container {
64+
padding: 1rem;
65+
margin: 0 auto;
66+
}
67+
68+
.mdx-hero {
69+
position: relative;
70+
z-index: 3;
71+
margin: 0;
72+
height: 100%;
73+
display: flex;
74+
align-items: center;
75+
justify-content: center;
76+
text-align: center;
77+
color: white;
78+
padding-top: 5rem; /* Add padding to push content down */
79+
}
80+
81+
.mdx-hero h1 {
82+
font-size: 3.5rem;
83+
font-weight: 700;
84+
margin-bottom: 1rem;
85+
line-height: 1.15;
86+
color: #ffffff;
87+
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
88+
}
89+
90+
.mdx-hero p {
91+
font-size: 1.4rem;
92+
font-weight: 300;
93+
margin-bottom: 2rem;
94+
color: #ffffff;
95+
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
96+
max-width: 35rem;
97+
margin-left: auto;
98+
margin-right: auto;
99+
}
100+
101+
.mdx-hero .md-button {
102+
margin: 0.5rem;
103+
font-size: 1rem;
104+
padding: 0.625em 2em;
105+
}
106+
107+
.mdx-hero .md-button--primary {
108+
background-color: var(--md-primary-fg-color);
109+
border-color: var(--md-primary-fg-color);
110+
color: var(--md-primary-bg-color);
111+
}
112+
113+
/* What is section */
114+
.what-is-section {
115+
margin: 4rem 0;
116+
}
117+
118+
.what-is-section h2 {
119+
font-size: 2.5rem;
120+
font-weight: 600;
121+
margin-bottom: 1.5rem;
122+
color: var(--md-default-fg-color);
123+
}
124+
125+
.what-is-section p {
126+
font-size: 1.1rem;
127+
line-height: 1.6;
128+
margin-bottom: 1.5rem;
129+
}
130+
131+
.feature-list {
132+
list-style: none;
133+
padding: 0;
134+
margin: 2rem 0;
135+
}
136+
137+
.feature-list li {
138+
font-size: 1.1rem;
139+
margin-bottom: 1rem;
140+
padding-left: 1.5rem;
141+
position: relative;
142+
}
143+
144+
.feature-list li strong {
145+
color: var(--md-primary-fg-color);
146+
}
147+
148+
/* Feature grid */
149+
.feature-grid {
150+
display: grid;
151+
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Increased minimum width */
152+
gap: 2rem;
153+
margin: 2rem 0 4rem;
154+
}
155+
156+
.feature-card {
157+
background-color: var(--md-default-bg-color);
158+
border: 1px solid var(--md-default-fg-color--lightest);
159+
border-radius: 8px;
160+
padding: 2rem;
161+
transition: all 0.3s ease;
162+
text-align: center;
163+
}
164+
165+
.feature-card:hover {
166+
transform: translateY(-5px);
167+
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
168+
}
169+
170+
.feature-icon {
171+
font-size: 2.5rem;
172+
margin-bottom: 1rem;
173+
}
174+
175+
.feature-card h3 {
176+
font-size: 1.5rem;
177+
font-weight: 600;
178+
margin: 1rem 0;
179+
color: var(--md-primary-fg-color);
180+
white-space: nowrap; /* Prevent text wrapping */
181+
}
182+
183+
.feature-card p {
184+
font-size: 1rem;
185+
line-height: 1.5;
186+
color: var(--md-default-fg-color--light);
187+
}
188+
189+
/* Architecture section */
190+
.architecture-section {
191+
margin: 4rem 0;
192+
text-align: center;
193+
}
194+
195+
.architecture-image {
196+
max-width: 100%;
197+
height: auto;
198+
border-radius: 8px;
199+
margin-bottom: 1rem;
200+
}
201+
202+
.image-caption {
203+
font-size: 1rem;
204+
color: var(--md-default-fg-color--light);
205+
}
206+
207+
/* Responsive adjustments */
208+
@media screen and (max-width: 76.1875em) {
209+
.mdx-hero h1 {
210+
font-size: 2.5rem;
211+
}
212+
213+
.mdx-hero p {
214+
font-size: 1.2rem;
215+
}
216+
217+
.what-is-section h2 {
218+
font-size: 2rem;
219+
}
220+
221+
.feature-grid {
222+
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
223+
}
224+
}
225+
226+
@media screen and (max-width: 600px) {
227+
.mdx-hero h1 {
228+
font-size: 2rem;
229+
}
230+
231+
.mdx-hero p {
232+
font-size: 1.1rem;
233+
}
234+
235+
.what-is-section h2 {
236+
font-size: 1.75rem;
237+
}
238+
}

0 commit comments

Comments
 (0)