GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Statistics Screen Mock</title>5<meta name="viewport" content="width=1080, initial-scale=1.0">6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8 #render-target {9 position: relative;10 width: 1080px;11 height: 2400px;12 overflow: hidden;13 background: linear-gradient(180deg,#3ea6ff 0%, #3f66ff 45%, #4b36d9 75%, #5a2fb1 100%);14 color: #fff;15 }16 17 /* Status bar */18 .status {19 position: absolute;20 top: 22px;21 left: 36px;22 right: 36px;23 height: 48px;24 display: flex;25 align-items: center;26 justify-content: space-between;27 opacity: 0.95;28 }29 .status .time { font-weight: 700; letter-spacing: 1px; font-size: 38px; }30 .status .icons { display: flex; align-items: center; gap: 26px; }31 .status .icon {32 width: 34px; height: 34px; border-radius: 8px;33 border: 2px solid rgba(255,255,255,0.7);34 opacity: 0.9;35 }36 .battery {37 width: 46px; height: 26px; border-radius: 5px;38 border: 3px solid rgba(255,255,255,0.9); position: relative;39 }40 .battery::after { content: ""; position: absolute; right: -8px; top: 6px; width: 6px; height: 14px; background:#fff; border-radius: 2px; }41 .battery .fill { position: absolute; top: 3px; left: 3px; right: 10px; bottom: 3px; background:#fff; border-radius: 2px; }42 43 /* Header */44 .header {45 position: absolute;46 top: 110px; left: 36px; right: 36px;47 display: flex; align-items: center; justify-content: space-between;48 }49 .profile {50 position: relative;51 width: 112px; height: 112px; border-radius: 56px;52 background: #5b2bd8; display: flex; justify-content: center; align-items: center;53 box-shadow: 0 6px 14px rgba(0,0,0,0.25);54 font-size: 54px; font-weight: 800;55 }56 .flag {57 position: absolute; right: -2px; bottom: -2px; width: 36px; height: 36px; border-radius: 50%;58 background: linear-gradient(#ffffff 0 33%, #2b55ff 33% 66%, #e14747 66% 100%);59 border: 4px solid #2f1c83;60 }61 .title { font-size: 64px; font-weight: 700; letter-spacing: 1px; }62 .crown {63 font-size: 96px; filter: drop-shadow(0 6px 6px rgba(0,0,0,0.2));64 }65 66 /* Level and streak row */67 .top-row {68 position: absolute;69 top: 250px; left: 60px; right: 60px;70 display: grid; grid-template-columns: 1fr 1px 340px; align-items: center; column-gap: 26px;71 }72 .divider { width: 1px; height: 120px; background: rgba(255,255,255,0.25); justify-self: center; }73 74 .lvl-box { padding-right: 20px; }75 .lvl-head { display: flex; align-items: center; gap: 16px; color: #e7f1ff; font-size: 44px; font-weight: 700; }76 .small { font-size: 36px; color: rgba(255,255,255,0.85); margin-top: 12px; }77 .progress {78 width: 100%; height: 14px; background: rgba(255,255,255,0.25); border-radius: 8px; margin-top: 22px; overflow: hidden;79 }80 .progress .bar { width: 32%; height: 100%; background: #ff8b37; }81 82 .streak {83 display: grid; grid-template-columns: 120px 1fr; align-items: center; column-gap: 24px;84 }85 .check-wrap {86 width: 120px; height: 120px; background: #47bf49; border-radius: 50%; display: flex; justify-content: center; align-items: center;87 box-shadow: inset 0 0 0 6px rgba(255,255,255,0.25);88 }89 .check-wrap svg { width: 64px; height: 64px; }90 .days { font-size: 42px; color: #dfefff; }91 .days .num { display:block; font-size: 70px; font-weight: 800; line-height: 1.0; color: #ffffff; }92 93 /* Brain placeholder section */94 .brain-card {95 position: absolute; top: 360px; left: 36px; right: 36px; height: 780px;96 border-radius: 26px; padding: 26px;97 background: radial-gradient(1200px 800px at 50% 40%, rgba(255,255,255,0.15), rgba(255,255,255,0.05) 60%, rgba(255,255,255,0) 100%);98 border: 1px solid rgba(255,255,255,0.12);99 display: flex; align-items: center; justify-content: center;100 }101 .img-placeholder {102 width: 100%; height: 100%;103 background: rgba(224,224,224,0.2);104 border: 1px dashed rgba(255,255,255,0.25);105 color: rgba(255,255,255,0.85);106 display: flex; align-items: center; justify-content: center;107 font-size: 42px; text-align: center; border-radius: 22px;108 }109 110 /* Metric circles */111 .metric-row {112 position: absolute; top: 1160px; left: 36px; right: 36px;113 display: flex; justify-content: space-around; align-items: center;114 }115 .metric {116 width: 240px; height: 240px; border-radius: 50%;117 background: radial-gradient(circle at 70% 20%, rgba(255,255,255,0.25), rgba(255,255,255,0.12));118 border: 10px solid rgba(255,255,255,0.25);119 display: grid; place-items: center; text-align: center;120 }121 .metric .value { font-size: 72px; font-weight: 800; margin-bottom: 6px; }122 .metric .label { font-size: 44px; opacity: 0.95; }123 124 /* Days in a row panel */125 .streak-panel {126 position: absolute; top: 1460px; left: 36px; right: 36px; height: 520px;127 border-radius: 26px; background: linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.08));128 border: 1px solid rgba(255,255,255,0.12);129 padding: 34px;130 }131 .streak-title { font-size: 56px; font-weight: 700; }132 .dot-row { margin-top: 42px; display: flex; gap: 58px; justify-content: center; }133 .dot { width: 56px; height: 56px; border-radius: 50%; background: rgba(255,255,255,0.2); }134 .dot.big { width: 100px; height: 100px; background: #43b748; box-shadow: 0 0 0 8px rgba(255,255,255,0.15) inset; }135 .record { margin-top: 44px; font-size: 44px; color: #f2fbff; }136 .progress-title { margin-top: 34px; font-size: 56px; font-weight: 700; }137 .grid-lines {138 margin-top: 22px; height: 170px; border-radius: 16px;139 background: repeating-linear-gradient(140 to right,141 rgba(255,255,255,0.1) 0px,142 rgba(255,255,255,0.1) 2px,143 rgba(255,255,255,0.02) 2px,144 rgba(255,255,255,0.02) 70px145 );146 }147 148 /* Bottom nav */149 .tabbar {150 position: absolute; left: 20px; right: 20px; bottom: 24px; height: 176px;151 background: #2b105c;152 border-radius: 28px; border: 1px solid rgba(255,255,255,0.12);153 display: flex; justify-content: space-around; align-items: center;154 box-shadow: 0 12px 28px rgba(0,0,0,0.35);155 }156 .tab {157 width: 180px; height: 140px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: #cbd6ff;158 position: relative;159 }160 .tab.active { color: #9dd8ff; }161 .tab .tab-icon {162 width: 66px; height: 66px; border-radius: 12px; background: rgba(255,255,255,0.15); display: flex; align-items: center; justify-content: center;163 border: 2px solid rgba(255,255,255,0.2);164 }165 .tab span { font-size: 36px; }166 167 .shop-badge {168 position: absolute; right: 20px; top: 6px;169 width: 40px; height: 40px; background: #ff3b30; border-radius: 50%;170 display: flex; align-items: center; justify-content: center; font-weight: 800; color: #fff; font-size: 30px;171 border: 3px solid #2b105c;172 }173 174 /* Helpers */175 .muted { color: rgba(255,255,255,0.85); }176</style>177</head>178<body>179<div id="render-target">180 181 <!-- status bar -->182 <div class="status">183 <div class="time">1:41</div>184 <div class="icons">185 <div class="icon"></div>186 <div class="icon"></div>187 <div class="icon"></div>188 <svg width="34" height="34" viewBox="0 0 24 24" fill="#fff" style="opacity:.85">189 <path d="M21 7l-9 10L3 9l1.5-1.5L12 14l7.5-8.5L21 7z"/>190 </svg>191 <div class="battery"><div class="fill"></div></div>192 </div>193 </div>194 195 <!-- header -->196 <div class="header">197 <div class="profile">C<div class="flag"></div></div>198 <div class="title">Statistics</div>199 <div class="crown">👑</div>200 </div>201 202 <!-- level and streak row -->203 <div class="top-row">204 <div class="lvl-box">205 <div class="lvl-head">206 <svg width="46" height="46" viewBox="0 0 24 24" fill="#e9f4ff">207 <path d="M4 14l1.4 1.4L11 9.8V20h2V9.8l5.6 5.6L20 14l-8-8-8 8z"/>208 </svg>209 <div>level 2</div>210 </div>211 <div class="progress"><div class="bar"></div></div>212 <div class="small">38 points</div>213 </div>214 <div class="divider"></div>215 <div class="streak">216 <div class="check-wrap">217 <svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">218 <path d="M20 6l-11 11-5-5"/>219 </svg>220 </div>221 <div class="days">222 <span class="num">1</span>223 days224 </div>225 </div>226 </div>227 228 <!-- brain illustration placeholder -->229 <div class="brain-card">230 <div class="img-placeholder">[IMG: Brain network illustration]</div>231 </div>232 233 <!-- metric circles -->234 <div class="metric-row">235 <div class="metric">236 <div class="value">1</div>237 <div class="label">minutes</div>238 </div>239 <div class="metric">240 <div class="value">16</div>241 <div class="label">words</div>242 </div>243 <div class="metric">244 <div class="value">3</div>245 <div class="label">phrases</div>246 </div>247 </div>248 249 <!-- days in a row panel -->250 <div class="streak-panel">251 <div class="streak-title">Days in a row</div>252 253 <div class="dot-row">254 <div class="dot"></div>255 <div class="dot"></div>256 <div class="dot"></div>257 <div class="dot big"></div>258 <div class="dot"></div>259 <div class="dot"></div>260 <div class="dot"></div>261 </div>262 263 <div class="record">Record:</div>264 265 <div class="progress-title">Your daily progress:</div>266 <div class="grid-lines"></div>267 </div>268 269 <!-- bottom navigation -->270 <div class="tabbar">271 <div class="tab">272 <div class="tab-icon">273 <svg width="40" height="40" viewBox="0 0 24 24" fill="#e7eeff">274 <path d="M12 2l9 7v11h-6v-6H9v6H3V9l9-7z"/>275 </svg>276 </div>277 <span>Categories</span>278 </div>279 <div class="tab">280 <div class="tab-icon">281 <svg width="42" height="42" viewBox="0 0 24 24" fill="#e7eeff">282 <path d="M4 6h16v2H4V6zm0 5h16v2H4v-2zm0 5h10v2H4v-2z"/>283 </svg>284 </div>285 <span>Lessons</span>286 </div>287 <div class="tab active">288 <div class="tab-icon">289 <svg width="42" height="42" viewBox="0 0 24 24" fill="#e7eeff">290 <path d="M3 19h18v2H3v-2zM5 4h4v12H5V4zm5 4h4v8h-4V8zm5-3h4v11h-4V5z"/>291 </svg>292 </div>293 <span>Statistics</span>294 </div>295 <div class="tab">296 <div class="tab-icon">297 <svg width="42" height="42" viewBox="0 0 24 24" fill="#e7eeff">298 <path d="M3 12h4l3 7 4-14 3 7h4"/>299 </svg>300 </div>301 <span>Leaderboard</span>302 </div>303 <div class="tab">304 <div class="tab-icon">305 <svg width="42" height="42" viewBox="0 0 24 24" fill="#e7eeff">306 <path d="M7 4h-2l-1 2H1v2h2l3.6 7.59L5.25 18a2 2 0 002 2h9.5v-2h-9.5l1.1-2h7.9a2 2 0 001.8-1.1L21 8H6.42l-.94-2H7V4z"/>307 </svg>308 </div>309 <span>Shop</span>310 <div class="shop-badge">!</div>311 </div>312 </div>313 314</div>315</body>316</html>