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 Tests UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Roboto, Arial, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #000000;15    color: #FFFFFF;16  }17 18  /* Status bar */19  .statusbar {20    position: absolute;21    left: 0; top: 0;22    width: 100%;23    height: 100px;24    background: #9AC80A;25    display: flex;26    align-items: center;27    padding: 0 36px;28    box-sizing: border-box;29    color: #fff;30    font-size: 38px;31    letter-spacing: 0.5px;32  }33  .statusbar .right {34    margin-left: auto;35    display: flex;36    align-items: center;37    gap: 26px;38  }39  .sb-icon {40    width: 36px; height: 36px;41    opacity: 0.95;42  }43 44  /* Action bar */45  .toolbar {46    position: absolute;47    left: 0; top: 100px;48    width: 100%;49    height: 120px;50    background: #9AC80A;51    display: flex;52    align-items: center;53    padding: 0 30px;54    box-sizing: border-box;55  }56  .tool-left {57    display: flex; align-items: center; gap: 20px;58  }59  .toolbar .title {60    font-size: 50px;61    font-weight: 600;62    color: #fff;63  }64  .premium {65    margin-left: 30px;66    font-size: 38px;67    font-weight: 700;68    color: #F2F5C0;69    letter-spacing: 1px;70  }71  .tool-right {72    margin-left: auto;73    display: flex; align-items: center; gap: 28px;74  }75  .icon {76    width: 54px; height: 54px;77    fill: none; stroke: #FFFFFF; stroke-width: 5;78  }79  .icon-dots { fill: #FFFFFF; stroke: none; }80 81  /* Content/List */82  .content {83    position: absolute;84    left: 0; right: 0;85    top: 220px; /* below toolbar */86    bottom: 0;87    padding: 30px 0 120px;88    box-sizing: border-box;89    overflow: hidden;90  }91  .card {92    width: 1000px;93    margin: 26px auto;94    background: #2A2A2A;95    border-radius: 46px;96    padding: 40px 120px 46px 50px;97    box-sizing: border-box;98    position: relative;99  }100  .card .text {101    color: #EDEDED;102    font-size: 46px;103    line-height: 1.22;104    font-weight: 400;105  }106  .chev, .cart {107    position: absolute;108    right: 46px;109    top: 50%;110    transform: translateY(-50%);111    width: 52px; height: 52px;112  }113  .chev path { stroke: #E5D500; stroke-width: 10; stroke-linecap: round; stroke-linejoin: round; fill: none; }114  .cart { fill: none; stroke: #B9D91A; stroke-width: 10; }115  /* Bottom home indicator */116  .home-indicator {117    position: absolute;118    bottom: 26px; left: 50%;119    transform: translateX(-50%);120    width: 340px; height: 14px;121    background: #E0E0E0;122    border-radius: 10px;123    opacity: 0.85;124  }125</style>126</head>127<body>128<div id="render-target">129  <!-- Status Bar -->130  <div class="statusbar">131    <div class="time">10:29</div>132    <div class="right">133      <svg class="sb-icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="none" stroke="#fff" stroke-width="2"/><rect x="11" y="6" width="2" height="7" fill="#fff"/><circle cx="12" cy="17" r="1.5" fill="#fff"/></svg>134      <svg class="sb-icon" viewBox="0 0 24 24"><rect x="4" y="4" width="16" height="16" rx="2" fill="none" stroke="#fff" stroke-width="2"/><rect x="10" y="2" width="4" height="4" fill="#fff"/></svg>135      <svg class="sb-icon" viewBox="0 0 24 24"><path d="M3 12h18" stroke="#fff" stroke-width="2"/><rect x="3" y="6" width="18" height="12" rx="2" fill="none" stroke="#fff" stroke-width="2"/></svg>136      <svg class="sb-icon" viewBox="0 0 24 24"><path d="M4 16c2-4 6-6 8-6s6 2 8 6" stroke="#fff" stroke-width="2" fill="none"/><circle cx="17" cy="8" r="2" fill="#fff"/></svg>137    </div>138  </div>139 140  <!-- Toolbar -->141  <div class="toolbar">142    <div class="tool-left">143      <svg class="icon" viewBox="0 0 24 24"><path d="M15 6L9 12l6 6" stroke="#fff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></svg>144      <div class="title">Math Tests</div>145      <div class="premium">PREMIUM</div>146    </div>147    <div class="tool-right">148      <svg class="icon" viewBox="0 0 24 24">149        <circle cx="6" cy="12" r="2" fill="#fff"/>150        <circle cx="12" cy="8" r="2" fill="#fff"/>151        <circle cx="18" cy="5" r="2" fill="#fff"/>152        <path d="M7.5 11L10.5 9M13.5 7.5L16 6" stroke="#fff" stroke-width="2"/>153      </svg>154      <svg class="icon" viewBox="0 0 24 24">155        <circle cx="10" cy="10" r="7" stroke="#fff" stroke-width="2"/>156        <line x1="15.5" y1="15.5" x2="22" y2="22" stroke="#fff" stroke-width="3" stroke-linecap="round"/>157      </svg>158      <svg class="icon-dots" width="54" height="54" viewBox="0 0 24 24">159        <circle cx="12" cy="5" r="2" fill="#fff"/>160        <circle cx="12" cy="12" r="2" fill="#fff"/>161        <circle cx="12" cy="19" r="2" fill="#fff"/>162      </svg>163    </div>164  </div>165 166  <!-- Content List -->167  <div class="content">168    <div class="card">169      <div class="text">Adding numbers 1-100 in columns (no carrying)</div>170      <svg class="chev" viewBox="0 0 24 24"><path d="M8 4l8 8-8 8"/></svg>171    </div>172 173    <div class="card">174      <div class="text">Adding numbers 1-100 in columns (with carrying)</div>175      <svg class="chev" viewBox="0 0 24 24"><path d="M8 4l8 8-8 8"/></svg>176    </div>177 178    <div class="card">179      <div class="text">Subtracting 1-100 numbers in columns (no carrying)</div>180      <svg class="chev" viewBox="0 0 24 24"><path d="M8 4l8 8-8 8"/></svg>181    </div>182 183    <div class="card">184      <div class="text">Subtracting 1-100 numbers in columns (with carrying)</div>185      <svg class="cart" viewBox="0 0 24 24">186        <circle cx="9" cy="20" r="2" stroke-width="2"></circle>187        <circle cx="18" cy="20" r="2" stroke-width="2"></circle>188        <path d="M3 4h3l2 10h9l2-7H7" stroke-width="2"></path>189      </svg>190    </div>191 192    <div class="card">193      <div class="text">Adding numbers 1-1,000 in columns (no carrying)</div>194      <svg class="cart" viewBox="0 0 24 24">195        <circle cx="9" cy="20" r="2" stroke-width="2"></circle>196        <circle cx="18" cy="20" r="2" stroke-width="2"></circle>197        <path d="M3 4h3l2 10h9l2-7H7" stroke-width="2"></path>198      </svg>199    </div>200 201    <div class="card">202      <div class="text">Adding numbers 1-1,000 in columns (with carrying)</div>203      <svg class="cart" viewBox="0 0 24 24">204        <circle cx="9" cy="20" r="2" stroke-width="2"></circle>205        <circle cx="18" cy="20" r="2" stroke-width="2"></circle>206        <path d="M3 4h3l2 10h9l2-7H7" stroke-width="2"></path>207      </svg>208    </div>209 210    <div class="card">211      <div class="text">Subtracting numbers 1-1,000 in columns (no carrying)</div>212      <svg class="cart" viewBox="0 0 24 24">213        <circle cx="9" cy="20" r="2" stroke-width="2"></circle>214        <circle cx="18" cy="20" r="2" stroke-width="2"></circle>215        <path d="M3 4h3l2 10h9l2-7H7" stroke-width="2"></path>216      </svg>217    </div>218 219    <div class="card">220      <div class="text">Subtracting numbers 1-1,000 in columns (with carrying)</div>221      <svg class="cart" viewBox="0 0 24 24">222        <circle cx="9" cy="20" r="2" stroke-width="2"></circle>223        <circle cx="18" cy="20" r="2" stroke-width="2"></circle>224        <path d="M3 4h3l2 10h9l2-7H7" stroke-width="2"></path>225      </svg>226    </div>227  </div>228 229  <div class="home-indicator"></div>230</div>231</body>232</html>