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: #e8eef6; /* light bluish background */14    font-family: Arial, Helvetica, sans-serif;15    color: #111;16  }17 18  /* Status bar */19  .status-bar {20    position: absolute;21    top: 0;22    left: 0;23    width: 100%;24    height: 120px;25    padding: 0 48px;26    display: flex;27    align-items: center;28    justify-content: space-between;29    color: #fff;30    font-size: 40px;31    letter-spacing: 1px;32  }33  .battery {34    display: flex;35    align-items: center;36    gap: 14px;37  }38  .battery svg { width: 46px; height: 26px; }39 40  /* Top actions */41  .top-actions {42    position: absolute;43    top: 140px;44    left: 48px;45    right: 48px;46    display: flex;47    align-items: center;48    justify-content: space-between;49  }50  .left-x svg { width: 72px; height: 72px; stroke: #111; stroke-width: 12; }51  .right-actions {52    display: flex;53    align-items: center;54    gap: 40px;55  }56  .radio {57    width: 80px;58    height: 80px;59    border-radius: 50%;60    border: 10px solid #5c8df4;61    box-sizing: border-box;62    position: relative;63  }64  .radio::after {65    content: "";66    position: absolute;67    top: 18px; left: 18px;68    width: 24px; height: 24px;69    border-radius: 50%;70    border: 8px solid #5c8df4;71    background: transparent;72  }73  .check svg { width: 72px; height: 72px; stroke: #111; stroke-width: 16; fill: none; }74  .kebab svg { width: 18px; height: 72px; fill: #111; }75 76  /* Form fields */77  .content {78    position: absolute;79    top: 280px;80    left: 48px;81    right: 48px;82  }83  .field {84    margin-bottom: 50px;85  }86  .field .label {87    font-size: 64px;88    font-weight: 700;89    margin-bottom: 16px;90  }91  .underline {92    height: 2px;93    background: #4a84e8;94    width: 100%;95  }96  .subfield {97    font-size: 48px;98    color: #222;99    margin-top: 30px;100    display: flex;101    align-items: center;102    justify-content: space-between;103  }104  .placeholder {105    font-size: 48px;106    color: #9aa3aa;107    margin-top: 30px;108  }109 110  /* Icons inline sizes */111  .icon {112    display: inline-flex;113    align-items: center;114  }115  .icon svg { width: 52px; height: 52px; }116 117  /* All-day row */118  .row {119    display: flex;120    align-items: center;121    justify-content: space-between;122    margin-top: 70px;123  }124  .row-left {125    display: flex;126    align-items: center;127    gap: 28px;128  }129  .row-left .title {130    font-size: 50px;131    font-weight: 700;132  }133  .dates {134    font-size: 46px;135    color: #222;136    margin: 40px 0;137    line-height: 1.8;138  }139 140  /* Toggle */141  .toggle {142    width: 160px;143    height: 64px;144    background: #e8a9a5;145    border-radius: 32px;146    position: relative;147    box-shadow: 0 2px 6px rgba(0,0,0,0.2);148  }149  .toggle::after {150    content: "";151    position: absolute;152    right: 4px; top: 4px;153    width: 56px; height: 56px;154    background: #c53929;155    border-radius: 50%;156  }157 158  /* Repeat row */159  .repeat-row {160    display: flex;161    align-items: center;162    gap: 28px;163    margin-top: 90px;164    font-size: 50px;165    font-weight: 700;166  }167 168  /* Notification row */169  .notif-row {170    display: flex;171    align-items: center;172    justify-content: space-between;173    margin-top: 90px;174  }175  .notif-left {176    display: flex;177    align-items: center;178    gap: 28px;179    font-size: 46px;180    color: #222;181  }182  .small-x svg { width: 64px; height: 64px; stroke: #111; stroke-width: 12; }183 184  .add-notif {185    margin-top: 40px;186    font-size: 46px;187    color: #9aa3aa;188    letter-spacing: 1px;189  }190 191  /* Bottom gesture bar */192  .gesture {193    position: absolute;194    bottom: 28px;195    left: 50%;196    transform: translateX(-50%);197    width: 360px;198    height: 12px;199    background: #d9d9d9;200    border-radius: 6px;201  }202</style>203</head>204<body>205<div id="render-target">206 207  <!-- Status bar -->208  <div class="status-bar">209    <div>8:34</div>210    <div class="battery">211      <svg viewBox="0 0 60 30">212        <rect x="2" y="6" width="50" height="18" rx="3" ry="3" fill="none" stroke="#fff" stroke-width="3"></rect>213        <rect x="54" y="10" width="6" height="10" rx="2" ry="2" fill="#fff"></rect>214        <rect x="6" y="9" width="44" height="12" fill="#fff"></rect>215      </svg>216      <span>100%</span>217    </div>218  </div>219 220  <!-- Top actions -->221  <div class="top-actions">222    <div class="left-x">223      <svg viewBox="0 0 100 100">224        <line x1="15" y1="15" x2="85" y2="85" />225        <line x1="85" y1="15" x2="15" y2="85" />226      </svg>227    </div>228    <div class="right-actions">229      <div class="radio"></div>230      <div class="check">231        <svg viewBox="0 0 100 100">232          <path d="M18 52 L42 76 L82 28" />233        </svg>234      </div>235      <div class="kebab">236        <svg viewBox="0 0 12 48">237          <circle cx="6" cy="8" r="6"></circle>238          <circle cx="6" cy="24" r="6"></circle>239          <circle cx="6" cy="40" r="6"></circle>240        </svg>241      </div>242    </div>243  </div>244 245  <!-- Content -->246  <div class="content">247 248    <div class="field">249      <div class="label">Holi</div>250      <div class="underline"></div>251    </div>252 253    <div class="subfield">254      <span>India</span>255      <span class="icon">256        <svg viewBox="0 0 24 24" fill="none" stroke="#5c8df4" stroke-width="2">257          <path d="M12 22s7-7 7-12a7 7 0 10-14 0c0 5 7 12 7 12z"></path>258          <circle cx="12" cy="10" r="3"></circle>259        </svg>260      </span>261    </div>262    <div class="underline"></div>263 264    <div class="placeholder">Description</div>265    <div class="underline"></div>266 267    <div class="row">268      <div class="row-left">269        <span class="icon">270          <svg viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2">271            <circle cx="12" cy="12" r="9"></circle>272            <path d="M12 12 L12 7"></path>273            <path d="M12 12 L16 14"></path>274          </svg>275        </span>276        <span class="title">All–day</span>277      </div>278      <div class="toggle"></div>279    </div>280 281    <div class="dates">282      Wed 23 Aug 2023<br><br>283      Wed 23 Aug 2023284    </div>285 286    <div class="repeat-row">287      <span class="icon">288        <svg viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2">289          <path d="M7 7h7a5 5 0 010 10h-1"></path>290          <polyline points="7,7 9,5 11,7"></polyline>291          <path d="M17 17H10a5 5 0 010-10h1"></path>292          <polyline points="17,17 15,19 13,17"></polyline>293        </svg>294      </span>295      <span>Does not repeat</span>296    </div>297 298    <div class="notif-row">299      <div class="notif-left">300        <span class="icon">301          <svg viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2">302            <path d="M12 22a2 2 0 002-2H10a2 2 0 002 2z"></path>303            <path d="M18 16V10a6 6 0 10-12 0v6l-2 2h16l-2-2z"></path>304          </svg>305        </span>306        <span>10 minutes before</span>307      </div>308      <div class="small-x">309        <svg viewBox="0 0 100 100">310          <line x1="20" y1="20" x2="80" y2="80" />311          <line x1="80" y1="20" x2="20" y2="80" />312        </svg>313      </div>314    </div>315 316    <div class="add-notif">Add notification</div>317  </div>318 319  <div class="gesture"></div>320</div>321</body>322</html>