GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>Transit List UI</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #F5F6FA;14    border-radius: 32px;15    box-shadow: 0 12px 32px rgba(0,0,0,0.18);16    color: #1E2A50;17  }18 19  /* Top dark area */20  .topbar {21    position: absolute;22    top: 0;23    left: 0;24    width: 100%;25    height: 300px;26    background: #0D204F;27  }28  .back-row {29    position: absolute;30    top: 190px;31    left: 40px;32    height: 70px;33    display: flex;34    align-items: center;35    gap: 24px;36    color: #FFFFFF;37  }38  .back-row svg { width: 48px; height: 48px; }39 40  /* Tabs */41  .tabs {42    position: absolute;43    top: 300px;44    left: 0;45    width: 100%;46    height: 220px;47    background: #FFFFFF;48    display: flex;49    align-items: center;50    justify-content: space-around;51    box-shadow: 0 1px 0 rgba(0,0,0,0.06) inset;52  }53  .tab {54    width: 210px;55    height: 140px;56    display: flex;57    align-items: center;58    justify-content: center;59    color: #2E3B72;60  }61  .tab svg { width: 96px; height: 96px; }62  .tabs .indicator {63    position: absolute;64    bottom: 0;65    left: 120px;66    width: 320px;67    height: 12px;68    background: #FF6E6E;69    border-radius: 12px;70  }71 72  /* Filters row */73  .filters {74    position: absolute;75    top: 520px;76    left: 0;77    width: 100%;78    height: 220px;79    background: #FAFAFA;80    display: flex;81    align-items: center;82    gap: 38px;83    padding: 0 48px;84  }85  .pill {86    width: 235px;87    height: 100px;88    border-radius: 50px;89    background: linear-gradient(90deg, #E9EBEF 0%, #F3F4F7 60%, #E9EBEF 100%);90    box-shadow: 0 1px 0 rgba(0,0,0,0.04) inset;91  }92 93  /* List area */94  .list {95    position: absolute;96    top: 740px;97    left: 0;98    right: 0;99    bottom: 140px;100    padding: 0 40px;101    overflow: hidden;102  }103  .card {104    width: 100%;105    background: #FFFFFF;106    border-radius: 28px;107    box-shadow: 0 6px 18px rgba(30,42,80,0.08);108    margin-bottom: 42px;109    padding: 40px;110  }111  .card-row {112    display: flex;113    justify-content: space-between;114    align-items: center;115    gap: 40px;116    margin-bottom: 28px;117  }118  .shimmer {119    display: inline-block;120    height: 56px;121    background: linear-gradient(90deg, #D4D9E3 0%, #EDEFF4 55%, #D4D9E3 100%);122    border-radius: 16px;123  }124  .w-xs { width: 180px; }125  .w-sm { width: 320px; }126  .w-md { width: 520px; }127  .w-lg { width: 680px; }128  .block {129    height: 160px;130    width: 240px;131    border-radius: 18px;132    background: linear-gradient(90deg, #CED3DE 0%, #E9EDF4 55%, #CED3DE 100%);133  }134 135  /* Bottom system bar */136  .bottom-bar {137    position: absolute;138    bottom: 0;139    left: 0;140    width: 100%;141    height: 140px;142    background: #0D204F;143    display: flex;144    align-items: center;145    justify-content: center;146  }147  .home-indicator {148    width: 280px;149    height: 14px;150    background: #E6E9EF;151    border-radius: 8px;152    opacity: 0.9;153  }154</style>155</head>156<body>157<div id="render-target">158 159  <!-- Top dark area with back arrow -->160  <div class="topbar">161    <div class="back-row">162      <svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">163        <path d="M30 10 L16 24 L30 38" stroke="#FFFFFF" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>164      </svg>165    </div>166  </div>167 168  <!-- Tabs with transport icons -->169  <div class="tabs">170    <div class="tab">171      <!-- Train icon -->172      <svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">173        <rect x="12" y="10" width="24" height="22" rx="7" fill="#2E3B72"/>174        <rect x="18" y="16" width="12" height="8" rx="2" fill="#FFFFFF" opacity="0.9"/>175        <circle cx="18" cy="36" r="3" fill="#2E3B72"/>176        <circle cx="30" cy="36" r="3" fill="#2E3B72"/>177        <rect x="16" y="40" width="16" height="3" rx="1.5" fill="#2E3B72"/>178      </svg>179    </div>180    <div class="tab">181      <!-- Bus icon -->182      <svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">183        <rect x="8" y="12" width="32" height="18" rx="4" fill="#2E3B72"/>184        <rect x="12" y="16" width="8" height="8" rx="2" fill="#FFFFFF" opacity="0.9"/>185        <rect x="28" y="16" width="8" height="8" rx="2" fill="#FFFFFF" opacity="0.9"/>186        <circle cx="16" cy="34" r="3" fill="#2E3B72"/>187        <circle cx="32" cy="34" r="3" fill="#2E3B72"/>188      </svg>189    </div>190    <div class="tab">191      <!-- Airplane icon -->192      <svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">193        <path d="M24 10 L27 22 L40 24 L27 26 L24 38 L21 26 L8 24 L21 22 Z" fill="#2E3B72"/>194      </svg>195    </div>196    <div class="indicator"></div>197  </div>198 199  <!-- Filter pills -->200  <div class="filters">201    <div class="pill"></div>202    <div class="pill"></div>203    <div class="pill"></div>204    <div class="pill"></div>205  </div>206 207  <!-- Cards list with skeleton content -->208  <div class="list">209    <div class="card">210      <div class="card-row">211        <span class="shimmer w-xs"></span>212        <span class="shimmer w-xs"></span>213      </div>214      <div class="card-row">215        <span class="shimmer w-lg"></span>216        <span class="shimmer w-lg"></span>217      </div>218      <div class="card-row">219        <span class="shimmer w-md"></span>220        <div class="block"></div>221      </div>222    </div>223 224    <div class="card">225      <div class="card-row">226        <span class="shimmer w-xs"></span>227        <span class="shimmer w-xs"></span>228      </div>229      <div class="card-row">230        <span class="shimmer w-lg"></span>231        <span class="shimmer w-lg"></span>232      </div>233      <div class="card-row">234        <span class="shimmer w-md"></span>235        <div class="block"></div>236      </div>237    </div>238 239    <div class="card">240      <div class="card-row">241        <span class="shimmer w-xs"></span>242        <span class="shimmer w-xs"></span>243      </div>244      <div class="card-row">245        <span class="shimmer w-lg"></span>246        <span class="shimmer w-lg"></span>247      </div>248      <div class="card-row">249        <span class="shimmer w-md"></span>250        <div class="block"></div>251      </div>252    </div>253 254    <div class="card">255      <div class="card-row">256        <span class="shimmer w-xs"></span>257        <span class="shimmer w-xs"></span>258      </div>259      <div class="card-row">260        <span class="shimmer w-lg"></span>261        <span class="shimmer w-lg"></span>262      </div>263      <div class="card-row">264        <span class="shimmer w-md"></span>265        <div class="block"></div>266      </div>267    </div>268  </div>269 270  <!-- Bottom system bar -->271  <div class="bottom-bar">272    <div class="home-indicator"></div>273  </div>274 275</div>276</body>277</html>