GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">5<title>Math List UI</title>6<style>7  body { margin: 0; padding: 0; background: transparent; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #ffffff;14    font-family: Arial, Helvetica, sans-serif;15    color: #222;16  }17 18  /* Status bar */19  .status-bar {20    position: absolute;21    top: 0;22    left: 0;23    width: 100%;24    height: 120px;25    background: #8c8c8c;26    color: #ffffff;27    display: flex;28    align-items: center;29    justify-content: space-between;30    padding: 0 40px;31    box-sizing: border-box;32    font-size: 40px;33  }34  .status-right {35    display: flex;36    align-items: center;37    gap: 24px;38    font-size: 0;39  }40  .status-icon {41    width: 48px;42    height: 48px;43  }44 45  /* App bar */46  .app-bar {47    position: absolute;48    top: 120px;49    left: 0;50    width: 100%;51    height: 160px;52    background: #ffffff;53    display: flex;54    align-items: center;55    border-bottom: 1px solid #e6e6e6;56    box-sizing: border-box;57  }58  .back-btn {59    width: 140px;60    height: 100%;61    display: flex;62    align-items: center;63    justify-content: center;64  }65  .app-title {66    font-size: 56px;67    font-weight: 600;68    color: #222;69  }70 71  /* Content list */72  .content {73    position: absolute;74    top: 280px;75    left: 0;76    width: 100%;77    height: 1840px;78    overflow: hidden;79  }80  .list-item {81    display: flex;82    align-items: center;83    padding: 36px 40px;84    box-sizing: border-box;85  }86  .item-icon {87    width: 120px;88    height: 120px;89    border-radius: 60px;90    background: #E0E0E0;91    border: 1px solid #BDBDBD;92    display: flex;93    justify-content: center;94    align-items: center;95    color: #757575;96    font-size: 24px;97  }98  .item-text {99    margin-left: 40px;100    font-size: 40px;101    color: #222;102  }103  .divider {104    height: 2px;105    background: #eeeeee;106    margin: 0 0 0 160px;107  }108 109  /* Bottom navigation */110  .bottom-nav {111    position: absolute;112    left: 0;113    bottom: 80px;114    width: 100%;115    height: 220px;116    background: #ffffff;117    border-top: 1px solid #eaeaea;118    display: flex;119    align-items: center;120    justify-content: space-around;121    box-sizing: border-box;122  }123  .nav-item {124    width: 240px;125    display: flex;126    flex-direction: column;127    align-items: center;128    gap: 16px;129    color: #999;130    font-size: 32px;131  }132  .nav-item .icon {133    width: 72px;134    height: 72px;135  }136  .nav-item.active {137    color: #1E88E5;138  }139  .nav-item.active svg {140    stroke: #1E88E5;141    fill: none;142  }143 144  /* System gesture bar */145  .gesture-bar {146    position: absolute;147    left: 0;148    bottom: 0;149    width: 100%;150    height: 80px;151    background: #000;152  }153  .home-pill {154    position: absolute;155    left: 50%;156    transform: translateX(-50%);157    bottom: 20px;158    width: 260px;159    height: 14px;160    background: #ffffff;161    border-radius: 8px;162    opacity: 0.9;163  }164</style>165</head>166<body>167<div id="render-target">168 169  <div class="status-bar">170    <div>8:34</div>171    <div class="status-right">172      <!-- cellular -->173      <svg class="status-icon" viewBox="0 0 24 24">174        <rect x="2" y="16" width="3" height="6" fill="#fff"></rect>175        <rect x="7" y="12" width="3" height="10" fill="#fff" opacity="0.8"></rect>176        <rect x="12" y="8" width="3" height="14" fill="#fff" opacity="0.6"></rect>177        <rect x="17" y="4" width="3" height="18" fill="#fff" opacity="0.4"></rect>178      </svg>179      <!-- cloud -->180      <svg class="status-icon" viewBox="0 0 24 24">181        <path d="M7 15h10a4 4 0 0 0 0-8 5 5 0 0 0-9-1A4 4 0 0 0 7 15z" fill="#ffffff"></path>182      </svg>183      <!-- wifi -->184      <svg class="status-icon" viewBox="0 0 24 24">185        <path d="M2 8c5-4 15-4 20 0" stroke="#fff" stroke-width="2" fill="none" />186        <path d="M5 12c4-3 10-3 14 0" stroke="#fff" stroke-width="2" fill="none" />187        <path d="M9 16c2-2 4-2 6 0" stroke="#fff" stroke-width="2" fill="none" />188        <circle cx="12" cy="19" r="1.5" fill="#fff"></circle>189      </svg>190      <!-- battery -->191      <svg class="status-icon" viewBox="0 0 28 24">192        <rect x="2" y="6" width="20" height="12" rx="2" ry="2" fill="none" stroke="#fff" stroke-width="2"></rect>193        <rect x="4" y="8" width="14" height="8" fill="#fff"></rect>194        <rect x="22" y="9" width="3" height="6" fill="#fff"></rect>195      </svg>196    </div>197  </div>198 199  <div class="app-bar">200    <div class="back-btn">201      <svg width="64" height="64" viewBox="0 0 24 24">202        <path d="M15 19L8 12l7-7" stroke="#1E88E5" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>203      </svg>204    </div>205    <div class="app-title">Math</div>206  </div>207 208  <div class="content">209    <div class="list-item">210      <div class="item-icon">[IMG: Math course icon]</div>211      <div class="item-text">Class 11 math (India)</div>212    </div>213    <div class="divider"></div>214 215    <div class="list-item">216      <div class="item-icon">[IMG: Math course icon]</div>217      <div class="item-text">Class 12 math (India)</div>218    </div>219    <div class="divider"></div>220 221    <div class="list-item">222      <div class="item-icon">[IMG: Math course icon]</div>223      <div class="item-text">Class 6 Math (India) - Hindi</div>224    </div>225    <div class="divider"></div>226 227    <div class="list-item">228      <div class="item-icon">[IMG: Math course icon]</div>229      <div class="item-text">Class 7 Math (India) - Hindi</div>230    </div>231    <div class="divider"></div>232 233    <div class="list-item">234      <div class="item-icon">[IMG: Math course icon]</div>235      <div class="item-text">Class 8 Math (India) - Hindi</div>236    </div>237    <div class="divider"></div>238 239    <div class="list-item">240      <div class="item-icon">[IMG: Math course icon]</div>241      <div class="item-text">Class 9 Math (India) - Hindi</div>242    </div>243    <div class="divider"></div>244 245    <div class="list-item">246      <div class="item-icon">[IMG: Math course icon]</div>247      <div class="item-text">Class 10 Math (India) - Hindi</div>248    </div>249    <div class="divider"></div>250 251    <div class="list-item">252      <div class="item-icon">[IMG: Math course icon]</div>253      <div class="item-text">Class 11 Math (India) - Hindi</div>254    </div>255    <div class="divider"></div>256 257    <div class="list-item">258      <div class="item-icon">[IMG: Early math icon]</div>259      <div class="item-text">Early math review</div>260    </div>261  </div>262 263  <div class="bottom-nav">264    <div class="nav-item">265      <svg class="icon" viewBox="0 0 24 24">266        <path d="M3 11l9-7 9 7v9H6v-9" stroke="#9e9e9e" stroke-width="2" fill="none" stroke-linejoin="round"></path>267      </svg>268      <div>Home</div>269    </div>270    <div class="nav-item active">271      <svg class="icon" viewBox="0 0 24 24">272        <circle cx="11" cy="11" r="7" stroke="#1E88E5" stroke-width="2" fill="none"></circle>273        <line x1="17" y1="17" x2="22" y2="22" stroke="#1E88E5" stroke-width="2"></line>274      </svg>275      <div>Explore</div>276    </div>277    <div class="nav-item">278      <svg class="icon" viewBox="0 0 24 24">279        <path d="M6 3h12v18l-6-4-6 4z" stroke="#9e9e9e" stroke-width="2" fill="none" stroke-linejoin="round"></path>280      </svg>281      <div>Bookmarks</div>282    </div>283  </div>284 285  <div class="gesture-bar">286    <div class="home-pill"></div>287  </div>288 289</div>290</body>291</html>