GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Map Navigation UI Mock</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7 #render-target {8 width: 1080px; height: 2400px;9 position: relative; overflow: hidden;10 background: #eef1f4;11 border-radius: 24px;12 box-shadow: 0 10px 30px rgba(0,0,0,0.15);13 }14 15 /* Status bar */16 .status-bar {17 position: absolute; top: 0; left: 0; right: 0;18 height: 110px; padding: 0 24px;19 display: flex; align-items: center; justify-content: space-between;20 color: #2f2f2f; font-weight: 600; font-size: 36px;21 }22 .sb-icons { display: flex; gap: 26px; align-items: center; }23 .sb-dot { width: 22px; height: 22px; background:#202020; border-radius: 4px; opacity: 0.8; }24 .sb-signal { width: 40px; height: 28px; border: 3px solid #4a4a4a; border-radius: 6px; position: relative; }25 .sb-signal:after { content:""; position:absolute; right:-14px; top:50%; transform:translateY(-50%); width:20px; height:20px; border:3px solid #4a4a4a; border-radius: 3px; }26 .sb-battery { width: 50px; height: 24px; border:3px solid #4a4a4a; border-radius:6px; position: relative; }27 .sb-battery:after { content:""; position:absolute; right:-10px; top:8px; width:10px; height:8px; background:#4a4a4a; border-radius:2px; }28 29 /* Map area */30 .map {31 position: absolute;32 top: 110px; left: 0; right: 0; bottom: 380px;33 background: #e7eaed;34 border-top: 1px solid #d6d9dc;35 }36 .map::before {37 content: "[IMG: Google Map]";38 position: absolute; left: 50%; top: 50%;39 transform: translate(-50%, -50%);40 color: #757575; font-size: 34px; letter-spacing: 0.5px;41 padding: 8px 18px; border: 1px solid #bdbdbd; background: #E0E0E0;42 border-radius: 8px;43 }44 45 /* Blue route approximation */46 .route .seg {47 position: absolute; background: #2A73FF; border-radius: 18px;48 box-shadow: 0 0 0 6px rgba(42,115,255,0.2) inset;49 }50 /* segments positioned roughly to resemble the screenshot */51 .seg.s1 { width: 28px; height: 420px; right: 455px; top: 1280px; }52 .seg.s2 { width: 28px; height: 220px; right: 455px; top: 1060px; transform: rotate(0deg); }53 .seg.s3 { width: 480px; height: 28px; left: 120px; bottom: 720px; }54 .seg.s4 { width: 320px; height: 28px; left: 370px; bottom: 840px; transform: rotate(12deg); }55 .seg.s5 { width: 520px; height: 28px; right: 120px; top: 950px; }56 57 /* Green navigation banners */58 .banner {59 position: absolute; top: 160px; left: 24px; width: 900px; height: 170px;60 background: #2a8a3c; color: #fff; border-radius: 30px;61 display: flex; align-items: center; padding: 0 36px; gap: 28px;62 box-shadow: 0 10px 20px rgba(0,0,0,0.15);63 }64 .banner .text-main { font-size: 72px; font-weight: 700; }65 .small-banner {66 position: absolute; top: 320px; left: 24px; width: 260px; height: 120px;67 background: #2a8a3c; color: #fff; border-radius: 26px;68 display: flex; align-items: center; padding: 0 30px; gap: 18px;69 font-size: 42px; font-weight: 700;70 box-shadow: 0 10px 20px rgba(0,0,0,0.12);71 }72 .circle-btn {73 position: absolute; right: 26px; top: 170px;74 width: 140px; height: 140px; background:#fff; border-radius: 50%;75 box-shadow: 0 8px 18px rgba(0,0,0,0.15);76 display: flex; align-items: center; justify-content: center;77 }78 79 /* Right-side vertical controls */80 .control {81 position: absolute; right: 34px; width: 128px; height: 128px;82 background: #fff; border-radius: 50%;83 box-shadow: 0 8px 18px rgba(0,0,0,0.15);84 display: flex; align-items: center; justify-content: center;85 }86 .control.c1 { top: 370px; }87 .control.c2 { top: 570px; }88 .control.c3 { top: 830px; }89 .control.c4 { top: 1060px; }90 91 /* Speedometer bubble */92 .speedo {93 position: absolute; left: 50px; bottom: 720px;94 width: 144px; height: 144px; background:#fff; border-radius: 50%;95 box-shadow: 0 8px 18px rgba(0,0,0,0.15);96 display: flex; align-items: center; justify-content: center;97 color: #3a3a3a; font-size: 40px; font-weight: 700;98 }99 .speedo span { font-size: 32px; font-weight: 600; color: #7a7a7a; }100 101 /* Bottom navigation panel */102 .nav-panel {103 position: absolute; left: 0; right: 0; bottom: 220px;104 height: 230px; background: #fff;105 border-top-left-radius: 34px; border-top-right-radius: 34px;106 box-shadow: 0 -8px 20px rgba(0,0,0,0.12);107 }108 .nav-panel .content {109 position: absolute; left: 24px; right: 24px; top: 24px; bottom: 24px;110 display: flex; align-items: center; justify-content: space-between;111 }112 .nav-left, .nav-right { display: flex; align-items: center; gap: 24px; }113 .circle {114 width: 120px; height: 120px; background:#fff; border-radius: 50%;115 box-shadow: 0 6px 16px rgba(0,0,0,0.15);116 display: flex; align-items: center; justify-content: center;117 }118 .mid-info { text-align: center; color: #1b5e20; }119 .mid-info .handle { width: 140px; height: 12px; background:#d8d8d8; border-radius: 8px; margin: 0 auto 16px; }120 .mid-info .time { font-size: 72px; font-weight: 800; margin-bottom: 6px; }121 .mid-info .sub { font-size: 36px; color: #616161; }122 123 /* Bottom black control bar */124 .bottom-bar {125 position: absolute; left: 0; right: 0; bottom: 0;126 height: 220px; background: #0f0f11; color: #fff;127 padding: 30px;128 }129 .bb-content { display: flex; align-items: center; justify-content: space-between; }130 .gesture {131 position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%);132 width: 280px; height: 14px; background: #bdbdbd; border-radius: 8px; opacity: 0.7;133 }134 .right-grid {135 width: 120px; height: 120px; background: #3a3a3a; border-radius: 22px;136 display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr);137 gap: 12px; padding: 14px;138 }139 .right-grid div { background: #777; border-radius: 10px; }140 141 /* Simple label under route arrow (blue) */142 .turn-badge {143 position: absolute; left: 18px; bottom: 900px;144 background: #2A73FF; color:#fff; font-weight:700;145 padding: 16px 18px; border-radius: 18px;146 display:flex; align-items:center; gap:14px;147 box-shadow: 0 8px 16px rgba(42,115,255,0.35);148 }149 .turn-badge small { font-size: 34px; }150 151 /* SVG helpers */152 .svg-icon { width: 72px; height: 72px; }153 .svg-large { width: 96px; height: 96px; }154 .arrow-up { width: 96px; height: 96px; }155</style>156</head>157<body>158<div id="render-target">159 160 <!-- Status bar -->161 <div class="status-bar">162 <div>1:49</div>163 <div class="sb-icons">164 <div class="sb-dot"></div>165 <div class="sb-dot"></div>166 <div class="sb-dot"></div>167 <div class="sb-dot"></div>168 <div class="sb-signal"></div>169 <div class="sb-battery"></div>170 </div>171 </div>172 173 <!-- Map content -->174 <div class="map">175 <!-- Approximate blue route -->176 <div class="route">177 <div class="seg s5"></div>178 <div class="seg s2"></div>179 <div class="seg s1"></div>180 <div class="seg s4"></div>181 <div class="seg s3"></div>182 </div>183 </div>184 185 <!-- Instruction banners -->186 <div class="banner">187 <!-- Up arrow icon -->188 <svg class="arrow-up" viewBox="0 0 24 24">189 <path fill="#ffffff" d="M12 3l6 6h-4v12H10V9H6z"/>190 </svg>191 <div class="text-main">Head east</div>192 </div>193 194 <!-- Search circle overlapping top right -->195 <div class="circle-btn">196 <svg class="svg-large" viewBox="0 0 24 24">197 <circle cx="10" cy="10" r="7" stroke="#1b1b1b" stroke-width="2" fill="none"/>198 <line x1="15.5" y1="15.5" x2="22" y2="22" stroke="#1b1b1b" stroke-width="2" />199 </svg>200 </div>201 202 <div class="small-banner">203 <div>Then</div>204 <svg class="svg-icon" viewBox="0 0 24 24">205 <path fill="#ffffff" d="M5 4h9l5 5v2H12v7H8V8H5z"/>206 </svg>207 </div>208 209 <!-- Right-side controls -->210 <div class="control c1">211 <!-- Speaker icon -->212 <svg class="svg-large" viewBox="0 0 24 24">213 <path fill="#202020" d="M3 9h4l5-4v14l-5-4H3z"/>214 <path fill="none" stroke="#202020" stroke-width="2" d="M16 8c2 2 2 6 0 8"/>215 <path fill="none" stroke="#202020" stroke-width="2" d="M18 5c3 3 3 11 0 14"/>216 </svg>217 </div>218 219 <div class="control c2">220 <!-- Compass arrow icon -->221 <svg class="svg-large" viewBox="0 0 24 24">222 <circle cx="12" cy="12" r="10" fill="#ffffff" stroke="#444" stroke-width="2"/>223 <path d="M12 5l4 12-4-3-4 3z" fill="#e53935"/>224 </svg>225 </div>226 227 <div class="control c3">228 <!-- Message bubble with plus -->229 <svg class="svg-large" viewBox="0 0 24 24">230 <path fill="#202020" d="M4 4h16v12H8l-4 4z"/>231 <path fill="#ffffff" d="M11 8h2v8h-2zM8 11h8v2H8z"/>232 </svg>233 </div>234 235 <div class="control c4">236 <!-- Simple add icon -->237 <svg class="svg-large" viewBox="0 0 24 24">238 <circle cx="12" cy="12" r="10" fill="#fff" stroke="#444" stroke-width="2"/>239 <path d="M12 7v10M7 12h10" stroke="#202020" stroke-width="2"/>240 </svg>241 </div>242 243 <!-- Speedometer -->244 <div class="speedo">--<span> km/h</span></div>245 246 <!-- Small turn badge on route -->247 <div class="turn-badge">248 <svg class="svg-icon" viewBox="0 0 24 24">249 <path fill="#ffffff" d="M7 5h8l4 4v2H12v8H8V9H7z"/>250 </svg>251 <small>Turn</small>252 </div>253 254 <!-- Bottom navigation panel -->255 <div class="nav-panel">256 <div class="content">257 <div class="nav-left">258 <div class="circle">259 <!-- Close X -->260 <svg class="svg-large" viewBox="0 0 24 24">261 <path d="M5 5l14 14M19 5L5 19" stroke="#1b1b1b" stroke-width="2" />262 </svg>263 </div>264 </div>265 <div class="mid-info">266 <div class="handle"></div>267 <div class="time">35 min</div>268 <div class="sub">23 km • 2:24 PM</div>269 </div>270 <div class="nav-right">271 <div class="circle">272 <!-- Route arrows -->273 <svg class="svg-large" viewBox="0 0 24 24">274 <path fill="none" stroke="#1b1b1b" stroke-width="2" d="M5 19h6l-3-3m8-11H9l3 3"/>275 <path fill="none" stroke="#1b1b1b" stroke-width="2" d="M16 19V8M8 5v11"/>276 </svg>277 </div>278 </div>279 </div>280 </div>281 282 <!-- Bottom black bar -->283 <div class="bottom-bar">284 <div class="bb-content">285 <!-- Microphone icon -->286 <svg class="svg-large" viewBox="0 0 24 24">287 <path fill="#ffffff" d="M12 2a4 4 0 014 4v6a4 4 0 11-8 0V6a4 4 0 014-4z"/>288 <path fill="none" stroke="#ffffff" stroke-width="2" d="M5 10c0 5 3 8 7 8s7-3 7-8M12 18v4"/>289 </svg>290 <div class="right-grid">291 <div></div><div></div><div></div><div></div>292 </div>293 </div>294 <div class="gesture"></div>295 </div>296 297</div>298</body>299</html>