GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Mobile UI - Date Picker</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: #d8cfe2;12  }13 14  /* Status bar */15  .status-bar {16    position: absolute; top: 0; left: 0; right: 0;17    height: 100px; padding: 0 32px;18    display: flex; align-items: center; justify-content: space-between;19    color: #eae6f5; font-weight: 600; letter-spacing: 1px;20    font-size: 40px;21  }22  .status-icons { display: flex; gap: 26px; align-items: center; }23  .icon-dot { width: 26px; height: 26px; background: #eae6f5; border-radius: 50%; opacity: 0.9; }24  .icon-battery {25    width: 54px; height: 24px; border: 3px solid #eae6f5; border-radius: 6px; position: relative;26  }27  .icon-battery::after {28    content: ""; position: absolute; right: -8px; top: 6px;29    width: 6px; height: 12px; background: #eae6f5; border-radius: 2px;30  }31  .icon-battery .level { position: absolute; left: 3px; top: 3px; right: 3px; bottom: 3px; background: #eae6f5; }32  /* Top controls */33  .top-controls {34    position: absolute; top: 110px; left: 30px; right: 30px; height: 120px;35    display: flex; align-items: center; justify-content: space-between;36  }37  .close-x {38    width: 72px; height: 72px; position: relative;39  }40  .close-x::before, .close-x::after {41    content: ""; position: absolute; left: 50%; top: 50%;42    width: 64px; height: 6px; background: #b9b2c7; transform-origin: center;43  }44  .close-x::before { transform: translate(-50%, -50%) rotate(45deg); }45  .close-x::after { transform: translate(-50%, -50%) rotate(-45deg); }46 47  .save-btn {48    padding: 22px 40px; border-radius: 40px; background: #7c67a6; color: #fff;49    font-size: 40px; font-weight: 700; box-shadow: 0 6px 20px rgba(124,103,166,0.4);50  }51 52  /* Title behind dialog */53  .page-title {54    position: absolute; top: 220px; left: 70px; right: 70px;55    font-size: 64px; line-height: 74px; color: #bfb6cb; opacity: 0.35;56  }57 58  /* Date Picker Dialog */59  .dialog {60    position: absolute; left: 50px; top: 420px;61    width: 980px; height: 1450px;62    background: #2a2631; border-radius: 40px;63    box-shadow: 0 20px 60px rgba(0,0,0,0.6);64    padding: 44px 48px;65  }66 67  .dialog h3 { margin: 0; font-size: 40px; color: #cfc7da; font-weight: 600; }68  .big-date { margin-top: 28px; font-size: 74px; font-weight: 700; color: #e1d8ef; letter-spacing: 1px; }69 70  .month-row {71    margin-top: 30px; display: flex; align-items: center; justify-content: space-between;72    color: #cfc7da; font-size: 38px;73  }74  .month-left { display: flex; align-items: center; gap: 14px; }75  .chev {76    width: 52px; height: 52px; border-radius: 10px; background: #3a3644;77    display: flex; align-items: center; justify-content: center;78  }79  .chev svg { width: 26px; height: 26px; fill: #cfc7da; }80 81  /* Calendar grid */82  .calendar {83    margin-top: 40px;84    display: grid; grid-template-columns: repeat(7, 1fr);85    gap: 26px;86  }87  .dow {88    color: #b9b2c7; font-size: 36px; text-align: center; padding: 20px 0;89  }90  .day {91    height: 120px; border-radius: 22px;92    display: flex; align-items: center; justify-content: center;93    font-size: 44px; color: #e7e2f1;94  }95  .blank { opacity: 0; }96  .day:hover { background: #343041; }97  .ring {98    border: 4px solid #bda4de; color: #d7cdec;99  }100  .selected {101    background: #caa6ff; color: #1e132e; font-weight: 800;102  }103 104  /* Actions */105  .actions {106    position: absolute; bottom: 40px; right: 48px;107    display: flex; gap: 50px; align-items: center;108  }109  .link-btn {110    font-size: 42px; color: #cfc7da;111  }112  .primary-btn {113    font-size: 42px; color: #e9defa; font-weight: 700;114  }115 116  /* Faint background content preview */117  .ghost-line {118    position: absolute; left: 70px; right: 70px; height: 80px;119    background: #16141c; border-radius: 16px; opacity: 0.22;120  }121  .ghost-1 { top: 1200px; }122  .ghost-2 { top: 1320px; width: 930px; left: 75px; }123  .ghost-3 { top: 2100px; height: 12px; border-radius: 6px; opacity: 0.15; }124</style>125</head>126<body>127<div id="render-target">128 129  <div class="status-bar">130    <div>2:08</div>131    <div class="status-icons">132      <div class="icon-dot"></div>133      <div class="icon-dot"></div>134      <div class="icon-dot"></div>135      <div class="icon-battery"><div class="level"></div></div>136    </div>137  </div>138 139  <div class="top-controls">140    <div class="close-x"></div>141    <div class="save-btn">Save</div>142  </div>143 144  <div class="page-title">Zoom meeting invitation - ABC</div>145 146  <div class="dialog">147    <h3>Select Date</h3>148    <div class="big-date">Jul 26, 2023</div>149 150    <div class="month-row">151      <div class="month-left">152        <span>July 2023</span>153        <span style="font-size:30px;">▼</span>154      </div>155      <div style="display:flex; gap:20px;">156        <div class="chev">157          <svg viewBox="0 0 24 24"><path d="M15 18l-6-6 6-6"></path></svg>158        </div>159        <div class="chev">160          <svg viewBox="0 0 24 24"><path d="M9 6l6 6-6 6"></path></svg>161        </div>162      </div>163    </div>164 165    <div class="calendar">166      <div class="dow">S</div><div class="dow">M</div><div class="dow">T</div><div class="dow">W</div><div class="dow">T</div><div class="dow">F</div><div class="dow">S</div>167 168      <!-- July 2023 starts on Saturday, so 6 blanks then 1 -->169      <div class="day blank">•</div>170      <div class="day blank">•</div>171      <div class="day blank">•</div>172      <div class="day blank">•</div>173      <div class="day blank">•</div>174      <div class="day blank">•</div>175      <div class="day">1</div>176 177      <div class="day">2</div><div class="day">3</div><div class="day">4</div><div class="day">5</div>178      <div class="day">6</div><div class="day">7</div><div class="day">8</div>179 180      <div class="day">9</div><div class="day">10</div><div class="day">11</div><div class="day">12</div>181      <div class="day">13</div><div class="day">14</div><div class="day">15</div>182 183      <div class="day">16</div><div class="day">17</div><div class="day">18</div><div class="day">19</div>184      <div class="day">20</div><div class="day">21</div><div class="day">22</div>185 186      <div class="day">23</div><div class="day ring">24</div><div class="day">25</div><div class="day selected">26</div>187      <div class="day">27</div><div class="day">28</div><div class="day">29</div>188 189      <div class="day">30</div><div class="day">31</div>190      <!-- Fill remaining cells of last week for visual spacing -->191      <div class="day blank">•</div><div class="day blank">•</div><div class="day blank">•</div><div class="day blank">•</div><div class="day blank">•</div>192    </div>193 194    <div class="actions">195      <div class="link-btn">Cancel</div>196      <div class="primary-btn">OK</div>197    </div>198  </div>199 200  <!-- Faint background content just to match overlay feel -->201  <div class="ghost-line ghost-1"></div>202  <div class="ghost-line ghost-2"></div>203  <div class="ghost-line ghost-3"></div>204 205</div>206</body>207</html>