Skip to content

Commit 5d77a94

Browse files
bytesAIrenbytesAIren
committed
Add GitHub Pages demo and refresh README assets
1 parent 2cac1f0 commit 5d77a94

4 files changed

Lines changed: 292 additions & 31 deletions

File tree

‎README.md‎

Lines changed: 14 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -77,16 +77,18 @@ The project is organized around a simple but effective agent-inspired architectu
7777

7878
```text
7979
ATLAS-Adaptive_Teammate_Leading_At_Success/
80+
├── index.html # GitHub Pages landing page for the live demo
8081
├── src/
8182
│ ├── api.py
8283
│ ├── runtime_bootstrap.py
8384
│ ├── database/
8485
│ ├── graph/
8586
│ └── schemas/
8687
├── static/
87-
│ ├── index.html
88+
│ ├── index.html # interactive frontend app shell
8889
│ ├── css/
8990
│ └── js/
91+
├── media_gallery/ # screenshots, cover image, and presentation video
9092
├── scratch/
9193
├── requirements.txt
9294
└── run_api.py
@@ -118,6 +120,10 @@ ATLAS-Adaptive_Teammate_Leading_At_Success/
118120
4. The planning layer determines what is appropriate for the current session.
119121
5. A workout plan is generated and returned to the user in a structured format.
120122

123+
## Live Demo
124+
125+
A lightweight landing page for a GitHub Pages deployment is available at [index.html](index.html). It provides a simple overview of the project and a direct entry point to the interactive demo experience.
126+
121127
## Setup Instructions
122128

123129
### Prerequisites
@@ -169,13 +175,14 @@ Possible next steps include:
169175

170176
## Kaggle submission assets
171177

172-
To keep the Kaggle submission organized, the project now includes dedicated folders for the required public assets:
173-
174-
- Media Gallery: [media_gallery](ATLAS-Adaptive_Teammate_Leading_At_Success/media_gallery/) — add screenshots, architecture diagrams, and the final cover image here.
175-
- Public Video: [videos](ATLAS-Adaptive_Teammate_Leading_At_Success/videos/) — upload the final 5-minute public video here. Once the video is published on YouTube, replace the placeholder link in the Kaggle writeup.
176-
- Attached Project Link: [public_site](ATLAS-Adaptive_Teammate_Leading_At_Success/public_site/) — use this folder for the public demo bundle or deployment artifacts. Later, add the final public URL here (GitHub Pages, Google Cloud, or another hosting option).
178+
To keep the Kaggle submission organized, the project includes a dedicated folder for the required public assets:
177179

178-
These folders are meant to be placeholders for now and will be filled in before the final submission.
180+
- Media Gallery: [media_gallery](media_gallery/) — includes screenshots of the app flow, the project cover image, and the presentation video.
181+
- [media_gallery/atlas-cover.png](media_gallery/atlas-cover.png)
182+
- [media_gallery/Screenshot 2026-06-25 221313.png](media_gallery/Screenshot%202026-06-25%20221313.png)
183+
- [media_gallery/Screenshot 2026-06-25 221458.png](media_gallery/Screenshot%202026-06-25%20221458.png)
184+
- [media_gallery/Screenshot 2026-06-25 221746.png](media_gallery/Screenshot%202026-06-25%20221746.png)
185+
- [media_gallery/ATLAS__Agentic_Fitness.mp4](media_gallery/ATLAS__Agentic_Fitness.mp4)
179186

180187
## Conclusion
181188

‎index.html‎

Lines changed: 178 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,178 @@
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+
<meta name="description" content="ATLAS live demo for GitHub Pages — a safe, adaptive AI coaching experience for home workouts." />
7+
<title>ATLAS Live Demo</title>
8+
<style>
9+
:root {
10+
color-scheme: dark;
11+
--bg: #06111d;
12+
--panel: #0f2135;
13+
--panel-2: #122c44;
14+
--text: #f3f7ff;
15+
--muted: #8ea0b8;
16+
--accent: #4dd0ff;
17+
--accent-2: #7b8cff;
18+
--good: #52d8a8;
19+
}
20+
21+
* { box-sizing: border-box; }
22+
body {
23+
margin: 0;
24+
font-family: Inter, "Segoe UI", Roboto, Arial, sans-serif;
25+
background: radial-gradient(circle at top, #15304c 0%, var(--bg) 50%, #03070c 100%);
26+
color: var(--text);
27+
line-height: 1.6;
28+
}
29+
30+
a { color: inherit; }
31+
.wrap { max-width: 1120px; margin: 0 auto; padding: 24px; }
32+
.hero {
33+
display: grid;
34+
grid-template-columns: 1.2fr 0.8fr;
35+
gap: 24px;
36+
align-items: center;
37+
padding: 42px 0 32px;
38+
}
39+
.badge {
40+
display: inline-block;
41+
border: 1px solid rgba(77,208,255,0.35);
42+
background: rgba(77,208,255,0.12);
43+
color: var(--accent);
44+
padding: 8px 12px;
45+
border-radius: 999px;
46+
font-size: 0.8rem;
47+
letter-spacing: 0.2em;
48+
text-transform: uppercase;
49+
margin-bottom: 12px;
50+
}
51+
h1 { font-size: clamp(2rem, 3.2vw, 3.2rem); margin: 0 0 12px; line-height: 1.1; }
52+
.lead { font-size: 1.05rem; color: var(--muted); max-width: 700px; }
53+
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
54+
.btn {
55+
display: inline-flex;
56+
align-items: center;
57+
justify-content: center;
58+
padding: 12px 18px;
59+
border-radius: 999px;
60+
text-decoration: none;
61+
font-weight: 700;
62+
border: 1px solid transparent;
63+
transition: transform 150ms ease, opacity 150ms ease;
64+
}
65+
.btn:hover { transform: translateY(-1px); }
66+
.btn-primary { background: linear-gradient(90deg, var(--accent), var(--accent-2)); color: #031018; }
67+
.btn-secondary { border-color: rgba(255,255,255,0.16); background: rgba(255,255,255,0.05); }
68+
69+
.card {
70+
background: rgba(15, 33, 53, 0.92);
71+
border: 1px solid rgba(255,255,255,0.1);
72+
border-radius: 20px;
73+
padding: 22px;
74+
box-shadow: 0 20px 50px rgba(0,0,0,0.2);
75+
}
76+
.card h2 { margin-top: 0; }
77+
.feature-grid {
78+
display: grid;
79+
grid-template-columns: repeat(3, minmax(0, 1fr));
80+
gap: 16px;
81+
margin-top: 18px;
82+
}
83+
.feature {
84+
background: var(--panel-2);
85+
border: 1px solid rgba(255,255,255,0.08);
86+
border-radius: 16px;
87+
padding: 16px;
88+
}
89+
.feature h3 { margin: 0 0 8px; font-size: 1rem; }
90+
.feature p { margin: 0; color: var(--muted); font-size: 0.95rem; }
91+
.steps {
92+
display: grid;
93+
grid-template-columns: repeat(3, minmax(0, 1fr));
94+
gap: 14px;
95+
margin-top: 18px;
96+
}
97+
.step {
98+
background: rgba(255,255,255,0.04);
99+
border-radius: 14px;
100+
padding: 14px;
101+
border: 1px solid rgba(255,255,255,0.08);
102+
}
103+
.step strong { display: block; margin-bottom: 6px; color: var(--accent); }
104+
.meta {
105+
display: flex;
106+
flex-wrap: wrap;
107+
gap: 10px;
108+
color: var(--muted);
109+
font-size: 0.95rem;
110+
margin-top: 16px;
111+
}
112+
113+
@media (max-width: 860px) {
114+
.hero, .feature-grid, .steps { grid-template-columns: 1fr; }
115+
}
116+
</style>
117+
</head>
118+
<body>
119+
<main class="wrap">
120+
<section class="hero">
121+
<div>
122+
<div class="badge">GitHub Pages demo</div>
123+
<h1>ATLAS is ready for a live preview.</h1>
124+
<p class="lead">
125+
This project turns a home-workout idea into a safety-aware coaching experience. The published demo showcases the onboarding flow, session planning logic, and the final workout plan in a lightweight, browser-based experience.
126+
</p>
127+
<div class="actions">
128+
<a class="btn btn-primary" href="./static/index.html">Open the interactive demo</a>
129+
<a class="btn btn-secondary" href="https://github.com/bytesAIren/ATLAS-Adaptive-Teammate-Leading-At-Success">View source</a>
130+
</div>
131+
<div class="meta">
132+
<span>Static GitHub Pages compatible</span>
133+
<span>•</span>
134+
<span>Demo mode available without the Python backend</span>
135+
<span>•</span>
136+
<span>Safe, conservative planning rules</span>
137+
</div>
138+
</div>
139+
140+
<div class="card">
141+
<h2>What the demo includes</h2>
142+
<div class="feature-grid">
143+
<div class="feature">
144+
<h3>Onboarding</h3>
145+
<p>Captures profile details, equipment, and goals in a structured flow.</p>
146+
</div>
147+
<div class="feature">
148+
<h3>Session planning</h3>
149+
<p>Applies time, injury, and equipment constraints to create a practical plan.</p>
150+
</div>
151+
<div class="feature">
152+
<h3>Safety logic</h3>
153+
<p>Uses conservative defaults so the experience remains usable and responsible.</p>
154+
</div>
155+
</div>
156+
</div>
157+
</section>
158+
159+
<section class="card">
160+
<h2>Demo flow</h2>
161+
<div class="steps">
162+
<div class="step">
163+
<strong>01. Register</strong>
164+
Enter basic profile details and select your training direction.
165+
</div>
166+
<div class="step">
167+
<strong>02. Configure</strong>
168+
Add available time, energy level, and injury notes for the session.
169+
</div>
170+
<div class="step">
171+
<strong>03. Review plan</strong>
172+
See a tailored workout structure and the key coaching cues.</n>
173+
</div>
174+
</div>
175+
</section>
176+
</main>
177+
</body>
178+
</html>

‎static/index.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
<link rel="preconnect" href="https://fonts.googleapis.com">
99
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
1010
<link href="https://fonts.googleapis.com/css2?family=DM+Mono:wght@300;400;500&family=Space+Grotesk:wght@400;600;700&display=swap" rel="stylesheet">
11-
<link rel="stylesheet" href="/static/css/style.css">
11+
<link rel="stylesheet" href="./css/style.css">
1212
</head>
1313
<body>
1414

@@ -173,6 +173,6 @@ <h1 id="workout-title">OPERATION PLAN</h1>
173173
</div>
174174
</section>
175175

176-
<script src="/static/js/app.js"></script>
176+
<script src="./js/app.js"></script>
177177
</body>
178178
</html>

0 commit comments

Comments
 (0)