-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
371 lines (371 loc) · 16.2 KB
/
index.html
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
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
<!DOCTYPE html>
<html lang="en">
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<head>
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700" rel="stylesheet">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>ProjectRun app</title>
<meta name="description" content="Run! Track! Enjoy!">
<link rel="shortcut icon" href="img/app-favicon.png" type="image/x-icon">
<link rel="icon" href="img/app-favicon.png" type="image/x-icon">
<!-- Twitter meta tags -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="https://projectrun.app">
<meta name="twitter:creator" content="BoolFalse">
<meta name="twitter:title" content="ProjectRun">
<meta name="twitter:description" content="Run! Track! Enjoy!">
<meta name="twitter:image" content="img/thumbnail.jpg">
<!-- Facebook meta tags -->
<meta property="og:url" content="https://projectrun.app">
<meta property="og:type" content="website">
<meta property="og:title" content="ProjectRun">
<meta property="og:description" content="Run! Track! Enjoy!">
<meta property="og:image" content="img/thumbnail.jpg">
<meta property="og:locale" content="en_US">
<meta property="og:site_name" content="ProjectRun">
<!-- Telegram meta tags -->
<meta name="telegram:title" content="BoolFalse">
<meta name="telegram:description" content="Run! Track! Enjoy!">
<meta name="telegram:image" content="img/thumbnail.jpg">
<meta name="telegram:url" content="https://projectrun.app">
<meta name="telegram:site" content="https://projectrun.app">
<meta name="telegram:creator" content="BoolFalse">
<!-- Styles -->
<link href="css/plugins.min.css" rel="stylesheet">
<link href="css/main.css" rel="stylesheet">
<script src="https://kit.fontawesome.com/fa1d53fb2d.js" crossorigin="anonymous"></script>
</head>
<body>
<!--nav start-->
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
<img src="img/logo-64x64-round.png" data-at2x="img/logo-64x64-round.png" alt="ProjectRun" width="50">
</a>
</div>
<div class="collapse navbar-collapse" id="bs-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li><a href="#home">Home</a></li>
<li><a href="#features">Features</a></li>
<li><a href="#video">Video</a></li>
<li><a href="#screenshots">Screenshots</a></li>
<li>
<a href="https://expo.dev/artifacts/eas/wRpYsDq2NmWkkyHxr7FqFy.apk"
title="Development version"
class="btn btn-default">
Download <i class="fa-solid fa-cloud-arrow-down"></i>
</a>
</li>
</ul>
</div>
</div>
</nav>
<!--nav end-->
<!--main start-->
<section class="main" data-0="background-position:0px 0px;" data-500="background-position:0px -250px;" id="home">
<div class="overlay" data-0="background-position:0px 0px;" data-500="background-position:0px -250px;"></div>
<div class="container">
<div class="row">
<div class="col-md-6">
<!--logo-->
<div class="logo">
<a href="#" class="logo-link">
<img class="logo-default" src="img/app-logo.png" data-at2x="img/app-logo.png" alt="logo" width="64" />
<img class="logo-hover" src="img/logo-64x64-round.png" data-at2x="img/logo-64x64-round.png" alt="logo" width="64" />
</a>
</div>
<!--logo end-->
</div>
<div class="col-md-6">
<!--social-->
<div class="social text-center">
<ul>
<li>
<a href="https://twitter.com/projectrunapp" class="social-btn social-btn-twitter" target="_blank">
<i class="fa-brands fa-x-twitter"></i>
</a>
</li>
<li>
<a href="https://www.linkedin.com/company/projectrunapp" class="social-btn social-btn-linkedin" target="_blank">
<i class="fa-brands fa-linkedin-in"></i>
</a>
</li>
<li>
<a href="https://instagram.com/projectrunapp" class="social-btn social-btn-instagram" target="_blank">
<i class="fa-brands fa-instagram"></i>
</a>
</li>
<li>
<a href="https://www.facebook.com/projectrunapp" class="social-btn social-btn-facebook" target="_blank">
<i class="fa-brands fa-facebook-f"></i>
</a>
</li>
<li>
<a href="https://www.tiktok.com/@projectrunapp" class="social-btn social-btn-tiktok" target="_blank">
<i class="fa-brands fa-tiktok"></i>
</a>
</li>
<li>
<a href="https://t.me/projectrunapp" class="social-btn social-btn-telegram" target="_blank">
<i class="fa-brands fa-telegram"></i>
</a>
</li>
</ul>
</div>
<!--social end-->
</div>
</div>
<div class="row">
<div class="col-md-6 col-md-offset-1">
<!--welcome-message-->
<header class="welcome-message">
<h1>
<span>ProjectRun</span>
<br />
Run! Track! Enjoy!
</h1>
<h2>A mobile app that helps you to track your running activity and share it with your friends.</h2>
<h2>Be ready to run. We'll come soon.</h2>
</header>
<div class="action-btn">
<a href="https://expo.dev/artifacts/eas/wRpYsDq2NmWkkyHxr7FqFy.apk"
title="Development version"
class="btn btn-default">
Download <i class="fa-solid fa-cloud-arrow-down"></i>
</a>
</div>
<!--welcome-message end-->
</div>
<div class="col-md-5">
<img src="img/screen-hero.png" alt="" class="wow fadeInRight hero-img" data-no-retina>
</div>
</div>
</div>
</section>
<!--main end-->
<!--advantages start-->
<section class="advantages section-spacing text-center" id="advantages">
<div class="container">
<header class="text-center">
<h2>ProjectRun Advantages</h2>
<h3>Advantages, that make ProjectRun app awesome</h3>
</header>
<div class="row">
<div class="col-sm-4"> <img src="img/advantage-run.png" data-at2x="img/advantage-run.png" alt="advantages" class="wow fadeInLeft">
<h4>Running</h4>
<p>We try to motivate you in following a healthy lifestyle and sports activities.</p>
</div>
<div class="col-sm-4"> <img src="img/advantage-track.png" data-at2x="img/advantage-track.png" alt="advantages" class="wow bounce">
<h4>Tracking</h4>
<p>We help you to track your running activity and share it with your friends.</p>
</div>
<div class="col-sm-4"> <img src="img/advantage-enjoy.png" data-at2x="img/advantage-enjoy.png" alt="advantages" class="wow fadeInRight">
<h4>Enjoying</h4>
<p>We care about your comfort and try to make your running activity more enjoyable.</p>
</div>
</div>
</div>
</section>
<!--advantages end-->
<!--features start-->
<section class="features section-spacing" id="features">
<div class="container">
<header class="text-center">
<h2>ProjectRun Features</h2>
<h3>Features that you will like</h3>
</header>
<div class="row">
<div class="col-md-6 text-center">
<img src="img/screen-graphics.png" width="300" height="533" alt="feature" class="wow fadeInLeft" data-no-retina data-wow-offset="250">
</div>
<div class="col-md-6">
<article>
<h4>Graphical representation</h4>
<p>We provide you with a graphical representation of your running activity, so you can see track and analyze your progress.</p>
</article>
</div>
</div>
<div class="row">
<div class="col-md-6 col-md-push-6 text-center">
<img src="img/screen-friends.png" width="300" height="533" alt="feature" class="wow fadeInRight" data-no-retina data-wow-offset="250">
</div>
<div class="col-md-6 col-md-pull-6">
<article>
<h4>Connect with friends</h4>
<p>Connect with your friends and share your running activity with them. You can also see their activity and motivate each other.</p>
</article>
</div>
</div>
<div class="row">
<div class="col-md-6 text-center">
<img src="img/screen-path-2.png" width="300" height="533" alt="feature" class="wow fadeInLeft" data-no-retina data-wow-offset="250">
</div>
<div class="col-md-6">
<article>
<h4>Path tracking</h4>
<p>Track your path and see it on the map. You can also see your friends' paths and compare them with yours.</p>
</article>
</div>
</div>
</div>
</section>
<!--features end-->
<!--video start-->
<section class="video section-spacing text-center" id="video">
<div class="container">
<header class="text-center">
<h2>ProjectRun mobile app wireframe animation video</h2>
<h3>In this video you can imagine how our app will look like, and how it will basically work.</h3>
</header>
<div class="row">
<div class="col-md-10 center-block">
<div class="embed-responsive embed-responsive-16by9">
<iframe width="560" height="315"
class="embed-responsive-item"
src="https://www.youtube.com/embed/ho1Nbal3z6s?si=qdTyJuaP4BVMq8c3"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen></iframe>
</div>
</div>
</div>
</div>
</section>
<!--video end-->
<!--app screenshot start-->
<section class="screenshot section-spacing text-center" id="screenshots">
<div class="container">
<header class="text-center">
<h2>App Screenshots</h2>
<h3>Preview some of the app screenshots</h3>
</header>
<div class="row">
<div class="col-md-12">
<div class="screenshot-slider">
<div class="item"><img src="img/screen-register.png" data-at2x="img/screen-register.png" alt="Register"></div>
<div class="item"><img src="img/screen-login.png" data-at2x="img/screen-login.png" alt="Login"></div>
<div class="item"><img src="img/screen-friends.png" data-at2x="img/screen-friends.png" alt="Friendship"></div>
<div class="item"><img src="img/screen-path-2.png" data-at2x="img/screen-path-2.png" alt="Path (v2)"></div>
<div class="item"><img src="img/screen-search.png" data-at2x="img/screen-search.png" alt="Search"></div>
<div class="item"><img src="img/screen-map.png" data-at2x="img/screen-map.png" alt="Map"></div>
<div class="item"><img src="img/screen-graphics.png" data-at2x="img/screen-graphics.png" alt="Graphics"></div>
<div class="item"><img src="img/screen-profile.png" data-at2x="img/screen-profile.png" alt="Profile"></div>
<div class="item"><img src="img/screen-path-1.png" data-at2x="img/screen-path-1.png" alt="Path (v1)"></div>
</div>
</div>
</div>
</div>
</section>
<!--app screenshot end-->
<!--footer start-->
<footer class="site-footer section-spacing">
<div class="container">
<div class="row">
<div class="col-md-12 text-center">
<p class="scroll-top">
<a href="#" title="Scroll to top">
<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><path d="M233.4 105.4c12.5-12.5 32.8-12.5 45.3 0l192 192c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L256 173.3 86.6 342.6c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l192-192z"/></svg>
</a>
</p>
<!--social-->
<ul class="social">
<li>
<a href="https://twitter.com/projectrunapp" class="social-btn social-btn-twitter" target="_blank">
<i class="fa-brands fa-x-twitter"></i>
</a>
</li>
<li>
<a href="https://www.linkedin.com/company/projectrunapp" class="social-btn social-btn-linkedin" target="_blank">
<i class="fa-brands fa-linkedin-in"></i>
</a>
</li>
<li>
<a href="https://instagram.com/projectrunapp" class="social-btn social-btn-instagram" target="_blank">
<i class="fa-brands fa-instagram"></i>
</a>
</li>
<li>
<a href="https://www.facebook.com/projectrunapp" class="social-btn social-btn-facebook" target="_blank">
<i class="fa-brands fa-facebook-f"></i>
</a>
</li>
<li>
<a href="https://www.tiktok.com/@projectrunapp" class="social-btn social-btn-tiktok" target="_blank">
<i class="fa-brands fa-tiktok"></i>
</a>
</li>
<li>
<a href="https://t.me/projectrunapp" class="social-btn social-btn-telegram" target="_blank">
<i class="fa-brands fa-telegram"></i>
</a>
</li>
</ul>
<!--social end-->
<small>© Copyright ProjectRun. All Rights Reserved.</small>
<p>
<a href="#" data-toggle="modal" data-target="#privacy">Privacy</a> | <a href="#" data-toggle="modal" data-target="#terms">Terms of Use</a>
</p>
<br />
<p>
<span>Made by <a href="https://boolfalse.com" title="Author" target="_blank">BoolFalse</a> with <i class="fa-solid fa-heart fa-beat" style="color: #ce3636;"></i></span> |
<a href="https://www.buymeacoffee.com/boolfalse" title="Support the idea" target="_blank">
<img src="https://www.buymeacoffee.com/assets/img/guidelines/download-assets-sm-1.svg" alt="support image" width="100">
</a>
</p>
<!-- Privacy Modal -->
<div class="modal fade" id="privacy" tabindex="-1" role="dialog" aria-labelledby="myModalLabel-privacy" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
<span aria-hidden="true">×</span><span class="sr-only">Close</span>
</button>
<h4 class="modal-title" id="myModalLabel-privacy">Privacy</h4>
</div>
<div class="modal-body text-left">
<p>We care about your privacy, and we do not share your personal information with third parties.</p>
</div>
</div>
</div>
</div>
<!-- Privacy Modal end -->
<!-- Terms of Use Modal -->
<div class="modal fade" id="terms" tabindex="-1" role="dialog" aria-labelledby="myModalLabel-terms" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
<span aria-hidden="true">×</span><span class="sr-only">Close</span>
</button>
<h4 class="modal-title" id="myModalLabel-terms">Terms of Use</h4>
</div>
<div class="modal-body text-left">
<p>By using our app you agree to our terms of use.</p>
</div>
</div>
</div>
</div>
<!-- Terms of Use Modal end -->
</div>
</div>
</div>
</footer>
<!--footer end-->
<!--preload start-->
<div id="preloader">
<div id="status"></div>
</div>
<!--preload end-->
<script src="js/plugins.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>