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 & Date Picker Modal</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: "Segoe UI", Roboto, Arial, sans-serif; }9  #render-target {10    width: 1080px; height: 2400px; position: relative; overflow: hidden;11    background: #f5f3f6;12  }13 14  /* Hero image placeholder */15  .hero {16    position: absolute; top: 0; left: 0; width: 1080px; height: 700px;17    background: #E0E0E0; border: 1px solid #BDBDBD;18    display: flex; justify-content: center; align-items: center; color: #757575; font-size: 28px;19  }20  .hero::after {21    content: ""; position: absolute; inset: 0;22    background: linear-gradient(to bottom, rgba(0,0,0,0.45), rgba(0,0,0,0.25), rgba(0,0,0,0.35));23    pointer-events: none;24  }25 26  /* Status bar */27  .status {28    position: absolute; top: 24px; left: 36px; right: 36px; height: 40px; color: #ffffff;29    display: flex; align-items: center; justify-content: space-between; z-index: 3; font-weight: 600;30  }31  .status .time { font-size: 32px; letter-spacing: 0.5px; }32  .status .icons { display: flex; align-items: center; gap: 18px; }33  .dot { width: 18px; height: 18px; border-radius: 50%; background: #ffffff; opacity: 0.9; }34  .status svg { fill: none; stroke: #ffffff; stroke-width: 2.5; }35 36  /* Foreground content under hero (blurred idea) */37  .content {38    position: absolute; top: 650px; left: 0; width: 100%; padding: 40px;39  }40  .headline {41    position: absolute; bottom: 60px; left: 40px; z-index: 2; color: #ffffff; font-size: 72px; font-weight: 700; opacity: 0.9;42  }43  .card {44    width: 960px; margin: 40px auto; background: #ffffff; border-radius: 24px;45    box-shadow: 0 12px 24px rgba(0,0,0,0.12); padding: 30px;46  }47  .book-btn {48    margin-top: 24px; width: 320px; background: #201633; color: #fff; padding: 22px 24px; border-radius: 16px; font-size: 34px; display: inline-flex; align-items: center; gap: 18px;49  }50  .book-btn svg { width: 40px; height: 40px; stroke: #fff; }51 52  /* Modal overlay */53  .overlay {54    position: absolute; inset: 0; background: rgba(0,0,0,0.35); z-index: 5;55  }56  .modal {57    position: absolute; left: 60px; top: 820px; width: 960px; background: #ffffff; border-radius: 16px;58    box-shadow: 0 20px 50px rgba(0,0,0,0.35); padding: 40px 40px 32px; z-index: 6;59  }60  .modal-header {61    display: flex; justify-content: space-between; align-items: center; margin-bottom: 22px;62  }63  .tab {64    font-size: 42px; font-weight: 700; color: #1f1535; letter-spacing: 0.5px;65  }66  .tab.inactive { color: #9c98a3; }67  .underline {68    height: 4px; background: #2e214d; width: 360px; margin-top: 14px;69  }70 71  .time-picker {72    display: grid; grid-template-columns: 1fr 1fr auto; column-gap: 30px; align-items: center; margin: 40px 0 24px;73  }74  .time-block {75    display: flex; flex-direction: column; align-items: center; gap: 18px;76  }77  .time-fade { color: #c2c4d0; font-size: 42px; }78  .time-current { font-size: 68px; font-weight: 700; color: #1f1535; display: flex; align-items: center; gap: 22px; }79  .colon { font-size: 68px; color: #1f1535; }80  .line { width: 220px; height: 6px; background: #2e214d; border-radius: 6px; }81  .now-btn {82    background: #f5b422; color: #1f1535; font-weight: 700; font-size: 38px; padding: 18px 38px; border-radius: 14px; display: inline-block;83  }84 85  .divider { height: 2px; background: #ececef; margin: 26px 0; }86 87  .date-row {88    display: grid; grid-template-columns: 80px 1fr 80px; align-items: center; padding: 10px 0; color: #1f1535;89  }90  .date-text { text-align: center; font-size: 44px; font-weight: 600; }91  .arrow-btn {92    width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; margin: 0 auto;93  }94  .arrow-btn svg { width: 38px; height: 38px; fill: none; stroke: #f5b422; stroke-width: 4; }95 96  .actions {97    display: flex; justify-content: flex-end; gap: 30px; margin-top: 28px;98  }99  .btn {100    font-size: 40px; font-weight: 800; padding: 22px 34px; border-radius: 14px; border: 2px solid #e1e1e6; color: #3b3554; background: #ffffff;101  }102  .btn.primary { background: #f5b422; border-color: #f5b422; color: #1f1535; }103 104  /* Bottom navigation */105  .bottom-nav {106    position: absolute; bottom: 0; left: 0; width: 100%; height: 180px; background: rgba(255,255,255,0.92); border-top: 1px solid #e5e5ea;107    display: flex; justify-content: space-around; align-items: center; z-index: 2;108  }109  .nav-item { display: flex; flex-direction: column; align-items: center; gap: 14px; color: #8c8899; font-size: 34px; }110  .nav-item.active { color: #1f1535; font-weight: 700; }111  .nav-item svg { width: 56px; height: 56px; stroke: currentColor; fill: none; stroke-width: 3.5; }112 113  /* Gesture pill */114  .pill {115    position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); width: 240px; height: 10px; background: #e0e0e6; border-radius: 8px; z-index: 3;116  }117</style>118</head>119<body>120<div id="render-target">121 122  <div class="hero">[IMG: Scenic mountain valley with train]</div>123  <div class="headline">Where to next?</div>124 125  <div class="status">126    <div class="time">11:31</div>127    <div class="icons">128      <div class="dot"></div>129      <div class="dot"></div>130      <div class="dot" style="width:32px;height:18px;border-radius:10px;"></div>131      <span style="color:#fff; font-weight:700;">oyo</span>132      <div class="dot"></div>133      <!-- Wifi -->134      <svg viewBox="0 0 24 24" width="34" height="34">135        <path d="M2 8c5-4 15-4 20 0M5 12c3-3 11-3 14 0M9 16c2-2 6-2 8 0M12 20h0"></path>136      </svg>137      <!-- Battery -->138      <svg viewBox="0 0 28 16" width="40" height="24">139        <rect x="1" y="3" width="22" height="10" rx="2" ry="2" stroke="#fff"></rect>140        <rect x="24" y="6" width="3" height="4" rx="1" stroke="#fff"></rect>141        <rect x="3" y="5" width="14" height="6" fill="#fff" stroke="none"></rect>142      </svg>143    </div>144  </div>145 146  <div class="content">147    <div class="card">148      <div style="height: 90px; background:#F7F7FA; border-radius:14px; display:flex; align-items:center; padding:0 22px; color:#6d667f; font-size:34px;">Search fields preview</div>149      <div class="book-btn">150        <svg viewBox="0 0 24 24">151          <path d="M4 6h16M4 12h16M4 18h6"></path>152        </svg>153        Book seats154      </div>155    </div>156  </div>157 158  <div class="overlay"></div>159 160  <div class="modal">161    <div class="modal-header">162      <div>163        <div class="tab">DEPARTURE</div>164        <div class="underline"></div>165      </div>166      <div class="tab inactive">ARRIVAL</div>167    </div>168 169    <div class="time-picker">170      <div class="time-block">171        <div class="time-fade">10</div>172        <div class="line"></div>173        <div class="time-current">11</div>174        <div class="line"></div>175        <div class="time-fade">12</div>176      </div>177 178      <div class="time-block">179        <div class="time-fade">24</div>180        <div class="line"></div>181        <div class="time-current"><span class="colon">:</span> 25</div>182        <div class="line"></div>183        <div class="time-fade">26</div>184      </div>185 186      <div class="now-btn">Now</div>187    </div>188 189    <div class="divider"></div>190 191    <div class="date-row">192      <div class="arrow-btn">193        <svg viewBox="0 0 24 24">194          <path d="M15 5l-7 7 7 7"></path>195        </svg>196      </div>197      <div class="date-text">Mon 25 Sep 2023</div>198      <div class="arrow-btn">199        <svg viewBox="0 0 24 24">200          <path d="M9 5l7 7-7 7"></path>201        </svg>202      </div>203    </div>204 205    <div class="divider"></div>206 207    <div class="actions">208      <button class="btn">CANCEL</button>209      <button class="btn primary">DONE</button>210    </div>211  </div>212 213  <div class="bottom-nav">214    <div class="nav-item active">215      <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="8"></circle><path d="M12 6v6l4 2"></path></svg>216      <div>Planner</div>217    </div>218    <div class="nav-item">219      <svg viewBox="0 0 24 24"><path d="M3 10l9-7 9 7v9H3z"></path></svg>220      <div>My Trip</div>221    </div>222    <div class="nav-item">223      <svg viewBox="0 0 24 24"><rect x="6" y="4" width="12" height="16" rx="2"></rect><path d="M9 8h6M9 12h6"></path></svg>224      <div>My Pass</div>225    </div>226    <div class="nav-item">227      <svg viewBox="0 0 24 24"><path d="M4 6h16M4 12h16M4 18h16"></path></svg>228      <div>More</div>229    </div>230  </div>231 232  <div class="pill"></div>233</div>234</body>235</html>