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>Greyhound Booking - Date Picker</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; }9 #render-target {10 width: 1080px; height: 2400px; position: relative; overflow: hidden;11 background: #f7f7f7;12 }13 14 /* Top app bar / header */15 .app-header {16 position: absolute; left: 0; top: 0; width: 1080px; height: 360px; background: #0b3c44;17 }18 .status-bar {19 position: absolute; top: 0; left: 0; width: 100%; height: 120px; color: #ffffff; font-weight: 600;20 display: flex; align-items: center; padding: 0 36px; box-sizing: border-box;21 }22 .status-bar .time { font-size: 40px; letter-spacing: 1px; }23 .status-icons { margin-left: auto; display: flex; gap: 28px; align-items: center; }24 .status-icons svg { width: 42px; height: 42px; fill: #ffffff; }25 26 .brand-row {27 position: absolute; top: 140px; left: 36px; right: 36px; height: 180px; display: flex; align-items: center;28 }29 .brand-placeholder {30 width: 400px; height: 140px; background: #E0E0E0; border: 1px solid #BDBDBD; color: #757575;31 display: flex; justify-content: center; align-items: center; border-radius: 8px;32 }33 34 /* Booking card */35 .booking-card {36 position: absolute; top: 370px; left: 36px; right: 36px; background: #ffffff;37 border: 1px solid #dcdcdc; border-radius: 24px; box-shadow: 0 2px 0 rgba(0,0,0,0.06); padding: 28px;38 }39 .field {40 border: 2px solid #e2e2e2; border-radius: 18px; padding: 28px; margin-bottom: 22px;41 position: relative; background: #fafafa;42 }43 .field-label { font-size: 30px; color: #5f6a6d; margin-bottom: 12px; }44 .field-value { font-size: 42px; color: #2e3a3d; }45 .swap-btn {46 position: absolute; right: -26px; top: 140px; width: 120px; height: 120px; border-radius: 60px;47 background: #ffffff; border: 2px solid #cfd8dc; box-shadow: 0 4px 12px rgba(0,0,0,0.12);48 display: flex; justify-content: center; align-items: center;49 }50 .swap-btn svg { width: 64px; height: 64px; fill: none; stroke: #0b3c44; stroke-width: 6px; }51 52 .cta-row { margin-top: 20px; display: flex; }53 .cta-btn {54 background: #c0682f; color: #ffffff; font-weight: 700; font-size: 40px;55 padding: 26px 40px; border-radius: 18px; border: none; width: 360px;56 box-shadow: 0 8px 18px rgba(0,0,0,0.15);57 }58 59 /* News card below */60 .news-card {61 position: absolute; top: 880px; left: 36px; right: 36px; background: #ffffff;62 border: 1px solid #e0e0e0; border-radius: 24px; overflow: hidden;63 }64 .news-image {65 height: 360px; background: #E0E0E0; border-bottom: 1px solid #BDBDBD; color: #757575;66 display: flex; justify-content: center; align-items: center;67 }68 .news-content { padding: 28px; color: #404c50; }69 .news-title { font-size: 44px; margin-bottom: 10px; font-weight: 700; }70 .news-text { font-size: 36px; color: #6b7679; }71 .link { color: #0b3c44; font-size: 36px; margin-top: 20px; font-weight: 700; }72 73 /* Bottom navigation */74 .bottom-nav {75 position: absolute; bottom: 0; left: 0; width: 1080px; height: 180px; background: #eaecee; border-top: 1px solid #d0d3d6;76 display: flex; justify-content: space-around; align-items: center;77 }78 .nav-item { display: flex; flex-direction: column; align-items: center; gap: 16px; color: #5c6b70; font-size: 30px; }79 .nav-item.active { color: #0b3c44; font-weight: 700; }80 .nav-icon { width: 60px; height: 60px; }81 .nav-item.active .nav-icon circle { fill: #0b3c44; }82 .nav-item.active .nav-icon path { stroke: #ffffff; }83 84 /* Modal date picker */85 .modal-overlay {86 position: absolute; left: 0; top: 0; width: 100%; height: 100%;87 background: rgba(0,0,0,0.35);88 }89 .date-picker {90 position: absolute; left: 90px; top: 520px; width: 900px; background: #ffffff; border-radius: 22px;91 box-shadow: 0 24px 60px rgba(0,0,0,0.35); overflow: hidden;92 }93 .dp-header {94 background: #0b3c44; color: #ffffff; padding: 34px 38px 30px 38px; position: relative;95 }96 .dp-subtitle { font-size: 28px; letter-spacing: 2px; opacity: 0.85; }97 .dp-title { font-size: 78px; font-weight: 700; margin-top: 16px; }98 .edit-icon {99 position: absolute; right: 34px; top: 80px;100 }101 .edit-icon svg { width: 44px; height: 44px; fill: none; stroke: #ffffff; stroke-width: 6px; }102 103 .dp-body { padding: 26px 30px 30px 30px; }104 .month-row {105 display: flex; align-items: center; gap: 18px; margin-bottom: 20px;106 }107 .month-label { font-size: 40px; color: #606e74; font-weight: 700; letter-spacing: 1px; }108 .dropdown-caret {109 width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 14px solid #606e74; margin-left: 10px;110 }111 .month-row .spacer { flex: 1; }112 .chev-btn { width: 48px; height: 48px; border-radius: 10px; display: flex; justify-content: center; align-items: center; border: 1px solid #cdd6da; }113 .chev-btn svg { width: 26px; height: 26px; fill: none; stroke: #49575c; stroke-width: 6px; }114 115 .weekday-row {116 display: grid; grid-template-columns: repeat(7, 1fr);117 color: #7a868b; font-size: 30px; margin: 14px 6px 6px 6px;118 text-align: center;119 }120 .day-grid {121 display: grid; grid-template-columns: repeat(7, 1fr);122 gap: 8px; padding: 8px 6px;123 }124 .day {125 height: 100px; display: flex; justify-content: center; align-items: center; font-size: 42px; color: #a4adb1; border-radius: 50%;126 }127 .day.circled { border: 4px solid #8b9397; color: #4b565b; }128 .day.selected { background: #0b3c44; color: #ffffff; }129 .dp-actions {130 border-top: 1px solid transparent; display: flex; justify-content: flex-end; gap: 40px; padding: 22px 36px 28px;131 }132 .dp-action { font-size: 42px; color: #0b3c44; font-weight: 700; letter-spacing: 2px; }133 134</style>135</head>136<body>137<div id="render-target">138 139 <!-- Top header -->140 <div class="app-header">141 <div class="status-bar">142 <div class="time">10:20</div>143 <div class="status-icons">144 <!-- simple icons -->145 <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/></svg>146 <svg viewBox="0 0 24 24"><path d="M6 6h12v12H6z"/></svg>147 <svg viewBox="0 0 24 24"><path d="M12 4l6 8-6 8-6-8 6-8z"/></svg>148 <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="2"/><circle cx="20" cy="12" r="2"/></svg>149 <svg viewBox="0 0 24 24"><path d="M18 8a6 6 0 0 0-12 0v8h12V8z"/></svg>150 </div>151 </div>152 <div class="brand-row">153 <div class="brand-placeholder">[IMG: Greyhound Logo]</div>154 </div>155 </div>156 157 <!-- Booking form card -->158 <div class="booking-card">159 <div class="field">160 <div class="field-label">From</div>161 <div class="field-value">Hamilton, ON</div>162 </div>163 <div class="field">164 <div class="field-label">To</div>165 <div class="field-value">Replace destination</div>166 <div class="swap-btn" title="Swap">167 <svg viewBox="0 0 48 48">168 <path d="M24 8v16M24 8l-6 6M24 8l6 6"/>169 <path d="M24 40V24M24 40l-6-6M24 40l6-6"/>170 </svg>171 </div>172 </div>173 <div class="field">174 <div class="field-label">Departing</div>175 <div class="field-value">Oct 26</div>176 </div>177 <div class="field">178 <div class="field-label">Passengers</div>179 <div class="field-value">1</div>180 </div>181 182 <div class="cta-row"><button class="cta-btn">Search</button></div>183 </div>184 185 <!-- News card -->186 <div class="news-card">187 <div class="news-image">[IMG: Bus network banner]</div>188 <div class="news-content">189 <div class="news-title">What's New</div>190 <div class="news-text">Our network has expanded! See how this benefits you.</div>191 <div class="link">FIND OUT MORE</div>192 </div>193 </div>194 195 <!-- Bottom navigation -->196 <div class="bottom-nav">197 <div class="nav-item active">198 <svg class="nav-icon" viewBox="0 0 64 64">199 <circle cx="32" cy="32" r="28"/>200 <path d="M22 20h20M22 28h20M22 36h20" stroke="#ffffff" stroke-width="4" fill="none" stroke-linecap="round"/>201 </svg>202 <div>Booking</div>203 </div>204 <div class="nav-item">205 <svg class="nav-icon" viewBox="0 0 64 64">206 <rect x="14" y="16" width="36" height="28" rx="6" fill="#cfd8dc"/>207 <path d="M18 40h28M20 24h10M34 24h10" stroke="#5c6b70" stroke-width="4" fill="none" stroke-linecap="round"/>208 </svg>209 <div>Tickets</div>210 </div>211 <div class="nav-item">212 <svg class="nav-icon" viewBox="0 0 64 64">213 <path d="M32 10a16 16 0 0 0-16 16c0 12 16 28 16 28s16-16 16-28a16 16 0 0 0-16-16z" fill="#cfd8dc" stroke="#5c6b70" stroke-width="4"/>214 <circle cx="32" cy="26" r="6" fill="#5c6b70"/>215 </svg>216 <div>Stops</div>217 </div>218 <div class="nav-item">219 <svg class="nav-icon" viewBox="0 0 64 64">220 <circle cx="32" cy="32" r="26" fill="#cfd8dc" stroke="#5c6b70" stroke-width="4"/>221 <path d="M32 20v4M32 28v16" stroke="#5c6b70" stroke-width="5" stroke-linecap="round"/>222 </svg>223 <div>More</div>224 </div>225 </div>226 227 <!-- Date picker modal -->228 <div class="modal-overlay"></div>229 <div class="date-picker">230 <div class="dp-header">231 <div class="dp-subtitle">SELECT DATE</div>232 <div class="dp-title">Oct 26, 2023</div>233 <div class="edit-icon">234 <svg viewBox="0 0 24 24">235 <path d="M4 16l10-10 4 4-10 10H4z"/>236 </svg>237 </div>238 </div>239 <div class="dp-body">240 <div class="month-row">241 <div class="month-label">OCTOBER 2023</div>242 <div class="dropdown-caret"></div>243 <div class="spacer"></div>244 <div class="chev-btn" aria-label="Prev month">245 <svg viewBox="0 0 24 24"><path d="M15 5l-8 7 8 7"/></svg>246 </div>247 <div class="chev-btn" aria-label="Next month">248 <svg viewBox="0 0 24 24"><path d="M9 5l8 7-8 7"/></svg>249 </div>250 </div>251 252 <div class="weekday-row">253 <div>S</div><div>M</div><div>T</div><div>W</div><div>T</div><div>F</div><div>S</div>254 </div>255 256 <div class="day-grid">257 <div class="day">1</div><div class="day">2</div><div class="day">3</div><div class="day">4</div><div class="day">5</div><div class="day">6</div><div class="day">7</div>258 <div class="day">8</div><div class="day">9</div><div class="day">10</div><div class="day">11</div><div class="day">12</div><div class="day">13</div><div class="day">14</div>259 <div class="day">15</div><div class="day">16</div><div class="day">17</div><div class="day">18</div><div class="day">19</div><div class="day">20</div><div class="day">21</div>260 <div class="day">22</div><div class="day">23</div><div class="day">24</div><div class="day circled">25</div><div class="day selected">26</div><div class="day">27</div><div class="day">28</div>261 <div class="day">29</div><div class="day">30</div><div class="day">31</div>262 </div>263 264 <div class="dp-actions">265 <div class="dp-action">CANCEL</div>266 <div class="dp-action">OK</div>267 </div>268 </div>269 </div>270 271</div>272</body>273</html>