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>Date Picker UI</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9 #render-target {10 width: 1080px; height: 2400px; position: relative; overflow: hidden;11 background: linear-gradient(180deg, #cfe8f3 0%, #eaf6fb 40%, #e6f2f8 100%);12 border-radius: 36px;13 box-shadow: 0 20px 60px rgba(0,0,0,0.2);14 }15 16 /* Status bar */17 .status-bar {18 position: absolute; top: 0; left: 0; right: 0; height: 155px;19 background: rgba(120,120,120,0.55);20 display: flex; align-items: center; justify-content: space-between;21 padding: 0 36px;22 color: #fff; font-weight: 600; font-size: 42px;23 }24 .status-right { display: flex; gap: 28px; align-items: center; }25 .status-icon svg { width: 52px; height: 52px; fill: none; stroke: #fff; stroke-width: 6; }26 27 /* Main card behind modal */28 .hero-card {29 position: absolute; top: 220px; left: 40px; width: 1000px; height: 1500px;30 background: #ffffffcc;31 border-radius: 48px;32 box-shadow: inset 0 0 0 1px rgba(0,0,0,0.04), 0 20px 40px rgba(0,0,0,0.12);33 padding: 80px 60px;34 }35 .logo-diamond {36 width: 90px; height: 90px; background: #f4b321;37 border-radius: 16px; transform: rotate(45deg); margin: 0 auto 20px;38 position: relative;39 }40 .logo-diamond::after {41 content: ""; position: absolute; width: 40px; height: 20px; border-bottom-left-radius: 40px; border-bottom-right-radius: 40px;42 background: rgba(0,0,0,0.12); left: 50%; top: 50%; transform: translate(-50%,-20%) rotate(-45deg);43 }44 .hero-title {45 text-align: center; color: #123a57; font-size: 64px; font-weight: 800; line-height: 1.2;46 margin-bottom: 50px;47 }48 49 .field-row { display: grid; grid-template-columns: 1fr; gap: 26px; margin-top: 20px; }50 .pill-field {51 height: 140px; background: #fff; border-radius: 28px; box-shadow: 0 8px 20px rgba(0,0,0,0.06);52 padding: 30px 36px; color: #324c5f;53 }54 .pill-label { font-size: 36px; opacity: 0.7; }55 .pill-value { font-size: 48px; font-weight: 700; margin-top: 8px; }56 57 .suggestions {58 position: absolute; bottom: 220px; left: 60px; right: 60px; display: flex; gap: 28px;59 }60 .city-card {61 flex: 1; background: #fff; border-radius: 60px; padding: 36px 40px; box-shadow: 0 10px 24px rgba(0,0,0,0.08);62 }63 .city-sub { color: #556a7a; font-size: 34px; font-weight: 600; }64 .city-title { color: #182c40; font-size: 48px; font-weight: 800; }65 .image-thumb {66 width: 480px; height: 240px; background: #E0E0E0; border: 1px solid #BDBDBD;67 display: flex; justify-content: center; align-items: center; color: #757575; border-radius: 24px;68 }69 70 /* Bottom navigation bar */71 .bottom-nav {72 position: absolute; bottom: 120px; left: 0; width: 100%; height: 220px; background: #fff;73 border-top-left-radius: 36px; border-top-right-radius: 36px; box-shadow: 0 -10px 30px rgba(0,0,0,0.15);74 display: flex; justify-content: space-around; align-items: center;75 }76 .nav-item { display: flex; flex-direction: column; align-items: center; gap: 16px; color: #2b4e66; }77 .nav-item svg { width: 68px; height: 68px; stroke: #2b4e66; stroke-width: 6; fill: none; }78 .nav-item.active { color: #0a6fe8; }79 .nav-item.active svg { stroke: #0a6fe8; }80 .nav-label { font-size: 34px; font-weight: 800; letter-spacing: 0.5px; }81 82 /* Home indicator pill */83 .home-indicator {84 position: absolute; bottom: 38px; left: 50%; transform: translateX(-50%);85 width: 360px; height: 16px; background: #000; opacity: 0.2; border-radius: 16px;86 }87 88 /* Modal overlay and dialog */89 .overlay {90 position: absolute; inset: 0; background: rgba(0,0,0,0.35);91 }92 .dialog {93 position: absolute; left: 50%; top: 700px; transform: translateX(-50%);94 width: 900px; background: #fff; border-radius: 48px; overflow: hidden;95 box-shadow: 0 30px 80px rgba(0,0,0,0.35);96 }97 .dialog-header {98 background: #0a88ff; color: #fff; padding: 36px 40px 50px; position: relative;99 }100 .header-top { font-size: 30px; font-weight: 800; letter-spacing: 1px; opacity: 0.95; }101 .header-date { margin-top: 22px; font-size: 84px; font-weight: 800; letter-spacing: -0.5px; }102 .pencil {103 position: absolute; right: 36px; top: 52px;104 }105 .pencil svg { width: 60px; height: 60px; fill: none; stroke: #fff; stroke-width: 8; }106 107 .calendar {108 background: #fff; padding: 40px 44px 34px;109 }110 .month-row {111 display: flex; justify-content: space-between; align-items: center; color: #7a8da0;112 font-size: 42px; font-weight: 700; margin-bottom: 24px;113 }114 .month-left { display: flex; align-items: center; gap: 16px; }115 .caret-down { width: 32px; height: 32px; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 12px solid #7a8da0; margin-left: 6px; }116 .nav-arrows { display: flex; gap: 24px; }117 .nav-arrows svg { width: 42px; height: 42px; stroke: #7a8da0; stroke-width: 8; fill: none; }118 119 .weekday-row {120 display: grid; grid-template-columns: repeat(7, 1fr); gap: 24px; color: #293f53; opacity: 0.75;121 font-size: 40px; font-weight: 700; margin-bottom: 20px;122 }123 .day-grid {124 display: grid; grid-template-columns: repeat(7, 1fr); gap: 24px;125 }126 .day {127 height: 110px; display: flex; align-items: center; justify-content: center;128 color: #5a7083; font-size: 40px; font-weight: 700;129 }130 .muted { opacity: 0.35; }131 .selected {132 background: #0a88ff; color: #fff; border-radius: 999px;133 }134 .ring {135 border: 6px solid #2d5a77; border-radius: 999px; color: #2d5a77; font-weight: 800;136 }137 138 .dialog-footer {139 display: flex; justify-content: flex-end; align-items: center; gap: 40px;140 padding: 24px 40px 40px; color: #0a88ff; font-size: 44px; font-weight: 800;141 }142 .dialog-footer .cancel { margin-right: auto; }143</style>144</head>145<body>146<div id="render-target">147 148 <!-- Status bar -->149 <div class="status-bar">150 <div>2:51</div>151 <div class="status-right">152 <div class="status-icon">153 <!-- simple chat/messaging icon -->154 <svg viewBox="0 0 24 24"><path d="M3 4h18v12H9l-5 4v-4H3z"/></svg>155 </div>156 <div class="status-icon">157 <!-- wifi -->158 <svg viewBox="0 0 24 24"><path d="M2 8c10-8 20 0 20 0M5 12c7-5 14 0 14 0M8 16c4-3 8 0 8 0M12 20h0"/></svg>159 </div>160 <div class="status-icon">161 <!-- battery -->162 <svg viewBox="0 0 24 24"><rect x="2" y="6" width="18" height="12" rx="2"/><rect x="20" y="10" width="2" height="4"/></svg>163 </div>164 </div>165 </div>166 167 <!-- Main content behind modal -->168 <div class="hero-card">169 <div class="logo-diamond"></div>170 <div class="hero-title">What are your<br>travel plans?</div>171 172 <div class="field-row">173 <div class="pill-field">174 <div class="pill-label">From</div>175 <div class="pill-value">Boston</div>176 </div>177 <div class="pill-field">178 <div class="pill-label">To</div>179 <div class="pill-value">Atlanta</div>180 </div>181 <div class="pill-field">182 <div class="pill-label">Depart</div>183 <div class="pill-value">Flexible</div>184 </div>185 <div class="pill-field">186 <div class="pill-label">Passengers</div>187 <div class="pill-value">1 Adult</div>188 </div>189 </div>190 191 <div class="suggestions">192 <div class="city-card">193 <div class="city-sub">Boston</div>194 <div class="city-title">New York</div>195 </div>196 <div class="city-card">197 <div class="city-sub">Miami</div>198 <div class="city-title">Orlando</div>199 </div>200 <div class="image-thumb">[IMG: Neon city street]</div>201 </div>202 </div>203 204 <!-- Modal overlay -->205 <div class="overlay"></div>206 207 <!-- Date picker dialog -->208 <div class="dialog">209 <div class="dialog-header">210 <div class="header-top">SELECT DATE</div>211 <div class="header-date">Nov 14, 2023</div>212 <div class="pencil">213 <svg viewBox="0 0 24 24">214 <path d="M3 17l2 4 4-2 10-10-4-4L5 15z"/>215 </svg>216 </div>217 </div>218 219 <div class="calendar">220 <div class="month-row">221 <div class="month-left">November 2023 <span class="caret-down"></span></div>222 <div class="nav-arrows">223 <svg viewBox="0 0 24 24"><path d="M15 18l-6-6 6-6"/></svg>224 <svg viewBox="0 0 24 24"><path d="M9 6l6 6-6 6"/></svg>225 </div>226 </div>227 228 <div class="weekday-row">229 <div>S</div><div>M</div><div>T</div><div>W</div><div>T</div><div>F</div><div>S</div>230 </div>231 232 <div class="day-grid">233 <!-- Row 1 (Nov starts on Wed) -->234 <div class="day muted"></div>235 <div class="day muted"></div>236 <div class="day muted"></div>237 <div class="day muted">1</div>238 <div class="day muted">2</div>239 <div class="day muted">3</div>240 <div class="day muted">4</div>241 <!-- Row 2 -->242 <div class="day">5</div><div class="day">6</div><div class="day">7</div><div class="day">8</div><div class="day ring">9</div><div class="day">10</div><div class="day">11</div>243 <!-- Row 3 -->244 <div class="day">12</div><div class="day">13</div><div class="day selected">14</div><div class="day">15</div><div class="day">16</div><div class="day">17</div><div class="day">18</div>245 <!-- Row 4 -->246 <div class="day">19</div><div class="day">20</div><div class="day">21</div><div class="day">22</div><div class="day">23</div><div class="day">24</div><div class="day">25</div>247 <!-- Row 5 -->248 <div class="day">26</div><div class="day">27</div><div class="day">28</div><div class="day">29</div><div class="day">30</div><div class="day muted"></div><div class="day muted"></div>249 </div>250 </div>251 252 <div class="dialog-footer">253 <div class="cancel">Cancel</div>254 <div>OK</div>255 </div>256 </div>257 258 <!-- Bottom navigation -->259 <div class="bottom-nav">260 <div class="nav-item active">261 <svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4-4"/></svg>262 <div class="nav-label">SEARCH</div>263 </div>264 <div class="nav-item">265 <svg viewBox="0 0 24 24"><rect x="5" y="7" width="14" height="12" rx="2"/><path d="M9 7V4h6v3"/></svg>266 <div class="nav-label">TRIPS</div>267 </div>268 <div class="nav-item">269 <svg viewBox="0 0 24 24"><circle cx="12" cy="7" r="3"/><path d="M12 12v7"/></svg>270 <div class="nav-label">HELP</div>271 </div>272 <div class="nav-item">273 <svg viewBox="0 0 24 24"><circle cx="12" cy="8" r="4"/><path d="M4 21c0-4 4-7 8-7s8 3 8 7"/></svg>274 <div class="nav-label">PROFILE</div>275 </div>276 </div>277 278 <div class="home-indicator"></div>279</div>280</body>281</html>