GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>IndiGo Calendar Picker</title>5<style>6  body { margin:0; padding:0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, "Noto Sans", sans-serif; }7  #render-target {8    width:1080px; height:2400px;9    position:relative; overflow:hidden;10    background:#ffffff;11    color:#1d1d1f;12  }13 14  /* Status bar */15  .status-bar {16    height:88px;17    padding:0 34px;18    display:flex;19    align-items:center;20    justify-content:space-between;21    font-size:34px;22    color:#5c5c5c;23  }24  .status-right {25    display:flex; align-items:center; gap:18px;26  }27  .icon-wifi, .icon-battery, .icon-signal {28    width:36px; height:24px;29  }30  .icon-wifi svg, .icon-battery svg, .icon-signal svg { width:100%; height:100%; }31 32  /* App bar */33  .appbar {34    height:120px;35    padding:0 30px;36    display:flex; align-items:center; justify-content:space-between;37  }38  .appbar .close {39    width:56px; height:56px; display:flex; align-items:center; justify-content:center;40    color:#6b6b6b; font-size:48px;41  }42  .logo {43    font-size:58px; font-weight:700; color:#204ecf; letter-spacing:1px;44  }45  .logo small { font-weight:500; font-size:44px; margin-left:8px; }46 47  /* Dark banner */48  .banner {49    height:290px;50    background:linear-gradient(#3f3f3f, #2c2c2c);51  }52 53  /* Calendar sheet */54  .sheet {55    position:relative;56    background:#ffffff;57    border-top-left-radius:18px;58    border-top-right-radius:18px;59    padding:26px 36px 0;60  }61  .sheet .sheet-close {62    position:absolute; right:36px; top:28px;63    width:56px; height:56px; display:flex; align-items:center; justify-content:center;64    color:#9a9a9a; font-size:46px;65  }66  .dow {67    margin-top:46px;68    display:grid; grid-template-columns:repeat(7, 1fr);69    padding:0 8px;70    color:#8a8a8a; font-size:34px; text-align:center;71  }72  .month-title {73    font-size:44px; font-weight:800; color:#1b1b1b;74    margin:40px 0 22px 8px;75  }76  .grid {77    display:grid; grid-template-columns:repeat(7, 1fr);78    gap:14px;79    padding:0 8px 26px;80  }81  .day, .blank {82    height:108px; border-radius:14px; display:flex; align-items:center; justify-content:center;83    font-size:38px; color:#333;84  }85  .blank { background:transparent; }86  .muted { color:#b9b9b9; }87  .selected {88    background:#2f64c9; color:#fff; font-weight:700;89  }90  .range {91    background:#eeeeee; color:#303030;92  }93  .range-edge-left { background:#eeeeee; border-top-left-radius:14px; border-bottom-left-radius:14px; }94  .range-edge-right { background:#eeeeee; border-top-right-radius:14px; border-bottom-right-radius:14px; }95 96  /* Bottom action area */97  .summary {98    font-size:36px; color:#3a3a3a; text-align:center;99    padding:28px 20px 18px;100  }101  .btn {102    margin:0 auto 24px;103    width:900px; height:112px; background:#2f64c9; color:#fff; border-radius:16px;104    display:flex; align-items:center; justify-content:center; font-size:44px; font-weight:700;105  }106 107  /* Android home handle */108  .home-handle {109    position:absolute; bottom:16px; left:50%; transform:translateX(-50%);110    width:340px; height:12px; border-radius:8px; background:#1e1e1e30;111  }112</style>113</head>114<body>115<div id="render-target">116 117  <!-- Status bar -->118  <div class="status-bar">119    <div>3:07</div>120    <div class="status-right">121      <div class="icon-wifi">122        <svg viewBox="0 0 24 24">123          <path fill="#555" d="M2 8c5-4 15-4 20 0l-2 2c-4-3-12-3-16 0L2 8z"></path>124          <path fill="#777" d="M6 12c3-2 9-2 12 0l-2 2c-2-1-6-1-8 0l-2-2z"></path>125          <circle cx="12" cy="18" r="2" fill="#555"></circle>126        </svg>127      </div>128      <div class="icon-battery">129        <svg viewBox="0 0 24 24">130          <rect x="2" y="6" width="18" height="12" rx="2" ry="2" fill="none" stroke="#555" stroke-width="2"></rect>131          <rect x="4" y="8" width="14" height="8" fill="#555"></rect>132          <rect x="20" y="10" width="2" height="6" fill="#555"></rect>133        </svg>134      </div>135    </div>136  </div>137 138  <!-- App bar -->139  <div class="appbar">140    <div class="close">✕</div>141    <div class="logo">IndiGo <small>✈︎</small></div>142    <div style="width:56px;"></div>143  </div>144 145  <!-- Banner -->146  <div class="banner"></div>147 148  <!-- Calendar Sheet -->149  <div class="sheet">150    <div class="sheet-close">✕</div>151 152    <div class="dow">153      <div>Mon</div><div>Tue</div><div>Wed</div><div>Thu</div><div>Fri</div><div>Sat</div><div>Sun</div>154    </div>155 156    <div class="month-title">August 2023</div>157    <div class="grid">158      <!-- Row 1 -->159      <div class="blank"></div>160      <div class="day">1</div>161      <div class="day">2</div>162      <div class="day">3</div>163      <div class="day">4</div>164      <div class="day">5</div>165      <div class="day">6</div>166      <!-- Row 2 -->167      <div class="day">7</div>168      <div class="day">8</div>169      <div class="day">9</div>170      <div class="day selected">10</div>171      <div class="day range">11</div>172      <div class="day range">12</div>173      <div class="day range">13</div>174      <!-- Row 3 -->175      <div class="day range-edge-left">14</div>176      <div class="day selected">15</div>177      <div class="day">16</div>178      <div class="day">17</div>179      <div class="day">18</div>180      <div class="day">19</div>181      <div class="day">20</div>182      <!-- Row 4 -->183      <div class="day">21</div>184      <div class="day">22</div>185      <div class="day">23</div>186      <div class="day">24</div>187      <div class="day">25</div>188      <div class="day">26</div>189      <div class="day">27</div>190      <!-- Row 5 -->191      <div class="day">28</div>192      <div class="day">29</div>193      <div class="day">30</div>194      <div class="day">31</div>195      <div class="blank"></div>196      <div class="blank"></div>197      <div class="blank"></div>198    </div>199 200    <div class="month-title" style="margin-top:28px;">September 2023</div>201    <div class="grid">202      <!-- Row 1 -->203      <div class="blank"></div>204      <div class="blank"></div>205      <div class="blank"></div>206      <div class="blank"></div>207      <div class="day">1</div>208      <div class="day">2</div>209      <div class="day">3</div>210      <!-- Row 2 -->211      <div class="day">4</div>212      <div class="day">5</div>213      <div class="day">6</div>214      <div class="day">7</div>215      <div class="day">8</div>216      <div class="day">9</div>217      <div class="day">10</div>218      <!-- Row 3 -->219      <div class="day">11</div>220      <div class="day">12</div>221      <div class="day">13</div>222      <div class="day">14</div>223      <div class="day">15</div>224      <div class="day">16</div>225      <div class="day">17</div>226      <!-- Row 4 -->227      <div class="day">18</div>228      <div class="day">19</div>229      <div class="day">20</div>230      <div class="day">21</div>231      <div class="day">22</div>232      <div class="day">23</div>233      <div class="day">24</div>234      <!-- Row 5 -->235      <div class="day">25</div>236      <div class="day">26</div>237      <div class="day">27</div>238      <div class="day">28</div>239      <div class="day">29</div>240      <div class="day">30</div>241      <div class="blank"></div>242    </div>243 244    <div class="summary">Thu 10 Aug - Tue 15 Aug (5 nights)</div>245    <div class="btn">Done</div>246  </div>247 248  <div class="home-handle"></div>249</div>250</body>251</html>