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 UI Mock</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: "Segoe UI", Roboto, Arial, sans-serif; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #121212;15 }16 17 /* Status and App bars */18 .lime { background: #9BCB00; color: #ffffff; }19 .statusbar {20 height: 120px;21 display: flex;22 align-items: center;23 justify-content: space-between;24 padding: 0 36px;25 font-size: 40px;26 letter-spacing: 1px;27 }28 .status-icons { display: flex; gap: 26px; align-items: center; }29 .circle-icon {30 width: 28px; height: 28px; border: 3px solid #fff; border-radius: 50%;31 }32 .small-rect { width: 30px; height: 20px; border: 3px solid #fff; border-radius: 4px; }33 .triangle { width: 0; height: 0; border-left: 18px solid transparent; border-right: 18px solid transparent; border-bottom: 30px solid #fff; }34 35 .appbar {36 height: 120px;37 display: flex;38 align-items: center;39 padding: 0 24px;40 gap: 20px;41 box-sizing: border-box;42 }43 .appbar .title { font-size: 56px; font-weight: 700; flex: 1; }44 .appbar .premium { font-size: 40px; font-weight: 700; opacity: 0.95; margin-right: 16px; }45 46 /* Content area */47 .content {48 position: absolute;49 top: 240px; /* statusbar + appbar */50 bottom: 90px;51 left: 0; right: 0;52 overflow: hidden;53 background: #121212;54 }55 .list {56 position: absolute;57 inset: 0;58 padding: 24px 16px 120px;59 overflow-y: auto;60 }61 .card {62 background: #262626;63 border-radius: 42px;64 margin: 28px 20px;65 padding: 42px 110px 42px 42px;66 color: #fff;67 position: relative;68 box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04);69 }70 .card h3 {71 margin: 0 0 14px 0;72 font-size: 58px;73 line-height: 70px;74 font-weight: 600;75 letter-spacing: 0.2px;76 }77 .card p {78 margin: 8px 0 0 0;79 color: #c7c7c7;80 font-size: 36px;81 line-height: 48px;82 }83 .chevron {84 position: absolute;85 right: 36px;86 top: 50%;87 transform: translateY(-50%);88 width: 40px; height: 40px;89 }90 .divider {91 height: 8px;92 background: #0e0e0e;93 }94 95 /* Bottom home indicator */96 .home-indicator {97 position: absolute;98 bottom: 26px;99 left: 50%;100 transform: translateX(-50%);101 width: 320px;102 height: 10px;103 background: #E6E6E6;104 border-radius: 8px;105 opacity: 0.8;106 }107 108 /* Simple icon buttons in app bar */109 .icon-btn {110 width: 72px;111 height: 72px;112 display: inline-flex;113 align-items: center;114 justify-content: center;115 }116 .icon-svg { width: 48px; height: 48px; fill: #ffffff; }117 .icon-svg.yellow { fill: #F3CA1A; }118</style>119</head>120<body>121<div id="render-target">122 <!-- Status Bar -->123 <div class="statusbar lime">124 <div style="display:flex; align-items:center; gap:18px;">125 <span style="font-weight:600;">10:30</span>126 <div class="circle-icon" title="info"></div>127 <div class="small-rect" title="notification"></div>128 <div class="small-rect" title="phone"></div>129 </div>130 <div class="status-icons">131 <div class="triangle"></div>132 <svg width="42" height="42" viewBox="0 0 24 24" fill="#fff"><path d="M12 22c1.1 0 2-.9 2-2h-4c0 1.1.9 2 2 2zm6-6v-5c0-2.6-1.7-4.8-4-5.4V4c0-.8-.7-1.5-1.5-1.5S11 3.2 11 4v1.6C8.6 6.2 7 8.4 7 11v5l-2 2v1h15v-1l-2-2z"/></svg>133 <svg width="42" height="42" viewBox="0 0 24 24" fill="#fff"><path d="M13 3c-4.4 0-8 3.6-8 8v5H3v2h20v-2h-2v-5c0-4.4-3.6-8-8-8zM7 16v-5c0-3.3 2.7-6 6-6s6 2.7 6 6v5H7z"/></svg>134 </div>135 </div>136 137 <!-- App Bar -->138 <div class="appbar lime">139 <div class="icon-btn" title="Back">140 <svg class="icon-svg" viewBox="0 0 24 24"><path d="M15.5 19l-7-7 7-7v14z"/></svg>141 </div>142 <div class="title">Math Tests</div>143 <div class="premium">PREMIUM</div>144 <div class="icon-btn" title="Share">145 <svg class="icon-svg" viewBox="0 0 24 24"><path d="M18 16.1c-.9 0-1.7.4-2.2 1l-7.1-3.9c.1-.3.1-.5.1-.8s0-.5-.1-.8l7.1-3.9c.6.6 1.4 1 2.2 1 1.7 0 3-1.3 3-3s-1.3-3-3-3-3 1.3-3 3c0 .3 0 .5.1.8L7 9.9C6.4 9.3 5.6 9 4.8 9 3.1 9 1.8 10.3 1.8 12s1.3 3 3 3c.8 0 1.6-.3 2.2-.9l7.2 3.9c0 .2-.1.4-.1.6 0 1.7 1.3 3 3 3s3-1.3 3-3-1.3-2.9-3-2.9z"/></svg>146 </div>147 <div class="icon-btn" title="Search">148 <svg class="icon-svg" viewBox="0 0 24 24"><path d="M15.5 14h-.8l-.3-.3c1-1.1 1.6-2.6 1.6-4.2C16 5.9 13.1 3 9.5 3S3 5.9 3 9.5 5.9 16 9.5 16c1.6 0 3.1-.6 4.2-1.6l.3.3v.8l5 5 1.5-1.5-5-5zm-6 0C7 14 5 12 5 9.5S7 5 9.5 5 14 7 14 9.5 12 14 9.5 14z"/></svg>149 </div>150 <div class="icon-btn" title="More">151 <svg class="icon-svg" viewBox="0 0 24 24"><path d="M12 7a2 2 0 110-4 2 2 0 010 4zm0 7a2 2 0 110-4 2 2 0 010 4zm0 7a2 2 0 110-4 2 2 0 010 4z"/></svg>152 </div>153 </div>154 155 <div class="divider"></div>156 157 <!-- Content List -->158 <div class="content">159 <div class="list">160 <div class="card">161 <h3>Adding and subtracting 1‑10,000 in columns</h3>162 <p>Add and subtract with the help of columns.</p>163 <p>328+776=? 305+34=? 481−99=?</p>164 <svg class="chevron" viewBox="0 0 24 24"><path class="yellow" fill="#F3CA1A" d="M9 6l6 6-6 6z"/></svg>165 </div>166 167 <div class="card">168 <h3>Multiplying</h3>169 <p>Multiples from 1 to 12.</p>170 <p>4 × 4 = ? 9 × 4 = ? 4 × 2 × 3 = ?</p>171 <svg class="chevron" viewBox="0 0 24 24"><path class="yellow" fill="#F3CA1A" d="M9 6l6 6-6 6z"/></svg>172 </div>173 174 <div class="card">175 <h3>Dividing and divisibility, factors and multiples</h3>176 <p>Dividing by 1 to 10, GCF, LCM, prime and composite numbers</p>177 <p>36 ÷ 9 = ? 56 ÷ 7 = ? 100 ÷ 25 = ?</p>178 <svg class="chevron" viewBox="0 0 24 24"><path class="yellow" fill="#F3CA1A" d="M9 6l6 6-6 6z"/></svg>179 </div>180 181 <div class="card">182 <h3>Order of operations</h3>183 <p>Mixed operations, brackets, names of operands.</p>184 <p>6 × 6 − 4 × 4 = ? 4 × 2 + 2 × (17 − 9) = ?</p>185 <svg class="chevron" viewBox="0 0 24 24"><path class="yellow" fill="#F3CA1A" d="M9 6l6 6-6 6z"/></svg>186 </div>187 188 <div class="card">189 <h3>Ten based system and place value</h3>190 <p>Ones, tens, hundreds…</p>191 <svg class="chevron" viewBox="0 0 24 24"><path class="yellow" fill="#F3CA1A" d="M9 6l6 6-6 6z"/></svg>192 </div>193 194 <div class="card">195 <h3>Rounding</h3>196 <p>Round to the nearest ten or hundred. Rounding decimal numbers.</p>197 <svg class="chevron" viewBox="0 0 24 24"><path class="yellow" fill="#F3CA1A" d="M9 6l6 6-6 6z"/></svg>198 </div>199 200 <div class="card">201 <h3>Units of measurement</h3>202 <p>Converting metric units of time, length, mass and volume.</p>203 <p>3 kg = 3,000 g 5 dm = 50 cm 1 m² = 10,000 cm²</p>204 <svg class="chevron" viewBox="0 0 24 24"><path class="yellow" fill="#F3CA1A" d="M9 6l6 6-6 6z"/></svg>205 </div>206 </div>207 </div>208 209 <div class="home-indicator"></div>210</div>211</body>212</html>