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>Time Picker Modal UI</title>7<style>8  :root{9    --purple:#2A204D;10    --purple-weak:#6B628C;11    --text:#1F2440;12    --muted:#9CA0B1;13    --yellow:#F1B433;14    --line:#EAEAEA;15    --bg:#F7F7F7;16  }17  body{ margin:0; padding:0; background:transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, Arial, sans-serif; }18  #render-target{ width:1080px; height:2400px; position:relative; overflow:hidden; background:#ffffff; }19 20  /* Status bar */21  .status-bar{22    position:absolute; top:30px; left:40px; right:40px; height:60px;23    color:#fff; display:flex; align-items:center; justify-content:space-between;24    z-index:2; pointer-events:none; font-weight:600; font-size:34px;25  }26  .status-right{ display:flex; align-items:center; gap:28px; }27  .status-dot{ width:14px; height:14px; background:#fff; border-radius:50%; opacity:0.9; }28  .status-icon{ width:40px; height:40px; }29  .wifi svg, .battery svg{ width:40px; height:40px; fill:#fff; }30 31  /* Hero image */32  .hero{33    position:absolute; left:0; top:0; width:100%; height:820px;34  }35  .img{36    width:100%; height:100%;37    background:#E0E0E0; border:1px solid #BDBDBD;38    display:flex; align-items:center; justify-content:center; color:#757575; font-size:34px; letter-spacing:0.5px;39  }40  .hero .overlay{41    position:absolute; inset:0; background:rgba(0,0,0,0.35);42  }43  .hero-title{44    position:absolute; left:40px; bottom:120px; color:rgba(255,255,255,0.7);45    font-size:86px; font-weight:800;46  }47 48  /* Underlying content preview (behind modal) */49  .content-card{50    position:absolute; top:870px; left:40px; right:40px; height:340px;51    background:linear-gradient(180deg, #FFF 0%, #F4E8D6 100%);52    border-radius:28px; box-shadow:0 12px 24px rgba(0,0,0,0.08);53  }54  .content-card .cta{55    position:absolute; left:40px; bottom:40px; height:120px; width:360px;56    background:#1E1438; color:#fff; border-radius:22px; display:flex; align-items:center; justify-content:center; font-size:44px; font-weight:700;57  }58 59  /* Bottom navigation */60  .nav{61    position:absolute; bottom:0; left:0; width:100%; height:180px; background:#fff; border-top:1px solid #E5E5EA;62    display:flex; justify-content:space-around; align-items:center;63  }64  .nav-item{ display:flex; flex-direction:column; align-items:center; gap:18px; color:#8E8EA0; font-size:34px; }65  .nav-item.active{ color:var(--purple); font-weight:700; }66  .nav-icon{ width:64px; height:64px; }67  .nav-icon svg{ width:64px; height:64px; fill:none; stroke:#8E8EA0; stroke-width:6; }68  .nav-item.active .nav-icon svg{ stroke:var(--purple); }69 70  /* Modal overlay and dialog */71  .modal-overlay{ position:absolute; inset:0; background:rgba(0,0,0,0.35); }72  .dialog{73    position:absolute; left:60px; top:820px; width:960px; height:1100px;74    background:#fff; border-radius:26px; box-shadow:0 18px 36px rgba(0,0,0,0.25);75  }76  .dialog-header{77    display:flex; justify-content:space-between; align-items:flex-end;78    padding:60px 70px 24px 70px; color:var(--muted); font-size:42px; font-weight:800; letter-spacing:0.5px;79  }80  .dialog-header .left{ color:var(--purple); }81  .active-underline{ margin:0 70px; height:6px; width:360px; background:var(--purple); border-radius:3px; }82  .time-picker{ padding:40px 70px 28px 70px; display:flex; align-items:center; gap:38px; }83  .time-col{ display:flex; flex-direction:column; align-items:center; width:220px; }84  .time-faint{ color:#C6C8D6; font-size:42px; margin-bottom:26px; }85  .time-line{ width:210px; height:6px; background:var(--purple); border-radius:3px; margin:8px 0 20px 0; }86  .time-value{ font-size:86px; color:var(--text); font-weight:800; }87  .colon{ font-size:80px; color:var(--text); font-weight:800; margin:0 8px; }88  .time-col .below-line{ margin:20px 0 12px 0; }89  .now-btn{90    margin-left:auto; background:var(--yellow); color:#3D2B00; font-size:40px; font-weight:800;91    padding:22px 34px; border-radius:18px; box-shadow:0 6px 0 rgba(0,0,0,0.15);92  }93 94  .date-row{95    margin-top:18px; border-top:1px solid var(--line); border-bottom:1px solid var(--line);96    height:180px; display:flex; align-items:center; justify-content:center; position:relative;97    padding:0 70px; color:var(--text); font-size:44px; font-weight:700;98  }99  .date-arrow{ position:absolute; width:64px; height:64px; top:58px; }100  .date-arrow.left{ left:70px; }101  .date-arrow.right{ right:70px; }102  .date-arrow svg{ width:64px; height:64px; fill:none; stroke:var(--yellow); stroke-width:10; stroke-linecap:round; stroke-linejoin:round; }103 104  .dialog-footer{105    position:absolute; bottom:40px; right:40px; left:40px; display:flex; justify-content:flex-end; gap:30px;106  }107  .btn{ height:120px; min-width:240px; border-radius:20px; font-size:40px; font-weight:800; display:flex; align-items:center; justify-content:center; }108  .btn-outline{ border:2px solid #DDD6EA; color:var(--purple); background:#fff; }109  .btn-primary{ background:var(--yellow); color:#332300; box-shadow:0 6px 0 rgba(0,0,0,0.12); }110 111</style>112</head>113<body>114<div id="render-target">115 116  <!-- Hero image with overlay -->117  <div class="hero">118    <div class="img">[IMG: Scenic mountains with train]</div>119    <div class="overlay"></div>120    <div class="hero-title">Where to next?</div>121  </div>122 123  <!-- Status bar -->124  <div class="status-bar">125    <div>11:29</div>126    <div class="status-right">127      <div class="status-dot"></div>128      <div class="status-dot"></div>129      <div class="status-dot"></div>130      <div class="status-dot"></div>131      <div class="wifi status-icon">132        <svg viewBox="0 0 40 40">133          <path d="M4 14c7-6 25-6 32 0M8 20c5-4 19-4 24 0M12 26c3-2 13-2 16 0M20 32a4 4 0 1 0 0.01 0"></path>134        </svg>135      </div>136      <div class="battery status-icon">137        <svg viewBox="0 0 40 40">138          <rect x="4" y="10" width="28" height="20" rx="4" ry="4"></rect>139          <rect x="32" y="16" width="4" height="8" rx="2"></rect>140        </svg>141      </div>142    </div>143  </div>144 145  <!-- Underlying content preview -->146  <div class="content-card">147    <div class="cta">Book seats</div>148  </div>149 150  <!-- Modal overlay and dialog -->151  <div class="modal-overlay"></div>152  <div class="dialog">153    <div class="dialog-header">154      <div class="left">DEPARTURE</div>155      <div>ARRIVAL</div>156    </div>157    <div class="active-underline"></div>158 159    <div class="time-picker">160      <div class="time-col">161        <div class="time-faint">10</div>162        <div class="time-line"></div>163        <div class="time-value">11</div>164        <div class="time-line below-line"></div>165        <div class="time-faint">12</div>166      </div>167 168      <div class="colon">:</div>169 170      <div class="time-col">171        <div class="time-faint">21</div>172        <div class="time-line"></div>173        <div class="time-value">22</div>174        <div class="time-line below-line"></div>175        <div class="time-faint">23</div>176      </div>177 178      <div class="now-btn">Now</div>179    </div>180 181    <div class="date-row">182      <div class="date-arrow left">183        <svg viewBox="0 0 64 64">184          <path d="M40 12 L20 32 L40 52"></path>185        </svg>186      </div>187      <div>Mon 25 Sep 2023</div>188      <div class="date-arrow right">189        <svg viewBox="0 0 64 64">190          <path d="M24 12 L44 32 L24 52"></path>191        </svg>192      </div>193    </div>194 195    <div class="dialog-footer">196      <div class="btn btn-outline">CANCEL</div>197      <div class="btn btn-primary">DONE</div>198    </div>199  </div>200 201  <!-- Bottom navigation bar -->202  <div class="nav">203    <div class="nav-item active">204      <div class="nav-icon">205        <svg viewBox="0 0 64 64"><circle cx="32" cy="32" r="20"></circle></svg>206      </div>207      <div>Planner</div>208    </div>209    <div class="nav-item">210      <div class="nav-icon">211        <svg viewBox="0 0 64 64"><path d="M12 48L28 20L52 48"></path></svg>212      </div>213      <div>My Trip</div>214    </div>215    <div class="nav-item">216      <div class="nav-icon">217        <svg viewBox="0 0 64 64"><rect x="16" y="12" width="32" height="40" rx="4"></rect><circle cx="32" cy="40" r="6"></circle></svg>218      </div>219      <div>My Pass</div>220    </div>221    <div class="nav-item">222      <div class="nav-icon">223        <svg viewBox="0 0 64 64"><path d="M12 20h40M12 32h40M12 44h40"></path></svg>224      </div>225      <div>More</div>226    </div>227  </div>228 229</div>230</body>231</html>