Team Ai
Datasetpublic

GD-ML/AndroidCode

sourceHugging Facemitupdated 6mo agoView on Hugging Face
1likes3.4kdownloads
10769_8.html483 linesDownload Raw Back to 10769
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>Transit Directions UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1080px; height: 2400px; position: relative; overflow: hidden;11    background: #ffffff; font-family: Arial, Helvetica, sans-serif; color: #2b2b2b;12  }13 14  /* Status bar */15  .statusbar {16    height: 120px; padding: 0 36px; display: flex; align-items: center; justify-content: space-between;17    font-size: 42px; color: #4d4d4d;18  }19  .status-icons { display: flex; align-items: center; gap: 24px; }20 21  /* Top search section */22  .top-controls {23    padding: 16px 24px 12px 24px;24  }25  .search-row {26    display: grid; grid-template-columns: 80px 1fr 80px; align-items: center;27    gap: 16px; margin-bottom: 20px;28  }29  .field {30    background: #F5F7F9; border: 1px solid #E2E6EA; height: 120px;31    border-radius: 28px; display: flex; align-items: center; padding: 0 28px;32    font-size: 40px; color: #555; box-shadow: 0 1px 0 rgba(0,0,0,0.05) inset;33  }34  .icon-btn { width: 80px; height: 80px; display: flex; align-items: center; justify-content: center; }35  .kebab { width: 26px; height: 60px; display: flex; flex-direction: column; justify-content: space-between; align-items: center; margin-left: 10px; }36  .dot { width: 10px; height: 10px; background: #8f8f8f; border-radius: 50%; }37 38  .modes {39    display: flex; justify-content: space-between; align-items: center;40    padding: 24px 40px 8px 40px;41  }42  .mode {43    width: 220px; text-align: center; color: #6a6a6a;44  }45  .mode svg { display:block; margin: 0 auto 12px auto; }46  .mode .time { font-size: 34px; }47  .selected {48    background: #E8F0FE; color: #1a73e8; border-radius: 40px; padding: 16px 0;49    box-shadow: inset 0 0 0 2px #D6E4FF;50  }51 52  /* Filter bar */53  .filter-bar {54    margin: 24px 24px 0 24px; background: #F5F5F7; border: 1px solid #E0E0E0;55    border-radius: 28px; display: flex; gap: 16px; padding: 20px;56  }57  .pill {58    flex: 1; background: #fff; border: 1px solid #E0E0E0; border-radius: 24px;59    height: 90px; display: flex; align-items: center; justify-content: space-between;60    padding: 0 26px; font-size: 36px; color: #555;61  }62  .dropdown { display: inline-flex; align-items: center; gap: 12px; }63 64  /* Content sections */65  .content { padding: 24px; }66  .section-label {67    font-size: 30px; font-weight: 700; color: #6d6d6d; letter-spacing: 1px; margin: 28px 8px 14px 8px;68  }69  .card {70    position: relative; background: #fff; border-top: 1px solid #e8e8e8;71    padding: 24px 8px 24px 8px;72  }73  .route-row {74    display: flex; align-items: center; gap: 22px; padding: 12px 8px;75    font-size: 36px; color: #555;76  }77  .chev { color: #b0b0b0; font-size: 40px; }78 79  .yellow-pill {80    background: #FFE68C; border: 1px solid #EAD777; color: #333; padding: 8px 16px;81    border-radius: 16px; font-weight: 700; font-size: 34px;82  }83  .details { font-size: 34px; color: #6a6a6a; padding: 6px 8px; }84  .subtle { color: #8d8d8d; }85  .result-meta {86    position: absolute; right: 24px; top: 26px; text-align: right;87  }88  .duration { font-size: 56px; font-weight: 700; color: #2b2b2b; }89  .price { font-size: 34px; color: #7a7a7a; margin-top: 6px; }90 91  .bus-card { padding-bottom: 18px; }92  .time-cost { font-size: 36px; color: #4d4d4d; padding: 8px 8px; }93  .schedule { font-size: 32px; color: #7a7a7a; padding: 0 8px; }94  .start-btn {95    position: absolute; right: 24px; top: 88px; height: 100px; width: 220px;96    border-radius: 50px; border: 1px solid #D0D4DA; background: #fff; display: flex;97    align-items: center; justify-content: center; gap: 16px; color: #1976d2; font-size: 40px; font-weight: 700;98  }99  .divider { height: 16px; background: #f1f2f4; border-top: 1px solid #e5e5e5; border-bottom: 1px solid #e5e5e5; margin: 8px -24px; }100 101  /* Bottom handle */102  .home-handle {103    position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%);104    width: 320px; height: 12px; background: #C8C8CC; border-radius: 8px;105  }106 107  /* Small helper icons/text pills */108  .number-pill {109    background: #EFEFF1; border: 1px solid #DADADA; color: #4d4d4d;110    border-radius: 14px; padding: 4px 10px; font-weight: 700; font-size: 32px;111  }112  .walk-count { color: #7a7a7a; font-size: 34px; }113 114  /* Tiny */115  .tiny-note { font-size: 30px; color: #8d8d8d; }116</style>117</head>118<body>119<div id="render-target">120 121  <!-- Status bar -->122  <div class="statusbar">123    <div>3:43</div>124    <div class="status-icons">125      <!-- location icon -->126      <svg width="46" height="46" viewBox="0 0 46 46">127        <circle cx="23" cy="23" r="10" fill="#757575"></circle>128        <path d="M23 2 L27 12 L19 12 Z" fill="#757575"></path>129      </svg>130      <!-- wifi -->131      <svg width="54" height="46" viewBox="0 0 54 46">132        <path d="M3 18 Q27 -2 51 18" stroke="#757575" stroke-width="4" fill="none"/>133        <path d="M10 26 Q27 12 44 26" stroke="#757575" stroke-width="4" fill="none"/>134        <path d="M18 34 Q27 26 36 34" stroke="#757575" stroke-width="4" fill="none"/>135        <circle cx="27" cy="39" r="4" fill="#757575"/>136      </svg>137      <!-- battery -->138      <svg width="64" height="46" viewBox="0 0 64 46">139        <rect x="2" y="10" width="50" height="26" rx="6" ry="6" stroke="#757575" stroke-width="4" fill="none"/>140        <rect x="6" y="14" width="40" height="18" fill="#757575"/>141        <rect x="54" y="16" width="8" height="14" rx="2" fill="#757575"/>142      </svg>143    </div>144  </div>145 146  <!-- Top search / directions inputs -->147  <div class="top-controls">148    <!-- Back arrow row + origin field -->149    <div class="search-row">150      <div class="icon-btn">151        <!-- back arrow -->152        <svg width="56" height="56" viewBox="0 0 56 56">153          <path d="M32 10 L14 28 L32 46" stroke="#5f6368" stroke-width="6" fill="none" stroke-linecap="round" stroke-linejoin="round"/>154        </svg>155      </div>156      <div class="field">157        <svg width="34" height="34" viewBox="0 0 34 34" style="margin-right:18px;">158          <circle cx="17" cy="17" r="12" fill="#4285F4"/>159        </svg>160        <span>Your location</span>161      </div>162      <div class="kebab">163        <div class="dot"></div><div class="dot"></div><div class="dot"></div>164      </div>165    </div>166 167    <!-- spacer dots between fields -->168    <div style="width: 20px; margin: 0 0 8px 128px;">169      <div style="width:6px;height:6px;background:#bdbdbd;border-radius:50%;margin:6px 0;"></div>170      <div style="width:6px;height:6px;background:#bdbdbd;border-radius:50%;margin:6px 0;"></div>171      <div style="width:6px;height:6px;background:#bdbdbd;border-radius:50%;margin:6px 0;"></div>172    </div>173 174    <!-- Destination row -->175    <div class="search-row" style="margin-top: 8px;">176      <div class="icon-btn">177        <!-- red pin -->178        <svg width="44" height="44" viewBox="0 0 44 44">179          <circle cx="22" cy="18" r="14" fill="#EA4335"/>180          <path d="M22 32 L22 44" stroke="#EA4335" stroke-width="6" stroke-linecap="round"/>181        </svg>182      </div>183      <div class="field">184        <span>India Gate</span>185      </div>186      <div class="icon-btn">187        <!-- swap up-down -->188        <svg width="56" height="56" viewBox="0 0 56 56">189          <path d="M28 10 L36 18 L20 18 Z" fill="#5f6368"/>190          <rect x="24" y="18" width="8" height="16" fill="#5f6368"/>191          <path d="M28 46 L20 38 L36 38 Z" fill="#5f6368"/>192          <rect x="24" y="22" width="8" height="0" fill="#5f6368"/>193        </svg>194      </div>195    </div>196 197    <!-- transport modes -->198    <div class="modes">199      <div class="mode">200        <svg width="72" height="48" viewBox="0 0 72 48">201          <rect x="10" y="14" width="52" height="20" rx="8" fill="#616161"/>202          <circle cx="22" cy="38" r="6" fill="#616161"/>203          <circle cx="50" cy="38" r="6" fill="#616161"/>204        </svg>205        <div class="time">1 hr 2</div>206      </div>207      <div class="mode">208        <svg width="72" height="48" viewBox="0 0 72 48">209          <circle cx="22" cy="38" r="6" fill="#616161"/>210          <circle cx="50" cy="38" r="6" fill="#616161"/>211          <path d="M14 30 L30 20 L44 30" stroke="#616161" stroke-width="4" fill="none"/>212          <rect x="46" y="20" width="16" height="10" fill="#616161"/>213        </svg>214        <div class="time">55 min</div>215      </div>216      <div class="mode selected">217        <svg width="72" height="48" viewBox="0 0 72 48">218          <rect x="10" y="10" width="52" height="28" rx="6" fill="#1a73e8"/>219          <circle cx="24" cy="34" r="4" fill="#fff"/>220          <circle cx="48" cy="34" r="4" fill="#fff"/>221        </svg>222        <div class="time">1 hr 16</div>223      </div>224      <div class="mode">225        <svg width="72" height="48" viewBox="0 0 72 48">226          <path d="M18 36 L36 12 L54 36" stroke="#616161" stroke-width="6" fill="none" stroke-linecap="round"/>227        </svg>228        <div class="time">5 hr</div>229      </div>230    </div>231 232    <!-- filter bar -->233    <div class="filter-bar">234      <div class="pill">235        <span>Depart at 3:43 PM</span>236        <span class="dropdown">237          <span style="color:#7a7a7a; font-size:34px;">▼</span>238        </span>239      </div>240      <div class="pill">241        <span>All modes</span>242        <span class="dropdown">243          <span style="color:#7a7a7a; font-size:34px;">▼</span>244        </span>245      </div>246      <div class="pill">247        <span>Best route</span>248        <span class="dropdown">249          <span style="color:#7a7a7a; font-size:34px;">▼</span>250        </span>251      </div>252    </div>253  </div>254 255  <div class="divider"></div>256 257  <!-- Content cards -->258  <div class="content">259    <div class="section-label">EARLIEST ARRIVAL</div>260    <div class="card" style="padding-bottom: 36px;">261      <div class="route-row">262        <!-- car -->263        <svg width="64" height="40" viewBox="0 0 64 40">264          <rect x="6" y="8" width="52" height="18" rx="6" fill="#616161"/>265          <circle cx="20" cy="32" r="5" fill="#616161"/>266          <circle cx="44" cy="32" r="5" fill="#616161"/>267        </svg>268        <span class="chev">›</span>269        <!-- metro logo (red circle with bar) -->270        <svg width="44" height="44" viewBox="0 0 44 44">271          <circle cx="22" cy="22" r="20" fill="#EA4335"/>272          <rect x="10" y="20" width="24" height="4" fill="#fff"/>273        </svg>274        <span class="chev">›</span>275        <span class="yellow-pill">Yellow Line</span>276        <span class="chev">›</span>277        <!-- auto rickshaw (green) -->278        <svg width="46" height="34" viewBox="0 0 46 34">279          <rect x="4" y="8" width="26" height="12" rx="3" fill="#2E7D32"/>280          <rect x="30" y="12" width="10" height="8" fill="#2E7D32"/>281          <circle cx="16" cy="26" r="4" fill="#2E7D32"/>282          <circle cx="34" cy="26" r="4" fill="#2E7D32"/>283        </svg>284        <span class="tiny-note">5</span>285      </div>286      <div class="details">Leave by 3:43 PM · Normal traffic</div>287      <div class="details subtle">Every 6 min from Arjan Garh</div>288      <div class="result-meta">289        <div class="duration">1 hr 16 min</div>290        <div class="price">₹81–84</div>291      </div>292    </div>293 294    <div class="divider"></div>295 296    <div class="section-label">MORE BY BUS</div>297 298    <!-- Bus card 1 -->299    <div class="card bus-card">300      <div class="route-row">301        <!-- walking -->302        <svg width="46" height="40" viewBox="0 0 46 40">303          <circle cx="18" cy="10" r="5" fill="#757575"/>304          <path d="M18 16 L12 28" stroke="#757575" stroke-width="4" />305          <path d="M18 16 L26 24" stroke="#757575" stroke-width="4" />306        </svg>307        <span class="walk-count">22</span>308        <span class="chev">›</span>309        <!-- bus -->310        <svg width="50" height="40" viewBox="0 0 50 40">311          <rect x="6" y="8" width="38" height="18" rx="4" fill="#616161"/>312          <circle cx="16" cy="30" r="4" fill="#616161"/>313          <circle cx="34" cy="30" r="4" fill="#616161"/>314        </svg>315        <span class="number-pill">519</span>316        <span class="chev">›</span>317        <svg width="50" height="40" viewBox="0 0 50 40">318          <rect x="6" y="8" width="38" height="18" rx="4" fill="#616161"/>319          <circle cx="16" cy="30" r="4" fill="#616161"/>320          <circle cx="34" cy="30" r="4" fill="#616161"/>321        </svg>322        <span class="number-pill">501</span>323        <span class="number-pill">502</span>324        <span class="chev">›</span>325        <svg width="46" height="40" viewBox="0 0 46 40">326          <circle cx="18" cy="10" r="5" fill="#757575"/>327          <path d="M18 16 L12 28" stroke="#757575" stroke-width="4" />328          <path d="M18 16 L26 24" stroke="#757575" stroke-width="4" />329        </svg>330        <span class="walk-count">6</span>331      </div>332      <div class="time-cost">3:56 PM – 5:47 PM · ₹30</div>333      <div class="schedule">Scheduled at 4:18 PM, 4:34 PM from Mandi Village</div>334      <div class="result-meta" style="top: 20px;">335        <div class="duration">1 hr 51 min</div>336      </div>337      <div class="start-btn">338        <svg width="34" height="34" viewBox="0 0 34 34">339          <path d="M17 4 L28 30 L6 22 Z" fill="#1a73e8"/>340        </svg>341        <span>Start</span>342      </div>343    </div>344 345    <div class="divider"></div>346 347    <!-- Bus card 2 -->348    <div class="card bus-card">349      <div class="route-row">350        <svg width="46" height="40" viewBox="0 0 46 40">351          <circle cx="18" cy="10" r="5" fill="#757575"/>352          <path d="M18 16 L12 28" stroke="#757575" stroke-width="4" />353          <path d="M18 16 L26 24" stroke="#757575" stroke-width="4" />354        </svg>355        <span class="walk-count">22</span>356        <span class="chev">›</span>357        <svg width="50" height="40" viewBox="0 0 50 40">358          <rect x="6" y="8" width="38" height="18" rx="4" fill="#616161"/>359          <circle cx="16" cy="30" r="4" fill="#616161"/>360          <circle cx="34" cy="30" r="4" fill="#616161"/>361        </svg>362        <span class="number-pill">519</span>363        <span class="chev">›</span>364        <svg width="50" height="40" viewBox="0 0 50 40">365          <rect x="6" y="8" width="38" height="18" rx="4" fill="#616161"/>366          <circle cx="16" cy="30" r="4" fill="#616161"/>367          <circle cx="34" cy="30" r="4" fill="#616161"/>368        </svg>369        <span class="chev">›</span>370        <svg width="46" height="40" viewBox="0 0 46 40">371          <circle cx="18" cy="10" r="5" fill="#757575"/>372          <path d="M18 16 L12 28" stroke="#757575" stroke-width="4" />373          <path d="M18 16 L26 24" stroke="#757575" stroke-width="4" />374        </svg>375        <span class="walk-count">6</span>376      </div>377      <div class="time-cost">3:56 PM – 5:50 PM · ₹30</div>378      <div class="schedule">Scheduled at 4:18 PM, 4:34 PM from Mandi Village</div>379      <div class="result-meta" style="top: 20px;">380        <div class="duration">1 hr 54 min</div>381      </div>382      <div class="start-btn">383        <svg width="34" height="34" viewBox="0 0 34 34">384          <path d="M17 4 L28 30 L6 22 Z" fill="#1a73e8"/>385        </svg>386        <span>Start</span>387      </div>388    </div>389 390    <div class="divider"></div>391 392    <!-- Bus card 3 -->393    <div class="card bus-card">394      <div class="route-row">395        <svg width="46" height="40" viewBox="0 0 46 40">396          <circle cx="18" cy="10" r="5" fill="#757575"/>397          <path d="M18 16 L12 28" stroke="#757575" stroke-width="4" />398          <path d="M18 16 L26 24" stroke="#757575" stroke-width="4" />399        </svg>400        <span class="walk-count">22</span>401        <span class="chev">›</span>402        <svg width="50" height="40" viewBox="0 0 50 40">403          <rect x="6" y="8" width="38" height="18" rx="4" fill="#616161"/>404          <circle cx="16" cy="30" r="4" fill="#616161"/>405          <circle cx="34" cy="30" r="4" fill="#616161"/>406        </svg>407        <span class="number-pill">519</span>408        <span class="chev">›</span>409        <svg width="50" height="40" viewBox="0 0 50 40">410          <rect x="6" y="8" width="38" height="18" rx="4" fill="#616161"/>411          <circle cx="16" cy="30" r="4" fill="#616161"/>412          <circle cx="34" cy="30" r="4" fill="#616161"/>413        </svg>414        <span class="chev">›</span>415        <svg width="50" height="40" viewBox="0 0 50 40">416          <rect x="6" y="8" width="38" height="18" rx="4" fill="#616161"/>417          <circle cx="16" cy="30" r="4" fill="#616161"/>418          <circle cx="34" cy="30" r="4" fill="#616161"/>419        </svg>420        <span class="number-pill">507</span>421        <span class="chev">›</span>422        <svg width="46" height="40" viewBox="0 0 46 40">423          <circle cx="18" cy="10" r="5" fill="#757575"/>424          <path d="M18 16 L12 28" stroke="#757575" stroke-width="4" />425          <path d="M18 16 L26 24" stroke="#757575" stroke-width="4" />426        </svg>427        <span class="walk-count">6</span>428      </div>429      <div class="time-cost">3:56 PM – 6:01 PM · ₹30</div>430      <div class="schedule">Scheduled at 4:18 PM, 4:34 PM from Mandi Village</div>431      <div class="result-meta" style="top: 20px;">432        <div class="duration">2 hr 5 min</div>433      </div>434      <div class="start-btn">435        <svg width="34" height="34" viewBox="0 0 34 34">436          <path d="M17 4 L28 30 L6 22 Z" fill="#1a73e8"/>437        </svg>438        <span>Start</span>439      </div>440    </div>441 442    <div class="divider"></div>443 444    <!-- Final summary row -->445    <div class="card" style="padding-bottom: 60px;">446      <div class="route-row">447        <svg width="46" height="40" viewBox="0 0 46 40">448          <circle cx="18" cy="10" r="5" fill="#757575"/>449          <path d="M18 16 L12 28" stroke="#757575" stroke-width="4" />450          <path d="M18 16 L26 24" stroke="#757575" stroke-width="4" />451        </svg>452        <span class="walk-count">22</span>453        <span class="chev">›</span>454        <svg width="50" height="40" viewBox="0 0 50 40">455          <rect x="6" y="8" width="38" height="18" rx="4" fill="#616161"/>456          <circle cx="16" cy="30" r="4" fill="#616161"/>457          <circle cx="34" cy="30" r="4" fill="#616161"/>458        </svg>459        <span class="number-pill">519</span>460        <span class="chev">›</span>461        <svg width="50" height="40" viewBox="0 0 50 40">462          <rect x="6" y="8" width="38" height="18" rx="4" fill="#616161"/>463          <circle cx="16" cy="30" r="4" fill="#616161"/>464          <circle cx="34" cy="30" r="4" fill="#616161"/>465        </svg>466        <span class="chev">›</span>467        <svg width="46" height="40" viewBox="0 0 46 40">468          <circle cx="18" cy="10" r="5" fill="#757575"/>469          <path d="M18 16 L12 28" stroke="#757575" stroke-width="4" />470          <path d="M18 16 L26 24" stroke="#757575" stroke-width="4" />471        </svg>472        <span class="walk-count">6</span>473      </div>474      <div class="result-meta" style="top: 20px;">475        <div class="duration">1 hr 50 min</div>476      </div>477    </div>478  </div>479 480  <div class="home-handle"></div>481</div>482</body>483</html>
GD-ML/AndroidCode · Team Ai