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>Form with Date Picker</title>7<style>8 body {9 margin: 0;10 padding: 0;11 background: transparent;12 font-family: Arial, Helvetica, sans-serif;13 color: #212121;14 }15 #render-target {16 width: 1080px;17 height: 2400px;18 position: relative;19 overflow: hidden;20 background: #ffffff;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: #5a160f; /* dark 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: 42px;39 font-weight: 600;40 }41 .status-icons {42 margin-left: auto;43 display: flex;44 gap: 30px;45 align-items: center;46 }47 .status-icons svg {48 width: 42px;49 height: 42px;50 fill: none;51 stroke: #ffffff;52 stroke-width: 4;53 }54 55 /* Content area */56 .content {57 position: absolute;58 top: 120px;59 left: 0;60 right: 0;61 bottom: 120px; /* leave room for gesture bar */62 padding: 60px;63 box-sizing: border-box;64 }65 .title {66 font-size: 74px;67 font-weight: 800;68 margin: 20px 0 40px;69 }70 71 .field {72 margin-bottom: 70px;73 }74 .label-row {75 display: flex;76 align-items: center;77 gap: 20px;78 color: #757575;79 font-size: 30px;80 margin-left: 10px;81 margin-bottom: 10px;82 }83 .label-row:after {84 content: "";85 flex: 1;86 height: 3px;87 background: #E0E0E0;88 margin-left: 20px;89 }90 .input {91 background: #FAFAFA;92 border: 2px solid #BDBDBD;93 border-radius: 20px;94 height: 140px;95 box-sizing: border-box;96 padding: 30px 40px;97 font-size: 48px;98 color: #212121;99 display: flex;100 align-items: center;101 justify-content: space-between;102 }103 .input .value {104 letter-spacing: 1px;105 }106 .icon-btn {107 width: 80px;108 height: 80px;109 border-radius: 40px;110 border: 2px solid #9E9E9E;111 background: #ffffff;112 display: flex;113 align-items: center;114 justify-content: center;115 }116 .icon-btn svg {117 width: 44px;118 height: 44px;119 stroke: #424242;120 stroke-width: 3.5;121 }122 123 /* Overlay for modal */124 .overlay {125 position: absolute;126 left: 0;127 top: 120px;128 width: 1080px;129 height: 2160px; /* up to bottom of content before gesture bar */130 background: rgba(0,0,0,0.55);131 }132 133 /* Date picker modal */134 .modal {135 position: absolute;136 left: 60px;137 top: 900px;138 width: 960px;139 background: #FFFFFF;140 border-radius: 10px;141 box-shadow: 0 20px 60px rgba(0,0,0,0.35);142 padding: 40px 50px 30px;143 box-sizing: border-box;144 }145 .wheel {146 display: grid;147 grid-template-columns: 1fr 1fr 1fr;148 column-gap: 60px;149 align-items: center;150 margin-top: 10px;151 margin-bottom: 30px;152 }153 .wheel-col {154 text-align: center;155 }156 .wheel-top,157 .wheel-bottom {158 color: #BDBDBD;159 font-size: 38px;160 height: 110px;161 line-height: 110px;162 }163 .wheel-selected {164 font-size: 54px;165 font-weight: 600;166 color: #212121;167 height: 120px;168 line-height: 120px;169 border-bottom: 6px solid #BDBDBD;170 border-top: 6px solid transparent;171 margin: 10px 0 10px;172 }173 174 .modal-actions {175 display: flex;176 justify-content: flex-end;177 gap: 80px;178 padding-top: 20px;179 font-size: 40px;180 color: #424242;181 }182 183 /* Bottom gesture bar */184 .gesture-bar {185 position: absolute;186 bottom: 0;187 left: 0;188 width: 1080px;189 height: 120px;190 background: #000000;191 display: flex;192 justify-content: center;193 align-items: center;194 }195 .gesture-pill {196 width: 260px;197 height: 16px;198 border-radius: 8px;199 background: #E0E0E0;200 }201</style>202</head>203<body>204<div id="render-target">205 <!-- Status Bar -->206 <div class="status-bar">207 <div class="status-time">8:24</div>208 <div class="status-icons">209 <!-- Simple cellular/wifi icon -->210 <svg viewBox="0 0 24 24" aria-hidden="true">211 <path d="M2 9c5-5 15-5 20 0M5 12c3-3 11-3 14 0M8 15c2-2 6-2 8 0M12 19l2-2-2-2-2 2 2 2z"></path>212 </svg>213 <!-- Battery icon -->214 <svg viewBox="0 0 28 24" aria-hidden="true">215 <rect x="2" y="5" width="22" height="14" rx="2"></rect>216 <rect x="24" y="9" width="2" height="6" rx="1"></rect>217 <rect x="4.5" y="7.5" width="16" height="9" fill="#ffffff"></rect>218 </svg>219 </div>220 </div>221 222 <!-- Content -->223 <div class="content">224 <div class="title">Tell us who you are</div>225 226 <div class="field">227 <div class="label-row">First Name</div>228 <div class="input">229 <div class="value">ABC</div>230 </div>231 </div>232 233 <div class="field">234 <div class="label-row">Last Name</div>235 <div class="input">236 <div class="value">XYZ</div>237 </div>238 </div>239 240 <div class="field">241 <div class="label-row" style="color:#424242">Birthdate</div>242 <div class="input" style="border-color:#424242;">243 <div class="value">Jan 01, 1993</div>244 <div class="icon-btn" aria-label="Open Date Picker">245 <svg viewBox="0 0 24 24">246 <rect x="3" y="5" width="18" height="16" rx="2" fill="none"></rect>247 <path d="M7 3v4M17 3v4M3 9h18M7 13h4M13 13h4M7 17h4M13 17h4"></path>248 </svg>249 </div>250 </div>251 </div>252 </div>253 254 <!-- Dim overlay and modal -->255 <div class="overlay"></div>256 257 <div class="modal">258 <div class="wheel">259 <div class="wheel-col">260 <div class="wheel-top">Dec</div>261 <div class="wheel-selected">Jan</div>262 <div class="wheel-bottom">Feb</div>263 </div>264 <div class="wheel-col">265 <div class="wheel-top">31</div>266 <div class="wheel-selected">01</div>267 <div class="wheel-bottom">02</div>268 </div>269 <div class="wheel-col">270 <div class="wheel-top">1992</div>271 <div class="wheel-selected">1993</div>272 <div class="wheel-bottom">1994</div>273 </div>274 </div>275 <div class="modal-actions">276 <div>CANCEL</div>277 <div>OK</div>278 </div>279 </div>280 281 <!-- Bottom gesture bar -->282 <div class="gesture-bar">283 <div class="gesture-pill"></div>284 </div>285</div>286</body>287</html>