GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Transit Planner UI</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Inter", Arial, sans-serif; }7  #render-target {8    width: 1080px;9    height: 2400px;10    position: relative;11    overflow: hidden;12    background: #496D89; /* deep steel blue */13  }14 15  /* Top map area */16  .map-area {17    position: absolute;18    top: 0;19    left: 0;20    width: 1080px;21    height: 500px;22    background: #E0E0E0;23    border-bottom: 1px solid #BDBDBD;24    display: flex;25    align-items: center;26    justify-content: center;27    color: #616161;28    font-weight: 600;29    letter-spacing: 0.2px;30  }31 32  /* Floating controls on the map */33  .circle-btn {34    position: absolute;35    width: 110px;36    height: 110px;37    border-radius: 55px;38    background: #FFFFFF;39    box-shadow: 0 5px 12px rgba(0,0,0,0.2);40    display: flex;41    align-items: center;42    justify-content: center;43  }44  .btn-back { top: 70px; left: 40px; }45  .btn-refresh { top: 120px; right: 420px; }46  .leave-pill {47    position: absolute;48    top: 110px;49    right: 40px;50    height: 110px;51    border-radius: 55px;52    background: #FFFFFF;53    padding: 0 50px;54    display: flex;55    align-items: center;56    gap: 22px;57    box-shadow: 0 5px 12px rgba(0,0,0,0.15);58    font-size: 40px;59    color: #2B4E67;60    font-weight: 700;61  }62  .leave-pill .sub { font-weight: 600; color: #4a6a84; }63 64  /* Dark route header */65  .route-header {66    position: absolute;67    top: 500px;68    left: 0;69    width: 100%;70    background: #385C77;71    padding: 40px 40px 30px 40px;72    border-top-left-radius: 22px;73    border-top-right-radius: 22px;74  }75  .loc-row {76    display: flex;77    align-items: center;78    background: rgba(255,255,255,0.06);79    border-radius: 20px;80    padding: 26px 26px;81    color: #e9f3fb;82    font-size: 44px;83    margin-bottom: 28px;84  }85  .loc-row .icon {86    width: 64px; height: 64px; margin-right: 22px;87    display: inline-flex; align-items: center; justify-content: center;88  }89  .swap {90    position: absolute;91    right: 26px;92    top: 46px;93    width: 84px; height: 84px;94    border-radius: 16px;95    background: rgba(255,255,255,0.1);96    display: flex; align-items: center; justify-content: center;97  }98 99  /* Assistant card */100  .assistant {101    position: absolute;102    top: 680px;103    left: 24px;104    right: 24px;105    background: #587891;106    border-radius: 26px;107    padding: 34px;108    display: flex;109    align-items: center;110    gap: 22px;111    color: #dbe8f3;112    font-size: 46px;113    box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);114  }115  .assistant .bot {116    width: 80px; height: 80px; border-radius: 40px;117    background: rgba(255,255,255,0.18);118    display: flex; align-items: center; justify-content: center;119  }120 121  /* Cards */122  .card {123    position: absolute;124    left: 24px;125    right: 24px;126    background: #FFFFFF;127    border-radius: 26px;128    box-shadow: 0 6px 16px rgba(0,0,0,0.15);129    display: flex;130    align-items: center;131    padding: 34px;132    color: #2B4E67;133  }134  .card .left-icon {135    width: 82px; height: 82px; border-radius: 16px;136    background: #F1F5F9;137    display: flex; align-items: center; justify-content: center;138    margin-right: 26px;139  }140  .card .title {141    font-size: 54px; font-weight: 700;142  }143  .card .meta {144    margin-left: auto;145    text-align: right;146  }147  .card .meta .cal {148    font-size: 40px; color: #6a8398; font-weight: 700;149  }150  .card .meta .time {151    font-size: 58px; color: #2B4E67; font-weight: 800;152  }153 154  .card.walk { top: 820px; height: 160px; }155  .card.transit { top: 1005px; height: 210px; flex-direction: column; align-items: flex-start; }156  .card.cycle { top: 1260px; height: 160px; }157 158  /* Transit content */159  .transit-top {160    width: 100%;161    display: flex; align-items: center;162  }163  .lines {164    display: flex; gap: 16px; margin-left: 108px;165  }166  .line-pill {167    background: #FFEBF1;168    border: 2px solid #F45CAA;169    color: #F12C88;170    font-weight: 800;171    font-size: 48px;172    border-radius: 16px;173    padding: 10px 22px;174  }175  .transit-bottom {176    margin-left: 108px;177    color: #6a8398;178    font-size: 42px;179    display: flex;180    align-items: center;181    gap: 16px;182    margin-top: 16px;183  }184  .yellow-dot {185    width: 18px; height: 18px; background: #F7C948; border-radius: 9px;186  }187  .transit .meta {188    position: absolute; right: 34px; top: 40px;189  }190 191  /* Report Issue */192  .report {193    position: absolute;194    top: 1450px;195    right: 40px;196    display: flex; align-items: center; gap: 22px;197    color: #FFFFFF;198    font-size: 50px;199    font-weight: 800;200  }201  .report .badge {202    width: 68px; height: 68px; background: rgba(255,255,255,0.2);203    border-radius: 16px; display: flex; align-items: center; justify-content: center;204  }205 206  /* Simple SVG icon styles */207  svg { fill: none; stroke: #2B4E67; stroke-width: 8; }208  .white-stroke svg { stroke: #2B4E67; }209  .clock svg { stroke: #2B4E67; }210  .back svg { stroke: #2B4E67; }211</style>212</head>213<body>214<div id="render-target">215 216  <!-- Map placeholder -->217  <div class="map-area">218    [IMG: Map of Amsterdam]219  </div>220 221  <!-- Floating map controls -->222  <div class="circle-btn btn-back back">223    <svg width="54" height="54" viewBox="0 0 54 54">224      <path d="M34 10 L18 27 L34 44"></path>225    </svg>226  </div>227 228  <div class="circle-btn btn-refresh">229    <svg width="60" height="60" viewBox="0 0 60 60">230      <circle cx="30" cy="30" r="22"></circle>231      <path d="M30 8 L34 14 L26 14 Z"></path>232    </svg>233  </div>234 235  <div class="leave-pill">236    <div class="clock">237      <svg width="62" height="62" viewBox="0 0 62 62">238        <circle cx="31" cy="31" r="24"></circle>239        <path d="M31 15 L31 31 L44 36"></path>240      </svg>241    </div>242    <div>Leave: <span class="sub">Now</span></div>243  </div>244 245  <!-- Route header -->246  <div class="route-header">247    <div class="swap">248      <svg width="56" height="56" viewBox="0 0 56 56">249        <path d="M10 18 L46 18 M36 10 L46 18 L36 26"></path>250        <path d="M46 38 L10 38 M20 30 L10 38 L20 46"></path>251      </svg>252    </div>253 254    <div class="loc-row">255      <div class="icon">256        <svg width="64" height="64" viewBox="0 0 64 64">257          <circle cx="32" cy="22" r="12" stroke="#e9f3fb"></circle>258          <path d="M32 36 L24 52 L40 52 Z" stroke="#e9f3fb"></path>259        </svg>260      </div>261      <div>Dam</div>262    </div>263 264    <div class="loc-row">265      <div class="icon">266        <svg width="64" height="64" viewBox="0 0 64 64">267          <circle cx="32" cy="22" r="12" stroke="#e9f3fb"></circle>268          <path d="M32 36 L24 52 L40 52 Z" stroke="#e9f3fb"></path>269        </svg>270      </div>271      <div>Amsterdam Centraal</div>272    </div>273  </div>274 275  <!-- Assistant card -->276  <div class="assistant">277    <div class="bot">278      <svg width="56" height="56" viewBox="0 0 56 56">279        <rect x="10" y="16" width="36" height="26" rx="12" stroke="#dbe8f3"></rect>280        <circle cx="22" cy="29" r="4" stroke="#dbe8f3"></circle>281        <circle cx="34" cy="29" r="4" stroke="#dbe8f3"></circle>282      </svg>283    </div>284    <div>A short trip..</div>285  </div>286 287  <!-- Walk card -->288  <div class="card walk">289    <div class="left-icon">290      <svg width="56" height="56" viewBox="0 0 56 56">291        <circle cx="28" cy="12" r="6"></circle>292        <path d="M28 18 L28 30 L18 40 M28 30 L38 40 M20 40 L16 52 M36 40 L40 52"></path>293      </svg>294    </div>295    <div class="title">Walk</div>296    <div class="meta">297      <div class="cal">28 cal</div>298      <div class="time">7 min</div>299    </div>300  </div>301 302  <!-- Transit card -->303  <div class="card transit">304    <div class="transit-top">305      <div class="left-icon">306        <svg width="56" height="56" viewBox="0 0 56 56">307          <rect x="8" y="10" width="40" height="28" rx="8"></rect>308          <circle cx="18" cy="44" r="4"></circle>309          <circle cx="38" cy="44" r="4"></circle>310        </svg>311      </div>312 313      <div class="lines">314        <div class="line-pill">14</div>315        <div class="line-pill">24</div>316        <div class="line-pill">4</div>317      </div>318 319      <div class="meta">320        <div class="time">11 min</div>321      </div>322    </div>323 324    <div class="transit-bottom">325      <div class="yellow-dot"></div>326      <div>in 4, 8, 13 min</div>327    </div>328  </div>329 330  <!-- Cycle card -->331  <div class="card cycle">332    <div class="left-icon">333      <svg width="64" height="64" viewBox="0 0 64 64">334        <circle cx="18" cy="44" r="12"></circle>335        <circle cx="46" cy="44" r="12"></circle>336        <path d="M18 44 L28 28 L38 28 L46 44"></path>337      </svg>338    </div>339    <div class="title">My Cycle</div>340    <div class="meta">341      <div class="cal">31 cal</div>342      <div class="time">9 min</div>343    </div>344  </div>345 346  <!-- Report Issue -->347  <div class="report">348    <div class="badge">349      <svg width="44" height="44" viewBox="0 0 44 44">350        <path d="M22 6 L22 28"></path>351        <circle cx="22" cy="34" r="2"></circle>352      </svg>353    </div>354    <div>Report Issue</div>355  </div>356 357</div>358</body>359</html>