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>Mobile UI Mock</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #0f1f23;15 color: #e9f0f2;16 }17 18 /* Status bar */19 .status-bar {20 height: 120px;21 padding: 0 36px;22 display: flex;23 align-items: center;24 justify-content: space-between;25 color: #e8f1f4;26 font-weight: 600;27 letter-spacing: 0.5px;28 font-size: 42px;29 opacity: 0.95;30 }31 .sb-left, .sb-right { display: flex; align-items: center; gap: 22px; }32 .dot { width: 10px; height: 10px; background:#98a7ac; border-radius:50%; display:inline-block; }33 34 /* Tiny icons for status */35 .icon {36 width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center;37 }38 .icon svg { width: 100%; height: 100%; fill: #c7d4d8; }39 40 /* Metrics row */41 .metrics {42 height: 170px;43 display: flex;44 align-items: center;45 padding: 0 44px;46 gap: 70px;47 background: #14272c;48 }49 .metric-item { display: flex; align-items: center; gap: 18px; color: #e9f0f2; font-weight: 700; font-size: 48px; }50 .badge {51 width: 84px; height: 84px; border-radius: 18px;52 display:flex; align-items:center; justify-content:center;53 background: #254048;54 box-shadow: inset 0 0 0 2px rgba(255,255,255,0.1);55 }56 .badge.flag { border-radius: 12px; background: linear-gradient(90deg, #1f5eff 0 33%, #ffffff 33% 66%, #ff3a3a 66%); }57 .badge.flame { background:#ff9b32; }58 .badge.gem { background:#34b2ff; }59 .badge.heart { background:#2b3b40; position: relative; }60 .heart-dot {61 width: 18px; height: 18px; background: #e84141; border-radius: 50%;62 position: absolute; right: 10px; top: 10px;63 }64 .metric-number { opacity: 0.95; }65 66 /* Section header */67 .section {68 padding: 18px 44px 24px;69 background: #14272c;70 border-top: 2px solid rgba(255,255,255,0.06);71 border-bottom: 2px solid rgba(0,0,0,0.35);72 }73 .section-title {74 display:flex; justify-content:center; align-items:center; gap: 12px;75 color: #e9f0f2; font-weight: 800; font-size: 54px;76 padding: 12px 0 14px;77 }78 .caret-up {79 width: 38px; height: 38px; display:inline-flex; align-items:center; justify-content:center;80 border-radius: 10px; background: rgba(255,255,255,0.06);81 }82 .caret-up svg { width: 70%; height: 70%; fill:#b7c8cd; }83 84 /* Unit card */85 .unit-card {86 margin: 10px 24px 0;87 background: #1a2e33;88 border-radius: 24px;89 padding: 36px 36px;90 display: flex;91 justify-content: space-between;92 align-items: center;93 box-shadow: inset 0 0 0 2px rgba(255,255,255,0.05);94 }95 .unit-text h1 {96 margin: 0; font-size: 78px; color: #e9f0f2; letter-spacing: -0.5px; font-weight: 900;97 }98 .unit-text p {99 margin: 8px 0 0; font-size: 42px; color: #b6c7cb;100 }101 .unit-action {102 width: 120px; height: 120px; background: #1f3a40; border-radius: 32px;103 display: flex; align-items: center; justify-content: center;104 box-shadow: inset 0 0 0 3px rgba(255,255,255,0.06);105 }106 .unit-action svg { width: 62%; height: 62%; fill:#c9d6da; }107 108 /* Level up badge */109 .levelup-wrap { position: absolute; top: 740px; left: 370px; width: 340px; height: 380px; display:flex; align-items:flex-start; justify-content:center; }110 .speech {111 position: absolute; top: 0; padding: 18px 34px;112 background: #9ae82f; color:#20300b;113 font-weight: 900; font-size: 44px; border-radius: 18px;114 }115 .speech:after {116 content:""; position: absolute; left: 50%; transform: translateX(-50%);117 bottom: -18px; border: 18px solid transparent; border-top-color: #9ae82f;118 }119 .level-up {120 position: absolute; top: 72px; width: 320px; height: 320px; border-radius: 50%;121 background: radial-gradient(circle at 50% 50%, #8eea2f 0 55%, transparent 56%);122 box-shadow: 0 6px 0 rgba(0,0,0,0.35);123 }124 .level-up:before {125 /* outer ring */126 content: ""; position: absolute; inset: -14px; border-radius: 50%;127 border: 20px solid #a4f340;128 border-right-color: #273f0e;129 border-bottom-color: #7bdb2e;130 transform: rotate(-18deg);131 }132 .level-up .inner {133 position: absolute; inset: 40px; background: #76d427; border-radius: 50%;134 box-shadow: inset 0 -8px 0 rgba(0,0,0,0.25);135 display:flex; align-items:center; justify-content:center;136 }137 .level-up .inner svg { width: 46%; height: 46%; fill: #ffffff; }138 139 /* Path nodes (locked steps) */140 .node {141 position: absolute; width: 210px; height: 210px; border-radius: 50%;142 background: #2b3b40; box-shadow: 0 10px 0 rgba(0,0,0,0.25), inset 0 0 0 2px rgba(255,255,255,0.05);143 display:flex; align-items:center; justify-content:center; opacity: 0.65;144 }145 .node svg { width: 46%; height: 46%; fill: #748389; }146 147 .node.n1 { left: 160px; top: 1040px; }148 .node.n2 { left: 220px; top: 1300px; }149 .node.n3 { left: 240px; top: 1600px; }150 .node.n4 { left: 520px; top: 1860px; }151 .node.n5 { left: 760px; top: 2060px; }152 153 /* Subtle ghost shapes to mimic chest/owl */154 .ghost {155 position: absolute; opacity: 0.25;156 background: #2b3b40; border-radius: 24px;157 box-shadow: 0 8px 0 rgba(0,0,0,0.25);158 }159 .owl {160 width: 220px; height: 200px; right: 140px; top: 1200px; border-radius: 80px 80px 60px 60px / 70px 70px 60px 60px;161 }162 .chest {163 width: 260px; height: 180px; left: 270px; top: 1510px;164 }165 166 /* Bottom nav bar */167 .bottom-bar {168 position: absolute; left: 0; right:0; bottom: 120px; height: 180px;169 background: #14272c; border-top: 2px solid rgba(255,255,255,0.05);170 display:flex; align-items:center; justify-content:space-around;171 padding: 0 26px;172 }173 .tab {174 width: 152px; height: 120px; display:flex; align-items:center; justify-content:center; border-radius: 26px;175 }176 .tab.active { outline: 6px solid #2f7db7; }177 .tab svg { width: 72%; height: 72%; }178 179 /* Home indicator */180 .home-indicator {181 position: absolute; bottom: 36px; left: 50%; transform: translateX(-50%);182 width: 360px; height: 14px; background: rgba(255,255,255,0.75); border-radius: 12px;183 }184</style>185</head>186<body>187<div id="render-target">188 189 <!-- Status bar -->190 <div class="status-bar">191 <div class="sb-left">192 <div>10:49</div>193 <span class="icon">194 <svg viewBox="0 0 24 24"><path d="M12 2C9 5 7 7.5 7 10a5 5 0 1 0 10 0c0-2.5-2-5-5-8z"/></svg>195 </span>196 <span class="icon">197 <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/></svg>198 </span>199 <div class="icon">200 <svg viewBox="0 0 24 24"><path d="M4 4h16v2H4zM4 10h10v2H4zM4 16h6v2H4z"/></svg>201 </div>202 <span class="dot"></span>203 </div>204 <div class="sb-right">205 <span class="icon">206 <svg viewBox="0 0 24 24"><path d="M2 8.5C6 5 18 5 22 8.5l-2 2C17 8 7 8 4 10.5z"/><path d="M6 13c4-2 8-2 12 0l-2 2c-3-1-5-1-8 0z"/><circle cx="12" cy="18" r="2"/></svg>207 </span>208 <span class="icon">209 <svg viewBox="0 0 24 24"><path d="M6 7h12v10H6z" /><path d="M14 4h-4v3h4z"/></svg>210 </span>211 </div>212 </div>213 214 <!-- Metrics -->215 <div class="metrics">216 <div class="metric-item">217 <div class="badge flag"></div>218 </div>219 <div class="metric-item">220 <div class="badge flame">221 <svg viewBox="0 0 24 24"><path d="M12 2s1 3-2 5c-2 2-3 3-3 6a5 5 0 1 0 10 0c0-3-1-4-3-6C11 5 12 2 12 2z"/></svg>222 </div>223 <div class="metric-number">2</div>224 </div>225 <div class="metric-item">226 <div class="badge gem">227 <svg viewBox="0 0 24 24"><path d="M7 3h10l4 5-9 13L3 8z"/></svg>228 </div>229 <div class="metric-number">156</div>230 </div>231 <div class="metric-item">232 <div class="badge heart">233 <span class="heart-dot"></span>234 <svg viewBox="0 0 24 24"><path d="M12 21s-8-4.5-8-10a5 5 0 0 1 9-3 5 5 0 0 1 9 3c0 5.5-8 10-8 10z"/></svg>235 </div>236 <div class="metric-number">0</div>237 </div>238 </div>239 240 <!-- Section header -->241 <div class="section">242 <div class="section-title">243 <span class="caret-up">244 <svg viewBox="0 0 24 24"><path d="M12 8l6 6H6z"/></svg>245 </span>246 <span>Section 1: Rookie</span>247 </div>248 </div>249 250 <!-- Unit card -->251 <div class="unit-card">252 <div class="unit-text">253 <h1>Unit 1</h1>254 <p>Use basic phrases, greet people</p>255 </div>256 <div class="unit-action">257 <svg viewBox="0 0 24 24">258 <rect x="5" y="7" width="14" height="2" rx="1"></rect>259 <rect x="5" y="11" width="14" height="2" rx="1"></rect>260 <rect x="5" y="15" width="14" height="2" rx="1"></rect>261 <circle cx="7" cy="8" r="2"></circle>262 <circle cx="7" cy="12" r="2"></circle>263 <circle cx="7" cy="16" r="2"></circle>264 </svg>265 </div>266 </div>267 268 <!-- Level up badge -->269 <div class="levelup-wrap">270 <div class="speech">LEVEL UP</div>271 <div class="level-up">272 <div class="inner">273 <svg viewBox="0 0 24 24"><path d="M12 2l2.9 6H22l-5 4 1.9 7L12 15l-6.9 4 1.9-7-5-4h7.1z"/></svg>274 </div>275 </div>276 </div>277 278 <!-- Path nodes -->279 <div class="node n1">280 <svg viewBox="0 0 24 24"><path d="M7 11V9a5 5 0 1 1 10 0v2h1v9H6v-9zM9 9a3 3 0 1 1 6 0v2H9z"/></svg>281 </div>282 <div class="node n2">283 <svg viewBox="0 0 24 24"><path d="M7 11V9a5 5 0 1 1 10 0v2h1v9H6v-9zM9 9a3 3 0 1 1 6 0v2H9z"/></svg>284 </div>285 <div class="node n3">286 <svg viewBox="0 0 24 24"><path d="M7 11V9a5 5 0 1 1 10 0v2h1v9H6v-9zM9 9a3 3 0 1 1 6 0v2H9z"/></svg>287 </div>288 289 <!-- Ghost chest and owl placeholders (faint) -->290 <div class="ghost chest"></div>291 <div class="ghost owl"></div>292 293 <div class="node n4">294 <svg viewBox="0 0 24 24"><path d="M7 11V9a5 5 0 1 1 10 0v2h1v9H6v-9zM9 9a3 3 0 1 1 6 0v2H9z"/></svg>295 </div>296 <div class="node n5">297 <svg viewBox="0 0 24 24"><path d="M7 11V9a5 5 0 1 1 10 0v2h1v9H6v-9zM9 9a3 3 0 1 1 6 0v2H9z"/></svg>298 </div>299 300 <!-- Bottom navigation -->301 <div class="bottom-bar">302 <div class="tab active">303 <svg viewBox="0 0 24 24">304 <path fill="#ff5252" d="M12 3l9 7v2H3V10z"/>305 <path fill="#ffd33b" d="M5 12h14v9H5z"/>306 </svg>307 </div>308 <div class="tab">309 <svg viewBox="0 0 24 24">310 <path fill="#e1a56d" d="M12 2l7 6v12H5V8z"/>311 <path fill="#c98648" d="M12 7l4 3v10H8V10z"/>312 </svg>313 </div>314 <div class="tab">315 <svg viewBox="0 0 24 24">316 <circle cx="12" cy="8" r="4" fill="#b77ad2"/>317 <path d="M4 22c1-5 6-6 8-6s7 1 8 6" fill="#f7c59f"/>318 </svg>319 </div>320 <div class="tab">321 <svg viewBox="0 0 24 24">322 <rect x="3" y="7" width="18" height="12" fill="#ffc82e"></rect>323 <rect x="3" y="7" width="18" height="4" fill="#b78300"></rect>324 <rect x="8" y="12" width="8" height="6" fill="#8c5a00"></rect>325 </svg>326 </div>327 <div class="tab">328 <svg viewBox="0 0 24 24">329 <path d="M12 3c3 0 5 2 5 5v2l3 3v3H4v-3l3-3V8c0-3 2-5 5-5z" fill="#ffbe19"/>330 <circle cx="12" cy="20" r="2" fill="#ff9f00"></circle>331 </svg>332 </div>333 </div>334 335 <div class="home-indicator"></div>336</div>337</body>338</html>