-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathfeatures.html
More file actions
230 lines (196 loc) · 7.51 KB
/
features.html
File metadata and controls
230 lines (196 loc) · 7.51 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ion workout app - features</title>
<link rel="icon" type="image/x-icon" href="https://avatars.githubusercontent.com/u/194176806?s=200">
<link rel="stylesheet" href="/css/features.css">
<link rel="stylesheet" href="/css/codeblocks.css">
<link rel="stylesheet" href="/css/base.css">
<!-- additional style for toggle visibility -->
<style>
.hidden {
display: none;
}
</style>
</head>
<body>
<header>
<nav>
<ul>
<li><a href="/">home</a></li>
<li><a href="/features.html">features</a></li>
<li><a href="/docs.html">docs</a></li>
<li><a href="https://github.com/ION-WorkoutApp" target="_blank">github</a></li>
</ul>
</nav>
</header>
<main>
<!-- hero section -->
<section id="hero">
<div class="hero-bg"></div>
<div class="hero-overlay"></div>
<div class="hero-content">
<h1>ion workout app features</h1>
<p>powering your fitness journey with open source excellence</p>
</div>
</section>
<section id="features-section">
<h2 class="section-title">key features</h2>
<div class="cards-container">
<div class="feature-card technical hidden">
<div class="feature-icon">📱</div>
<h3>front-end magic</h3>
<p>experience a sleek, engaging user interface built with kotlin for intuitive workout tracking.</p>
</div>
<div class="feature-card technical hidden">
<div class="feature-icon">🖥️</div>
<h3>back-end awesomeness</h3>
<p>harness our robust javascript-powered server that offers self-hosting and scalable performance;
</p>
</div>
<div class="feature-card technical hidden">
<div class="feature-icon">📊</div>
<h3>comprehensive data</h3>
<p>access our dataset of over 25,000 exercises, gathered and transformed from multiple kaggle
sourcea for in-depth exercise insights;</p>
</div>
<!-- default feature -->
<div class="feature-card technical hidden">
<div class="feature-icon">⚙️</div>
<h3>easy installers</h3>
<p>enjoy a hassle-free installation process with dedicated installers for a smooth setup;</p>
</div>
<div class="feature-card technical hidden">
<div class="feature-icon">🌐</div>
<h3>dynamic landing site</h3>
<p>dive into our animated, informative site that brings the ion workout app experience to life;</p>
</div>
<div class="feature-card technical hidden">
<div class="feature-icon">☁️</div>
<h3>hosted back-end option</h3>
<p>opt for our affordable hosted server service starting at just $2/month for ultimate convenience;
</p>
</div>
<div class="feature-card technical hidden">
<div class="feature-icon">🤝</div>
<h3>community & open source</h3>
<p>join a vibrant community of contributors and enjoy continuous updates and innovation;</p>
</div>
<div class="feature-card technical hidden">
<div class="feature-icon">🔄</div>
<h3>data sync</h3>
<p>seamless synchronization between local database and remote sources using repository pattern
architecture;</p>
</div>
<!-- default features -->
<div class="feature-card">
<div class="feature-icon">📴</div>
<h3>offline first</h3>
<p>full functionality available without internet connection using room database for local data
persistence;</p>
</div>
<div class="feature-card">
<div class="feature-icon">⏰</div>
<h3>workout reminders</h3>
<p>get personalized notifications to keep you on track with your fitness goals, leveraging local
scheduling and timely alerts;</p>
</div>
<div class="feature-card">
<div class="feature-icon">📅</div>
<h3>workout history</h3>
<p>detailed tracking of completed workouts with date/time stamps and performance metrics stored in
local database;</p>
</div>
<div class="feature-card">
<div class="feature-icon">📈</div>
<h3>progress analytics</h3>
<p>detailed workout statistics and trends analysis through formatted data presentation using custom
utilities;</p>
</div>
<div class="feature-card">
<div class="feature-icon">🔍</div>
<h3>advanced filtering</h3>
<p>powerful search and filter capabilities for exercises using dao queries and livedata
observations;</p>
</div>
<div class="feature-card">
<div class="feature-icon">🏷️</div>
<h3>exercise tagging</h3>
<p>categorize exercises with multiple tags and filter by muscle group, difficulty, or equipment
requirements;</p>
</div>
<div class="feature-card">
<div class="feature-icon">🖼️</div>
<h3>rich exercise images</h3>
<p>explore a vast collection of exercise photos sourced from our db-images repository;</p>
</div>
<div class="feature-card">
<div class="feature-icon">🎨</div>
<h3>custom exercise creation (coming soon)</h3>
<p>create and personalize exercises with custom names, descriptions, and parameters using our
intuitive interface;</p>
</div>
<div class="feature-card">
<div class="feature-icon">🔄</div>
<h3>live updates</h3>
<p>real-time data binding and ui updates through livedata observers and stateflow implementations;
</p>
</div>
</div>
<button id="toggle-features">show all features</button>
</section>
<!-- github call-to-action section -->
<section id="github-cta">
<h2>join our movement</h2>
<p>explore the source code and contribute to our open source fitness revolution;</p>
<a href="https://github.com/ION-WorkoutApp" class="btn" target="_blank">view on github</a>
</section>
</main>
<footer>
<p>© 2025 ion workoutapp. all rights reserved;</p>
</footer>
<script src="/js/forms.js"></script>
<script type="module">
document.addEventListener('DOMContentLoaded', () => {
// select elements using querySelector
const technicalCards = document.querySelectorAll('.cards-container .feature-card.technical'),
toggleButton = document.querySelector('#toggle-features'),
featureCards = document.querySelectorAll('.cards-container .feature-card');
toggleButton.addEventListener('click', () => {
// toggle hidden class on technical cards
technicalCards.forEach((card) => {
card.classList.toggle('hidden');
});
// replay ripple effect by removing and re-adding the active class
featureCards.forEach((card) => {
card.classList.remove('active');
// force reflow to restart animation
void card.offsetWidth;
card.classList.add('active');
});
// update button text based on technical cards' visibility
const isHidden = technicalCards[0].classList.contains('hidden');
toggleButton.textContent = isHidden ? 'show all features' : 'show essential features';
});
// initial intersection observer to trigger the ripple effect on first appearance
const baseDelay = 200,
observer = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
// apply animation delay and active class to each card
featureCards.forEach((card, index) => {
const delay = (index * 50) + baseDelay;
card.style.animationDelay = `${delay}ms`;
card.classList.add('active');
});
observer.unobserve(document.querySelector('#features-section'));
}
});
}, { threshold: 0.1 });
observer.observe(document.querySelector('#features-section'));
});
</script>
</body>
</html>