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: Arial, Helvetica, sans-serif; color: #202124; }9 #render-target {10 width: 1080px; height: 2400px;11 position: relative; overflow: hidden;12 background: #ffffff; border-radius: 0; box-shadow: none;13 }14 15 /* Status bar */16 .status-bar {17 position: absolute; top: 0; left: 0; width: 100%; height: 120px;18 background: #fff; display: flex; align-items: center; justify-content: space-between;19 padding: 0 40px; box-sizing: border-box; color: #5f6368; font-size: 40px;20 }21 .status-icons { display: flex; align-items: center; gap: 26px; }22 .status-icon { width: 34px; height: 34px; background: #e0e0e0; border-radius: 6px; }23 24 /* Search / destination inputs */25 .search-section {26 position: absolute; top: 120px; left: 0; width: 100%;27 padding: 30px 40px 0 40px; box-sizing: border-box;28 background: #fff;29 }30 .search-row { display: flex; align-items: center; gap: 24px; }31 .back-btn {32 width: 80px; height: 80px; border-radius: 40px;33 display: flex; align-items: center; justify-content: center;34 background: transparent;35 }36 .fields { flex: 1; }37 .field {38 position: relative; display: flex; align-items: center;39 margin-bottom: 26px;40 }41 .dot {42 width: 28px; height: 28px; border-radius: 50%; margin-right: 22px;43 }44 .dot.blue { background: #4285f4; }45 .dot-pin { width: 28px; height: 28px; margin-right: 22px; display: flex; align-items: center; justify-content: center; }46 .input {47 flex: 1;48 height: 100px; border: 1px solid #dcdcdc; border-radius: 22px;49 display: flex; align-items: center; padding: 0 30px; font-size: 44px; color: #5f6368; background: #fff;50 box-shadow: 0 1px 0 rgba(0,0,0,0.04) inset;51 }52 .input strong { color: #202124; }53 .input-menu {54 width: 80px; height: 100px; display: flex; align-items: center; justify-content: center;55 }56 .vertical-dots { width: 18px; height: 60px; display: flex; flex-direction: column; justify-content: space-between; margin-left: 8px; margin-right: 22px; }57 .vertical-dots span { width: 8px; height: 8px; background: #bdbdbd; border-radius: 50%; display: block; }58 59 /* Mode tabs */60 .mode-tabs {61 position: absolute; top: 370px; left: 0; width: 100%;62 padding: 20px 40px; box-sizing: border-box; display: flex; align-items: center; gap: 40px;63 }64 .tab {65 height: 120px; min-width: 200px; padding: 18px 28px; box-sizing: border-box;66 border-radius: 60px; background: transparent; border: 1px solid transparent;67 display: flex; align-items: center; gap: 16px; color: #5f6368; font-size: 40px;68 }69 .tab svg { width: 56px; height: 56px; }70 .tab.active { background: #eaf3ff; color: #1a73e8; border: 1px solid #d2e3fc; }71 72 /* Offline banner */73 .offline-banner {74 position: absolute; top: 510px; left: 0; width: 100%; height: 120px;75 background: #3c4043; color: #fff; display: flex; align-items: center; justify-content: space-between;76 padding: 0 40px; box-sizing: border-box; font-size: 40px;77 }78 .banner-left { display: flex; align-items: center; gap: 24px; }79 .banner-icon { width: 70px; height: 70px; border-radius: 40px; background: rgba(255,255,255,0.12); display: flex; align-items: center; justify-content: center; }80 .banner-right { width: 70px; height: 70px; display: flex; align-items: center; justify-content: center; }81 82 /* Map placeholder */83 .map {84 position: absolute; top: 630px; left: 0; width: 100%; height: 1350px;85 background: #e0e0e0; border-top: 1px solid #bdbdbd; border-bottom: 1px solid #bdbdbd;86 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 40px;87 }88 .map-label { position: absolute; top: 40px; left: 40px; }89 .floating-btn {90 position: absolute; right: 40px; width: 120px; height: 120px; border-radius: 60px;91 background: #fff; border: 1px solid #dcdcdc; display: flex; align-items: center; justify-content: center;92 box-shadow: 0 2px 6px rgba(0,0,0,0.15);93 }94 .floating-btn.search { top: 160px; }95 .floating-btn.compass { bottom: 160px; }96 .time-box {97 position: absolute; background: #fff; color: #202124; font-size: 40px; padding: 22px 26px;98 border-radius: 18px; box-shadow: 0 2px 10px rgba(0,0,0,0.15);99 }100 .time-box.blue { background: #1a73e8; color: #fff; }101 .time-box.small { font-size: 38px; }102 .time-box .sub { color: #5f6368; font-size: 36px; }103 104 /* Bottom sheet */105 .bottom-sheet {106 position: absolute; left: 0; bottom: 80px; width: 100%; height: 540px;107 background: #fff; border-top-left-radius: 30px; border-top-right-radius: 30px;108 box-shadow: 0 -6px 24px rgba(0,0,0,0.2);109 padding: 20px 40px; box-sizing: border-box;110 }111 .sheet-handle {112 width: 120px; height: 16px; border-radius: 8px; background: #e0e0e0; margin: 0 auto 20px auto;113 }114 .summary { font-size: 52px; margin: 16px 0; }115 .summary .duration { color: #0f9d58; font-weight: 600; }116 .subtitle { color: #5f6368; font-size: 42px; margin-top: 14px; }117 .actions { display: flex; align-items: center; gap: 30px; margin-top: 40px; }118 .btn {119 height: 120px; padding: 0 46px; border-radius: 60px; font-size: 44px; display: inline-flex; align-items: center; gap: 20px;120 border: 1px solid #dcdcdc; color: #202124; background: #fff;121 }122 .btn.primary { background: #1a73e8; color: #fff; border-color: #1a73e8; }123 .btn svg { width: 56px; height: 56px; }124 125 /* Gesture bar */126 .gesture-bar {127 position: absolute; left: 50%; transform: translateX(-50%);128 bottom: 20px; width: 300px; height: 16px; background: #cfcfcf; border-radius: 10px;129 }130</style>131</head>132<body>133<div id="render-target">134 <!-- Status Bar -->135 <div class="status-bar">136 <div>3:36</div>137 <div class="status-icons">138 <div class="status-icon"></div>139 <div class="status-icon"></div>140 <div class="status-icon"></div>141 <div class="status-icon"></div>142 <div class="status-icon"></div>143 </div>144 </div>145 146 <!-- Search Section -->147 <div class="search-section">148 <div class="search-row">149 <div class="back-btn">150 <svg viewBox="0 0 24 24">151 <path d="M15 4 L5 12 L15 20" fill="none" stroke="#5f6368" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>152 </svg>153 </div>154 <div class="fields">155 <div class="field">156 <span class="dot blue"></span>157 <div class="input">Your location</div>158 <div class="input-menu">159 <svg viewBox="0 0 24 24">160 <circle cx="12" cy="5" r="2" fill="#5f6368"></circle>161 <circle cx="12" cy="12" r="2" fill="#5f6368"></circle>162 <circle cx="12" cy="19" r="2" fill="#5f6368"></circle>163 </svg>164 </div>165 </div>166 <div class="vertical-dots">167 <span></span><span></span><span></span>168 </div>169 <div class="field">170 <div class="dot-pin">171 <svg viewBox="0 0 24 24">172 <path d="M12 2 C8.7 2 6 4.7 6 8 c0 5.5 6 12 6 12 s6-6.5 6-12 c0-3.3-2.7-6-6-6z" fill="#d93025"></path>173 <circle cx="12" cy="8" r="3" fill="#fff"></circle>174 </svg>175 </div>176 <div class="input"><strong>Taj Mahal</strong></div>177 <div class="input-menu">178 <svg viewBox="0 0 24 24">179 <path d="M7 7 L12 2 L17 7" fill="none" stroke="#5f6368" stroke-width="2" stroke-linecap="round"></path>180 <path d="M7 17 L12 22 L17 17" fill="none" stroke="#5f6368" stroke-width="2" stroke-linecap="round"></path>181 </svg>182 </div>183 </div>184 </div>185 <div style="width:80px;"></div>186 </div>187 </div>188 189 <!-- Mode Tabs -->190 <div class="mode-tabs">191 <div class="tab active">192 <svg viewBox="0 0 24 24">193 <rect x="4" y="8" width="16" height="7" rx="2" fill="#1a73e8"></rect>194 <circle cx="7" cy="17" r="2" fill="#1a73e8"></circle>195 <circle cx="17" cy="17" r="2" fill="#1a73e8"></circle>196 </svg>197 <div>3 hr 42</div>198 </div>199 <div class="tab">200 <svg viewBox="0 0 24 24">201 <circle cx="7" cy="17" r="3" fill="#5f6368"></circle>202 <circle cx="17" cy="17" r="3" fill="#5f6368"></circle>203 <path d="M7 17 L12 12 L17 17" stroke="#5f6368" stroke-width="2" fill="none" stroke-linecap="round"></path>204 </svg>205 <div>3 hr 49</div>206 </div>207 <div class="tab">208 <svg viewBox="0 0 24 24">209 <rect x="5" y="6" width="14" height="10" rx="2" fill="#5f6368"></rect>210 <circle cx="9" cy="17" r="1.8" fill="#5f6368"></circle>211 <circle cx="15" cy="17" r="1.8" fill="#5f6368"></circle>212 </svg>213 <div>11 hr 36</div>214 </div>215 <div class="tab">216 <svg viewBox="0 0 24 24">217 <circle cx="12" cy="7" r="3" fill="#5f6368"></circle>218 <path d="M12 10 L10 15 L6 19 M12 10 L14 15 L18 19" stroke="#5f6368" stroke-width="2" fill="none" stroke-linecap="round"></path>219 </svg>220 <div>2 days</div>221 </div>222 </div>223 224 <!-- Offline Banner -->225 <div class="offline-banner">226 <div class="banner-left">227 <div class="banner-icon">228 <svg viewBox="0 0 24 24">229 <path d="M12 3 L12 15 M7 10 L12 15 L17 10" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"></path>230 <rect x="5" y="17" width="14" height="2" rx="1" fill="#fff"></rect>231 </svg>232 </div>233 <div>Tap to download offline directions for spotty connections on your route</div>234 </div>235 <div class="banner-right">236 <svg viewBox="0 0 24 24">237 <path d="M5 5 L19 19 M19 5 L5 19" stroke="#fff" stroke-width="2" stroke-linecap="round"></path>238 </svg>239 </div>240 </div>241 242 <!-- Map Placeholder -->243 <div class="map">244 <div>[IMG: Google Map route from Your location to Taj Mahal]</div>245 246 <!-- Floating buttons -->247 <div class="floating-btn search">248 <svg viewBox="0 0 24 24">249 <circle cx="10" cy="10" r="6" stroke="#5f6368" stroke-width="2" fill="none"></circle>250 <path d="M14.5 14.5 L20 20" stroke="#5f6368" stroke-width="2" stroke-linecap="round"></path>251 </svg>252 </div>253 <div class="floating-btn compass">254 <svg viewBox="0 0 24 24">255 <circle cx="12" cy="12" r="7" stroke="#5f6368" stroke-width="2" fill="none"></circle>256 <path d="M12 5 L15 12 L12 19 L9 12 Z" fill="#5f6368"></path>257 </svg>258 </div>259 260 <!-- Route time markers -->261 <div class="time-box" style="top: 220px; left: 120px;">262 <div>3 hr 44 min</div>263 <div class="sub">Tolls</div>264 </div>265 <div class="time-box small" style="top: 680px; left: 220px;">266 <div>4 hr 57 min</div>267 <div class="sub">No tolls</div>268 </div>269 <div class="time-box blue" style="bottom: 240px; right: 220px;">270 3 hr 42 min<br/>Tolls271 </div>272 </div>273 274 <!-- Bottom Sheet -->275 <div class="bottom-sheet">276 <div class="sheet-handle"></div>277 <div class="summary">278 <span class="duration">3 hr 42 min (216 km)</span>279 <svg viewBox="0 0 24 24" style="width:40px;height:40px;vertical-align:middle;margin-left:8px;">280 <circle cx="12" cy="12" r="9" stroke="#5f6368" stroke-width="2" fill="none"></circle>281 <path d="M12 7 L12 13 L16 16" stroke="#5f6368" stroke-width="2" fill="none" stroke-linecap="round"></path>282 </svg>283 </div>284 <div class="subtitle">Fastest route now due to traffic conditions</div>285 <div class="actions">286 <div class="btn primary">287 <svg viewBox="0 0 24 24">288 <path d="M4 12 L12 4 L20 12" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"></path>289 <path d="M12 4 L12 20" stroke="#fff" stroke-width="2"></path>290 </svg>291 Start292 </div>293 <div class="btn">294 <svg viewBox="0 0 24 24">295 <path d="M5 6 H19 M5 12 H19 M5 18 H13" stroke="#5f6368" stroke-width="2" fill="none" stroke-linecap="round"></path>296 </svg>297 Steps298 </div>299 <div class="btn">300 <svg viewBox="0 0 24 24">301 <path d="M12 3 L12 21 M6 9 L12 3 L18 9" stroke="#5f6368" stroke-width="2" fill="none" stroke-linecap="round"></path>302 </svg>303 Pin304 </div>305 </div>306 </div>307 308 <!-- Gesture Bar -->309 <div class="gesture-bar"></div>310</div>311</body>312</html>