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: "Segoe UI", Arial, sans-serif; }9 #render-target {10 width: 1080px; height: 2400px; position: relative; overflow: hidden;11 background: #f5f5f5; border-radius: 28px; box-shadow: 0 20px 40px rgba(0,0,0,0.25);12 }13 14 /* Background app content */15 .hero {16 width: 1080px; height: 620px; position: relative;17 }18 .img-placeholder {19 width: 100%; height: 100%;20 background: #E0E0E0; border: 1px solid #BDBDBD;21 color: #757575; display: flex; justify-content: center; align-items: center;22 font-weight: 600;23 }24 25 .form-stack {26 position: relative; padding: 24px; margin-top: -40px;27 }28 .form-card {29 background: #ffffff; border-radius: 18px; box-shadow: 0 6px 18px rgba(0,0,0,0.12);30 padding: 28px; margin-bottom: 18px;31 }32 .form-row { display: flex; gap: 16px; }33 .chip {34 flex: 1; background: #fafafa; border: 1px solid #e0e0e0; border-radius: 14px; padding: 20px;35 color: #616161;36 }37 .cta {38 width: 280px; height: 88px; background: #f1c74f; border-radius: 16px; margin-top: 12px;39 }40 41 .section-title { font-size: 40px; font-weight: 700; color: #333; margin: 20px 24px 12px; }42 .map-card {43 margin: 0 24px; height: 780px; background: #E0E0E0; border: 1px solid #BDBDBD; border-radius: 18px;44 display: flex; justify-content: center; align-items: center; color: #757575; position: relative; overflow: hidden;45 }46 /* Simple green pins to hint the map */47 .pin { position: absolute; width: 26px; height: 26px; background: #1d731f; border-radius: 50% 50% 50% 0;48 transform: rotate(-45deg);49 }50 .pin::after { content: ""; position: absolute; width: 10px; height: 10px; background: #e6ffe6; border-radius: 50%; top: 8px; left: 8px; }51 52 /* Bottom nav */53 .bottom-nav {54 position: absolute; left: 0; bottom: 0; width: 100%; height: 210px; background: #ffffff;55 border-top-left-radius: 24px; border-top-right-radius: 24px; box-shadow: 0 -6px 20px rgba(0,0,0,0.12);56 display: flex; justify-content: space-around; align-items: center; padding-bottom: 30px;57 }58 .nav-item { display: flex; flex-direction: column; align-items: center; gap: 16px; color: #7f8c8d; font-size: 36px; }59 .nav-item.active { color: #1d731f; font-weight: 600; }60 .home-indicator {61 position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%);62 width: 280px; height: 12px; background: #ddd; border-radius: 8px;63 }64 svg { display: block; }65 66 /* Overlay and modal */67 .overlay {68 position: absolute; inset: 0; background: rgba(0,0,0,0.35);69 }70 .modal {71 position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);72 width: 920px; height: 1280px; background: #ffffff; border-radius: 24px; box-shadow: 0 22px 60px rgba(0,0,0,0.35);73 overflow: hidden;74 }75 .modal-header {76 background: #A8E63B; height: 280px; padding: 36px 42px; color: #2f3c2f;77 }78 .modal-header .sub { font-size: 34px; letter-spacing: 4px; font-weight: 600; opacity: 0.85; text-transform: uppercase; }79 .modal-header .date-line {80 margin-top: 26px; font-size: 92px; font-weight: 700; color: #2d2d2d; display: flex; align-items: center; justify-content: space-between;81 }82 .modal-body { padding: 34px 42px 28px; }83 .month-row {84 display: flex; align-items: center; justify-content: space-between; margin-bottom: 26px; color: #424242;85 }86 .month-label { font-size: 42px; font-weight: 800; letter-spacing: 2px; }87 .controls { display: flex; align-items: center; gap: 34px; }88 .weekdays { display: grid; grid-template-columns: repeat(7, 1fr); gap: 22px; color: #616161; font-size: 38px; margin-bottom: 18px; }89 .weekdays span { text-align: center; }90 .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); grid-auto-rows: 120px; gap: 18px; }91 .day {92 display: flex; align-items: center; justify-content: center; font-size: 44px; color: #424242; border-radius: 60px;93 }94 .day.muted { color: #bdbdbd; }95 .day.selected {96 background: #A8E63B; color: #1c2a1c; font-weight: 800; width: 120px; height: 120px; margin: 0 auto; border-radius: 60px;97 }98 .modal-actions {99 position: absolute; bottom: 34px; left: 0; width: 100%; padding: 0 42px;100 display: flex; justify-content: space-between; align-items: center;101 }102 .action { font-size: 46px; letter-spacing: 6px; font-weight: 800; color: #1d731f; }103</style>104</head>105<body>106<div id="render-target">107 <!-- Background content -->108 <div class="hero">109 <div class="img-placeholder">[IMG: Bus on highway at sunset]</div>110 </div>111 <div class="form-stack">112 <div class="form-card">113 <div class="form-row">114 <div class="chip">From</div>115 <div class="chip">To</div>116 </div>117 <div class="form-row" style="margin-top:16px;">118 <div class="chip">Date</div>119 <div class="chip">Passengers</div>120 </div>121 <div class="cta"></div>122 </div>123 <div class="section-title">Geo map</div>124 <div class="map-card">125 [IMG: Map with markers]126 <div class="pin" style="top: 180px; left: 220px;"></div>127 <div class="pin" style="top: 320px; left: 480px;"></div>128 <div class="pin" style="top: 520px; left: 680px;"></div>129 <div class="pin" style="top: 600px; left: 300px;"></div>130 <div class="pin" style="top: 400px; left: 840px;"></div>131 </div>132 </div>133 134 <!-- Bottom navigation -->135 <div class="bottom-nav">136 <div class="nav-item active">137 <svg width="72" height="72" viewBox="0 0 24 24" fill="#1d731f">138 <circle cx="11" cy="11" r="7" stroke="none"></circle>139 <path d="M20 20l-4.5-4.5" stroke="#1d731f" stroke-width="2" stroke-linecap="round"></path>140 </svg>141 <div>Booking</div>142 </div>143 <div class="nav-item">144 <svg width="72" height="72" viewBox="0 0 24 24" fill="#7f8c8d">145 <path d="M5 3h14v4H5zM5 7l2 12h10l2-12" fill="none" stroke="#7f8c8d" stroke-width="2"></path>146 </svg>147 <div>Tickets</div>148 </div>149 <div class="nav-item">150 <svg width="72" height="72" viewBox="0 0 24 24" fill="#7f8c8d">151 <path d="M12 3a7 7 0 0 1 7 7c0 5-7 11-7 11s-7-6-7-11a7 7 0 0 1 7-7z" fill="none" stroke="#7f8c8d" stroke-width="2"></path>152 <circle cx="12" cy="10" r="3" fill="#7f8c8d"></circle>153 </svg>154 <div>Stops</div>155 </div>156 <div class="nav-item">157 <svg width="72" height="72" viewBox="0 0 24 24" fill="#7f8c8d">158 <circle cx="12" cy="12" r="10" fill="none" stroke="#7f8c8d" stroke-width="2"></circle>159 <rect x="11" y="10" width="2" height="7" fill="#7f8c8d"></rect>160 <rect x="11" y="7" width="2" height="2" fill="#7f8c8d"></rect>161 </svg>162 <div>More</div>163 </div>164 <div class="home-indicator"></div>165 </div>166 167 <!-- Overlay and Date Picker Modal -->168 <div class="overlay"></div>169 <div class="modal">170 <div class="modal-header">171 <div class="sub">SELECT DATE</div>172 <div class="date-line">173 <span>Nov 14, 2023</span>174 <svg width="48" height="48" viewBox="0 0 24 24" fill="none">175 <path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25z" fill="#2d2d2d"></path>176 <path d="M20.71 7.04a1 1 0 0 0 0-1.41l-2.34-2.34a1 1 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z" fill="#2d2d2d"></path>177 </svg>178 </div>179 </div>180 <div class="modal-body">181 <div class="month-row">182 <div class="month-label">NOVEMBER 2023</div>183 <div class="controls">184 <svg width="34" height="34" viewBox="0 0 24 24" fill="none">185 <path d="M15 18l-6-6 6-6" stroke="#616161" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>186 </svg>187 <svg width="34" height="34" viewBox="0 0 24 24" fill="none">188 <path d="M9 6l6 6-6 6" stroke="#616161" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>189 </svg>190 </div>191 </div>192 <div class="weekdays">193 <span>S</span><span>M</span><span>T</span><span>W</span><span>T</span><span>F</span><span>S</span>194 </div>195 <div class="cal-grid">196 <!-- Leading blanks before Nov 1 (Wed) -->197 <div class="day muted"></div>198 <div class="day muted"></div>199 <div class="day muted"></div>200 <!-- Row 1 -->201 <div class="day muted">1</div>202 <div class="day muted">2</div>203 <div class="day muted">3</div>204 <div class="day muted">4</div>205 <!-- Row 2 -->206 <div class="day">5</div>207 <div class="day">6</div>208 <div class="day">7</div>209 <div class="day">8</div>210 <div class="day">9</div>211 <div class="day">10</div>212 <div class="day">11</div>213 <!-- Row 3 -->214 <div class="day">12</div>215 <div class="day">13</div>216 <div class="day selected">14</div>217 <div class="day">15</div>218 <div class="day">16</div>219 <div class="day">17</div>220 <div class="day">18</div>221 <!-- Row 4 -->222 <div class="day">19</div>223 <div class="day">20</div>224 <div class="day">21</div>225 <div class="day">22</div>226 <div class="day">23</div>227 <div class="day">24</div>228 <div class="day">25</div>229 <!-- Row 5 -->230 <div class="day">26</div>231 <div class="day">27</div>232 <div class="day">28</div>233 <div class="day">29</div>234 <div class="day">30</div>235 <div class="day muted"></div>236 <div class="day muted"></div>237 </div>238 </div>239 <div class="modal-actions">240 <div class="action">CANCEL</div>241 <div class="action">OK</div>242 </div>243 </div>244</div>245</body>246</html>