GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">5<title>UI Rendering</title>6<style>7 body {8 margin: 0;9 padding: 0;10 background: transparent;11 font-family: Arial, Helvetica, sans-serif;12 }13 #render-target {14 width: 1080px;15 height: 2400px;16 position: relative;17 overflow: hidden;18 background: #2b2b2b; /* main dark background */19 color: #fff;20 }21 22 /* Status bar */23 .status-bar {24 position: absolute;25 top: 0;26 left: 0;27 width: 1080px;28 height: 150px;29 background: #d192a7;30 padding: 0 40px;31 box-sizing: border-box;32 }33 .status-left {34 position: absolute;35 left: 40px;36 top: 50%;37 transform: translateY(-50%);38 display: flex;39 align-items: center;40 gap: 28px;41 color: #fff;42 font-size: 36px;43 opacity: 0.95;44 }45 .status-right {46 position: absolute;47 right: 40px;48 top: 50%;49 transform: translateY(-50%);50 display: flex;51 align-items: center;52 gap: 20px;53 }54 .icon-battery {55 width: 46px;56 height: 26px;57 border: 3px solid #fff;58 border-radius: 5px;59 position: relative;60 }61 .icon-battery::after {62 content: "";63 position: absolute;64 right: -10px;65 top: 7px;66 width: 6px;67 height: 12px;68 background: #fff;69 border-radius: 2px;70 }71 .icon-battery .level {72 position: absolute;73 left: 3px;74 top: 3px;75 width: 30px;76 height: 18px;77 background: #fff;78 border-radius: 2px;79 }80 81 /* Header */82 .header {83 position: absolute;84 top: 150px;85 left: 0;86 width: 1080px;87 height: 230px;88 background: #5f5f62;89 box-sizing: border-box;90 padding: 30px 40px;91 }92 .hamburger {93 position: absolute;94 left: 40px;95 top: 85px;96 width: 80px;97 height: 60px;98 }99 .hamburger span {100 display: block;101 height: 8px;102 background: #fff;103 margin: 9px 0;104 border-radius: 4px;105 }106 .header-right {107 position: absolute;108 right: 40px;109 top: 80px;110 }111 .bars-icon {112 width: 70px;113 height: 70px;114 }115 116 .profile-row {117 position: absolute;118 left: 160px;119 right: 140px;120 top: 55px;121 display: flex;122 align-items: center;123 gap: 30px;124 }125 .avatar {126 width: 120px;127 height: 120px;128 border-radius: 60px;129 background: #E0E0E0;130 border: 1px solid #BDBDBD;131 color: #757575;132 display: flex;133 align-items: center;134 justify-content: center;135 font-size: 22px;136 }137 .title-block {138 display: flex;139 flex-direction: column;140 gap: 8px;141 }142 .title-line {143 display: flex;144 align-items: center;145 gap: 16px;146 }147 .app-title {148 font-size: 60px;149 font-weight: 700;150 color: #fff;151 }152 .caret {153 width: 22px;154 height: 22px;155 border-left: 12px solid transparent;156 border-right: 12px solid transparent;157 border-top: 16px solid #fff;158 margin-top: 8px;159 }160 .subtitle {161 font-size: 30px;162 color: #eaeaea;163 opacity: 0.95;164 }165 166 /* Grid of actions */167 .actions {168 position: absolute;169 top: 380px;170 left: 0;171 width: 1080px;172 padding: 40px 60px 0 60px;173 box-sizing: border-box;174 }175 .grid {176 display: grid;177 grid-template-columns: repeat(4, 1fr);178 gap: 54px 40px;179 }180 .action {181 text-align: center;182 color: #fff;183 }184 .circle {185 width: 170px;186 height: 170px;187 border-radius: 85px;188 margin: 0 auto 18px;189 display: flex;190 align-items: center;191 justify-content: center;192 position: relative;193 }194 .label {195 font-size: 32px;196 color: #fff;197 }198 .ago-badge {199 position: absolute;200 top: -32px;201 left: 0;202 width: 170px;203 text-align: left;204 font-size: 28px;205 color: #fff;206 font-weight: 700;207 opacity: 0.9;208 }209 210 /* Divider area with slider */211 .divider {212 position: absolute;213 top: 880px;214 left: 0;215 width: 1080px;216 height: 90px;217 background: #705c64;218 }219 .divider .slider {220 position: absolute;221 left: 50%;222 top: 50%;223 width: 500px;224 height: 16px;225 background: #9b8b92;226 border-radius: 10px;227 transform: translate(-50%, -50%);228 }229 .divider .menu {230 position: absolute;231 right: 40px;232 top: 20px;233 width: 68px;234 height: 48px;235 }236 .divider .menu span {237 display: block;238 height: 8px;239 background: #fff;240 margin: 8px 0;241 border-radius: 4px;242 }243 244 /* Log card */245 .log-area {246 position: absolute;247 top: 970px;248 left: 40px;249 right: 40px;250 color: #fff;251 }252 .log-item {253 display: flex;254 align-items: center;255 gap: 26px;256 background: rgba(255,255,255,0.02);257 padding: 26px 20px;258 border-radius: 8px;259 }260 .log-icon {261 width: 100px;262 height: 100px;263 border-radius: 50%;264 background: #d98990;265 display: flex;266 align-items: center;267 justify-content: center;268 }269 .log-text {270 font-size: 34px;271 line-height: 1.45;272 }273 .log-text .bold {274 font-weight: 700;275 }276 277 /* Bottom banner and toast */278 .bottom-banner {279 position: absolute;280 bottom: 90px;281 left: 0;282 width: 1080px;283 height: 140px;284 background: #676767;285 color: #fff;286 font-size: 40px;287 display: flex;288 align-items: center;289 justify-content: center;290 }291 .bottom-banner .close {292 position: absolute;293 right: 26px;294 top: 26px;295 width: 46px;296 height: 46px;297 border: 4px solid #fff;298 border-radius: 50%;299 }300 .bottom-banner .close::before,301 .bottom-banner .close::after {302 content: "";303 position: absolute;304 left: 50%;305 top: 50%;306 width: 26px;307 height: 4px;308 background: #fff;309 transform: translate(-50%, -50%) rotate(45deg);310 border-radius: 2px;311 }312 .bottom-banner .close::after {313 transform: translate(-50%, -50%) rotate(-45deg);314 }315 .toast {316 position: absolute;317 bottom: 210px;318 left: 50%;319 transform: translateX(-50%);320 background: #6ea6ff;321 color: #fff;322 font-size: 36px;323 padding: 18px 28px;324 border-radius: 16px;325 }326 327 /* Home indicator */328 .home-indicator {329 position: absolute;330 bottom: 22px;331 left: 50%;332 width: 220px;333 height: 10px;334 background: #ffffff;335 opacity: 0.85;336 border-radius: 6px;337 transform: translateX(-50%);338 }339 340 /* Simple helper icons inside circles (SVGs) */341 .circle svg {342 width: 90px;343 height: 90px;344 }345</style>346</head>347<body>348<div id="render-target">349 350 <!-- Status bar -->351 <div class="status-bar">352 <div class="status-left">353 <div>8:42</div>354 <!-- simple stroller icon -->355 <svg width="40" height="32">356 <circle cx="10" cy="26" r="6" fill="#fff"></circle>357 <circle cx="30" cy="26" r="6" fill="#fff"></circle>358 <path d="M6 20 L32 20 L24 8 L10 8 Z" fill="none" stroke="#fff" stroke-width="3"></path>359 </svg>360 <!-- calendar icon -->361 <svg width="40" height="32">362 <rect x="2" y="6" width="36" height="24" fill="none" stroke="#fff" stroke-width="3" rx="4"></rect>363 <line x1="2" y1="14" x2="38" y2="14" stroke="#fff" stroke-width="3"></line>364 <line x1="10" y1="2" x2="10" y2="10" stroke="#fff" stroke-width="4"></line>365 <line x1="30" y1="2" x2="30" y2="10" stroke="#fff" stroke-width="4"></line>366 </svg>367 </div>368 <div class="status-right">369 <div class="icon-battery"><div class="level"></div></div>370 </div>371 </div>372 373 <!-- Header -->374 <div class="header">375 <div class="hamburger">376 <span></span><span></span><span></span>377 </div>378 379 <div class="profile-row">380 <div class="avatar">[IMG: Profile photo]</div>381 <div class="title-block">382 <div class="title-line">383 <div class="app-title">Research</div>384 <div class="caret"></div>385 </div>386 <div class="subtitle">9 days old (1 week)</div>387 </div>388 </div>389 390 <div class="header-right">391 <svg class="bars-icon" viewBox="0 0 80 80">392 <rect x="10" y="48" width="12" height="22" fill="#fff" rx="3"></rect>393 <rect x="34" y="36" width="12" height="34" fill="#fff" rx="3"></rect>394 <rect x="58" y="22" width="12" height="48" fill="#fff" rx="3"></rect>395 </svg>396 </div>397 </div>398 399 <!-- Actions grid -->400 <div class="actions">401 <div class="grid">402 <!-- Feed -->403 <div class="action">404 <div class="circle" style="background:#d78989;">405 <div class="ago-badge">3m ago</div>406 <svg viewBox="0 0 100 100">407 <rect x="20" y="20" width="18" height="46" fill="#fff" rx="8"></rect>408 <rect x="42" y="42" width="40" height="24" fill="#fff" rx="6"></rect>409 </svg>410 </div>411 <div class="label">Feed</div>412 </div>413 <!-- Diaper -->414 <div class="action">415 <div class="circle" style="background:#a9d9ee;">416 <svg viewBox="0 0 100 100">417 <rect x="18" y="34" width="64" height="32" fill="#fff" rx="10"></rect>418 <rect x="26" y="66" width="48" height="10" fill="#fff" rx="5"></rect>419 </svg>420 </div>421 <div class="label">Diaper</div>422 </div>423 <!-- Sleep -->424 <div class="action">425 <div class="circle" style="background:#3b6fb5;">426 <svg viewBox="0 0 100 100">427 <path d="M62 20 A30 30 0 1 0 82 64 A24 24 0 1 1 62 20 Z" fill="#fff"></path>428 <circle cx="74" cy="46" r="4" fill="#fff"></circle>429 <circle cx="68" cy="56" r="3" fill="#fff"></circle>430 <circle cx="80" cy="60" r="3" fill="#fff"></circle>431 </svg>432 </div>433 <div class="label">Sleep</div>434 </div>435 <!-- Mood -->436 <div class="action">437 <div class="circle" style="background:#e9c07f;">438 <svg viewBox="0 0 100 100">439 <circle cx="50" cy="50" r="26" fill="#fff"></circle>440 <circle cx="42" cy="46" r="3" fill="#e9c07f"></circle>441 <circle cx="58" cy="46" r="3" fill="#e9c07f"></circle>442 <path d="M38 58 Q50 66 62 58" stroke="#e9c07f" stroke-width="5" fill="none" stroke-linecap="round"></path>443 </svg>444 </div>445 <div class="label">Mood</div>446 </div>447 <!-- Activity -->448 <div class="action">449 <div class="circle" style="background:#8e71b9;">450 <svg viewBox="0 0 100 100">451 <rect x="20" y="34" width="24" height="24" fill="#fff" rx="6"></rect>452 <rect x="54" y="42" width="26" height="26" fill="#fff" rx="6"></rect>453 <text x="32" y="50" font-size="14" fill="#8e71b9" font-weight="700">A</text>454 <text x="64" y="55" font-size="14" fill="#8e71b9" font-weight="700">B</text>455 <text x="64" y="68" font-size="14" fill="#8e71b9" font-weight="700">C</text>456 </svg>457 </div>458 <div class="label">Activity</div>459 </div>460 <!-- Medical -->461 <div class="action">462 <div class="circle" style="background:#d9c3a4;">463 <svg viewBox="0 0 100 100">464 <circle cx="50" cy="36" r="16" fill="#fff"></circle>465 <rect x="34" y="52" width="32" height="24" fill="#fff" rx="8"></rect>466 <line x1="50" y1="56" x2="50" y2="72" stroke="#d9c3a4" stroke-width="4"></line>467 </svg>468 </div>469 <div class="label">Medical</div>470 </div>471 <!-- Message -->472 <div class="action">473 <div class="circle" style="background:#7dc689;">474 <svg viewBox="0 0 100 100">475 <path d="M22 30 H78 V60 H50 L38 70 V60 H22 Z" fill="#fff"></path>476 <circle cx="36" cy="46" r="4" fill="#7dc689"></circle>477 <circle cx="50" cy="46" r="4" fill="#7dc689"></circle>478 <circle cx="64" cy="46" r="4" fill="#7dc689"></circle>479 </svg>480 </div>481 <div class="label">Message</div>482 </div>483 <!-- Milestone -->484 <div class="action">485 <div class="circle" style="background:#f0c483;">486 <svg viewBox="0 0 100 100">487 <polygon points="50,24 58,44 80,44 62,56 68,76 50,64 32,76 38,56 20,44 42,44" fill="#fff"></polygon>488 </svg>489 </div>490 <div class="label">Milestone</div>491 </div>492 </div>493 </div>494 495 <!-- Divider bar -->496 <div class="divider">497 <div class="slider"></div>498 <div class="menu"><span></span><span></span><span></span></div>499 </div>500 501 <!-- Log area -->502 <div class="log-area">503 <div class="log-item">504 <div class="log-icon">505 <svg viewBox="0 0 100 100">506 <path d="M40 30 a14 14 0 1 0 28 0 a14 14 0 1 0 -28 0" fill="#fff"></path>507 <path d="M26 70 q24 -10 48 0 q-2 10 -8 10 h-32 q-6 0 -8 -10z" fill="#fff"></path>508 </svg>509 </div>510 <div class="log-text">511 Nursing: <span class="bold">2m (2m L, 0 R)</span> (1x)<br>512 Last <span class="bold">3m ago (Last: Left)</span> at 08:39 AM513 </div>514 </div>515 </div>516 517 <!-- Bottom banner and toast -->518 <div class="toast">Entry saved</div>519 <div class="bottom-banner">520 No Internet Connection521 <div class="close"></div>522 </div>523 524 <!-- Home indicator -->525 <div class="home-indicator"></div>526 527</div>528</body>529</html>