GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Mobile UI Mock</title>5<style>6  body { margin:0; padding:0; background: transparent; }7  #render-target {8    width:1080px; height:2400px;9    position: relative; overflow: hidden;10    background:#ffffff;11    font-family: Arial, Helvetica, sans-serif;12    color:#1d2a56;13  }14  /* Top navy area */15  .nav-top {16    position: relative;17    width: 1080px;18    height: 230px;19    background:#142754;20    color:#fff;21  }22  .status-row {23    height: 90px;24    display:flex;25    align-items:center;26    justify-content: space-between;27    padding: 0 40px;28    font-size: 40px;29    letter-spacing: 1px;30  }31  .status-right {32    display:flex;33    align-items:center;34    gap:28px;35  }36  .back-row {37    height: 80px;38    display:flex;39    align-items:center;40    padding-left: 36px;41  }42  .icon {43    width: 52px; height: 52px;44  }45 46  /* Tabs bar */47  .tabs {48    width:1080px;49    height:170px;50    background:#ffffff;51    display:flex;52    align-items:center;53    justify-content: space-around;54    box-shadow: inset 0 -1px 0 rgba(0,0,0,0.06);55  }56  .tab {57    display:flex; flex-direction:column; align-items:center; gap:14px;58  }59  .tab svg { width:80px; height:80px; fill:#3a4a7a; }60  .tab-label { font-size: 28px; color:#3a4a7a; }61  .tab-indicator {62    position: absolute;63    left: 70px;64    top: 400px; /* sits right under the tabs */65    width: 260px; height: 12px; border-radius: 8px;66    background:#f07473;67  }68 69  /* Filter chips */70  .chips {71    display:flex; gap:36px;72    padding: 34px 40px;73    background:#f9fafb;74  }75  .chip {76    width:230px; height:96px;77    border-radius: 48px;78    background: linear-gradient(90deg,#f3f4f6,#eaecf1);79    box-shadow: inset 0 0 0 1px #eceff3;80  }81 82  /* Cards list */83  .list {84    padding: 6px 30px 20px 30px;85  }86  .card {87    background:#ffffff;88    border-radius: 26px;89    box-shadow: 0 3px 10px rgba(12, 28, 68, 0.08);90    padding: 30px;91    margin-bottom: 30px;92  }93  .sk {94    background: linear-gradient(90deg,#eef0f3,#d8dde6);95    border-radius: 16px;96  }97  .row {98    display:flex; align-items:center; justify-content: space-between;99    gap: 30px;100    margin-bottom: 28px;101  }102  .sk-sm { height:58px; width:240px; }103  .sk-lg { height:56px; width:860px; }104  .sk-mid { height:64px; width:520px; }105  .sk-btn { height:120px; width:360px; border-radius:22px; }106  /* Bottom OS area */107  .os-bottom {108    position:absolute; left:0; bottom:0;109    width:1080px; height:120px;110    background:#0d1d46;111  }112  .home-indicator {113    position:absolute; left:50%; bottom:26px;114    transform: translateX(-50%);115    width: 360px; height: 16px;116    background:#e8eaf0; border-radius: 10px;117  }118</style>119</head>120<body>121<div id="render-target">122 123  <!-- Top navy header -->124  <div class="nav-top">125    <div class="status-row">126      <div style="display:flex; align-items:center; gap:22px;">127        <div style="font-weight:600;">12:00</div>128        <div style="display:flex; gap:14px; opacity:0.9;">129          <svg class="icon" viewBox="0 0 24 24">130            <path d="M6 16l6-8 6 8" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/>131          </svg>132          <svg class="icon" viewBox="0 0 24 24">133            <path d="M6 16l6-8 6 8" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/>134          </svg>135        </div>136      </div>137      <div class="status-right">138        <!-- WiFi icon -->139        <svg class="icon" viewBox="0 0 24 24">140          <path d="M2 8c5-4 15-4 20 0" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/>141          <path d="M5 12c3-3 11-3 14 0" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/>142          <circle cx="12" cy="16" r="2" fill="#fff"/>143        </svg>144        <!-- Battery icon -->145        <svg class="icon" viewBox="0 0 28 24">146          <rect x="2" y="6" width="20" height="12" rx="2" ry="2" stroke="#fff" stroke-width="2" fill="none"/>147          <rect x="4" y="8" width="14" height="8" fill="#fff"/>148          <rect x="22" y="9" width="4" height="6" rx="1" fill="#fff"/>149        </svg>150      </div>151    </div>152    <div class="back-row">153      <!-- Back arrow -->154      <svg class="icon" viewBox="0 0 24 24">155        <path d="M15 6l-6 6 6 6" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>156      </svg>157    </div>158  </div>159 160  <!-- Tabs with transport icons -->161  <div class="tabs">162    <div class="tab">163      <svg viewBox="0 0 64 64">164        <rect x="12" y="20" width="40" height="24" rx="6" ry="6" />165        <circle cx="22" cy="48" r="4" />166        <circle cx="42" cy="48" r="4" />167      </svg>168    </div>169    <div class="tab">170      <svg viewBox="0 0 64 64">171        <rect x="10" y="18" width="44" height="26" rx="5" />172        <rect x="12" y="26" width="10" height="10" rx="2" fill="#3a4a7a"/>173        <circle cx="22" cy="48" r="4" />174        <circle cx="42" cy="48" r="4" />175      </svg>176    </div>177    <div class="tab">178      <svg viewBox="0 0 64 64">179        <path d="M6 34l18-6 8-18 4 18 22 6-22 6-4 12-8-12-18-6z" />180      </svg>181    </div>182  </div>183  <div class="tab-indicator"></div>184 185  <!-- Filter chips -->186  <div class="chips">187    <div class="chip"></div>188    <div class="chip"></div>189    <div class="chip"></div>190    <div class="chip"></div>191  </div>192 193  <!-- Cards list with skeleton placeholders -->194  <div class="list">195    <!-- Card 1 -->196    <div class="card">197      <div class="row">198        <div class="sk sk-sm"></div>199        <div class="sk sk-sm"></div>200      </div>201      <div class="row">202        <div class="sk sk-lg"></div>203      </div>204      <div class="row">205        <div class="sk sk-lg" style="width:840px;"></div>206      </div>207      <div class="row" style="align-items:flex-end;">208        <div class="sk sk-mid"></div>209        <div class="sk sk-btn"></div>210      </div>211    </div>212 213    <!-- Card 2 -->214    <div class="card">215      <div class="row">216        <div class="sk sk-sm"></div>217        <div class="sk sk-sm"></div>218      </div>219      <div class="row">220        <div class="sk sk-lg"></div>221      </div>222      <div class="row">223        <div class="sk sk-lg" style="width:840px;"></div>224      </div>225      <div class="row" style="align-items:flex-end;">226        <div class="sk sk-mid"></div>227        <div class="sk sk-btn"></div>228      </div>229    </div>230 231    <!-- Card 3 -->232    <div class="card">233      <div class="row">234        <div class="sk sk-sm"></div>235        <div class="sk sk-sm"></div>236      </div>237      <div class="row">238        <div class="sk sk-lg"></div>239      </div>240      <div class="row">241        <div class="sk sk-lg" style="width:840px;"></div>242      </div>243      <div class="row" style="align-items:flex-end;">244        <div class="sk sk-mid"></div>245        <div class="sk sk-btn"></div>246      </div>247    </div>248 249    <!-- Card 4 (partially visible in screenshot) -->250    <div class="card" style="margin-bottom: 240px;">251      <div class="row">252        <div class="sk sk-sm"></div>253        <div class="sk sk-sm"></div>254      </div>255      <div class="row">256        <div class="sk sk-lg"></div>257      </div>258      <div class="row">259        <div class="sk sk-lg" style="width:840px;"></div>260      </div>261      <div class="row" style="align-items:flex-end;">262        <div class="sk sk-mid"></div>263        <div class="sk sk-btn"></div>264      </div>265    </div>266  </div>267 268  <!-- Bottom system bar -->269  <div class="os-bottom">270    <div class="home-indicator"></div>271  </div>272 273</div>274</body>275</html>