GD-ML/AndroidCode

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: 'Helvetica Neue', Arial, sans-serif; }7  #render-target {8    width:1080px; height:2400px; position:relative; overflow:hidden;9    background: linear-gradient(180deg, #2b59d1 0%, #283dac 40%, #2a2e8a 70%, #231b74 100%);10    color:#fff;11  }12  .status-bar {13    position:absolute; top:24px; left:24px; right:24px; height:64px; display:flex; align-items:center; justify-content:space-between; opacity:0.95;14    font-weight:600; letter-spacing:0.5px;15  }16  .status-left { display:flex; align-items:center; gap:24px; }17  .status-right { display:flex; align-items:center; gap:18px; }18  .status-dot { width:18px; height:18px; border-radius:50%; background:#cde0ff; opacity:0.9; }19  /* Header */20  .avatar {21    position:absolute; top:110px; left:36px; width:98px; height:98px; border-radius:50%;22    background: #3a2d9a; display:flex; align-items:center; justify-content:center; font-size:44px; font-weight:800;23    box-shadow: 0 6px 12px rgba(0,0,0,0.25);24  }25  .flag {26    position:absolute; bottom:-2px; right:-2px; width:40px; height:26px; border-radius:8px; border:3px solid #1a1f6f;27    background: linear-gradient(#fff 33%, #005bbb 33% 66%, #ff4b4b 66%);28  }29  .title {30    position:absolute; top:150px; left:0; right:0; text-align:center; font-size:56px; font-weight:700; letter-spacing:0.3px;31  }32  .crown {33    position:absolute; top:110px; right:36px; width:110px; height:90px;34  }35  /* Level / points row */36  .level-row {37    position:absolute; top:226px; left:90px; right:90px; display:flex; align-items:center; gap:24px;38  }39  .level-tag { display:flex; align-items:center; gap:12px; font-size:36px; font-weight:700; }40  .progress {41    margin-left:18px; height:12px; width:340px; background:#1e2b84; border-radius:8px; position:relative;42  }43  .progress::after { content:""; position:absolute; left:0; top:0; height:100%; width:46%; background:#ff7f38; border-radius:8px; }44  .points-days { margin-top:20px; position:absolute; top:288px; left:90px; right:90px; display:flex; align-items:center; justify-content:space-between; }45  .points { font-size:36px; font-weight:700; opacity:0.95; }46  .divider { width:2px; height:60px; background:#38479c; margin:0 24px; }47  .days { display:flex; align-items:center; gap:18px; font-size:38px; }48  .check-badge {49    width:96px; height:96px; border-radius:50%; background:#2ecc71; display:flex; align-items:center; justify-content:center; box-shadow:0 6px 16px rgba(0,0,0,0.25);50  }51  .check-badge svg { width:54px; height:54px; }52  /* Main card */53  .big-card {54    position:absolute; top:360px; left:36px; right:36px; height:720px; border-radius:30px;55    background: radial-gradient(1200px 900px at 70% 20%, rgba(0,255,255,0.15), transparent), rgba(20,27,102,0.45);56    border:1px solid rgba(255,255,255,0.15);57    box-shadow: 0 20px 40px rgba(0,0,0,0.35) inset;58  }59  .brain-img {60    position:absolute; left:60px; right:60px; top:120px; height:440px;61    background:#E0E0E0; border:1px solid #BDBDBD; color:#757575; display:flex; align-items:center; justify-content:center;62    border-radius:12px; letter-spacing:0.3px;63  }64  /* Orange tip bubble */65  .tip {66    position:absolute; top:470px; left:160px; right:160px; background:#f49063; color:#fff;67    font-size:40px; line-height:1.25; padding:30px 34px; border-radius:24px; box-shadow:0 10px 24px rgba(0,0,0,0.25);68  }69  .tip-arrow {70    position:absolute; top:612px; left:510px; width:0; height:0; border-left:22px solid transparent; border-right:22px solid transparent; border-top:28px solid #f49063;71    filter:drop-shadow(0px 6px 6px rgba(0,0,0,0.2));72  }73  /* Circular counters */74  .counters {75    position:absolute; top:1100px; left:36px; right:36px; display:flex; justify-content:space-around; align-items:center;76  }77  .circle {78    width:240px; height:240px; border-radius:50%; background:rgba(26,35,103,0.65);79    border:10px solid rgba(150,170,255,0.35);80    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;81    box-shadow:0 12px 24px rgba(0,0,0,0.35) inset;82  }83  .circle .dot { position:absolute; top:-10px; left:50%; transform:translateX(-50%); width:20px; height:20px; border-radius:50%; background:#8adf5e; }84  .circle:nth-child(2) .dot { background:#ff77b2; }85  .circle:nth-child(3) .dot { background:#6ad2ff; }86  .circle .num { font-size:64px; font-weight:800; }87  .circle .label { font-size:36px; opacity:0.9; }88  /* Days in a row card */89  .streak-card {90    position:absolute; top:1310px; left:36px; right:36px; height:740px; border-radius:28px;91    background: linear-gradient(180deg, rgba(25,32,117,0.7), rgba(29,23,101,0.7));92    border:1px solid rgba(255,255,255,0.12);93    box-shadow:0 10px 30px rgba(0,0,0,0.35) inset;94  }95  .streak-title { position:absolute; top:60px; left:0; right:0; text-align:center; font-size:48px; font-weight:700; }96  .dots-row { position:absolute; top:160px; left:100px; right:100px; display:flex; justify-content:space-between; align-items:center; }97  .dot { width:54px; height:54px; border-radius:50%; background:#272c79; box-shadow: inset 0 0 0 6px rgba(255,255,255,0.06); }98  .dot.big { width:112px; height:112px; background:#33a532; box-shadow: 0 6px 16px rgba(0,0,0,0.35); }99  .record { position:absolute; top:320px; left:0; right:0; text-align:center; font-size:42px; opacity:0.95; }100  .progress-title { position:absolute; top:430px; left:0; right:0; text-align:center; font-size:54px; font-weight:800; }101  .graph {102    position:absolute; left:70px; right:70px; bottom:60px; top:540px;103    display:flex; align-items:flex-end; gap:64px;104  }105  .bar {106    flex:1; background: linear-gradient(to bottom, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0.03) 100%);107    height:100%; border-radius:8px; opacity:0.25;108  }109  /* Bottom navigation */110  .bottom-nav {111    position:absolute; left:0; right:0; bottom:0; height:220px; background: rgba(12,16,70,0.55);112    border-top-left-radius:26px; border-top-right-radius:26px; border-top:1px solid rgba(255,255,255,0.18);113    display:flex; align-items:center; justify-content:space-around;114  }115  .nav-item { display:flex; flex-direction:column; align-items:center; gap:18px; color:#fff; font-size:34px; }116  .nav-icon {117    width:92px; height:92px; border-radius:18px; background: rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.14);118    display:flex; align-items:center; justify-content:center;119  }120  .nav-item.active .nav-icon { background:rgba(52,208,196,0.25); border-color:#34d0c4; }121  .notif {122    position:absolute; top:26px; right:40px; width:40px; height:40px; background:#ff3b30; border-radius:50%; border:3px solid #fff;123    display:flex; align-items:center; justify-content:center; font-weight:800;124  }125  /* Helper small icons */126  .mini-icon { width:36px; height:36px; }127</style>128</head>129<body>130<div id="render-target">131 132  <!-- Status bar -->133  <div class="status-bar">134    <div class="status-left">135      <div style="font-size:44px; font-weight:800;">1:36</div>136      <div style="font-size:38px;">M</div>137      <div class="status-dot"></div>138      <div class="status-dot" style="background:#a7c7ff;"></div>139    </div>140    <div class="status-right">141      <svg class="mini-icon" viewBox="0 0 24 24" fill="#fff"><path d="M2 10h20v4H2z"/></svg>142      <svg class="mini-icon" viewBox="0 0 24 24" fill="#fff"><path d="M7 21h10c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2H7c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2z"/></svg>143    </div>144  </div>145 146  <!-- Avatar and title -->147  <div class="avatar">C148    <div class="flag"></div>149  </div>150  <div class="title">Statistics</div>151  <!-- Crown icon -->152  <svg class="crown" viewBox="0 0 100 70">153    <path d="M10 50 L20 20 L38 38 L50 10 L62 38 L80 20 L90 50 L10 50 Z" fill="#f1c40f" stroke="#c89b00" stroke-width="4"/>154    <rect x="12" y="50" width="76" height="14" fill="#f1c40f" stroke="#c89b00" stroke-width="4"/>155  </svg>156 157  <!-- Level row -->158  <div class="level-row">159    <div class="level-tag">160      <svg width="38" height="38" viewBox="0 0 24 24" fill="#ffb26b"><path d="M12 4l6 6H6z"/></svg>161      <div>level 2</div>162    </div>163    <div class="progress"></div>164  </div>165 166  <!-- Points and days -->167  <div class="points-days">168    <div class="points">38 points</div>169    <div class="divider"></div>170    <div class="days">171      <div class="check-badge">172        <svg viewBox="0 0 24 24" fill="#fff"><path d="M9 16.2l-3.5-3.5L4 14.2l5 5 12-12-1.4-1.4z"/></svg>173      </div>174      <div style="display:flex; flex-direction:column;">175        <div style="font-size:52px; font-weight:800; text-align:left; line-height:1;">1</div>176        <div style="font-size:36px; opacity:0.9;">days</div>177      </div>178    </div>179  </div>180 181  <!-- Main brain card -->182  <div class="big-card">183    <div class="brain-img">[IMG: Wireframe Brain Illustration]</div>184  </div>185 186  <!-- Tip bubble -->187  <div class="tip">You’re doing great. Tap to<br>view the learned words</div>188  <div class="tip-arrow"></div>189 190  <!-- Circular counters -->191  <div class="counters">192    <div class="circle">193      <div class="dot"></div>194      <div class="num">1</div>195      <div class="label">minutes</div>196    </div>197    <div class="circle">198      <div class="dot"></div>199      <div class="num">16</div>200      <div class="label">words</div>201    </div>202    <div class="circle">203      <div class="dot"></div>204      <div class="num">3</div>205      <div class="label">phrases</div>206    </div>207  </div>208 209  <!-- Streak / progress card -->210  <div class="streak-card">211    <div class="streak-title">Days in a row</div>212    <div class="dots-row">213      <div class="dot"></div>214      <div class="dot"></div>215      <div class="dot big"></div>216      <div class="dot"></div>217      <div class="dot"></div>218      <div class="dot"></div>219    </div>220    <div class="record">Record:</div>221    <div class="progress-title">Your daily progress:</div>222    <div class="graph">223      <div class="bar"></div>224      <div class="bar"></div>225      <div class="bar"></div>226      <div class="bar"></div>227      <div class="bar"></div>228      <div class="bar"></div>229    </div>230  </div>231 232  <!-- Bottom navigation -->233  <div class="bottom-nav">234    <div class="nav-item">235      <div class="nav-icon">236        <svg viewBox="0 0 24 24" width="54" height="54" fill="#cfe2ff"><path d="M3 11l9-7 9 7v9H3z"/></svg>237      </div>238      <div>Categories</div>239    </div>240    <div class="nav-item">241      <div class="nav-icon">242        <svg viewBox="0 0 24 24" width="54" height="54" fill="#cfe2ff"><path d="M4 6h16v4H4zm0 6h16v2H4zm0 4h10v2H4z"/></svg>243      </div>244      <div>Lessons</div>245    </div>246    <div class="nav-item active">247      <div class="nav-icon">248        <svg viewBox="0 0 24 24" width="54" height="54" fill="#34d0c4"><path d="M12 2a10 10 0 100 20 10 10 0 000-20zm1 5v8h-2V7h2zm-2 10h2v2h-2z"/></svg>249      </div>250      <div>Statistics</div>251    </div>252    <div class="nav-item">253      <div class="nav-icon">254        <svg viewBox="0 0 24 24" width="54" height="54" fill="#cfe2ff"><path d="M7 17h3V7H7v10zm4 0h3V4h-3v13zm4 0h3V10h-3v7z"/></svg>255      </div>256      <div>Leaderboard</div>257    </div>258    <div class="nav-item">259      <div class="nav-icon">260        <svg viewBox="0 0 24 24" width="54" height="54" fill="#cfe2ff"><path d="M7 6h13l-2 9H8L7 6zm2 13a2 2 0 100-4 2 2 0 000 4zm8 0a2 2 0 100-4 2 2 0 000 4z"/></svg>261      </div>262      <div>Shop</div>263    </div>264    <div class="notif">!</div>265  </div>266 267</div>268</body>269</html>