GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Directions 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:#ffffff; border:1px solid #dadada;11 box-sizing:border-box;12 }13 14 /* Status bar */15 .status-bar {16 position:absolute; top:0; left:0; width:100%; height:80px;17 display:flex; align-items:center; justify-content:space-between;18 padding:0 36px; color:#4e4e4e; font-size:34px;19 }20 .status-icons { display:flex; gap:24px; align-items:center; }21 .status-dot { width:18px; height:18px; background:#4e4e4e; border-radius:50%; }22 23 /* Search area */24 .search-area {25 position:absolute; top:80px; left:0; width:100%; padding:24px 24px 8px 24px;26 box-sizing:border-box;27 }28 .search-row {29 display:flex; align-items:center; justify-content:space-between;30 margin-bottom:16px;31 }32 .circle-btn {33 width:64px; height:64px; border-radius:32px; background:#f0f0f0; 34 display:flex; align-items:center; justify-content:center; border:1px solid #d6d6d6;35 }36 .pill {37 height:94px; border:1px solid #dcdcdc; border-radius:20px; background:#fff;38 display:flex; align-items:center; justify-content:space-between;39 padding:0 24px; font-size:40px; color:#222;40 box-shadow:0 2px 6px rgba(0,0,0,0.06);41 }42 .pill + .pill { margin-top:18px; }43 .pill .label { display:flex; align-items:center; gap:18px; }44 .small-pin {45 width:34px; height:34px; border-radius:50%; background:#ff6b6b; 46 display:inline-block;47 }48 .swap-icon { width:44px; height:44px; }49 .kebab { width:36px; height:36px; }50 51 /* Mode chips row */52 .mode-row {53 margin-top:18px;54 display:flex; gap:16px; padding-left:12px;55 }56 .chip {57 height:84px; padding:0 28px; border-radius:42px;58 border:1px solid #e2e2e2; background:#fff; 59 display:flex; align-items:center; gap:16px; font-size:34px; color:#333;60 box-shadow:0 2px 4px rgba(0,0,0,0.04);61 }62 .chip.active { background:#e7f0ff; border-color:#7fb5ff; color:#0b63d1; }63 .chip svg { width:36px; height:36px; }64 65 /* Map area */66 .map-area {67 position:absolute; left:0; top:360px; width:100%; height:1540px;68 padding:0 0; box-sizing:border-box;69 }70 .map-placeholder {71 width:100%; height:100%; background:#E0E0E0; border-top:1px solid #cfcfcf; border-bottom:1px solid #cfcfcf;72 display:flex; justify-content:center; align-items:center; color:#757575; font-size:42px;73 }74 75 /* Floating elements on map */76 .floating-stack { position:absolute; top:450px; right:28px; display:flex; flex-direction:column; gap:22px; }77 .fab {78 width:112px; height:112px; border-radius:56px; background:#fff;79 box-shadow:0 4px 12px rgba(0,0,0,0.18); display:flex; align-items:center; justify-content:center;80 border:1px solid #e6e6e6;81 }82 .crosshair { position:absolute; right:28px; bottom:550px; }83 .route-badge {84 position:absolute; left:410px; top:1060px;85 background:#1a73e8; color:#fff; font-size:40px; padding:18px 26px; border-radius:20px;86 box-shadow:0 4px 12px rgba(0,0,0,0.15);87 }88 .mini-badge {89 position:absolute; left:360px; top:880px;90 background:#ffffff; color:#444; border:1px solid #d9d9d9; padding:14px 20px; border-radius:18px; font-size:36px;91 box-shadow:0 3px 8px rgba(0,0,0,0.12);92 }93 .streetview-thumb {94 position:absolute; left:24px; bottom:600px; width:320px; height:180px;95 background:#E0E0E0; border:1px solid #BDBDBD; color:#757575; display:flex; align-items:center; justify-content:center; font-size:30px; border-radius:12px;96 }97 98 /* Bottom sheet */99 .bottom-sheet {100 position:absolute; bottom:0; left:0; width:100%; height:420px;101 background:#fff; border-top:1px solid #e4e4e4; box-shadow:0 -6px 18px rgba(0,0,0,0.15);102 border-top-left-radius:28px; border-top-right-radius:28px;103 padding:24px 34px; box-sizing:border-box;104 }105 .grabber { width:120px; height:12px; background:#e6e6e6; border-radius:6px; margin:0 auto 18px auto; }106 .title-row { display:flex; align-items:baseline; gap:12px; }107 .title-row .time { color:#d32f2f; font-size:56px; font-weight:700; }108 .title-row .distance { color:#222; font-size:50px; }109 .subtitle { margin-top:16px; color:#555; font-size:38px; }110 .parking { margin-top:22px; display:flex; align-items:center; gap:12px; color:#555; font-size:40px; }111 .p-icon {112 width:42px; height:42px; border:2px solid #c44c4c; color:#c44c4c; border-radius:50%;113 display:flex; align-items:center; justify-content:center; font-weight:bold;114 }115 .actions { margin-top:32px; display:flex; gap:26px; }116 .action-btn {117 flex:0 0 auto; padding:20px 28px; border-radius:52px; background:#f3f7ff; color:#0b63d1; border:1px solid #bcd3ff;118 display:flex; align-items:center; gap:18px; font-size:40px;119 }120 .action-btn svg { width:36px; height:36px; }121 122 /* Simple icon strokes */123 svg { display:block; }124 .icon-stroke { stroke:#444; stroke-width:4; fill:none; stroke-linecap:round; stroke-linejoin:round; }125 .icon-blue { stroke:#0b63d1; }126</style>127</head>128<body>129<div id="render-target">130 131 <!-- Status Bar -->132 <div class="status-bar">133 <div>8:48</div>134 <div class="status-icons">135 <div class="status-dot"></div>136 <div class="status-dot"></div>137 <div class="status-dot"></div>138 </div>139 </div>140 141 <!-- Search / Header -->142 <div class="search-area">143 <div class="search-row">144 <div class="circle-btn">145 <svg width="40" height="40" viewBox="0 0 60 60">146 <path class="icon-stroke" d="M38 14 L22 30 L38 46" />147 </svg>148 </div>149 <div style="display:flex; gap:14px;">150 <div class="circle-btn">151 <svg width="40" height="40" viewBox="0 0 60 60">152 <circle cx="30" cy="30" r="14" fill="#777"/>153 </svg>154 </div>155 </div>156 </div>157 158 <div class="pill">159 <div class="label">160 <span>New York</span>161 </div>162 <svg class="kebab" viewBox="0 0 24 24">163 <circle cx="12" cy="4" r="2" fill="#555"></circle>164 <circle cx="12" cy="12" r="2" fill="#555"></circle>165 <circle cx="12" cy="20" r="2" fill="#555"></circle>166 </svg>167 </div>168 169 <div class="pill">170 <div class="label">171 <div class="small-pin"></div>172 <span>Lenox Hill</span>173 </div>174 <svg class="swap-icon" viewBox="0 0 60 60">175 <path class="icon-stroke" d="M16 40 L44 40 M16 40 L24 32 M16 40 L24 48" />176 <path class="icon-stroke" d="M44 20 L16 20 M44 20 L36 12 M44 20 L36 28" />177 </svg>178 </div>179 180 <!-- Mode chips -->181 <div class="mode-row">182 <div class="chip active">183 <svg viewBox="0 0 64 36">184 <rect x="10" y="10" width="36" height="14" rx="3" fill="#0b63d1"></rect>185 <circle cx="18" cy="28" r="4" fill="#0b63d1"></circle>186 <circle cx="38" cy="28" r="4" fill="#0b63d1"></circle>187 </svg>188 <span>24 min</span>189 </div>190 <div class="chip">191 <svg viewBox="0 0 64 36">192 <path class="icon-stroke" d="M12 24 L26 24 L34 14 L44 14" />193 <circle cx="21" cy="28" r="4" fill="#666"></circle>194 <circle cx="38" cy="28" r="4" fill="#666"></circle>195 </svg>196 <span>—</span>197 </div>198 <div class="chip">199 <svg viewBox="0 0 64 36">200 <rect x="8" y="10" width="48" height="16" rx="3" fill="#666"></rect>201 <rect x="16" y="14" width="8" height="6" fill="#fff"></rect>202 <rect x="30" y="14" width="8" height="6" fill="#fff"></rect>203 </svg>204 <span>41 min</span>205 </div>206 <div class="chip">207 <svg viewBox="0 0 64 36">208 <circle cx="20" cy="10" r="4" fill="#666"></circle>209 <path class="icon-stroke" d="M20 14 L20 24 M20 24 L14 32 M20 24 L28 32 M18 20 L12 18 M22 20 L28 18" />210 </svg>211 <span>1 hr 52</span>212 </div>213 <div class="chip">214 <svg viewBox="0 0 64 36">215 <path class="icon-stroke" d="M10 26 L24 26 M24 26 L30 18 M30 18 L40 26" />216 </svg>217 <span>24 min</span>218 </div>219 </div>220 </div>221 222 <!-- Map area -->223 <div class="map-area">224 <div class="map-placeholder">[IMG: Google Map with route from New York to Lenox Hill]</div>225 226 <!-- Floating overlays -->227 <div class="floating-stack">228 <div class="fab">229 <!-- Layers icon -->230 <svg width="42" height="42" viewBox="0 0 60 60">231 <polygon points="30,8 10,18 30,28 50,18" fill="#777"></polygon>232 <polygon points="30,28 12,36 30,44 48,36" fill="#aaa"></polygon>233 </svg>234 </div>235 <div class="fab">236 <!-- Magnifying glass -->237 <svg width="42" height="42" viewBox="0 0 60 60">238 <circle cx="26" cy="26" r="14" stroke="#666" stroke-width="4" fill="none"></circle>239 <line x1="40" y1="40" x2="52" y2="52" stroke="#666" stroke-width="4" />240 </svg>241 </div>242 </div>243 244 <div class="route-badge">24 min</div>245 <div class="mini-badge">27 min</div>246 247 <div class="streetview-thumb">[IMG: Street View Thumbnail]</div>248 249 <div class="fab crosshair">250 <!-- Crosshair icon -->251 <svg width="44" height="44" viewBox="0 0 60 60">252 <circle cx="30" cy="30" r="20" stroke="#666" stroke-width="3" fill="none"></circle>253 <line x1="30" y1="16" x2="30" y2="44" stroke="#666" stroke-width="3"></line>254 <line x1="16" y1="30" x2="44" y2="30" stroke="#666" stroke-width="3"></line>255 </svg>256 </div>257 </div>258 259 <!-- Bottom sheet -->260 <div class="bottom-sheet">261 <div class="grabber"></div>262 <div class="title-row">263 <div class="time">24 min</div>264 <div class="distance">(6.7 mi)</div>265 </div>266 <div class="subtitle">Fastest route now due to traffic conditions</div>267 <div class="parking">268 <div class="p-icon">P</div>269 <div>Limited</div>270 </div>271 <div class="actions">272 <div class="action-btn">273 <svg viewBox="0 0 60 60">274 <path class="icon-blue icon-stroke" d="M16 30 L28 36 L44 24" />275 </svg>276 <span>Preview</span>277 </div>278 <div class="action-btn">279 <svg viewBox="0 0 60 60">280 <line x1="14" y1="20" x2="46" y2="20" class="icon-blue" stroke-width="4"></line>281 <line x1="14" y1="30" x2="46" y2="30" class="icon-blue" stroke-width="4"></line>282 <line x1="14" y1="40" x2="46" y2="40" class="icon-blue" stroke-width="4"></line>283 </svg>284 <span>Steps</span>285 </div>286 <div class="action-btn">287 <svg viewBox="0 0 60 60">288 <path class="icon-blue icon-stroke" d="M30 16 C30 12 38 12 38 20 V32 L30 36 L22 32 V20 C22 12 30 12 30 16" />289 </svg>290 <span>Pinned</span>291 </div>292 </div>293 </div>294 295</div>296</body>297</html>