GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>HelloTalk Profile 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: #ffffff;13 border-radius: 24px;14 box-shadow: 0 2px 8px rgba(0,0,0,0.08);15 }16 /* Status bar */17 .status-bar {18 height: 90px;19 display: flex;20 align-items: center;21 justify-content: space-between;22 padding: 0 36px;23 color: #212121;24 font-weight: 600;25 font-size: 40px;26 }27 .status-left { display: flex; align-items: center; gap: 22px; }28 .status-right { display: flex; align-items: center; gap: 28px; }29 .icon {30 width: 40px; height: 40px;31 }32 /* Header small badges */33 .new-badge {34 position: absolute;35 top: 105px;36 left: 26px;37 background: #ff7aa5;38 color: #fff;39 font-weight: 700;40 font-size: 28px;41 padding: 12px 18px;42 border-radius: 18px;43 display: flex;44 align-items: center;45 gap: 12px;46 }47 .profile-wrap {48 margin-top: 40px;49 padding: 0 36px;50 }51 .top-actions {52 position: absolute;53 right: 36px;54 top: 140px;55 display: flex;56 gap: 28px;57 }58 .action-btn {59 width: 72px;60 height: 72px;61 border-radius: 24px;62 background: #f5f5f5;63 display: flex; align-items: center; justify-content: center;64 position: relative;65 }66 .dot {67 position: absolute;68 width: 16px;69 height: 16px;70 background: #ff4d4f;71 border-radius: 50%;72 right: 6px;73 top: 6px;74 }75 /* Profile header */76 .profile-row {77 display: flex;78 align-items: center;79 gap: 28px;80 }81 .avatar {82 width: 160px; height: 160px;83 background: #3a4550;84 color: #fff;85 border-radius: 50%;86 display: flex; align-items: center; justify-content: center;87 font-size: 80px; font-weight: 700;88 border: 6px solid #e0e0e0;89 }90 .name-block { flex: 1; }91 .name-line {92 display: flex; align-items: center; gap: 16px;93 font-size: 48px; font-weight: 700; color: #212121;94 }95 .vip-tag {96 background: #ececec; color: #6b6b6b;97 border-radius: 14px; font-size: 26px; padding: 8px 14px; border: 1px solid #d0d0d0;98 }99 .lang-line { margin-top: 8px; display: flex; align-items: center; gap: 16px; }100 .lang-chip { font-size: 28px; color: #2b2b2b; border-bottom: 4px solid #7ed321; padding-bottom: 2px; }101 .handle { font-size: 28px; color: #7a7a7a; margin-top: 4px; }102 .blue-bubble {103 margin-top: 12px;104 width: 650px;105 background: #4d86ff;106 color: #fff;107 border-radius: 22px;108 padding: 22px 24px;109 font-size: 34px;110 box-shadow: 0 6px 12px rgba(77,134,255,0.25);111 }112 /* Counters */113 .counters {114 display: grid;115 grid-template-columns: repeat(4, 1fr);116 margin-top: 38px;117 padding: 0 36px;118 gap: 8px;119 }120 .counter {121 text-align: center;122 color: #2b2b2b;123 }124 .counter .num { font-size: 44px; font-weight: 700; }125 .counter .label { font-size: 30px; color: #777; margin-top: 8px; }126 .counter .notif {127 display: inline-block; width: 28px; height: 28px; background: #ff4d4f; border-radius: 50%; margin-left: 10px;128 }129 /* Promo card */130 .promo-card {131 margin: 34px 36px 0 36px;132 height: 480px;133 border-radius: 28px;134 padding: 34px;135 background: linear-gradient(180deg, #ffe4ec 0%, #fff4e3 100%);136 position: relative;137 box-shadow: inset 0 0 0 1px #f0d7d7;138 }139 .promo-title {140 font-size: 42px; font-weight: 800; color: #ff3b6b;141 display: flex; align-items: center; gap: 14px;142 }143 .promo-sub {144 margin-top: 22px;145 font-size: 36px; color: #333;146 line-height: 1.35;147 max-width: 880px;148 }149 .time-pill {150 position: absolute; right: 34px; top: 260px;151 background: #fff;152 border: 2px solid #ff7aa5;153 color: #ff7aa5;154 font-weight: 700;155 font-size: 30px;156 padding: 10px 18px;157 border-radius: 18px;158 }159 .promo-bottom {160 position: absolute; left: 34px; right: 34px; bottom: 28px;161 background: #ff597c;162 color: #fff;163 height: 120px;164 border-radius: 60px;165 display: flex; align-items: center; justify-content: center;166 font-size: 44px; font-weight: 800;167 box-shadow: 0 8px 18px rgba(255,89,124,0.35);168 }169 /* Section title */170 .section-title {171 font-size: 52px; font-weight: 800; color: #212121;172 padding: 40px 36px 18px 36px;173 }174 /* Feature cards */175 .feature-cards {176 margin: 0 36px;177 display: grid;178 grid-template-columns: 1fr 1fr 1fr;179 gap: 26px;180 }181 .feature-card {182 height: 220px;183 border-radius: 26px;184 background: #f3f8f4;185 box-shadow: inset 0 0 0 1px #dfe6e0;186 padding: 26px;187 display: flex; flex-direction: column; justify-content: center;188 }189 .feature-card:nth-child(2) { background: #f4f2ff; }190 .feature-card:nth-child(3) { background: #f8fbff; }191 .feature-title { font-size: 40px; font-weight: 800; color: #2b2b2b; }192 .feature-sub { font-size: 28px; color: #777; margin-top: 10px; }193 /* All courses banner */194 .courses-banner {195 margin: 26px 36px;196 height: 160px;197 border-radius: 26px;198 background: linear-gradient(180deg, #cfeefc 0%, #e8f7ff 100%);199 display: flex; align-items: center; justify-content: center;200 color: #2b7abf; font-size: 48px; font-weight: 800;201 box-shadow: inset 0 0 0 1px #bfe3f5;202 }203 /* Stats */204 .stats-wrap { margin: 0 36px; border-top: 1px solid #eee; padding-top: 24px; }205 .points { font-size: 36px; color: #333; }206 .icons-row {207 margin-top: 24px;208 display: grid;209 grid-template-columns: repeat(6, 1fr);210 gap: 28px;211 }212 .stat-item {213 height: 140px;214 border-radius: 22px;215 background: #fafafa;216 border: 1px solid #ececec;217 display: flex; flex-direction: column; align-items: center; justify-content: center;218 color: #757575;219 gap: 10px;220 }221 .stat-item svg { width: 44px; height: 44px; }222 .stat-count { font-size: 32px; color: #9e9e9e; }223 .joined {224 margin-top: 24px;225 font-size: 34px;226 color: #666;227 }228 /* Floating purple pill */229 .floating-pill {230 position: absolute;231 right: 26px;232 top: 1600px;233 width: 240px;234 height: 120px;235 background: linear-gradient(135deg, #9b7af6, #c28cff);236 border-radius: 60px;237 display: flex; align-items: center; justify-content: center;238 color: #fff; font-weight: 800; font-size: 36px;239 box-shadow: 0 12px 22px rgba(155,122,246,0.5);240 }241 /* Bottom nav */242 .bottom-nav {243 position: absolute;244 left: 0; right: 0; bottom: 0;245 height: 180px;246 background: #ffffff;247 border-top: 1px solid #eaeaea;248 display: grid; grid-template-columns: repeat(5, 1fr);249 padding-top: 18px;250 }251 .nav-item { display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 12px; color: #7a7a7a; font-size: 28px; }252 .nav-icon {253 width: 84px; height: 84px; border-radius: 28px; background: #f5f5f5; display: flex; align-items: center; justify-content: center;254 }255 .nav-item.active { color: #4d86ff; }256 .nav-item.active .nav-icon { background: #e8f0ff; }257 /* Misc */258 .small-flag {259 width: 30px; height: 20px; border: 1px solid #bdbdbd; background: #E0E0E0; display: inline-flex; align-items:center; justify-content:center; font-size: 16px; color:#757575; margin-left: 8px;260 }261</style>262</head>263<body>264<div id="render-target">265 266 <!-- Status bar -->267 <div class="status-bar">268 <div class="status-left">269 <div>12:31</div>270 <svg class="icon" viewBox="0 0 24 24">271 <path d="M2 5h20v14H2z" fill="none" stroke="#424242" stroke-width="2"/>272 <path d="M2 5l10 8 10-8" fill="none" stroke="#424242" stroke-width="2"/>273 </svg>274 </div>275 <div class="status-right">276 <svg class="icon" viewBox="0 0 24 24">277 <path d="M2 18c4-5 16-5 20 0" fill="none" stroke="#424242" stroke-width="2"/>278 <circle cx="12" cy="6" r="3" fill="none" stroke="#424242" stroke-width="2"/>279 </svg>280 <svg class="icon" viewBox="0 0 24 24">281 <rect x="2" y="5" width="18" height="14" fill="none" stroke="#424242" stroke-width="2"/>282 <rect x="21" y="9" width="2" height="6" fill="#424242"/>283 </svg>284 </div>285 </div>286 287 <!-- New badge -->288 <div class="new-badge">289 <span>NEW</span>290 <div style="width:28px;height:28px;border-radius:8px;background:#ffbfd2;"></div>291 </div>292 293 <!-- Top actions (share + settings) -->294 <div class="top-actions">295 <div class="action-btn">296 <svg width="34" height="34" viewBox="0 0 24 24">297 <path d="M4 12h10" stroke="#5f6368" stroke-width="2" fill="none"/>298 <path d="M10 6l6 6-6 6" stroke="#5f6368" stroke-width="2" fill="none"/>299 </svg>300 <div class="dot"></div>301 </div>302 <div class="action-btn">303 <svg width="34" height="34" viewBox="0 0 24 24">304 <circle cx="12" cy="12" r="4" stroke="#5f6368" stroke-width="2" fill="none"/>305 <path d="M12 2v4M12 18v4M2 12h4M18 12h4M4.6 4.6l2.8 2.8M16.6 16.6l2.8 2.8M19.4 4.6l-2.8 2.8M4.6 19.4l2.8-2.8" stroke="#5f6368" stroke-width="2"/>306 </svg>307 </div>308 </div>309 310 <!-- Profile main -->311 <div class="profile-wrap">312 <div class="profile-row">313 <div class="avatar">C</div>314 <div class="name-block">315 <div class="name-line">316 <div>DBW</div>317 <div class="vip-tag">VIP</div>318 </div>319 <div class="lang-line">320 <div class="lang-chip">EN</div>321 <div class="lang-chip">IT</div>322 <div class="small-flag">🇺🇸</div>323 </div>324 <div class="handle">@yo_cerebrarese10</div>325 <div class="blue-bubble">Set your personalized profile cover ✨</div>326 </div>327 </div>328 </div>329 330 <!-- Counters -->331 <div class="counters">332 <div class="counter">333 <div class="num">1</div>334 <div class="label">Following</div>335 </div>336 <div class="counter">337 <div class="num">1</div>338 <div class="label">Followers</div>339 </div>340 <div class="counter">341 <div class="num">0</div>342 <div class="label">Moments</div>343 </div>344 <div class="counter">345 <div class="num">7<span class="notif"></span></div>346 <div class="label">Visitors</div>347 </div>348 </div>349 350 <!-- Promo card -->351 <div class="promo-card">352 <div class="promo-title">353 <svg width="34" height="34" viewBox="0 0 24 24">354 <path d="M12 2l3 7 7 1-5 5 2 7-7-4-7 4 2-7-5-5 7-1z" fill="none" stroke="#ff3b6b" stroke-width="2"/>355 </svg>356 <span>Unlimited translation & captions</span>357 </div>358 <div class="promo-sub">359 No language barriers! Instant translation across our app.360 </div>361 <div class="time-pill">Time remaining 08:58</div>362 <div class="promo-bottom">Last chance! 25% OFF VIP</div>363 </div>364 365 <!-- Learning Statistics -->366 <div class="section-title">Learning Statistics</div>367 368 <div class="feature-cards">369 <div class="feature-card">370 <div class="feature-title">Vocabulary</div>371 <div class="feature-sub">Game-like vocab learning</div>372 </div>373 <div class="feature-card">374 <div class="feature-title">Audio & Video</div>375 <div class="feature-sub">Listen to whatever you like!</div>376 </div>377 <div class="feature-card">378 <div class="feature-title">Classes</div>379 <div class="feature-sub">Group and private</div>380 </div>381 </div>382 383 <div class="courses-banner">All Courses (100+)</div>384 385 <div class="stats-wrap">386 <div class="points">Total points: <span style="color:#4d86ff;font-weight:800;">0</span></div>387 388 <div class="icons-row">389 <div class="stat-item">390 <svg viewBox="0 0 24 24">391 <path d="M3 6h18v12H3z" fill="none" stroke="#9e9e9e" stroke-width="2"/>392 <path d="M3 6l9 6 9-6" fill="none" stroke="#9e9e9e" stroke-width="2"/>393 </svg>394 <div class="stat-count">0</div>395 </div>396 <div class="stat-item">397 <svg viewBox="0 0 24 24">398 <path d="M4 18l7-12 7 12" fill="none" stroke="#9e9e9e" stroke-width="2"/>399 <path d="M3 18h18" fill="none" stroke="#9e9e9e" stroke-width="2"/>400 </svg>401 <div class="stat-count">0</div>402 </div>403 <div class="stat-item">404 <svg viewBox="0 0 24 24">405 <path d="M6 12h12M6 6h12M6 18h12" stroke="#9e9e9e" stroke-width="2"/>406 <path d="M4 12l2 2 2-2" stroke="#9e9e9e" stroke-width="2" fill="none"/>407 </svg>408 <div class="stat-count">0</div>409 </div>410 <div class="stat-item">411 <svg viewBox="0 0 24 24">412 <rect x="4" y="5" width="16" height="14" fill="none" stroke="#9e9e9e" stroke-width="2"/>413 <path d="M8 9h8M8 13h6" stroke="#9e9e9e" stroke-width="2"/>414 </svg>415 <div class="stat-count">0</div>416 </div>417 <div class="stat-item">418 <svg viewBox="0 0 24 24">419 <rect x="3" y="6" width="14" height="12" fill="none" stroke="#9e9e9e" stroke-width="2"/>420 <path d="M19 10v4l4 2v-8z" fill="none" stroke="#9e9e9e" stroke-width="2"/>421 </svg>422 <div class="stat-count">0</div>423 </div>424 <div class="stat-item">425 <svg viewBox="0 0 24 24">426 <rect x="3" y="6" width="14" height="12" fill="none" stroke="#9e9e9e" stroke-width="2"/>427 <path d="M7 9h6v6H7z" fill="none" stroke="#9e9e9e" stroke-width="2"/>428 <path d="M20 10v8" stroke="#9e9e9e" stroke-width="2"/>429 </svg>430 <div class="stat-count">0</div>431 </div>432 </div>433 434 <div class="joined">Joined 4 days ago, studied for <span style="color:#4d86ff;font-weight:700;">1</span> day</div>435 </div>436 437 <div class="floating-pill">VIP</div>438 439 <!-- Bottom navigation -->440 <div class="bottom-nav">441 <div class="nav-item">442 <div class="nav-icon">443 <svg width="42" height="42" viewBox="0 0 24 24">444 <circle cx="12" cy="12" r="9" fill="none" stroke="#777" stroke-width="2"/>445 <circle cx="12" cy="12" r="3" fill="#777"/>446 </svg>447 </div>448 <div>HelloTalk</div>449 </div>450 <div class="nav-item">451 <div class="nav-icon">452 <svg width="42" height="42" viewBox="0 0 24 24">453 <path d="M4 6h16v12H4z" fill="none" stroke="#777" stroke-width="2"/>454 <path d="M4 6l6 5" stroke="#777" stroke-width="2"/>455 </svg>456 </div>457 <div>Moments</div>458 </div>459 <div class="nav-item">460 <div class="nav-icon">461 <svg width="42" height="42" viewBox="0 0 24 24">462 <path d="M12 2l8 7-8 7-8-7z" fill="none" stroke="#777" stroke-width="2"/>463 </svg>464 </div>465 <div>Connect</div>466 </div>467 <div class="nav-item">468 <div class="nav-icon">469 <svg width="42" height="42" viewBox="0 0 24 24">470 <rect x="5" y="4" width="14" height="16" fill="none" stroke="#777" stroke-width="2"/>471 <polygon points="9,10 15,12 9,14" fill="#777"/>472 </svg>473 </div>474 <div>Live</div>475 </div>476 <div class="nav-item active">477 <div class="nav-icon">478 <svg width="42" height="42" viewBox="0 0 24 24">479 <circle cx="12" cy="8" r="4" fill="none" stroke="#4d86ff" stroke-width="2"/>480 <path d="M4 20c2-4 6-6 8-6s6 2 8 6" fill="none" stroke="#4d86ff" stroke-width="2"/>481 </svg>482 </div>483 <div>Me</div>484 </div>485 </div>486 487</div>488</body>489</html>