GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Time Picker Modal UI</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: "Inter", "Roboto", Arial, sans-serif; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #0b0b0d;14    color: #eaeaea;15  }16 17  /* Status bar */18  .status-bar {19    position: absolute;20    top: 0;21    left: 0;22    width: 1080px;23    height: 120px;24    background: #0b0b0d;25    display: flex;26    align-items: center;27    justify-content: space-between;28    padding: 0 36px;29    box-sizing: border-box;30  }31  .status-time { font-size: 40px; letter-spacing: 1px; color: #f5f5f5; }32  .status-icons { display: flex; align-items: center; gap: 22px; }33  .dot { width: 10px; height: 10px; background: #bdbdbd; border-radius: 50%; opacity: .9; }34  .icon-wifi, .icon-battery, .icon-location {35    width: 44px; height: 44px; position: relative;36  }37  .icon-location:before {38    content: ""; position: absolute; left: 18px; top: 6px;39    width: 8px; height: 20px; border: 3px solid #eaeaea; border-radius: 8px 8px 14px 14px;40    transform: rotate(0deg);41  }42  .icon-wifi:before {43    content: ""; position: absolute; inset: 10px; border-top: 4px solid #eaeaea; border-radius: 50%;44  }45  .icon-battery {46    border: 3px solid #eaeaea; border-radius: 6px; box-sizing: border-box;47  }48  .icon-battery:after {49    content: ""; position: absolute; right: -8px; top: 12px; width: 8px; height: 18px; background: #eaeaea; border-radius: 2px;50  }51 52  /* App header (behind modal) */53  .app-header {54    position: absolute; top: 120px; left: 0; width: 1080px; height: 170px;55    display: flex; align-items: center; gap: 24px; padding: 0 36px; box-sizing: border-box;56    background: #0b0b0d;57    color: #e7e7e7;58  }59  .back-btn {60    width: 70px; height: 70px; display: flex; align-items: center; justify-content: center;61  }62  .back-btn svg { width: 42px; height: 42px; fill: #e7e7e7; }63  .field-stack { flex: 1; display: flex; flex-direction: column; gap: 26px; }64  .input-pill {65    height: 86px; background: #121217; border-radius: 16px; display: flex; align-items: center; padding: 0 24px; box-sizing: border-box; border: 1px solid #1f1f26;66    color: #cfcfd4; font-size: 34px;67  }68  .dot-red { width: 18px; height: 18px; background: #c3434e; border-radius: 50%; margin-right: 18px; }69  .dot-white { width: 18px; height: 18px; border: 3px solid #cfcfd4; border-radius: 50%; margin-right: 18px; }70  .filter-btn {71    position: absolute; right: 36px; top: 310px;72    display: inline-flex; gap: 16px; align-items: center; padding: 18px 24px; border-radius: 14px;73    background: #1a1a22; border: 1px solid #2a2a34; color: #d7d7dd; font-size: 34px;74  }75  .filter-btn svg { width: 34px; height: 34px; fill: #d7d7dd; }76 77  /* Dim scrim */78  .scrim {79    position: absolute; inset: 0; background: rgba(0,0,0,0.6);80  }81 82  /* Modal */83  .modal {84    position: absolute;85    left: 60px;86    right: 60px;87    top: 540px;88    height: 1280px;89    background: #1f2025;90    border-radius: 20px;91    box-shadow: 0 30px 80px rgba(0,0,0,0.6);92    overflow: hidden;93  }94 95  /* Time wheels area */96  .time-wheels {97    padding-top: 80px;98    padding-bottom: 40px;99    display: flex; justify-content: center; align-items: center; gap: 70px;100  }101  .wheel-col {102    width: 210px; text-align: center; position: relative;103  }104  .wheel-col .line {105    position: absolute; left: 8px; right: 8px; height: 2px; background: #6f727b;106  }107  .wheel-col .line.top { top: 88px; opacity: .35; }108  .wheel-col .line.bottom { top: 246px; opacity: .35; }109  .prev, .next { font-size: 42px; color: #6f727b; margin: 26px 0; }110  .current { font-size: 82px; color: #ffffff; margin: 28px 0 12px; font-weight: 600; letter-spacing: 2px; }111  .colon { font-size: 90px; color: #9aa0a6; margin-top: -8px; }112 113  /* Today row */114  .date-row {115    margin: 30px 0 0;116    padding: 28px 36px;117    border-top: 1px solid #2b2d35;118    border-bottom: 1px solid #2b2d35;119    display: flex; justify-content: space-between; align-items: center;120    font-size: 44px; color: #eaeaec;121  }122  .date-row .arrow {123    color: #cfd1d5; font-size: 44px;124  }125 126  /* Buttons */127  .actions {128    padding: 48px 48px 24px; display: flex; flex-direction: column; align-items: center; gap: 34px;129  }130  .primary-btn {131    width: 880px; height: 140px; background: #e55775; color: #ffffff; border-radius: 18px;132    display: flex; align-items: center; justify-content: center; font-size: 48px; font-weight: 700;133    box-shadow: 0 6px 0 rgba(0,0,0,0.25) inset;134  }135  .text-btn {136    font-size: 42px; color: #e65a7a; font-weight: 600;137  }138</style>139</head>140<body>141<div id="render-target">142  <!-- Top status bar -->143  <div class="status-bar">144    <div class="status-time">8:28</div>145    <div class="status-icons">146      <div class="dot"></div>147      <div class="icon-location"></div>148      <div class="icon-wifi"></div>149      <div class="icon-battery"></div>150    </div>151  </div>152 153  <!-- App header content (behind modal) -->154  <div class="app-header">155    <div class="back-btn">156      <svg viewBox="0 0 24 24"><path d="M15.5 5l-7 7 7 7-1.5 1.5L5.5 12l8.5-8.5z"/></svg>157    </div>158    <div class="field-stack">159      <div class="input-pill"><span class="dot-white"></span>Groningen, Netherlands</div>160      <div class="input-pill"><span class="dot-red"></span>Amsterdam Centraal</div>161    </div>162  </div>163  <div class="filter-btn">164    <svg viewBox="0 0 24 24"><path d="M3 6h18v2H3zm4 5h10v2H7zm3 5h4v2h-4z"/></svg>165    <span>Filter</span>166  </div>167 168  <!-- Dark scrim -->169  <div class="scrim"></div>170 171  <!-- Modal time picker -->172  <div class="modal">173    <div class="time-wheels">174      <div class="wheel-col">175        <div class="line top"></div>176        <div class="line bottom"></div>177        <div class="prev">7</div>178        <div class="current">8</div>179        <div class="next">9</div>180      </div>181 182      <div class="colon">:</div>183 184      <div class="wheel-col">185        <div class="line top"></div>186        <div class="line bottom"></div>187        <div class="prev">27</div>188        <div class="current">28</div>189        <div class="next">29</div>190      </div>191 192      <div class="wheel-col" style="width: 240px;">193        <div class="line top"></div>194        <div class="line bottom"></div>195        <div class="prev">AM</div>196        <div class="current">AM</div>197        <div class="next">PM</div>198      </div>199    </div>200 201    <div class="date-row">202      <div>Today</div>203      <div class="arrow">›</div>204    </div>205 206    <div class="actions">207      <div class="primary-btn">Done</div>208      <div class="text-btn">Cancel</div>209    </div>210  </div>211</div>212</body>213</html>