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 width: 1080px; height: 2400px; position: relative; overflow: hidden;11 background: #FFFFFF;12 color: #333;13 }14 .status-bar {15 height: 120px; display: flex; align-items: center; justify-content: space-between;16 padding: 0 40px; color: #333; font-weight: 600; font-size: 40px;17 }18 .status-right { display: flex; gap: 26px; align-items: center; color: #555; }19 .icon { width: 48px; height: 48px; display: inline-block; }20 .top-actions {21 position: absolute; right: 36px; top: 170px; display: flex; gap: 28px; align-items: center;22 }23 .action-btn { width: 76px; height: 76px; border-radius: 38px; display: flex; align-items: center; justify-content: center; background: #fff; box-shadow: 0 4px 10px rgba(0,0,0,0.06); }24 .new-badge {25 position: absolute; left: 44px; top: 220px; display: flex; align-items: center; gap: 16px;26 }27 .pill { background: #FF5C84; color: #fff; padding: 10px 18px; border-radius: 20px; font-size: 28px; font-weight: 700; }28 .img-ph {29 background: #E0E0E0; border: 1px solid #BDBDBD; color: #757575;30 display: flex; align-items: center; justify-content: center; text-align: center;31 }32 .header {33 margin-top: 290px; padding: 0 44px; display: flex; align-items: center; gap: 28px;34 }35 .avatar {36 width: 160px; height: 160px; border-radius: 80px; background: #A57B69; display: flex; align-items: center; justify-content: center;37 color: #fff; font-size: 80px; font-weight: 700;38 }39 .profile-info { flex: 1; }40 .name-row { display: flex; align-items: center; gap: 18px; }41 .name { font-size: 54px; font-weight: 700; color: #2F3136; }42 .vip {43 font-size: 28px; color: #777; background: #F0F0F0; border-radius: 16px; padding: 6px 16px; display: inline-flex; align-items: center; gap: 8px;44 }45 .lang-row { margin-top: 12px; display: flex; gap: 16px; align-items: center; }46 .lang-chip { font-size: 28px; color: #333; background: #F7F7F7; border-radius: 12px; padding: 4px 12px; border: 1px solid #E0E0E0; }47 .handle { margin-top: 10px; font-size: 28px; color: #8A8A8A; }48 .edit-icon { width: 40px; height: 40px; border: 1px solid #D0D0D0; border-radius: 8px; display: flex; align-items: center; justify-content: center; margin-left: 10px; }49 .stats {50 margin-top: 40px; padding: 10px 44px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; text-align: center;51 }52 .stat-item .num { font-size: 50px; font-weight: 700; color: #2F3136; }53 .stat-item .label { font-size: 28px; color: #8A8A8A; margin-top: 10px; }54 .promo {55 margin: 40px 36px 0; border-radius: 36px; padding: 36px; background: linear-gradient(135deg, #FFD8E2 0%, #FFF4D5 100%);56 box-shadow: 0 6px 20px rgba(0,0,0,0.06);57 }58 .promo-title { display: flex; align-items: center; gap: 16px; font-size: 44px; font-weight: 800; color: #FF5C84; }59 .promo-sub { margin-top: 16px; font-size: 34px; color: #555; }60 .promo-dots { margin: 22px 0; height: 16px; display: flex; align-items: center; gap: 8px; }61 .promo-dots span { width: 14px; height: 14px; background: #E7C2CD; border-radius: 7px; display: inline-block; }62 .promo-dots span.active { background: #fff; box-shadow: 0 0 0 2px rgba(255,255,255,0.8); }63 .cta {64 margin-top: 24px; background: linear-gradient(180deg, #FF729A 0%, #E04F7D 100%); color: #fff; font-weight: 800;65 font-size: 40px; height: 120px; border-radius: 60px; display: flex; align-items: center; justify-content: center;66 }67 .section-title { margin: 36px 44px 18px; font-size: 44px; font-weight: 800; color: #2F3136; }68 .learn-card {69 margin: 0 36px; background: #F7F7F7; border-radius: 26px; padding: 26px; box-shadow: 0 6px 16px rgba(0,0,0,0.04) inset;70 }71 .tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }72 .tile {73 border-radius: 22px; padding: 24px; min-height: 160px;74 }75 .tile h4 { margin: 0; font-size: 36px; font-weight: 800; }76 .tile p { margin: 8px 0 0; font-size: 26px; color: #666; }77 .tile.green { background: #DFF1D6; }78 .tile.purple { background: #EADCF9; }79 .tile.blue { background: #E0F0FF; }80 .courses-banner {81 margin-top: 20px; border-radius: 22px; overflow: hidden; background: linear-gradient(135deg, #9ED9FF 0%, #D3EEFF 100%); padding: 22px; display: flex; align-items: center; gap: 18px;82 }83 .courses-banner h3 { margin: 0; font-size: 42px; font-weight: 900; color: #2176B8; }84 .points { margin: 32px 44px 0; font-size: 32px; color: #666; }85 .points .blue { color: #3A84FF; font-weight: 700; }86 .mini-stats {87 margin: 20px 44px; display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; text-align: center; color: #9E9E9E;88 }89 .mini-stats .icon { width: 54px; height: 54px; margin: 0 auto 10px; }90 .mini-stats .val { font-size: 28px; }91 .foot-note { margin: 18px 44px; font-size: 32px; color: #666; }92 .foot-note .blue { color: #3A84FF; font-weight: 700; }93 .tabbar {94 position: absolute; left: 0; right: 0; bottom: 80px; height: 160px; background: #fff;95 display: grid; grid-template-columns: repeat(5, 1fr); box-shadow: 0 -6px 20px rgba(0,0,0,0.06);96 }97 .tab-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: #9E9E9E; font-size: 26px; position: relative; }98 .tab-item .icon { width: 64px; height: 64px; }99 .tab-item.active { color: #6E7BFF; }100 .badge {101 position: absolute; top: 16px; right: 140px;102 background: #FF4D4D; color: #fff; border-radius: 16px; font-size: 24px; padding: 4px 10px;103 }104 .dot {105 position: absolute; top: 20px; right: 160px; width: 16px; height: 16px; background: #FF4D4D; border-radius: 50%;106 }107 .home-indicator {108 position: absolute; left: 50%; transform: translateX(-50%); bottom: 20px; width: 300px; height: 10px; background: #000; opacity: 0.2; border-radius: 5px;109 }110</style>111</head>112<body>113<div id="render-target">114 <!-- Status bar -->115 <div class="status-bar">116 <div>1:43</div>117 <div class="status-right">118 <!-- simple status icons -->119 <svg class="icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="none" stroke="#666" stroke-width="2"/></svg>120 <svg class="icon" viewBox="0 0 24 24"><path d="M3 12h18" stroke="#666" stroke-width="2"/><path d="M12 3v18" stroke="#666" stroke-width="2"/></svg>121 <svg class="icon" viewBox="0 0 24 24"><path d="M12 2l9 9-9 11-9-11z" fill="none" stroke="#666" stroke-width="2"/></svg>122 <svg class="icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="none" stroke="#666" stroke-width="2"/><circle cx="12" cy="12" r="3" fill="#666"/></svg>123 <svg class="icon" viewBox="0 0 24 24"><path d="M17 2h-6a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h6a3 3 0 0 0 3-3V5a3 3 0 0 0-3-3z" fill="none" stroke="#666" stroke-width="2"/></svg>124 </div>125 </div>126 127 <!-- Share and settings actions -->128 <div class="top-actions">129 <div class="action-btn">130 <!-- share icon -->131 <svg class="icon" viewBox="0 0 24 24">132 <path d="M4 14c0-3 3-5 6-5h4" fill="none" stroke="#444" stroke-width="2"/>133 <path d="M11 6l6 4-6 4" fill="none" stroke="#444" stroke-width="2"/>134 </svg>135 </div>136 <div class="action-btn">137 <!-- hex gear-ish -->138 <svg class="icon" viewBox="0 0 24 24">139 <path d="M12 2l8 4v8l-8 4-8-4V6z" fill="none" stroke="#444" stroke-width="2"/>140 <circle cx="12" cy="12" r="3" fill="#444"/>141 </svg>142 </div>143 </div>144 145 <!-- "NEW" badge with calendar-heart image placeholder -->146 <div class="new-badge">147 <div class="pill">NEW</div>148 <div class="img-ph" style="width: 86px; height: 86px; border-radius: 18px;">[IMG: Calendar Heart]</div>149 </div>150 151 <!-- Header / Profile -->152 <div class="header">153 <div class="avatar">C</div>154 <div class="profile-info">155 <div class="name-row">156 <div class="name">Cerebra Research</div>157 <div class="vip">158 <svg width="28" height="28" viewBox="0 0 24 24"><path d="M3 18l4-10 5 5 5-5 4 10H3z" fill="#C0C0C0"/></svg>159 VIP160 </div>161 </div>162 <div class="lang-row">163 <div class="lang-chip">EN</div>164 <div class="lang-chip">DE</div>165 <div class="edit-icon">166 <svg width="22" height="22" viewBox="0 0 24 24"><path d="M4 20l4-1 9-9-3-3-9 9-1 4z" fill="none" stroke="#777" stroke-width="2"/></svg>167 </div>168 </div>169 <div class="handle">@yo_cerebraresear</div>170 </div>171 </div>172 173 <!-- Stats -->174 <div class="stats">175 <div class="stat-item">176 <div class="num">1</div>177 <div class="label">Following</div>178 </div>179 <div class="stat-item">180 <div class="num">1</div>181 <div class="label">Followers</div>182 </div>183 <div class="stat-item">184 <div class="num">0</div>185 <div class="label">Moments</div>186 </div>187 <div class="stat-item">188 <div class="num">0</div>189 <div class="label">Visitors</div>190 </div>191 </div>192 193 <!-- Promo Card -->194 <div class="promo">195 <div class="promo-title">196 <div class="img-ph" style="width: 52px; height: 52px; border-radius: 26px;">[IMG]</div>197 <span>Unlimited Chat</span>198 </div>199 <div class="promo-sub">No time limits! Chat in Live and Voiceroom any time.</div>200 <div class="promo-dots">201 <span></span><span></span><span></span><span></span><span></span><span class="active"></span><span></span><span></span>202 </div>203 <div class="cta">Last chance! 25% OFF VIP</div>204 </div>205 206 <!-- Learning Statistics -->207 <div class="section-title">Learning Statistics</div>208 <div class="learn-card">209 <div class="tiles">210 <div class="tile green">211 <h4>Vocabulary</h4>212 <p>Game-like vocab learning</p>213 </div>214 <div class="tile purple">215 <h4>Audio & Video</h4>216 <p>Listen to whatever you like!</p>217 </div>218 <div class="tile blue">219 <h4>Classes</h4>220 <p>Group and private</p>221 </div>222 </div>223 224 <div class="courses-banner">225 <div class="img-ph" style="width: 160px; height: 110px; border-radius: 18px;">[IMG: Open Book]</div>226 <h3>All Courses (100+)</h3>227 </div>228 </div>229 230 <!-- Points -->231 <div class="points">Total points: <span class="blue">0</span></div>232 233 <!-- Mini stats icons -->234 <div class="mini-stats">235 <div>236 <svg class="icon" viewBox="0 0 24 24"><path d="M4 12h16M12 4v16" stroke="#BDBDBD" stroke-width="2"/></svg>237 <div class="val">0</div>238 </div>239 <div>240 <svg class="icon" viewBox="0 0 24 24"><path d="M3 7h18M3 12h18M3 17h10" stroke="#BDBDBD" stroke-width="2"/></svg>241 <div class="val">0</div>242 </div>243 <div>244 <svg class="icon" viewBox="0 0 24 24"><path d="M5 12h14M12 5l7 7-7 7" stroke="#BDBDBD" stroke-width="2"/></svg>245 <div class="val">0</div>246 </div>247 <div>248 <svg class="icon" viewBox="0 0 24 24"><path d="M6 6h12v12H6z" fill="none" stroke="#BDBDBD" stroke-width="2"/><path d="M10 9h8M10 13h8" stroke="#BDBDBD" stroke-width="2"/></svg>249 <div class="val">0</div>250 </div>251 <div>252 <svg class="icon" viewBox="0 0 24 24"><path d="M5 5h14v14H5z" fill="none" stroke="#BDBDBD" stroke-width="2"/><path d="M7 9h10M7 13h10" stroke="#BDBDBD" stroke-width="2"/></svg>253 <div class="val">0</div>254 </div>255 <div>256 <svg class="icon" viewBox="0 0 24 24"><path d="M5 7h14v10H5z" fill="none" stroke="#BDBDBD" stroke-width="2"/><path d="M9 10l6 3-6 3z" fill="#BDBDBD"/></svg>257 <div class="val">0</div>258 </div>259 </div>260 261 <div class="foot-note">Joined for <span class="blue">1</span> day, studied for <span class="blue">1</span> day</div>262 263 <!-- Bottom Tab Bar -->264 <div class="tabbar">265 <div class="tab-item">266 <svg class="icon" viewBox="0 0 24 24">267 <path d="M4 5h16v11H14l-4 3v-3H4z" fill="none" stroke="#9E9E9E" stroke-width="2"/>268 </svg>269 <div class="badge">3</div>270 <div>HelloTalk</div>271 </div>272 <div class="tab-item">273 <svg class="icon" viewBox="0 0 24 24">274 <circle cx="12" cy="12" r="7" fill="none" stroke="#9E9E9E" stroke-width="2"/>275 <ellipse cx="12" cy="12" rx="11" ry="5" fill="none" stroke="#9E9E9E" stroke-width="2"/>276 </svg>277 <div>Moments</div>278 </div>279 <div class="tab-item">280 <svg class="icon" viewBox="0 0 24 24">281 <circle cx="8" cy="10" r="3" fill="none" stroke="#9E9E9E" stroke-width="2"/>282 <circle cx="16" cy="10" r="3" fill="none" stroke="#9E9E9E" stroke-width="2"/>283 <path d="M4 18c2-3 6-3 8-3s6 0 8 3" fill="none" stroke="#9E9E9E" stroke-width="2"/>284 </svg>285 <div>Connect</div>286 </div>287 <div class="tab-item">288 <svg class="icon" viewBox="0 0 24 24">289 <rect x="4" y="6" width="16" height="12" fill="none" stroke="#9E9E9E" stroke-width="2"/>290 <path d="M10 10v4l4-2z" fill="#9E9E9E"/>291 </svg>292 <div class="dot"></div>293 <div>Live</div>294 </div>295 <div class="tab-item active">296 <svg class="icon" viewBox="0 0 24 24">297 <circle cx="12" cy="9" r="4" fill="none" stroke="#6E7BFF" stroke-width="2"/>298 <path d="M4 20c2-4 6-5 8-5s6 1 8 5" fill="none" stroke="#6E7BFF" stroke-width="2"/>299 </svg>300 <div>Me</div>301 </div>302 </div>303 304 <div class="home-indicator"></div>305</div>306</body>307</html>