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 position: relative;11 overflow: hidden;12 width: 1080px;13 height: 2400px;14 background: #000000;15 }16 17 /* Top status bar */18 .status-bar {19 width: 100%;20 height: 120px;21 background: #6b8f00;22 color: #ffffff;23 display: flex;24 align-items: center;25 justify-content: space-between;26 padding: 0 36px;27 box-sizing: border-box;28 font-size: 38px;29 letter-spacing: 0.5px;30 }31 .status-right {32 display: flex;33 align-items: center;34 gap: 26px;35 }36 .icon {37 width: 44px;38 height: 44px;39 }40 41 /* App bar */42 .app-bar {43 width: 100%;44 height: 150px;45 background: #a7d900;46 display: flex;47 align-items: center;48 padding: 0 28px;49 box-sizing: border-box;50 color: #111;51 }52 .app-bar .back {53 width: 72px; height: 72px; display: flex; align-items: center; justify-content: center;54 }55 .app-title {56 color: #ffffff;57 font-size: 58px;58 font-weight: 700;59 margin-left: 12px;60 }61 .app-spacer { flex: 1; }62 .premium {63 color: #ffffff;64 font-size: 38px;65 font-weight: 700;66 margin-right: 24px;67 letter-spacing: 1px;68 }69 .actions { display: flex; align-items: center; gap: 24px; }70 .actions .icon { width: 56px; height: 56px; }71 72 /* Content cards */73 .content {74 padding: 28px 36px;75 box-sizing: border-box;76 }77 .card {78 position: relative;79 background: #2b2b2b;80 border-radius: 44px;81 padding: 40px 120px 48px 40px;82 color: #ffffff;83 margin: 28px 0 36px 0;84 box-shadow: 0 6px 14px rgba(0,0,0,0.35);85 }86 .card-title {87 font-size: 54px;88 line-height: 1.2;89 margin: 6px 0 24px 0;90 font-weight: 500;91 color: #f2f2f2;92 }93 .card-sub {94 font-size: 36px;95 line-height: 1.2;96 color: #cfcfcf;97 }98 .card-sub .u { text-decoration: underline; }99 .chevron {100 position: absolute;101 right: 40px;102 top: 50%;103 transform: translateY(-50%);104 width: 70px;105 height: 70px;106 }107 108 /* Bottom home indicator */109 .home-indicator {110 position: absolute;111 bottom: 34px;112 left: 50%;113 transform: translateX(-50%);114 width: 320px;115 height: 10px;116 background: rgba(255,255,255,0.85);117 border-radius: 10px;118 }119</style>120</head>121<body>122<div id="render-target">123 124 <!-- Status Bar -->125 <div class="status-bar">126 <div class="status-left">10:32</div>127 <div class="status-right">128 <!-- simple status icons -->129 <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">130 <circle cx="12" cy="12" r="9"></circle>131 <line x1="12" y1="7" x2="12" y2="13"></line>132 <circle cx="12" cy="17" r="1.4" fill="#fff" stroke="none"></circle>133 </svg>134 <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">135 <rect x="3" y="7" width="18" height="10" rx="2"></rect>136 <path d="M7 11h10"></path>137 </svg>138 <svg class="icon" viewBox="0 0 24 24" fill="#fff">139 <path d="M2 20h20v-2H2v2zM4 16h16V6a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v10z"></path>140 </svg>141 <svg class="icon" viewBox="0 0 24 24" fill="#fff">142 <path d="M12 2l3 3h-2v6h-2V5H9l3-3z"></path>143 </svg>144 </div>145 </div>146 147 <!-- App Bar -->148 <div class="app-bar">149 <div class="back">150 <svg viewBox="0 0 32 32" class="icon" fill="none" stroke="#ffffff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">151 <path d="M20 6 L10 16 L20 26"></path>152 </svg>153 </div>154 <div class="app-title">Math Tests</div>155 <div class="app-spacer"></div>156 <div class="premium">PREMIUM</div>157 <div class="actions">158 <!-- share -->159 <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">160 <circle cx="6" cy="12" r="2.5"></circle>161 <circle cx="18" cy="6" r="2.5"></circle>162 <circle cx="18" cy="18" r="2.5"></circle>163 <path d="M8.3 11 L15.7 7.5"></path>164 <path d="M8.3 13 L15.7 16.5"></path>165 </svg>166 <!-- search -->167 <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2">168 <circle cx="11" cy="11" r="7"></circle>169 <line x1="16.5" y1="16.5" x2="22" y2="22"></line>170 </svg>171 <!-- more vertical -->172 <svg class="icon" viewBox="0 0 24 24" fill="#ffffff">173 <circle cx="12" cy="5" r="2"></circle>174 <circle cx="12" cy="12" r="2"></circle>175 <circle cx="12" cy="19" r="2"></circle>176 </svg>177 </div>178 </div>179 180 <!-- Content Cards -->181 <div class="content">182 <div class="card">183 <div class="card-title">Multiply in columns (easy)</div>184 <div class="card-sub">83<br><span class="u">×5</span></div>185 <svg class="chevron" viewBox="0 0 32 32" fill="none" stroke="#ffd42a" stroke-width="4" stroke-linecap="round" stroke-linejoin="round">186 <path d="M10 6 L22 16 L10 26"></path>187 </svg>188 </div>189 190 <div class="card">191 <div class="card-title">Multiply in columns (medium)</div>192 <div class="card-sub">673<br><span class="u">× 4</span></div>193 <svg class="chevron" viewBox="0 0 32 32" fill="none" stroke="#ffd42a" stroke-width="4" stroke-linecap="round" stroke-linejoin="round">194 <path d="M10 6 L22 16 L10 26"></path>195 </svg>196 </div>197 198 <div class="card">199 <div class="card-title">Multiply in columns (difficult)</div>200 <div class="card-sub">36<br><span class="u">×38</span></div>201 <svg class="chevron" viewBox="0 0 32 32" fill="none" stroke="#ffd42a" stroke-width="4" stroke-linecap="round" stroke-linejoin="round">202 <path d="M10 6 L22 16 L10 26"></path>203 </svg>204 </div>205 </div>206 207 <!-- Home indicator -->208 <div class="home-indicator"></div>209</div>210</body>211</html>