GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Route Planner UI Mock</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8 #render-target {9 position: relative;10 width: 1080px;11 height: 2400px;12 overflow: hidden;13 background: #F5F6F8;14 }15 16 /* Status bar */17 .status-bar {18 position: absolute;19 top: 0;20 left: 0;21 width: 1080px;22 height: 90px;23 display: flex;24 align-items: center;25 padding: 0 40px;26 color: #111;27 font-size: 32px;28 }29 .status-left { display: flex; align-items: center; gap: 18px; }30 .status-right { margin-left: auto; display: flex; align-items: center; gap: 24px; color: #555; }31 .icon { display: inline-flex; align-items: center; justify-content: center; }32 33 /* Header row with back + options */34 .top-controls {35 position: absolute;36 top: 100px;37 left: 24px;38 right: 24px;39 height: 70px;40 display: flex;41 align-items: center;42 gap: 24px;43 color: #333;44 }45 .round-icon {46 width: 48px;47 height: 48px;48 border-radius: 50%;49 background: #EFEFF1;50 display: flex;51 align-items: center;52 justify-content: center;53 }54 55 /* Search area */56 .search-area {57 position: absolute;58 top: 160px;59 left: 40px;60 right: 40px;61 }62 .search-row {63 display: flex;64 align-items: center;65 gap: 16px;66 margin-bottom: 18px;67 }68 .pill {69 flex: 1;70 height: 110px;71 border-radius: 20px;72 background: #FFFFFF;73 box-shadow: 0 2px 0 rgba(0,0,0,0.06);74 border: 1px solid #E6E6E9;75 display: flex;76 align-items: center;77 padding: 0 28px;78 gap: 20px;79 }80 .pill .label {81 font-size: 38px;82 color: #777;83 }84 .pill .label.hint {85 color: #2A2A2A;86 }87 .dot-menu {88 width: 40px;89 display: flex;90 flex-direction: column;91 gap: 8px;92 align-items: center;93 justify-content: center;94 }95 .mini-dot {96 width: 8px; height: 8px; background: #8A8A8A; border-radius: 50%;97 }98 99 .swap {100 width: 60px;101 height: 110px;102 display: flex;103 align-items: center;104 justify-content: center;105 }106 107 /* Transport mode chips */108 .modes {109 position: absolute;110 top: 410px;111 left: 120px;112 width: 840px;113 display: flex;114 gap: 60px;115 align-items: center;116 }117 .mode {118 width: 140px;119 height: 100px;120 border-radius: 28px;121 background: #E9F0FF;122 display: flex;123 align-items: center;124 justify-content: center;125 }126 .mode.active {127 background: #DCE7FF;128 border: 2px solid #4285F4;129 }130 131 /* Divider */132 .divider {133 position: absolute;134 top: 520px;135 left: 0;136 right: 0;137 height: 2px;138 background: #E7E7EA;139 }140 141 /* List items */142 .list {143 position: absolute;144 top: 530px;145 left: 0;146 right: 0;147 padding: 0 36px;148 }149 .item {150 display: flex;151 align-items: flex-start;152 gap: 26px;153 padding: 28px 8px;154 border-bottom: 1px solid #E7E7EA;155 background: #FDFDFD;156 }157 .item .icon-box {158 width: 72px; height: 72px; border-radius: 36px; background: #EFF1F5;159 display: flex; align-items: center; justify-content: center;160 }161 .item .texts { flex: 1; }162 .item .title { font-size: 44px; color: #202124; }163 .item .subtitle { margin-top: 12px; font-size: 34px; color: #6B6F74; }164 165 /* Bottom empty area to mimic screenshot spacing */166 .bottom-space {167 position: absolute;168 bottom: 0;169 left: 0;170 right: 0;171 height: 1100px;172 background: #F7F8FA;173 }174 175 /* SVG helper styles */176 svg { display: block; }177</style>178</head>179<body>180<div id="render-target">181 182 <!-- Status bar -->183 <div class="status-bar">184 <div class="status-left">185 <span>5:25</span>186 <span class="icon" title="weather">16°</span>187 <span class="icon" title="notifications">🔔</span>188 <span class="icon" title="mail">✉️</span>189 <span class="icon" title="dot">•</span>190 </div>191 <div class="status-right">192 <!-- Location -->193 <svg width="34" height="34" viewBox="0 0 24 24">194 <path d="M12 2c3.3 0 6 2.7 6 6 0 4.5-6 14-6 14S6 12.5 6 8c0-3.3 2.7-6 6-6zm0 8a2 2 0 1 0 0-4 2 2 0 0 0 0 4z" fill="#555"/>195 </svg>196 <!-- WiFi -->197 <svg width="40" height="34" viewBox="0 0 24 24">198 <path d="M2 8c5.5-4.5 14.5-4.5 20 0l-2 2c-4-3-12-3-16 0L2 8zm4 4c3.5-2.5 8.5-2.5 12 0l-2 2c-2.5-1.8-5.5-1.8-8 0l-2-2zm4 4 2 2 2-2-2-2-2 2z" fill="#555"/>199 </svg>200 <!-- Battery -->201 <svg width="46" height="34" viewBox="0 0 24 24">202 <rect x="2" y="6" width="18" height="12" rx="2" ry="2" fill="#555"/>203 <rect x="21" y="10" width="2" height="4" fill="#555"/>204 <rect x="4" y="8" width="14" height="8" fill="#9FD36D"/>205 </svg>206 </div>207 </div>208 209 <!-- Back and small circle -->210 <div class="top-controls">211 <div class="round-icon">212 <!-- Back Arrow -->213 <svg width="38" height="38" viewBox="0 0 24 24">214 <path d="M15 5 7 12l8 7" stroke="#333" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>215 </svg>216 </div>217 <div class="round-icon">218 <svg width="18" height="18" viewBox="0 0 24 24">219 <circle cx="12" cy="12" r="7" fill="#777"/>220 </svg>221 </div>222 </div>223 224 <!-- Search inputs -->225 <div class="search-area">226 <div class="search-row">227 <div class="pill">228 <span class="label">Choose start location</span>229 </div>230 </div>231 <div class="search-row">232 <!-- small vertical dots -->233 <div class="dot-menu">234 <div class="mini-dot"></div>235 <div class="mini-dot"></div>236 <div class="mini-dot"></div>237 </div>238 239 <!-- pin icon -->240 <div class="round-icon" style="background:#FFF; border:1px solid #E6E6E9;">241 <svg width="28" height="28" viewBox="0 0 24 24">242 <path d="M12 2c3.5 0 6.5 3 6.5 6.5 0 4.9-6.5 13.5-6.5 13.5S5.5 13.4 5.5 8.5C5.5 5 8.5 2 12 2zm0 9a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5z" fill="#D84A3B"/>243 </svg>244 </div>245 246 <div class="pill">247 <span class="label hint">Home</span>248 </div>249 250 <div class="swap">251 <svg width="40" height="40" viewBox="0 0 24 24">252 <path d="M7 17v-8l-3 3M7 9l3 3" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>253 <path d="M17 7v8l3-3M17 15l-3-3" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>254 </svg>255 </div>256 </div>257 </div>258 259 <!-- Transport modes -->260 <div class="modes">261 <div class="mode active" title="Car">262 <svg width="58" height="40" viewBox="0 0 24 24">263 <path d="M4 14l2-5h12l2 5v3H4v-3z" fill="#4285F4"/>264 <circle cx="8" cy="17" r="2" fill="#1A73E8"/>265 <circle cx="16" cy="17" r="2" fill="#1A73E8"/>266 </svg>267 </div>268 <div class="mode" title="Motorbike">269 <svg width="58" height="40" viewBox="0 0 24 24">270 <circle cx="6" cy="17" r="3" fill="#5F6368"/>271 <circle cx="18" cy="17" r="3" fill="#5F6368"/>272 <path d="M9 16h5l3-4h-4l-2-3" stroke="#5F6368" stroke-width="2" fill="none" stroke-linecap="round"/>273 </svg>274 </div>275 <div class="mode" title="Transit">276 <svg width="58" height="40" viewBox="0 0 24 24">277 <rect x="5" y="5" width="14" height="12" rx="2" fill="#5F6368"/>278 <rect x="7" y="7" width="10" height="4" fill="#FFF"/>279 <circle cx="9" cy="16" r="1.5" fill="#FFF"/>280 <circle cx="15" cy="16" r="1.5" fill="#FFF"/>281 </svg>282 </div>283 <div class="mode" title="Walking">284 <svg width="58" height="40" viewBox="0 0 24 24">285 <circle cx="12" cy="6" r="2" fill="#5F6368"/>286 <path d="M12 8l-2 4-3 2m5-6l3 4 3 2m-6 0l-1 5m4-3l2 3" stroke="#5F6368" stroke-width="2" fill="none" stroke-linecap="round"/>287 </svg>288 </div>289 </div>290 291 <div class="divider"></div>292 293 <!-- List of locations -->294 <div class="list">295 <div class="item" style="background:#FFFFFF;">296 <div class="icon-box">297 <svg width="34" height="34" viewBox="0 0 24 24">298 <path d="M12 3l9 7v9H3v-9l9-7z" fill="#3E7BFA"/>299 <rect x="7" y="13" width="10" height="6" fill="#FFFFFF"/>300 </svg>301 </div>302 <div class="texts">303 <div class="title">Home</div>304 <div class="subtitle">Via Giuseppe Verdi, 18, Ivrea TO, Italy</div>305 </div>306 </div>307 308 <div class="item">309 <div class="icon-box">310 <!-- clock -->311 <svg width="34" height="34" viewBox="0 0 24 24">312 <circle cx="12" cy="12" r="9" fill="#E0E3E7"/>313 <path d="M12 7v6l4 2" stroke="#6B6F74" stroke-width="2" fill="none" stroke-linecap="round"/>314 </svg>315 </div>316 <div class="texts">317 <div class="title">Ristorante Pizzeria Positano</div>318 <div class="subtitle">Via Torino, Biella BI, Italy</div>319 </div>320 </div>321 322 <div class="item">323 <div class="icon-box">324 <svg width="34" height="34" viewBox="0 0 24 24">325 <circle cx="12" cy="12" r="9" fill="#E0E3E7"/>326 <path d="M12 7v6l4 2" stroke="#6B6F74" stroke-width="2" fill="none" stroke-linecap="round"/>327 </svg>328 </div>329 <div class="texts">330 <div class="title">Via dei Mulini</div>331 <div class="subtitle">Ivrea TO, Italy</div>332 </div>333 </div>334 335 <div class="item">336 <div class="icon-box">337 <svg width="34" height="34" viewBox="0 0 24 24">338 <circle cx="12" cy="12" r="9" fill="#E0E3E7"/>339 <path d="M12 7v6l4 2" stroke="#6B6F74" stroke-width="2" fill="none" stroke-linecap="round"/>340 </svg>341 </div>342 <div class="texts">343 <div class="title">Via Giuseppe Verdi, 1A</div>344 <div class="subtitle">Ivrea TO, Italy</div>345 </div>346 </div>347 348 <div class="item" style="border-bottom: none;">349 <div class="icon-box">350 <svg width="34" height="34" viewBox="0 0 24 24">351 <circle cx="12" cy="12" r="9" fill="#E0E3E7"/>352 <path d="M12 7v6l4 2" stroke="#6B6F74" stroke-width="2" fill="none" stroke-linecap="round"/>353 </svg>354 </div>355 <div class="texts">356 <div class="title">Carrefour Express - Supermarket</div>357 <div class="subtitle">Via Aosta, Montalto Dora TO, Italy</div>358 </div>359 </div>360 </div>361 362 <!-- Spacer to mimic bottom blank area -->363 <div class="bottom-space"></div>364 365</div>366</body>367</html>