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>Statistics Screen</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9 #render-target {10 width: 1080px; height: 2400px;11 position: relative; overflow: hidden;12 background: linear-gradient(175deg, #2a86ff 0%, #3f79ff 35%, #4f6cf4 55%, #5a63e8 70%, #6a56dd 85%, #744fcf 100%);13 color: #fff;14 }15 .safe { padding: 40px; }16 .status-bar {17 height: 90px;18 display: flex; align-items: center; justify-content: space-between;19 font-weight: 600; font-size: 38px; opacity: 0.95;20 }21 .status-left, .status-right { display: flex; align-items: center; gap: 26px; }22 .title-row {23 position: relative; margin-top: 20px; height: 120px;24 display: flex; align-items: center; justify-content: center;25 }26 .title-row h1 { font-size: 64px; margin: 0; letter-spacing: 0.5px; }27 .avatar-wrap {28 position: absolute; left: 30px; top: -10px; width: 140px; height: 140px;29 }30 .avatar {31 width: 120px; height: 120px; border-radius: 60px; overflow: hidden;32 background: #E0E0E0; border: 1px solid #BDBDBD;33 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 26px;34 position: absolute; left: 0; top: 0;35 }36 .flag-badge {37 position: absolute; right: -4px; bottom: -4px; width: 48px; height: 48px; border-radius: 24px;38 background: #E0E0E0; border: 1px solid #BDBDBD;39 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 18px;40 }41 .crown {42 position: absolute; right: 40px; top: -10px; width: 120px; height: 90px;43 }44 45 /* Level / points card */46 .level-section {47 margin-top: 10px;48 display: flex; align-items: center; justify-content: space-between;49 padding: 20px 30px;50 }51 .level-left { width: 62%; }52 .level-top { display: flex; align-items: center; gap: 16px; }53 .level-top .label { font-size: 42px; font-weight: 700; opacity: 0.95; }54 .progress-bar {55 height: 16px; border-radius: 8px; margin-top: 18px; overflow: hidden;56 background: #274a95;57 position: relative;58 }59 .progress-bar .fill {60 position: absolute; left: 0; top: 0; height: 100%; width: 55%;61 background: linear-gradient(90deg, #ff7c38 0%, #ff9a3b 30%, #f06745 60%, #375fa5 100%);62 border-radius: 8px;63 }64 .points { margin-top: 14px; font-size: 38px; opacity: 0.95; }65 .divider {66 height: 80px; width: 2px; background: rgba(255,255,255,0.25); margin: 0 30px;67 }68 .days-right { display: flex; align-items: center; gap: 24px; }69 .calendar-badge {70 width: 110px; height: 110px; border-radius: 55px; background: #23c143; display: flex; align-items: center; justify-content: center;71 box-shadow: 0 8px 16px rgba(0,0,0,0.2);72 }73 .days-text { display: flex; flex-direction: column; align-items: flex-start; }74 .days-text .num { font-size: 64px; font-weight: 800; line-height: 1; }75 .days-text .lbl { font-size: 32px; opacity: 0.9; margin-top: 6px; }76 77 /* Big stats card */78 .card {79 margin: 20px 30px 0 30px;80 background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.06));81 border-radius: 28px;82 padding: 30px;83 box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);84 }85 .brain-img {86 width: 100%; height: 600px;87 background: #E0E0E0; border: 1px solid #BDBDBD;88 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 36px; border-radius: 20px;89 }90 .metrics {91 margin-top: 40px;92 display: flex; justify-content: space-between; padding: 0 10px;93 }94 .metric {95 width: 30%; height: 200px; border-radius: 100px;96 display: flex; flex-direction: column; align-items: center; justify-content: center;97 background: rgba(0,0,0,0.15); border: 6px solid rgba(0,0,0,0.25);98 }99 .metric .value { font-size: 64px; font-weight: 800; }100 .metric .label { font-size: 32px; margin-top: 10px; opacity: 0.95; }101 102 /* Days-in-a-row card */103 .streak-card {104 margin: 28px 30px;105 background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.06));106 border-radius: 28px; padding: 30px; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);107 }108 .streak-title { text-align: center; font-size: 44px; font-weight: 700; margin-top: 10px; }109 .dots {110 margin: 34px auto 10px; width: 820px; display: flex; justify-content: space-between; align-items: center;111 }112 .dot { width: 60px; height: 60px; border-radius: 30px; background: rgba(0,0,0,0.3); }113 .dot.active { background: #23c143; box-shadow: 0 0 0 6px rgba(35,193,67,0.25); }114 .record { text-align: center; font-size: 36px; margin-top: 16px; opacity: 0.95; }115 .progress-title { text-align: center; font-size: 50px; font-weight: 800; margin-top: 24px; }116 .progress-grid {117 margin-top: 26px; height: 420px; position: relative;118 background: linear-gradient(180deg, rgba(0,0,0,0.15), rgba(0,0,0,0.12));119 border-radius: 18px;120 }121 .progress-grid::before, .progress-grid::after {122 content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none;123 }124 .grid-lines {125 position: absolute; top: 0; bottom: 0; left: 40px; right: 40px;126 display: grid; grid-template-columns: repeat(8, 1fr);127 }128 .grid-lines span { border-left: 1px solid rgba(255,255,255,0.15); }129 130 /* Bottom navigation */131 .bottom-nav {132 position: absolute; left: 30px; right: 30px; bottom: 120px;133 background: #2b1751; border-radius: 28px; padding: 20px 24px;134 box-shadow: 0 8px 24px rgba(0,0,0,0.35), inset 0 0 0 1px rgba(255,255,255,0.08);135 }136 .tabs { display: flex; justify-content: space-between; align-items: center; }137 .tab {138 width: 19%; color: #d6c9ff; text-align: center; font-size: 30px;139 }140 .tab .icon { display: block; margin: 6px auto 10px; width: 70px; height: 70px; }141 .tab.active { color: #40e1ff; font-weight: 700; }142 .badge {143 position: absolute; top: -2px; right: 28px; width: 26px; height: 26px; border-radius: 13px;144 background: #ff2a2a; border: 2px solid #fff;145 }146 /* simple helper */147 .small { font-size: 30px; opacity: 0.9; }148</style>149</head>150<body>151<div id="render-target">152 <div class="safe">153 <!-- Status bar -->154 <div class="status-bar">155 <div class="status-left">156 <div>1:45</div>157 <!-- simple mail icon -->158 <svg width="44" height="44" viewBox="0 0 24 24" fill="none">159 <rect x="3" y="5" width="18" height="14" rx="2" stroke="#fff" stroke-width="2"></rect>160 <path d="M4 7l8 6 8-6" stroke="#fff" stroke-width="2" fill="none"></path>161 </svg>162 <!-- download icon -->163 <svg width="44" height="44" viewBox="0 0 24 24" fill="none">164 <path d="M12 4v10" stroke="#fff" stroke-width="2"></path>165 <path d="M7 9l5 5 5-5" stroke="#fff" stroke-width="2" fill="none"></path>166 <rect x="5" y="18" width="14" height="2" fill="#fff"></rect>167 </svg>168 <!-- play store triangle -->169 <svg width="44" height="44" viewBox="0 0 24 24">170 <path d="M4 5l14 7-14 7z" fill="#fff"></path>171 </svg>172 </div>173 <div class="status-right">174 <!-- wifi -->175 <svg width="44" height="44" viewBox="0 0 24 24" fill="none">176 <path d="M3 8c5-4 13-4 18 0" stroke="#fff" stroke-width="2"></path>177 <path d="M6 12c3-3 9-3 12 0" stroke="#fff" stroke-width="2"></path>178 <circle cx="12" cy="16" r="2" fill="#fff"></circle>179 </svg>180 <!-- battery -->181 <svg width="44" height="44" viewBox="0 0 24 24" fill="none">182 <rect x="2" y="6" width="18" height="12" rx="2" stroke="#fff" stroke-width="2"></rect>183 <rect x="4" y="8" width="12" height="8" fill="#fff"></rect>184 <rect x="20" y="10" width="2" height="4" fill="#fff"></rect>185 </svg>186 </div>187 </div>188 189 <!-- Title row -->190 <div class="title-row">191 <div class="avatar-wrap">192 <div class="avatar">[IMG: User Avatar]</div>193 <div class="flag-badge">IN</div>194 </div>195 <h1>Statistics</h1>196 <svg class="crown" viewBox="0 0 120 90">197 <path d="M10 70h100v12H10z" fill="#e59a00"></path>198 <path d="M12 68l16-28 16 20 16-28 16 28 16-20 16 28z" fill="#ffc400"></path>199 <circle cx="30" cy="42" r="6" fill="#ff6f00"></circle>200 <circle cx="60" cy="34" r="6" fill="#ff6f00"></circle>201 <circle cx="90" cy="48" r="6" fill="#ff6f00"></circle>202 </svg>203 </div>204 205 <!-- Level / points / days -->206 <div class="level-section">207 <div class="level-left">208 <div class="level-top">209 <svg width="44" height="44" viewBox="0 0 24 24">210 <path d="M6 14l6-6 6 6" stroke="#fff" stroke-width="2" fill="none"></path>211 </svg>212 <div class="label">level 1</div>213 </div>214 <div class="progress-bar"><div class="fill"></div></div>215 <div class="points">13 points</div>216 </div>217 <div class="divider"></div>218 <div class="days-right">219 <div class="calendar-badge">220 <svg width="68" height="68" viewBox="0 0 24 24">221 <rect x="3" y="5" width="18" height="16" rx="2" fill="#fff"></rect>222 <path d="M7 3v4M17 3v4" stroke="#23c143" stroke-width="2"></path>223 <path d="M5 10h14" stroke="#23c143" stroke-width="2"></path>224 <path d="M9 14l3 3 5-6" stroke="#23c143" stroke-width="2" fill="none"></path>225 </svg>226 </div>227 <div class="days-text">228 <div class="num">1</div>229 <div class="lbl">days</div>230 </div>231 </div>232 </div>233 234 <!-- Big stats card -->235 <div class="card">236 <div class="brain-img">[IMG: Brain Illustration]</div>237 <div class="metrics">238 <div class="metric">239 <div class="value">1</div>240 <div class="label">minutes</div>241 </div>242 <div class="metric">243 <div class="value">14</div>244 <div class="label">words</div>245 </div>246 <div class="metric">247 <div class="value">3</div>248 <div class="label">phrases</div>249 </div>250 </div>251 </div>252 253 <!-- Streak card -->254 <div class="streak-card">255 <div class="streak-title">Days in a row</div>256 <div class="dots">257 <div class="dot"></div>258 <div class="dot"></div>259 <div class="dot"></div>260 <div class="dot active"></div>261 <div class="dot"></div>262 <div class="dot"></div>263 <div class="dot"></div>264 </div>265 <div class="record">Record:</div>266 <div class="progress-title">Your daily progress:</div>267 <div class="progress-grid">268 <div class="grid-lines">269 <span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span>270 </div>271 </div>272 </div>273 </div>274 275 <!-- Bottom navigation -->276 <div class="bottom-nav">277 <div class="tabs">278 <div class="tab">279 <svg class="icon" viewBox="0 0 24 24" fill="none">280 <path d="M3 10l9-6 9 6v9H3z" stroke="#d6c9ff" stroke-width="2" fill="none"></path>281 <rect x="8" y="13" width="8" height="6" fill="#d6c9ff"></rect>282 </svg>283 <div>Categories</div>284 </div>285 <div class="tab">286 <svg class="icon" viewBox="0 0 24 24" fill="none">287 <rect x="5" y="3" width="14" height="18" rx="2" stroke="#d6c9ff" stroke-width="2"></rect>288 <path d="M8 8h8M8 12h8M8 16h8" stroke="#d6c9ff" stroke-width="2"></path>289 </svg>290 <div>Lessons</div>291 </div>292 <div class="tab active">293 <svg class="icon" viewBox="0 0 24 24" fill="none">294 <circle cx="6" cy="17" r="3" stroke="#40e1ff" stroke-width="2"></circle>295 <circle cx="18" cy="7" r="3" stroke="#40e1ff" stroke-width="2"></circle>296 <path d="M8 15l8-6" stroke="#40e1ff" stroke-width="2"></path>297 </svg>298 <div>Statistics</div>299 </div>300 <div class="tab">301 <svg class="icon" viewBox="0 0 24 24" fill="none">302 <rect x="5" y="12" width="3" height="8" fill="#d6c9ff"></rect>303 <rect x="10" y="9" width="3" height="11" fill="#d6c9ff"></rect>304 <rect x="15" y="6" width="3" height="14" fill="#d6c9ff"></rect>305 </svg>306 <div>Leaderboard</div>307 </div>308 <div class="tab" style="position: relative;">309 <svg class="icon" viewBox="0 0 24 24" fill="none">310 <path d="M3 6h18l-2 10H5z" stroke="#d6c9ff" stroke-width="2" fill="none"></path>311 <circle cx="9" cy="20" r="2" fill="#d6c9ff"></circle>312 <circle cx="17" cy="20" r="2" fill="#d6c9ff"></circle>313 </svg>314 <div>Shop</div>315 <div class="badge"></div>316 </div>317 </div>318 </div>319</div>320</body>321</html>