GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>UI Render</title>6<style>7  body { margin: 0; padding: 0; background: transparent; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #2f2f2f;14    box-shadow: 0 8px 24px rgba(0,0,0,0.3);15    border-radius: 0;16    font-family: Arial, Helvetica, sans-serif;17    color: #fff;18  }19 20  /* Status bar */21  .status-bar {22    position: absolute;23    top: 0;24    left: 0;25    width: 1080px;26    height: 120px;27    background: #d39aa9;28    padding: 24px 32px;29    box-sizing: border-box;30    color: #fff;31    font-weight: 600;32  }33  .status-left, .status-right {34    display: flex;35    align-items: center;36  }37  .status-left { gap: 28px; }38  .status-right { gap: 28px; position: absolute; right: 32px; top: 24px; }39  .status-text { font-size: 34px; }40  .status-icon svg { width: 38px; height: 38px; fill: #fff; }41 42  /* App bar */43  .app-bar {44    position: absolute;45    top: 120px;46    left: 0;47    width: 1080px;48    height: 168px;49    background: #5e5e5e;50    box-sizing: border-box;51    padding: 24px 36px;52    display: flex;53    align-items: center;54    gap: 28px;55    color: #fff;56  }57  .home-icon {58    width: 80px;59    height: 80px;60    background: rgba(255,255,255,0.15);61    border-radius: 12px;62    display: flex;63    align-items: center;64    justify-content: center;65  }66  .home-icon svg { width: 56px; height: 56px; fill: #fff; }67  .avatar {68    width: 104px;69    height: 104px;70    border-radius: 52px;71    background: #E0E0E0;72    border: 1px solid #BDBDBD;73    display: flex;74    align-items: center;75    justify-content: center;76    color: #757575;77    font-size: 24px;78    font-weight: 600;79  }80  .title-block {81    display: flex;82    flex-direction: column;83    gap: 6px;84  }85  .title-row {86    display: flex;87    align-items: center;88    gap: 12px;89  }90  .title {91    font-size: 52px;92    font-weight: 700;93  }94  .subtitle {95    font-size: 26px;96    color: #e0e0e0;97  }98  .caret svg { width: 26px; height: 26px; fill: #fff; }99  .menu {100    margin-left: auto;101    width: 80px;102    height: 80px;103    display: flex;104    align-items: center;105    justify-content: center;106  }107  .menu svg { width: 60px; height: 60px; fill: #fff; }108 109  /* Content */110  .content {111    position: absolute;112    top: 288px;113    left: 0;114    width: 100%;115    height: calc(100% - 288px);116    background: #333333;117    padding: 48px 56px 180px;118    box-sizing: border-box;119  }120  .date {121    color: #f1b4c3;122    font-size: 40px;123    letter-spacing: 0.5px;124    margin-bottom: 40px;125  }126 127  .circle-actions {128    display: flex;129    justify-content: space-between;130    padding: 0 60px;131    margin-bottom: 50px;132  }133  .circle-btn {134    width: 240px;135    height: 240px;136    border-radius: 120px;137    background: #3a3a3a;138    border: 10px solid #f1b4c3;139    display: flex;140    align-items: center;141    justify-content: center;142    color: #fff;143    font-size: 48px;144    font-weight: 700;145    box-shadow: 0 12px 24px rgba(0,0,0,0.35);146  }147  .circle-btn.filled {148    background: #f3afc1;149    color: #131313;150    border: none;151  }152 153  .label {154    font-size: 38px;155    color: #f1f1f1;156    margin-bottom: 20px;157  }158  .divider {159    height: 3px;160    background: #f3afc1;161    margin: 10px 0 40px;162    width: 75%;163  }164 165  .form-row {166    display: flex;167    align-items: center;168    justify-content: space-between;169    width: 70%;170    margin: 34px 0;171  }172  .form-row .row-label {173    font-size: 42px;174    color: #eaeaea;175  }176  .checkbox {177    width: 50px;178    height: 50px;179    border: 6px solid #f3afc1;180    border-radius: 8px;181    box-sizing: border-box;182  }183 184  .quantity-row {185    display: flex;186    align-items: center;187    gap: 46px;188    margin: 50px 0 40px;189    color: #fff;190    font-size: 40px;191  }192  .quantity-row .q-label { width: 220px; }193  .q-item {194    display: flex;195    align-items: center;196    gap: 18px;197  }198  .drop-icon svg { width: 44px; height: 44px; fill: #fff; }199 200  .photo-box {201    margin-top: 160px;202    width: 260px;203    height: 220px;204    border-radius: 24px;205    border: 4px solid #d9d9d9;206    display: flex;207    align-items: center;208    justify-content: center;209    flex-direction: column;210    gap: 16px;211    color: #e4e4e4;212    background: rgba(255,255,255,0.05);213  }214  .photo-box .cam svg { width: 64px; height: 64px; fill: #fff; }215  .photo-box .text { font-size: 28px; letter-spacing: 1px; }216 217  .save-bar {218    position: absolute;219    bottom: 0;220    left: 0;221    width: 100%;222    height: 220px;223    background: #3a3a3a;224    box-shadow: 0 -4px 12px rgba(0,0,0,0.3) inset;225  }226  .save-btn {227    position: absolute;228    bottom: 60px;229    left: 50%;230    transform: translateX(-50%);231    width: 720px;232    height: 110px;233    background: #19c974;234    color: #fff;235    font-size: 48px;236    font-weight: 800;237    border-radius: 14px;238    display: flex;239    align-items: center;240    justify-content: center;241    box-shadow: 0 8px 0 rgba(0,0,0,0.25);242  }243</style>244</head>245<body>246<div id="render-target">247 248  <!-- Status bar -->249  <div class="status-bar">250    <div class="status-left">251      <div class="status-text">8:44</div>252      <div class="status-icon">253        <!-- stroller icon -->254        <svg viewBox="0 0 24 24"><path d="M7 9h10l2-4H9a4 4 0 0 0-4 4v1h2zm-1 3h14v2H6v-2zm1 6a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm12 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4z"/></svg>255      </div>256      <div class="status-icon">257        <!-- calendar icon -->258        <svg viewBox="0 0 24 24"><path d="M7 2h2v3h6V2h2v3h3v17H4V5h3V2zm0 7h10v10H7V9z"/></svg>259      </div>260    </div>261    <div class="status-right">262      <!-- battery icon -->263      <div class="status-icon">264        <svg viewBox="0 0 24 24"><path d="M18 7h2v10h-2V7zM3 7h14v10H3V7z"/></svg>265      </div>266    </div>267  </div>268 269  <!-- App bar -->270  <div class="app-bar">271    <div class="home-icon">272      <svg viewBox="0 0 24 24"><path d="M12 3l9 8h-3v9h-5v-6H11v6H6v-9H3l9-8z"/></svg>273    </div>274    <div class="avatar">[IMG: Camera]</div>275    <div class="title-block">276      <div class="title-row">277        <div class="title">Research</div>278        <div class="caret"><svg viewBox="0 0 24 24"><path d="M7 9l5 6 5-6z"/></svg></div>279      </div>280      <div class="subtitle">Diaper</div>281    </div>282    <div class="menu">283      <svg viewBox="0 0 24 24"><path d="M3 6h18v2H3V6zm0 5h18v2H3v-2zm0 5h18v2H3v-2z"/></svg>284    </div>285  </div>286 287  <!-- Main content -->288  <div class="content">289    <div class="date">Today 08:44 AM</div>290 291    <div class="circle-actions">292      <div class="circle-btn">BM</div>293      <div class="circle-btn filled">Wet</div>294      <div class="circle-btn">Dry</div>295    </div>296 297    <div class="label">Notes:</div>298    <div class="divider"></div>299 300    <div class="form-row">301      <div class="row-label">Diaper Leak</div>302      <div class="checkbox"></div>303    </div>304    <div class="form-row">305      <div class="row-label">Open-Air Accident</div>306      <div class="checkbox"></div>307    </div>308    <div class="form-row">309      <div class="row-label">Diaper Cream</div>310      <div class="checkbox"></div>311    </div>312 313    <div class="quantity-row">314      <div class="q-label">Quantity:</div>315      <div class="q-item">316        <div class="drop-icon">317          <svg viewBox="0 0 24 24"><path d="M12 2C8 6 7 10 7 13a5 5 0 0 0 10 0c0-3-1-7-5-11z"/></svg>318        </div>319        <div>Small</div>320      </div>321      <div class="q-item">322        <div class="drop-icon">323          <svg viewBox="0 0 24 24"><path d="M12 2C8 6 7 10 7 13a6 6 0 0 0 12 0c0-3-1-7-7-11z"/></svg>324        </div>325        <div>Medium</div>326      </div>327      <div class="q-item">328        <div class="drop-icon">329          <svg viewBox="0 0 24 24"><path d="M12 2C7 7 6 11 6 14a7 7 0 0 0 14 0c0-3-2-7-8-12z"/></svg>330        </div>331        <div>Large</div>332      </div>333    </div>334 335    <div class="photo-box">336      <div class="cam">337        <svg viewBox="0 0 24 24"><path d="M9 4h6l2 3h3v13H4V7h3l2-3zm3 4a5 5 0 1 0 0 10 5 5 0 0 0 0-10z"/></svg>338      </div>339      <div class="text">ADD PHOTOS</div>340    </div>341  </div>342 343  <!-- Save bar -->344  <div class="save-bar"></div>345  <div class="save-btn">Save</div>346 347</div>348</body>349</html>