GD-ML/AndroidCode

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: #f4f4f4;12  }13 14  /* Background app content */15  .hero {16    position: absolute; left: 0; top: 0; width: 1080px; height: 620px;17    background: #E0E0E0; border-bottom: 1px solid #BDBDBD;18    display: flex; align-items: flex-end; justify-content: flex-start;19    color: #757575; font-weight: bold;20  }21  .hero span { background: rgba(0,0,0,0.1); padding: 10px 14px; margin: 20px; border-radius: 6px; }22  .dim {23    position: absolute; inset: 0; background: rgba(0,0,0,0.44);24  }25 26  .search-card {27    position: absolute; left: 40px; top: 540px; width: 1000px; height: 250px;28    border-radius: 18px; background: #ffffff; box-shadow: 0 10px 30px rgba(0,0,0,0.15);29    display: flex; gap: 20px; padding: 20px;30    align-items: center;31  }32  .field {33    flex: 1; height: 90px; border-radius: 14px; border: 1px solid #d9d9d9; background: #fafafa;34    display: flex; align-items: center; justify-content: center; color: #757575; font-size: 30px;35  }36  .map-card {37    position: absolute; left: 40px; top: 860px; width: 1000px; height: 740px;38    border-radius: 18px; background: #ffffff; box-shadow: 0 8px 26px rgba(0,0,0,0.12);39    padding: 20px;40  }41  .map-placeholder {42    width: 100%; height: 100%; background: #E0E0E0; border: 1px solid #BDBDBD;43    display: flex; align-items: center; justify-content: center; color: #757575; font-size: 34px;44  }45 46  /* Bottom navigation */47  .bottom-nav {48    position: absolute; left: 0; bottom: 120px; width: 1080px; height: 170px;49    background: #ffffff; border-top: 1px solid #ddd; display: flex; justify-content: space-around; align-items: center;50  }51  .nav-item { display: flex; flex-direction: column; align-items: center; color: #666; font-size: 32px; }52  .nav-item.active { color: #2f6d17; font-weight: bold; }53  .nav-icon {54    width: 64px; height: 64px; margin-bottom: 12px;55  }56 57  /* Modal date picker */58  .modal {59    position: absolute; left: 90px; top: 600px; width: 900px; border-radius: 18px; overflow: hidden;60    background: #ffffff; box-shadow: 0 30px 80px rgba(0,0,0,0.35);61  }62  .modal-header {63    background: #B7E546; color: #333; padding: 34px 44px 40px 44px;64  }65  .modal-header .title-row {66    display: flex; align-items: center; justify-content: space-between;67  }68  .label {69    font-size: 26px; letter-spacing: 3px; text-transform: uppercase; color: rgba(0,0,0,0.6); margin-bottom: 18px;70  }71  .date-text {72    font-size: 72px; font-weight: 700; color: #3a3a3a;73  }74  .icon-btn { width: 48px; height: 48px; }75  .modal-body { padding: 36px 44px 28px 44px; }76  .month-row {77    display: flex; align-items: center; justify-content: space-between; margin-bottom: 26px;78    color: #505050; font-weight: 700; font-size: 34px; letter-spacing: 1px;79  }80  .month-left { display: flex; align-items: center; gap: 12px; }81  .month-actions { display: flex; align-items: center; gap: 28px; }82  .chev { width: 42px; height: 42px; }83  .dow {84    display: grid; grid-template-columns: repeat(7, 1fr); margin: 20px 0 6px 0; color: #5b5b5b; font-size: 30px; letter-spacing: 8px;85  }86  .dow div { text-align: center; padding: 14px 0; }87 88  .calendar {89    display: grid; grid-template-columns: repeat(7, 1fr); grid-auto-rows: 110px; gap: 0;90  }91  .day {92    display: flex; align-items: center; justify-content: center; font-size: 42px; color: #6a6a6a; position: relative;93  }94  .day.muted { color: #BDBDBD; }95  .day.empty { color: transparent; }96  .circle {97    width: 86px; height: 86px; border-radius: 50%; display: flex; align-items: center; justify-content: center;98    font-weight: 600;99  }100  .circle.ring { border: 3px solid #9E9E9E; color: #4f4f4f; }101  .circle.selected { background: #B7E546; color: #2b2b2b; }102 103  .actions {104    display: flex; justify-content: flex-end; gap: 40px; padding: 18px 44px 40px 44px; font-size: 38px; font-weight: 700;105  }106  .action-btn { color: #236E1A; letter-spacing: 4px; }107 108  /* iOS style home indicator (approx) */109  .home-indicator {110    position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%);111    width: 360px; height: 12px; background: #d9d9d9; border-radius: 8px;112  }113</style>114</head>115<body>116<div id="render-target">117 118  <!-- Background content -->119  <div class="hero">120    <span>[IMG: Bus on highway at sunset]</span>121  </div>122 123  <div class="search-card">124    <div class="field">From</div>125    <div class="field">To</div>126    <div class="field">Date</div>127    <div class="field">Passengers</div>128  </div>129 130  <div class="map-card">131    <div class="map-placeholder">[IMG: Map with location pins]</div>132  </div>133 134  <div class="bottom-nav">135    <div class="nav-item active">136      <svg class="nav-icon" viewBox="0 0 24 24">137        <circle cx="12" cy="12" r="9" fill="#2f6d17"></circle>138      </svg>139      Booking140    </div>141    <div class="nav-item">142      <svg class="nav-icon" viewBox="0 0 24 24">143        <rect x="5" y="5" width="14" height="10" fill="#999"></rect>144        <line x1="7" y1="17" x2="17" y2="17" stroke="#999" stroke-width="2"></line>145      </svg>146      Tickets147    </div>148    <div class="nav-item">149      <svg class="nav-icon" viewBox="0 0 24 24">150        <path d="M12 3 C8 3 5 6 5 9 c0 5 7 12 7 12 s7-7 7-12 c0-3-3-6-7-6z" fill="#999"></path>151      </svg>152      Stops153    </div>154    <div class="nav-item">155      <svg class="nav-icon" viewBox="0 0 24 24">156        <circle cx="12" cy="6" r="2.5" fill="#999"></circle>157        <rect x="10" y="10" width="4" height="9" fill="#999"></rect>158      </svg>159      More160    </div>161  </div>162 163  <!-- Dim overlay -->164  <div class="dim"></div>165 166  <!-- Modal date picker -->167  <div class="modal">168    <div class="modal-header">169      <div class="label">SELECT DATE</div>170      <div class="title-row">171        <div class="date-text">Nov 20, 2023</div>172        <svg class="icon-btn" viewBox="0 0 24 24">173          <path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.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="#3a3a3a"></path>174        </svg>175      </div>176    </div>177 178    <div class="modal-body">179      <div class="month-row">180        <div class="month-left">181          <div>November 2023</div>182          <svg class="chev" viewBox="0 0 24 24">183            <path d="M7 10l5 5 5-5" stroke="#505050" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>184          </svg>185        </div>186        <div class="month-actions">187          <svg class="chev" viewBox="0 0 24 24">188            <path d="M15 6 L9 12 L15 18" stroke="#505050" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>189          </svg>190          <svg class="chev" viewBox="0 0 24 24">191            <path d="M9 6 L15 12 L9 18" stroke="#505050" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>192          </svg>193        </div>194      </div>195 196      <div class="dow">197        <div>S</div><div>M</div><div>T</div><div>W</div><div>T</div><div>F</div><div>S</div>198      </div>199 200      <div class="calendar">201        <!-- Row 1 -->202        <div class="day empty"></div>203        <div class="day empty"></div>204        <div class="day empty"></div>205        <div class="day">1</div>206        <div class="day">2</div>207        <div class="day">3</div>208        <div class="day">4</div>209        <!-- Row 2 -->210        <div class="day muted">5</div>211        <div class="day muted">6</div>212        <div class="day muted">7</div>213        <div class="day muted">8</div>214        <div class="day muted">9</div>215        <div class="day muted">10</div>216        <div class="day muted">11</div>217        <!-- Row 3 -->218        <div class="day">12</div>219        <div class="day">13</div>220        <div class="day"><div class="circle ring">14</div></div>221        <div class="day">15</div>222        <div class="day">16</div>223        <div class="day">17</div>224        <div class="day">18</div>225        <!-- Row 4 -->226        <div class="day">19</div>227        <div class="day"><div class="circle selected">20</div></div>228        <div class="day">21</div>229        <div class="day">22</div>230        <div class="day">23</div>231        <div class="day">24</div>232        <div class="day">25</div>233        <!-- Row 5 -->234        <div class="day">26</div>235        <div class="day">27</div>236        <div class="day">28</div>237        <div class="day">29</div>238        <div class="day">30</div>239        <div class="day empty"></div>240        <div class="day empty"></div>241      </div>242    </div>243 244    <div class="actions">245      <div class="action-btn">CANCEL</div>246      <div class="action-btn">OK</div>247    </div>248  </div>249 250  <div class="home-indicator"></div>251</div>252</body>253</html>