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 {9 margin: 0;10 padding: 0;11 background: transparent;12 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;13 }14 #render-target {15 width: 1080px;16 height: 2400px;17 position: relative;18 overflow: hidden;19 background: #FFFFFF;20 border-radius: 34px;21 box-shadow: 0 8px 24px rgba(0,0,0,0.08);22 color: #333;23 }24 25 /* Top hero */26 .hero {27 position: absolute;28 left: 0;29 top: 0;30 width: 1080px;31 height: 700px;32 background: #DDF4FF;33 }34 35 /* Status bar (simplified) */36 .status-bar {37 position: absolute;38 top: 18px;39 left: 24px;40 right: 24px;41 height: 44px;42 display: flex;43 align-items: center;44 justify-content: space-between;45 color: #444;46 font-size: 32px;47 opacity: 0.9;48 }49 .status-right {50 display: flex;51 align-items: center;52 gap: 24px;53 }54 55 .settings {56 position: absolute;57 right: 64px;58 top: 220px;59 font-size: 52px;60 color: #666;61 }62 63 .avatar-placeholder {64 position: absolute;65 left: 180px;66 bottom: 40px;67 width: 720px;68 height: 520px;69 background: #E0E0E0;70 border: 2px dashed #9ED7F7;71 border-radius: 40px;72 display: flex;73 align-items: center;74 justify-content: center;75 color: #757575;76 font-size: 40px;77 letter-spacing: 0.5px;78 }79 80 /* Content sheet */81 .sheet {82 position: absolute;83 left: 0;84 top: 620px;85 width: 1080px;86 height: 1780px;87 background: #FFFFFF;88 border-top-left-radius: 30px;89 border-top-right-radius: 30px;90 box-shadow: 0 -2px 0 rgba(0,0,0,0.05);91 }92 93 .profile-section {94 padding: 54px 64px 30px 64px;95 }96 .name-row {97 display: flex;98 align-items: center;99 justify-content: space-between;100 }101 .name-row .name {102 font-size: 64px;103 font-weight: 800;104 color: #4A4A4A;105 letter-spacing: 0.3px;106 }107 108 /* Simple France flag pill */109 .flag-fr {110 width: 96px;111 height: 64px;112 border-radius: 16px;113 overflow: hidden;114 display: grid;115 grid-template-columns: 1fr 1fr 1fr;116 border: 2px solid #E5E5E5;117 }118 .flag-fr::before { content: ""; background: #2B7BFF; }119 .flag-fr::after { content: ""; }120 .flag-fr div { background: #FF4B4B; }121 .flag-fr::after {122 background: #FFFFFF;123 }124 .flag-fr { position: relative; }125 .flag-fr div { position: relative; grid-column: 3; }126 127 .username {128 margin-top: 18px;129 font-size: 40px;130 color: #888;131 }132 .joined {133 margin-top: 8px;134 font-size: 40px;135 color: #9A9A9A;136 }137 138 .follow-row {139 margin-top: 34px;140 display: flex;141 gap: 46px;142 font-size: 44px;143 font-weight: 700;144 color: #23B3F7;145 letter-spacing: 0.5px;146 }147 148 .actions-row {149 margin-top: 38px;150 display: flex;151 align-items: center;152 gap: 24px;153 }154 .add-btn {155 flex: 1;156 height: 140px;157 border: 3px solid #E6E6E6;158 background: #FFFFFF;159 border-radius: 28px;160 display: flex;161 align-items: center;162 padding: 0 40px;163 gap: 26px;164 font-size: 48px;165 color: #23B3F7;166 font-weight: 800;167 box-shadow: 0 4px 0 rgba(0,0,0,0.02);168 }169 .icon-blue {170 width: 60px;171 height: 60px;172 }173 .share-btn {174 width: 140px;175 height: 140px;176 border: 3px solid #E6E6E6;177 border-radius: 28px;178 display: flex;179 align-items: center;180 justify-content: center;181 color: #23B3F7;182 }183 .divider {184 height: 2px;185 background: #EFEFEF;186 margin: 46px 0 32px 0;187 }188 189 .section-title {190 font-size: 56px;191 font-weight: 800;192 color: #4A4A4A;193 padding: 0 64px;194 }195 196 .stats-grid {197 padding: 30px 64px;198 display: grid;199 grid-template-columns: 1fr 1fr;200 grid-gap: 26px;201 }202 .stat-card {203 height: 180px;204 border-radius: 28px;205 border: 3px solid #E6E6E6;206 background: #FFFFFF;207 display: grid;208 grid-template-columns: 120px 1fr;209 align-items: center;210 padding: 0 24px;211 }212 .stat-icon {213 display: flex;214 align-items: center;215 justify-content: center;216 }217 .stat-text .value {218 font-size: 52px;219 font-weight: 800;220 color: #4A4A4A;221 margin-bottom: 6px;222 }223 .stat-text .label {224 font-size: 36px;225 color: #9A9A9A;226 }227 228 .friends-card {229 margin: 24px 64px 0 64px;230 border: 3px solid #E6E6E6;231 border-radius: 28px;232 padding: 28px;233 display: grid;234 grid-template-columns: 160px 1fr;235 gap: 24px;236 background: #FFFFFF;237 }238 .img-placeholder {239 width: 160px;240 height: 160px;241 background: #E0E0E0;242 border: 1px solid #BDBDBD;243 border-radius: 24px;244 display: flex;245 align-items: center;246 justify-content: center;247 color: #757575;248 font-size: 28px;249 text-align: center;250 padding: 8px;251 }252 .friends-card .title {253 font-size: 48px;254 font-weight: 800;255 color: #4A4A4A;256 margin-top: 8px;257 margin-bottom: 12px;258 }259 .friends-card .desc {260 font-size: 36px;261 color: #777;262 line-height: 1.4;263 }264 265 /* Bottom nav */266 .bottom-nav {267 position: absolute;268 left: 0;269 bottom: 120px;270 width: 1080px;271 height: 180px;272 background: #FFFFFF;273 border-top: 2px solid #F0F0F0;274 display: flex;275 align-items: center;276 justify-content: space-around;277 padding: 0 40px;278 }279 .nav-item {280 width: 128px;281 height: 128px;282 border-radius: 28px;283 display: flex;284 align-items: center;285 justify-content: center;286 }287 .nav-item.center {288 border: 4px solid #8ED3FF;289 box-shadow: 0 6px 0 rgba(0,0,0,0.02);290 }291 292 /* Gesture bar */293 .gesture-bar {294 position: absolute;295 left: 50%;296 transform: translateX(-50%);297 bottom: 34px;298 width: 360px;299 height: 12px;300 background: #111;301 border-radius: 12px;302 opacity: 0.9;303 }304</style>305</head>306<body>307<div id="render-target">308 <div class="hero">309 <div class="status-bar">310 <div>12:11</div>311 <div class="status-right">312 <span>📶</span>313 <span>🔋</span>314 <span>100%</span>315 </div>316 </div>317 <div class="settings">⚙️</div>318 <div class="avatar-placeholder">[IMG: Profile Avatar Illustration]</div>319 </div>320 321 <div class="sheet">322 <div class="profile-section">323 <div class="name-row">324 <div class="name">Richard Wagner</div>325 <div class="flag-fr"><div></div></div>326 </div>327 <div class="username">RichardWag528920</div>328 <div class="joined">Joined October 2023</div>329 330 <div class="follow-row">331 <div>0 Following</div>332 <div>0 Followers</div>333 </div>334 335 <div class="actions-row">336 <div class="add-btn">337 <svg class="icon-blue" viewBox="0 0 64 64">338 <circle cx="20" cy="22" r="12" fill="#23B3F7"></circle>339 <rect x="42" y="16" width="16" height="8" rx="4" fill="#23B3F7"></rect>340 <rect x="48" y="10" width="4" height="20" rx="2" fill="#23B3F7"></rect>341 </svg>342 <div>ADD FRIENDS</div>343 </div>344 <div class="share-btn">345 <svg width="64" height="64" viewBox="0 0 64 64">346 <path d="M32 10l-12 12h8v14h8V22h8z" fill="#23B3F7"></path>347 <rect x="16" y="38" width="32" height="16" rx="4" fill="none" stroke="#23B3F7" stroke-width="4"></rect>348 </svg>349 </div>350 </div>351 352 <div class="divider"></div>353 </div>354 355 <div class="section-title">Statistics</div>356 357 <div class="stats-grid">358 <div class="stat-card">359 <div class="stat-icon">360 <svg width="72" height="72" viewBox="0 0 72 72">361 <path d="M36 10c6 10-2 14-2 20s8 8 8 14-6 10-14 10-14-6-14-14 10-12 22-30z" fill="#FF9500"></path>362 </svg>363 </div>364 <div class="stat-text">365 <div class="value">1</div>366 <div class="label">Day streak</div>367 </div>368 </div>369 370 <div class="stat-card">371 <div class="stat-icon">372 <svg width="72" height="72" viewBox="0 0 72 72">373 <path d="M30 8l12 20H34l8 36L22 34h10L20 8z" fill="#FFC82C"></path>374 </svg>375 </div>376 <div class="stat-text">377 <div class="value">28</div>378 <div class="label">Total XP</div>379 </div>380 </div>381 382 <div class="stat-card">383 <div class="stat-icon">384 <svg width="72" height="72" viewBox="0 0 72 72">385 <path d="M36 10l22 10-8 26-14 8-14-8-8-26z" fill="#D9D9D9"></path>386 </svg>387 </div>388 <div class="stat-text">389 <div class="value">No Current</div>390 <div class="label">Current league</div>391 </div>392 </div>393 394 <div class="stat-card">395 <div class="stat-icon">396 <svg width="72" height="72" viewBox="0 0 72 72">397 <circle cx="36" cy="24" r="16" fill="#CFCFCF"></circle>398 <rect x="24" y="40" width="24" height="16" rx="6" fill="#E0E0E0"></rect>399 </svg>400 </div>401 <div class="stat-text">402 <div class="value">0</div>403 <div class="label">Top 3 finishes</div>404 </div>405 </div>406 </div>407 408 <div class="friends-card">409 <div class="img-placeholder">[IMG: Address Book]</div>410 <div>411 <div class="title">Find friends on Duolingo</div>412 <div class="desc">Sync your contacts to easily find people you know on Duolingo.</div>413 </div>414 </div>415 </div>416 417 <div class="bottom-nav">418 <div class="nav-item">419 <svg width="88" height="88" viewBox="0 0 88 88">420 <path d="M12 50l32-26 32 26v20H54V58H34v12H12z" fill="#FF6B6B"></path>421 </svg>422 </div>423 <div class="nav-item">424 <svg width="88" height="88" viewBox="0 0 88 88">425 <path d="M44 12l28 16-8 36-20 12-20-12-8-36z" fill="#C78C5A"></path>426 </svg>427 </div>428 <div class="nav-item center">429 <svg width="88" height="88" viewBox="0 0 88 88">430 <circle cx="44" cy="32" r="18" fill="#9B66FF"></circle>431 <rect x="22" y="52" width="44" height="20" rx="10" fill="#9B66FF"></rect>432 </svg>433 </div>434 <div class="nav-item">435 <svg width="88" height="88" viewBox="0 0 88 88">436 <rect x="18" y="26" width="52" height="36" rx="10" fill="#FFC83D"></rect>437 <rect x="28" y="36" width="32" height="16" rx="6" fill="#A56F00"></rect>438 </svg>439 </div>440 <div class="nav-item">441 <svg width="88" height="88" viewBox="0 0 88 88">442 <path d="M44 20c12 0 22 10 22 22-8 0-8 10-8 18H30c0-8 0-18-8-18 0-12 10-22 22-22z" fill="#FFC83D"></path>443 <circle cx="44" cy="70" r="6" fill="#FFA800"></circle>444 </svg>445 </div>446 </div>447 448 <div class="gesture-bar"></div>449</div>450</body>451</html>