GD-ML/AndroidCode
13.4k
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 List UI</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: Roboto, Arial, sans-serif; }9 #render-target {10 position: relative;11 width: 1080px;12 height: 2400px;13 overflow: hidden;14 background: #121212;15 color: #fff;16 }17 18 /* Status bar */19 .statusbar {20 position: relative;21 height: 120px;22 background: #9CC122;23 color: #ffffff;24 display: flex;25 align-items: center;26 padding: 0 36px;27 font-weight: 500;28 }29 .status-left { font-size: 40px; letter-spacing: 1px; }30 .status-right {31 margin-left: auto;32 display: flex;33 align-items: center;34 gap: 26px;35 }36 .status-icon {37 width: 34px; height: 34px;38 }39 40 /* App bar */41 .appbar {42 height: 160px;43 background: #9CC122;44 display: flex;45 align-items: center;46 padding: 0 24px;47 box-sizing: border-box;48 border-bottom: 6px solid #0a0a0a;49 }50 .back-btn {51 width: 72px; height: 72px;52 display: flex; align-items: center; justify-content: center;53 margin-right: 12px;54 }55 .title {56 font-size: 56px;57 font-weight: 700;58 color: #ffffff;59 margin-right: 20px;60 }61 .premium {62 color: #ffffff;63 font-size: 40px;64 letter-spacing: 2px;65 opacity: 0.95;66 }67 .toolbar-spacer { flex: 1; }68 .toolbar-icon {69 width: 64px; height: 64px;70 margin-left: 28px;71 display: flex; align-items: center; justify-content: center;72 color: #ffffff;73 }74 75 /* List area */76 .content {77 position: absolute;78 left: 0; right: 0;79 top: 280px; /* below both bars */80 bottom: 0;81 padding: 32px 24px 120px;82 box-sizing: border-box;83 overflow: hidden;84 }85 .card {86 position: relative;87 background: #262626;88 border-radius: 42px;89 padding: 36px 120px 36px 36px;90 margin: 26px 12px 34px;91 box-shadow: 0 10px 20px rgba(0,0,0,0.35);92 }93 .card .card-title {94 font-size: 56px;95 line-height: 1.15;96 font-weight: 500;97 color: #f2f2f2;98 margin-right: 60px;99 }100 .card .card-desc {101 margin-top: 18px;102 font-size: 34px;103 line-height: 1.5;104 color: #c6c6c6;105 }106 .chevron {107 position: absolute;108 right: 28px;109 top: 50%;110 transform: translateY(-50%);111 width: 78px; height: 78px;112 display: flex; align-items: center; justify-content: center;113 color: #F7D33C;114 }115 116 /* Home indicator */117 .home-indicator {118 position: absolute;119 left: 50%;120 bottom: 28px;121 transform: translateX(-50%);122 width: 360px;123 height: 10px;124 background: #ffffff;125 opacity: 0.9;126 border-radius: 10px;127 }128</style>129</head>130<body>131<div id="render-target">132 133 <!-- Simulated Android status bar -->134 <div class="statusbar">135 <div class="status-left">10:21</div>136 <div class="status-right">137 <!-- small status-like icons -->138 <svg class="status-icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="#ffffff" opacity="0.85"/></svg>139 <svg class="status-icon" viewBox="0 0 24 24"><rect x="3" y="7" width="14" height="10" rx="2" fill="#ffffff"/><rect x="18" y="10" width="3" height="4" rx="1" fill="#ffffff"/></svg>140 <svg class="status-icon" viewBox="0 0 24 24"><path d="M3 18h18" stroke="#ffffff" stroke-width="2"/><path d="M6 18V9a6 6 0 0 1 12 0v9" stroke="#ffffff" stroke-width="2" fill="none"/></svg>141 <svg class="status-icon" viewBox="0 0 24 24"><path d="M6 20h12a2 2 0 0 0 2-2V6" stroke="#ffffff" stroke-width="2" fill="none"/><path d="M6 20a2 2 0 0 1-2-2V6h16" stroke="#ffffff" stroke-width="2" fill="none"/></svg>142 <svg class="status-icon" viewBox="0 0 24 24"><path d="M5 20h14" stroke="#ffffff" stroke-width="2"/><rect x="7" y="6" width="10" height="12" rx="2" fill="#ffffff"/></svg>143 </div>144 </div>145 146 <!-- App toolbar -->147 <div class="appbar">148 <div class="back-btn">149 <svg viewBox="0 0 24 24" width="44" height="44">150 <path d="M15 5L8 12l7 7" stroke="#ffffff" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>151 </svg>152 </div>153 <div class="title">Math Tests</div>154 <div class="premium">PREMIUM</div>155 <div class="toolbar-spacer"></div>156 <div class="toolbar-icon" title="Share">157 <svg viewBox="0 0 24 24" width="44" height="44">158 <circle cx="6" cy="12" r="2.4" fill="#fff"/>159 <circle cx="18" cy="6" r="2.4" fill="#fff"/>160 <circle cx="18" cy="18" r="2.4" fill="#fff"/>161 <path d="M8.2 11L15.5 7.6M8.2 13L15.5 16.4" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/>162 </svg>163 </div>164 <div class="toolbar-icon" title="Search">165 <svg viewBox="0 0 24 24" width="44" height="44">166 <circle cx="11" cy="11" r="6" stroke="#fff" stroke-width="2" fill="none"/>167 <path d="M16.5 16.5L21 21" stroke="#fff" stroke-width="2" stroke-linecap="round"/>168 </svg>169 </div>170 <div class="toolbar-icon" title="More">171 <svg viewBox="0 0 24 24" width="44" height="44">172 <circle cx="12" cy="5" r="2" fill="#fff"/>173 <circle cx="12" cy="12" r="2" fill="#fff"/>174 <circle cx="12" cy="19" r="2" fill="#fff"/>175 </svg>176 </div>177 </div>178 179 <!-- Content list -->180 <div class="content">181 182 <div class="card">183 <div class="card-title">Adding and subtracting 1-10,000 in columns</div>184 <div class="card-desc">185 Add and subtract with the help of columns.<br>186 328 + 776 = ? 305 + 34 = ? 481 − 99 = ?187 </div>188 <div class="chevron">189 <svg viewBox="0 0 24 24" width="44" height="44">190 <path d="M8 4l8 8-8 8" stroke="currentColor" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>191 </svg>192 </div>193 </div>194 195 <div class="card">196 <div class="card-title">Multiplying</div>197 <div class="card-desc">198 Multiples from 1 to 12.<br>199 4 × 4 = ? 9 × 4 = ? 4 × 2 × 3 = ?200 </div>201 <div class="chevron">202 <svg viewBox="0 0 24 24" width="44" height="44">203 <path d="M8 4l8 8-8 8" stroke="currentColor" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>204 </svg>205 </div>206 </div>207 208 <div class="card">209 <div class="card-title">Dividing and divisibility, factors and multiples</div>210 <div class="card-desc">211 Dividing by 1 to 10, GCF, LCM, prime and composite numbers<br>212 36 ÷ 9 = ? 56 ÷ 7 = ? 100 ÷ 25 = ?213 </div>214 <div class="chevron">215 <svg viewBox="0 0 24 24" width="44" height="44">216 <path d="M8 4l8 8-8 8" stroke="currentColor" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>217 </svg>218 </div>219 </div>220 221 <div class="card">222 <div class="card-title">Order of operations</div>223 <div class="card-desc">224 Mixed operations, brackets, names of operands.<br>225 6 × 6 − 4 × 4 = ? 4 × 2 + 2 × (17 − 9) = ?226 </div>227 <div class="chevron">228 <svg viewBox="0 0 24 24" width="44" height="44">229 <path d="M8 4l8 8-8 8" stroke="currentColor" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>230 </svg>231 </div>232 </div>233 234 <div class="card">235 <div class="card-title">Ten based system and place value</div>236 <div class="card-desc">237 Ones, tens, hundreds...238 </div>239 <div class="chevron">240 <svg viewBox="0 0 24 24" width="44" height="44">241 <path d="M8 4l8 8-8 8" stroke="currentColor" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>242 </svg>243 </div>244 </div>245 246 <div class="card">247 <div class="card-title">Rounding</div>248 <div class="card-desc">249 Round to the nearest ten or hundred. Rounding decimal numbers.250 </div>251 <div class="chevron">252 <svg viewBox="0 0 24 24" width="44" height="44">253 <path d="M8 4l8 8-8 8" stroke="currentColor" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>254 </svg>255 </div>256 </div>257 258 <div class="card">259 <div class="card-title">Units of measurement</div>260 <div class="card-desc">261 Converting metric units of time, length, mass and volume.<br>262 3 kg = 3,000 g 5 dm = 50 cm 1 m² = 10,000 cm²263 </div>264 <div class="chevron">265 <svg viewBox="0 0 24 24" width="44" height="44">266 <path d="M8 4l8 8-8 8" stroke="currentColor" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>267 </svg>268 </div>269 </div>270 271 </div>272 273 <div class="home-indicator"></div>274</div>275</body>276</html>