GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Map Navigation UI Mock</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: "Roboto", Arial, sans-serif; }8 #render-target {9 position: relative;10 overflow: hidden;11 width: 1080px;12 height: 2400px;13 background: #ffffff;14 border-radius: 24px;15 box-shadow: 0 10px 30px rgba(0,0,0,0.15);16 }17 18 /* Full-screen map placeholder */19 .map-placeholder {20 position: absolute;21 left: 0; top: 0;22 width: 1080px; height: 2400px;23 background: #E0E0E0;24 border: 1px solid #BDBDBD;25 color: #757575;26 display: flex;27 align-items: center;28 justify-content: center;29 font-size: 28px;30 letter-spacing: 0.2px;31 }32 33 /* Status bar */34 .status-bar {35 position: absolute;36 top: 18px;37 left: 24px;38 right: 24px;39 height: 72px;40 display: flex;41 align-items: center;42 justify-content: space-between;43 color: #333;44 font-weight: 500;45 z-index: 5;46 }47 .status-left { font-size: 40px; opacity: 0.9; }48 .status-right {49 display: flex; gap: 24px; align-items: center;50 opacity: 0.85;51 }52 .status-icon svg { width: 42px; height: 42px; fill: #424242; }53 54 /* Floating pill with duration */55 .duration-pill {56 position: absolute;57 top: 180px; left: 120px;58 width: 700px; height: 140px;59 background: #ffffff;60 border-radius: 80px;61 box-shadow: 0 8px 24px rgba(0,0,0,0.18);62 display: flex; align-items: center; justify-content: space-between;63 padding: 0 40px;64 z-index: 6;65 }66 .duration-left {67 display: flex; align-items: center; gap: 28px;68 }69 .sun-icon svg { width: 48px; height: 48px; }70 .duration-text {71 font-size: 54px; color: #222;72 font-weight: 700;73 }74 .duration-text span { color: #666; font-weight: 600; }75 .share-btn svg { width: 56px; height: 56px; fill: #6f3f9f; }76 77 /* Left action bubbles */78 .left-actions {79 position: absolute;80 top: 360px; left: 40px;81 display: flex; flex-direction: column; gap: 26px;82 z-index: 6;83 }84 .circle-btn {85 width: 120px; height: 120px; border-radius: 60px;86 background: #ffffff;87 box-shadow: 0 8px 22px rgba(0,0,0,0.18);88 display: flex; align-items: center; justify-content: center;89 }90 .circle-btn svg { width: 60px; height: 60px; }91 92 /* Right action bubbles */93 .right-actions {94 position: absolute;95 top: 360px; right: 40px;96 display: flex; flex-direction: column; gap: 26px;97 z-index: 6;98 }99 .circle-btn.red { background: #ffffff; }100 .circle-btn.blue { background: #ffffff; }101 .circle-btn.red svg { fill: #d24d57; }102 .circle-btn.blue svg { fill: #1e88e5; }103 104 /* Route preview elements */105 .blue-dot {106 position: absolute;107 top: 1080px; left: 520px;108 width: 48px; height: 48px; border-radius: 24px;109 background: #1e88e5;110 border: 8px solid #ffffff;111 box-shadow: 0 6px 14px rgba(30,136,229,0.6);112 z-index: 5;113 }114 .route-line {115 position: absolute;116 left: 540px; top: 1200px;117 width: 8px; height: 700px;118 background-image: radial-gradient(#1e88e5 2px, transparent 3px);119 background-size: 8px 28px;120 background-repeat: repeat-y;121 z-index: 4;122 }123 124 /* Floating controls (right lower) */125 .floating-controls {126 position: absolute;127 right: 40px; top: 1600px;128 display: flex; flex-direction: column; gap: 28px;129 z-index: 6;130 }131 .floating-controls .circle-btn { width: 130px; height: 130px; border-radius: 65px; }132 133 /* Bottom sheet card */134 .bottom-sheet {135 position: absolute;136 left: 24px; right: 24px; bottom: 0;137 height: 760px;138 background: #ffffff;139 border-radius: 36px 36px 0 0;140 box-shadow: 0 -8px 26px rgba(0,0,0,0.2);141 z-index: 7;142 padding: 28px 40px 40px;143 }144 .pager-dots {145 display: flex; justify-content: center; gap: 16px; margin-top: 10px; margin-bottom: 24px;146 }147 .pager-dots span {148 width: 22px; height: 22px; border-radius: 11px;149 background: #d2d2d2;150 }151 .pager-dots span.active { background: #8a8a8a; }152 .sheet-header {153 display: flex; align-items: center; justify-content: space-between;154 }155 .header-left {156 display: flex; align-items: center; gap: 20px;157 color: #1e88e5; font-weight: 700; font-size: 52px;158 }159 .header-right {160 display: flex; align-items: center; gap: 12px; color: #1e88e5; font-size: 44px; font-weight: 700;161 }162 .header-right .ring {163 width: 44px; height: 44px; border-radius: 22px; border: 6px solid #1e88e5;164 }165 .step {166 margin-top: 36px;167 display: flex; align-items: center; gap: 22px;168 }169 .step-icon {170 width: 90px; height: 90px; border-radius: 18px; background: #eef2f5;171 display: flex; align-items: center; justify-content: center;172 }173 .step-text {174 font-size: 42px; color: #37474f;175 }176 .step-text .em { font-weight: 700; color: #000; }177 .divider { margin: 30px 0; height: 2px; background: #e5e5e5; }178 179 /* Small Google label */180 .google-label {181 position: absolute;182 left: 40px; bottom: 820px;183 font-size: 34px; color: #666;184 z-index: 5;185 }186</style>187</head>188<body>189<div id="render-target">190 191 <!-- Fullscreen map placeholder -->192 <div class="map-placeholder">[IMG: Google Map - City streets and buildings]</div>193 194 <!-- Status bar -->195 <div class="status-bar">196 <div class="status-left">6:12</div>197 <div class="status-right">198 <div class="status-icon" title="Silent">199 <svg viewBox="0 0 24 24"><path d="M12 4a7 7 0 0 0-7 7v4h3l4 4 4-4h3v-4a7 7 0 0 0-7-7z"/></svg>200 </div>201 <div class="status-icon" title="Transit">202 <svg viewBox="0 0 24 24"><path d="M7 2h10a3 3 0 0 1 3 3v9a5 5 0 0 1-5 5H9a5 5 0 0 1-5-5V5a3 3 0 0 1 3-3zm2 13h6m-9-7h12"/></svg>203 </div>204 <div class="status-icon" title="Mail">205 <svg viewBox="0 0 24 24"><path d="M2 5h20v14H2z"/><path d="M2 5l10 7 10-7"/></svg>206 </div>207 <div class="status-icon" title="Notifications">208 <svg viewBox="0 0 24 24"><path d="M12 22a2 2 0 0 0 2-2H10a2 2 0 0 0 2 2zm8-6V11a8 8 0 0 0-16 0v5l-2 2h20z"/></svg>209 </div>210 <div class="status-icon" title="Location">211 <svg viewBox="0 0 24 24"><path d="M12 2l7 7-7 13-7-13z"/></svg>212 </div>213 <div class="status-icon" title="Wi‑Fi">214 <svg viewBox="0 0 24 24"><path d="M2 9a16 16 0 0 1 20 0M5 12a11 11 0 0 1 14 0M8 15a6 6 0 0 1 8 0"/><circle cx="12" cy="19" r="2"/></svg>215 </div>216 <div class="status-icon" title="Battery">217 <svg viewBox="0 0 24 24"><rect x="3" y="7" width="17" height="10" rx="2"/><rect x="21" y="10" width="2" height="4"/></svg>218 </div>219 </div>220 </div>221 222 <!-- Duration pill -->223 <div class="duration-pill">224 <div class="duration-left">225 <div class="sun-icon" title="condition">226 <svg viewBox="0 0 24 24" fill="#F9C846">227 <circle cx="12" cy="12" r="5"/>228 <path d="M12 1v3M12 20v3M1 12h3M20 12h3M4 4l2 2M18 18l2 2M4 20l2-2M18 6l2-2"/>229 </svg>230 </div>231 <div class="duration-text">113 min <span>/ 12:35</span></div>232 </div>233 <div class="share-btn" title="Share">234 <svg viewBox="0 0 24 24"><circle cx="6" cy="12" r="2"/><circle cx="18" cy="6" r="2"/><circle cx="18" cy="18" r="2"/><path d="M8 12l8-6M8 12l8 6" stroke="#6f3f9f" stroke-width="2" fill="none"/></svg>235 </div>236 </div>237 238 <!-- Left action bubbles -->239 <div class="left-actions">240 <div class="circle-btn" title="Back">241 <svg viewBox="0 0 24 24" fill="#4A4A4A"><path d="M15 6l-6 6 6 6"/></svg>242 </div>243 <div class="circle-btn" title="Feedback">244 <svg viewBox="0 0 24 24" fill="#1e88e5">245 <path d="M4 4h16v14H8l-4 4z"/>246 <path d="M12 8v6" stroke="#fff" stroke-width="2"/>247 <circle cx="12" cy="16.5" r="1.4" fill="#fff"/>248 </svg>249 </div>250 </div>251 252 <!-- Right action bubbles -->253 <div class="right-actions">254 <div class="circle-btn red" title="Stop">255 <svg viewBox="0 0 24 24"><path d="M6 6l12 12M18 6l-12 12" stroke="#d24d57" stroke-width="3" fill="none"/></svg>256 </div>257 <div class="circle-btn blue" title="Mute">258 <svg viewBox="0 0 24 24">259 <path d="M4 9v6h4l5 4V5L8 9H4z" />260 <path d="M18 8l4 8" stroke="#1e88e5" stroke-width="2" fill="none"/>261 <path d="M20 8l-8 8" stroke="#1e88e5" stroke-width="2" fill="none"/>262 </svg>263 </div>264 </div>265 266 <!-- Blue location dot and route -->267 <div class="blue-dot"></div>268 <div class="route-line"></div>269 270 <!-- Floating controls on right lower -->271 <div class="floating-controls">272 <div class="circle-btn" title="Route Options">273 <svg viewBox="0 0 24 24" fill="#1e88e5">274 <path d="M4 12a4 4 0 0 1 8 0v5a4 4 0 1 0 8 0"/>275 <circle cx="6" cy="12" r="2" fill="#fff"/>276 <circle cx="12" cy="17" r="2" fill="#fff"/>277 <circle cx="18" cy="17" r="2" fill="#fff"/>278 </svg>279 </div>280 <div class="circle-btn" title="Recenter">281 <svg viewBox="0 0 24 24" fill="#1e88e5">282 <circle cx="12" cy="12" r="3" fill="#fff"/>283 <path d="M12 2v4M12 18v4M2 12h4M18 12h4"/>284 <circle cx="12" cy="12" r="8" fill="none" stroke="#1e88e5" stroke-width="2"/>285 </svg>286 </div>287 </div>288 289 <!-- Google watermark -->290 <div class="google-label">Google</div>291 292 <!-- Bottom sheet card -->293 <div class="bottom-sheet">294 <div class="pager-dots">295 <span></span><span class="active"></span><span></span><span></span><span></span><span></span>296 </div>297 <div class="sheet-header">298 <div class="header-left">299 <svg viewBox="0 0 24 24" width="54" height="54" fill="#1e88e5">300 <path d="M15 4H9l-2 5h10zM7 9v10h3v-4h4v4h3V9H7z"/>301 </svg>302 <div>Walk to <span style="color:#1e88e5">Orléans</span></div>303 </div>304 <div class="header-right">305 <div class="ring"></div>306 <div>6 min</div>307 </div>308 </div>309 310 <div class="step">311 <div class="step-icon">312 <svg viewBox="0 0 24 24" width="56" height="56" fill="#607d8b">313 <path d="M13 5a2 2 0 1 1-4 0 2 2 0 0 1 4 0zM6 22l3-7 2 2 2 5h3l-3-8 3-3-2-2-4 3-3 10z"/>314 </svg>315 </div>316 <div class="step-text">317 Walk North on <span class="em">Rue de la République</span>318 </div>319 </div>320 321 <div class="divider"></div>322 323 <div class="step">324 <div class="step-icon">325 <svg viewBox="0 0 24 24" width="56" height="56" fill="#90a4ae">326 <path d="M12 3l9 6-9 6-9-6 9-6zm0 12v6" />327 </svg>328 </div>329 <div class="step-text">In 205 m, continue straight</div>330 </div>331 </div>332 333</div>334</body>335</html>