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>Mobile UI Render</title>7<style>8 body { margin: 0; padding: 0; background: transparent; }9 #render-target {10 position: relative;11 width: 1080px;12 height: 2400px;13 overflow: hidden;14 background: #ffffff;15 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;16 color: #2b2b2b;17 }18 .status-bar {19 position: absolute;20 top: 0;21 left: 0;22 width: 1080px;23 height: 110px;24 background: #8A3A22;25 color: #fff;26 display: flex;27 align-items: center;28 padding: 0 32px;29 box-sizing: border-box;30 font-size: 34px;31 }32 .status-bar .right {33 margin-left: auto;34 display: flex;35 gap: 26px;36 align-items: center;37 }38 .top-nav {39 position: absolute;40 top: 110px;41 left: 0;42 width: 1080px;43 height: 150px;44 background: #EA5B2D;45 color: #fff;46 display: flex;47 align-items: center;48 padding: 0 36px;49 box-sizing: border-box;50 }51 .top-nav h1 {52 margin: 0;53 font-size: 54px;54 font-weight: 700;55 }56 .top-actions {57 margin-left: auto;58 display: flex;59 gap: 48px;60 }61 .icon-btn svg { width: 52px; height: 52px; fill: none; stroke: #fff; stroke-width: 6; }62 /* Promo banner image placeholder */63 .banner {64 position: absolute;65 top: 260px;66 left: 0;67 width: 1080px;68 height: 420px;69 background: #E0E0E0;70 border-top: 1px solid #BDBDBD;71 border-bottom: 1px solid #BDBDBD;72 display: flex;73 align-items: center;74 justify-content: center;75 color: #757575;76 font-size: 42px;77 font-weight: 700;78 }79 /* Green strip with repeating text */80 .strip {81 position: absolute;82 top: 680px;83 left: 0;84 width: 1080px;85 height: 80px;86 background: #47E07C;87 display: flex;88 align-items: center;89 justify-content: space-around;90 color: #000;91 font-weight: 700;92 font-size: 32px;93 letter-spacing: 1px;94 }95 .strip .item {96 display: flex;97 align-items: center;98 gap: 18px;99 }100 .content {101 position: absolute;102 top: 760px;103 left: 0;104 width: 1080px;105 box-sizing: border-box;106 }107 .card {108 background: #fff;109 padding: 40px 40px 30px 40px;110 box-sizing: border-box;111 border-top: 1px solid #eee;112 border-bottom: 1px solid #eee;113 }114 .deal-card {115 display: grid;116 grid-template-columns: 120px 1fr;117 gap: 36px;118 align-items: center;119 }120 .deal-title {121 font-size: 48px;122 font-weight: 800;123 margin: 0 0 12px 0;124 color: #2d2d2d;125 }126 .deal-desc {127 font-size: 32px;128 line-height: 1.4;129 color: #5c5c5c;130 margin-bottom: 26px;131 }132 .cta-btn {133 display: inline-block;134 background: #E75A2E;135 color: #fff;136 font-weight: 700;137 font-size: 34px;138 padding: 22px 34px;139 border-radius: 16px;140 text-decoration: none;141 }142 .activity-card {143 margin-top: 22px;144 border-top: 1px solid #EFEDE9;145 border-bottom: 1px solid #EFEDE9;146 padding: 36px 40px;147 background: #fff;148 }149 .user-row {150 display: flex;151 align-items: center;152 gap: 26px;153 margin-bottom: 26px;154 }155 .avatar {156 width: 88px;157 height: 88px;158 border-radius: 44px;159 background: #5A44D6;160 color: #fff;161 display: flex;162 align-items: center;163 justify-content: center;164 font-weight: 800;165 font-size: 44px;166 }167 .user-meta {168 display: flex;169 flex-direction: column;170 gap: 8px;171 }172 .user-name {173 font-size: 34px;174 font-weight: 700;175 color: #333;176 }177 .sub-meta {178 display: flex;179 align-items: center;180 gap: 12px;181 color: #7a7a7a;182 font-size: 28px;183 }184 .activity-title {185 font-size: 48px;186 font-weight: 800;187 margin: 18px 0 26px 0;188 }189 .metrics {190 display: grid;191 grid-template-columns: 1fr 1fr 1fr;192 gap: 14px;193 align-items: start;194 margin-bottom: 28px;195 }196 .metric .label {197 color: #7a7a7a;198 font-size: 26px;199 margin-bottom: 10px;200 }201 .metric .value {202 font-size: 48px;203 font-weight: 800;204 color: #333;205 }206 .metric + .metric { border-left: 1px solid #E5E5E5; padding-left: 26px; }207 .note-row {208 display: flex;209 align-items: center;210 justify-content: space-between;211 margin-top: 18px;212 }213 .note-left {214 display: flex;215 align-items: center;216 gap: 18px;217 color: #5c5c5c;218 font-size: 30px;219 }220 .secondary-btn {221 background: #E75A2E;222 color: #fff;223 font-weight: 700;224 font-size: 32px;225 padding: 20px 30px;226 border-radius: 16px;227 text-decoration: none;228 }229 .toolbar {230 margin-top: 26px;231 background: #F7F5F2;232 border-top: 1px solid #EFEDE9;233 border-bottom: 1px solid #EFEDE9;234 display: grid;235 grid-template-columns: 1fr 1fr 1fr;236 height: 140px;237 align-items: center;238 text-align: center;239 }240 .toolbar .slot {241 position: relative;242 }243 .toolbar .slot + .slot::before {244 content: "";245 position: absolute;246 left: 0;247 top: 25%;248 bottom: 25%;249 width: 1px;250 background: #E8E4DE;251 }252 .toolbar svg { width: 58px; height: 58px; stroke: #6e6e6e; stroke-width: 6; fill: none; }253 .privacy-card {254 background: #fff;255 display: flex;256 align-items: center;257 gap: 28px;258 padding: 34px 40px;259 border-top: 1px solid #EFEDE9;260 border-bottom: 1px solid #EFEDE9;261 margin-top: 20px;262 }263 .lock-circle {264 width: 110px;265 height: 110px;266 border-radius: 55px;267 border: 2px solid #E4E1DC;268 display: flex;269 align-items: center;270 justify-content: center;271 }272 .privacy-text {273 font-size: 30px;274 color: #4d4d4d;275 line-height: 1.35;276 }277 .section {278 background: #F7F5F2;279 border-top: 1px solid #EFEDE9;280 padding: 26px 40px;281 font-size: 36px;282 font-weight: 800;283 color: #333;284 }285 .bottom-nav {286 position: absolute;287 bottom: 50px;288 left: 0;289 width: 1080px;290 height: 170px;291 background: #fff;292 border-top: 1px solid #EFEDE9;293 display: grid;294 grid-template-columns: repeat(5, 1fr);295 align-items: center;296 text-align: center;297 color: #7a7a7a;298 font-size: 28px;299 }300 .nav-item {301 display: flex;302 flex-direction: column;303 align-items: center;304 gap: 12px;305 }306 .nav-item svg { width: 52px; height: 52px; stroke: #7a7a7a; stroke-width: 6; fill: none; }307 .nav-item.active svg { stroke: #E75A2E; fill: none; }308 .nav-item.active .label { color: #E75A2E; font-weight: 700; }309 .gesture-bar {310 position: absolute;311 bottom: 12px;312 left: 50%;313 transform: translateX(-50%);314 width: 360px;315 height: 18px;316 border-radius: 9px;317 background: #000000;318 opacity: 0.9;319 }320</style>321</head>322<body>323<div id="render-target">324 <!-- Status bar -->325 <div class="status-bar">326 <div>12:47</div>327 <div class="right">328 <!-- simple dots app indicators -->329 <svg viewBox="0 0 24 24">330 <circle cx="6" cy="12" r="4" fill="#fff"></circle>331 <circle cx="18" cy="12" r="4" fill="#fff" opacity="0.7"></circle>332 </svg>333 <!-- wifi -->334 <svg viewBox="0 0 24 24">335 <path d="M2 8c10-8 20 0 20 0" stroke="#fff" stroke-width="2" fill="none"></path>336 <path d="M5 12c7-6 14 0 14 0" stroke="#fff" stroke-width="2" fill="none"></path>337 <path d="M9 16c3-3 6 0 6 0" stroke="#fff" stroke-width="2" fill="none"></path>338 <circle cx="12" cy="19" r="1.8" fill="#fff"></circle>339 </svg>340 <!-- battery -->341 <svg viewBox="0 0 28 18">342 <rect x="1" y="3" width="22" height="12" rx="2" ry="2" stroke="#fff" fill="none" stroke-width="2"></rect>343 <rect x="3" y="5" width="14" height="8" fill="#fff"></rect>344 <rect x="24" y="6" width="3" height="6" rx="1" fill="#fff"></rect>345 </svg>346 </div>347 </div>348 349 <!-- Top navigation -->350 <div class="top-nav">351 <h1>Home</h1>352 <div class="top-actions">353 <div class="icon-btn">354 <!-- chat bubble -->355 <svg viewBox="0 0 24 24">356 <path d="M4 4h16v12H8l-4 4V4z"></path>357 </svg>358 </div>359 <div class="icon-btn">360 <!-- search -->361 <svg viewBox="0 0 24 24">362 <circle cx="10" cy="10" r="6"></circle>363 <path d="M14.5 14.5L20 20"></path>364 </svg>365 </div>366 <div class="icon-btn">367 <!-- bell -->368 <svg viewBox="0 0 24 24">369 <path d="M12 3c-3 0-5 2-5 5v4l-2 3h14l-2-3V8c0-3-2-5-5-5z"></path>370 <circle cx="12" cy="20" r="2"></circle>371 </svg>372 </div>373 </div>374 </div>375 376 <!-- Promotional banner image placeholder -->377 <div class="banner">[IMG: Promotional Banner - 2024 Boost]</div>378 379 <!-- Green strip -->380 <div class="strip">381 <div class="item">382 <!-- simple chevron/mountain icon -->383 <svg viewBox="0 0 24 24">384 <path d="M12 4l6 10H6z" fill="#000"></path>385 </svg>386 <div>25% OFF</div>387 </div>388 <div class="item">389 <svg viewBox="0 0 24 24">390 <path d="M12 4l6 10H6z" fill="#000"></path>391 </svg>392 <div>25% OFF</div>393 </div>394 <div class="item">395 <svg viewBox="0 0 24 24">396 <path d="M12 4l6 10H6z" fill="#000"></path>397 </svg>398 <div>25% OFF</div>399 </div>400 <div class="item">401 <svg viewBox="0 0 24 24">402 <path d="M12 4l6 10H6z" fill="#000"></path>403 </svg>404 <div>25% OFF</div>405 </div>406 </div>407 408 <div class="content">409 <!-- Deal card -->410 <div class="card deal-card">411 <div>412 <!-- Simple Strava-like mark -->413 <svg viewBox="0 0 100 100" width="100" height="100">414 <path d="M50 10l20 40H30z" fill="#EA5B2D"></path>415 <path d="M50 58l10 20H40z" fill="#EA5B2D" opacity="0.8"></path>416 </svg>417 </div>418 <div>419 <h2 class="deal-title">25% off. Game on.</h2>420 <div class="deal-desc">Subscribe and head into 2024 with the tools to reach your goals.</div>421 <a class="cta-btn" href="#">Claim This Deal</a>422 </div>423 </div>424 425 <!-- Activity card -->426 <div class="activity-card">427 <div class="user-row">428 <div class="avatar">C</div>429 <div class="user-meta">430 <div class="user-name">A B</div>431 <div class="sub-meta">432 <!-- shoe icon -->433 <svg viewBox="0 0 24 24" width="28" height="28">434 <path d="M3 15h14l4 3H5c-1 0-2-1-2-2v-1z" fill="none" stroke="#7a7a7a" stroke-width="2"></path>435 <path d="M10 12l2 3" stroke="#7a7a7a" stroke-width="2"></path>436 </svg>437 <span>Today at 11:58 AM</span>438 </div>439 </div>440 </div>441 442 <div class="activity-title">Lunch Walk</div>443 444 <div class="metrics">445 <div class="metric">446 <div class="label">Distance</div>447 <div class="value">3.00 km</div>448 </div>449 <div class="metric">450 <div class="label">Time</div>451 <div class="value">2h 0m</div>452 </div>453 <div class="metric">454 <div class="label">Elev Gain</div>455 <div class="value">0 m</div>456 </div>457 </div>458 459 <div class="note-row">460 <div class="note-left">461 <!-- thumbs up -->462 <svg viewBox="0 0 24 24" width="42" height="42">463 <path d="M9 10l2-6 3 1v5h5v8H7v-8z" fill="none" stroke="#E75A2E" stroke-width="2"></path>464 </svg>465 <div>Nicely done! Keep moving by joining a challenge</div>466 </div>467 <a class="secondary-btn" href="#">See More</a>468 </div>469 470 <div class="toolbar">471 <div class="slot">472 <!-- like -->473 <svg viewBox="0 0 24 24">474 <path d="M9 10l2-6 3 1v5h5v8H7v-8z"></path>475 </svg>476 </div>477 <div class="slot">478 <!-- comment -->479 <svg viewBox="0 0 24 24">480 <path d="M4 5h16v10H9l-5 4V5z"></path>481 </svg>482 </div>483 <div class="slot">484 <!-- share -->485 <svg viewBox="0 0 24 24">486 <circle cx="6" cy="12" r="3"></circle>487 <circle cx="18" cy="6" r="3"></circle>488 <circle cx="18" cy="18" r="3"></circle>489 <path d="M8.8 10.8L15 7.2M8.8 13.2L15 16.8"></path>490 </svg>491 </div>492 </div>493 </div>494 495 <!-- Privacy tip card -->496 <div class="privacy-card">497 <div class="lock-circle">498 <svg viewBox="0 0 24 24" width="58" height="58">499 <rect x="6" y="11" width="12" height="9" rx="2" ry="2" fill="none" stroke="#7a7a7a" stroke-width="2"></rect>500 <path d="M8 11V8a4 4 0 0 1 8 0v3" fill="none" stroke="#7a7a7a" stroke-width="2"></path>501 </svg>502 </div>503 <div class="privacy-text">Want to better protect your location? Edit your map visibility settings.</div>504 </div>505 506 <!-- Section header -->507 <div class="section">Suggested Challenges</div>508 </div>509 510 <!-- Bottom navigation -->511 <div class="bottom-nav">512 <div class="nav-item active">513 <svg viewBox="0 0 24 24">514 <path d="M3 11l9-7 9 7v9H3z"></path>515 <path d="M9 20v-6h6v6"></path>516 </svg>517 <div class="label">Home</div>518 </div>519 <div class="nav-item">520 <svg viewBox="0 0 24 24">521 <path d="M3 18l6-10 5 8 7-12" fill="none"></path>522 <path d="M3 18h18" fill="none"></path>523 </svg>524 <div class="label">Maps</div>525 </div>526 <div class="nav-item">527 <svg viewBox="0 0 24 24">528 <circle cx="12" cy="12" r="8"></circle>529 <circle cx="12" cy="12" r="3" fill="none"></circle>530 </svg>531 <div class="label">Record</div>532 </div>533 <div class="nav-item">534 <svg viewBox="0 0 24 24">535 <circle cx="7" cy="12" r="2"></circle>536 <circle cx="12" cy="8" r="2"></circle>537 <circle cx="17" cy="12" r="2"></circle>538 <path d="M9 11l2-2 2 2M9 13l2 2 2-2" fill="none"></path>539 </svg>540 <div class="label">Groups</div>541 </div>542 <div class="nav-item">543 <svg viewBox="0 0 24 24">544 <path d="M5 17h3v-6H5zM10 17h3V7h-3zM15 17h3v-9h-3z"></path>545 </svg>546 <div class="label">You</div>547 </div>548 </div>549 550 <div class="gesture-bar"></div>551</div>552</body>553</html>