GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Date Picker UI</title>5<style>6  body { margin:0; padding:0; background:transparent; font-family: Arial, Helvetica, sans-serif; }7  #render-target {8    width:1080px; height:2400px;9    position:relative; overflow:hidden;10    background:#0f0f12;11    color:#e6e0ee;12  }13 14  /* Status bar */15  .status-bar {16    position:absolute; top:0; left:0; right:0;17    height:90px; padding:0 28px;18    display:flex; align-items:center; justify-content:space-between;19    color:#ffffff;20    font-size:36px; letter-spacing:1px;21  }22  .status-icons { display:flex; gap:18px; align-items:center; }23  .status-dot { width:10px; height:10px; background:#fff; border-radius:50%; opacity:0.8; }24 25  /* Underlying screen content */26  .screen-header {27    position:absolute; top:180px; left:80px;28    color:#cfc6da; font-size:68px; font-weight:600;29  }30  .close-x {31    position:absolute; top:140px; left:32px;32    width:60px; height:60px; border-radius:30px;33    display:flex; align-items:center; justify-content:center;34    color:#bdb2cb; font-size:52px;35  }36  .save-btn {37    position:absolute; top:170px; right:80px;38    background:#7b5ea6; color:#eadcf8;39    padding:24px 40px; border-radius:40px; font-size:42px; font-weight:600;40  }41 42  /* Faint underlying rows */43  .under-row {44    position:absolute; left:80px; right:80px;45    height:120px; border-radius:20px;46    background:rgba(255,255,255,0.03);47    color:#a89ab8; font-size:40px; display:flex; align-items:center;48    padding:0 28px;49  }50  .under-row:nth-child(1) { top:380px; }51  .under-row:nth-child(2) { top:520px; }52  .under-row:nth-child(3) { top:660px; }53  .under-row:nth-child(4) { top:800px; }54 55  /* Modal date picker */56  .modal {57    position:absolute; left:80px; top:540px;58    width:920px; height:1150px; border-radius:56px;59    background:#2a2630; box-shadow:0 40px 120px rgba(0,0,0,0.55);60    padding:48px 52px;61  }62  .modal-title {63    font-size:40px; color:#c9bfd2; margin-bottom:36px;64  }65  .big-date {66    display:flex; align-items:center; justify-content:space-between;67    margin-bottom:32px;68  }69  .big-date .text { font-size:76px; font-weight:600; color:#e7e1ee; }70  .icon-btn { width:64px; height:64px; display:flex; align-items:center; justify-content:center; }71  .month-row {72    display:flex; align-items:center; justify-content:flex-start;73    gap:20px; margin:10px 0 30px 0; color:#d5cbe2;74  }75  .month-label { font-size:40px; }76  .chevrons { margin-left:auto; display:flex; gap:24px; }77  .weekday {78    display:grid; grid-template-columns: repeat(7, 1fr);79    color:#bfb4c8; font-size:36px; text-align:center;80    margin-top:26px; padding:12px 6px;81  }82  .calendar {83    display:grid; grid-template-columns: repeat(7, 1fr);84    grid-auto-rows:120px; gap:8px; margin-top:12px;85    color:#e6e0ee;86  }87  .cell {88    display:flex; align-items:center; justify-content:center;89    font-size:44px;90  }91  .cell.dim { color:#6e647a; }92  .cell .pill {93    width:120px; height:120px;94    display:flex; align-items:center; justify-content:center;95    background:#caa7f0; color:#2a2630; border-radius:60px; font-weight:700;96  }97  .modal-actions {98    position:absolute; bottom:40px; left:52px; right:52px;99    display:flex; justify-content:flex-end; gap:40px;100    font-size:44px; color:#d9cfe6;101  }102  .action-btn { padding:12px 8px; }103  .ok { color:#e8defa; font-weight:700; }104 105  /* Simple inline dropdown caret */106  .caret {107    width:28px; height:20px; margin-left:10px;108    border-left:10px solid transparent; border-right:10px solid transparent;109    border-top:12px solid #c9bfd2;110  }111</style>112</head>113<body>114<div id="render-target">115 116  <!-- Status bar -->117  <div class="status-bar">118    <div>8:39</div>119    <div class="status-icons">120      <svg width="34" height="34" viewBox="0 0 24 24">121        <path d="M3 18h18v2H3zM6 14h12v2H6zM9 10h6v2H9zM11 6h2v2h-2z" fill="#ffffff"/>122      </svg>123      <svg width="34" height="34" viewBox="0 0 24 24">124        <path d="M4 7h16v10H4z" fill="none" stroke="#ffffff" stroke-width="2"/>125        <rect x="6" y="9" width="12" height="6" fill="#ffffff"/>126      </svg>127      <svg width="34" height="34" viewBox="0 0 24 24">128        <circle cx="12" cy="12" r="9" stroke="#ffffff" stroke-width="2" fill="none"/>129        <path d="M12 7v5l4 2" stroke="#ffffff" stroke-width="2" fill="none" stroke-linecap="round"/>130      </svg>131      <div class="status-dot"></div>132      <svg width="34" height="34" viewBox="0 0 24 24">133        <path d="M12 3l8 8h-5v8H9v-8H4z" fill="#ffffff"/>134      </svg>135      <svg width="34" height="34" viewBox="0 0 24 24">136        <path d="M6 20h12V4H6v16zm2-2V6h8v12H8z" fill="#ffffff"/>137      </svg>138    </div>139  </div>140 141  <!-- Underlying content -->142  <div class="close-x">×</div>143  <div class="screen-header">Transport</div>144  <div class="save-btn">Save</div>145 146  <div class="under-row">Events</div>147  <div class="under-row">30 minutes before</div>148  <div class="under-row">Add notification</div>149  <div class="under-row">Default color</div>150 151  <!-- Modal Date Picker -->152  <div class="modal">153    <div class="modal-title">Select Date</div>154 155    <div class="big-date">156      <div class="text">Jul 24, 2023</div>157      <div class="icon-btn">158        <svg width="54" height="54" viewBox="0 0 24 24">159          <path d="M3 17v4h4l10-10-4-4L3 17z" fill="none" stroke="#d7cde5" stroke-width="2"/>160          <path d="M14 3l4 4" stroke="#d7cde5" stroke-width="2" fill="none"/>161        </svg>162      </div>163    </div>164 165    <div class="month-row">166      <div class="month-label">July 2023</div>167      <div class="caret"></div>168      <div class="chevrons">169        <svg width="44" height="44" viewBox="0 0 24 24">170          <path d="M15 6L9 12l6 6" stroke="#c9bfd2" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>171        </svg>172        <svg width="44" height="44" viewBox="0 0 24 24">173          <path d="M9 6l6 6-6 6" stroke="#c9bfd2" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>174        </svg>175      </div>176    </div>177 178    <div class="weekday">179      <div>S</div><div>M</div><div>T</div><div>W</div><div>T</div><div>F</div><div>S</div>180    </div>181 182    <div class="calendar">183      <div class="cell dim"></div>184      <div class="cell dim"></div>185      <div class="cell dim"></div>186      <div class="cell dim"></div>187      <div class="cell dim"></div>188      <div class="cell dim"></div>189      <div class="cell">1</div>190 191      <div class="cell">2</div><div class="cell">3</div><div class="cell">4</div><div class="cell">5</div>192      <div class="cell">6</div><div class="cell">7</div><div class="cell">8</div>193 194      <div class="cell">9</div><div class="cell">10</div><div class="cell">11</div><div class="cell">12</div>195      <div class="cell">13</div><div class="cell">14</div><div class="cell">15</div>196 197      <div class="cell">16</div><div class="cell">17</div><div class="cell">18</div><div class="cell">19</div>198      <div class="cell">20</div><div class="cell">21</div><div class="cell">22</div>199 200      <div class="cell">23</div>201      <div class="cell"><div class="pill">24</div></div>202      <div class="cell">25</div><div class="cell">26</div><div class="cell">27</div>203      <div class="cell">28</div><div class="cell">29</div>204 205      <div class="cell">30</div><div class="cell">31</div>206      <div class="cell dim"></div><div class="cell dim"></div><div class="cell dim"></div>207      <div class="cell dim"></div><div class="cell dim"></div>208    </div>209 210    <div class="modal-actions">211      <div class="action-btn">Cancel</div>212      <div class="action-btn ok">OK</div>213    </div>214  </div>215 216</div>217</body>218</html>