GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Transit Directions UI Mock</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8 #render-target {9 width: 1080px; height: 2400px; position: relative; overflow: hidden;10 background: #ffffff; border-radius: 28px; box-shadow: 0 8px 24px rgba(0,0,0,0.08);11 color: #202124;12 }13 14 /* Status bar */15 .status-bar {16 height: 110px;17 padding: 0 36px;18 display: flex; align-items: center; justify-content: space-between;19 color: #3c4043; font-size: 44px; letter-spacing: 0.2px;20 }21 .status-left { display: flex; align-items: center; gap: 18px; }22 .status-right { display: flex; align-items: center; gap: 26px; }23 .icon { width: 48px; height: 48px; display: inline-block; }24 .icon svg { width: 100%; height: 100%; }25 26 /* Header search */27 .header {28 padding: 12px 28px 20px 28px;29 }30 .top-row {31 display: flex; align-items: center; gap: 26px;32 padding: 8px 0 12px;33 }34 .back-btn { width: 72px; height: 72px; border-radius: 36px; display: flex; align-items: center; justify-content: center; }35 .inputs {36 display: flex; flex-direction: column; gap: 18px; width: calc(100% - 170px);37 }38 .input-pill {39 height: 120px; border: 1px solid #E0E0E0; border-radius: 28px;40 display: flex; align-items: center; padding: 0 26px; background: #FAFAFA;41 font-size: 44px; color: #3c4043; justify-content: space-between;42 }43 .input-left { display: flex; align-items: center; gap: 22px; }44 .dot-blue { width: 30px; height: 30px; background: #1a73e8; border-radius: 50%; }45 .pin-red {46 width: 34px; height: 34px; position: relative;47 }48 .pin-red::before { content: ""; position: absolute; left: 50%; top: 0; transform: translateX(-50%);49 width: 20px; height: 20px; background: #DB4437; border-radius: 50%; }50 .pin-red::after { content: ""; position: absolute; left: 50%; top: 18px; transform: translateX(-50%);51 width: 0; height: 0; border-left: 12px solid transparent; border-right: 12px solid transparent; border-top: 22px solid #DB4437; }52 .kebab { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; }53 .kebab svg circle { fill: #9AA0A6; }54 55 /* Modes row */56 .modes {57 display: flex; align-items: center; justify-content: space-between;58 padding: 18px 32px 8px;59 }60 .mode {61 width: 240px; text-align: center; color: #5f6368;62 }63 .mode .bubble {64 width: 176px; height: 100px; margin: 6px auto 8px; border-radius: 50px;65 display: flex; align-items: center; justify-content: center;66 }67 .mode .bubble svg { width: 64px; height: 64px; }68 .mode .time { font-size: 36px; }69 .selected .bubble { background: #E8F0FE; }70 .selected .time { color: #1a73e8; font-weight: 600; }71 72 /* Filters */73 .filters {74 display: flex; gap: 18px; padding: 22px 28px;75 }76 .filter-pill {77 flex: 1; height: 96px; border: 1px solid #E0E0E0; border-radius: 24px;78 display: flex; align-items: center; justify-content: space-between; padding: 0 26px;79 color: #3c4043; font-size: 36px; background: #fff;80 }81 .chev-down { width: 40px; height: 40px; }82 83 /* Sections and cards */84 .content { padding-bottom: 120px; }85 .section-title {86 padding: 26px 32px 16px; font-size: 34px; color: #5f6368; font-weight: 700; letter-spacing: 0.4px;87 }88 .route-card {89 padding: 24px 32px; display: flex; align-items: flex-start; justify-content: space-between;90 border-top: 1px solid #E0E0E0;91 }92 .route-left { max-width: 700px; }93 .route-line {94 display: flex; align-items: center; gap: 16px; flex-wrap: wrap;95 font-size: 34px; color: #3c4043;96 }97 .chip {98 padding: 8px 14px; border-radius: 16px; border: 1px solid #DADCE0; color: #3c4043; font-size: 30px; background: #F8F9FA;99 }100 .chip.yellow { background: #FFF4B3; border-color: #F1E36B; font-weight: 700; }101 .sep { color: #9AA0A6; font-size: 40px; }102 .route-meta { margin-top: 18px; color: #5f6368; font-size: 34px; }103 .route-sub { margin-top: 8px; color: #7b7f85; font-size: 34px; }104 .route-right { text-align: right; min-width: 280px; }105 .big-time { font-size: 54px; font-weight: 700; color: #202124; }106 .price { margin-top: 8px; font-size: 34px; color: #5f6368; }107 .start-btn {108 margin-top: 18px; height: 92px; padding: 0 34px; border: 1px solid #DADCE0; border-radius: 46px;109 display: inline-flex; align-items: center; gap: 16px; color: #1a73e8; font-size: 36px; background: #fff;110 }111 .start-btn svg { width: 40px; height: 40px; }112 .divider { height: 14px; background: #F1F3F4; }113 114 /* Bottom handle */115 .handle {116 position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%);117 width: 360px; height: 16px; background: #DADCE0; border-radius: 8px;118 }119 120 /* Small helpers for icon background */121 .route-icon { width: 48px; height: 48px; }122 .metro-icon { width: 48px; height: 48px; }123</style>124</head>125<body>126<div id="render-target">127 128 <!-- Status Bar -->129 <div class="status-bar">130 <div class="status-left">131 <span>3:36</span>132 <span class="icon">133 <!-- sun -->134 <svg viewBox="0 0 24 24">135 <circle cx="12" cy="12" r="4" fill="#F4B400"></circle>136 <g stroke="#F4B400" stroke-width="2">137 <line x1="12" y1="1" x2="12" y2="5"></line>138 <line x1="12" y1="19" x2="12" y2="23"></line>139 <line x1="1" y1="12" x2="5" y2="12"></line>140 <line x1="19" y1="12" x2="23" y2="12"></line>141 <line x1="4" y1="4" x2="7" y2="7"></line>142 <line x1="17" y1="17" x2="20" y2="20"></line>143 <line x1="4" y1="20" x2="7" y2="17"></line>144 <line x1="17" y1="7" x2="20" y2="4"></line>145 </g>146 </svg>147 </span>148 <span class="icon">149 <!-- cloud -->150 <svg viewBox="0 0 24 24">151 <path d="M6 15h10a4 4 0 0 0 0-8 5 5 0 0 0-9.5 2.5A3.5 3.5 0 0 0 6 15z" fill="#9AA0A6"></path>152 </svg>153 </span>154 </div>155 <div class="status-right">156 <span class="icon">157 <!-- location dot -->158 <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="8" fill="#5f6368"></circle></svg>159 </span>160 <span class="icon">161 <!-- wifi -->162 <svg viewBox="0 0 24 24">163 <path d="M2 8c5-5 15-5 20 0" stroke="#5f6368" stroke-width="2" fill="none"></path>164 <path d="M5 11c4-4 10-4 14 0" stroke="#5f6368" stroke-width="2" fill="none"></path>165 <circle cx="12" cy="16" r="2" fill="#5f6368"></circle>166 </svg>167 </span>168 <span class="icon">169 <!-- battery -->170 <svg viewBox="0 0 28 24">171 <rect x="2" y="6" width="20" height="12" rx="2" ry="2" stroke="#5f6368" stroke-width="2" fill="none"></rect>172 <rect x="4" y="8" width="14" height="8" fill="#5f6368"></rect>173 <rect x="22" y="10" width="4" height="4" fill="#5f6368"></rect>174 </svg>175 </span>176 </div>177 </div>178 179 <!-- Header Inputs -->180 <div class="header">181 <div class="top-row">182 <div class="back-btn">183 <svg viewBox="0 0 24 24" class="icon">184 <path d="M15 6l-6 6 6 6" stroke="#3c4043" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>185 </svg>186 </div>187 <div class="inputs">188 <div class="input-pill">189 <div class="input-left">190 <div class="dot-blue"></div>191 <span>Your location</span>192 </div>193 <div class="kebab">194 <svg viewBox="0 0 24 24">195 <circle cx="12" cy="5" r="2"></circle>196 <circle cx="12" cy="12" r="2"></circle>197 <circle cx="12" cy="19" r="2"></circle>198 </svg>199 </div>200 </div>201 <div class="input-pill">202 <div class="input-left">203 <div class="pin-red"></div>204 <span>Jama Masjid</span>205 </div>206 <div class="kebab">207 <svg viewBox="0 0 24 24">208 <path d="M7 6l10 12M17 6L7 18" stroke="#9AA0A6" stroke-width="2" fill="none"></path>209 </svg>210 </div>211 </div>212 </div>213 <div class="kebab">214 <svg viewBox="0 0 24 24">215 <circle cx="12" cy="5" r="2"></circle>216 <circle cx="12" cy="12" r="2"></circle>217 <circle cx="12" cy="19" r="2"></circle>218 </svg>219 </div>220 </div>221 222 <!-- Modes Row -->223 <div class="modes">224 <div class="mode">225 <div class="bubble">226 <svg viewBox="0 0 24 24">227 <rect x="3" y="8" width="18" height="8" rx="2" fill="#5f6368"></rect>228 <circle cx="7" cy="17" r="2" fill="#5f6368"></circle>229 <circle cx="17" cy="17" r="2" fill="#5f6368"></circle>230 </svg>231 </div>232 <div class="time">1 hr 18</div>233 </div>234 <div class="mode">235 <div class="bubble">236 <svg viewBox="0 0 24 24">237 <path d="M6 16h12l-2-6H8z" fill="#5f6368"></path>238 <circle cx="9" cy="18" r="2" fill="#5f6368"></circle>239 <circle cx="17" cy="18" r="2" fill="#5f6368"></circle>240 </svg>241 </div>242 <div class="time">1 hr 5</div>243 </div>244 <div class="mode selected">245 <div class="bubble">246 <svg viewBox="0 0 24 24">247 <rect x="4" y="6" width="16" height="10" rx="2" fill="#1a73e8"></rect>248 <circle cx="8" cy="18" r="2" fill="#1a73e8"></circle>249 <circle cx="16" cy="18" r="2" fill="#1a73e8"></circle>250 </svg>251 </div>252 <div class="time">1 hr 31</div>253 </div>254 <div class="mode">255 <div class="bubble">256 <svg viewBox="0 0 24 24">257 <path d="M7 5l-4 7h6l4-7h-6zM13 12l-4 7h6l4-7h-6z" fill="#5f6368"></path>258 </svg>259 </div>260 <div class="time">6 hr</div>261 </div>262 </div>263 264 <!-- Filters -->265 <div class="filters">266 <div class="filter-pill">267 <span>Depart at 3:32 PM</span>268 <svg viewBox="0 0 24 24" class="chev-down"><path d="M6 9l6 6 6-6" stroke="#5f6368" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path></svg>269 </div>270 <div class="filter-pill">271 <span>All modes</span>272 <svg viewBox="0 0 24 24" class="chev-down"><path d="M6 9l6 6 6-6" stroke="#5f6368" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path></svg>273 </div>274 <div class="filter-pill">275 <span>Best route</span>276 <svg viewBox="0 0 24 24" class="chev-down"><path d="M6 9l6 6 6-6" stroke="#5f6368" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path></svg>277 </div>278 </div>279 </div>280 281 <div class="divider"></div>282 283 <!-- Content List -->284 <div class="content">285 <div class="section-title">RECOMMENDED ROUTE</div>286 <div class="route-card">287 <div class="route-left">288 <div class="route-line">289 <!-- car -->290 <svg viewBox="0 0 24 24" class="route-icon">291 <rect x="3" y="8" width="18" height="8" rx="2" fill="#5f6368"></rect>292 <circle cx="7" cy="17" r="2" fill="#5f6368"></circle>293 <circle cx="17" cy="17" r="2" fill="#5f6368"></circle>294 </svg>295 <span class="chip">23</span>296 <span class="sep">›</span>297 <!-- metro -->298 <svg viewBox="0 0 24 24" class="metro-icon">299 <circle cx="12" cy="12" r="8" fill="#C5221F"></circle>300 <rect x="7" y="11" width="10" height="2" fill="#fff"></rect>301 </svg>302 <span class="chip yellow">Yellow Line</span>303 <span class="sep">›</span>304 <!-- auto rickshaw -->305 <svg viewBox="0 0 24 24" class="route-icon">306 <path d="M4 9h10l3 5H7z" fill="#34A853"></path>307 <circle cx="8" cy="16" r="2" fill="#34A853"></circle>308 <circle cx="15" cy="16" r="2" fill="#34A853"></circle>309 </svg>310 <span class="chip">9</span>311 </div>312 <div class="route-meta">Leave by 3:32 PM · Normal traffic</div>313 <div class="route-sub">Every 6 min from Arjan Garh</div>314 </div>315 <div class="route-right">316 <div class="big-time">1 hr 31 min</div>317 <div class="price">₹86–88</div>318 </div>319 </div>320 321 <div class="divider"></div>322 323 <div class="section-title">MORE BY BUS</div>324 <div class="route-card">325 <div class="route-left">326 <div class="route-line">327 <!-- walk -->328 <svg viewBox="0 0 24 24" class="route-icon">329 <path d="M12 4a2 2 0 1 1 0 4 2 2 0 0 1 0-4zm-2 6l3 2 2 4h-2l-1-2-2 2-2 4H6l2-5 2-2-2-1z" fill="#5f6368"></path>330 </svg>331 <span class="chip">22</span>332 <span class="sep">›</span>333 <!-- bus -->334 <svg viewBox="0 0 24 24" class="route-icon">335 <rect x="4" y="6" width="16" height="10" rx="2" fill="#5f6368"></rect>336 <circle cx="8" cy="17" r="2" fill="#5f6368"></circle>337 <circle cx="16" cy="17" r="2" fill="#5f6368"></circle>338 </svg>339 <span class="chip">519</span>340 <span class="sep">›</span>341 <svg viewBox="0 0 24 24" class="route-icon">342 <rect x="4" y="6" width="16" height="10" rx="2" fill="#5f6368"></rect>343 <circle cx="8" cy="17" r="2" fill="#5f6368"></circle>344 <circle cx="16" cy="17" r="2" fill="#5f6368"></circle>345 </svg>346 <span class="chip">502</span>347 <span class="sep">›</span>348 <!-- walk -->349 <svg viewBox="0 0 24 24" class="route-icon">350 <path d="M12 4a2 2 0 1 1 0 4 2 2 0 0 1 0-4zm-2 6l3 2 2 4h-2l-1-2-2 2-2 4H6l2-5 2-2-2-1z" fill="#5f6368"></path>351 </svg>352 <span class="chip">3</span>353 </div>354 <div class="route-meta">3:36 PM – 5:40 PM · ₹30</div>355 <div class="route-sub">Scheduled at 3:58 PM, 4:03 PM from Mandi Village</div>356 </div>357 <div class="route-right">358 <div class="big-time">2 hr 4 min</div>359 <button class="start-btn">360 <svg viewBox="0 0 24 24">361 <path d="M12 3l7 18-7-5-7 5z" fill="#1a73e8"></path>362 </svg>363 Start364 </button>365 </div>366 </div>367 368 <div class="divider"></div>369 370 <div class="section-titl