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>Profile UI Mock</title>7<style>8 body { margin:0; padding:0; background:transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }9 #render-target {10 position: relative;11 overflow: hidden;12 width: 1080px;13 height: 2400px;14 background:#F6F7F9;15 box-sizing: border-box;16 }17 18 /* Status bar */19 .status {20 height: 120px;21 background:#ffffff;22 display:flex;23 align-items:center;24 justify-content:space-between;25 padding:0 36px;26 font-size:36px;27 color:#333;28 box-shadow: 0 1px 0 rgba(0,0,0,0.06);29 }30 .status .right-icons { display:flex; gap:26px; align-items:center; color:#555; }31 .icon { width:48px; height:48px; display:inline-block; }32 .icon-btn { width:80px; height:80px; border-radius:40px; display:flex; align-items:center; justify-content:center; }33 34 /* NEW sticker */35 .new-sticker {36 position:absolute; left:36px; top:150px;37 background:#FF6C87; color:#fff; font-weight:700;38 padding:10px 18px; border-radius:18px;39 font-size:28px; box-shadow:0 6px 14px rgba(255,108,135,0.35);40 }41 42 /* Profile header */43 .profile {44 background:#fff;45 padding:36px 40px 24px 40px;46 }47 .profile-top {48 display:flex; align-items:center; justify-content:space-between;49 }50 .avatar {51 width:140px; height:140px; border-radius:70px;52 background:#E0E0E0; border:1px solid #BDBDBD;53 display:flex; align-items:center; justify-content:center;54 font-size:72px; color:#757575; font-weight:600;55 margin-right:28px;56 }57 .name-area { flex:1; }58 .name-row { display:flex; align-items:center; gap:18px; }59 .name-row .name { font-size:56px; color:#333; font-weight:800; letter-spacing:0.3px; }60 .vip {61 display:inline-flex; align-items:center; gap:8px;62 background:#F1F3F5; color:#666; border-radius:16px;63 padding:8px 14px; font-size:26px; font-weight:700;64 }65 .lang-row { margin-top:8px; display:flex; align-items:center; gap:16px; font-size:28px; color:#4c4c4c; }66 .flag {67 width:30px; height:30px; background:#E0E0E0; border:1px solid #BDBDBD; border-radius:50%;68 display:inline-flex; align-items:center; justify-content:center; color:#757575; font-size:18px;69 }70 .username { margin-top:6px; font-size:28px; color:#8a8a8a; }71 .profile-actions { display:flex; align-items:center; gap:22px; }72 .square-btn {73 width:80px; height:80px; border-radius:20px; background:#F7F7F7;74 display:flex; align-items:center; justify-content:center; border:1px solid #E6E6E6;75 }76 77 /* Stats */78 .stats {79 margin-top:30px;80 display:grid; grid-template-columns: repeat(4, 1fr);81 border-top:1px solid #eee;82 padding-top:24px;83 }84 .stat {85 text-align:center;86 color:#111;87 }88 .stat .num { font-size:52px; font-weight:800; }89 .stat .label { font-size:28px; color:#9a9a9a; margin-top:6px; }90 91 /* Promo card */92 .promo {93 margin:30px 28px 12px 28px;94 background: linear-gradient(135deg,#FFE6D1,#FFF4CC);95 border-radius:28px;96 padding:36px;97 box-shadow:0 10px 20px rgba(255,180,150,0.25);98 }99 .promo h3 { margin:0; font-size:44px; color:#FF5C83; font-weight:800; }100 .promo p { margin:16px 0 22px 0; font-size:30px; color:#555; }101 .dots { display:flex; gap:10px; margin:12px 0 24px 0; }102 .dot { width:16px; height:16px; background:#F2D6CE; border-radius:8px; }103 .dot.active { background:#fff; border:1px solid #E8BFB1; }104 .promo-btn {105 background: #FF6C99;106 color:#fff; font-size:36px; font-weight:800; text-align:center;107 padding:26px 20px; border-radius:60px;108 }109 110 /* Section title */111 .section-title {112 margin:24px 36px 18px 36px;113 font-size:42px; font-weight:800; color:#333;114 }115 116 /* Learning card */117 .learning-card {118 margin:0 28px;119 background:#fff;120 border-radius:24px;121 box-shadow:0 1px 0 rgba(0,0,0,0.06);122 padding:24px;123 }124 .tiles { display:flex; gap:24px; }125 .tile {126 flex:1;127 border-radius:22px;128 padding:20px;129 min-height:160px;130 }131 .tile h4 { margin:0; font-size:32px; font-weight:800; color:#333; }132 .tile p { margin-top:6px; font-size:26px; color:#6f6f6f; }133 .tile-green { background:#E9F6E1; }134 .tile-purple { background:#EFE9FF; }135 .tile-blue { background:#EAF5FF; }136 .img-placeholder {137 width:100%; height:88px; margin-top:10px;138 background:#E0E0E0; border:1px solid #BDBDBD;139 display:flex; align-items:center; justify-content:center; color:#757575; font-size:24px; border-radius:12px;140 }141 .course-banner {142 margin-top:22px;143 height:120px;144 border-radius:20px;145 background:#CBE9FF;146 display:flex; align-items:center; justify-content:center;147 font-size:40px; font-weight:800; color:#167cc3;148 position:relative;149 }150 .course-banner .banner-img {151 position:absolute; left:18px; bottom:8px; width:180px; height:90px;152 background:#E0E0E0; border:1px solid #BDBDBD; color:#757575;153 display:flex; align-items:center; justify-content:center; border-radius:12px;154 font-size:22px;155 }156 157 /* Points */158 .points { margin:26px 28px 0 28px; background:#ffffff; border-radius:0 0 24px 24px; }159 .points-head { padding:22px 18px; border-top:1px solid #eee; font-size:30px; color:#777; }160 .points-head .blue { color:#2f7af8; font-weight:700; }161 .metric-row {162 display:flex; justify-content:space-around; padding:18px 12px 10px 12px; color:#9a9a9a;163 }164 .metric { text-align:center; }165 .metric svg { width:56px; height:56px; fill:#BEBEBE; }166 .metric .m-num { margin-top:12px; font-size:28px; color:#999; }167 .divider { height:1px; background:#eee; margin:16px 28px; }168 .joined { margin:0 36px; font-size:30px; color:#777; }169 .joined .blue { color:#2f7af8; }170 171 /* Floating pill */172 .floating-pill {173 position:absolute; right:0; top:1500px;174 width:220px; height:180px; border-radius:90px 0 0 90px;175 background: linear-gradient(135deg,#B592FF,#9E71FF);176 display:flex; align-items:center; justify-content:flex-end; padding-right:28px;177 box-shadow: -6px 12px 24px rgba(160,120,255,0.45);178 }179 .floating-pill .chev { width:34px; height:34px; border:2px solid #fff; border-radius:50%; color:#fff; display:flex; align-items:center; justify-content:center; font-weight:800; }180 .floating-pill .decor {181 position:absolute; left:16px; top:18px;182 width:120px; height:120px; background:#E0E0E0; border:1px solid #BDBDBD; border-radius:18px;183 display:flex; align-items:center; justify-content:center; color:#757575; font-size:22px;184 }185 186 /* Bottom navigation */187 .bottom-nav {188 position:absolute; left:0; right:0; bottom:0;189 height:180px; background:#fff; box-shadow:0 -4px 20px rgba(0,0,0,0.06);190 display:flex; justify-content:space-around; align-items:center;191 padding:0 20px;192 }193 .tab { text-align:center; color:#9c9c9c; font-size:26px; }194 .tab svg { width:56px; height:56px; fill:#BDBDBD; }195 .tab.active { color:#6B5BFF; }196 .tab.active svg { fill:#6B5BFF; }197 .badge {198 position:absolute; top:-8px; right:-12px; background:#FF5B6A; color:#fff; font-size:22px; padding:4px 10px; border-radius:24px;199 }200 201 /* Small edit icon near profile block */202 .edit-fab {203 position:absolute; right:40px; top:470px;204 width:70px; height:70px; border-radius:18px; border:1px solid #E6E6E6; background:#fff;205 display:flex; align-items:center; justify-content:center;206 }207</style>208</head>209<body>210<div id="render-target">211 212 <div class="status">213 <div>1:36</div>214 <div class="right-icons">215 <svg class="icon" viewBox="0 0 24 24"><path d="M3 12h10l-3 3M13 12l-3-3" stroke="#444" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>216 <svg class="icon" viewBox="0 0 24 24"><path d="M12 4l7 4v8l-7 4-7-4V8z" fill="#888"/></svg>217 <svg class="icon" viewBox="0 0 24 24"><path d="M9 18h6M10 6h4M5 12h14" stroke="#444" stroke-width="2" fill="none" stroke-linecap="round"/></svg>218 </div>219 </div>220 221 <div class="new-sticker">NEW</div>222 223 <div class="profile">224 <div class="profile-top">225 <div style="display:flex; align-items:center;">226 <div class="avatar">C</div>227 <div class="name-area">228 <div class="name-row">229 <div class="name">DBW</div>230 <div class="vip">231 <svg viewBox="0 0 24 24" width="24" height="24"><path d="M4 18h16l-2-9-4 3-4-3-2 9z" fill="#9AA1A8"/></svg>232 VIP233 </div>234 </div>235 <div class="lang-row">236 <span class="flag">US</span>237 <span>EN</span>238 <span>⇄</span>239 <span>IT</span>240 </div>241 <div class="username">@yo_cerebrarese10</div>242 </div>243 </div>244 <div class="profile-actions">245 <div class="square-btn">246 <svg viewBox="0 0 24 24" width="36" height="36"><path d="M14 9l5-5v7h-7l2-2zM5 5h6v2H7v10h10v-4h2v6H5z" fill="#888"/></svg>247 </div>248 <div class="square-btn">249 <svg viewBox="0 0 24 24" width="36" height="36"><path d="M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm8-3a8 8 0 1 1-16 0 8 8 0 0 1 16 0z" fill="#888"/></svg>250 </div>251 </div>252 </div>253 254 <div class="stats">255 <div class="stat">256 <div class="num">1</div>257 <div class="label">Following</div>258 </div>259 <div class="stat">260 <div class="num">1</div>261 <div class="label">Followers</div>262 </div>263 <div class="stat">264 <div class="num">0</div>265 <div class="label">Moments</div>266 </div>267 <div class="stat">268 <div class="num" style="color:#d9d9d9;">•</div>269 <div class="label">Visitors</div>270 </div>271 </div>272 </div>273 274 <div class="edit-fab">275 <svg viewBox="0 0 24 24" width="34" height="34"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04a1 1 0 0 0 0-1.41l-2.34-2.34a1 1 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z" fill="#888"/></svg>276 </div>277 278 <div class="promo">279 <h3>Unlimited translation & captions</h3>280 <p>No language barriers! Instant translation across our app.</p>281 <div class="dots">282 <div class="dot active"></div>283 <div class="dot"></div>284 <div class="dot"></div>285 <div class="dot"></div>286 <div class="dot"></div>287 </div>288 <div class="promo-btn">Last chance! 25% OFF VIP</div>289 </div>290 291 <div class="section-title">Learning Statistics</div>292 293 <div class="learning-card">294 <div class="tiles">295 <div class="tile tile-green">296 <h4>Vocabulary</h4>297 <p>Game-like vocab learning</p>298 <div class="img-placeholder">[IMG: Green vocab mascot]</div>299 </div>300 <div class="tile tile-purple">301 <h4>Audio & Video</h4>302 <p>Listen to whatever you like!</p>303 <div class="img-placeholder">[IMG: Purple headphones]</div>304 </div>305 <div class="tile tile-blue">306 <h4>Classes</h4>307 <p>Group and private</p>308 <div class="img-placeholder">[IMG: Class icon]</div>309 </div>310 </div>311 <div class="course-banner">312 All Courses (100+)313 <div class="banner-img">[IMG: Open book cloud]</div>314 </div>315 </div>316 317 <div class="points">318 <div class="points-head">Total points: <span class="blue">0</span></div>319 <div class="metric-row">320 <div class="metric">321 <svg viewBox="0 0 24 24"><path d="M4 6h8l-2 2h10v10H4z" /></svg>322 <div class="m-num">0</div>323 </div>324 <div class="metric">325 <svg viewBox="0 0 24 24"><path d="M9 16l-3-3 1.4-1.4L9 13.2l7.6-7.6L18 7l-9 9z"/></svg>326 <div class="m-num">0</div>327 </div>328 <div class="metric">329 <svg viewBox="0 0 24 24"><path d="M12 6v6h6M12 18a6 6 0 1 1 0-12" /></svg>330 <div class="m-num">0</div>331 </div>332 <div class="metric">333 <svg viewBox="0 0 24 24"><path d="M6 4h12v16l-6-3-6 3z"/></svg>334 <div class="m-num">0</div>335 </div>336 <div class="metric">337 <svg viewBox="0 0 24 24"><path d="M4 6h16v2H4zm0 4h10v2H4zm0 4h8v2H4z"/></svg>338 <div class="m-num">0</div>339 </div>340 <div class="metric">341 <svg viewBox="0 0 24 24"><path d="M4 18V6l14 6-14 6z"/></svg>342 <div class="m-num">0</div>343 </div>344 </div>345 <div class="divider"></div>346 <div class="joined">Joined for <span class="blue">1</span> day, studied for <span class="blue">1</span> day</div>347 </div>348 349 <div class="floating-pill">350 <div class="decor">[IMG: Purple promo]</div>351 <div class="chev>">></div>352 </div>353 354 <div class="bottom-nav">355 <div class="tab">356 <div style="position:relative; display:inline-block;">357 <svg viewBox="0 0 24 24"><path d="M12 4C7 4 4 7.5 4 12s3 8 8 8 8-3.5 8-8-3-8-8-8zm0 10a2 2 0 1 1 0-4 2 2 0 0 1 0 4z"/></svg>358 <div class="badge">4</div>359 </div>360 <div>HelloTalk</div>361 </div>362 <div class="tab">363 <svg viewBox="0 0 24 24"><path d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm0 9h6a8 8 0 0 1-6 7v-7z"/></svg>364 <div>Moments</div>365 </div>366 <div class="tab">367 <svg viewBox="0 0 24 24"><path d="M12 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8zm-7 8c0-3.3 3-6 7-6s7 2.7 7 6H5z"/></svg>368 <div>Connect</div>369 </div>370 <div class="tab">371 <svg viewBox="0 0 24 24"><path d="M8 5v14l11-7-11-7z"/></svg>372 <div>Live</div>373 </div>374 <div class="tab active">375 <svg viewBox="0 0 24 24"><path d="M12 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8zm-7 8c0-3.3 3-6 7-6s7 2.7 7 6H5z"/></svg>376 <div>Me</div>377 </div>378 </div>379 380</div>381</body>382</html>