test2/mobile-results.html at main · windows10101713/test2 · GitHub

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
<!-- LMN 검색 결과 목록 개편 (v0.2.1) -->
<!DOCTYPE html>

<html class="light" lang="ko"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>MapLink - Search Results</title>
<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&amp;family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans:wght@100..900&amp;display=swap" rel="stylesheet"/>
<style>
    .material-symbols-outlined {
      font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
      display: inline-block;
      line-height: 1;
      text-transform: none;
      letter-spacing: normal;
      word-wrap: normal;
      white-space: nowrap;
      direction: ltr;
    }

    /* Custom Scrollbar for the high-density list */
    .custom-scrollbar::-webkit-scrollbar {
      width: 4px;
    }
    .custom-scrollbar::-webkit-scrollbar-track {
      background: transparent;
    }
    .custom-scrollbar::-webkit-scrollbar-thumb {
      background: #becab9;
      border-radius: 10px;
    }

    /* Glassmorphism effect for the bottom sheet handle area */
    .sheet-handle-glass {
      backdrop-filter: blur(12px);
      background: rgba(251, 249, 248, 0.85);
    }
  </style>
<script id="tailwind-config">
    tailwind.config = {
      darkMode: "class",
      theme: {
        extend: {
          "colors": {
            "surface-container-high": "#eae8e7",
            "error": "#ba1a1a",
            "on-surface": "#1b1c1c",
            "on-background": "#1b1c1c",
            "on-tertiary-container": "#4d2b00",
            "primary-fixed": "#94f990",
            "surface-dim": "#dcd9d9",
            "on-primary-fixed-variant": "#005313",
            "on-secondary-container": "#00355c",
            "surface-tint": "#006e1c",
            "on-tertiary": "#ffffff",
            "on-secondary": "#ffffff",
            "inverse-surface": "#303030",
            "surface": "#fbf9f8",
            "on-error-container": "#93000a",
            "surface-bright": "#fbf9f8",
            "primary": "#006e1c",
            "inverse-on-surface": "#f3f0f0",
            "background": "#fbf9f8",
            "secondary-fixed-dim": "#9ecaff",
            "surface-container-highest": "#e4e2e1",
            "inverse-primary": "#78dc77",
            "secondary-fixed": "#d1e4ff",
            "on-tertiary-fixed-variant": "#693c00",
            "on-primary-fixed": "#002204",
            "on-secondary-fixed": "#001d36",
            "tertiary-fixed-dim": "#ffb870",
            "surface-container-low": "#f6f3f2",
            "primary-container": "#4caf50",
            "secondary-container": "#33a0fd",
            "secondary": "#0061a4",
            "error-container": "#ffdad6",
            "tertiary": "#8b5000",
            "tertiary-container": "#e18500",
            "on-secondary-fixed-variant": "#00497d",
            "outline-variant": "#becab9",
            "surface-container": "#f0eded",
            "surface-variant": "#e4e2e1",
            "on-primary-container": "#003c0b",
            "tertiary-fixed": "#ffdcbe",
            "on-tertiary-fixed": "#2c1600",
            "on-primary": "#ffffff",
            "on-surface-variant": "#3f4a3c",
            "primary-fixed-dim": "#78dc77",
            "on-error": "#ffffff",
            "outline": "#6f7a6b",
            "surface-container-lowest": "#ffffff"
          },
          "borderRadius": {
            "DEFAULT": "0.125rem",
            "lg": "0.25rem",
            "xl": "0.5rem",
            "full": "0.75rem"
          },
          "spacing": {
            "stack-md": "8px",
            "stack-lg": "16px",
            "gutter": "12px",
            "stack-sm": "4px",
            "touch-target-min": "44px",
            "margin-page": "16px"
          },
          "fontFamily": {
            "header-desktop": ["Noto Sans"],
            "body-sm": ["Noto Sans"],
            "label-caps": ["Noto Sans"],
            "title": ["Noto Sans"],
            "header-mobile": ["Noto Sans"],
            "body": ["Noto Sans"]
          },
          "fontSize": {
            "header-desktop": ["18px", {"lineHeight": "24px", "fontWeight": "700"}],
            "body-sm": ["12px", {"lineHeight": "16px", "fontWeight": "400"}],
            "label-caps": ["11px", {"lineHeight": "14px", "letterSpacing": "0.5px", "fontWeight": "700"}],
            "title": ["16px", {"lineHeight": "22px", "fontWeight": "600"}],
            "header-mobile": ["17px", {"lineHeight": "22px", "fontWeight": "700"}],
            "body": ["14px", {"lineHeight": "20px", "fontWeight": "400"}]
          }
        },
      },
    }
  </script>
