GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Directions List UI</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; color: #202124; }9 #render-target {10 width: 1080px; height: 2400px; position: relative; overflow: hidden;11 background: #ffffff;12 }13 14 /* Top status bar */15 .status-bar {16 height: 88px;17 padding: 18px 32px 0 32px;18 font-size: 34px;19 color: #5f6368;20 display: flex;21 align-items: center;22 }23 .status-left { display: flex; align-items: center; gap: 18px; }24 .status-right { margin-left: auto; display: flex; align-items: center; gap: 26px; }25 26 /* Header summary */27 .summary {28 padding: 12px 40px 24px 40px;29 }30 .summary .time {31 font-size: 56px; font-weight: 600; color: #1e8e3e; line-height: 1.2;32 }33 .summary .distance {34 font-size: 38px; color: #202124;35 }36 .summary .sub {37 margin-top: 18px; font-size: 28px; color: #5f6368;38 }39 .divider {40 height: 14px; background: #ffffff; border-top: 2px solid #e0e0e0; border-bottom: 2px solid #e0e0e0;41 }42 43 /* Directions list */44 .steps { padding: 0 24px; }45 .step {46 display: flex; align-items: center;47 padding: 32px 16px;48 }49 .icon-col {50 width: 120px; display: flex; align-items: center; justify-content: center;51 color: #5f6368;52 }53 .text-col {54 flex: 1;55 padding: 0 12px;56 min-height: 80px;57 }58 .text-primary {59 font-size: 34px; color: #202124;60 }61 .text-secondary {62 font-size: 30px; color: #202124;63 }64 .thumb-col {65 width: 250px;66 }67 .thumb {68 width: 240px; height: 120px;69 background: #E0E0E0; border: 1px solid #BDBDBD;70 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 24px;71 border-radius: 6px;72 overflow: hidden;73 }74 .distance-row {75 display: flex; align-items: center; gap: 16px; padding: 0 148px 12px 160px;76 color: #5f6368; font-size: 28px;77 }78 .distance-row .line { flex: 1; height: 2px; background: #e0e0e0; }79 80 /* Bottom action bar */81 .actions {82 position: absolute; left: 0; right: 0; bottom: 128px;83 padding: 18px 36px 30px 36px;84 background: #f6f6f6; border-top: 1px solid #e0e0e0;85 }86 .action-buttons {87 display: flex; gap: 26px;88 }89 .btn {90 display: inline-flex; align-items: center; gap: 18px;91 padding: 26px 34px; font-size: 34px; border-radius: 50px;92 border: 1px solid #d9d9d9; background: #ffffff; color: #1a73e8; box-shadow: 0 1px 2px rgba(0,0,0,0.06);93 }94 .btn.primary { background: #1a73e8; color: #ffffff; border-color: #1a73e8; }95 .gesture-bar {96 position: absolute; left: 50%; transform: translateX(-50%);97 bottom: 56px; width: 360px; height: 12px; background: #c7c7c7; border-radius: 10px;98 }99 100 /* Simple icon styles */101 svg { width: 44px; height: 44px; }102 .turn-icon { width: 52px; height: 52px; }103 .merge-icon { width: 52px; height: 52px; }104 .pin-icon { width: 46px; height: 46px; }105</style>106</head>107<body>108<div id="render-target">109 110 <!-- Status bar -->111 <div class="status-bar">112 <div class="status-left">113 <span>6:44</span>114 <!-- placeholder small dots/icons -->115 <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="4" fill="#9aa0a6"/></svg>116 <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="4" fill="#9aa0a6"/></svg>117 <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="4" fill="#9aa0a6"/></svg>118 <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="4" fill="#9aa0a6"/></svg>119 <span style="font-size:40px;">•</span>120 </div>121 <div class="status-right">122 <!-- Wi-Fi icon -->123 <svg viewBox="0 0 24 24">124 <path d="M2 8c10-6 20 0 20 0" stroke="#5f6368" stroke-width="2" fill="none"/>125 <path d="M5 12c7-4 14 0 14 0" stroke="#5f6368" stroke-width="2" fill="none"/>126 <path d="M9 16c3-2 6 0 6 0" stroke="#5f6368" stroke-width="2" fill="none"/>127 <circle cx="12" cy="19" r="2" fill="#5f6368"/>128 </svg>129 <!-- Battery icon -->130 <svg viewBox="0 0 28 24">131 <rect x="1" y="5" width="22" height="14" rx="2" ry="2" stroke="#5f6368" stroke-width="2" fill="none"/>132 <rect x="3" y="7" width="16" height="10" fill="#5f6368"/>133 <rect x="23" y="9" width="4" height="6" fill="#5f6368"/>134 </svg>135 </div>136 </div>137 138 <!-- Summary header -->139 <div class="summary">140 <div class="time">44 min <span class="distance">(62 km)</span></div>141 <div class="sub">Fastest route now due to traffic conditions</div>142 </div>143 <div class="divider"></div>144 145 <!-- Steps -->146 <div class="steps">147 148 <!-- Step: Location -->149 <div class="step">150 <div class="icon-col">151 <svg viewBox="0 0 24 24">152 <path d="M12 2c-4 0-7 3-7 7 0 5 7 13 7 13s7-8 7-13c0-4-3-7-7-7z" fill="#5f6368"/>153 <circle cx="12" cy="9" r="3.2" fill="#ffffff"/>154 </svg>155 </div>156 <div class="text-col">157 <div class="text-primary">Cañada de Gómez</div>158 </div>159 <div class="thumb-col">160 <div class="thumb">[IMG: Street view thumbnail]</div>161 </div>162 </div>163 164 <!-- Step: Head east -->165 <div class="step">166 <div class="icon-col">167 <svg class="turn-icon" viewBox="0 0 24 24">168 <path d="M12 20V6" stroke="#5f6368" stroke-width="2" fill="none"/>169 <path d="M8 10l4-4 4 4" fill="#5f6368"/>170 <circle cx="6" cy="12" r="2" fill="#5f6368"/>171 </svg>172 </div>173 <div class="text-col">174 <div class="text-secondary">Head east on Aizpuru toward Schnack</div>175 </div>176 <div class="thumb-col">177 <div class="thumb">[IMG: Street view thumbnail]</div>178 </div>179 </div>180 181 <div class="distance-row">182 <span>80 m</span><div class="line"></div>183 </div>184 185 <!-- Step: Turn right onto Schnack -->186 <div class="step">187 <div class="icon-col">188 <svg class="turn-icon" viewBox="0 0 24 24">189 <path d="M6 4h6c4 0 6 2 6 6v3" stroke="#5f6368" stroke-width="2" fill="none"/>190 <path d="M14 11l6 6-6 0" fill="#5f6368"/>191 </svg>192 </div>193 <div class="text-col">194 <div class="text-secondary">Turn right onto Schnack</div>195 </div>196 <div class="thumb-col">197 <div class="thumb">[IMG: Street view thumbnail]</div>198 </div>199 </div>200 201 <div class="distance-row">202 <span>90 m</span><div class="line"></div>203 </div>204 205 <!-- Step: Turn left onto Blvd. Balcarce -->206 <div class="step">207 <div class="icon-col">208 <svg class="turn-icon" viewBox="0 0 24 24">209 <path d="M18 4H12c-4 0-6 2-6 6v3" stroke="#5f6368" stroke-width="2" fill="none"/>210 <path d="M10 11l-6 6 6 0" fill="#5f6368"/>211 </svg>212 </div>213 <div class="text-col">214 <div class="text-secondary">Turn left onto Blvd. Balcarce</div>215 </div>216 <div class="thumb-col">217 <div class="thumb">[IMG: Street view thumbnail]</div>218 </div>219 </div>220 221 <div class="distance-row">222 <span>1.1 km</span><div class="line"></div>223 </div>224 225 <!-- Step: Turn right onto Marconi -->226 <div class="step">227 <div class="icon-col">228 <svg class="turn-icon" viewBox="0 0 24 24">229 <path d="M6 4h6c4 0 6 2 6 6v3" stroke="#5f6368" stroke-width="2" fill="none"/>230 <path d="M14 11l6 6-6 0" fill="#5f6368"/>231 </svg>232 </div>233 <div class="text-col">234 <div class="text-secondary">Turn right onto Marconi</div>235 </div>236 <div class="thumb-col">237 <div class="thumb">[IMG: Street view thumbnail]</div>238 </div>239 </div>240 241 <div class="distance-row">242 <span>3.0 km</span><div class="line"></div>243 </div>244 245 <!-- Step: Turn left onto ramp -->246 <div class="step">247 <div class="icon-col">248 <svg class="turn-icon" viewBox="0 0 24 24">249 <path d="M18 4H12c-4 0-6 2-6 6v3" stroke="#5f6368" stroke-width="2" fill="none"/>250 <path d="M10 11l-6 6 6 0" fill="#5f6368"/>251 </svg>252 </div>253 <div class="text-col">254 <div class="text-secondary">Turn left onto the ramp to Au 9/ Au Córdoba - Rosario</div>255 </div>256 <div class="thumb-col">257 <div class="thumb">[IMG: Street view thumbnail]</div>258 </div>259 </div>260 261 <div class="distance-row">262 <span>600 m</span><div class="line"></div>263 </div>264 265 <!-- Step: Merge -->266 <div class="step">267 <div class="icon-col">268 <svg class="merge-icon" viewBox="0 0 24 24">269 <path d="M12 20V6" stroke="#5f6368" stroke-width="2" fill="none"/>270 <path d="M12 6l4 4" stroke="#5f6368" stroke-width="2" fill="none"/>271 <path d="M8 10l4-4 4 4" fill="#5f6368"/>272 </svg>273 </div>274 <div class="text-col">275 <div class="text-secondary">Merge with Au 9/Au Córdoba - Rosario</div>276 <div style="margin-top:10px; display:flex; align-items:center; gap:10px; color:#5f6368; font-size:26px;">277 <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" stroke="#5f6368" stroke-width="2" fill="none"/><rect x="10.5" y="6" width="3" height="8" fill="#5f6368"/><rect x="8" y="14" width="8" height="2" fill="#5f6368"/></svg>278 <span>Toll road</span>279 </div>280 </div>281 <div class="thumb-col">282 <div class="thumb">[IMG: Street view thumbnail]</div>283 </div>284 </div>285 286 </div>287 288 <!-- Bottom actions -->289 <div class="actions">290 <div class="action-buttons">291 <div class="btn primary">292 <svg viewBox="0 0 24 24">293 <path d="M5 12l6-6v12z" fill="#ffffff"/>294 <path d="M13 12l6-6v12z" fill="#ffffff"/>295 </svg>296 <span>Preview</span>297 </div>298 <div class="btn">299 <svg viewBox="0 0 24 24">300 <path d="M3 7l6-3 6 3 6-3v13l-6 3-6-3-6 3z" stroke="#1a73e8" stroke-width="2" fill="none"/>301 <path d="M9 10l6-3v10l-6 3z" fill="#1a73e8" opacity="0.2"/>302 </svg>303 <span>Show map</span>304 </div>305 <div class="btn">306 <svg class="pin-icon" viewBox="0 0 24 24">307 <path d="M12 2c-4 0-7 3-7 7 0 3 2 5 4 6l-1 5 4-3 4 3-1-5c2-1 4-3 4-6 0-4-3-7-7-7z" stroke="#1a73e8" stroke-width="2" fill="none"/>308 <circle cx="12" cy="9" r="3" fill="#1a73e8"/>309 </svg>310 <span>Pin</span>311 </div>312 </div>313 </div>314 315 <div class="gesture-bar"></div>316 317</div>318</body>319</html>