GD-ML/AndroidCode

1<html>2<head>3<meta charset="utf-8">4<title>New Task - Date Picker</title>5<style>6  body { margin:0; padding:0; background:transparent; font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }7  #render-target {8    width:1080px; height:2400px;9    position:relative; overflow:hidden;10    background:#121212; color:#fff;11  }12 13  /* Status bar */14  .status-bar {15    position:absolute; top:0; left:0; right:0;16    height:110px; padding:0 36px;17    display:flex; align-items:center; justify-content:space-between;18    color:#d9d9d9; font-size:44px;19  }20  .status-right { display:flex; gap:26px; align-items:center; }21  .icon-dot { width:12px; height:12px; background:#bdbdbd; border-radius:50%; display:inline-block; }22 23  /* Header */24  .header {25    position:absolute; top:110px; left:0; right:0;26    height:140px; display:flex; align-items:center;27    padding:0 40px; gap:24px;28  }29  .back-btn {30    width:72px; height:72px; display:flex; align-items:center; justify-content:center;31  }32  .title { font-size:64px; font-weight:700; color:#dcdcdc; }33 34  /* Input area */35  .input-block {36    position:absolute; top:300px; left:32px; right:32px;37    background:#0f0f0f; border:2px solid #d7a535; border-radius:16px;38    padding:28px 32px;39  }40  .input-label { color:#b38b2f; font-size:36px; margin-bottom:18px; }41  .input-text { font-size:56px; color:#e5e5e5; }42 43  /* Left column options (partially visible behind modal) */44  .side-options {45    position:absolute; top:520px; left:32px; width:160px;46    display:flex; flex-direction:column; gap:70px;47    color:#cfcfcf;48  }49  .side-icon {50    width:100px; height:100px; border-radius:18px; background:#1d1d1d;51    display:flex; align-items:center; justify-content:center; border:1px solid #2e2e2e;52  }53 54  /* Notes area */55  .notes-label {56    position:absolute; bottom:520px; left:32px; font-size:44px; color:#b38b2f;57  }58  .notes-box {59    position:absolute; bottom:200px; left:32px; right:160px;60    height:280px; border:1px solid #2e2e2e; border-radius:18px; background:#0f0f0f;61    padding:28px; color:#9e9e9e; font-size:44px;62  }63  .fab {64    position:absolute; bottom:240px; right:40px;65    width:150px; height:150px; border-radius:50%;66    background:#b88728; display:flex; align-items:center; justify-content:center;67    box-shadow:0 10px 30px rgba(0,0,0,0.6);68  }69 70  /* Date Picker Modal */71  .modal {72    position:absolute; left:80px; top:560px;73    width:920px; height:1180px; border-radius:40px; overflow:hidden;74    box-shadow:0 30px 80px rgba(0,0,0,0.75);75    background:#2a2a2a;76  }77  .modal-head {78    background:#e5ad39; color:#1b1b1b;79    padding:36px 40px 30px; height:280px;80  }81  .modal-head .sub { letter-spacing:2px; font-size:34px; text-transform:uppercase; margin-bottom:20px; }82  .modal-head .date-title { font-size:92px; font-weight:700; display:flex; align-items:center; justify-content:space-between; }83  .pencil {84    width:60px; height:60px; border-radius:8px; display:flex; align-items:center; justify-content:center;85  }86  .modal-body {87    background:#323232; color:#e6e6e6; height:900px; padding:26px 40px 34px;88  }89  .month-row {90    display:flex; align-items:center; justify-content:space-between;91    margin-bottom:28px; font-size:44px; color:#dcdcdc;92  }93  .nav-btn { width:70px; height:70px; display:flex; align-items:center; justify-content:center; border-radius:12px; }94  .dow { display:grid; grid-template-columns: repeat(7, 1fr); gap:24px; margin-bottom:22px; }95  .dow div { text-align:center; color:#cfcfcf; font-size:36px; }96  .calendar {97    display:grid; grid-template-columns: repeat(7, 1fr); grid-auto-rows:120px; gap:24px;98  }99  .day {100    display:flex; align-items:center; justify-content:center;101    font-size:48px; color:#e6e6e6;102  }103  .day.outlined {104    border:3px solid #e6e6e6; border-radius:60px; width:120px; height:120px;105  }106  .day.selected {107    background:#e5ad39; color:#231c0e; border-radius:60px; width:120px; height:120px; font-weight:700;108  }109  .modal-actions {110    position:absolute; bottom:24px; left:40px; right:40px;111    display:flex; align-items:center; justify-content:space-between;112    color:#e5ad39; font-size:48px; font-weight:700;113  }114 115  /* Home indicator */116  .home-indicator {117    position:absolute; bottom:42px; left:300px; width:480px; height:18px; background:#f0f0f0; border-radius:10px;118  }119 120  /* Simple icons (SVG) */121  svg { fill:currentColor; }122</style>123</head>124<body>125<div id="render-target">126 127  <!-- Status bar -->128  <div class="status-bar">129    <div>10:16</div>130    <div class="status-right">131      <span>88°</span>132      <span class="icon-dot"></span>133      <span class="icon-dot"></span>134      <!-- WiFi icon -->135      <svg width="46" height="46" viewBox="0 0 24 24">136        <path d="M12 18.5l-2.5-2.5a3.5 3.5 0 015 0L12 18.5zm7-6a9.5 9.5 0 00-14 0l1.5 1.5a7.5 7.5 0 0111 0L19 12.5zm3-4a13 13 0 00-20 0l1.5 1.5a11 11 0 0117 0L22 8.5z"/>137      </svg>138      <!-- Battery icon -->139      <svg width="46" height="46" viewBox="0 0 24 24">140        <path d="M16 7h2a2 2 0 012 2v6a2 2 0 01-2 2h-2v1h-1v-1H5a2 2 0 01-2-2V9a2 2 0 012-2h10zm-1 2H5v6h10V9z"/>141      </svg>142    </div>143  </div>144 145  <!-- Header -->146  <div class="header">147    <div class="back-btn">148      <svg width="72" height="72" viewBox="0 0 24 24" style="color:#dcdcdc">149        <path d="M15.5 19l-7-7 7-7 1.5 1.5L11 12l6 6z"/>150      </svg>151    </div>152    <div class="title">New Task</div>153  </div>154 155  <!-- Input -->156  <div class="input-block">157    <div class="input-label">What needs to be done?</div>158    <div class="input-text">Buy New Balance Hiking shoes</div>159  </div>160 161  <!-- Left options -->162  <div class="side-options">163    <div class="side-icon">164      <svg width="56" height="56" viewBox="0 0 24 24" style="color:#bdbdbd">165        <path d="M6 2h12v2H6V2zm13 4H5a2 2 0 00-2 2v11a2 2 0 002 2h14a2 2 0 002-2V8a2 2 0 00-2-2zm0 13H5V8h14v11zM8 10h2v2H8v-2zm6 0h2v2h-2v-2zm-6 4h2v2H8v-2zm6 0h2v2h-2v-2z"/>166      </svg>167    </div>168    <div class="side-icon">169      <svg width="56" height="56" viewBox="0 0 24 24" style="color:#bdbdbd">170        <path d="M12 22a2 2 0 002-2h-4a2 2 0 002 2zm6.32-6.9l-.82-.82A7.98 7.98 0 0018 11V6a6 6 0 10-12 0v5c0 1.61-.62 3.16-1.5 4.28l-.82.82L4 17h16l-1.68-1.9z"/>171      </svg>172    </div>173    <div class="side-icon">174      <svg width="56" height="56" viewBox="0 0 24 24" style="color:#bdbdbd">175        <path d="M17 1l4 4-4 4V6H6V4h11V1zM7 13l-4 4 4 4v-3h11v-2H7v-3z"/>176      </svg>177    </div>178    <div class="side-icon">179      <svg width="56" height="56" viewBox="0 0 24 24" style="color:#bdbdbd">180        <path d="M3 5h18v2H3V5zm0 6h18v2H3v-2zm0 6h18v2H3v-2z"/>181      </svg>182    </div>183  </div>184 185  <!-- Date Picker Modal -->186  <div class="modal">187    <div class="modal-head">188      <div class="sub">SELECT A DATE</div>189      <div class="date-title">190        <span>Dec 23, 2023</span>191        <div class="pencil">192          <svg width="52" height="52" viewBox="0 0 24 24">193            <path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zm18.71-10.04a1 1 0 000-1.41l-2.5-2.5a1 1 0 00-1.41 0l-1.83 1.83 3.75 3.75 1.99-1.67z"/>194          </svg>195        </div>196      </div>197    </div>198    <div class="modal-body">199      <div class="month-row">200        <div class="nav-btn">201          <svg width="50" height="50" viewBox="0 0 24 24">202            <path d="M15.5 19l-7-7 7-7 1.5 1.5L11 12l6 6z"/>203          </svg>204        </div>205        <div style="letter-spacing:2px;">DECEMBER 2023</div>206        <div class="nav-btn">207          <svg width="50" height="50" viewBox="0 0 24 24">208            <path d="M8.5 5l7 7-7 7-1.5-1.5L13 12 7 6.5z"/>209          </svg>210        </div>211      </div>212 213      <div class="dow">214        <div>S</div><div>M</div><div>T</div><div>W</div><div>T</div><div>F</div><div>S</div>215      </div>216 217      <div class="calendar">218        <!-- Row 1: start with blanks until Friday -->219        <div></div><div></div><div></div><div></div><div></div>220        <div class="day">1</div>221        <div class="day">2</div>222 223        <!-- Row 2 -->224        <div class="day">3</div><div class="day">4</div><div class="day">5</div>225        <div class="day">6</div><div class="day">7</div><div class="day">8</div><div class="day">9</div>226 227        <!-- Row 3 -->228        <div class="day">10</div><div class="day">11</div><div class="day">12</div>229        <div class="day">13</div><div class="day">14</div><div class="day">15</div><div class="day">16</div>230 231        <!-- Row 4 -->232        <div class="day">17</div><div class="day">18</div><div class="day">19</div>233        <div class="day">20</div>234        <div class="day outlined">21</div>235        <div class="day">22</div>236        <div class="day selected">23</div>237 238        <!-- Row 5 -->239        <div class="day">24</div><div class="day">25</div><div class="day">26</div>240        <div class="day">27</div><div class="day">28</div><div class="day">29</div><div class="day">30</div>241 242        <!-- Row 6 -->243        <div class="day">31</div>244      </div>245 246      <div class="modal-actions">247        <div>CANCEL</div>248        <div>OK</div>249      </div>250    </div>251  </div>252 253  <!-- Notes -->254  <div class="notes-label">Notes</div>255  <div class="notes-box">Add some notes!</div>256  <div class="fab">257    <svg width="88" height="88" viewBox="0 0 24 24" style="color:#121212">258      <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/>259    </svg>260  </div>261 262  <!-- Home indicator -->263  <div class="home-indicator"></div>264 265</div>266</body>267</html>