GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Transit Results UI</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: 24px;11    box-shadow: 0 2px 12px rgba(0,0,0,0.08);12    color: #202124;13  }14  /* Status bar */15  .status-bar {16    height: 90px; padding: 0 36px; display: flex; align-items: center; justify-content: space-between; color: #5f6368;17    font-size: 34px;18  }19  .status-right { display: flex; align-items: center; gap: 20px; }20  .icon { width: 48px; height: 48px; }21  /* Search area */22  .search-area { padding: 6px 36px 18px 36px; }23  .search-top { display: flex; align-items: center; gap: 24px; }24  .back-btn { width: 80px; height: 80px; display: flex; align-items: center; justify-content: center; border-radius: 40px; }25  .fields { flex: 1; }26  .field {27    height: 110px; border: 1px solid #E0E0E0; border-radius: 18px; background: #F7F7F7;28    display: flex; align-items: center; padding: 0 24px; margin-bottom: 18px;29  }30  .field .label { font-size: 42px; color: #202124; flex: 1; }31  .field .muted { color: #5f6368; }32  .field .chip-icon { width: 54px; height: 54px; margin-right: 18px; }33  .field .end-icon { width: 54px; height: 54px; margin-left: 18px; }34  .dots-vertical { width: 18px; height: 70px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; margin-left: 12px; margin-right: 12px; }35  /* Mode row */36  .mode-row { display: flex; justify-content: space-around; padding: 12px 24px 24px; border-bottom: 1px solid #E0E0E0; }37  .mode-item { width: 240px; text-align: center; color: #5f6368; }38  .mode-icon { width: 72px; height: 72px; margin: 0 auto 6px; }39  .mode-time { font-size: 34px; }40  .selected-pill {41    display: inline-flex; align-items: center; gap: 16px; padding: 16px 26px; border-radius: 48px;42    background: #E8F0FE; color: #1a73e8; font-weight: 600;43  }44  /* Filter chips */45  .filters { display: flex; gap: 18px; padding: 18px 24px; position: sticky; top: 0; background: #fff; z-index: 2; border-top: 1px solid #E0E0E0; border-bottom: 1px solid #E0E0E0; }46  .chip {47    background: #fff; border: 1px solid #E0E0E0; border-radius: 24px;48    padding: 20px 26px; font-size: 34px; color: #202124; display: inline-flex; align-items: center; gap: 12px;49    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.02);50  }51  .chip .caret { width: 32px; height: 32px; }52  /* Sections and cards */53  .section { padding: 20px 24px; }54  .section-title { font-size: 28px; color: #5f6368; font-weight: 700; letter-spacing: 0.5px; margin: 16px 8px; }55  .card {56    background: #fff; border-top: 1px solid #E0E0E0; border-bottom: 1px solid #E0E0E0;57    padding: 26px; border-radius: 12px; display: flex; flex-direction: column; gap: 8px;58  }59  .route-top { display: flex; align-items: center; justify-content: space-between; gap: 20px; }60  .route-steps { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }61  .sep { color: #5f6368; font-size: 42px; }62  .duration { font-size: 48px; font-weight: 700; color: #202124; }63  .subline { color: #5f6368; font-size: 34px; }64  .price { color: #5f6368; font-size: 34px; }65  .small-count { font-size: 28px; color: #5f6368; margin-left: 8px; }66  .line-chip {67    padding: 12px 18px; border-radius: 16px; font-size: 34px; font-weight: 700;68  }69  .yellow { background: #FFEB3B; }70  .purple { background: #8E24AA; color: #fff; }71  /* Bus route chips */72  .route-chip {73    padding: 10px 16px; border-radius: 12px; border: 1px solid #E0E0E0; background: #F5F5F5; font-weight: 700; font-size: 34px; color: #202124;74  }75  /* Start button */76  .start-btn {77    margin-left: auto; display: inline-flex; align-items: center; gap: 14px;78    padding: 16px 28px; border-radius: 40px; border: 1px solid #E0E0E0; background: #fff; color: #1a73e8; font-size: 36px; font-weight: 700;79  }80  /* Bottom gesture bar */81  .gesture-bar { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); width: 420px; height: 18px; background: #DADCE0; border-radius: 10px; }82</style>83</head>84<body>85<div id="render-target">86  <!-- Status Bar -->87  <div class="status-bar">88    <div class="status-left">4:04</div>89    <div class="status-right">90      <!-- weather sun -->91      <svg class="icon" viewBox="0 0 24 24">92        <circle cx="12" cy="12" r="4" fill="#9E9E9E"></circle>93        <g stroke="#9E9E9E" stroke-width="2">94          <line x1="12" y1="1" x2="12" y2="5"></line>95          <line x1="12" y1="19" x2="12" y2="23"></line>96          <line x1="1" y1="12" x2="5" y2="12"></line>97          <line x1="19" y1="12" x2="23" y2="12"></line>98          <line x1="4" y1="4" x2="6.5" y2="6.5"></line>99          <line x1="19.5" y1="19.5" x2="16.9" y2="16.9"></line>100          <line x1="19.5" y1="4.5" x2="16.9" y2="7.1"></line>101          <line x1="4.5" y1="19.5" x2="7.1" y2="16.9"></line>102        </g>103      </svg>104      <!-- location pin small -->105      <svg class="icon" viewBox="0 0 24 24">106        <circle cx="12" cy="10" r="4" fill="#9E9E9E"></circle>107        <path d="M12 22 C6 14, 6 10, 12 10 C18 10, 18 14, 12 22 Z" fill="#9E9E9E" opacity="0.6"></path>108      </svg>109      <!-- wifi -->110      <svg class="icon" viewBox="0 0 24 24">111        <path d="M2 8 C12 -0.5, 12 -0.5, 22 8" stroke="#9E9E9E" stroke-width="2" fill="none"></path>112        <path d="M5 11 C12 5, 12 5, 19 11" stroke="#9E9E9E" stroke-width="2" fill="none"></path>113        <path d="M8 14 C12 11, 12 11, 16 14" stroke="#9E9E9E" stroke-width="2" fill="none"></path>114        <circle cx="12" cy="18" r="2" fill="#9E9E9E"></circle>115      </svg>116      <!-- battery -->117      <svg class="icon" viewBox="0 0 24 24">118        <rect x="2" y="5" width="18" height="14" rx="2" ry="2" fill="none" stroke="#9E9E9E" stroke-width="2"></rect>119        <rect x="4" y="7" width="12" height="10" fill="#9E9E9E"></rect>120        <rect x="20" y="9" width="2" height="6" fill="#9E9E9E"></rect>121      </svg>122    </div>123  </div>124 125  <!-- Search area -->126  <div class="search-area">127    <div class="search-top">128      <div class="back-btn">129        <svg class="icon" viewBox="0 0 24 24">130          <polyline points="14,4 6,12 14,20" fill="none" stroke="#5f6368" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"></polyline>131        </svg>132      </div>133      <div class="fields">134        <!-- From field -->135        <div class="field">136          <svg class="chip-icon" viewBox="0 0 24 24">137            <circle cx="12" cy="12" r="8" fill="#1a73e8"></circle>138          </svg>139          <div class="label">Your location</div>140          <div class="dots-vertical">141            <svg width="12" height="12"><circle cx="6" cy="6" r="5" fill="#9E9E9E"/></svg>142            <svg width="12" height="12"><circle cx="6" cy="6" r="5" fill="#9E9E9E"/></svg>143            <svg width="12" height="12"><circle cx="6" cy="6" r="5" fill="#9E9E9E"/></svg>144          </div>145        </div>146        <!-- To field -->147        <div class="field">148          <svg class="chip-icon" viewBox="0 0 24 24">149            <circle cx="12" cy="10" r="5" fill="#d93025"></circle>150            <path d="M12 22 C7 14, 7 10, 12 10 C17 10, 17 14, 12 22 Z" fill="#d93025" opacity="0.7"></path>151          </svg>152          <div class="label">Jama Masjid</div>153          <svg class="end-icon" viewBox="0 0 24 24">154            <path d="M8 5 L8 12 L3 12" stroke="#5f6368" stroke-width="2" fill="none"></path>155            <path d="M16 19 L16 12 L21 12" stroke="#5f6368" stroke-width="2" fill="none"></path>156          </svg>157        </div>158      </div>159    </div>160    <!-- Mode row -->161    <div class="mode-row">162      <div class="mode-item">163        <svg class="mode-icon" viewBox="0 0 24 24">164          <rect x="4" y="8" width="16" height="8" rx="2" fill="#5f6368"></rect>165          <circle cx="7" cy="18" r="2" fill="#5f6368"></circle>166          <circle cx="17" cy="18" r="2" fill="#5f6368"></circle>167        </svg>168        <div class="mode-time">1 hr 20</div>169      </div>170      <div class="mode-item">171        <svg class="mode-icon" viewBox="0 0 24 24">172          <circle cx="7" cy="17" r="3" fill="#5f6368"></circle>173          <circle cx="17" cy="17" r="3" fill="#5f6368"></circle>174          <path d="M5 14 L10 10 L15 11 L19 14" stroke="#5f6368" stroke-width="2" fill="none"></path>175        </svg>176        <div class="mode-time">1 hr 12</div>177      </div>178      <div class="mode-item">179        <div class="selected-pill">180          <svg class="icon" viewBox="0 0 24 24">181            <rect x="4" y="6" width="16" height="12" rx="2" fill="#1a73e8"></rect>182            <circle cx="9" cy="11" r="1.5" fill="#E8F0FE"></circle>183            <circle cx="15" cy="11" r="1.5" fill="#E8F0FE"></circle>184          </svg>185          <span>1 hr 35</span>186        </div>187      </div>188      <div class="mode-item">189        <svg class="mode-icon" viewBox="0 0 24 24">190          <circle cx="12" cy="5" r="2" fill="#5f6368"></circle>191          <path d="M12 7 L9 13 L12 13 L10 19" stroke="#5f6368" stroke-width="2" fill="none"></path>192          <path d="M12 7 L15 13 L12 13 L14 19" stroke="#5f6368" stroke-width="2" fill="none"></path>193        </svg>194        <div class="mode-time">6 hr</div>195      </div>196    </div>197 198    <!-- Filter chips -->199    <div class="filters">200      <div class="chip">Depart at 4:04 PM201        <svg class="caret" viewBox="0 0 24 24"><polyline points="6,9 12,15 18,9" fill="none" stroke="#5f6368" stroke-width="2"/></svg>202      </div>203      <div class="chip">All modes204        <svg class="caret" viewBox="0 0 24 24"><polyline points="6,9 12,15 18,9" fill="none" stroke="#5f6368" stroke-width="2"/></svg>205      </div>206      <div class="chip">Best route207        <svg class="caret" viewBox="0 0 24 24"><polyline points="6,9 12,15 18,9" fill="none" stroke="#5f6368" stroke-width="2"/></svg>208      </div>209    </div>210  </div>211 212  <!-- Recommended Route -->213  <div class="section">214    <div class="section-title">RECOMMENDED ROUTE</div>215    <div class="card">216      <div class="route-top">217        <div class="route-steps">218          <!-- car with count -->219          <div style="display:flex; align-items:center;">220            <svg class="icon" viewBox="0 0 24 24">221              <rect x="4" y="8" width="16" height="8" rx="2" fill="#5f6368"></rect>222              <circle cx="7" cy="18" r="2" fill="#5f6368"></circle>223              <circle cx="17" cy="18" r="2" fill="#5f6368"></circle>224            </svg>225            <span class="small-count">23</span>226          </div>227          <span class="sep">›</span>228          <!-- Yellow Line -->229          <div class="line-chip yellow">Yellow Line</div>230          <span class="sep">›</span>231          <!-- Violet Line -->232          <div class="line-chip purple">Violet Line</div>233          <span class="sep">›</span>234          <!-- walk with count -->235          <div style="display:flex; align-items:center;">236            <svg class="icon" viewBox="0 0 24 24">237              <circle cx="12" cy="5" r="2" fill="#5f6368"></circle>238              <path d="M12 7 L9 13 L12 13 L10 19" stroke="#5f6368" stroke-width="2" fill="none"></path>239              <path d="M12 7 L15 13 L12 13 L14 19" stroke="#5f6368" stroke-width="2" fill="none"></path>240            </svg>241            <span class="small-count">6</span>242          </div>243        </div>244        <div class="duration">1 hr 35 min</div>245      </div>246      <div class="route-top" style="align-items:flex-start;">247        <div class="subline">Leave by 4:04 PM · Light traffic<br>Every 6 min from Arjan Garh</div>248        <div class="price">₹50</div>249      </div>250    </div>251  </div>252 253  <!-- More by subway -->254  <div class="section">255    <div class="section-title">MORE BY SUBWAY</div>256    <div class="card">257      <div class="route-top">258        <div class="route-steps">259          <svg class="icon" viewBox="0 0 24 24">260            <rect x="4" y="8" width="16" height="8" rx="2" fill="#5f6368"></rect>261            <circle cx="7" cy="18" r="2" fill="#5f6368"></circle>262            <circle cx="17" cy="18" r="2" fill="#5f6368"></circle>263          </svg>264          <span class="sep">›</span>265          <div class="line-chip yellow">Yellow Line</div>266          <span class="sep">›</span>267          <!-- rickshaw icon -->268          <div style="display:flex; align-items:center; gap:8px;">269            <svg class="icon" viewBox="0 0 24 24">270              <rect x="5" y="8" width="10" height="6" rx="1" fill="#2e7d32"></rect>271              <circle cx="8" cy="16" r="2" fill="#2e7d32"></circle>272              <circle cx="16" cy="16" r="2" fill="#2e7d32"></circle>273            </svg>274            <span class="small-count">10</span>275          </div>276        </div>277        <div class="duration">1 hr 32 min</div>278      </div>279      <div class="route-top" style="align-items:flex-start;">280        <div class="subline">Leave by 4:04 PM · Light traffic<br>Every 6 min from Arjan Garh</div>281        <div class="price">₹86–88</div>282      </div>283    </div>284  </div>285 286  <!-- More by bus -->287  <div class="section">288    <div class="section-title">MORE BY BUS</div>289 290    <!-- Bus option 1 -->291    <div class="card">292      <div class="route-top">293        <div class="route-steps">294          <!-- walk 22 -->295          <div style="display:flex; align-items:center;">296            <svg class="icon" viewBox="0 0 24 24">297              <circle cx="12" cy="5" r="2" fill="#5f6368"></circle>298              <path d="M12 7 L9 13 L12 13 L10 19" stroke="#5f6368" stroke-width="2" fill="none"></path>299              <path d="M12 7 L15 13 L12 13 L14 19" stroke="#5f6368" stroke-width="2" fill="none"></path>300            </svg>301            <span class="small-count">22</span>302          </div>303          <span class="sep">›</span>304          <!-- bus icon with route -->305          <svg class="icon" viewBox="0 0 24 24">306            <rect x="5" y="6" width="14" height="12" rx="2" fill="#5f6368"></rect>307            <circle cx="8" cy="18" r="2" fill="#5f6368"></circle>308            <circle cx="16" cy="18" r="2" fill="#5f6368"></circle>309          </svg>310          <div class="route-chip">519</div>311          <span class="sep">›</span>312          <svg class="icon" viewBox="0 0 24 24">313            <rect x="5" y="6" width="14" height="12" rx="2" fill="#5f6368"></rect>314            <circle cx="8" cy="18" r="2" fill="#5f6368"></circle>315            <circle cx="16" cy="18" r="2" fill="#5f6368"></circle>316          </svg>317          <div class="route-chip">502</div>318          <span class="sep">›</span>319          <!-- small walk -->320          <div style="display:flex; align-items:center;">321            <svg class="icon" viewBox="0 0 24 24">322              <circle cx="12" cy="5" r="2" fill="#5f6368"></circle>323              <path d="M12 7 L9 13 L12 13 L10 19" stroke="#5f6368" stroke-width="2" fill="none"></path>324              <path d="M12 7 L15 13 L12 13 L14 19" stroke="#5f6368" stroke-width="2" fill="none"></path>325            </svg>326            <span class="small-count">3</span>327          </div>328        </div>329        <div class="duration">2 hr 3 min</div>330      </div>331      <div class="route-top" style="align-items:flex-start;">332        <div class="subline">4:12 PM – 6:15 PM · ₹30<br>Scheduled at 4:34 PM, 4:55 PM from Mandi Village</div>333        <div class="start-btn">334          <svg class="icon" viewBox="0 0 24 24">335            <polygon points="6,4 18,12 6,20" fill="#1a73e8"></polygon>336          </svg>337          Start338        </div>339      </div>340    </div>341 342    <!-- Bus option 2 -->343    <div class="card" style="margin-top: 16px;">344      <div class="route-top">345        <div class="route-steps">346          <div style="display:flex; align-items:center;">347            <svg class="icon" viewBox="0 0 24 24">348              <circle cx="12" cy="5" r="2" fill="#5f6368"></circle>349              <path d="M12 7 L9 13 L12 13 L10 19" stroke="#5f6368" stroke-width="2" fill="none"></path>350              <path d="M12 7 L15 13 L12 13 L14 19" stroke="#5f6368" stroke-width="2" fill="none"></path>351            </svg>352            <span class="small-count">22</span>353          </div>354          <span class="sep">›</span>355          <div class="route-chip">519</div>356          <span class="sep">›</span>357          <svg class="icon" viewBox="0 0 24 24">358            <rect x="5" y="6" width="14" height="12" rx="2" fill="#5f6368"></rect>359            <circle cx="8" cy="18" r="2" fill="#5f6368"></circle>360            <circle cx="16" cy="18" r="2" fill="#5f6368"></circle>361          </svg>362          <span class="sep">›</span>363          <svg class="icon" viewBox="0 0 24 24">364            <rect x="5" y="6" width="14" height="12" rx="2" fill="#5f6368"></rect>365            <circle cx="8" cy="18" r="2" fill="#5f6368"></circle>366            <circle cx="16" cy="18" r="2" fill="#5f6368"></circle>367          </svg>368          <span class="sep">›</span>369          <div style="display:flex; align-items:center;">370            <svg class="icon" viewBox="0 0 24 24">371              <circle cx="12" cy="5" r="2" fill="#5f6368"></circle>372              <path d="M12 7 L9 13 L12 13 L10 19" stroke="#5f6368" stroke-width="2" fill="none"></path>373              <path d="M12 7 L15 13 L12 13 L14 19" stroke="#5f6368" stroke-width="2" fill="none"></path>374            </svg>375            <span class="small-count">3</span>376          </div>377        </div>378        <div class="duration">2 hr 13 min</div>379      </div>380      <div class="route-top" style="align-items:flex-start;">381        <div class="subline">4:12 PM – 6:25 PM · ₹35<br>Scheduled at 4:34 PM, 4:55 PM from Mandi Village</div>382        <div class="start-btn">383          <svg class="icon" viewBox="0 0 24 24">384            <polygon points="6,4 18,12 6,20" fill="#1a73e8"></polygon>385          </svg>386          Start387        </div>388      </div>389    </div>390  </div>391 392  <div class="gesture-bar"></div>393</div>394</body>395</html>