GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Transit Results UI</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: "Roboto", Arial, Helvetica, sans-serif; }8  #render-target {9    width: 1080px; height: 2400px;10    position: relative; overflow: hidden;11    background: #121212; color: #EAEAEA;12  }13 14  /* Top App Bar / Navigation */15  .app-header {16    padding: 32px 32px 16px 32px;17    background: #181818;18    box-shadow: 0 2px 0 rgba(255,255,255,0.03);19  }20  .top-row {21    display: flex; align-items: center;22    gap: 24px;23  }24  .icon-btn {25    width: 60px; height: 60px; border-radius: 12px;26    display: flex; justify-content: center; align-items: center;27    background: transparent;28  }29  /* Location chips */30  .chip {31    display: flex; align-items: center;32    gap: 20px;33    height: 86px; border-radius: 16px;34    border: 1px solid #2b2b2b; background: #1a1a1a;35    padding: 0 24px; color: #f5f5f5;36    font-size: 32px;37  }38  .chip + .chip { margin-top: 20px; }39  .dot {40    width: 26px; height: 26px; border-radius: 50%;41    background: #C8C8C8; border: 3px solid #4a4a4a;42  }43  .dot.red { background: #E74A3B; border-color: #8c1f18; }44  .swap {45    margin-left: auto; display: flex; align-items: center;46  }47 48  /* Time & Filter row */49  .time-filter {50    display: flex; align-items: center; justify-content: space-between;51    margin-top: 26px;52  }53  .time-left {54    display: flex; align-items: center; gap: 18px;55    color: #d9d9d9; font-size: 30px;56  }57  .dropdown-caret {58    width: 0; height: 0; border-left: 9px solid transparent;59    border-right: 9px solid transparent; border-top: 12px solid #d9d9d9;60    margin-left: 10px;61  }62  .filter-btn {63    position: relative;64    display: flex; align-items: center; gap: 16px;65    border: 1px solid #2b2b2b; background: #1a1a1a; color: #d9d9d9;66    padding: 18px 28px; border-radius: 14px; font-size: 30px;67  }68  .badge {69    position: absolute; right: -10px; top: -10px;70    width: 48px; height: 48px; border-radius: 50%;71    background: #49C2AA; color: #0b0b0b; font-weight: 700;72    display: flex; align-items: center; justify-content: center;73    font-size: 26px; border: 3px solid #101010;74  }75 76  /* Adjust row */77  .adjust-row {78    display: flex; align-items: center; justify-content: space-between;79    padding: 26px 32px 18px; color: #bdbdbd; font-size: 30px;80  }81  .adjust-btn {82    display: flex; align-items: center; gap: 14px; color: #bdbdbd;83  }84 85  /* Section Title */86  .section-title {87    padding: 30px 32px 20px; font-size: 40px; color: #e0e0e0;88    font-weight: 600;89  }90 91  /* Route Card */92  .card {93    margin: 0 32px; border-radius: 18px;94    background: #161616; border: 1px solid #2b2b2b;95    padding: 26px; color: #eaeaea;96  }97  .times {98    font-size: 36px; display: flex; align-items: baseline; gap: 18px;99  }100  .duration {101    color: #9e9e9e; font-size: 32px;102  }103  .route-line {104    margin-top: 24px;105    display: flex; align-items: center; gap: 22px; flex-wrap: nowrap;106    padding: 18px; border-radius: 12px; background: #151515; border: 1px dashed #2a2a2a;107  }108  .label-small { font-size: 28px; color: #bdbdbd; }109 110  /* Small icons */111  .chev {112    font-size: 40px; color: #6f6f6f; margin: 0 4px;113  }114  .info-badge {115    width: 42px; height: 42px; border-radius: 50%;116    background: #FFC857; color: #1b1b1b; font-weight: 700;117    display: inline-flex; align-items: center; justify-content: center;118    font-size: 26px; margin-top: -10px;119  }120 121  /* Simple bus icon */122  .bus {123    width: 88px; height: 54px; background: #2c2c2c; border-radius: 10px;124    position: relative; border: 2px solid #3a3a3a;125  }126  .bus:before, .bus:after {127    content: ""; position: absolute; bottom: -12px;128    width: 18px; height: 18px; background: #eaeaea; border-radius: 50%;129  }130  .bus:before { left: 14px; }131  .bus:after { right: 14px; }132  .bus .window {133    position: absolute; left: 10px; top: 10px; right: 10px; height: 20px;134    background: #4f4f4f; border-radius: 6px;135  }136 137  /* Simple walking icon */138  .walk {139    width: 40px; height: 40px; position: relative; margin-right: 8px;140  }141  .walk .head {142    width: 16px; height: 16px; background: #eaeaea; border-radius: 50%;143    position: absolute; left: 12px; top: 0;144  }145  .walk .body {146    position: absolute; left: 12px; top: 18px; width: 8px; height: 22px; background: #eaeaea;147    transform: rotate(15deg); border-radius: 4px;148  }149  .walk .arm {150    position: absolute; left: 2px; top: 18px; width: 18px; height: 6px; background: #eaeaea;151    transform: rotate(-25deg); border-radius: 3px;152  }153  .walk .leg {154    position: absolute; left: 8px; top: 34px; width: 22px; height: 6px; background: #eaeaea;155    transform: rotate(25deg); border-radius: 3px;156  }157 158  /* Spacer to mimic empty area */159  .spacer {160    height: 1700px;161  }162</style>163</head>164<body>165<div id="render-target">166 167  <div class="app-header">168    <div class="top-row">169      <div class="icon-btn">170        <!-- Back Arrow -->171        <svg width="48" height="48">172          <path d="M30 8 L14 24 L30 40" stroke="#ffffff" stroke-width="6" fill="none" stroke-linecap="round" stroke-linejoin="round"/>173        </svg>174      </div>175    </div>176 177    <!-- Location chips -->178    <div class="chip">179      <div class="dot"></div>180      <div>Groningen, Netherlands</div>181      <div class="swap">182        <!-- Swap (up/down) icon -->183        <svg width="46" height="46">184          <path d="M16 10 L8 18 L16 26" stroke="#d9d9d9" stroke-width="4" fill="none" stroke-linecap="round" stroke-linejoin="round"/>185          <path d="M30 36 L38 28 L30 20" stroke="#d9d9d9" stroke-width="4" fill="none" stroke-linecap="round" stroke-linejoin="round"/>186        </svg>187      </div>188    </div>189    <div class="chip">190      <div class="dot red"></div>191      <div>Amsterdam Centraal</div>192    </div>193 194    <!-- Time & Filter -->195    <div class="time-filter">196      <div class="time-left">197        <!-- Clock icon -->198        <svg width="36" height="36">199          <circle cx="18" cy="18" r="16" stroke="#d9d9d9" stroke-width="4" fill="none"/>200          <path d="M18 18 L18 9" stroke="#d9d9d9" stroke-width="4" stroke-linecap="round"/>201          <path d="M18 18 L26 22" stroke="#d9d9d9" stroke-width="4" stroke-linecap="round"/>202        </svg>203        <span>Sun, Nov 5, 7:00 AM</span>204        <span class="dropdown-caret"></span>205      </div>206      <div class="filter-btn">207        <!-- Funnel icon -->208        <svg width="36" height="36" viewBox="0 0 36 36">209          <path d="M6 8 H30 L20 18 V28 L16 26 V18 Z" fill="#d9d9d9"/>210        </svg>211        <span>Filter</span>212        <div class="badge">9</div>213      </div>214    </div>215  </div>216 217  <!-- Adjust row -->218  <div class="adjust-row">219    <div class="adjust-btn">220      <!-- Left chevron -->221      <svg width="34" height="34">222        <path d="M22 8 L12 17 L22 26" stroke="#bdbdbd" stroke-width="4" fill="none" stroke-linecap="round" stroke-linejoin="round"/>223      </svg>224      <span>- 5 min</span>225    </div>226    <div style="color:#e0e0e0;">Sun, Nov 5, 7:00 AM</div>227    <div class="adjust-btn">228      <span>+ 5 min</span>229      <!-- Right chevron -->230      <svg width="34" height="34">231        <path d="M12 8 L22 17 L12 26" stroke="#bdbdbd" stroke-width="4" fill="none" stroke-linecap="round" stroke-linejoin="round"/>232      </svg>233    </div>234  </div>235 236  <div class="section-title">Suggested Routes</div>237 238  <!-- Route card -->239  <div class="card">240    <div class="times">241      <div>8:37 PM - 12:53 AM</div>242      <div class="duration">→ 4 hr 16 min</div>243    </div>244 245    <div class="route-line">246      <!-- Walking -->247      <div style="display:flex; align-items:center; gap:10px;">248        <div class="walk">249          <div class="head"></div>250          <div class="body"></div>251          <div class="arm"></div>252          <div class="leg"></div>253        </div>254        <div class="label-small">15</div>255      </div>256 257      <div class="chev">›</div>258 259      <!-- Bus sequence -->260      <div class="bus"><div class="window"></div></div>261      <div class="chev">›</div>262      <div style="display:flex; align-items:center; gap:12px;">263        <div class="bus"><div class="window"></div></div>264        <div class="info-badge">i</div>265      </div>266      <div class="chev">›</div>267      <div class="bus"><div class="window"></div></div>268      <div class="chev">›</div>269      <div class="bus"><div class="window"></div></div>270      <div class="chev">›</div>271      <div style="display:flex; align-items:center; gap:12px;">272        <div class="bus"><div class="window"></div></div>273        <div class="info-badge">i</div>274      </div>275    </div>276  </div>277 278  <div class="spacer"></div>279</div>280</body>281</html>