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>Mobile UI - Snooze Dialog</title>7<style>8 body {9 margin: 0;10 padding: 0;11 background: transparent;12 font-family: "Roboto", Arial, Helvetica, sans-serif;13 }14 #render-target {15 width: 1080px;16 height: 2400px;17 position: relative;18 overflow: hidden;19 background: #0b1320;20 border-radius: 40px;21 }22 23 /* Wallpaper placeholder (full screen) */24 .wallpaper {25 position: absolute;26 inset: 0;27 background: #E0E0E0;28 border: 1px solid #BDBDBD;29 display: flex;30 align-items: center;31 justify-content: center;32 color: #757575;33 font-size: 28px;34 letter-spacing: 0.3px;35 }36 37 /* Status bar */38 .status-bar {39 position: absolute;40 top: 0;41 left: 0;42 width: 100%;43 height: 120px;44 padding: 24px 36px;45 box-sizing: border-box;46 color: #FFFFFF;47 }48 .status-left {49 position: absolute;50 left: 36px;51 top: 30px;52 display: flex;53 align-items: center;54 gap: 14px;55 color: #EAEAEA;56 font-size: 34px;57 }58 .status-right {59 position: absolute;60 right: 36px;61 top: 30px;62 display: flex;63 align-items: center;64 gap: 18px;65 color: #FFFFFF;66 font-size: 34px;67 }68 .icon {69 width: 40px;70 height: 40px;71 }72 .icon svg { width: 100%; height: 100%; }73 74 /* Notification card */75 .notif-card {76 position: absolute;77 left: 36px;78 top: 170px;79 width: 1008px;80 background: #2E2F34;81 color: #fff;82 border-radius: 36px;83 box-shadow: 0 12px 26px rgba(0,0,0,0.35);84 padding: 28px 32px 28px 32px;85 box-sizing: border-box;86 }87 .notif-row {88 display: flex;89 align-items: center;90 justify-content: space-between;91 }92 .notif-left {93 display: flex;94 align-items: center;95 gap: 22px;96 }97 .app-avatar {98 width: 68px;99 height: 68px;100 background: #E0E0E0;101 border: 1px solid #BDBDBD;102 border-radius: 50%;103 display: flex;104 align-items: center;105 justify-content: center;106 color: #757575;107 font-size: 18px;108 }109 .notif-title {110 font-size: 40px;111 font-weight: 600;112 line-height: 1.2;113 }114 .notif-sub {115 font-size: 30px;116 color: #BFC3C8;117 margin-top: 6px;118 }119 .chevron {120 width: 44px;121 height: 44px;122 opacity: 0.9;123 }124 .notif-actions {125 margin-top: 26px;126 display: flex;127 gap: 24px;128 }129 .pill {130 background: #F5F7F8;131 color: #24313F;132 border: 1px solid #D0D5DA;133 border-radius: 24px;134 padding: 24px 42px;135 font-size: 36px;136 font-weight: 700;137 letter-spacing: 1px;138 }139 140 /* App icons grid mock (background home icons) */141 .apps {142 position: absolute;143 top: 520px;144 left: 40px;145 width: 1000px;146 display: grid;147 grid-template-columns: repeat(5, 1fr);148 grid-gap: 40px 30px;149 }150 .app {151 display: flex;152 flex-direction: column;153 align-items: center;154 color: #3B3B3B;155 font-size: 26px;156 }157 .app .iconbox {158 width: 120px;159 height: 120px;160 background: #E0E0E0;161 border: 1px solid #BDBDBD;162 border-radius: 28px;163 display: flex;164 align-items: center;165 justify-content: center;166 color: #757575;167 font-size: 18px;168 margin-bottom: 10px;169 text-align: center;170 padding: 6px;171 box-sizing: border-box;172 }173 174 /* Snooze Modal */175 .snooze-modal {176 position: absolute;177 left: 36px;178 bottom: 560px;179 width: 1008px;180 border-radius: 32px;181 overflow: hidden;182 box-shadow: 0 24px 44px rgba(0,0,0,0.45);183 }184 .modal-top {185 background: #3E5377;186 padding: 26px 30px;187 color: #D8E1EA;188 font-size: 44px;189 text-align: center;190 font-weight: 600;191 }192 .modal-content {193 background: #E9EDF7;194 padding: 24px 26px 22px;195 box-sizing: border-box;196 }197 .current-time {198 font-size: 66px;199 font-weight: 800;200 color: #3A4C6E;201 text-align: center;202 margin: 16px 0 24px;203 }204 .grid {205 display: grid;206 grid-template-columns: repeat(5, 1fr);207 grid-gap: 28px 20px;208 margin-bottom: 30px;209 }210 .opt {211 background: #F3F6FF;212 border: 1px solid #D9DEEA;213 border-radius: 18px;214 padding: 20px 10px;215 text-align: center;216 color: #33435C;217 }218 .opt .num {219 font-size: 48px;220 font-weight: 700;221 margin-bottom: 6px;222 }223 .opt .unit {224 font-size: 28px;225 color: #66738A;226 }227 .modal-footer {228 display: flex;229 align-items: center;230 justify-content: space-between;231 padding: 12px 8px 10px;232 color: #425A7A;233 }234 .footer-actions a {235 font-size: 34px;236 margin-left: 26px;237 color: #3761A6;238 text-decoration: none;239 font-weight: 600;240 }241 .footer-actions a.primary { color: #1E5FFF; }242 243 /* Bottom dock and gesture bar */244 .dock {245 position: absolute;246 left: 60px;247 bottom: 160px;248 width: 960px;249 height: 128px;250 background: #121317;251 border-radius: 64px;252 box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05);253 display: flex;254 align-items: center;255 padding: 0 26px;256 box-sizing: border-box;257 color: #FFFFFF;258 gap: 20px;259 font-size: 36px;260 }261 .dock .chip {262 width: 52px;263 height: 52px;264 border-radius: 50%;265 background: #202227;266 }267 .gesture {268 position: absolute;269 bottom: 84px;270 left: 50%;271 transform: translateX(-50%);272 width: 220px;273 height: 12px;274 background: #FFFFFF;275 opacity: 0.9;276 border-radius: 6px;277 }278</style>279</head>280<body>281<div id="render-target">282 283 <div class="wallpaper">[IMG: Wallpaper Illustration]</div>284 285 <!-- Status Bar -->286 <div class="status-bar">287 <div class="status-left">288 <span class="icon">289 <svg viewBox="0 0 24 24" fill="#FFFFFF">290 <path d="M12 3c3.6 0 6.5 2.9 6.5 6.5S15.6 16 12 16s-6.5-2.9-6.5-6.5S8.4 3 12 3zm0 11a4.5 4.5 0 1 0 0-9 4.5 4.5 0 0 0 0 9z"/>291 <circle cx="12" cy="9.5" r="1.5" fill="#FFFFFF"/>292 </svg>293 </span>294 <span>Reminder</span>295 </div>296 <div class="status-right">297 <span class="icon">298 <svg viewBox="0 0 24 24" fill="#FFFFFF">299 <path d="M2 9c3.5-3.5 9.5-3.5 13 0l-1.5 1.5C10.5 7.5 6.5 7.5 4 10L2 9z"/>300 <path d="M6 12c2.3-2.3 6.1-2.3 8.4 0l-1.4 1.4c-1.8-1.8-4.7-1.8-6.5 0L6 12z"/>301 <path d="M10 15c1.1-1.1 2.9-1.1 4 0l-2 2-2-2z"/>302 </svg>303 </span>304 <span class="icon">305 <svg viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="2">306 <rect x="2" y="7" width="18" height="10" rx="2" ry="2"></rect>307 <rect x="21" y="10" width="2" height="4" fill="#FFFFFF" stroke="none"></rect>308 </svg>309 </span>310 <span>100%</span>311 </div>312 </div>313 314 <!-- Notification card -->315 <div class="notif-card">316 <div class="notif-row">317 <div class="notif-left">318 <div class="app-avatar">[IMG]</div>319 <div>320 <div class="notif-title">Meet & Greet</div>321 <div class="notif-sub">now</div>322 </div>323 </div>324 <div class="chevron">325 <svg viewBox="0 0 24 24" fill="#FFFFFF">326 <path d="M7 10l5 5 5-5H7z"></path>327 </svg>328 </div>329 </div>330 <div class="notif-actions">331 <div class="pill">SNOOZE</div>332 <div class="pill">DISMISS</div>333 </div>334 </div>335 336 <!-- App icons background grid (for realism) -->337 <div class="apps">338 <div class="app">339 <div class="iconbox">[IMG: Video Audio Icon]</div>340 <div>Video Audio</div>341 </div>342 <div class="app">343 <div class="iconbox">[IMG: Origami Web Icon]</div>344 <div>Origami We...</div>345 </div>346 <div class="app">347 <div class="iconbox">[IMG: Origami Icon]</div>348 <div>Origami</div>349 </div>350 <div class="app">351 <div class="iconbox">[IMG: Origy Icon]</div>352 <div>Origy</div>353 </div>354 <div class="app">355 <div class="iconbox">[IMG: Nykaa Icon]</div>356 <div>Nykaa</div>357 </div>358 <div class="app">359 <div class="iconbox">[IMG: Pinterest Icon]</div>360 <div>Pinterest</div>361 </div>362 <div class="app">363 <div class="iconbox">[IMG: Any.do Icon]</div>364 <div>Any.do</div>365 </div>366 <div class="app">367 <div class="iconbox">[IMG: Reminder Icon]</div>368 <div>Reminder</div>369 </div>370 <div class="app">371 <div class="iconbox">[IMG: Phone Icon]</div>372 <div>Phone</div>373 </div>374 <div class="app">375 <div class="iconbox">[IMG: Messages Icon]</div>376 <div>Messages</div>377 </div>378 </div>379 380 <!-- Snooze duration modal -->381 <div class="snooze-modal">382 <div class="modal-top">Snooze duration</div>383 <div class="modal-content">384 <div class="current-time">10 minutes</div>385 <div class="grid">386 <div class="opt"><div class="num">5</div><div class="unit">Min</div></div>387 <div class="opt"><div class="num">10</div><div class="unit">Min</div></div>388 <div class="opt"><div class="num">15</div><div class="unit">Min</div></div>389 <div class="opt"><div class="num">30</div><div class="unit">Min</div></div>390 <div class="opt"><div class="num">45</div><div class="unit">Min</div></div>391 392 <div class="opt"><div class="num">1</div><div class="unit">Hour</div></div>393 <div class="opt"><div class="num">2</div><div class="unit">Hour</div></div>394 <div class="opt"><div class="num">3</div><div class="unit">Hour</div></div>395 <div class="opt"><div class="num">6</div><div class="unit">Hour</div></div>396 <div class="opt"><div class="num">1</div><div class="unit">Day</div></div>397 </div>398 <div class="modal-footer">399 <div class="left-icon" style="width:56px;height:56px;">400 <svg viewBox="0 0 24 24" width="56" height="56">401 <rect x="3" y="5" width="15" height="13" rx="2" ry="2" fill="#647AA1"></rect>402 <rect x="3" y="8" width="15" height="1" fill="#E9EDF7"></rect>403 <rect x="6" y="3" width="2" height="4" fill="#E9EDF7"></rect>404 <rect x="13" y="3" width="2" height="4" fill="#E9EDF7"></rect>405 <path d="M20 13l3 3-6 6-3-3 6-6z" fill="#3E5377"></path>406 </svg>407 </div>408 <div class="footer-actions">409 <a href="#">Dismiss</a>410 <a href="#" class="primary">Snooze</a>411 </div>412 </div>413 </div>414 </div>415 416 <!-- Bottom search dock -->417 <div class="dock">418 <span style="font-weight:700; margin-right:10px;">G</span>419 <div style="flex:1; opacity:0.65;">Search</div>420 <div class="chip"></div>421 <div class="chip"></div>422 </div>423 424 <div class="gesture"></div>425</div>426</body>427</html>