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>Tell us who you are - Date Picker Modal</title>7<style>8 body {9 margin: 0;10 padding: 0;11 background: transparent;12 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;13 }14 #render-target {15 width: 1080px;16 height: 2400px;17 position: relative;18 overflow: hidden;19 background: #ffffff;20 border-radius: 0; /* outer styles belong here per spec */21 }22 23 /* Status bar */24 .status-bar {25 position: absolute;26 top: 0;27 left: 0;28 width: 1080px;29 height: 120px;30 background: #671b12; /* deep maroon */31 color: #fff;32 display: flex;33 align-items: center;34 padding: 0 40px;35 box-sizing: border-box;36 }37 .status-time {38 font-size: 44px;39 font-weight: 700;40 letter-spacing: 1px;41 }42 .status-icons {43 margin-left: auto;44 display: flex;45 align-items: center;46 gap: 26px;47 }48 .status-icons svg {49 fill: #ffffff;50 height: 40px;51 width: 40px;52 }53 54 /* Page content */55 .content {56 position: absolute;57 top: 120px;58 left: 0;59 right: 0;60 bottom: 140px;61 padding: 60px 56px;62 box-sizing: border-box;63 background: #ffffff;64 }65 66 h1.title {67 margin: 20px 0 40px 0;68 font-size: 96px;69 line-height: 1.1;70 font-weight: 800;71 color: #1d1d1d;72 }73 74 .form {75 margin-top: 20px;76 display: flex;77 flex-direction: column;78 gap: 48px;79 }80 81 .field {82 position: relative;83 border: 2px solid #c7c7c7;84 border-radius: 18px;85 padding: 36px 40px 30px 40px;86 height: 180px;87 box-sizing: border-box;88 }89 .field.active {90 border-color: #222;91 box-shadow: 0 0 0 3px rgba(0,0,0,0.06);92 }93 .label {94 position: absolute;95 top: -20px;96 left: 24px;97 background: #ffffff;98 padding: 0 16px;99 font-size: 34px;100 color: #6f6f6f;101 }102 .value {103 font-size: 54px;104 color: #1f1f1f;105 margin-top: 24px;106 }107 .suffix-icon {108 position: absolute;109 right: 26px;110 top: 50%;111 transform: translateY(-50%);112 width: 64px;113 height: 64px;114 border-radius: 32px;115 border: 2px solid #bdbdbd;116 display: flex;117 align-items: center;118 justify-content: center;119 background: #fff;120 }121 .suffix-icon svg {122 width: 36px;123 height: 36px;124 stroke: #555;125 stroke-width: 6;126 fill: none;127 }128 129 /* Modal overlay */130 .scrim {131 position: absolute;132 inset: 0;133 background: rgba(0,0,0,0.46);134 }135 136 .dialog {137 position: absolute;138 left: 50%;139 top: 45%;140 transform: translate(-50%, -50%);141 width: 980px;142 background: #ffffff;143 border-radius: 12px;144 box-shadow: 0 20px 60px rgba(0,0,0,0.35);145 padding: 56px 48px 36px 48px;146 box-sizing: border-box;147 }148 149 .wheels {150 display: grid;151 grid-template-columns: 1fr 1fr 1fr;152 column-gap: 40px;153 align-items: center;154 justify-items: center;155 margin: 10px 0 40px;156 }157 .wheel {158 width: 240px;159 text-align: center;160 }161 .wheel .faded {162 color: #bdbdbd;163 font-size: 44px;164 line-height: 74px;165 }166 .wheel .current {167 color: #222;168 font-weight: 700;169 font-size: 56px;170 line-height: 100px;171 border-bottom: 6px solid #bdbdbd;172 padding-bottom: 12px;173 margin-bottom: 12px;174 }175 176 .dialog-actions {177 display: flex;178 justify-content: flex-end;179 gap: 50px;180 padding: 10px 6px 0;181 }182 .dialog-actions button {183 background: transparent;184 border: none;185 font-size: 44px;186 letter-spacing: 2px;187 color: #333;188 padding: 16px 18px;189 cursor: default;190 }191 192 /* Bottom gesture area */193 .gesture-bar {194 position: absolute;195 bottom: 0;196 left: 0;197 width: 1080px;198 height: 140px;199 background: #000000;200 display: flex;201 align-items: center;202 justify-content: center;203 }204 .gesture-pill {205 width: 240px;206 height: 14px;207 background: #e7e7e7;208 border-radius: 8px;209 }210</style>211</head>212<body>213<div id="render-target">214 215 <!-- Status Bar -->216 <div class="status-bar">217 <div class="status-time">8:22</div>218 <div class="status-icons">219 <!-- Signal (simple) -->220 <svg viewBox="0 0 24 24" aria-hidden="true">221 <path d="M2 20h2v-2H2v2zm4 0h2v-6H6v6zm4 0h2v-10h-2v10zm4 0h2V6h-2v14zm4 0h2V2h-2v18z"/>222 </svg>223 <!-- Wi‑Fi -->224 <svg viewBox="0 0 24 24" aria-hidden="true">225 <path d="M12 18.5l2.5 2.5L12 23l-2.5-2 2.5-2.5zM2 8a16 16 0 0 1 20 0l-1.6 1.2A13.8 13.8 0 0 0 3.6 9.2L2 8zm4 4a10 10 0 0 1 12 0l-1.7 1.3a8 8 0 0 0-8.6 0L6 12z"/>226 </svg>227 <!-- Battery -->228 <svg viewBox="0 0 24 24" aria-hidden="true">229 <path d="M2 8h16v8H2V8zm18 3h2v2h-2v-2z"/>230 </svg>231 </div>232 </div>233 234 <!-- Page Content -->235 <div class="content">236 <h1 class="title">Tell us who you are</h1>237 238 <div class="form">239 <div class="field">240 <div class="label">First Name</div>241 <div class="value">ABC</div>242 </div>243 244 <div class="field">245 <div class="label">Last Name</div>246 <div class="value">XYZ</div>247 </div>248 249 <div class="field active">250 <div class="label">Birthdate</div>251 <div class="value">Jan 01, 1976</div>252 <div class="suffix-icon" aria-hidden="true">253 <svg viewBox="0 0 24 24">254 <path d="M6 9l6 6 6-6" />255 </svg>256 </div>257 </div>258 </div>259 </div>260 261 <!-- Dim background and Date Picker dialog -->262 <div class="scrim"></div>263 264 <div class="dialog" role="dialog" aria-label="Date picker">265 <div class="wheels">266 <div class="wheel">267 <div class="faded">Dec</div>268 <div class="current">Jan</div>269 <div class="faded">Feb</div>270 </div>271 <div class="wheel">272 <div class="faded">31</div>273 <div class="current">01</div>274 <div class="faded">02</div>275 </div>276 <div class="wheel">277 <div class="faded">1975</div>278 <div class="current">1976</div>279 <div class="faded">1977</div>280 </div>281 </div>282 283 <div class="dialog-actions">284 <button>Cancel</button>285 <button>OK</button>286 </div>287 </div>288 289 <!-- Bottom Gesture Bar -->290 <div class="gesture-bar">291 <div class="gesture-pill"></div>292 </div>293</div>294</body>295</html>