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>UI Mock</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }9 #render-target {10 position: relative;11 width: 1080px;12 height: 2400px;13 overflow: hidden;14 background: #ffffff;15 border-radius: 36px;16 box-shadow: 0 8px 24px rgba(0,0,0,0.08);17 }18 19 /* Top status area */20 .status-bar {21 height: 140px;22 padding: 36px 40px 20px 40px;23 box-sizing: border-box;24 color: #222;25 }26 .status-row {27 display: flex;28 align-items: center;29 justify-content: space-between;30 }31 .status-left {32 display: flex;33 align-items: center;34 gap: 24px;35 font-weight: 600;36 font-size: 42px;37 }38 .status-icons {39 display: flex;40 align-items: center;41 gap: 28px;42 }43 .icon {44 width: 40px;45 height: 40px;46 color: #444;47 }48 .top-actions {49 position: absolute;50 right: 40px;51 top: 120px;52 display: flex;53 gap: 36px;54 align-items: center;55 }56 .action-btn {57 width: 84px;58 height: 84px;59 border-radius: 24px;60 display: flex;61 align-items: center;62 justify-content: center;63 background: #ffffff;64 box-shadow: 0 6px 16px rgba(0,0,0,0.08);65 }66 67 /* Gift sticker */68 .gift-sticker {69 position: absolute;70 left: 40px;71 top: 180px;72 width: 140px;73 height: 140px;74 background: #E0E0E0;75 border: 1px solid #BDBDBD;76 border-radius: 24px;77 display: flex;78 align-items: center;79 justify-content: center;80 color: #757575;81 font-weight: 600;82 }83 .new-tag {84 position: absolute;85 top: -18px;86 left: 10px;87 background: #FF5E7E;88 color: #fff;89 font-size: 28px;90 padding: 6px 10px;91 border-radius: 18px;92 }93 94 /* Promo header banner */95 .promo-area {96 margin: 240px 40px 0 40px;97 height: 260px;98 border-radius: 36px;99 background: linear-gradient(90deg, #f7d9d9, #fae7d1);100 position: relative;101 padding: 36px;102 box-sizing: border-box;103 }104 .promo-pill {105 position: absolute;106 left: 64px;107 right: 64px;108 top: 90px;109 height: 140px;110 border-radius: 90px;111 background: linear-gradient(90deg, #ff6a8e, #ff7588);112 display: flex;113 align-items: center;114 justify-content: center;115 color: #fff;116 font-weight: 800;117 font-size: 46px;118 letter-spacing: 0.5px;119 }120 .promo-dots {121 position: absolute;122 top: 36px;123 left: 0;124 right: 0;125 display: flex;126 justify-content: center;127 gap: 12px;128 }129 .promo-dot {130 width: 12px;131 height: 12px;132 background: rgba(255,255,255,0.9);133 border-radius: 50%;134 }135 136 /* Section title */137 .section-title {138 margin: 40px;139 margin-top: 36px;140 font-size: 54px;141 font-weight: 800;142 color: #222;143 }144 145 /* Card container */146 .card {147 margin: 0 40px;148 padding: 36px;149 background: #fff;150 border-radius: 36px;151 box-shadow: 0 8px 22px rgba(0,0,0,0.06);152 border: 1px solid #eee;153 }154 .soft-bg {155 background: #f4f5f7;156 padding-top: 24px;157 }158 159 /* Feature tiles */160 .feature-row {161 display: flex;162 gap: 28px;163 }164 .feature-tile {165 flex: 1;166 height: 180px;167 border-radius: 28px;168 padding: 26px;169 box-sizing: border-box;170 }171 .tile-green { background: #e8f6df; }172 .tile-purple { background: #efe8fb; }173 .tile-blue { background: #e8f0fb; }174 .tile-title {175 font-weight: 800;176 font-size: 40px;177 color: #333;178 }179 .tile-sub {180 margin-top: 10px;181 font-size: 28px;182 color: #7d8794;183 }184 .tile-icon {185 position: absolute;186 right: 24px;187 top: 24px;188 opacity: 0.9;189 }190 191 /* All Courses banner */192 .courses-banner {193 margin-top: 28px;194 height: 140px;195 border-radius: 30px;196 background: linear-gradient(90deg, #5cc6e8, #79c2f7);197 display: flex;198 align-items: center;199 justify-content: center;200 color: #0b4a64;201 font-size: 50px;202 font-weight: 900;203 letter-spacing: 0.5px;204 }205 206 /* Stats */207 .stats-line {208 margin-top: 38px;209 font-size: 36px;210 color: #7d8794;211 }212 .blue-link { color: #617BFF; font-weight: 700; }213 .metrics {214 display: flex;215 justify-content: space-between;216 margin-top: 34px;217 padding: 0 10px;218 }219 .metric {220 width: 150px;221 text-align: center;222 color: #9aa0a6;223 }224 .metric svg {225 width: 64px;226 height: 64px;227 color: #9aa0a6;228 }229 .metric-num {230 margin-top: 18px;231 font-size: 32px;232 color: #9aa0a6;233 }234 .divider {235 height: 1px;236 background: #ececec;237 margin: 36px 0;238 }239 .studies-row {240 font-size: 34px;241 color: #7d8794;242 }243 .btn-row {244 margin-top: 28px;245 display: flex;246 justify-content: center;247 }248 .outline-btn {249 padding: 28px 44px;250 border: 2px solid #7e8cff;251 color: #6576ff;252 border-radius: 60px;253 font-size: 40px;254 font-weight: 700;255 display: inline-flex;256 align-items: center;257 gap: 16px;258 background: #ffffff;259 }260 261 /* Tools */262 .tools-title {263 margin: 40px;264 margin-top: 46px;265 font-size: 54px;266 font-weight: 800;267 color: #222;268 }269 .tools-card {270 margin: 0 40px;271 background: #fff;272 border-radius: 36px;273 box-shadow: 0 8px 22px rgba(0,0,0,0.06);274 border: 1px solid #eee;275 padding: 34px 28px;276 }277 .tools-row {278 display: flex;279 justify-content: space-between;280 align-items: center;281 padding: 8px 12px;282 }283 .tool {284 width: 180px;285 text-align: center;286 color: #666;287 }288 .tool svg { width: 72px; height: 72px; }289 .tool-label {290 margin-top: 18px;291 font-size: 30px;292 color: #7d8794;293 font-weight: 600;294 }295 .new-badge {296 position: absolute;297 top: -16px;298 right: -6px;299 background: #FF6A6A;300 color: #fff;301 font-size: 26px;302 padding: 4px 10px;303 border-radius: 16px;304 }305 .tools-right-gradient {306 position: absolute;307 right: -10px;308 top: 0;309 bottom: 0;310 width: 200px;311 border-top-right-radius: 36px;312 border-bottom-right-radius: 36px;313 background: linear-gradient(180deg, rgba(142,111,255,0.35), rgba(142,111,255,0.65));314 }315 316 /* HT Coin placeholder */317 .htcoin-card {318 margin: 28px 40px;319 padding: 28px;320 background: #fff;321 border-radius: 30px;322 box-shadow: 0 8px 22px rgba(0,0,0,0.06);323 border: 1px solid #eee;324 height: 160px;325 display: flex;326 align-items: center;327 }328 .htcoin-title {329 font-size: 44px;330 font-weight: 800;331 color: #222;332 }333 334 /* Bottom nav */335 .bottom-nav {336 position: absolute;337 left: 0;338 right: 0;339 bottom: 80px;340 height: 160px;341 background: #ffffff;342 border-top: 1px solid #eaeaea;343 display: flex;344 justify-content: space-around;345 align-items: center;346 }347 .tab {348 width: 180px;349 text-align: center;350 color: #9aa0a6;351 font-size: 28px;352 }353 .tab svg { width: 64px; height: 64px; }354 .tab .label { margin-top: 12px; }355 .tab.active { color: #617BFF; }356 .badge {357 position: absolute;358 top: -6px;359 right: 32px;360 width: 36px;361 height: 36px;362 background: #ff4c4c;363 color: #fff;364 border-radius: 50%;365 font-size: 22px;366 display: flex;367 align-items: center;368 justify-content: center;369 }370 .home-indicator {371 position: absolute;372 bottom: 20px;373 left: 50%;374 transform: translateX(-50%);375 width: 320px;376 height: 14px;377 background: #000;378 opacity: 0.12;379 border-radius: 8px;380 }381</style>382</head>383<body>384<div id="render-target">385 386 <!-- Status Bar -->387 <div class="status-bar">388 <div class="status-row">389 <div class="status-left">390 <div>1:37</div>391 <svg class="icon" viewBox="0 0 24 24"><path d="M3 4h18v2H3zM3 9h18v2H3zM3 14h18v2H3zM3 19h18v2H3z" fill="#777"/></svg>392 <svg class="icon" viewBox="0 0 24 24"><path d="M3 3h18v14H3zM8 21l4-4 4 4" fill="#777"/></svg>393 <svg class="icon" viewBox="0 0 24 24"><path d="M3 8l9-5 9 5v9a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3V8z" fill="#777"/></svg>394 </div>395 <div class="status-icons">396 <svg class="icon" viewBox="0 0 24 24"><path d="M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18z" fill="none" stroke="#777" stroke-width="2"/></svg>397 <svg class="icon" viewBox="0 0 24 24"><path d="M12 4l6 4v8l-6 4-6-4V8z" fill="#777"/></svg>398 <svg class="icon" viewBox="0 0 24 24"><path d="M6 18h12l-1.5-8h-9zM9 6h6l1 4H8z" fill="#777"/></svg>399 </div>400 </div>401 </div>402 403 <!-- Top right actions -->404 <div class="top-actions">405 <div class="action-btn">406 <svg width="42" height="42" viewBox="0 0 24 24"><path d="M12 5l7 7-7 7M5 12h13" fill="none" stroke="#444" stroke-width="2"/></svg>407 </div>408 <div class="action-btn">409 <svg width="42" height="42" viewBox="0 0 24 24"><path d="M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6z" fill="none" stroke="#444" stroke-width="2"/><path d="M3 12h3M18 12h3M12 3v3M12 18v3" stroke="#444" stroke-width="2"/></svg>410 </div>411 </div>412 413 <!-- Gift Sticker -->414 <div class="gift-sticker">415 [IMG: Gift - NEW]416 <div class="new-tag">NEW</div>417 </div>418 419 <!-- Promo banner -->420 <div class="promo-area">421 <div class="promo-dots"><div class="promo-dot"></div></div>422 <div class="promo-pill">Last chance! 25% OFF VIP</div>423 </div>424 425 <!-- Learning Statistics -->426 <div class="section-title">Learning Statistics</div>427 428 <div class="card">429 <div class="feature-row">430 <div class="feature-tile tile-green" style="position:relative;">431 <div class="tile-title">Vocabulary</div>432 <div class="tile-sub">Game-like vocab learning</div>433 <div class="tile-icon">434 <div style="width:80px;height:80px;background:#E0E0E0;border:1px solid #BDBDBD;border-radius:16px;display:flex;align-items:center;justify-content:center;color:#757575;">[IMG]</div>435 </div>436 </div>437 <div class="feature-tile tile-purple" style="position:relative;">438 <div class="tile-title">Audio & Video</div>439 <div class="tile-sub">Listen to whatever you like!</div>440 <div class="tile-icon">441 <div style="width:80px;height:80px;background:#E0E0E0;border:1px solid #BDBDBD;border-radius:16px;display:flex;align-items:center;justify-content:center;color:#757575;">[IMG]</div>442 </div>443 </div>444 <div class="feature-tile tile-blue" style="position:relative;">445 <div class="tile-title">Classes</div>446 <div class="tile-sub">Group and private</div>447 <div class="tile-icon">448 <div style="width:80px;height:80px;background:#E0E0E0;border:1px solid #BDBDBD;border-radius:16px;display:flex;align-items:center;justify-content:center;color:#757575;">[IMG]</div>449 </div>450 </div>451 </div>452 453 <div class="courses-banner">All Courses (100+)</div>454 455 <div class="stats-line">Total points: <span class="blue-link">0</span></div>456 457 <div class="metrics">458 <div class="metric">459 <svg viewBox="0 0 24 24"><path d="M4 5h16v4H4zM4 11h8v8H4zM14 11h6v8h-6z" fill="#b7bdc7"/></svg>460 <div class="metric-num">0</div>461 </div>462 <div class="metric">463 <svg viewBox="0 0 24 24"><path d="M5 12l4 4 10-10" fill="none" stroke="#b7bdc7" stroke-width="2"/></svg>464 <div class="metric-num">0</div>465 </div>466 <div class="metric">467 <svg viewBox="0 0 24 24"><path d="M12 6v12M6 12h12" stroke="#b7bdc7" stroke-width="2"/></svg>468 <div class="metric-num">0</div>469 </div>470 <div class="metric">471 <svg viewBox="0 0 24 24"><path d="M6 4h12v16l-6-4-6 4z" fill="none" stroke="#b7bdc7" stroke-width="2"/></svg>472 <div class="metric-num">0</div>473 </div>474 <div class="metric">475 <svg viewBox="0 0 24 24"><path d="M4 5h16v14H4zM7 8h10v2H7zM7 12h10v2H7z" fill="#b7bdc7"/></svg>476 <div class="metric-num">0</div>477 </div>478 <div class="metric">479 <svg viewBox="0 0 24 24"><path d="M4 9h5l7-5v16l-7-5H4z" fill="#b7bdc7"/></svg>480 <div class="metric-num">0</div>481 </div>482 </div>483 484 <div class="divider"></div>485 486 <div class="studies-row">487 Joined for <span class="blue-link">1</span> day, studied for <span class="blue-link">1</span> day488 </div>489 490 <div class="btn-row">491 <div class="outline-btn">492 <svg width="40" height="40" viewBox="0 0 24 24"><path d="M5 12h12M12 5l7 7-7 7" fill="none" stroke="#6576ff" stroke-width="2"/></svg>493 Log Studies494 </div>495 </div>496 </div>497 498 <!-- Tools -->499 <div class="tools-title">Tools</div>500 <div class="tools-card" style="position:relative;">501 <div class="tools-row">502 <div class="tool">503 <svg viewBox="0 0 24 24"><path d="M4 4h16v4H4zM4 10h10v10H4z" fill="#60a8ff"/></svg>504 <div class="tool-label">Translate</div>505 </div>506 <div class="tool">507 <svg viewBox="0 0 24 24"><path d="M6 18l12-12M6 8h10v10" fill="none" stroke="#45c56b" stroke-width="2"/></svg>508 <div class="tool-label">AI Grammar</div>509 </div>510 <div class="tool">511 <svg viewBox="0 0 24 24"><path d="M12 2l3 7h7l-5.5 4 2 7-6.5-4.5L6.5 20l2-7L3 9h7z" fill="#f5a623"/></svg>512 <div class="tool-label">Favorites</div>513 </div>514 <div class="tool" style="position:relative;">515 <svg viewBox="0 0 24 24"><path d="M4 5h16v12H4zM9 20h6" fill="none" stroke="#51c7b1" stroke-width="2"/></svg>516 <div class="tool-label">Host</div>517 <div class="new-badge">NEW</div>518 </div>519 <div class="tool">520 <svg viewBox="0 0 24 24"><path d="M6 4h12v16H6zM9 8h6M9 12h6M9 16h6" fill="none" stroke="#8a69ff" stroke-width="2"/></svg>521 <div class="tool-label">Notepad</div>522 </div>523 </div>524 <div class="tools-right-gradient"></div>525 </div>526 527 <!-- HT Coin section -->528 <div class="htcoin-card">529 <div class="htcoin-title">HT Coin</div>530 </div>531 532 <!-- Bottom Navigation -->533 <div class="bottom-nav">534 <div class="tab" style="position:relative;">535 <svg viewBox="0 0 24 24"><circle cx="12" cy="8" r="3" fill="#b7bdc7"/><path d="M5 20a7 7 0 0 1 14 0H5z" fill="#b7bdc7"/></svg>536 <div class="label">HelloTalk</div>537 <div class="badge">4</div>538 </div>539 <div class="tab">540 <svg viewBox="0 0 24 24"><path d="M12 3l8 6-8 6-8-6zM4 17l8 4 8-4" fill="none" stroke="#b7bdc7" stroke-width="2"/></svg>541 <div class="label">Moments</div>542 </div>543 <div class="tab">544 <svg viewBox="0 0 24 24"><path d="M6 18v-6l6-6 6 6v6H6z" fill="#b7bdc7"/></svg>545 <div class="label">Connect</div>546 </div>547 <div class="tab" style="position:relative;">548 <svg viewBox="0 0 24 24"><path d="M4 6l8-3 8 3v12l-8 3-8-3V6z" fill="none" stroke="#b7bdc7" stroke-width="2"/></svg>549 <div class="label">Live</div>550 <div class="badge" style="right: 20px;"></div>551 </div>552 <div class="tab active">553 <svg viewBox="0 0 24 24"><circle cx="12" cy="8" r="3" fill="#617BFF"/><path d="M5 20a7 7 0 0 1 14 0H5z" fill="#617BFF"/></svg>554 <div class="label">Me</div>555 </div>556 </div>557 558 <div class="home-indicator"></div>559</div>560</body>561</html>