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 UI Mock</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: Roboto, Arial, sans-serif; }9 #render-target {10 width: 1080px; height: 2400px;11 position: relative; overflow: hidden;12 background: #ffffff;13 }14 15 /* Status bar */16 .status-bar {17 position: absolute; top: 0; left: 0; right: 0;18 height: 96px; padding: 0 36px;19 display: flex; align-items: center; justify-content: space-between;20 color: #4b4b4b; font-size: 38px;21 }22 .status-left { display: flex; align-items: center; gap: 20px; }23 .status-right { display: flex; align-items: center; gap: 24px; }24 .status-dot {25 width: 12px; height: 12px; background: #777; border-radius: 50%;26 display: inline-block; margin-left: 6px;27 }28 .status-icon {29 width: 40px; height: 40px;30 display: inline-flex; align-items: center; justify-content: center;31 }32 .status-icon svg { width: 40px; height: 40px; fill: #616161; }33 34 /* Search panel */35 .search-panel {36 position: absolute; top: 96px; left: 0; right: 0;37 background: #fff;38 padding: 28px 36px 16px 36px;39 box-shadow: 0 6px 18px rgba(0,0,0,0.06);40 }41 .search-row { display: grid; grid-template-columns: 72px 72px 1fr 72px; align-items: center; gap: 16px; margin-bottom: 18px; }42 .search-icon { width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; }43 .input {44 height: 108px; border-radius: 24px; border: 1px solid #d9d9d9; background: #f7f7f7;45 display: flex; align-items: center; padding: 0 28px; font-size: 42px; color: #2e2e2e;46 }47 .kebab { display: flex; align-items: center; justify-content: center; }48 .search-row.small-gap { margin-bottom: 8px; }49 50 /* Mode chips */51 .modes {52 display: flex; align-items: center; gap: 20px;53 padding: 18px 16px 22px 124px; /* indent to match screenshot under inputs */54 }55 .mode-chip {56 display: inline-flex; align-items: center; gap: 14px;57 border-radius: 28px; padding: 18px 26px;58 border: 1px solid #E0E0E0; color: #424242; font-size: 36px; background: #fff;59 }60 .mode-chip svg { width: 38px; height: 38px; fill: #5f6368; }61 .mode-chip.active {62 background: #e8f0fe; color: #1a73e8; border-color: #c5d5ff;63 font-weight: 600;64 }65 66 /* Map area */67 .map {68 position: absolute; left: 0; right: 0;69 top: 420px; height: 1180px;70 background: #E0E0E0; border-top: 1px solid #d0d0d0; border-bottom: 1px solid #d0d0d0;71 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 42px;72 }73 74 /* Floating buttons on map */75 .float-btn {76 position: absolute; right: 36px; width: 120px; height: 120px;77 border-radius: 60px; background: #fff;78 box-shadow: 0 6px 16px rgba(0,0,0,0.18);79 display: flex; align-items: center; justify-content: center;80 }81 .float-btn svg { width: 56px; height: 56px; fill: #5f6368; }82 .layers-btn { top: 750px; }83 .search-btn { top: 900px; }84 85 /* Route bubbles */86 .route-bubble {87 position: absolute; padding: 16px 22px; border-radius: 18px;88 display: inline-flex; align-items: center; gap: 12px; font-size: 40px;89 box-shadow: 0 6px 14px rgba(0,0,0,0.12);90 }91 .route-bubble.blue { background: #165DFF; color: #fff; }92 .route-bubble.white { background: #fff; color: #3c4043; border: 1px solid #e0e0e0; }93 .bubble-info {94 width: 36px; height: 36px; border-radius: 18px; border: 2px solid currentColor;95 display: inline-flex; align-items: center; justify-content: center; font-size: 26px;96 }97 98 .map-pin {99 position: absolute; width: 72px; height: 72px; right: 190px; top: 1030px;100 display: flex; align-items: center; justify-content: center;101 }102 .mini-thumb {103 position: absolute; left: 36px; bottom: 1020px; width: 260px; height: 180px;104 background: #E0E0E0; border: 1px solid #BDBDBD; border-radius: 12px;105 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 32px;106 overflow: hidden;107 }108 109 /* Bottom sheet */110 .bottom-sheet {111 position: absolute; left: 0; right: 0; bottom: 120px;112 height: 680px; background: #fff; border-top-left-radius: 28px; border-top-right-radius: 28px;113 box-shadow: 0 -10px 22px rgba(0,0,0,0.12);114 }115 .sheet-handle {116 position: absolute; top: 14px; left: 50%; transform: translateX(-50%);117 width: 160px; height: 14px; border-radius: 7px; background: #dcdcdc;118 }119 .sheet-content {120 padding: 70px 44px 28px 44px; color: #202124;121 }122 .eta { font-size: 64px; font-weight: 700; color: #1a73e8; }123 .distance { font-size: 60px; font-weight: 500; color: #3c4043; }124 .subtext { margin-top: 20px; font-size: 40px; color: #5f6368; }125 .toll-line { margin-top: 14px; font-size: 38px; color: #5f6368; display: flex; align-items: center; gap: 12px; }126 .action-row { margin-top: 40px; display: flex; gap: 24px; }127 .action-chip {128 display: inline-flex; align-items: center; gap: 16px;129 padding: 24px 34px; border-radius: 34px; font-size: 42px; font-weight: 600;130 border: 2px solid #d8e1ff; color: #1a73e8; background: #fff;131 }132 .action-chip.primary { background: #1a73e8; color: #fff; border-color: #1a73e8; }133 .action-chip svg { width: 42px; height: 42px; fill: currentColor; }134 135 /* Help and target buttons bottom-right */136 .help-btn {137 position: absolute; right: 36px; bottom: 910px; width: 120px; height: 120px;138 border-radius: 60px; background: #fff; box-shadow: 0 6px 16px rgba(0,0,0,0.18);139 display: flex; align-items: center; justify-content: center; color: #e53935; font-size: 48px; font-weight: 700;140 }141 142 /* Gesture bar */143 .gesture-bar {144 position: absolute; left: 50%; transform: translateX(-50%);145 bottom: 36px; width: 360px; height: 18px; border-radius: 9px; background: #bdbdbd;146 }147</style>148</head>149<body>150<div id="render-target">151 152 <!-- Status bar -->153 <div class="status-bar">154 <div class="status-left">155 <span>6:43</span>156 <span class="status-dot"></span>157 <span class="status-dot"></span>158 <span class="status-dot"></span>159 <span class="status-dot"></span>160 <span class="status-dot"></span>161 <span class="status-dot"></span>162 </div>163 <div class="status-right">164 <div class="status-icon" title="Signal">165 <svg viewBox="0 0 24 24"><path d="M2 18h2v-2H2v2zm4 0h2v-4H6v4zm4 0h2v-6h-2v6zm4 0h2v-8h-2v8zm4 0h2V6h-2v12z"/></svg>166 </div>167 <div class="status-icon" title="Wi‑Fi">168 <svg viewBox="0 0 24 24"><path d="M12 18c.9 0 1.7.4 2.3 1.1l-2.3 2.3-2.3-2.3C10.3 18.4 11.1 18 12 18zm0-4c2 0 3.9.8 5.3 2.2l-1.4 1.4C14.9 16.2 13.5 15.6 12 15.6s-2.9.6-3.9 1.6l-1.4-1.4C8.1 14.8 10 14 12 14zm0-4c4 0 7.7 1.6 10.4 4.4l-1.4 1.4C18.7 13.2 15.5 12 12 12s-6.7 1.2-9 3.4L1.6 14.4C4.3 11.6 8 10 12 10z"/></svg>169 </div>170 <div class="status-icon" title="Battery">171 <svg viewBox="0 0 24 24"><path d="M18 7h1v2h1v6h-1v2h-1V7zM3 8c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2v8c0 1.1-.9 2-2 2H5c-1.1 0-2-.9-2-2V8zm2 0v8h10V8H5z"/></svg>172 </div>173 </div>174 </div>175 176 <!-- Search / Directions header -->177 <div class="search-panel">178 <!-- Row 1 -->179 <div class="search-row">180 <div class="search-icon">181 <svg viewBox="0 0 24 24"><path d="M15 6l-6 6 6 6V6z"/></svg>182 </div>183 <div class="search-icon">184 <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="5" fill="#9e9e9e"/></svg>185 </div>186 <div class="input">Cañada de Gómez</div>187 <div class="kebab">188 <svg viewBox="0 0 24 24"><circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/></svg>189 </div>190 </div>191 192 <!-- Row 2 -->193 <div class="search-row small-gap">194 <div class="search-icon">195 <svg viewBox="0 0 24 24"><path fill="#d32f2f" d="M12 2C8.7 2 6 4.7 6 8c0 5.3 6 12 6 12s6-6.7 6-12c0-3.3-2.7-6-6-6zm0 8.5c-1.4 0-2.5-1.1-2.5-2.5S10.6 5.5 12 5.5s2.5 1.1 2.5 2.5S13.4 10.5 12 10.5z"/></svg>196 </div>197 <div class="search-icon">198 <svg viewBox="0 0 24 24"><path d="M7 6l4 4-4 4M17 18l-4-4 4-4" stroke="#5f6368" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>199 </div>200 <div class="input">Funes</div>201 <div></div>202 </div>203 204 <!-- Mode chips -->205 <div class="modes">206 <div class="mode-chip active">207 <svg viewBox="0 0 24 24"><path d="M3 13h18l-1-3c-.3-.8-1-1.3-1.9-1.3H5.9c-.9 0-1.6.5-1.9 1.3L3 13zm2 3a2 2 0 104 0H5zm10 0a2 2 0 104 0h-4z"/></svg>208 <span>44 min</span>209 </div>210 <div class="mode-chip">211 <svg viewBox="0 0 24 24"><path d="M5 15l2-4h3l2 4M6 19a2 2 0 112 0 2 2 0 01-2 0zm8 0a2 2 0 112 0 2 2 0 01-2 0zM9 11l2-3h2" stroke="#5f6368" stroke-width="1.5" fill="none"/></svg>212 <span>53 min</span>213 </div>214 <div class="mode-chip">215 <svg viewBox="0 0 24 24"><path d="M5 6h14v9H5zM7 17h10l-2 2H9l-2-2z"/></svg>216 <span>2 hr 5</span>217 </div>218 <div class="mode-chip">219 <svg viewBox="0 0 24 24"><path d="M12 4a2 2 0 11-.001 4.001A2 2 0 0112 4zm-6 13l2-5 3 2 2-3 3 2 2 4" stroke="#5f6368" stroke-width="2" fill="none" stroke-linecap="round"/></svg>220 <span>13 hr</span>221 </div>222 <div class="mode-chip">223 <svg viewBox="0 0 24 24"><path d="M5 14l2-4h3l2 4M6 18a2 2 0 112 0 2 2 0 01-2 0zm8 0a2 2 0 112 0 2 2 0 01-2 0z" /></svg>224 <span>3 hr</span>225 </div>226 </div>227 </div>228 229 <!-- Map placeholder -->230 <div class="map">[IMG: Map with route from Cañada de Gómez to Funes]</div>231 232 <!-- Floating map buttons -->233 <div class="float-btn layers-btn" title="Layers">234 <svg viewBox="0 0 24 24"><path d="M12 3l9 5-9 5-9-5 9-5zm0 9l9 5-3 2-6-3-6 3-3-2 9-5zm0 6l6 3-6 3-6-3 6-3z"/></svg>235 </div>236 <div class="float-btn search-btn" title="Search">237 <svg viewBox="0 0 24 24"><path d="M15.5 14h-.8l-.3-.3A6.5 6.5 0 1015.5 14l4.5 4.5-1.5 1.5L15.5 14zM10 14a4 4 0 110-8 4 4 0 010 8z"/></svg>238 </div>239 240 <!-- Route bubbles on map -->241 <div class="route-bubble white" style="left: 340px; top: 620px;">242 <span>55 min</span>243 <span>Tolls</span>244 <span class="bubble-info">i</span>245 </div>246 <div class="route-bubble blue" style="left: 280px; top: 860px;">247 <span>44 min</span>248 <span>Tolls</span>249 <span class="bubble-info">i</span>250 </div>251 252 <!-- Destination pin on map -->253 <div class="map-pin">254 <svg viewBox="0 0 24 24">255 <path fill="#d32f2f" d="M12 2C8.7 2 6 4.7 6 8c0 5.3 6 12 6 12s6-6.7 6-12c0-3.3-2.7-6-6-6zm0 8.2a2.2 2.2 0 100-4.4 2.2 2.2 0 000 4.4z"/>256 <circle cx="12" cy="8" r="2.2" fill="#fff"/>257 </svg>258 </div>259 260 <!-- Mini street view thumbnail -->261 <div class="mini-thumb">[IMG: Street View thumbnail]</div>262 263 <!-- Help/target button bottom-right -->264 <div class="help-btn">?</div>265 266 <!-- Bottom sheet -->267 <div class="bottom-sheet">268 <div class="sheet-handle"></div>269 <div class="sheet-content">270 <div>271 <span class="eta">44 min</span>272 <span class="distance"> (62 km)</span>273 </div>274 <div class="subtext">Fastest route now due to traffic conditions</div>275 <div class="toll-line">276 <span class="bubble-info" style="font-size:30px; width:34px; height:34px;">i</span>277 <span>Tolls</span>278 </div>279 <div class="action-row">280 <div class="action-chip primary"><span>»</span><span>Preview</span></div>281 <div class="action-chip">282 <svg viewBox="0 0 24 24"><circle cx="5" cy="7" r="2"/><path d="M9 7h10v2H9zM9 12h10v2H9zM9 17h10v2H9z"/><circle cx="5" cy="12" r="2"/><circle cx="5" cy="17" r="2"/></svg>283 <span>Steps</span>284 </div>285 <div class="action-chip">286 <svg viewBox="0 0 24 24"><path d="M12 2C8.7 2 6 4.7 6 8c0 5.3 6 12 6 12s6-6.7 6-12c0-3.3-2.7-6-6-6zm0 9a3 3 0 110-6 3 3 0 010 6z"/></svg>287 <span>Pin</span>288 </div>289 </div>290 </div>291 </div>292 293 <!-- Gesture bar -->294 <div class="gesture-bar"></div>295</div>296</body>297</html>