GD-ML/AndroidCode
13.4k
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>Rendered UI</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #121212;15 border-radius: 24px;16 box-shadow: 0 20px 60px rgba(0,0,0,0.45);17 color: #fff;18 }19 20 /* Header */21 .app-header {22 position: absolute;23 top: 0;24 left: 0;25 right: 0;26 height: 220px;27 background: #1f4c81;28 }29 .status {30 height: 88px;31 display: flex;32 align-items: center;33 justify-content: space-between;34 padding: 0 32px;35 font-size: 34px;36 color: #fff;37 opacity: 0.95;38 }39 .status .right-icons {40 display: flex;41 gap: 24px;42 align-items: center;43 }44 .toolbar {45 height: 132px;46 display: flex;47 align-items: center;48 padding: 0 28px;49 color: #fff;50 }51 .toolbar .title {52 font-size: 56px;53 font-weight: 600;54 margin-left: 20px;55 letter-spacing: 0.5px;56 }57 .toolbar .actions {58 margin-left: auto;59 display: flex;60 gap: 36px;61 align-items: center;62 }63 .icon-btn {64 width: 64px;65 height: 64px;66 display: inline-flex;67 align-items: center;68 justify-content: center;69 }70 .icon-btn svg { width: 64px; height: 64px; fill: none; stroke: #ffffff; stroke-width: 4; }71 72 /* Alert banner */73 .alert {74 position: absolute;75 top: 220px;76 left: 0;77 width: 100%;78 height: 120px;79 background: #181818;80 display: flex;81 align-items: center;82 padding: 0 32px;83 box-shadow: inset 0 -1px 0 rgba(255,255,255,0.08);84 }85 .alert .alert-icon {86 width: 48px;87 height: 48px;88 margin-right: 18px;89 }90 .alert .alert-text {91 font-size: 36px;92 color: #e53935;93 flex: 1;94 }95 .alert .enable-btn {96 background: #3a7bd5;97 color: #fff;98 border: none;99 border-radius: 8px;100 padding: 18px 32px;101 font-size: 34px;102 box-shadow: 0 3px 0 rgba(0,0,0,0.25);103 }104 105 /* Modal card */106 .modal {107 position: absolute;108 left: 60px;109 top: 720px;110 width: 960px;111 background: #3b3b3b;112 border: 1px solid #505050;113 border-radius: 8px;114 box-shadow: 0 24px 48px rgba(0,0,0,0.6);115 }116 .modal-header {117 height: 120px;118 display: flex;119 align-items: center;120 padding: 0 24px;121 gap: 24px;122 color: #e0e0e0;123 }124 .modal-header .select {125 color: #58a6ff;126 font-size: 40px;127 font-weight: 500;128 }129 .modal-header .tag {130 border: 1px solid #616161;131 padding: 12px 16px;132 border-radius: 4px;133 font-size: 38px;134 color: #ffffff;135 background: #454545;136 }137 .modal-header .chev {138 margin-left: auto;139 }140 .modal-header .chev svg {141 width: 42px; height: 42px; stroke: #cfcfcf; stroke-width: 5;142 }143 .modal .divider {144 height: 4px;145 background: #2196f3;146 }147 .modal .row {148 display: flex;149 align-items: center;150 padding: 26px 24px;151 gap: 28px;152 color: #e0e0e0;153 }154 .modal .label {155 font-size: 36px;156 color: #c7c7c7;157 min-width: 220px;158 }159 .underline-input {160 flex: 0 0 320px;161 font-size: 48px;162 color: #ffffff;163 padding-bottom: 8px;164 border-bottom: 3px solid #dcdcdc;165 text-align: center;166 }167 .unit {168 font-size: 36px;169 color: #cfcfcf;170 margin-left: auto;171 margin-right: 12px;172 }173 .select-box {174 flex: 0 0 520px;175 display: flex;176 align-items: center;177 justify-content: space-between;178 background: #444444;179 border: 1px solid #666666;180 border-radius: 6px;181 color: #ffffff;182 font-size: 40px;183 padding: 18px 22px;184 }185 .select-box .chev-sm svg {186 width: 32px; height: 32px; stroke: #d6d6d6; stroke-width: 4;187 }188 189 /* Toggle */190 .toggle {191 width: 160px;192 height: 64px;193 background: #7b7b7b;194 border-radius: 32px;195 position: relative;196 margin-left: 8px;197 }198 .toggle .knob {199 width: 64px;200 height: 64px;201 background: #cfcfcf;202 border-radius: 50%;203 position: absolute;204 left: 6px;205 top: 0;206 box-shadow: 0 2px 6px rgba(0,0,0,0.35);207 }208 209 /* Modal footer buttons */210 .modal-footer {211 display: flex;212 gap: 28px;213 padding: 24px;214 }215 .btn {216 flex: 1;217 height: 120px;218 border-radius: 6px;219 display: flex;220 align-items: center;221 justify-content: center;222 font-size: 46px;223 font-weight: 600;224 box-shadow: 0 4px 0 rgba(0,0,0,0.35);225 }226 .btn.cancel { background: #c62828; color: #ffffff; }227 .btn.done { background: #2196f3; color: #ffffff; }228 229 /* Bottom content mock */230 .sticker-bar {231 position: absolute;232 left: 60px;233 bottom: 160px;234 width: 960px;235 height: 160px;236 background: #E0E0E0;237 border: 1px solid #BDBDBD;238 display: flex;239 align-items: center;240 justify-content: center;241 color: #757575;242 font-size: 36px;243 }244 245 .home-indicator {246 position: absolute;247 bottom: 48px;248 left: 50%;249 transform: translateX(-50%);250 width: 240px;251 height: 12px;252 border-radius: 6px;253 background: #ffffff;254 opacity: 0.85;255 }256 257 /* Simple utility for small icons/text */258 .muted { opacity: 0.85; }259</style>260</head>261<body>262<div id="render-target">263 264 <!-- Header -->265 <div class="app-header">266 <div class="status">267 <div class="left muted">11:29 84°</div>268 <div class="right-icons">269 <!-- Wifi icon -->270 <svg viewBox="0 0 24 24">271 <path d="M2 8c5-4 15-4 20 0M5 11c3-3 11-3 14 0M9 15c2-2 6-2 8 0M12 18l2 2-2 2-2-2 2-2z" stroke="#fff" fill="none" stroke-linecap="round" stroke-linejoin="round"/>272 </svg>273 <!-- Signal icon -->274 <svg viewBox="0 0 24 24">275 <path d="M3 21h3v-6H3v6zm5 0h3v-9H8v9zm5 0h3v-12h-3v12zm5 0h3V3h-3v18z" stroke="#fff" fill="none"/>276 </svg>277 <!-- Battery icon -->278 <svg viewBox="0 0 32 18">279 <rect x="1" y="3" width="26" height="12" rx="2" stroke="#fff" fill="none" stroke-width="2"/>280 <rect x="3" y="5" width="18" height="8" fill="#ffffff"/>281 <rect x="27" y="7" width="4" height="4" rx="1" fill="#ffffff"/>282 </svg>283 </div>284 </div>285 <div class="toolbar">286 <!-- Hamburger -->287 <div class="icon-btn" aria-label="Menu">288 <svg viewBox="0 0 24 24">289 <path d="M3 6h18M3 12h18M3 18h18" stroke="#fff" stroke-width="3" stroke-linecap="round"/>290 </svg>291 </div>292 <div class="title">Tasks</div>293 <div class="actions">294 <!-- Plus in circle (reminder add) -->295 <div class="icon-btn" aria-label="Add">296 <svg viewBox="0 0 24 24">297 <circle cx="12" cy="12" r="10" stroke="#fff"/>298 <path d="M12 7v10M7 12h10" stroke="#fff" stroke-linecap="round"/>299 </svg>300 </div>301 <!-- Check circle -->302 <div class="icon-btn" aria-label="Check">303 <svg viewBox="0 0 24 24">304 <circle cx="12" cy="12" r="10" stroke="#fff"/>305 <path d="M7 12l3 3 7-7" stroke="#fff" stroke-linecap="round" stroke-linejoin="round"/>306 </svg>307 </div>308 <!-- Search -->309 <div class="icon-btn" aria-label="Search">310 <svg viewBox="0 0 24 24">311 <circle cx="11" cy="11" r="7" stroke="#fff"/>312 <path d="M20 20l-4-4" stroke="#fff" stroke-linecap="round"/>313 </svg>314 </div>315 </div>316 </div>317 </div>318 319 <!-- Alert banner -->320 <div class="alert">321 <div class="alert-icon">322 <svg viewBox="0 0 48 48">323 <circle cx="24" cy="24" r="22" fill="#e53935"/>324 <rect x="22" y="12" width="4" height="16" fill="#ffffff"/>325 <rect x="22" y="30" width="4" height="6" fill="#ffffff"/>326 </svg>327 </div>328 <div class="alert-text">Please allow app to send you notification</div>329 <button class="enable-btn">Enable</button>330 </div>331 332 <!-- Modal dialog -->333 <div class="modal">334 <div class="modal-header">335 <div class="select">Select</div>336 <div class="tag">REPEAT HOURLY</div>337 <div class="chev">338 <svg viewBox="0 0 24 24">339 <path d="M5 9l7 7 7-7" fill="none" stroke-linecap="round" stroke-linejoin="round"/>340 </svg>341 </div>342 </div>343 <div class="divider"></div>344 345 <div class="row">346 <div class="label">EVERY</div>347 <div class="underline-input">1</div>348 <div class="unit">hour</div>349 </div>350 351 <div class="row">352 <div class="label">REPEAT ON:</div>353 <div class="select-box">354 <span>Everyday</span>355 <span class="chev-sm">356 <svg viewBox="0 0 24 24">357 <path d="M5 9l7 7 7-7" fill="none" stroke-linecap="round" stroke-linejoin="round"/>358 </svg>359 </span>360 </div>361 </div>362 363 <div class="row">364 <div class="label">ENDS:</div>365 <div class="select-box">366 <span>Never</span>367 <span class="chev-sm">368 <svg viewBox="0 0 24 24">369 <path d="M5 9l7 7 7-7" fill="none" stroke-linecap="round" stroke-linejoin="round"/>370 </svg>371 </span>372 </div>373 </div>374 375 <div class="row">376 <div class="label">DO NOT DISTURB:</div>377 <div class="toggle" aria-label="toggle">378 <div class="knob"></div>379 </div>380 </div>381 382 <div class="modal-footer">383 <div class="btn cancel">Cancel</div>384 <div class="btn done">Done</div>385 </div>386 </div>387 388 <!-- Bottom sticker bar placeholder -->389 <div class="sticker-bar">[IMG: Sticker bar with emoji icons]</div>390 391 <!-- Home indicator -->392 <div class="home-indicator"></div>393 394</div>395</body>396</html>