GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">5<title>Mobile UI - Date Picker Modal</title>6<style>7 body {8 margin: 0;9 padding: 0;10 background: transparent;11 font-family: Roboto, Arial, sans-serif;12 }13 #render-target {14 width: 1080px;15 height: 2400px;16 position: relative;17 overflow: hidden;18 background: #121212;19 color: #fff;20 }21 22 /* Status bar */23 .status-bar {24 position: absolute;25 top: 0;26 left: 0;27 width: 1080px;28 height: 120px;29 background: #0f4f88;30 display: flex;31 align-items: center;32 padding: 0 36px;33 box-sizing: border-box;34 color: #e7f1ff;35 font-size: 40px;36 letter-spacing: 1px;37 }38 .status-bar .right {39 margin-left: auto;40 display: flex;41 align-items: center;42 gap: 26px;43 }44 .icon-dot {45 width: 10px;46 height: 10px;47 background: #cfe3ff;48 border-radius: 50%;49 opacity: .8;50 }51 .battery {52 width: 48px;53 height: 24px;54 border: 3px solid #e7f1ff;55 border-radius: 4px;56 position: relative;57 }58 .battery:after {59 content: "";60 position: absolute;61 right: -8px;62 top: 6px;63 width: 6px;64 height: 12px;65 background: #e7f1ff;66 border-radius: 2px;67 }68 .battery .level {69 position: absolute;70 left: 2px;71 top: 2px;72 bottom: 2px;73 width: 60%;74 background: #e7f1ff;75 }76 77 /* App bar */78 .app-bar {79 position: absolute;80 top: 120px;81 left: 0;82 width: 1080px;83 height: 140px;84 background: #0f4f88;85 display: flex;86 align-items: center;87 padding: 0 36px;88 box-sizing: border-box;89 }90 .hamburger {91 width: 72px;92 height: 72px;93 display: inline-flex;94 align-items: center;95 justify-content: center;96 margin-right: 24px;97 }98 .title {99 font-size: 64px;100 font-weight: 600;101 color: #bcd9ff;102 }103 .actions {104 margin-left: auto;105 display: flex;106 align-items: center;107 gap: 36px;108 }109 .action-ic {110 width: 78px;111 height: 78px;112 border-radius: 39px;113 display: inline-flex;114 align-items: center;115 justify-content: center;116 color: #cbe2ff;117 opacity: .9;118 }119 .action-ic svg { width: 52px; height: 52px; fill: #cbe2ff; }120 121 /* Notification bar */122 .notice-bar {123 position: absolute;124 top: 260px;125 left: 0;126 width: 1080px;127 height: 92px;128 display: flex;129 align-items: center;130 padding: 0 36px;131 box-sizing: border-box;132 background: rgba(0,0,0,0.3);133 }134 .notice-text {135 color: #ef5350;136 font-size: 38px;137 display: flex;138 align-items: center;139 gap: 18px;140 }141 .notice-btn {142 margin-left: auto;143 background: #1976d2;144 border-radius: 10px;145 padding: 16px 28px;146 font-size: 34px;147 color: white;148 box-shadow: inset 0 0 0 2px rgba(255,255,255,0.12);149 }150 151 /* Background content (dimmed) */152 .content-placeholder {153 position: absolute;154 top: 352px;155 left: 28px;156 right: 28px;157 bottom: 190px;158 border-radius: 14px;159 background: #1d1d1d;160 box-shadow: 0 8px 24px rgba(0,0,0,0.5);161 }162 .content-placeholder .card {163 position: absolute;164 top: 72px;165 left: 44px;166 width: 500px;167 height: 100px;168 background: #0d77c4;169 border-radius: 12px;170 display: flex;171 align-items: center;172 justify-content: center;173 font-size: 46px;174 }175 .content-placeholder .save {176 position: absolute;177 top: 72px;178 right: 44px;179 background: #1e88e5;180 color: #fff;181 padding: 20px 32px;182 border-radius: 10px;183 font-size: 34px;184 }185 186 /* Ad banner at bottom */187 .ad-banner {188 position: absolute;189 left: 0;190 bottom: 0;191 width: 1080px;192 height: 190px;193 background: #bfe6ff;194 border-top: 2px solid #9fcaf0;195 display: flex;196 align-items: center;197 justify-content: center;198 color: #0b4f88;199 font-weight: 600;200 font-size: 40px;201 }202 203 /* Scrim and dialog */204 .scrim {205 position: absolute;206 left: 0; top: 0;207 width: 1080px; height: 2400px;208 background: rgba(0,0,0,0.7);209 z-index: 30;210 }211 .dialog {212 position: absolute;213 left: 120px;214 top: 520px;215 width: 840px;216 height: 1160px;217 background: #4b4b4b;218 border-radius: 16px;219 box-shadow: 0 20px 60px rgba(0,0,0,0.7);220 z-index: 40;221 overflow: hidden;222 }223 .dialog-header {224 padding: 32px 36px 28px 36px;225 box-sizing: border-box;226 color: #fff;227 background: #4b4b4b;228 border-bottom: 1px solid rgba(255,255,255,0.08);229 }230 .year {231 font-size: 44px;232 opacity: .85;233 margin-bottom: 8px;234 }235 .date-large {236 font-size: 92px;237 font-weight: 700;238 letter-spacing: .5px;239 }240 .calendar {241 background: #454545;242 padding: 28px 36px 0 36px;243 box-sizing: border-box;244 height: 760px;245 }246 .cal-top {247 display: flex;248 align-items: center;249 justify-content: center;250 color: #ffffff;251 font-size: 44px;252 margin-bottom: 22px;253 position: relative;254 }255 .cal-arrow {256 position: absolute;257 top: 4px;258 width: 64px;259 height: 64px;260 display: inline-flex;261 align-items: center;262 justify-content: center;263 border-radius: 50%;264 color: #e0e0e0;265 }266 .cal-arrow.left { left: 0; }267 .cal-arrow.right { right: 0; }268 .dow {269 display: grid;270 grid-template-columns: repeat(7, 1fr);271 text-align: center;272 color: #d7d7d7;273 font-size: 36px;274 margin-bottom: 14px;275 }276 .dates {277 display: grid;278 grid-template-columns: repeat(7, 1fr);279 gap: 6px 0;280 text-align: center;281 color: #fff;282 font-size: 40px;283 }284 .dates .day {285 height: 98px;286 display: flex;287 align-items: center;288 justify-content: center;289 }290 .dates .selected {291 background: #0a84d8;292 width: 98px;293 height: 98px;294 border-radius: 50%;295 display: inline-flex;296 align-items: center;297 justify-content: center;298 font-weight: 700;299 }300 .dialog-footer {301 position: absolute;302 bottom: 0;303 left: 0;304 width: 100%;305 height: 180px;306 display: flex;307 align-items: center;308 justify-content: space-between;309 padding: 0 46px;310 box-sizing: border-box;311 color: #fff;312 background: #4b4b4b;313 }314 .flat-btn {315 font-size: 44px;316 letter-spacing: 2px;317 color: #ffffff;318 }319 320 /* Gesture bar */321 .gesture {322 position: absolute;323 bottom: 24px;324 left: 50%;325 transform: translateX(-50%);326 width: 280px;327 height: 14px;328 background: #ffffff;329 border-radius: 10px;330 opacity: .95;331 z-index: 35;332 }333</style>334</head>335<body>336<div id="render-target">337 <!-- Status bar -->338 <div class="status-bar">339 <div>6:14</div>340 <div class="right">341 <div class="icon-dot"></div>342 <div class="icon-dot"></div>343 <div class="icon-dot"></div>344 <div class="icon-dot"></div>345 <svg width="36" height="36" viewBox="0 0 24 24" fill="#e7f1ff"><circle cx="12" cy="12" r="10" opacity=".25"></circle><path d="M12 5a7 7 0 100 14 7 7 0 000-14zm0 1.8a5.2 5.2 0 110 10.4A5.2 5.2 0 0112 6.8z"/></svg>346 <svg width="36" height="36" viewBox="0 0 24 24" fill="#e7f1ff"><path d="M12 3a9 9 0 00-9 9h3a6 6 0 016-6V3z"/></svg>347 <div class="battery"><div class="level"></div></div>348 </div>349 </div>350 351 <!-- App bar -->352 <div class="app-bar">353 <div class="hamburger">354 <svg viewBox="0 0 24 24" width="56" height="56" fill="#cbe2ff">355 <path d="M3 6h18v2H3zM3 11h18v2H3zM3 16h18v2H3z"/>356 </svg>357 </div>358 <div class="title">Tasks</div>359 <div class="actions">360 <div class="action-ic">361 <svg viewBox="0 0 24 24"><path d="M12 2a9.8 9.8 0 100 19.6A9.8 9.8 0 0012 2zm1 5h-2v5H6v2h5v5h2v-5h5v-2h-5z"/></svg>362 </div>363 <div class="action-ic">364 <svg viewBox="0 0 24 24"><path d="M9 16.2L5.8 13l-1.4 1.4L9 19 20 8l-1.4-1.4z"/></svg>365 </div>366 <div class="action-ic">367 <svg viewBox="0 0 24 24"><path d="M15.5 14h-.8l-.3-.3a6 6 0 10-.7.7l.3.3v.8l4.6 4.6 1.4-1.4L15.5 14zM10 14a4 4 0 110-8 4 4 0 010 8z"/></svg>368 </div>369 </div>370 </div>371 372 <!-- Notification bar -->373 <div class="notice-bar">374 <div class="notice-text">375 <svg width="42" height="42" viewBox="0 0 24 24" fill="#ef5350">376 <path d="M11 7h2v6h-2zm0 8h2v2h-2z"/><path d="M1 21h22L12 2 1 21z" opacity=".35"/>377 </svg>378 <span>Please allow app to send you notification</span>379 </div>380 <div class="notice-btn">Enable</div>381 </div>382 383 <!-- Dimmed background content block -->384 <div class="content-placeholder">385 <div class="card">X</div>386 <div class="save">SAVE</div>387 </div>388 389 <!-- Ad banner behind scrim -->390 <div class="ad-banner">[IMG: Ad Banner - Coconut Water]</div>391 392 <!-- Scrim and dialog -->393 <div class="scrim"></div>394 395 <div class="dialog">396 <div class="dialog-header">397 <div class="year">2023</div>398 <div class="date-large">Wed, Oct 11</div>399 </div>400 <div class="calendar">401 <div class="cal-top">402 <div class="cal-arrow left">403 <svg viewBox="0 0 24 24" width="42" height="42" fill="#e0e0e0"><path d="M15.4 6L9.4 12l6 6-1.4 1.4L6.6 12l7.4-7.4z"/></svg>404 </div>405 October 2023406 <div class="cal-arrow right">407 <svg viewBox="0 0 24 24" width="42" height="42" fill="#e0e0e0"><path d="M8.6 18l6-6-6-6L10 4.6 17.4 12 10 19.4z"/></svg>408 </div>409 </div>410 <div class="dow">411 <div>S</div><div>M</div><div>T</div><div>W</div><div>T</div><div>F</div><div>S</div>412 </div>413 <div class="dates">414 <div class="day">1</div><div class="day">2</div><div class="day">3</div><div class="day">4</div><div class="day">5</div><div class="day">6</div><div class="day">7</div>415 <div class="day">8</div><div class="day">9</div><div class="day">10</div>416 <div class="day"><div class="selected">11</div></div>417 <div class="day">12</div><div class="day">13</div><div class="day">14</div>418 <div class="day">15</div><div class="day">16</div><div class="day">17</div><div class="day">18</div><div class="day">19</div><div class="day">20</div><div class="day">21</div>419 <div class="day">22</div><div class="day">23</div><div class="day">24</div><div class="day">25</div><div class="day">26</div><div class="day">27</div><div class="day">28</div>420 <div class="day">29</div><div class="day">30</div><div class="day">31</div><div class="day"></div><div class="day"></div><div class="day"></div><div class="day"></div>421 </div>422 </div>423 <div class="dialog-footer">424 <div class="flat-btn">CANCEL</div>425 <div class="flat-btn">OK</div>426 </div>427 </div>428 429 <!-- Gesture bar -->430 <div class="gesture"></div>431</div>432</body>433</html>