1+ <!DOCTYPE html>
2+ < html lang ="en ">
3+
4+ < head >
5+ < meta charset ="UTF-8 " />
6+ < meta name ="viewport " content ="width=device-width, initial-scale=1.0 " />
7+ < meta http-equiv ="X-UA-Compatible " content ="ie=edge " />
8+ < link rel ="shortcut icon " type ="image/png " href ="./icon.png " />
9+
10+ < link href ="https://fonts.googleapis.com/css2?family=Manrope:wght@400;600;700;800&display=swap " rel ="stylesheet " />
11+
12+ < link rel ="
stylesheet "
href ="
https://unpkg.com/[email protected] /dist/leaflet.css "
13+ integrity ="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY= " crossorigin ="" />
14+ < script defer src ="
https://unpkg.com/[email protected] /dist/leaflet.js "
15+ integrity ="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo= " crossorigin =""> </ script >
16+
17+ < link rel ="stylesheet " href ="style.css " />
18+
19+ < script defer src ="script.js "> </ script >
20+ < title > mapty // Map your workouts</ title >
21+ </ head >
22+
23+ < body >
24+ < div class ="sidebar ">
25+ < img src ="./logo.png " alt ="Logo " class ="logo " />
26+
27+ < ul class ="workouts ">
28+ < form class ="form hidden ">
29+ < div class ="form__row ">
30+ < label class ="form__label "> Type</ label >
31+ < select class ="form__input form__input--type ">
32+ < option value ="running "> Running</ option >
33+ < option value ="cycling "> Cycling</ option >
34+ </ select >
35+ </ div >
36+ < div class ="form__row ">
37+ < label class ="form__label "> Distance</ label >
38+ < input class ="form__input form__input--distance " placeholder ="km " />
39+ </ div >
40+ < div class ="form__row ">
41+ < label class ="form__label "> Duration</ label >
42+ < input class ="form__input form__input--duration " placeholder ="min " />
43+ </ div >
44+ < div class ="form__row ">
45+ < label class ="form__label "> Cadence</ label >
46+ < input class ="form__input form__input--cadence " placeholder ="step/min " />
47+ </ div >
48+ < div class ="form__row form__row--hidden ">
49+ < label class ="form__label "> Elev Gain</ label >
50+ < input class ="form__input form__input--elevation " placeholder ="meters " />
51+ </ div >
52+ < button class ="form__btn "> OK</ button >
53+ </ form >
54+
55+ <!-- <li class="workout workout--running" data-id="1234567890">
56+ <h2 class="workout__title">Running on April 14</h2>
57+ <div class="workout__details">
58+ <span class="workout__icon">🏃♂️</span>
59+ <span class="workout__value">5.2</span>
60+ <span class="workout__unit">km</span>
61+ </div>
62+ <div class="workout__details">
63+ <span class="workout__icon">⏱</span>
64+ <span class="workout__value">24</span>
65+ <span class="workout__unit">min</span>
66+ </div>
67+ <div class="workout__details">
68+ <span class="workout__icon">⚡️</span>
69+ <span class="workout__value">4.6</span>
70+ <span class="workout__unit">min/km</span>
71+ </div>
72+ <div class="workout__details">
73+ <span class="workout__icon">🦶🏼</span>
74+ <span class="workout__value">178</span>
75+ <span class="workout__unit">spm</span>
76+ </div>
77+ </li>
78+
79+ <li class="workout workout--cycling" data-id="1234567891">
80+ <h2 class="workout__title">Cycling on April 5</h2>
81+ <div class="workout__details">
82+ <span class="workout__icon">🚴♀️</span>
83+ <span class="workout__value">27</span>
84+ <span class="workout__unit">km</span>
85+ </div>
86+ <div class="workout__details">
87+ <span class="workout__icon">⏱</span>
88+ <span class="workout__value">95</span>
89+ <span class="workout__unit">min</span>
90+ </div>
91+ <div class="workout__details">
92+ <span class="workout__icon">⚡️</span>
93+ <span class="workout__value">16</span>
94+ <span class="workout__unit">km/h</span>
95+ </div>
96+ <div class="workout__details">
97+ <span class="workout__icon">⛰</span>
98+ <span class="workout__value">223</span>
99+ <span class="workout__unit">m</span>
100+ </div>
101+ </li> -->
102+ </ ul >
103+
104+ < p class ="copyright ">
105+ © Copyright by
106+ < a class ="twitter-link " target ="_blank " href ="https://twitter.com/jonasschmedtman "> Jonas Schmedtmann</ a > . Use for
107+ learning or your portfolio. Don't use to teach. Don't claim
108+ as your own.
109+ </ p >
110+ </ div >
111+
112+ < div id ="map "> </ div >
113+ </ body >
114+
115+ </ html >
0 commit comments