GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>Generated UI</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8 #render-target {9 width: 1080px;10 height: 2400px;11 position: relative;12 overflow: hidden;13 background: #0f2e3a; /* dark bluish background */14 color: #d8e6ed;15 }16 17 /* Status bar */18 .status-bar {19 height: 120px;20 padding: 0 40px;21 display: flex;22 align-items: center;23 justify-content: space-between;24 color: #d7e5ea;25 font-size: 38px;26 letter-spacing: 0.5px;27 }28 .status-right { display: flex; align-items: center; gap: 26px; }29 .status-dot { width: 10px; height: 10px; border-radius: 50%; background: #cfd8dc; opacity: 0.7; }30 .battery {31 width: 50px; height: 26px; border: 3px solid #cfd8dc; border-radius: 6px; position: relative;32 }33 .battery::after {34 content: ""; position: absolute; right: -8px; top: 6px; width: 6px; height: 14px; background: #cfd8dc; border-radius: 2px;35 }36 .battery-fill { position: absolute; left: 3px; top: 3px; height: 18px; width: 30px; background: #cfd8dc; }37 38 /* Toolbar */39 .toolbar {40 height: 120px;41 padding: 0 28px;42 display: flex;43 align-items: center;44 justify-content: space-between;45 border-bottom: 1px solid rgba(255,255,255,0.06);46 }47 .toolbar-left { display: flex; align-items: center; gap: 24px; }48 .toolbar-right { display: flex; align-items: center; gap: 36px; }49 .icon-btn svg { width: 56px; height: 56px; fill: none; stroke: #9fb6c1; stroke-width: 3.5; }50 51 /* Content area */52 .content {53 padding: 40px 48px 0 48px;54 }55 .label {56 color: #9fb6c1;57 font-weight: 700;58 font-size: 40px;59 margin-bottom: 22px;60 }61 .field {62 position: relative;63 margin-bottom: 36px;64 }65 .field .value {66 font-size: 52px;67 color: #eaf1f4;68 line-height: 1.3;69 }70 .underline {71 margin-top: 16px;72 border-bottom: 3px solid rgba(255,255,255,0.25);73 }74 .field .suffix-icons {75 position: absolute; right: 0; top: 8px; display: flex; align-items: center; gap: 26px;76 }77 .suffix-icons .circle {78 width: 76px; height: 76px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.25);79 display: flex; align-items: center; justify-content: center;80 }81 .suffix-icons svg { width: 40px; height: 40px; stroke: #b3c6cf; stroke-width: 3; fill: none; }82 .checkbox-row {83 margin-top: 28px; display: flex; align-items: center; gap: 24px; color: #b3c6cf; font-size: 42px;84 }85 .checkbox {86 width: 54px; height: 54px; border: 3px solid #a4bac5; border-radius: 8px;87 }88 89 .section-title {90 margin-top: 60px;91 color: #9fb6c1;92 font-weight: 700;93 font-size: 40px;94 }95 96 .notif-link {97 color: #88b1c8;98 font-size: 40px;99 text-decoration: underline;100 margin-top: 26px;101 }102 .helper {103 margin-top: 10px;104 font-size: 34px;105 color: #c0d1da;106 opacity: 0.85;107 }108 109 /* Bottom sheet (Share) */110 .share-sheet {111 position: absolute;112 left: 0;113 bottom: 0;114 width: 1080px;115 height: 1040px;116 background: #1d1b17;117 border-top-left-radius: 28px;118 border-top-right-radius: 28px;119 box-shadow: 0 -20px 40px rgba(0,0,0,0.5);120 color: #efe9dd;121 }122 .sheet-handle {123 width: 120px; height: 12px; border-radius: 12px; background: rgba(255,255,255,0.2);124 margin: 18px auto 24px auto;125 }126 .sheet-title {127 text-align: center;128 font-size: 44px;129 color: #efe9dd;130 margin: 20px 40px 40px 40px;131 }132 .action-row {133 display: flex; justify-content: center; gap: 28px; margin-bottom: 40px;134 }135 .pill-btn {136 display: inline-flex; align-items: center; gap: 18px;137 border: 3px solid #c7a765;138 color: #f0e5c8;139 padding: 20px 34px;140 border-radius: 18px;141 font-size: 40px;142 background: transparent;143 }144 .pill-btn svg { width: 42px; height: 42px; stroke: #c7a765; stroke-width: 3.5; fill: none; }145 .recommend {146 text-align: center; color: #bfb6a6; font-size: 38px; margin-top: 18px;147 }148 .share-grid {149 margin-top: 34px;150 display: flex; justify-content: space-around; padding: 0 40px;151 }152 .share-item { display: flex; flex-direction: column; align-items: center; gap: 16px; }153 .share-icon {154 width: 150px; height: 150px; border-radius: 75px;155 background: #E0E0E0; border: 1px solid #BDBDBD;156 display: flex; align-items: center; justify-content: center; color: #757575; text-align: center; font-size: 24px; padding: 6px;157 }158 .share-label { color: #f2ead6; font-size: 34px; }159 160 /* Bottom gesture bar */161 .gesture {162 position: absolute; left: 50%; transform: translateX(-50%);163 bottom: 18px; width: 380px; height: 14px; border-radius: 12px; background: rgba(255,255,255,0.8);164 }165</style>166</head>167<body>168<div id="render-target">169 170 <!-- Status Bar -->171 <div class="status-bar">172 <div>9:26</div>173 <div class="status-right">174 <div class="status-dot"></div>175 <div class="status-dot"></div>176 <div class="status-dot"></div>177 <div class="battery"><div class="battery-fill"></div></div>178 </div>179 </div>180 181 <!-- Toolbar -->182 <div class="toolbar">183 <div class="toolbar-left">184 <div class="icon-btn">185 <svg viewBox="0 0 56 56"><path d="M34 8 L16 28 L34 48"></path><path d="M16 28 H52"></path></svg>186 </div>187 </div>188 <div class="toolbar-right">189 <div class="icon-btn">190 <!-- share icon -->191 <svg viewBox="0 0 56 56">192 <circle cx="12" cy="28" r="6"></circle>193 <circle cx="44" cy="16" r="6"></circle>194 <circle cx="44" cy="40" r="6"></circle>195 <path d="M18 28 L38 18"></path>196 <path d="M18 28 L38 38"></path>197 </svg>198 </div>199 <div class="icon-btn">200 <!-- trash icon -->201 <svg viewBox="0 0 56 56">202 <path d="M12 16 H44"></path>203 <path d="M20 12 H36"></path>204 <rect x="16" y="18" width="24" height="28" rx="4" ry="4"></rect>205 </svg>206 </div>207 </div>208 </div>209 210 <!-- Content -->211 <div class="content">212 <div class="label">What is to be done?</div>213 <div class="field">214 <div class="value">Buying New Balance Hiking shoes</div>215 <div class="underline"></div>216 <div class="suffix-icons">217 <div class="circle">218 <!-- mic icon -->219 <svg viewBox="0 0 40 40">220 <rect x="12" y="6" width="16" height="18" rx="8"></rect>221 <path d="M20 24 V32"></path>222 <path d="M12 20 C12 28 28 28 28 20"></path>223 </svg>224 </div>225 </div>226 </div>227 228 <div class="checkbox-row">229 <div class="checkbox"></div>230 <div>Task finished?</div>231 </div>232 233 <div class="section-title">Due date</div>234 235 <div class="field" style="margin-top:26px;">236 <div class="value">Tomorrow</div>237 <div class="underline"></div>238 <div class="suffix-icons">239 <div class="circle">240 <!-- calendar -->241 <svg viewBox="0 0 40 40">242 <rect x="6" y="10" width="28" height="22" rx="4"></rect>243 <path d="M10 10 V6"></path>244 <path d="M30 10 V6"></path>245 <path d="M6 16 H34"></path>246 </svg>247 </div>248 <div class="circle">249 <!-- close X -->250 <svg viewBox="0 0 40 40">251 <circle cx="20" cy="20" r="18"></circle>252 <path d="M13 13 L27 27"></path>253 <path d="M27 13 L13 27"></path>254 </svg>255 </div>256 </div>257 </div>258 259 <div class="field" style="margin-top:24px;">260 <div class="value">2:00 PM</div>261 <div class="underline"></div>262 <div class="suffix-icons">263 <div class="circle">264 <!-- clock -->265 <svg viewBox="0 0 40 40">266 <circle cx="20" cy="20" r="16"></circle>267 <path d="M20 10 V21"></path>268 <path d="M20 21 L28 24"></path>269 </svg>270 </div>271 <div class="circle">272 <!-- close X -->273 <svg viewBox="0 0 40 40">274 <circle cx="20" cy="20" r="18"></circle>275 <path d="M13 13 L27 27"></path>276 <path d="M27 13 L13 27"></path>277 </svg>278 </div>279 </div>280 </div>281 282 <div class="notif-link">Notifications</div>283 <div class="helper">Day summary on the same day at 8:00 AM.</div>284 <div class="helper">Individual notification on time.</div>285 </div>286 287 <!-- Share Sheet Bottom Panel -->288 <div class="share-sheet">289 <div class="sheet-handle"></div>290 <div class="sheet-title">Buying New Balance Hiking shoes (22 Dec 2023, 14:00)</div>291 292 <div class="action-row">293 <div class="pill-btn">294 <svg viewBox="0 0 42 42">295 <rect x="8" y="8" width="22" height="26" rx="3"></rect>296 <path d="M13 8 H28"></path>297 </svg>298 <span>Copy</span>299 </div>300 <div class="pill-btn">301 <svg viewBox="0 0 42 42">302 <path d="M10 14 L20 28 L30 14"></path>303 <path d="M10 28 L20 14 L30 28"></path>304 </svg>305 <span>Nearby</span>306 </div>307 </div>308 309 <div class="recommend">No recommended people to share with</div>310 311 <div class="share-grid">312 <div class="share-item">313 <div class="share-icon">[IMG: Gmail Logo]</div>314 <div class="share-label">Gmail</div>315 </div>316 <div class="share-item">317 <div class="share-icon">[IMG: Messages Logo]</div>318 <div class="share-label">Messages</div>319 </div>320 <div class="share-item">321 <div class="share-icon">[IMG: Google Drive Logo]</div>322 <div class="share-label">Drive</div>323 </div>324 <div class="share-item">325 <div class="share-icon">[IMG: Keep Notes Logo]</div>326 <div class="share-label">Keep Notes</div>327 </div>328 </div>329 </div>330 331 <div class="gesture"></div>332</div>333</body>334</html>