GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Math Explore List</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, system-ui; color: #222; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #ffffff;15  }16 17  /* Status bar */18  .status-bar {19    position: absolute;20    top: 0;21    left: 0;22    width: 1080px;23    height: 120px;24    background: #737373;25    color: #fff;26    display: flex;27    align-items: center;28    padding: 0 36px;29    box-sizing: border-box;30    font-weight: 600;31  }32  .status-time {33    font-size: 44px;34    letter-spacing: 0.5px;35  }36  .status-icons {37    margin-left: auto;38    display: flex;39    align-items: center;40    gap: 28px;41  }42  .status-icons svg { fill: #fff; }43 44  /* App bar */45  .app-bar {46    position: absolute;47    top: 120px;48    left: 0;49    width: 1080px;50    height: 160px;51    background: #ffffff;52    border-bottom: 1px solid #e9e9e9;53    display: flex;54    align-items: center;55    padding: 0 32px;56    box-sizing: border-box;57  }58  .back-btn {59    width: 96px;60    height: 96px;61    display: flex;62    align-items: center;63    justify-content: center;64    margin-right: 20px;65  }66  .back-btn svg { width: 56px; height: 56px; fill: #2d8cff; }67  .app-title {68    font-size: 60px;69    font-weight: 600;70    color: #222;71  }72 73  /* List area */74  .list-area {75    position: absolute;76    top: 280px; /* 120 + 160 */77    left: 0;78    width: 1080px;79    height: calc(2400px - 280px - 220px - 36px); /* minus bottom nav and gesture bar */80    overflow-y: auto;81    -webkit-overflow-scrolling: touch;82    background: #fff;83  }84  .list {85    margin: 0;86    padding: 0;87    list-style: none;88  }89  .list-item {90    display: flex;91    align-items: center;92    padding: 30px 40px;93    box-sizing: border-box;94    min-height: 170px;95    gap: 32px;96  }97  .list-item + .list-item {98    border-top: 1px solid #eeeeee;99  }100  .avatar {101    width: 120px;102    height: 120px;103    background: #E0E0E0;104    border: 1px solid #BDBDBD;105    border-radius: 50%;106    display: flex;107    align-items: center;108    justify-content: center;109    color: #757575;110    font-size: 26px;111    text-align: center;112    line-height: 1.1;113  }114  .item-title {115    font-size: 48px;116    color: #1f1f1f;117    font-weight: 500;118  }119 120  /* Bottom navigation */121  .bottom-nav {122    position: absolute;123    bottom: 36px; /* leave room for gesture bar */124    left: 0;125    width: 1080px;126    height: 220px;127    border-top: 1px solid #e6e6e6;128    background: #ffffff;129    display: flex;130    justify-content: space-around;131    align-items: center;132  }133  .nav-item {134    width: 33.33%;135    height: 100%;136    display: flex;137    flex-direction: column;138    align-items: center;139    justify-content: center;140    gap: 22px;141    color: #888;142    font-size: 36px;143  }144  .nav-item svg { width: 80px; height: 80px; fill: #9e9e9e; }145  .nav-item.active { color: #2d8cff; }146  .nav-item.active svg { fill: #2d8cff; }147 148  /* Gesture bar */149  .gesture-bar {150    position: absolute;151    bottom: 12px;152    left: 50%;153    transform: translateX(-50%);154    width: 420px;155    height: 18px;156    background: #000;157    opacity: 0.9;158    border-radius: 12px;159  }160</style>161</head>162<body>163<div id="render-target">164 165  <!-- Status Bar -->166  <div class="status-bar">167    <div class="status-time">8:33</div>168    <div class="status-icons">169      <!-- Network/WiFi -->170      <svg viewBox="0 0 24 24" width="48" height="48">171        <path d="M12 18l2 2-2 2-2-2 2-2zm-6-7c3-2 9-2 12 0l-2 2c-2-1-6-1-8 0l-2-2zm3 4c2-1 6-1 8 0l-2 2c-1-.5-3-.5-4 0l-2-2z"></path>172      </svg>173      <!-- Battery -->174      <svg viewBox="0 0 32 24" width="64" height="48">175        <rect x="2" y="4" width="24" height="16" rx="3" ry="3" fill="#fff"></rect>176        <rect x="27" y="8" width="3" height="8" rx="1" ry="1" fill="#fff"></rect>177        <rect x="5" y="7" width="18" height="10" fill="#737373"></rect>178      </svg>179    </div>180  </div>181 182  <!-- App Bar -->183  <div class="app-bar">184    <div class="back-btn">185      <svg viewBox="0 0 24 24">186        <path d="M15.5 5l-7 7 7 7-2 2-9-9 9-9 2 2z"></path>187      </svg>188    </div>189    <div class="app-title">Math</div>190  </div>191 192  <!-- List -->193  <div class="list-area">194    <ul class="list">195      <li class="list-item">196        <div class="avatar">[IMG: Math Icon]</div>197        <div class="item-title">Class 8 (Foundation) - Hindi</div>198      </li>199      <li class="list-item">200        <div class="avatar">[IMG: Math Icon]</div>201        <div class="item-title">Class 9 (Foundation) - Hindi</div>202      </li>203      <li class="list-item">204        <div class="avatar">[IMG: Math Icon]</div>205        <div class="item-title">Class 10 (Foundation) - Hindi</div>206      </li>207      <li class="list-item">208        <div class="avatar">[IMG: Math Icon]</div>209        <div class="item-title">Class 1</div>210      </li>211      <li class="list-item">212        <div class="avatar">[IMG: Math Icon]</div>213        <div class="item-title">Class 2</div>214      </li>215      <li class="list-item">216        <div class="avatar">[IMG: Math Icon]</div>217        <div class="item-title">Class 3</div>218      </li>219      <li class="list-item">220        <div class="avatar">[IMG: Math Icon]</div>221        <div class="item-title">Class 4</div>222      </li>223      <li class="list-item">224        <div class="avatar">[IMG: Math Icon]</div>225        <div class="item-title">Class 5</div>226      </li>227      <li class="list-item">228        <div class="avatar">[IMG: Math Icon]</div>229        <div class="item-title">Class 6 (Old)</div>230      </li>231    </ul>232  </div>233 234  <!-- Bottom Navigation -->235  <div class="bottom-nav">236    <div class="nav-item">237      <!-- Hexagon/Home -->238      <svg viewBox="0 0 24 24">239        <path d="M12 2l7 4v8l-7 4-7-4V6l7-4z"></path>240      </svg>241      <div>Home</div>242    </div>243    <div class="nav-item active">244      <!-- Search -->245      <svg viewBox="0 0 24 24">246        <path d="M10 4a6 6 0 110 12A6 6 0 0110 4zm8.5 14.5l-4-4 1.5-1.5 4 4-1.5 1.5z"></path>247      </svg>248      <div>Explore</div>249    </div>250    <div class="nav-item">251      <!-- Bookmark -->252      <svg viewBox="0 0 24 24">253        <path d="M6 3h12v18l-6-4-6 4V3z" fill="none" stroke="#9e9e9e" stroke-width="2"></path>254      </svg>255      <div>Bookmarks</div>256    </div>257  </div>258 259  <!-- Gesture Bar -->260  <div class="gesture-bar"></div>261</div>262</body>263</html>