GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Math List UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #ffffff;15    font-family: "Segoe UI", Roboto, Arial, Helvetica, sans-serif;16    color: #212121;17  }18 19  /* Status bar */20  .status-bar {21    position: absolute;22    top: 0;23    left: 0;24    width: 100%;25    height: 130px;26    background: #7f7f7f;27    color: #ffffff;28    display: flex;29    align-items: center;30    justify-content: space-between;31    padding: 0 40px;32    box-sizing: border-box;33    font-size: 42px;34    letter-spacing: 0.5px;35  }36  .status-icons {37    display: flex;38    align-items: center;39    gap: 26px;40  }41  .status-icons svg { fill: none; stroke: #fff; stroke-width: 18; }42 43  /* App bar */44  .app-bar {45    position: absolute;46    top: 130px;47    left: 0;48    right: 0;49    height: 180px;50    background: #ffffff;51    display: flex;52    align-items: center;53    padding: 0 36px;54    box-sizing: border-box;55    border-bottom: 1px solid #eeeeee;56  }57  .back-btn {58    width: 72px;59    height: 72px;60    display: inline-flex;61    align-items: center;62    justify-content: center;63    margin-right: 20px;64  }65  .back-btn svg { width: 56px; height: 56px; fill: none; stroke: #1e88e5; stroke-width: 30; }66  .title {67    font-size: 56px;68    font-weight: 600;69    color: #1f2937;70    margin-left: 20px;71  }72 73  /* List */74  .list {75    position: absolute;76    top: 310px;77    left: 0;78    right: 0;79    bottom: 250px;80    overflow: hidden;81  }82  .list-item {83    display: flex;84    align-items: center;85    padding: 34px 40px;86    box-sizing: border-box;87  }88  .avatar {89    width: 120px;90    height: 120px;91    border-radius: 60px;92    background: #E0E0E0;93    border: 1px solid #BDBDBD;94    display: flex;95    align-items: center;96    justify-content: center;97    color: #757575;98    font-size: 22px;99    text-align: center;100  }101  .item-title {102    font-size: 46px;103    font-weight: 500;104    color: #263238;105    margin-left: 36px;106  }107  .divider {108    height: 1px;109    background: #e9e9e9;110    width: calc(100% - 180px);111    margin-left: 180px;112  }113 114  /* Bottom navigation */115  .bottom-nav {116    position: absolute;117    left: 0;118    right: 0;119    bottom: 66px;120    height: 210px;121    background: #ffffff;122    border-top: 1px solid #e6e6e6;123    display: flex;124    align-items: center;125    justify-content: space-around;126    box-sizing: border-box;127  }128  .nav-item {129    width: 33.33%;130    text-align: center;131    color: #9e9e9e;132  }133  .nav-item .label {134    font-size: 32px;135    margin-top: 10px;136  }137  .nav-item svg {138    width: 84px;139    height: 84px;140    fill: none;141    stroke: #9e9e9e;142    stroke-width: 28;143  }144  .nav-item.active .label { color: #1e88e5; }145  .nav-item.active svg { stroke: #1e88e5; }146 147  /* Home indicator (gesture pill) */148  .home-indicator {149    position: absolute;150    bottom: 16px;151    left: 50%;152    transform: translateX(-50%);153    width: 360px;154    height: 14px;155    background: #000000;156    border-radius: 10px;157    opacity: 0.9;158  }159</style>160</head>161<body>162<div id="render-target">163 164  <!-- Status Bar -->165  <div class="status-bar">166    <div class="time">8:33</div>167    <div class="status-icons">168      <!-- cellular -->169      <svg viewBox="0 0 100 100" width="42" height="42">170        <path d="M10 90h12 M28 90h12 M46 90h12 M64 90h12" />171      </svg>172      <!-- cloud -->173      <svg viewBox="0 0 120 100" width="60" height="42">174        <path d="M20 60c0-18 14-30 34-30 16 0 30 10 32 24 10 2 18 10 18 20 0 12-10 22-22 22H32c-12 0-22-10-22-22 0-8 5-14 10-14z"/>175      </svg>176      <!-- wifi -->177      <svg viewBox="0 0 120 100" width="60" height="42">178        <path d="M10 40c24-20 76-20 100 0M26 56c18-14 50-14 68 0M46 74c10-8 28-8 38 0M58 88l4 4" />179      </svg>180      <!-- battery -->181      <svg viewBox="0 0 160 100" width="70" height="42">182        <rect x="10" y="26" width="120" height="48" rx="8"></rect>183        <rect x="134" y="38" width="16" height="24" rx="4"></rect>184        <rect x="20" y="36" width="80" height="28" rx="4" fill="#ffffff" stroke="none"></rect>185      </svg>186    </div>187  </div>188 189  <!-- App Bar -->190  <div class="app-bar">191    <div class="back-btn">192      <svg viewBox="0 0 100 100">193        <path d="M60 20L30 50l30 30"/>194      </svg>195    </div>196    <div class="title">Math</div>197  </div>198 199  <!-- List -->200  <div class="list">201    <div class="list-item">202      <div class="avatar">[IMG: Math Icon]</div>203      <div class="item-title">Class 6 (Foundation)</div>204    </div>205    <div class="divider"></div>206 207    <div class="list-item">208      <div class="avatar">[IMG: Math Icon]</div>209      <div class="item-title">Class 7 (Foundation)</div>210    </div>211    <div class="divider"></div>212 213    <div class="list-item">214      <div class="avatar">[IMG: Math Icon]</div>215      <div class="item-title">Class 8 (Foundation)</div>216    </div>217    <div class="divider"></div>218 219    <div class="list-item">220      <div class="avatar">[IMG: Math Icon]</div>221      <div class="item-title">Class 9 (Foundation)</div>222    </div>223    <div class="divider"></div>224 225    <div class="list-item">226      <div class="avatar">[IMG: Math Icon]</div>227      <div class="item-title">Class 10 (Foundation)</div>228    </div>229    <div class="divider"></div>230 231    <div class="list-item">232      <div class="avatar">[IMG: Math Icon]</div>233      <div class="item-title">Class 6 (Foundation) - Hindi</div>234    </div>235    <div class="divider"></div>236 237    <div class="list-item">238      <div class="avatar">[IMG: Math Icon]</div>239      <div class="item-title">Class 7 (Foundation) - Hindi</div>240    </div>241    <div class="divider"></div>242 243    <div class="list-item">244      <div class="avatar">[IMG: Math Icon]</div>245      <div class="item-title">Class 8 (Foundation) - Hindi</div>246    </div>247    <div class="divider"></div>248 249    <div class="list-item">250      <div class="avatar">[IMG: Math Icon]</div>251      <div class="item-title">Class 9 (Foundation) - Hindi</div>252    </div>253    <div class="divider"></div>254  </div>255 256  <!-- Bottom Navigation -->257  <div class="bottom-nav">258    <div class="nav-item">259      <svg viewBox="0 0 100 100">260        <path d="M15 55L50 25l35 30v30H60V70H40v15H15z"/>261      </svg>262      <div class="label">Home</div>263    </div>264    <div class="nav-item active">265      <svg viewBox="0 0 100 100">266        <circle cx="44" cy="44" r="26"></circle>267        <path d="M66 66l20 20"/>268      </svg>269      <div class="label">Explore</div>270    </div>271    <div class="nav-item">272      <svg viewBox="0 0 100 100">273        <path d="M25 20h50v20l-25 18-25-18zM25 40v40h50V40"/>274      </svg>275      <div class="label">Bookmarks</div>276    </div>277  </div>278 279  <div class="home-indicator"></div>280</div>281</body>282</html>