-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathmobile-saved.html
More file actions
268 lines (262 loc) · 15.9 KB
/
Copy pathmobile-saved.html
File metadata and controls
268 lines (262 loc) · 15.9 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
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
<!-- LMN 저장 탭 (모바일) -->
<!DOCTYPE html>
<html class="light" lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;600;700&display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
<style>
.material-symbols-outlined {
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
body {
font-family: 'Noto Sans', sans-serif;
-webkit-tap-highlight-color: transparent;
}
.hide-scrollbar::-webkit-scrollbar {
display: none;
}
.hide-scrollbar {
-ms-overflow-style: none;
scrollbar-width: none;
}
</style>
<script id="tailwind-config">
tailwind.config = {
darkMode: "class",
theme: {
extend: {
"colors": {
"on-primary-fixed-variant": "#005313",
"secondary-container": "#33a0fd",
"inverse-primary": "#78dc77",
"primary-fixed-dim": "#78dc77",
"on-surface": "#1b1c1c",
"on-secondary-fixed": "#001d36",
"primary-fixed": "#94f990",
"tertiary-container": "#e18500",
"outline-variant": "#becab9",
"secondary-fixed-dim": "#9ecaff",
"on-tertiary-fixed-variant": "#693c00",
"surface-container-low": "#f6f3f2",
"inverse-surface": "#303030",
"tertiary-fixed-dim": "#ffb870",
"surface-container": "#f0eded",
"on-tertiary-container": "#4d2b00",
"primary": "#006e1c",
"surface-container-highest": "#e4e2e1",
"on-tertiary": "#ffffff",
"on-secondary": "#ffffff",
"error": "#ba1a1a",
"background": "#fbf9f8",
"surface-tint": "#006e1c",
"surface-dim": "#dcd9d9",
"surface-variant": "#e4e2e1",
"inverse-on-surface": "#f3f0f0",
"outline": "#6f7a6b",
"on-background": "#1b1c1c",
"primary-container": "#4caf50",
"tertiary": "#8b5000",
"surface-bright": "#fbf9f8",
"on-secondary-container": "#00355c",
"on-tertiary-fixed": "#2c1600",
"on-primary-container": "#003c0b",
"on-primary": "#ffffff",
"error-container": "#ffdad6",
"surface-container-lowest": "#ffffff",
"on-primary-fixed": "#002204",
"secondary-fixed": "#d1e4ff",
"secondary": "#0061a4",
"on-error": "#ffffff",
"on-surface-variant": "#3f4a3c",
"on-secondary-fixed-variant": "#00497d",
"surface": "#fbf9f8",
"surface-container-high": "#eae8e7",
"on-error-container": "#93000a",
"tertiary-fixed": "#ffdcbe"
},
"borderRadius": {
"DEFAULT": "0.125rem",
"lg": "0.25rem",
"xl": "0.5rem",
"full": "0.75rem"
},
"spacing": {
"stack-md": "8px",
"gutter": "12px",
"touch-target-min": "44px",
"stack-sm": "4px",
"stack-lg": "16px",
"margin-page": "16px"
},
"fontFamily": {
"title": ["Noto Sans"],
"header-mobile": ["Noto Sans"],
"header-desktop": ["Noto Sans"],
"body": ["Noto Sans"],
"body-sm": ["Noto Sans"],
"label-caps": ["Noto Sans"]
},
"fontSize": {
"title": ["16px", {"lineHeight": "22px", "fontWeight": "600"}],
"header-mobile": ["17px", {"lineHeight": "22px", "fontWeight": "700"}],
"header-desktop": ["18px", {"lineHeight": "24px", "fontWeight": "700"}],
"body": ["14px", {"lineHeight": "20px", "fontWeight": "400"}],
"body-sm": ["12px", {"lineHeight": "16px", "fontWeight": "400"}],
"label-caps": ["11px", {"lineHeight": "14px", "letterSpacing": "0.5px", "fontWeight": "700"}]
}
},
},
}
</script>
<style>
body {
min-height: max(884px, 100dvh);
}
</style>
</head>
<body class="bg-background text-on-background min-h-screen flex flex-col">
<!-- TopAppBar -->
<header class="fixed top-0 w-full z-50 bg-surface dark:bg-surface-dim border-b border-outline-variant dark:border-outline shadow-sm flex items-center justify-between px-margin-page h-[44px]">
<div class="flex items-center gap-2">
<span class="material-symbols-outlined text-primary dark:text-primary-fixed-dim" data-icon="explore">explore</span>
<h1 class="font-header-mobile text-header-mobile text-primary dark:text-primary-fixed-dim">LMN</h1>
</div>
<button class="material-symbols-outlined text-on-surface-variant dark:text-on-surface-variant hover:bg-surface-container-high transition-colors active:scale-95 duration-150 p-1 rounded-full" data-icon="my_location">my_location</button>
</header>
<!-- Content Canvas -->
<main class="flex-1 mt-[44px] mb-[64px] overflow-y-auto hide-scrollbar">
<!-- Tabs / Toggle -->
<div class="sticky top-[44px] z-40 bg-surface px-margin-page py-stack-md flex gap-stack-lg border-b border-outline-variant">
<button class="flex-1 h-touch-target-min font-title text-title border-b-2 border-primary text-primary transition-all" id="tab-places" onclick="switchTab('places')">
Places
</button>
<button class="flex-1 h-touch-target-min font-title text-title border-b-2 border-transparent text-on-surface-variant hover:text-on-surface transition-all" id="tab-routes" onclick="switchTab('routes')">
Routes
</button>
</div>
<!-- Places List Container -->
<div class="px-margin-page pt-stack-lg space-y-stack-md" id="content-places">
<!-- Saved Item Card: Hospital -->
<div class="flex bg-surface-container-lowest rounded-lg overflow-hidden border border-outline-variant shadow-sm hover:shadow-md transition-shadow active:scale-[0.98] duration-150">
<div class="w-4 bg-error h-full shrink-0"></div> <!-- Category indicator: Red for Hospital -->
<div class="flex-1 flex p-stack-md gap-stack-md items-center">
<div class="w-16 h-16 rounded overflow-hidden shrink-0">
<img class="w-full h-full object-cover" data-alt="A clean, professional photograph of a modern hospital building exterior with large glass windows and white walls. The lighting is bright and crisp morning sun. The overall aesthetic is civic, efficient, and corporate, matching the high-utility map service design system with high contrast and dependable mood." src="https://lh3.googleusercontent.com/aida-public/AB6AXuCMN5w3USfOdPUrh_7K8Kc3xdwazAXQeJvrmeI0pIO5HonVs7mxFBZfCvvpAvHELh8tlZPNOnPpVcCz3PNf5MW2_D0iWAkKkjXB7REq3DBGsceJjAs0tbU-EZ1alPrvkmdReoQ37iw4fzp6p1XNfNWstx-bOxJeb4QIPWxxYlIIGD-PG8rSuo0uvdyb_dFnV8PMcalCwMPBvHWWkFZ-_8_zApCcz1n2YAc0xwbT4MJ_2P7A5iQqlhe3"/>
</div>
<div class="flex-1 min-w-0">
<div class="flex justify-between items-start">
<h3 class="font-title text-title truncate">General Health Hospital</h3>
<span class="material-symbols-outlined text-primary" data-icon="bookmark" style="font-variation-settings: 'FILL' 1;">bookmark</span>
</div>
<div class="flex items-center gap-1 mt-1">
<span class="bg-error/10 text-error px-2 py-0.5 rounded-full text-[10px] font-bold uppercase tracking-wider">Hospital</span>
<span class="text-body-sm text-on-surface-variant">0.8 miles away</span>
</div>
<p class="text-body-sm text-on-surface-variant truncate mt-1">1200 Medical Center Blvd</p>
</div>
</div>
</div>
<!-- Saved Item Card: Pharmacy -->
<div class="flex bg-surface-container-lowest rounded-lg overflow-hidden border border-outline-variant shadow-sm hover:shadow-md transition-shadow active:scale-[0.98] duration-150">
<div class="w-4 bg-secondary h-full shrink-0"></div> <!-- Category indicator: Blue for Pharmacy/Service -->
<div class="flex-1 flex p-stack-md gap-stack-md items-center">
<div class="w-16 h-16 rounded overflow-hidden shrink-0">
<img class="w-full h-full object-cover" data-alt="A minimalist photograph of a modern pharmacy storefront with a green cross sign. The aesthetic is clean and corporate, featuring high-contrast blue and white elements under bright, even daylight. The atmosphere is reliable and clinical, aligning with a high-utility utilitarian design system." src="https://lh3.googleusercontent.com/aida-public/AB6AXuDST86ZQ9T4C0S69DRKTWPbJ3AeDa4mDcyFOgZlShfnSJcRwbpDQd9xdb6CC5zZ7pU4QUP6DnECE2Loqm0qkRsrB5-Zjwi-fD1Egd3if3PUtA-VCtPYtsBINim3oPoX3-UOz1uGExpVPG8qQuv4NnUlbcJcikUxOoQ6Gz50q9kR0rLsEXBsJXdj28IDW24Be7tJs2eqOMSP5MhcKhEI55mg_PFy28B4Pdym9w4RVepbef9uEnL8A7T4"/>
</div>
<div class="flex-1 min-w-0">
<div class="flex justify-between items-start">
<h3 class="font-title text-title truncate">City Center Pharmacy</h3>
<span class="material-symbols-outlined text-primary" data-icon="bookmark" style="font-variation-settings: 'FILL' 1;">bookmark</span>
</div>
<div class="flex items-center gap-1 mt-1">
<span class="bg-secondary/10 text-secondary px-2 py-0.5 rounded-full text-[10px] font-bold uppercase tracking-wider">Pharmacy</span>
<span class="text-body-sm text-on-surface-variant">1.2 miles away</span>
</div>
<p class="text-body-sm text-on-surface-variant truncate mt-1">45 Market Street, North Wing</p>
</div>
</div>
</div>
<!-- Saved Item Card: Park -->
<div class="flex bg-surface-container-lowest rounded-lg overflow-hidden border border-outline-variant shadow-sm hover:shadow-md transition-shadow active:scale-[0.98] duration-150">
<div class="w-4 bg-primary h-full shrink-0"></div> <!-- Category indicator: Green for Parks -->
<div class="flex-1 flex p-stack-md gap-stack-md items-center">
<div class="w-16 h-16 rounded overflow-hidden shrink-0">
<img class="w-full h-full object-cover" data-alt="A vibrant, well-lit photograph of a lush urban park with manicured grass and a walking path. The lighting is golden hour warmth, creating a dependable and inviting atmosphere. The image is crisp and professional, emphasizing civic utility and high contrast for legibility." src="https://lh3.googleusercontent.com/aida-public/AB6AXuDg-3Yl01ge9DSKU_toy3z-UvB3CxtkMqbmoBpCwgMFtAQLmwNvlg990OJlP1s2uLccLpX_BQCwDZ-BzZ8L42vhNi4PDaZlvmKTeAC9wwFLCgSHJ7S8Y0wRFZCrJueqiOB3h-T8efr4C5rsuDPCyjnFAPYHTrCLCPoXSa-1MygZF3MjZxkpVkZBsjEj5Vca40BleG982Bc1qVbgCZrRAjrcDbEdQddXTPAOaKlWMdnBD-Xcyg-WM-Gy"/>
</div>
<div class="flex-1 min-w-0">
<div class="flex justify-between items-start">
<h3 class="font-title text-title truncate">Oakwood Recreation Park</h3>
<span class="material-symbols-outlined text-primary" data-icon="bookmark" style="font-variation-settings: 'FILL' 1;">bookmark</span>
</div>
<div class="flex items-center gap-1 mt-1">
<span class="bg-primary/10 text-primary px-2 py-0.5 rounded-full text-[10px] font-bold uppercase tracking-wider">Park</span>
<span class="text-body-sm text-on-surface-variant">2.5 miles away</span>
</div>
<p class="text-body-sm text-on-surface-variant truncate mt-1">Grand Avenue & 14th St</p>
</div>
</div>
</div>
</div>
<!-- Routes List Container (Empty State Example) -->
<div class="hidden px-margin-page pt-20 flex flex-col items-center justify-center text-center" id="content-routes">
<div class="w-48 h-48 mb-stack-lg opacity-80">
</div>
<h2 class="font-title text-title text-on-surface mb-stack-sm">No saved routes yet</h2>
<p class="font-body text-body text-on-surface-variant max-w-[240px] mb-stack-lg">
Your favorite commute paths and frequent trips will appear here once you bookmark them.
</p>
<button class="h-touch-target-min px-stack-lg bg-primary text-on-primary font-title text-title rounded-lg shadow-sm active:opacity-90 transition-opacity">
Explore Routes
</button>
</div>
</main>
<!-- BottomNavBar -->
<nav class="fixed bottom-0 w-full z-50 rounded-t-xl bg-surface dark:bg-surface-container-lowest border-t border-outline-variant shadow-[0_-4px_12px_rgba(0,0,0,0.1)] flex justify-around items-center h-[64px] px-gutter">
<!-- Map -->
<a class="flex flex-col items-center justify-center text-on-surface-variant hover:bg-surface-variant active:opacity-80 transition-opacity p-2 rounded-lg cursor-pointer" href="mobile-main.html">
<span class="material-symbols-outlined" data-icon="map">map</span>
<span class="font-label-caps text-label-caps">Map</span>
</a>
<!-- Search -->
<a class="flex flex-col items-center justify-center text-on-surface-variant hover:bg-surface-variant active:opacity-80 transition-opacity p-2 rounded-lg cursor-pointer" href="mobile-search.html">
<span class="material-symbols-outlined" data-icon="search">search</span>
<span class="font-label-caps text-label-caps">Search</span>
</a>
<!-- Saved (Active) -->
<a class="flex flex-col items-center justify-center bg-secondary-container text-on-secondary-container rounded-full px-stack-lg py-1 active:opacity-80 transition-opacity cursor-pointer" href="mobile-saved.html">
<span class="material-symbols-outlined" data-icon="bookmark" style="font-variation-settings: 'FILL' 1;">bookmark</span>
<span class="font-label-caps text-label-caps">Saved</span>
</a>
<!-- Profile -->
<a class="flex flex-col items-center justify-center text-on-surface-variant hover:bg-surface-variant active:opacity-80 transition-opacity p-2 rounded-lg cursor-pointer" href="mobile-profile.html">
<span class="material-symbols-outlined" data-icon="person">person</span>
<span class="font-label-caps text-label-caps">Profile</span>
</a>
</nav>
<script>
function switchTab(tab) {
const placesTab = document.getElementById('tab-places');
const routesTab = document.getElementById('tab-routes');
const placesContent = document.getElementById('content-places');
const routesContent = document.getElementById('content-routes');
if (tab === 'places') {
placesTab.classList.add('border-primary', 'text-primary');
placesTab.classList.remove('border-transparent', 'text-on-surface-variant');
routesTab.classList.add('border-transparent', 'text-on-surface-variant');
routesTab.classList.remove('border-primary', 'text-primary');
placesContent.classList.remove('hidden');
routesContent.classList.add('hidden');
} else {
routesTab.classList.add('border-primary', 'text-primary');
routesTab.classList.remove('border-transparent', 'text-on-surface-variant');
placesTab.classList.add('border-transparent', 'text-on-surface-variant');
placesTab.classList.remove('border-primary', 'text-primary');
routesContent.classList.remove('hidden');
placesContent.classList.add('hidden');
}
}
</script>
</body></html>