GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Transit Planner Mock</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7  #render-target {8    width: 1080px;9    height: 2400px;10    position: relative;11    overflow: hidden;12    background: #14161B; /* dark app background */13    color: #EAECEF;14  }15  /* Status bar */16  .statusbar {17    position: absolute;18    top: 0;19    left: 0;20    width: 1080px;21    height: 98px;22    background: #0E1116;23    color: #FFF;24    display: flex;25    align-items: center;26    justify-content: space-between;27    padding: 0 28px;28    font-size: 34px;29    letter-spacing: 0.5px;30  }31  .status-icons {32    display: flex;33    align-items: center;34    gap: 18px;35  }36  .pill {37    width: 40px; height: 40px; border-radius: 20px; border: 2px solid #9AA1A9;38  }39  .battery {40    width: 56px; height: 28px; border: 3px solid #9AA1A9; border-radius: 6px; position: relative;41  }42  .battery:after {43    content: ""; position: absolute; right: -8px; top: 7px; width: 6px; height: 14px; background: #9AA1A9; border-radius: 2px;44  }45  .battery .level {46    position: absolute; left: 3px; top: 3px; bottom: 3px; width: 42px; background: #E6E6E6; border-radius: 3px;47  }48  /* Top app bar */49  .topbar {50    position: absolute;51    top: 98px;52    left: 0;53    width: 1080px;54    padding: 22px 24px 10px 24px;55    box-sizing: border-box;56    background: #171A1F;57  }58  .back-row {59    display: flex;60    align-items: center;61    gap: 22px;62    margin-bottom: 18px;63  }64  .icon-btn {65    width: 72px; height: 72px; display: flex; align-items: center; justify-content: center;66  }67  .back-row svg { fill: #EAECEF; }68  .field {69    background: #1D2228;70    border: 1px solid #2A2F36;71    border-radius: 16px;72    height: 96px;73    width: 100%;74    display: flex; align-items: center;75    padding: 0 24px;76    box-sizing: border-box;77    color: #EAECEF;78    font-size: 34px;79  }80  .field + .field { margin-top: 16px; }81  .left-dot {82    width: 24px; height: 24px; border-radius: 50%;83    margin-right: 18px; background: transparent; border: 3px solid #C6CBD2;84  }85  .left-dot.red { background: #E03D47; border: none; }86  .swap {87    margin-left: auto;88    width: 56px; height: 56px; border-radius: 28px;89    display: flex; justify-content: center; align-items: center;90    background: #222730; border: 1px solid #2E343D;91  }92  /* Controls row */93  .controls {94    display: flex; align-items: center; justify-content: space-between;95    margin-top: 18px;96  }97  .time-select {98    display: inline-flex; align-items: center; gap: 14px;99    color: #C9CED6; font-size: 34px;100  }101  .filter-btn {102    display: inline-flex; align-items: center; gap: 12px;103    background: #1E242B; border: 1px solid #313742;104    color: #EAECEF; font-size: 34px; padding: 18px 28px; border-radius: 14px;105    position: relative;106  }107  .badge {108    position: absolute; right: -14px; top: -16px; background: #37C8B1; color: #0B1A19;109    font-weight: 700; font-size: 28px; width: 44px; height: 44px; border-radius: 22px; display: flex; align-items: center; justify-content: center; border: 4px solid #171A1F;110  }111  /* Dropdown */112  .dropdown {113    position: absolute;114    left: 28px;115    top: 420px;116    width: 520px;117    background: #232830;118    border: 1px solid #39404B;119    border-radius: 18px;120    box-shadow: 0 22px 42px rgba(0,0,0,0.45);121    overflow: hidden;122  }123  .drop-item {124    padding: 28px 26px;125    font-size: 36px;126    color: #EAECEF;127    border-bottom: 1px solid #313744;128  }129  .drop-item:last-child { border-bottom: none; }130  .drop-item:hover { background: #2A303A; }131  /* List results */132  .results {133    position: absolute;134    top: 640px;135    left: 0;136    right: 0;137    bottom: 0;138    padding: 20px 24px 40px;139    box-sizing: border-box;140  }141  .result-card {142    margin-top: 28px;143    background: transparent;144    border-radius: 16px;145    padding: 8px 8px 24px;146    position: relative;147  }148  .res-head {149    display: flex; align-items: center; justify-content: space-between;150    color: #EAECEF; font-size: 40px;151    padding: 8px 8px 14px;152  }153  .dur { color: #AAB2BD; font-size: 34px; margin-left: 12px; }154  .fare {155    background: #2A3038; color: #DADFE6; font-size: 34px; padding: 14px 24px; border-radius: 14px; border: 1px solid #3A414D;156  }157  .route-bar {158    background: #1B2027; border: 1px solid #2B313B; border-radius: 16px;159    padding: 24px; display: flex; align-items: center; gap: 22px;160  }161  .chip-walk {162    display: inline-flex; align-items: center; gap: 10px; color: #C9CED6; font-size: 32px;163  }164  .sep { color: #5D6673; font-size: 44px; }165  .bus, .walk {166    width: 48px; height: 30px; position: relative;167  }168  .bus svg, .walk svg { width: 100%; height: 100%; fill: #DDE3EA; }169  .info-dot {170    width: 34px; height: 34px; background: #F0B332; color: #1A1A1A; border-radius: 17px;171    display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 22px;172    margin: 0 6px;173  }174  /* subtle chevron */175  .chev {176    color: #8A93A1; font-size: 44px; margin: 0 8px;177  }178</style>179</head>180<body>181<div id="render-target">182 183  <!-- Status Bar -->184  <div class="statusbar">185    <div>8:27</div>186    <div class="status-icons">187      <div class="pill"></div>188      <div class="pill" style="border-radius:6px; width:44px; height:40px;"></div>189      <div class="pill" style="width:44px; height:44px;"></div>190      <div class="battery"><div class="level"></div></div>191      <div style="font-size:28px; opacity:.9;">94%</div>192    </div>193  </div>194 195  <!-- Top Section -->196  <div class="topbar">197    <div class="back-row">198      <div class="icon-btn">199        <svg width="40" height="40" viewBox="0 0 24 24">200          <path d="M15.5 3L7 12l8.5 9 1.7-1.6L10.5 12l6.7-7.4z"/>201        </svg>202      </div>203      <!-- First field -->204      <div class="field">205        <span class="left-dot"></span>206        Groningen, Netherlands207        <div class="swap" title="swap">208          <svg width="28" height="28" viewBox="0 0 24 24" fill="#C9CED6">209            <path d="M7 7h10l-2-2 1.4-1.4L21.8 7l-5.4 3.4L15 9l2-2H7V7zm10 10H7l2 2-1.4 1.4L2.2 17l5.4-3.4L9 15l-2 2h10v0z"/>210          </svg>211        </div>212      </div>213    </div>214    <!-- Second field -->215    <div class="field">216      <span class="left-dot red"></span>217      Amsterdam Centraal218    </div>219 220    <!-- Controls row -->221    <div class="controls">222      <div class="time-select">223        <svg width="32" height="32" viewBox="0 0 24 24" fill="#C9CED6">224          <path d="M12 2a10 10 0 100 20 10 10 0 000-20zm1 5h-2v6l5 3 1-1.7-4-2.3V7z"/>225        </svg>226        <span>Depart now</span>227        <svg width="22" height="22" viewBox="0 0 24 24" fill="#C9CED6">228          <path d="M7 10l5 5 5-5H7z"/>229        </svg>230      </div>231 232      <div class="filter-btn">233        <svg width="34" height="34" viewBox="0 0 24 24" fill="#EAECEF">234          <path d="M3 5h18l-7 8v5l-4 1v-6L3 5z"/>235        </svg>236        <span>Filter</span>237        <div class="badge">9</div>238      </div>239    </div>240  </div>241 242  <!-- Dropdown menu open -->243  <div class="dropdown">244    <div class="drop-item">Depart Now</div>245    <div class="drop-item">Set your departure time</div>246    <div class="drop-item">Set desired arrival time</div>247    <div class="drop-item">Latest departure</div>248  </div>249 250  <!-- Results list -->251  <div class="results">252    <div class="result-card">253      <div class="res-head">254        <div>255          5:23 AM - 10:23 AM256          <span class="dur">→ 5 hr</span>257        </div>258        <div class="fare">€41.82</div>259      </div>260      <div class="route-bar">261        <div class="chip-walk">262          <svg class="walk" viewBox="0 0 24 24">263            <path d="M13 5a2 2 0 11-4 0 2 2 0 014 0zM4 20h2l2-6 2 2v4h2v-5l-2-2 1-3 2 1v2h2v-3l-4-2-2 1-2 5H4l2 6z"/>264          </svg>265          <span>15</span>266        </div>267        <span class="chev">›</span>268 269        <div class="bus">270          <svg viewBox="0 0 24 24">271            <path d="M4 16v-7a5 5 0 015-5h6a5 5 0 015 5v7h-1a2 2 0 11-4 0H9a2 2 0 11-4 0H4zm3-9h10a3 3 0 013 3H4a3 3 0 013-3z"/>272          </svg>273        </div>274        <div class="info-dot">i</div>275        <span class="chev">›</span>276 277        <div class="bus">278          <svg viewBox="0 0 24 24">279            <path d="M4 16v-7a5 5 0 015-5h6a5 5 0 015 5v7h-1a2 2 0 11-4 0H9a2 2 0 11-4 0H4zm3-9h10a3 3 0 013 3H4a3 3 0 013-3z"/>280          </svg>281        </div>282        <span class="chev">›</span>283 284        <div class="bus">285          <svg viewBox="0 0 24 24">286            <path d="M4 16v-7a5 5 0 015-5h6a5 5 0 015 5v7h-1a2 2 0 11-4 0H9a2 2 0 11-4 0H4zm3-9h10a3 3 0 013 3H4a3 3 0 013-3z"/>287          </svg>288        </div>289        <span class="chev">›</span>290 291        <div class="bus">292          <svg viewBox="0 0 24 24">293            <path d="M4 16v-7a5 5 0 015-5h6a5 5 0 015 5v7h-1a2 2 0 11-4 0H9a2 2 0 11-4 0H4zm3-9h10a3 3 0 013 3H4a3 3 0 013-3z"/>294          </svg>295        </div>296        <span class="chev">›</span>297 298        <div class="bus">299          <svg viewBox="0 0 24 24">300            <path d="M4 16v-7a5 5 0 015-5h6a5 5 0 015 5v7h-1a2 2 0 11-4 0H9a2 2 0 11-4 0H4zm3-9h10a3 3 0 013 3H4a3 3 0 013-3z"/>301          </svg>302        </div>303        <div class="info-dot">i</div>304 305      </div>306    </div>307  </div>308 309</div>310</body>311</html>