GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Directions UI Mock</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: Arial, sans-serif; }8 #render-target {9 width: 1080px; height: 2400px;10 position: relative; overflow: hidden;11 background: #ffffff; border-radius: 24px;12 box-shadow: 0 6px 24px rgba(0,0,0,0.12);13 }14 15 /* Status bar */16 .status-bar {17 height: 80px; padding: 24px 28px 0 28px; box-sizing: border-box; color: #333;18 font-size: 32px; display: flex; align-items: center; justify-content: space-between;19 }20 .status-right { display: flex; gap: 18px; align-items: center; color: #666; }21 .dot { width: 8px; height: 8px; background:#777; border-radius:50%; display:inline-block; }22 23 /* Top actions and fields */24 .top-actions {25 display: flex; align-items: center; gap: 24px;26 padding: 8px 24px 8px 24px; color:#444;27 }28 .icon-btn {29 width: 64px; height: 64px; border-radius: 32px;30 display:flex; align-items:center; justify-content:center;31 }32 .fields { padding: 8px 24px 0 24px; }33 .field {34 height: 104px; border: 1px solid #E0E0E0; border-radius: 24px; background:#fff;35 display:flex; align-items:center; padding: 0 24px; margin: 16px 0; box-shadow: 0 2px 0 rgba(0,0,0,0.02);36 }37 .field .left { display:flex; align-items:center; gap:18px; color:#222; font-size: 36px; }38 .field .right { margin-left:auto; display:flex; align-items:center; gap:16px; color:#666; }39 .chip-row {40 display:flex; align-items:center; gap:28px; padding: 16px 24px; color:#555;41 }42 .chip {43 height: 84px; padding: 0 28px; border-radius: 42px; border:1px solid #DADADA;44 display:flex; align-items:center; gap:16px; font-size:32px; color:#333; background:#fff;45 }46 .chip.selected {47 background:#E8F0FE; border-color:#A8C6FF; color:#1A73E8; font-weight:600;48 }49 .chip .chip-ico { width:40px; height:40px; display:flex; align-items:center; justify-content:center; }50 51 /* Map area */52 .map-area {53 position:absolute; left:0; right:0; top:380px; bottom:540px;54 padding-top:12px;55 }56 .map-placeholder {57 position:absolute; left:0; top:0; width:1080px; height:1480px;58 background:#E0E0E0; border:1px solid #BDBDBD; color:#757575;59 display:flex; align-items:center; justify-content:center; font-size:34px;60 }61 .floating-stack { position:absolute; right:28px; top:520px; display:flex; flex-direction:column; gap:18px; }62 .fab {63 width:112px; height:112px; border-radius:56px; background:#fff;64 box-shadow:0 8px 20px rgba(0,0,0,0.18); display:flex; align-items:center; justify-content:center;65 }66 .fab.red { border: 4px solid #EA4335; }67 .help-fab {68 position:absolute; right:36px; bottom:980px; width:118px; height:118px; border-radius:59px;69 background:#fff; box-shadow:0 8px 22px rgba(0,0,0,0.2); display:flex; align-items:center; justify-content:center;70 border: 4px solid #FF6B6B;71 }72 73 /* Route cards on map */74 .route-card {75 position:absolute; background:#fff; border-radius:24px; box-shadow:0 6px 16px rgba(0,0,0,0.18);76 padding:22px 26px; font-size:34px; color:#333; border: 1px solid #ddd;77 }78 .route-card.small { font-size:32px; padding:18px 22px; }79 .route-card.blue { background:#1A73E8; color:#fff; border-color:#1767ce; }80 .route-tag-icon {81 width:40px; height:40px; border-radius:20px; background:#FFA726; display:inline-flex; align-items:center; justify-content:center;82 margin-right:14px;83 }84 85 /* Bottom sheet */86 .bottom-sheet {87 position:absolute; left:0; right:0; bottom:0; height:620px; background:#fff;88 border-top-left-radius:34px; border-top-right-radius:34px; box-shadow:0 -12px 24px rgba(0,0,0,0.12);89 padding:18px 28px;90 }91 .handle { width:160px; height:12px; background:#E0E0E0; border-radius:6px; margin:0 auto 18px auto; }92 .summary-title { font-size:48px; color:#1A73E8; font-weight:700; margin:18px 0 6px 0; }93 .summary-sub { font-size:34px; color:#666; margin-top:12px; }94 .badges { display:flex; gap:22px; align-items:center; margin-top:18px; color:#666; font-size:32px; }95 .badge-ico {96 width:36px; height:36px; border-radius:18px; border:2px solid #777; display:inline-flex; align-items:center; justify-content:center; margin-right:10px;97 }98 .actions { display:flex; gap:24px; margin-top:34px; }99 .action-btn {100 height:112px; padding:0 36px; border-radius:56px; border:1px solid #DADADA; background:#fff;101 display:flex; align-items:center; gap:18px; font-size:36px; color:#1A73E8; font-weight:600;102 box-shadow:0 2px 6px rgba(0,0,0,0.06);103 }104 .action-btn.primary { background:#1A73E8; color:#fff; border-color:#1A73E8; }105 .gesture-bar {106 position:absolute; bottom:22px; left:50%; transform:translateX(-50%);107 width:380px; height:12px; background:#BDBDBD; border-radius:8px;108 }109 110 /* Simple icon colors */111 .gray { color:#666; }112 .red { color:#EA4335; }113 114 /* Utility for tiny text labels inside route cards */115 .muted { color:#999; font-size:30px; }116</style>117</head>118<body>119<div id="render-target">120 121 <!-- Status bar -->122 <div class="status-bar">123 <div>6:13</div>124 <div class="status-right">125 <!-- simple placeholders for status icons -->126 <svg width="42" height="28"><rect x="2" y="6" width="28" height="16" rx="4" fill="#666"/><rect x="32" y="10" width="8" height="8" rx="2" fill="#666"/></svg>127 <svg width="34" height="30"><rect x="2" y="4" width="22" height="22" rx="4" fill="#666"/><rect x="26" y="10" width="6" height="10" fill="#666"/></svg>128 <span class="dot"></span>129 </div>130 </div>131 132 <!-- Top actions -->133 <div class="top-actions">134 <div class="icon-btn">135 <svg width="44" height="44" viewBox="0 0 24 24">136 <path d="M14 6l-6 6 6 6" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>137 </svg>138 </div>139 <div class="icon-btn">140 <svg width="44" height="44" viewBox="0 0 24 24">141 <circle cx="12" cy="12" r="9" stroke="#555" stroke-width="2" fill="none"/>142 </svg>143 </div>144 </div>145 146 <!-- Fields -->147 <div class="fields">148 <div class="field">149 <div class="left">150 <svg width="40" height="40" viewBox="0 0 24 24">151 <circle cx="12" cy="12" r="8" fill="#4CAF50"/>152 </svg>153 <div>Philadelphia</div>154 </div>155 <div class="right">156 <svg width="40" height="40" viewBox="0 0 24 24">157 <circle cx="5" cy="12" r="2" fill="#666"/>158 <circle cx="12" cy="12" r="2" fill="#666"/>159 <circle cx="19" cy="12" r="2" fill="#666"/>160 </svg>161 </div>162 </div>163 <div class="field">164 <div class="left">165 <svg width="40" height="40" viewBox="0 0 24 24">166 <path d="M12 2c-4.4 0-8 3.5-8 7.8 0 5.7 8 11.2 8 11.2s8-5.5 8-11.2C20 5.5 16.4 2 12 2z" fill="#EA4335"/>167 <circle cx="12" cy="9.2" r="3.2" fill="#fff"/>168 </svg>169 <div>New York</div>170 </div>171 <div class="right">172 <!-- swap arrows -->173 <svg width="44" height="44" viewBox="0 0 24 24">174 <path d="M7 5l-3 3h6z" fill="#666"/><rect x="4" y="8" width="2" height="10" fill="#666"/>175 <path d="M17 19l3-3h-6z" fill="#666"/><rect x="18" y="6" width="2" height="10" fill="#666"/>176 </svg>177 </div>178 </div>179 </div>180 181 <!-- Mode tabs -->182 <div class="chip-row">183 <div class="chip selected">184 <div class="chip-ico">185 <!-- car icon -->186 <svg width="40" height="28" viewBox="0 0 40 24">187 <rect x="6" y="8" width="28" height="10" rx="2" fill="#1A73E8"/>188 <circle cx="12" cy="20" r="3" fill="#1A73E8"/>189 <circle cx="28" cy="20" r="3" fill="#1A73E8"/>190 </svg>191 </div>192 <div>2 hr 4</div>193 </div>194 <div class="chip">195 <div class="chip-ico">196 <!-- simple motorcycle/bike -->197 <svg width="40" height="28" viewBox="0 0 40 24">198 <circle cx="10" cy="18" r="5" stroke="#666" stroke-width="2" fill="none"/>199 <circle cx="30" cy="18" r="5" stroke="#666" stroke-width="2" fill="none"/>200 <path d="M12 18h8l4-6" stroke="#666" stroke-width="2" fill="none"/>201 </svg>202 </div>203 <div>—</div>204 </div>205 <div class="chip">206 <div class="chip-ico">207 <!-- bus -->208 <svg width="40" height="28" viewBox="0 0 40 24">209 <rect x="6" y="6" width="28" height="14" rx="3" stroke="#666" stroke-width="2" fill="none"/>210 <circle cx="14" cy="20" r="2" fill="#666"/>211 <circle cx="26" cy="20" r="2" fill="#666"/>212 </svg>213 </div>214 <div>1 hr 27</div>215 </div>216 <div class="chip">217 <div class="chip-ico">218 <!-- walk -->219 <svg width="40" height="28" viewBox="0 0 24 24">220 <circle cx="12" cy="6" r="3" fill="#666"/>221 <path d="M12 9l-3 5 3 4 4-6" stroke="#666" stroke-width="2" fill="none"/>222 </svg>223 </div>224 <div>1 day</div>225 </div>226 <div class="chip">227 <div class="chip-ico">228 <!-- runner/person -->229 <svg width="40" height="28" viewBox="0 0 24 24">230 <circle cx="12" cy="5" r="3" fill="#666"/>231 <path d="M10 8l-3 6 5 4 4-6" stroke="#666" stroke-width="2" fill="none"/>232 </svg>233 </div>234 <div>2 hr 4</div>235 </div>236 </div>237 238 <!-- Map area -->239 <div class="map-area">240 <div class="map-placeholder">[IMG: Map of route from Philadelphia to New York]</div>241 242 <!-- Floating stack on right -->243 <div class="floating-stack">244 <div class="fab">245 <!-- layers icon -->246 <svg width="44" height="44" viewBox="0 0 24 24">247 <path d="M12 3l9 5-9 5-9-5 9-5zm0 8l9 5-9 5-9-5 9-5z" fill="#555"/>248 </svg>249 </div>250 <div class="fab">251 <!-- magnifier -->252 <svg width="44" height="44" viewBox="0 0 24 24">253 <circle cx="11" cy="11" r="6" stroke="#555" stroke-width="2" fill="none"/>254 <path d="M16 16l5 5" stroke="#555" stroke-width="2"/>255 </svg>256 </div>257 <div class="fab red">258 <!-- car inside red circle -->259 <svg width="44" height="44" viewBox="0 0 40 24">260 <rect x="6" y="8" width="28" height="10" rx="2" fill="#EA4335"/>261 <circle cx="12" cy="20" r="3" fill="#EA4335"/>262 <circle cx="28" cy="20" r="3" fill="#EA4335"/>263 </svg>264 </div>265 </div>266 267 <!-- Route info cards positioned on map -->268 <div class="route-card small" style="top:340px; left:540px;">269 2 hr 31 min<br><span class="muted">Tolls</span>270 </div>271 272 <div class="route-card blue" style="top:760px; left:600px;">273 2 hr 4 min<br><span class="muted" style="color:#E0E6F8;">Tolls</span>274 </div>275 276 <div class="route-card small" style="top:980px; left:260px;">277 2 hr 3 min<br><span class="muted">Tolls</span>278 </div>279 280 <div class="route-card small" style="top:820px; left:180px;">281 <span class="route-tag-icon">282 <svg width="26" height="26" viewBox="0 0 24 24">283 <path d="M3 17h10l2-6H6z" fill="#fff"/>284 </svg>285 </span>286 +7 min287 </div>288 289 <!-- Help/locate floating -->290 <div class="help-fab">291 <svg width="44" height="44" viewBox="0 0 24 24">292 <circle cx="12" cy="12" r="9" stroke="#FF6B6B" stroke-width="2" fill="none"/>293 <text x="9" y="16" font-size="14" fill="#FF6B6B">?</text>294 </svg>295 </div>296 </div>297 298 <!-- Bottom sheet -->299 <div class="bottom-sheet">300 <div class="handle"></div>301 <div class="summary-title">2 hr 4 min (94 mi)</div>302 <div class="summary-sub">Best route now due to traffic conditions</div>303 <div class="badges">304 <span class="badge-ico">ⓘ</span> Tolls305 <span class="badge-ico">ⓟ</span> Limited306 </div>307 <div class="actions">308 <div class="action-btn primary">309 <svg width="40" height="30" viewBox="0 0 40 24">310 <path d="M6 12h12M14 6l6 6-6 6" stroke="#fff" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>311 </svg>312 Preview313 </div>314 <div class="action-btn">315 <svg width="40" height="30" viewBox="0 0 24 24">316 <path d="M4 6h16M4 12h16M4 18h16" stroke="#1A73E8" stroke-width="2"/>317 </svg>318 Steps319 </div>320 <div class="action-btn">321 <svg width="40" height="30" viewBox="0 0 24 24">322 <path d="M12 3c-4 0-7 3-7 7 0 5 7 10 7 10s7-5 7-10c0-4-3-7-7-7z" stroke="#1A73E8" stroke-width="2" fill="none"/>323 <circle cx="12" cy="10" r="3" fill="#1A73E8"/>324 </svg>325 Pin326 </div>327 </div>328 </div>329 330 <div class="gesture-bar"></div>331</div>332</body>333</html>