</head>
<body class="bg-background text-on-surface font-body overflow-hidden h-screen flex flex-col">
<!-- TopAppBar -->
<header class="fixed top-0 w-full z-50 bg-surface dark:bg-surface-dim shadow-sm border-b border-outline-variant dark:border-outline 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">explore</span>
<h1 class="font-header-mobile text-header-mobile text-primary dark:text-primary-fixed-dim">LMN</h1>
</div>
<div class="flex items-center gap-stack-lg">
<button class="material-symbols-outlined text-primary dark:text-primary-fixed-dim hover:bg-surface-container-high transition-colors p-1 rounded-full active:scale-95 duration-150">my_location</button>
</div>
</header>
<!-- Main Map Canvas (Background) -->
<main class="flex-grow relative mt-[44px] mb-[64px] bg-surface-container-high overflow-hidden">
<div class="absolute inset-0 w-full h-full bg-cover bg-center" data-alt="A detailed digital vector map of Seoul's Gangnam district with clean, corporate styling. The map features high-contrast street grids in subtle grays, with vibrant green parks and blue rivers. Minimalist markers represent various facilities like hospitals and pharmacies. The aesthetic is utilitarian and civic-minded, using a light-mode color palette with sharp, legible labeling." data-location="Seoul, Gangnam district">
<div class="w-full h-full" data-alt="A sophisticated map interface of a dense urban environment like Seoul. The map uses a minimalist color palette with neutral greys for streets and soft greens for parks. Various geometric icons indicating medical and retail facilities are scattered across the grid. The lighting is clear and even, simulating broad daylight to ensure high visibility and professional utility." style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuC8xrokeFyT5Rpw0vqNhbYfeKGnqOkhfqrFiu8xW-9ct8OyrQYMBStK5iXPlywRhFUF4rBJxQTYnMtziEBSrObpp68jLVfnJd5HIdqZR_x57C2QFPh63lsVEqTK0UhZWx6JKfAFGmKtcf-gaSZPoTQpYItQA-llnhx4l-lbepe3w_6ycTp75-DbBO9v8rhFguOLFQiEqhEdaZIIfEcxCykZq9USIAqdnmpmvv1YNHomEmffh0_H4Ls1')"></div>
</div>
<!-- Map Floating Controls -->
<div class="absolute top-4 right-4 flex flex-col gap-2 z-10">
<button class="w-11 h-11 bg-surface shadow-md rounded-lg flex items-center justify-center border border-outline-variant active:scale-95 transition-transform">
<span class="material-symbols-outlined text-on-surface-variant">layers</span>
</button>
<button class="w-11 h-11 bg-surface shadow-md rounded-lg flex items-center justify-center border border-outline-variant active:scale-95 transition-transform">
<span class="material-symbols-outlined text-on-surface-variant">add</span>
</button>
<button class="w-11 h-11 bg-surface shadow-md rounded-lg flex items-center justify-center border border-outline-variant active:scale-95 transition-transform">
<span class="material-symbols-outlined text-on-surface-variant">remove</span>
</button>
</div>
<!-- Search Results Overlay (Bottom Sheet Pattern) -->
<section class="absolute inset-x-0 bottom-0 z-20 flex flex-col max-h-[75%] transition-all duration-300 transform translate-y-0">
<!-- Sheet Handle / Header -->
<div class="sheet-handle-glass border-t border-outline-variant rounded-t-[28px] shadow-[0_-4px_30px_rgba(0,0,0,0.1)] px-margin-page pb-stack-md pt-3 flex flex-col items-center">
<div class="w-8 h-1 bg-outline-variant rounded-full mb-4 opacity-60"></div>
<div class="w-full flex justify-between items-center mb-2">
<h2 class="font-header-mobile text-header-mobile text-on-surface">결과 목록 (5개 발견)</h2>
<button class="material-symbols-outlined text-on-surface-variant hover:bg-surface-variant p-2 rounded-full transition-colors active:scale-90">filter_list</button>
</div>
</div>
<!-- Result Table Head -->
<div class="bg-surface px-margin-page py-2 border-b border-outline-variant grid grid-cols-[40px_1fr_80px_80px] gap-gutter text-outline font-label-caps text-label-caps tracking-wider">
<div class="text-center">순번</div>
<div>시설명</div>
<div class="text-right">거리</div>
<div class="text-center">카테고리</div>
</div>
<!-- Result Table Items -->
<div class="bg-surface flex-grow overflow-y-auto custom-scrollbar">
<!-- Item 1 -->
<div class="h-14 border-b border-outline-variant grid grid-cols-[40px_1fr_80px_80px] gap-gutter items-center px-margin-page hover:bg-surface-container-low transition-colors active:bg-surface-container-high cursor-pointer">
<div class="text-center font-title text-body text-on-surface-variant border-l-4 border-[#9C27B0] h-3/5 flex items-center justify-center">1</div>
<div class="font-title text-body text-on-surface truncate font-semibold">가나다약국</div>
<div class="text-right text-body-sm text-secondary font-bold">0.42km</div>
<div class="flex justify-center">
<span class="text-[10px] px-2 py-0.5 bg-[#9C27B0]/10 rounded-full text-[#9C27B0] font-bold">약국</span>
</div>
</div>
<!-- Item 2 -->
<div class="h-14 border-b border-outline-variant grid grid-cols-[40px_1fr_80px_80px] gap-gutter items-center px-margin-page hover:bg-surface-container-low transition-colors active:bg-surface-container-high cursor-pointer">
<div class="text-center font-title text-body text-on-surface-variant border-l-4 border-[#9C27B0] h-3/5 flex items-center justify-center">2</div>
<div class="font-title text-body text-on-surface truncate font-semibold">라마바약국</div>
<div class="text-right text-body-sm text-secondary font-bold">0.58km</div>
<div class="flex justify-center">
<span class="text-[10px] px-2 py-0.5 bg-[#9C27B0]/10 rounded-full text-[#9C27B0] font-bold">약국</span>
</div>
</div>
<!-- Item 3 -->
<div class="h-14 border-b border-outline-variant grid grid-cols-[40px_1fr_80px_80px] gap-gutter items-center px-margin-page hover:bg-surface-container-low transition-colors active:bg-surface-container-high cursor-pointer">
<div class="text-center font-title text-body text-on-surface-variant border-l-4 border-[#F44336] h-3/5 flex items-center justify-center">3</div>
<div class="font-title text-body text-on-surface truncate font-semibold">서울시병원</div>
<div class="text-right text-body-sm text-secondary font-bold">0.75km</div>
<div class="flex justify-center">
<span class="text-[10px] px-2 py-0.5 bg-[#F44336]/10 rounded-full text-[#F44336] font-bold">병원</span>
</div>
</div>
<!-- Item 4 -->
<div class="h-14 border-b border-outline-variant grid grid-cols-[40px_1fr_80px_80px] gap-gutter items-center px-margin-page hover:bg-surface-container-low transition-colors active:bg-surface-container-high cursor-pointer">
<div class="text-center font-title text-body text-on-surface-variant border-l-4 border-[#FF5722] h-3/5 flex items-center justify-center">4</div>
<div class="font-title text-body text-on-surface truncate font-semibold">CU 강남점</div>
<div class="text-right text-body-sm text-secondary font-bold">0.89km</div>
<div class="flex justify-center">
<span class="text-[10px] px-2 py-0.5 bg-[#FF5722]/10 rounded-full text-[#FF5722] font-bold">편의점</span>
</div>
</div>
<!-- Item 5 -->
<div class="h-14 border-b border-outline-variant grid grid-cols-[40px_1fr_80px_80px] gap-gutter items-center px-margin-page hover:bg-surface-container-low transition-colors active:bg-surface-container-high cursor-pointer">
<div class="text-center font-title text-body text-on-surface-variant h-3/5 flex items-center justify-center border-l-4 border-transparent">5</div>
<div class="font-title text-body text-on-surface truncate font-semibold">GS25 역삼점</div>
<div class="text-right text-body-sm text-secondary font-bold">1.02km</div>
<div class="flex justify-center">
<span class="text-[10px] px-2 py-0.5 bg-[#FF5722]/10 rounded-full text-[#FF5722] font-bold">편의점</span>
</div>
</div>
<!-- Empty placeholder for spacing -->
<div class="h-24 bg-surface-container-low flex flex-col items-center justify-center gap-2">
<div class="w-8 h-[2px] bg-outline-variant opacity-30"></div>
<span class="text-body-sm text-outline opacity-70 italic">목록 끝</span>
</div>
</div>
</section>
</main>
<!-- BottomNavBar -->
<nav class="fixed bottom-0 w-full z-50 bg-surface dark:bg-surface-container-lowest rounded-t-xl border-t border-outline-variant shadow-[0_-4px_12px_rgba(0,0,0,0.1)] flex justify-around items-center h-[64px] px-gutter">
<a class="flex flex-col items-center justify-center text-on-surface-variant hover:bg-surface-variant transition-colors p-1 rounded-lg" href="mobile-main.html">
<span class="material-symbols-outlined">map</span>
<span class="font-label-caps text-label-caps">Map</span>
</a>
<a class="flex flex-col items-center justify-center bg-secondary-container text-on-secondary-container rounded-full px-stack-lg py-1 transition-opacity active:opacity-80" href="mobile-search.html">
<span class="material-symbols-outlined">search</span>
<span class="font-label-caps text-label-caps">Search</span>
</a>
<a class="flex flex-col items-center justify-center text-on-surface-variant hover:bg-surface-variant transition-colors p-1 rounded-lg" href="mobile-saved.html">
<span class="material-symbols-outlined">bookmark</span>
<span class="font-label-caps text-label-caps">Saved</span>
</a>
<a class="flex flex-col items-center justify-center text-on-surface-variant hover:bg-surface-variant transition-colors p-1 rounded-lg" href="mobile-profile.html">
<span class="material-symbols-outlined">person</span>
<span class="font-label-caps text-label-caps">Profile</span>
</a>
</nav>
<script>
    // Micro-interactions for the list items
    document.querySelectorAll('.h-14').forEach(item => {
      item.addEventListener('click', () => {
        // Mock highlighting effect
        document.querySelectorAll('.h-14').forEach(i => i.classList.remove('bg-primary-container/10'));
        item.classList.add('bg-primary-container/10');
        console.log('Location selected: ' + item.querySelector('.truncate').innerText);
      });
    });

    // Handle drag/scroll simulation for the bottom sheet
    const sheet = document.querySelector('section');
    let startY = 0;
    sheet.addEventListener('touchstart', (e) => {
      startY = e.touches[0].clientY;
    });
  </script>
</body></html>