GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">5<title>Math List Screen</title>6<style>7  body {8    margin: 0;9    padding: 0;10    background: transparent;11    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, system-ui, sans-serif;12  }13  #render-target {14    width: 1080px;15    height: 2400px;16    position: relative;17    overflow: hidden;18    background: #FFFFFF;19  }20  * { box-sizing: border-box; }21 22  /* Status bar */23  .status-bar {24    position: absolute;25    top: 0;26    left: 0;27    width: 1080px;28    height: 160px;29    background: #7A7A7A;30    color: #fff;31    padding: 0 40px;32    display: flex;33    align-items: center;34    justify-content: space-between;35    font-weight: 600;36  }37  .status-left {38    font-size: 44px;39    letter-spacing: 1px;40  }41  .status-right {42    display: flex;43    align-items: center;44    gap: 28px;45  }46  .status-icon svg { display: block; }47 48  /* Header */49  .header {50    position: absolute;51    top: 160px;52    left: 0;53    width: 1080px;54    height: 230px;55    background: #FFFFFF;56    border-bottom: 1px solid #E6E6E6;57    display: flex;58    align-items: center;59    padding: 0 40px;60    gap: 30px;61  }62  .back-btn {63    width: 72px;64    height: 72px;65    display: flex;66    align-items: center;67    justify-content: center;68  }69  .header-title {70    font-size: 60px;71    color: #333333;72    font-weight: 600;73  }74 75  /* List */76  .list {77    position: absolute;78    top: 390px;79    left: 0;80    width: 1080px;81    height: 1780px;82    overflow: hidden;83    background: #FFFFFF;84  }85  .row {86    height: 190px;87    display: flex;88    align-items: center;89    padding: 0 40px;90    border-bottom: 1px solid #E7E7E7;91    gap: 34px;92  }93  .avatar {94    width: 120px;95    height: 120px;96    border-radius: 60px;97    background: #E0E0E0;98    border: 1px solid #BDBDBD;99    display: flex;100    align-items: center;101    justify-content: center;102    color: #757575;103    font-size: 26px;104    text-align: center;105    padding: 10px;106  }107  .row-title {108    font-size: 48px;109    color: #2F2F2F;110    font-weight: 500;111  }112 113  /* Bottom navigation */114  .nav-bar {115    position: absolute;116    bottom: 0;117    left: 0;118    width: 1080px;119    height: 230px;120    border-top: 1px solid #E6E6E6;121    background: #FFFFFF;122    display: flex;123    align-items: center;124    justify-content: space-around;125    padding-bottom: 10px;126  }127  .nav-item {128    width: 360px;129    height: 100%;130    display: flex;131    flex-direction: column;132    align-items: center;133    justify-content: center;134    gap: 18px;135    color: #9E9E9E;136  }137  .nav-item .label {138    font-size: 36px;139  }140  .nav-item.active {141    color: #1E88E5;142    font-weight: 600;143  }144  .nav-item svg { display: block; }145</style>146</head>147<body>148<div id="render-target">149 150  <!-- Status Bar -->151  <div class="status-bar">152    <div class="status-left">8:34</div>153    <div class="status-right">154      <!-- small phone icon -->155      <div class="status-icon">156        <svg width="36" height="36" viewBox="0 0 24 24">157          <rect x="6" y="3" width="12" height="18" rx="2" ry="2" fill="#ffffff"></rect>158          <rect x="9" y="18" width="6" height="2" fill="#7A7A7A"></rect>159        </svg>160      </div>161      <!-- cloud icon -->162      <div class="status-icon">163        <svg width="46" height="36" viewBox="0 0 24 24">164          <path d="M7 15h10a3 3 0 0 0 0-6 5 5 0 0 0-9.5-1.5A4 4 0 0 0 7 15z" fill="#ffffff"></path>165        </svg>166      </div>167      <!-- wifi icon -->168      <div class="status-icon">169        <svg width="40" height="36" viewBox="0 0 24 24">170          <path d="M2 8c5-4 15-4 20 0" stroke="#ffffff" stroke-width="2" fill="none" />171          <path d="M5 12c4-3 10-3 14 0" stroke="#ffffff" stroke-width="2" fill="none" />172          <circle cx="12" cy="16" r="2" fill="#ffffff"></circle>173        </svg>174      </div>175      <!-- battery icon -->176      <div class="status-icon">177        <svg width="50" height="36" viewBox="0 0 28 18">178          <rect x="1" y="3" width="22" height="12" rx="2" ry="2" fill="none" stroke="#ffffff" stroke-width="2"></rect>179          <rect x="3" y="5" width="18" height="8" fill="#ffffff"></rect>180          <rect x="23" y="7" width="3" height="6" fill="#ffffff"></rect>181        </svg>182      </div>183    </div>184  </div>185 186  <!-- Header -->187  <div class="header">188    <div class="back-btn">189      <svg width="72" height="72" viewBox="0 0 24 24">190        <path d="M15 19L8 12l7-7" stroke="#1E88E5" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>191      </svg>192    </div>193    <div class="header-title">Math</div>194  </div>195 196  <!-- List -->197  <div class="list">198    <div class="row">199      <div class="avatar">[IMG: Math icon]</div>200      <div class="row-title">Class 4</div>201    </div>202    <div class="row">203      <div class="avatar">[IMG: Math icon]</div>204      <div class="row-title">Class 5</div>205    </div>206    <div class="row">207      <div class="avatar">[IMG: Math icon]</div>208      <div class="row-title">Class 6 (Old)</div>209    </div>210    <div class="row">211      <div class="avatar">[IMG: Math icon]</div>212      <div class="row-title">Class 7 (Old)</div>213    </div>214    <div class="row">215      <div class="avatar">[IMG: Math icon]</div>216      <div class="row-title">Class 8 (Old)</div>217    </div>218    <div class="row">219      <div class="avatar">[IMG: Math icon]</div>220      <div class="row-title">Class 9 (Old)</div>221    </div>222    <div class="row">223      <div class="avatar">[IMG: Math icon]</div>224      <div class="row-title">Class 10 (Old)</div>225    </div>226    <div class="row">227      <div class="avatar">[IMG: Math icon]</div>228      <div class="row-title">Class 11 math (India)</div>229    </div>230    <div class="row">231      <div class="avatar">[IMG: Math icon]</div>232      <div class="row-title">Class 12 math (India)</div>233    </div>234  </div>235 236  <!-- Bottom Navigation -->237  <div class="nav-bar">238    <div class="nav-item">239      <svg width="64" height="64" viewBox="0 0 24 24">240        <polygon points="12,2 20,7 20,17 12,22 4,17 4,7" fill="none" stroke="#9E9E9E" stroke-width="2"></polygon>241      </svg>242      <div class="label">Home</div>243    </div>244    <div class="nav-item active">245      <svg width="64" height="64" viewBox="0 0 24 24">246        <circle cx="11" cy="11" r="7" fill="none" stroke="#1E88E5" stroke-width="2"></circle>247        <line x1="16.5" y1="16.5" x2="22" y2="22" stroke="#1E88E5" stroke-width="2" stroke-linecap="round"></line>248      </svg>249      <div class="label">Explore</div>250    </div>251    <div class="nav-item">252      <svg width="64" height="64" viewBox="0 0 24 24">253        <path d="M6 3h12v18l-6-3-6 3z" fill="none" stroke="#9E9E9E" stroke-width="2" stroke-linejoin="round"></path>254      </svg>255      <div class="label">Bookmarks</div>256    </div>257  </div>258 259</div>260</body>261</html>