GD-ML/AndroidCode

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>UI Render</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #f4f4f4;15    font-family: Arial, Helvetica, sans-serif;16    color: #111;17  }18 19  /* Status bar */20  .status-bar {21    position: absolute;22    top: 20px;23    left: 30px;24    right: 30px;25    height: 80px;26    display: flex;27    align-items: center;28    justify-content: space-between;29    color: #fff;30    z-index: 1;31  }32  .status-left { font-size: 44px; font-weight: 600; }33  .status-right {34    display: flex; align-items: center; gap: 20px;35    font-size: 36px; font-weight: 600;36  }37  .battery {38    display: inline-flex; align-items: center; gap: 10px;39    color: #fff;40  }41  .battery svg { width: 50px; height: 34px; }42 43  /* Main editor area */44  .editor {45    position: absolute;46    top: 120px;47    left: 40px;48    right: 40px;49    z-index: 1;50  }51 52  .close-icon {53    position: absolute;54    top: 140px;55    left: 30px;56    width: 80px; height: 80px;57  }58  .top-actions {59    position: absolute;60    top: 160px;61    right: 40px;62    display: flex;63    align-items: center;64    gap: 40px;65  }66  .icon-btn svg { width: 66px; height: 66px; }67 68  .title {69    margin-top: 230px;70    font-size: 96px;71    font-weight: 700;72    color: #111;73  }74  .underline {75    height: 3px;76    background: #1e4a79;77    margin: 16px 0 30px 0;78    opacity: 0.8;79  }80  .field {81    font-size: 48px;82    color: #2b2b2b;83    display: flex; align-items: center; justify-content: space-between;84    padding-right: 20px;85  }86  .field .placeholder { color: #777; }87  .field .pin svg { width: 46px; height: 46px; }88  .field + .underline { margin-bottom: 50px; }89 90  .row {91    display: flex; align-items: center; justify-content: space-between;92    margin-top: 40px;93  }94  .row-left { display: flex; align-items: center; gap: 25px; }95  .row-left .label { font-size: 54px; font-weight: 700; }96  .clock-icon svg { width: 58px; height: 58px; }97 98  /* Toggle */99  .toggle {100    width: 140px; height: 68px;101    background: #b04a45;102    border-radius: 34px;103    position: relative;104    box-shadow: 0 6px 10px rgba(0,0,0,0.25);105  }106  .toggle::after {107    content: "";108    position: absolute;109    right: 6px; top: 6px;110    width: 56px; height: 56px;111    background: #8e1f19;112    border-radius: 50%;113    box-shadow: 0 2px 4px rgba(0,0,0,0.2);114  }115 116  .date {117    margin-top: 40px;118    font-size: 46px;119    color: #2b2b2b;120  }121 122  /* Dim overlay */123  .overlay {124    position: absolute; inset: 0;125    background: rgba(0,0,0,0.62);126    z-index: 2;127  }128 129  /* Bottom sheet */130  .sheet {131    position: absolute;132    left: 0; right: 0;133    top: 980px;134    height: 1360px;135    background: #fff;136    border-top-left-radius: 50px;137    border-top-right-radius: 50px;138    z-index: 3;139    box-shadow: 0 -10px 30px rgba(0,0,0,0.25);140    padding: 40px 48px 30px 48px;141  }142  .option {143    display: flex; align-items: center;144    gap: 40px;145    padding: 36px 0;146    border-bottom: 1px solid transparent;147  }148  .radio {149    width: 54px; height: 54px;150    border: 6px solid #cf3f31;151    border-radius: 50%;152    box-sizing: border-box;153  }154  .option .text {155    font-size: 48px; color: #000;156  }157 158  /* System navigation bar */159  .nav-bar {160    position: absolute;161    bottom: 0; left: 0; right: 0;162    height: 140px;163    background: #000;164    z-index: 1;165  }166  .nav-handle {167    position: absolute;168    bottom: 40px; left: 50%;169    transform: translateX(-50%);170    width: 220px; height: 20px;171    background: #bdbdbd;172    border-radius: 10px;173  }174</style>175</head>176<body>177<div id="render-target">178 179  <!-- Status bar -->180  <div class="status-bar">181    <div class="status-left">8:35</div>182    <div class="status-right">183      <div class="battery">184        <svg viewBox="0 0 80 40">185          <rect x="2" y="6" width="64" height="28" rx="6" ry="6" fill="none" stroke="#fff" stroke-width="4"></rect>186          <rect x="68" y="14" width="10" height="12" rx="2" fill="#fff"></rect>187          <path d="M28 30 L38 10 L24 10 L34 30 Z" fill="#fff"></path>188        </svg>189        <span>100%</span>190      </div>191    </div>192  </div>193 194  <!-- Close icon -->195  <div class="close-icon">196    <svg viewBox="0 0 80 80">197      <path d="M16 16 L64 64 M64 16 L16 64" stroke="#000" stroke-width="8" stroke-linecap="round" />198    </svg>199  </div>200 201  <!-- Right-top actions -->202  <div class="top-actions">203    <div class="icon-btn">204      <svg viewBox="0 0 66 66">205        <circle cx="33" cy="33" r="22" fill="none" stroke="#1e4a79" stroke-width="8"></circle>206        <circle cx="33" cy="33" r="10" fill="#1e4a79"></circle>207      </svg>208    </div>209    <div class="icon-btn">210      <svg viewBox="0 0 60 60">211        <path d="M12 32 L24 44 L48 18" stroke="#000" stroke-width="8" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>212      </svg>213    </div>214    <div class="icon-btn">215      <svg viewBox="0 0 20 60">216        <circle cx="10" cy="12" r="4" fill="#000"></circle>217        <circle cx="10" cy="30" r="4" fill="#000"></circle>218        <circle cx="10" cy="48" r="4" fill="#000"></circle>219      </svg>220    </div>221  </div>222 223  <!-- Editor content -->224  <div class="editor">225    <div class="title">Holi</div>226    <div class="underline"></div>227 228    <div class="field">229      <div>India</div>230      <div class="pin">231        <svg viewBox="0 0 48 48">232          <path d="M24 4 C14 4 8 11 8 20 C8 31 24 44 24 44 C24 44 40 31 40 20 C40 11 34 4 24 4 Z" fill="none" stroke="#1e4a79" stroke-width="3"></path>233          <circle cx="24" cy="20" r="6" fill="none" stroke="#1e4a79" stroke-width="3"></circle>234        </svg>235      </div>236    </div>237    <div class="underline"></div>238 239    <div class="field">240      <div class="placeholder">Description</div>241    </div>242    <div class="underline"></div>243 244    <div class="row">245      <div class="row-left">246        <div class="clock-icon">247          <svg viewBox="0 0 60 60">248            <circle cx="30" cy="30" r="24" fill="none" stroke="#000" stroke-width="4"></circle>249            <path d="M30 14 L30 32 L44 32" stroke="#000" stroke-width="4" stroke-linecap="round"></path>250          </svg>251        </div>252        <div class="label">All–day</div>253      </div>254      <div class="toggle"></div>255    </div>256 257    <div class="date">Wed 23 Aug 2023</div>258  </div>259 260  <!-- Dim overlay -->261  <div class="overlay"></div>262 263  <!-- Bottom sheet with reminder options -->264  <div class="sheet">265    <div class="option">266      <div class="radio"></div>267      <div class="text">At start</div>268    </div>269    <div class="option">270      <div class="radio"></div>271      <div class="text">5 minutes before</div>272    </div>273    <div class="option">274      <div class="radio"></div>275      <div class="text">10 minutes before</div>276    </div>277    <div class="option">278      <div class="radio"></div>279      <div class="text">15 minutes before</div>280    </div>281    <div class="option">282      <div class="radio"></div>283      <div class="text">20 minutes before</div>284    </div>285    <div class="option">286      <div class="radio"></div>287      <div class="text">1 hour before</div>288    </div>289    <div class="option">290      <div class="radio"></div>291      <div class="text">1 day before</div>292    </div>293    <div class="option">294      <div class="radio"></div>295      <div class="text">Custom…</div>296    </div>297  </div>298 299  <!-- System navigation bar -->300  <div class="nav-bar">301    <div class="nav-handle"></div>302  </div>303 304</div>305</body>306</html>