GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Statistics Screen Mock</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7 #render-target {8 width: 1080px;9 height: 2400px;10 position: relative;11 overflow: hidden;12 background: linear-gradient(180deg, #175ed6 0%, #1f3fb1 40%, #2e2a94 70%, #2e217f 100%);13 color: #ffffff;14 }15 16 /* Status bar */17 .status-bar {18 position: absolute;19 top: 20px;20 left: 24px;21 right: 24px;22 height: 60px;23 display: flex;24 align-items: center;25 justify-content: space-between;26 font-weight: 600;27 font-size: 40px;28 opacity: 0.95;29 }30 .status-left {31 display: flex;32 align-items: center;33 gap: 26px;34 }35 .tiny-icon {36 width: 40px; height: 40px; border-radius: 8px; background: rgba(255,255,255,0.25);37 }38 .status-right {39 display: flex; align-items: center; gap: 22px;40 }41 .battery {42 width: 36px; height: 22px; border: 3px solid #fff; border-radius: 5px; position: relative;43 }44 .battery::after { content: ""; position: absolute; right: -10px; top: 7px; width: 8px; height: 8px; background: #fff; border-radius: 2px; }45 .wifi {46 width: 34px; height: 26px; position: relative;47 }48 .wifi:before, .wifi:after {49 content: ""; position: absolute; left: 0; right: 0; margin: auto; border: 3px solid #fff; border-top: none; border-left-color: transparent; border-right-color: transparent; border-bottom-left-radius: 20px; border-bottom-right-radius: 20px;50 }51 .wifi:before { top: 0; width: 30px; height: 16px; opacity: 0.8; }52 .wifi:after { top: 8px; width: 18px; height: 8px; opacity: 0.8; }53 .dot-signal {54 width: 8px; height: 8px; background: #fff; border-radius: 50%; position: absolute; bottom: -3px; left: 50%; transform: translateX(-50%);55 }56 57 /* Header area */58 .avatar {59 position: absolute;60 top: 110px;61 left: 40px;62 width: 120px; height: 120px;63 background: radial-gradient(circle at 30% 30%, #5b4bc2, #3a2a8f);64 border-radius: 60px;65 box-shadow: 0 10px 20px rgba(0,0,0,0.35);66 display: flex; justify-content: center; align-items: center;67 font-size: 64px; font-weight: 800;68 }69 .flag {70 position: absolute; bottom: 0; right: 0; width: 44px; height: 28px; border-radius: 14px; overflow: hidden; box-shadow: 0 0 0 4px rgba(0,0,0,0.2);71 }72 .flag div { height: 33.33%; }73 .flag .f1 { background: #ffffff; }74 .flag .f2 { background: #2a66f6; }75 .flag .f3 { background: #e8482e; }76 77 .title {78 position: absolute;79 top: 150px;80 left: 0; right: 0;81 text-align: center;82 font-size: 64px;83 font-weight: 700;84 letter-spacing: 1px;85 }86 87 .crown {88 position: absolute;89 top: 120px;90 right: 36px;91 width: 130px; height: 100px;92 background: #E0E0E0; border: 1px solid #BDBDBD;93 border-radius: 16px;94 display: flex; align-items: center; justify-content: center;95 color: #333;96 }97 98 /* Level row */99 .level-row {100 position: absolute;101 top: 230px;102 left: 60px;103 right: 60px;104 display: grid;105 grid-template-columns: 1fr 8px 300px;106 column-gap: 20px;107 align-items: center;108 }109 .level-left {110 display: flex; align-items: center; gap: 18px;111 }112 .arrow-badge {113 width: 40px; height: 40px; border: 3px solid #fff; border-radius: 10px; transform: rotate(45deg);114 }115 .level-text { font-size: 42px; font-weight: 700; }116 .progress-line {117 flex: 1; height: 10px; background: rgba(255,255,255,0.2); border-radius: 8px; position: relative;118 margin-left: 30px; margin-right: 30px;119 }120 .progress-line .fill { position: absolute; left: 0; top: 0; bottom: 0; width: 340px; background: #ff7e3a; border-radius: 8px; }121 .points { font-size: 36px; margin-left: 20px; opacity: 0.9; }122 .divider { width: 2px; height: 80px; background: rgba(255,255,255,0.25); justify-self: center; }123 .days-box {124 display: flex; align-items: center; gap: 22px; justify-content: flex-start;125 }126 .check-icon {127 width: 100px; height: 100px; background: #2bb44a; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 16px rgba(0,0,0,0.35);128 }129 .check-icon svg { width: 60px; height: 60px; }130 .days-text { font-size: 56px; font-weight: 700; }131 .days-sub { font-size: 34px; opacity: 0.85; margin-left: 8px; }132 133 /* Main card with brain */134 .brain-card {135 position: absolute;136 top: 340px;137 left: 40px;138 width: 1000px; height: 820px;139 background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.05));140 border-radius: 36px;141 box-shadow: inset 0 0 0 2px rgba(255,255,255,0.12);142 padding: 40px;143 }144 .hint-bubble {145 position: absolute;146 top: -46px;147 left: 180px;148 background: rgba(255,145,111,0.92);149 color: #fff;150 padding: 28px 36px;151 border-radius: 24px;152 font-size: 42px;153 font-weight: 700;154 box-shadow: 0 10px 30px rgba(0,0,0,0.3);155 }156 .brain-img {157 width: 920px; height: 560px;158 background: #E0E0E0; border: 1px solid #BDBDBD; border-radius: 24px;159 display: flex; align-items: center; justify-content: center;160 color: #333;161 margin: 40px auto 0 auto;162 }163 164 /* Circular stats */165 .circles {166 position: absolute;167 top: 1160px;168 left: 40px;169 right: 40px;170 display: flex; justify-content: space-between;171 }172 .circle {173 width: 300px; height: 300px; border-radius: 150px; border: 18px solid rgba(255,255,255,0.25);174 display: flex; flex-direction: column; align-items: center; justify-content: center;175 background: rgba(20,20,60,0.2);176 }177 .circle .num { font-size: 80px; font-weight: 800; margin-bottom: 10px; }178 .circle .label { font-size: 44px; opacity: 0.9; }179 180 /* Days card */181 .days-card {182 position: absolute;183 top: 1470px;184 left: 40px;185 width: 1000px; height: 560px;186 background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.05));187 border-radius: 36px;188 box-shadow: inset 0 0 0 2px rgba(255,255,255,0.12);189 padding: 40px 50px;190 }191 .card-title {192 font-size: 56px; font-weight: 800; margin-bottom: 40px;193 }194 .dot-row {195 display: flex; justify-content: space-between; padding: 0 40px; margin-top: 10px;196 }197 .dot { width: 80px; height: 80px; background: rgba(255,255,255,0.2); border-radius: 40px; }198 .dot.active { background: #2bb44a; }199 .record {200 margin-top: 40px; font-size: 46px; opacity: 0.95;201 }202 .progress-title {203 margin-top: 30px; font-size: 56px; font-weight: 800;204 }205 .grid-lines {206 position: absolute; bottom: 40px; left: 50px; right: 50px; height: 220px;207 display: grid; grid-template-columns: repeat(10, 1fr); column-gap: 22px;208 }209 .grid-lines div {210 background: rgba(255,255,255,0.18);211 width: 3px; height: 100%;212 margin: 0 auto;213 border-radius: 2px;214 }215 216 /* Bottom Navigation */217 .bottom-nav {218 position: absolute;219 bottom: 0; left: 0; right: 0;220 height: 190px;221 background: rgba(20,10,60,0.65);222 border-top-left-radius: 30px; border-top-right-radius: 30px;223 box-shadow: 0 -8px 24px rgba(0,0,0,0.45);224 padding: 28px 30px;225 }226 .nav-items {227 height: 100%;228 display: grid;229 grid-template-columns: repeat(5, 1fr);230 column-gap: 24px;231 align-items: center;232 }233 .nav-item {234 display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;235 color: #cdd3ff; font-size: 38px; font-weight: 700;236 }237 .nav-icon {238 width: 80px; height: 80px; border-radius: 18px; background: rgba(255,255,255,0.25);239 display: flex; align-items: center; justify-content: center;240 }241 .nav-item.active .nav-icon {242 background: rgba(120,255,200,0.25);243 box-shadow: 0 0 0 3px rgba(120,255,200,0.35) inset;244 }245 .badge {246 position: absolute; top: 16px; right: 26px; width: 46px; height: 46px; background: #ff3b30; color: #fff;247 font-weight: 800; border-radius: 24px; display: flex; align-items: center; justify-content: center;248 }249</style>250</head>251<body>252<div id="render-target">253 254 <!-- Status Bar -->255 <div class="status-bar">256 <div class="status-left">257 <div style="color:#fff;">1:35</div>258 <div class="tiny-icon"></div>259 <div class="tiny-icon"></div>260 <div class="tiny-icon"></div>261 </div>262 <div class="status-right">263 <div class="wifi"><div class="dot-signal"></div></div>264 <div class="battery"></div>265 </div>266 </div>267 268 <!-- Avatar -->269 <div class="avatar">270 C271 <div class="flag">272 <div class="f1"></div>273 <div class="f2"></div>274 <div class="f3"></div>275 </div>276 </div>277 278 <!-- Title -->279 <div class="title">Statistics</div>280 281 <!-- Crown image placeholder -->282 <div class="crown">[IMG: Crown]</div>283 284 <!-- Level Row -->285 <div class="level-row">286 <div class="level-left">287 <div class="arrow-badge"></div>288 <div class="level-text">level 2</div>289 <div class="progress-line"><div class="fill"></div></div>290 <div class="points">38 points</div>291 </div>292 <div class="divider"></div>293 <div class="days-box">294 <div class="check-icon">295 <svg viewBox="0 0 24 24" fill="none">296 <path d="M5 13l4 4L19 7" stroke="#fff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"></path>297 </svg>298 </div>299 <div>300 <div class="days-text">1</div>301 <div class="days-sub">days</div>302 </div>303 </div>304 </div>305 306 <!-- Brain Card -->307 <div class="brain-card">308 <div class="hint-bubble">You're doing great. Tap to view the learned words</div>309 <div class="brain-img">[IMG: Brain graphic with network lines]</div>310 </div>311 312 <!-- Circular Stats -->313 <div class="circles">314 <div class="circle">315 <div class="num">1</div>316 <div class="label">minutes</div>317 </div>318 <div class="circle">319 <div class="num">16</div>320 <div class="label">words</div>321 </div>322 <div class="circle">323 <div class="num">3</div>324 <div class="label">phrases</div>325 </div>326 </div>327 328 <!-- Days Card -->329 <div class="days-card">330 <div class="card-title">Days in a row</div>331 <div class="dot-row">332 <div class="dot"></div>333 <div class="dot"></div>334 <div class="dot"></div>335 <div class="dot active"></div>336 <div class="dot"></div>337 <div class="dot"></div>338 <div class="dot"></div>339 </div>340 <div class="record">Record:</div>341 <div class="progress-title">Your daily progress:</div>342 <div class="grid-lines">343 <div></div><div></div><div></div><div></div><div></div>344 <div></div><div></div><div></div><div></div><div></div>345 </div>346 </div>347 348 <!-- Bottom Navigation -->349 <div class="bottom-nav">350 <div class="nav-items">351 <div class="nav-item">352 <div class="nav-icon"></div>353 <div>Categories</div>354 </div>355 <div class="nav-item">356 <div class="nav-icon"></div>357 <div>Lessons</div>358 </div>359 <div class="nav-item active">360 <div class="nav-icon">361 <svg viewBox="0 0 24 24" width="46" height="46">362 <circle cx="12" cy="12" r="8" fill="none" stroke="#8af5d4" stroke-width="2"></circle>363 <circle cx="12" cy="12" r="3" fill="#8af5d4"></circle>364 </svg>365 </div>366 <div>Statistics</div>367 </div>368 <div class="nav-item">369 <div class="nav-icon"></div>370 <div>Leaderboard</div>371 </div>372 <div class="nav-item" style="position:relative;">373 <div class="nav-icon"></div>374 <div>Shop</div>375 <div class="badge">!</div>376 </div>377 </div>378 </div>379 380</div>381</body>382</html>