GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>Mobile UI - Reminder Snooze</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }8 #render-target {9 width: 1080px;10 height: 2400px;11 position: relative;12 overflow: hidden;13 border-radius: 48px;14 background: radial-gradient(1200px 900px at 50% 20%, #39404a 0%, #22262b 50%, #1b1f24 100%);15 color: #fff;16 }17 18 /* Status bar */19 .status-bar {20 position: absolute;21 top: 0;22 left: 0;23 width: 1080px;24 height: 90px;25 padding: 16px 24px;26 box-sizing: border-box;27 display: flex;28 align-items: center;29 justify-content: space-between;30 font-size: 26px;31 color: #eaeaea;32 }33 .status-left {34 display: flex;35 align-items: center;36 gap: 10px;37 opacity: 0.9;38 }39 .status-right {40 display: flex;41 align-items: center;42 gap: 22px;43 opacity: 0.9;44 }45 .icon-bell, .icon-wifi, .icon-battery {46 width: 28px; height: 28px;47 }48 .icon-chevron {49 width: 26px; height: 26px;50 }51 52 /* Background app grid (placeholders) */53 .app-grid {54 position: absolute;55 top: 360px;56 left: 40px;57 width: 1000px;58 display: grid;59 grid-template-columns: repeat(5, 1fr);60 grid-row-gap: 40px;61 grid-column-gap: 30px;62 z-index: 1;63 opacity: 0.85;64 }65 .app-item {66 display: flex;67 flex-direction: column;68 align-items: center;69 gap: 16px;70 }71 .app-icon {72 width: 140px; height: 140px;73 background: #E0E0E0;74 border: 1px solid #BDBDBD;75 border-radius: 70px;76 display: flex; align-items: center; justify-content: center;77 color: #757575;78 font-size: 22px;79 text-align: center;80 }81 .app-label {82 font-size: 28px;83 color: rgba(255,255,255,0.85);84 }85 86 /* Top notification card */87 .notif-card {88 position: absolute;89 top: 130px;90 left: 40px;91 width: 1000px;92 background: #F5F1FF;93 border-radius: 40px;94 box-shadow: 0 12px 40px rgba(0,0,0,0.35);95 z-index: 3;96 color: #1f2330;97 }98 .notif-inner {99 padding: 26px 28px 24px 28px;100 }101 .notif-header {102 display: grid;103 grid-template-columns: 72px 1fr 48px;104 grid-gap: 18px;105 align-items: center;106 }107 .notif-app {108 width: 72px; height: 72px; border-radius: 36px; background: #2F6AF7; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:600; font-size:22px;109 }110 .notif-title {111 font-size: 34px; font-weight: 600; color: #22263a;112 }113 .notif-sub {114 margin-top: 6px; font-size: 26px; color: #555a70;115 }116 .notif-chevron {117 width: 44px; height: 44px; border-radius: 22px; background: #ECE8FF; display:flex; align-items:center; justify-content:center;118 }119 .notif-actions {120 margin-top: 26px;121 display: flex;122 gap: 22px;123 }124 .notif-btn {125 padding: 20px 40px;126 background: #EDE8FF;127 color: #3B3E7A;128 border-radius: 30px;129 font-weight: 700;130 font-size: 26px;131 letter-spacing: 1px;132 }133 134 /* Snooze sheet */135 .snooze-sheet {136 position: absolute;137 left: 30px;138 bottom: 430px;139 width: 1020px;140 border-radius: 36px;141 overflow: hidden;142 box-shadow: 0 20px 48px rgba(0,0,0,0.45);143 z-index: 4;144 }145 .sheet-header {146 background: #3D5C77;147 padding: 30px 24px 18px 24px;148 text-align: center;149 color: #dbe7f3;150 }151 .sheet-header .label {152 font-size: 42px;153 opacity: 0.95;154 }155 .sheet-header .value {156 font-size: 76px;157 font-weight: 800;158 color: #ffffff;159 margin-top: 10px;160 }161 .sheet-body {162 background: #E6ECF6;163 padding: 34px 28px 20px 28px;164 }165 .options-grid {166 display: grid;167 grid-template-columns: repeat(5, 1fr);168 grid-row-gap: 42px;169 grid-column-gap: 10px;170 text-align: center;171 }172 .option .num {173 font-size: 50px;174 font-weight: 700;175 color: #243a53;176 }177 .option .unit {178 font-size: 28px;179 color: #516a86;180 margin-top: 4px;181 }182 .sheet-footer {183 background: #E6ECF6;184 padding: 22px 28px 28px 28px;185 display: flex;186 align-items: center;187 justify-content: space-between;188 color: #2f4c67;189 font-size: 32px;190 }191 .footer-actions {192 display: flex;193 gap: 40px;194 color: #355a7c;195 font-weight: 600;196 }197 198 /* Bottom dock and gesture bar (background hints) */199 .dock-row {200 position: absolute;201 bottom: 250px;202 left: 140px;203 width: 800px;204 display: flex;205 justify-content: space-between;206 z-index: 1;207 opacity: 0.9;208 }209 .dock-icon {210 width: 140px; height: 140px; border-radius: 70px;211 background: #E0E0E0; border: 1px solid #BDBDBD; color: #757575;212 display:flex; align-items:center; justify-content:center; font-size:22px;213 }214 .search-bar {215 position: absolute;216 bottom: 140px;217 left: 160px;218 width: 760px;219 height: 100px;220 background: rgba(240,240,240,0.94);221 border-radius: 50px;222 display: flex; align-items: center; padding: 0 28px; box-sizing: border-box;223 z-index: 1;224 }225 .search-pill {226 width: 52px; height: 52px; border-radius: 26px; background: #E0E0E0; border: 1px solid #BDBDBD; margin-left: 10px;227 }228 .gesture-bar {229 position: absolute;230 bottom: 42px;231 left: 340px;232 width: 400px;233 height: 12px;234 background: #ffffff;235 border-radius: 6px;236 opacity: 0.9;237 z-index: 1;238 }239</style>240</head>241<body>242<div id="render-target">243 244 <!-- Status bar -->245 <div class="status-bar">246 <div class="status-left">247 <svg class="icon-bell" viewBox="0 0 24 24" fill="none">248 <path d="M12 2c-3.5 0-6 2.7-6 6v3.8l-1.7 2.6c-.4.6 0 1.5.8 1.5h15.8c.8 0 1.2-.9.8-1.5L18 11.8V8c0-3.3-2.5-6-6-6z" fill="#ffffff"/>249 <circle cx="12" cy="20.2" r="2" fill="#ffffff"/>250 </svg>251 <div>Reminder</div>252 </div>253 <div class="status-right">254 <svg class="icon-wifi" viewBox="0 0 24 24" fill="#ffffff">255 <path d="M12 18.5l2.1 2.1-2.1 2.1-2.1-2.1L12 18.5z"/>256 <path d="M2 8c5.5-4.7 14.5-4.7 20 0l-2 2c-4.6-3.9-11.4-3.9-16 0L2 8z"/>257 <path d="M5 11.5c4-3.3 10-3.3 14 0l-2 2c-3-2.5-7-2.5-10 0l-2-2z"/>258 <path d="M8 15c2.5-2.1 6.5-2.1 9 0l-2 2c-1.5-1.3-3.5-1.3-5 0l-2-2z"/>259 </svg>260 <svg class="icon-battery" viewBox="0 0 26 24" fill="none">261 <rect x="1" y="6" width="20" height="12" rx="2" stroke="#ffffff" stroke-width="2"/>262 <rect x="3" y="8" width="14" height="8" rx="1" fill="#ffffff"/>263 <rect x="22" y="9" width="3" height="6" rx="1" fill="#ffffff"/>264 </svg>265 </div>266 </div>267 268 <!-- Background app grid placeholders -->269 <div class="app-grid">270 <div class="app-item">271 <div class="app-icon">[IMG: trivago]</div>272 <div class="app-label">trivago</div>273 </div>274 <div class="app-item">275 <div class="app-icon">[IMG: Booking]</div>276 <div class="app-label">Booking.com</div>277 </div>278 <div class="app-item">279 <div class="app-icon">[IMG: MakeMyTrip]</div>280 <div class="app-label">MakeMyTrip</div>281 </div>282 <div class="app-item">283 <div class="app-icon">[IMG: OYO]</div>284 <div class="app-label">OYO</div>285 </div>286 <div class="app-item">287 <div class="app-icon">[IMG: Calculator]</div>288 <div class="app-label">Calculator</div>289 </div>290 291 <div class="app-item">292 <div class="app-icon">[IMG: Citymapper]</div>293 <div class="app-label">Citymapper</div>294 </div>295 <div class="app-item">296 <div class="app-icon">[IMG: Moovit]</div>297 <div class="app-label">Moovit</div>298 </div>299 <div class="app-item">300 <div class="app-icon">[IMG: OneDrive]</div>301 <div class="app-label">OneDrive</div>302 </div>303 <div class="app-item">304 <div class="app-icon">[IMG: TeraBox]</div>305 <div class="app-label">TeraBox</div>306 </div>307 <div class="app-item">308 <div class="app-icon">[IMG: eBay]</div>309 <div class="app-label">eBay</div>310 </div>311 </div>312 313 <!-- Notification card -->314 <div class="notif-card">315 <div class="notif-inner">316 <div class="notif-header">317 <div class="notif-app">R</div>318 <div>319 <div class="notif-title">[Snooze] VCA Virtual Meet • now</div>320 </div>321 <div class="notif-chevron">322 <svg class="icon-chevron" viewBox="0 0 24 24" fill="none">323 <path d="M6 9l6 6 6-6" stroke="#6e72a8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>324 </svg>325 </div>326 </div>327 328 <div class="notif-actions">329 <div class="notif-btn">SNOOZE</div>330 <div class="notif-btn">DISMISS</div>331 </div>332 </div>333 </div>334 335 <!-- Snooze sheet -->336 <div class="snooze-sheet">337 <div class="sheet-header">338 <div class="label">Snooze duration</div>339 <div class="value">10 minutes</div>340 </div>341 <div class="sheet-body">342 <div class="options-grid">343 <div class="option"><div class="num">5</div><div class="unit">Min</div></div>344 <div class="option"><div class="num">10</div><div class="unit">Min</div></div>345 <div class="option"><div class="num">15</div><div class="unit">Min</div></div>346 <div class="option"><div class="num">30</div><div class="unit">Min</div></div>347 <div class="option"><div class="num">45</div><div class="unit">Min</div></div>348 349 <div class="option"><div class="num">1</div><div class="unit">Hour</div></div>350 <div class="option"><div class="num">2</div><div class="unit">Hour</div></div>351 <div class="option"><div class="num">3</div><div class="unit">Hour</div></div>352 <div class="option"><div class="num">6</div><div class="unit">Hour</div></div>353 <div class="option"><div class="num">1</div><div class="unit">Day</div></div>354 </div>355 <div class="sheet-footer">356 <div class="footer-left">357 <svg viewBox="0 0 24 24" width="34" height="34" fill="none">358 <rect x="3" y="3" width="15" height="15" rx="2" stroke="#355a7c" stroke-width="2"/>359 <path d="M9 13l6-6" stroke="#355a7c" stroke-width="2" stroke-linecap="round"/>360 </svg>361 </div>362 <div class="footer-actions">363 <span>Dismiss</span>364 <span>Snooze</span>365 </div>366 </div>367 </div>368 </div>369 370 <!-- Dock icons and search -->371 <div class="dock-row">372 <div class="dock-icon">[IMG: Phone]</div>373 <div class="dock-icon">[IMG: Messages]</div>374 <div class="dock-icon">[IMG: Chrome]</div>375 <div class="dock-icon">[IMG: Camera]</div>376 </div>377 <div class="search-bar">378 <div style="flex:1; color:#6b6b6b; font-size:32px;">Search</div>379 <div class="search-pill"></div>380 <div class="search-pill"></div>381 <div class="search-pill"></div>382 </div>383 384 <div class="gesture-bar"></div>385 386</div>387</body>388</html>