-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
177 lines (124 loc) · 8.36 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
<!--
Copyright 2024 https://github.com/mahboube89
Licensed under the MIT License;
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Mapora - A map-based location bookmarking app to save, categorize, and manage your favorite locations with notes and easy navigation. Experience modern UI and responsive design.">
<meta name="keywords" content="Mapora, location bookmarking, map app, favorite locations, travel plans, location management, map-based app, save locations, responsive map application">
<meta name="author" content="Mahboubeh Ranjbar">
<!-- Favicon -->
<link rel="icon" href="images/favicon.ico" type="image/x-icon">
<!-- Stylesheets -->
<link rel="stylesheet" href="css/style.css">
<!-- Leaflet library CDN -->
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="" />
<script defer src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
<!-- Js Link -->
<script type="module" src="/js/app.js" defer></script>
<title>Mapora - Location Bookmarking App</title>
</head>
<body>
<div class="container">
<!-- ---------- NOTIFICATION START ---------- -->
<div id="notification" class="notification">
<!-- Content dynamically populated -->
</div> <!-- ========== NOTIFICATION END ========== -->
<!-- ---------- SIDBAR START ---------- -->
<div class="sidebar">
<!-- Logo -->
<button id="logo" class="logo"><img src="./images/location-maps.svg" alt="Mapora logo"><span>Mapora</span></button>
<button id="locateMe" class="locate-me-btn"><img src="./images/location.svg" alt="Locate Me Icon"></button>
<!-- Location Selector Start-->
<section class="location-selector location-selector--hidden" id="locationOptions">
<article class="location-selector__item">
<div class="location-selector__header">
<input id="article1" type="radio" name="locationType" value="Want to go" class="location-selector__toggle accordion-toggle" >
<!-- Label wraps the clickable content -->
<label for="article1" class="location-selector__label">
<img src="./images/bookmark.png" alt="Bookmark icon representing places to visit" width="25" height="25">
<span class="location-selector__checkmark accordion-checkmark"></span>
<span class="location-selector__label-text">Want to go</span>
</label>
<div class="location-selector__note">
<textarea class="location-selector__textarea" data-option="Want to go" rows="3" name="" placeholder="Needs to remember anything about this place?"></textarea>
</div>
</div>
</article>
<article class="location-selector__item">
<div class="location-selector__header">
<input id="article2" type="radio" name="locationType" value="Travel plans" class="location-selector__toggle accordion-toggle">
<!-- Label wraps the clickable content -->
<label for="article2" class="location-selector__label">
<img src="./images/plan.png" alt="Map icon representing planned trips" width="25" height="25">
<span class="location-selector__checkmark accordion-checkmark"></span>
<span class="location-selector__label-text">Travel plans</span>
</label>
<div class="location-selector__note">
<textarea class="location-selector__textarea" data-option="Travel plans" rows="3" name="" placeholder="Needs to remember anything about this place?"></textarea>
</div>
</div>
</article>
<article class="location-selector__item" >
<div class="location-selector__header">
<input id="article3" type="radio" name="locationType" value="Favorites" class="location-selector__toggle accordion-toggle">
<!-- Label wraps the clickable content -->
<label for="article3" class="location-selector__label">
<img src="./images/heart.png" alt="Heart icon representing favorite places" width="25" height="25" >
<span class="location-selector__checkmark accordion-checkmark"></span>
<span class="location-selector__label-text">Favorites</span>
</label>
<div class="location-selector__note">
<textarea class="location-selector__textarea" data-option="Favorites" rows="3" name="" placeholder="Needs to remember anything about this place?"></textarea>
</div>
</div>
</article>
<!-- Buttons Wrapper -->
<div class="location-selector__btn-wrapper">
<button class="location-selector__btn location-selector__btn--confirm" id="confirmSelection">Save</button>
<button class="location-selector__btn location-selector__btn--cancel" id="cancelSelection">Cancel</button>
</div>
</section> <!-- Location Selector End -->
<!-- Location Widget Start -->
<section class="location-widget">
<div class="location-widget__tabs">
<input type="radio" name="group" id="all" class="location-widget__tab-input">
<input type="radio" name="group" id="want-to-go" class="location-widget__tab-input">
<input type="radio" name="group" id="travel-plans" class="location-widget__tab-input">
<input type="radio" name="group" id="favorites" class="location-widget__tab-input">
<button class="location-widget__buttons">
<label for="all">All</label>
<label for="want-to-go"><span>Want to go</span><img src="./images/bookmark.png" alt="Bookmark icon representing locations to visit" width="25" height="25"></label>
<label for="travel-plans"><span>Travel plans</span><img src="./images/plan.png" alt="Plan icon representing travel plans" width="25" height="25"></label>
<label for="favorites"><span>Favorites</span><img src="./images/heart.png" alt="Heart icon representing favorite locations" width="25" height="25"></label>
</button>
<div class="location-widget__active-indicator"></div>
<div class="location-widget__content">
<div class="location-widget__content-inner">
<!-- Content dynamically populated -->
</div>
</div>
</div>
</section> <!-- Location Widget End -->
<!-- Copyright Start -->
<p class="copyright">
© <span>2024 Copyright by</span>
<a
class="social-link"
href="https://linkedin.com/in/mahboubeh-ranjbar-944132239"
target="_blank"
rel="noopener noreferrer"
>
Mahboubeh Ranjbar
</a>
</p> <!-- Copyright End -->
</div><!-- ========== SIDEBAR END ========== -->
<!-- ---------- MAP START ---------- -->
<div id="map">
</div><!-- ========== MAP END ========== -->
</div>
</body>
</html>