GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">5<meta name="viewport" content="width=1080, initial-scale=1">6<title>Time & Date Picker Modal</title>7<style>8  :root{9    --ink:#1e1b3d;10    --ink-light:#6f7080;11    --muted:#9aa0ad;12    --line:#e9e9ee;13    --accent:#f5b21b;14    --purple:#2a214f;15    --bg:#ffffff;16  }17  body{ margin:0; padding:0; background:transparent; font-family: "Inter", Arial, sans-serif; }18  #render-target{19    width:1080px; height:2400px;20    position:relative; overflow:hidden;21    background:#ffffff;22  }23 24  /* Status bar */25  .status-bar{26    position:absolute; top:24px; left:24px; right:24px; height:48px;27    display:flex; align-items:center; justify-content:space-between; color:#ffffff;28    z-index:2;29  }30  .status-left{ display:flex; align-items:center; gap:16px; font-weight:600; }31  .status-right{ display:flex; align-items:center; gap:18px; }32  .status-dot{ width:22px; height:22px; border-radius:50%; background:#ffffff; opacity:0.95; }33  .status-square{ width:22px; height:22px; background:#ffffff; border-radius:4px; opacity:0.95; }34  .status-text{ font-size:28px; letter-spacing:0.5px; }35  .status-icon svg{ width:32px; height:32px; fill:#ffffff; opacity:0.95; }36 37  /* Hero image placeholder */38  .hero{39    position:absolute; top:0; left:0; width:100%; height:560px;40    background:#E0E0E0; border-bottom:1px solid #BDBDBD;41    display:flex; align-items:flex-end; justify-content:flex-start;42    color:#757575;43  }44  .hero > span{45    margin:0 0 32px 40px; font-size:64px; font-weight:800; color:rgba(255,255,255,0.85);46    text-shadow:0 2px 6px rgba(0,0,0,0.35);47  }48 49  /* Underlying content (dimmed) */50  .content{51    position:absolute; top:560px; left:0; right:0; bottom:120px;52    padding:40px;53    background:linear-gradient(#ffffff, #faf7f2);54  }55  .card{56    width:100%; background:#f3eadf; border-radius:24px; padding:34px; color:#3b2f55;57    box-shadow:inset 0 1px 0 rgba(0,0,0,0.06);58  }59  .book-btn{60    margin-top:22px; width:420px; height:92px; border-radius:18px;61    background:#1e1b3d; color:#ffffff; display:flex; align-items:center; justify-content:center;62    font-size:36px; font-weight:700;63  }64 65  /* Modal */66  .modal{67    position:absolute; left:70px; right:70px; top:520px;68    background:#ffffff; border-radius:18px; box-shadow:0 18px 40px rgba(0,0,0,0.25);69    padding:46px 48px; z-index:3;70  }71  .modal-header{72    display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:24px;73  }74  .modal-title{ font-size:40px; font-weight:800; color:var(--ink); text-transform:uppercase; letter-spacing:1px; }75  .modal-title.inactive{ color:#8e8e98; }76  .underline{77    width:380px; height:4px; background:var(--purple); margin-top:18px;78  }79 80  .time-picker{81    margin-top:12px; display:flex; align-items:center; gap:36px;82  }83  .time-col{ width:200px; display:flex; flex-direction:column; align-items:center; }84  .time-fade{ font-size:40px; color:#b8bcc8; margin:22px 0; }85  .time-current{ font-size:64px; font-weight:800; color:var(--ink); letter-spacing:2px; }86  .time-line{ width:190px; height:4px; background:var(--purple); margin:16px 0; }87  .colon{ font-size:72px; font-weight:800; color:var(--ink); margin-top:12px; }88  .btn-now{89    margin-left:auto; background:var(--accent); color:#2f2506; border-radius:14px;90    height:80px; padding:0 30px; display:flex; align-items:center; font-size:36px; font-weight:800;91    box-shadow:0 2px 0 rgba(0,0,0,0.08);92  }93 94  .divider{ height:2px; background:var(--line); margin:44px 0; }95 96  .date-row{97    display:flex; align-items:center; justify-content:center; gap:24px; color:var(--ink);98  }99  .date-text{ font-size:40px; font-weight:700; color:var(--ink); }100  .chev{ width:44px; height:44px; background:transparent; display:flex; align-items:center; justify-content:center; }101  .chev svg{ width:40px; height:40px; fill:var(--accent); }102 103  .modal-footer{104    display:flex; justify-content:flex-end; gap:24px; margin-top:38px;105  }106  .btn{107    height:92px; padding:0 44px; border-radius:16px; font-size:36px; font-weight:900; letter-spacing:0.5px;108    display:flex; align-items:center; justify-content:center;109  }110  .btn-outline{ border:2px solid #e3e3ea; color:var(--ink); background:#ffffff; }111  .btn-primary{ background:var(--accent); color:#2f2506; border:none; }112 113  /* Bottom nav */114  .bottom-nav{115    position:absolute; left:0; right:0; bottom:0; height:120px; background:#f4f4f7; border-top:1px solid #ddd;116    display:flex; align-items:center; justify-content:space-around; color:#7b7e89;117  }118  .nav-item{ display:flex; flex-direction:column; align-items:center; gap:8px; font-size:28px; }119  .nav-item .icon{ width:42px; height:42px; }120  .nav-item.active{ color:#1e1b3d; font-weight:800; }121  /* Image label style inside placeholders */122  .img-label{ width:100%; text-align:center; color:#757575; font-size:28px; }123</style>124</head>125<body>126<div id="render-target">127 128  <!-- Hero image placeholder -->129  <div class="hero">130    <div class="img-label">[IMG: Scenic train landscape]</div>131    <span>Where to next?</span>132  </div>133 134  <!-- Status bar -->135  <div class="status-bar">136    <div class="status-left">137      <div class="status-text">1:11</div>138      <div class="status-dot"></div>139      <div class="status-square"></div>140      <div class="status-text" style="font-size:24px;">oyo</div>141    </div>142    <div class="status-right">143      <div class="status-icon">144        <!-- wifi -->145        <svg viewBox="0 0 24 24"><path d="M12 18a2 2 0 1 0 0.001 4.001A2 2 0 0 0 12 18zm-6.5-6.2a12 12 0 0 1 13 0l-1.6 1.8a9.5 9.5 0 0 0-9.8 0l-1.6-1.8zm-3.5-4.2a18 18 0 0 1 19 0l-1.8 2.1a15 15 0 0 0-15.4 0L2 7.6z"/></svg>146      </div>147      <div class="status-icon">148        <!-- battery -->149        <svg viewBox="0 0 24 24"><path d="M2 8a3 3 0 0 1 3-3h13a3 3 0 0 1 3 3v8a3 3 0 0 1-3 3H5a3 3 0 0 1-3-3V8zm18-1v10H5V7h15zm2 3h2v4h-2v-4z"/></svg>150      </div>151    </div>152  </div>153 154  <!-- Underlying content -->155  <div class="content">156    <div class="card">157      <div style="font-size:42px; font-weight:800; margin-bottom:8px;">Best routes</div>158      <div style="font-size:30px; color:#5b516d;">159        Plan and reserve seats ahead of time for your journey. Choose departure and arrival to see schedules.160      </div>161      <div class="book-btn">Book seats</div>162    </div>163  </div>164 165  <!-- Center modal -->166  <div class="modal">167    <div class="modal-header">168      <div>169        <div class="modal-title">Departure</div>170        <div class="underline"></div>171      </div>172      <div class="modal-title inactive">Arrival</div>173    </div>174 175    <div class="time-picker">176      <div class="time-col">177        <div class="time-fade">07</div>178        <div class="time-line"></div>179        <div class="time-current">08</div>180        <div class="time-line"></div>181        <div class="time-fade">09</div>182      </div>183 184      <div class="colon">:</div>185 186      <div class="time-col">187        <div class="time-fade">59</div>188        <div class="time-line"></div>189        <div class="time-current">00</div>190        <div class="time-line"></div>191        <div class="time-fade">01</div>192      </div>193 194      <div class="btn-now">Now</div>195    </div>196 197    <div class="divider"></div>198 199    <div class="date-row">200      <div class="chev">201        <svg viewBox="0 0 24 24"><path d="M15.5 4l-8 8 8 8 1.5-1.5-6.5-6.5 6.5-6.5L15.5 4z"/></svg>202      </div>203      <div class="date-text">Sun 27 Aug 2023</div>204      <div class="chev">205        <svg viewBox="0 0 24 24"><path d="M8.5 4l8 8-8 8-1.5-1.5 6.5-6.5-6.5-6.5L8.5 4z"/></svg>206      </div>207    </div>208 209    <div class="divider"></div>210 211    <div class="modal-footer">212      <div class="btn btn-outline">CANCEL</div>213      <div class="btn btn-primary">DONE</div>214    </div>215  </div>216 217  <!-- Bottom navigation -->218  <div class="bottom-nav">219    <div class="nav-item active">220      <div class="icon">221        <svg viewBox="0 0 24 24" width="42" height="42" fill="#1e1b3d"><path d="M12 2a9 9 0 0 0-9 9v7h6v-4h6v4h6v-7a9 9 0 0 0-9-9zm0 5a4 4 0 0 1 4 4H8a4 4 0 0 1 4-4z"/></svg>222      </div>223      <div>Planner</div>224    </div>225    <div class="nav-item">226      <div class="icon">227        <svg viewBox="0 0 24 24" width="42" height="42" fill="#7b7e89"><path d="M12 2l9 4-9 4-9-4 9-4zm0 6l9 4-9 4-9-4 9-4zm-9 8l9 4 9-4v2l-9 4-9-4v-2z"/></svg>228      </div>229      <div>My Trip</div>230    </div>231    <div class="nav-item">232      <div class="icon">233        <svg viewBox="0 0 24 24" width="42" height="42" fill="#7b7e89"><path d="M6 2h12a2 2 0 0 1 2 2v16l-8-3-8 3V4a2 2 0 0 1 2-2z"/></svg>234      </div>235      <div>My Pass</div>236    </div>237    <div class="nav-item">238      <div class="icon">239        <svg viewBox="0 0 24 24" width="42" height="42" fill="#7b7e89"><path d="M3 5h18v2H3V5zm0 6h18v2H3v-2zm0 6h18v2H3v-2z"/></svg>240      </div>241      <div>More</div>242    </div>243  </div>244 245</div>246</body>247</html>