GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Diaper Entry UI</title>6<meta name="viewport" content="width=1080, initial-scale=1.0">7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1080px; height: 2400px;11    position: relative; overflow: hidden;12    background: #2f2f2f;13    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;14    color: #ffffff;15  }16  .status-bar {17    position: absolute; top: 0; left: 0; right: 0;18    height: 160px; background: #d39bad; color: #fff;19    display: flex; align-items: center; justify-content: space-between;20    padding: 0 48px; font-weight: 600;21  }22  .status-left { display: flex; align-items: center; gap: 28px; font-size: 44px; }23  .status-right { display: flex; align-items: center; gap: 24px; }24  .icon { width: 56px; height: 56px; }25  .battery { width: 90px; height: 44px; }26  .app-bar {27    position: absolute; top: 160px; left: 0; right: 0;28    height: 220px; background: #5f5f61;29    display: flex; align-items: center; padding: 0 40px; box-sizing: border-box;30  }31  .home-btn { width: 100px; height: 100px; border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-right: 32px; }32  .title-area { display: flex; align-items: center; gap: 28px; flex: 1; }33  .avatar {34    width: 120px; height: 120px; border-radius: 60px;35    background: #E0E0E0; border: 1px solid #BDBDBD;36    display: flex; align-items: center; justify-content: center;37    color: #757575; font-size: 26px; text-align: center;38  }39  .title-text { display: flex; flex-direction: column; }40  .title-line { display: flex; align-items: center; gap: 12px; }41  .title-line .main-title { font-size: 60px; font-weight: 700; color: #fff; }42  .subtitle { font-size: 34px; color: #d7d7d7; margin-top: 6px; }43  .menu { width: 92px; height: 92px; display: flex; align-items: center; justify-content: center; margin-left: 24px; }44  .content {45    position: absolute; top: 380px; left: 0; right: 0; bottom: 0;46    padding: 60px 60px 180px 60px; box-sizing: border-box;47  }48  .today { color: #f3b0bf; font-size: 48px; font-weight: 700; letter-spacing: 0.5px; margin-bottom: 40px; }49  .options { display: flex; align-items: center; justify-content: space-between; margin: 20px 60px 50px 60px; }50  .circle-option {51    width: 240px; height: 240px; border-radius: 50%;52    border: 10px solid #f3b0bf; background: #3a3a3a;53    display: flex; align-items: center; justify-content: center;54    font-size: 44px; color: #eaeaea; box-shadow: 0 8px 12px rgba(0,0,0,0.35);55  }56  .circle-option.active {57    background: #f3b0bf; border: none; color: #121212;58  }59  .label-row { display: flex; align-items: center; gap: 24px; margin: 36px 0 18px 0; }60  .label-row .label { font-size: 42px; color: #eaeaea; min-width: 220px; }61  .notes-line {62    height: 2px; background: #f3b0bf;63    flex: 1; margin-left: 24px;64  }65  .check-row { display: flex; align-items: center; justify-content: space-between; margin: 32px 0; }66  .check-row .name { font-size: 42px; color: #eaeaea; }67  .checkbox {68    width: 64px; height: 64px; border: 6px solid #f3b0bf; border-radius: 10px;69    display: flex; align-items: center; justify-content: center;70    margin-right: 80px;71  }72  .checkbox.checked { background: #f3b0bf; }73  .quantity-row { display: flex; align-items: center; gap: 36px; margin: 48px 0 80px 0; }74  .qty-label { font-size: 42px; min-width: 220px; color: #eaeaea; }75  .qty-item { display: flex; align-items: center; gap: 16px; color: #fff; font-size: 40px; }76  .photos {77    width: 260px; height: 260px; border: 3px solid #ffffff; border-radius: 28px;78    display: flex; flex-direction: column; align-items: center; justify-content: center;79    gap: 18px; color: #fff; margin-top: 40px;80  }81  .photos .txt { font-size: 32px; letter-spacing: 1px; }82  .save-bar {83    position: absolute; left: 0; right: 0; bottom: 0; height: 240px;84    background: linear-gradient(to top, rgba(0,0,0,0.35), rgba(0,0,0,0.0));85    display: flex; align-items: flex-end; justify-content: center; padding-bottom: 70px;86  }87  .save-btn {88    width: 720px; height: 120px; background: #1fc96a; color: #fff; font-size: 48px; font-weight: 700;89    border-radius: 14px; box-shadow: 0 8px 14px rgba(0,0,0,0.35); display: flex; align-items: center; justify-content: center;90  }91  /* Simple helper to tone pink */92  .pink { color: #f3b0bf; }93  /* SVG styling */94  svg { display: block; }95</style>96</head>97<body>98<div id="render-target">99 100  <!-- Top status bar -->101  <div class="status-bar">102    <div class="status-left">103      <div style="font-size:48px;">8:45</div>104      <!-- Stroller icon -->105      <svg class="icon" viewBox="0 0 24 24" fill="#fff">106        <path d="M4 9h12a6 6 0 0 0-6-6H8a4 4 0 0 0-4 4v2zm2 9a2 2 0 1 1 4 0 2 2 0 0 1-4 0zm10 0a2 2 0 1 1 4 0 2 2 0 0 1-4 0zM6 14h10l3-5H6v5z"/>107      </svg>108      <!-- Calendar icon -->109      <svg class="icon" viewBox="0 0 24 24" fill="#fff">110        <path d="M7 2h2v2h6V2h2v2h3v16H4V4h3V2zm-1 6v10h12V8H6zm2 2h2v2H8v-2zm4 0h2v2h-2v-2z"/>111      </svg>112    </div>113    <div class="status-right">114      <!-- Battery -->115      <svg class="battery" viewBox="0 0 28 14">116        <rect x="1" y="1" width="22" height="12" rx="2" ry="2" fill="none" stroke="#fff" stroke-width="2"/>117        <rect x="3" y="3" width="16" height="8" fill="#fff"/>118        <rect x="24" y="4" width="3" height="6" rx="1" fill="#fff"/>119      </svg>120    </div>121  </div>122 123  <!-- App bar -->124  <div class="app-bar">125    <div class="home-btn">126      <svg viewBox="0 0 24 24" width="84" height="84" fill="#fff">127        <path d="M12 3l9 8h-3v8h-12v-8H3l9-8z"/>128      </svg>129    </div>130 131    <div class="title-area">132      <!-- Avatar placeholder (image) -->133      <div class="avatar">[IMG: Profile/Camera]</div>134 135      <div class="title-text">136        <div class="title-line">137          <div class="main-title">Research</div>138          <svg viewBox="0 0 24 24" width="40" height="40" fill="#fff">139            <path d="M7 10l5 5 5-5H7z"/>140          </svg>141        </div>142        <div class="subtitle">Diaper</div>143      </div>144    </div>145 146    <div class="menu">147      <svg viewBox="0 0 24 24" width="80" height="80" stroke="#fff" stroke-width="2" fill="none">148        <path d="M4 6h16M4 12h16M4 18h16"/>149      </svg>150    </div>151  </div>152 153  <!-- Content area -->154  <div class="content">155    <div class="today">Today 08:44 AM</div>156 157    <div class="options">158      <div class="circle-option">BM</div>159      <div class="circle-option active">Wet</div>160      <div class="circle-option">Dry</div>161    </div>162 163    <div class="label-row">164      <div class="label">Notes:</div>165      <div class="notes-line"></div>166    </div>167 168    <div class="check-row">169      <div class="name">Diaper Leak</div>170      <div class="checkbox checked">171        <svg viewBox="0 0 24 24" width="40" height="40" fill="#2f2f2f">172          <path d="M9 16l-3-3 1.5-1.5L9 13l7.5-7.5L18 7l-9 9z"/>173        </svg>174      </div>175    </div>176 177    <div class="check-row">178      <div class="name">Open-Air Accident</div>179      <div class="checkbox"></div>180    </div>181 182    <div class="check-row">183      <div class="name">Diaper Cream</div>184      <div class="checkbox"></div>185    </div>186 187    <div class="quantity-row">188      <div class="qty-label">Quantity:</div>189      <div class="qty-item">190        <svg viewBox="0 0 24 24" width="44" height="44" fill="#fff"><path d="M12 2c3 4 6 6 6 10a6 6 0 0 1-12 0c0-4 3-6 6-10z"/></svg>191        <span>Small</span>192      </div>193      <div class="qty-item">194        <svg viewBox="0 0 24 24" width="44" height="44" fill="#fff"><path d="M9 2c3 4 5 6 5 10a5 5 0 0 1-10 0c0-4 2-6 5-10z"/></svg>195        <svg viewBox="0 0 24 24" width="44" height="44" fill="#fff" style="margin-left:-8px;"><path d="M9 2c3 4 5 6 5 10a5 5 0 0 1-10 0c0-4 2-6 5-10z"/></svg>196        <span>Medium</span>197      </div>198      <div class="qty-item">199        <svg viewBox="0 0 24 24" width="44" height="44" fill="#fff"><path d="M12 2c3 4 6 6 6 10a6 6 0 0 1-12 0c0-4 3-6 6-10z"/></svg>200        <svg viewBox="0 0 24 24" width="44" height="44" fill="#fff" style="margin-left:-8px;"><path d="M12 2c3 4 6 6 6 10a6 6 0 0 1-12 0c0-4 3-6 6-10z"/></svg>201        <span>Large</span>202      </div>203    </div>204 205    <div class="photos">206      <svg viewBox="0 0 24 24" width="72" height="72" fill="#fff">207        <path d="M9 3l2-2h2l2 2h4v16H3V3h6zm3 4a5 5 0 1 0 0 10 5 5 0 0 0 0-10z"/>208      </svg>209      <div class="txt">ADD PHOTOS</div>210    </div>211  </div>212 213  <!-- Save button -->214  <div class="save-bar">215    <div class="save-btn">Save</div>216  </div>217 218</div>219</body>220</html>