GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="utf-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Calendar - Change search criteria</title>7<style>8  body { margin:0; padding:0; background:transparent; font-family: Arial, Helvetica, sans-serif; }9  #render-target{10    width:1080px; height:2400px; position:relative; overflow:hidden;11    background:#f8f8f8;12  }13 14  /* Top system status bar */15  .status-bar{16    position:absolute; left:0; top:0; width:100%; height:118px;17    background:#303034; color:#fff; display:flex; align-items:center; padding:0 32px;18    font-size:38px; box-sizing:border-box;19  }20  .status-left{ flex:1; font-weight:600; }21  .status-right{ display:flex; align-items:center; gap:28px; opacity:.95; }22  .status-icon{ width:38px; height:38px; }23 24  /* Browser/app header */25  .appbar{26    position:absolute; left:0; top:118px; width:100%; height:210px;27    background:#3a3a3e; color:#fff; box-sizing:border-box; padding:24px 28px;28    display:flex; align-items:center; justify-content:space-between;29    border-bottom:1px solid rgba(255,255,255,0.08);30  }31  .app-left{ display:flex; align-items:center; gap:26px; }32  .round-btn{33    width:72px; height:72px; display:flex; align-items:center; justify-content:center;34    border-radius:36px; background:transparent;35  }36  .title-wrap{ display:flex; flex-direction:column; }37  .title{ font-size:44px; font-weight:600; line-height:1.1; }38  .subtitle{ font-size:30px; color:#cfcfd4; margin-top:8px; }39 40  .app-right{ display:flex; align-items:center; gap:34px; }41 42  /* Tabs */43  .tabs{44    position:absolute; left:0; top:328px; width:100%; height:120px; background:#ffffff;45    display:flex; align-items:flex-end; justify-content:space-around; box-sizing:border-box;46    padding:0 24px 22px; border-bottom:1px solid #e9e9ee;47  }48  .tab{ color:#b9bcc5; font-size:36px; }49  .tab.active{ color:#5b6fde; font-weight:600; position:relative; }50  .tab.active::after{51    content:""; position:absolute; left:0; right:0; bottom:-26px; height:6px; background:#bfc8ff; border-radius:3px; margin:0 8px;52  }53 54  /* Calendar area */55  .calendar{56    position:absolute; left:0; top:448px; right:0; bottom:270px;57    background:#ffffff; overflow:hidden;58  }59  .month-label-muted{60    text-align:center; color:#dddddf; font-size:64px; font-weight:600; margin:64px 0 10px;61  }62  .dow{63    display:grid; grid-template-columns:repeat(7,1fr); padding:24px 40px; color:#d4d6dc;64    font-size:30px; letter-spacing:2px;65  }66  .month-title{67    text-align:center; color:#c9c9cf; font-size:56px; font-weight:600; margin:28px 0 6px;68  }69  .grid{70    position:relative;71    display:grid; grid-template-columns:repeat(7,1fr);72    gap:0; padding:0 24px 24px; box-sizing:border-box;73  }74  .day{75    height:128px; display:flex; align-items:center; justify-content:center;76    font-size:40px; color:#c6c7cc;77  }78  /* Range highlight for Jan 1-5 */79  .row-range{80    position:absolute; left:72px; right:312px; top:0;81    height:128px; background:#eef3ff; border-radius:32px; opacity:.8;82  }83  .pill-blue{84    width:112px; height:112px; border-radius:56px; background:#cfe1ff; color:#3e6ee8;85    display:flex; align-items:center; justify-content:center; font-weight:700;86  }87  .pill-outline{88    width:112px; height:112px; border-radius:56px; border:6px solid #c7d9fb; color:#3e6ee8;89    display:flex; align-items:center; justify-content:center; font-weight:700; background:#ffffff;90  }91 92  /* Bottom action bar */93  .actions{94    position:absolute; left:0; right:0; bottom:118px; height:152px; background:#ffffff;95    border-top:1px solid #ececf1; display:flex; align-items:center; justify-content:space-between;96    padding:0 36px; box-sizing:border-box;97  }98  .nights{ color:#b8bcc6; font-size:36px; }99  .btns{ display:flex; align-items:center; gap:28px; }100  .btn{101    padding:26px 44px; border-radius:48px; font-size:38px; cursor:default; user-select:none;102  }103  .btn.secondary{ color:#8ea2ff; background:#f6f8ff; border:1px solid #e3e9ff; }104  .btn.primary{ color:#ffffff; background:#b9c8f8; box-shadow:0 6px 16px rgba(95,123,214,0.25); }105 106  /* System navigation (gesture) bar */107  .gesture{108    position:absolute; left:0; right:0; bottom:0; height:118px; background:#2f2f33;109    display:flex; align-items:center; justify-content:center;110  }111  .gesture .pill{112    width:240px; height:14px; background:#cfcfd4; border-radius:8px; opacity:.9;113  }114 115  /* Simple utility colors for icons */116  svg{ fill:#ffffff; }117  .muted svg{ fill:#cfcfd4; }118</style>119</head>120<body>121<div id="render-target">122 123  <!-- Status bar -->124  <div class="status-bar">125    <div class="status-left">2:07</div>126    <div class="status-right">127      <!-- Wifi -->128      <svg class="status-icon" viewBox="0 0 24 24"><path d="M12 20l2-2-2-2-2 2 2 2zm-6-6l2-2 4 4 4-4 2 2-6 6-6-6zm-4-4l2-2 8 8 8-8 2 2-10 10L2 10z"/></svg>129      <!-- Battery -->130      <svg class="status-icon" viewBox="0 0 24 24"><path d="M16 4h2v2h2v12H4V6h12V4zm0 4H6v8h12V8z"/></svg>131      <!-- 100% text -->132      <span style="font-size:34px;">100%</span>133    </div>134  </div>135 136  <!-- App bar -->137  <div class="appbar">138    <div class="app-left">139      <div class="round-btn" aria-label="Close">140        <svg width="44" height="44" viewBox="0 0 24 24"><path d="M18 6L6 18M6 6l12 12" stroke="#fff" stroke-width="2" stroke-linecap="round"/></svg>141      </div>142      <svg class="muted" width="40" height="40" viewBox="0 0 24 24"><path d="M6 10V8a6 6 0 0112 0v2h1a1 1 0 011 1v9a1 1 0 01-1 1H5a1 1 0 01-1-1v-9a1 1 0 011-1h1zm2 0h8V8a4 4 0 10-8 0v2z"/></svg>143      <div class="title-wrap">144        <div class="title">Change search criteria</div>145        <div class="subtitle">google.com</div>146      </div>147    </div>148    <div class="app-right">149      <!-- Share -->150      <svg width="44" height="44" viewBox="0 0 24 24"><path d="M18 16a3 3 0 00-2.4 1.2L8.9 13a3.2 3.2 0 000-2l6.7-4.2A3 3 0 0018 8a3 3 0 10-2.9-3.7L8.4 8A3 3 0 006 7a3 3 0 100 6 3 3 0 002.4-1.2l6.7 4.2A3 3 0 1018 16z"/></svg>151      <!-- Bookmark -->152      <svg width="44" height="44" viewBox="0 0 24 24"><path d="M6 4h12v16l-6-3-6 3V4z"/></svg>153      <!-- More -->154      <svg width="44" height="44" viewBox="0 0 24 24"><path d="M12 5a2 2 0 110-4 2 2 0 010 4zm0 11a2 2 0 110-4 2 2 0 010 4zm0 11a2 2 0 110-4 2 2 0 010 4z"/></svg>155    </div>156  </div>157 158  <!-- Tabs -->159  <div class="tabs">160    <div class="tab">Search</div>161    <div class="tab active">Dates</div>162    <div class="tab">Guests</div>163  </div>164 165  <!-- Calendar -->166  <div class="calendar">167    <div class="month-label-muted">December</div>168 169    <div class="month-title">January 2024</div>170    <div class="dow" style="padding-top:6px;">171      <div>M</div><div>T</div><div>W</div><div>T</div><div>F</div><div>S</div><div>S</div>172    </div>173 174    <!-- January grid -->175    <div class="grid" style="padding-top:0;">176      <!-- Row background highlight for Jan 1-5 -->177      <div class="row-range"></div>178 179      <!-- Week 1: starts Monday (1) -->180      <div class="day"><div class="pill-blue">1</div></div>181      <div class="day" style="background:#eef3ff;">2</div>182      <div class="day" style="background:#eef3ff;">3</div>183      <div class="day" style="background:#eef3ff;">4</div>184      <div class="day"><div class="pill-outline">5</div></div>185      <div class="day">6</div>186      <div class="day">7</div>187 188      <!-- Week 2 -->189      <div class="day">8</div>190      <div class="day">9</div>191      <div class="day">10</div>192      <div class="day">11</div>193      <div class="day">12</div>194      <div class="day">13</div>195      <div class="day">14</div>196 197      <!-- Week 3 -->198      <div class="day">15</div>199      <div class="day">16</div>200      <div class="day">17</div>201      <div class="day">18</div>202      <div class="day">19</div>203      <div class="day">20</div>204      <div class="day">21</div>205 206      <!-- Week 4 -->207      <div class="day">22</div>208      <div class="day">23</div>209      <div class="day">24</div>210      <div class="day">25</div>211      <div class="day">26</div>212      <div class="day">27</div>213      <div class="day">28</div>214 215      <!-- Week 5 -->216      <div class="day">29</div>217      <div class="day">30</div>218      <div class="day">31</div>219      <div class="day"></div>220      <div class="day"></div>221      <div class="day"></div>222      <div class="day"></div>223    </div>224  </div>225 226  <!-- Bottom action bar -->227  <div class="actions">228    <div class="nights">4 nights</div>229    <div class="btns">230      <div class="btn secondary">Reset</div>231      <div class="btn primary">Done</div>232    </div>233  </div>234 235  <!-- Gesture bar -->236  <div class="gesture">237    <div class="pill"></div>238  </div>239 240</div>241</body>242</html>