GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Booking - Calendar Modal</title>6<meta name="viewport" content="width=1080, initial-scale=1.0">7<style>8  body { margin:0; padding:0; background:transparent; }9  #render-target{10    width:1080px; height:2400px; position:relative; overflow:hidden;11    background:#0C2D6F; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;12    color:#111;13  }14 15  /* Status bar */16  .status-bar{17    position:absolute; left:0; right:0; top:0; height:90px; padding:20px 28px;18    display:flex; align-items:center; justify-content:space-between; color:#fff;19    font-size:36px; letter-spacing:0.5px;20  }21  .sb-right{ display:flex; align-items:center; gap:24px; }22  .icon{ width:44px; height:44px; }23 24  /* Header */25  .header{26    position:absolute; left:0; right:0; top:100px; padding:0 40px; color:#fff;27  }28  .brand{ font-size:64px; font-weight:800; text-align:center; margin-bottom:16px; }29  .header .actions{ position:absolute; right:40px; top:0; display:flex; gap:28px; }30  .tabs{ display:flex; align-items:center; justify-content:space-around; gap:24px; margin-top:18px; }31  .tab{ display:flex; align-items:center; gap:14px; color:#E6EEFF; font-size:34px; }32  .tab.selected{ border:2px solid rgba(255,255,255,0.8); border-radius:60px; padding:14px 26px; }33 34  /* Bottom sheet */35  .sheet{36    position:absolute; left:0; right:0; bottom:0; height:1750px; background:#fff;37    border-top-left-radius:36px; border-top-right-radius:36px;38    box-shadow:0 -10px 35px rgba(0,0,0,0.25);39  }40  .grabber{ width:180px; height:14px; background:#D8D8D8; border-radius:8px; margin:18px auto 6px; }41  .weekdays{42    display:grid; grid-template-columns:repeat(7, 1fr);43    padding:12px 40px 6px; color:#727272; font-size:30px; text-align:center;44  }45  .month-title{ font-size:46px; font-weight:800; color:#222; padding:18px 40px 8px; }46  .grid{ display:grid; grid-template-columns:repeat(7, 1fr); padding:0 24px 10px; }47  .cell{48    height:106px; margin:10px 4px; border-radius:24px; font-size:36px;49    display:flex; align-items:center; justify-content:center; color:#222;50  }51  .muted{ color:#BDBDBD !important; }52  .blue{ color:#2F6DF6; font-weight:700; }53  .selected{ background:#2F6DF6; color:#fff !important; font-weight:800; }54 55  /* Sticky controls at bottom of sheet */56  .controls{57    position:absolute; left:0; right:0; bottom:100px; background:#fff; padding:12px 24px 0;58  }59  .chips{ display:flex; gap:24px; padding:14px 12px 8px; overflow:hidden; }60  .chip{61    padding:18px 32px; border-radius:60px; border:2px solid #C9D3F7;62    color:#2F6DF6; background:#F5F8FF; font-size:34px; font-weight:700;63    white-space:nowrap;64  }65  .chip.alt{ color:#555; background:#fff; border-color:#D6D6D6; font-weight:600; }66  .helper{ text-align:center; color:#6E6E6E; font-size:34px; margin-top:12px; }67  .btn-disabled{68    margin:16px 24px; height:120px; border-radius:20px; background:#E6E6E6; color:#A0A0A0;69    display:flex; align-items:center; justify-content:center; font-size:44px; font-weight:800;70  }71 72  /* Gesture bar */73  .gesture{ position:absolute; left:50%; transform:translateX(-50%); bottom:24px; width:360px; height:16px; background:#C6C6C6; border-radius:10px; opacity:.9; }74</style>75</head>76<body>77<div id="render-target">78 79  <!-- Status bar -->80  <div class="status-bar">81    <div>1:40</div>82    <div class="sb-right">83      <!-- simple wifi -->84      <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">85        <path d="M2 8c5-4 15-4 20 0" />86        <path d="M5 11c3-3 11-3 14 0" />87        <path d="M8 14c2-2 6-2 8 0" />88        <circle cx="12" cy="18" r="1.6" fill="#fff"/>89      </svg>90      <!-- battery -->91      <svg class="icon" viewBox="0 0 32 20" fill="none" stroke="#fff" stroke-width="2">92        <rect x="1" y="3" width="26" height="14" rx="2"></rect>93        <rect x="3" y="5" width="20" height="10" fill="#fff" stroke="none"></rect>94        <rect x="27" y="7" width="4" height="6" rx="1"></rect>95      </svg>96    </div>97  </div>98 99  <!-- Header -->100  <div class="header">101    <div class="brand">Booking.com</div>102    <div class="actions">103      <!-- chat bubble -->104      <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">105        <path d="M4 5h16v10H7l-3 3V5z"></path>106      </svg>107      <!-- bell -->108      <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">109        <path d="M12 21c1.3 0 2-1 2-2H10c0 1 0.7 2 2 2zM5 17h14l-2-3V9a5 5 0 0 0-10 0v5l-2 3z"></path>110      </svg>111    </div>112 113    <div class="tabs">114      <div class="tab selected">115        <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">116          <rect x="3" y="10" width="18" height="8" rx="2"></rect>117          <rect x="5" y="7" width="5" height="3"></rect>118        </svg>119        <span>Stays</span>120      </div>121      <div class="tab">122        <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#E6EEFF" stroke-width="2">123          <path d="M2 13l20 0-8-7-2 3-3-2z"></path>124        </svg>125        <span>Flights</span>126      </div>127      <div class="tab">128        <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#E6EEFF" stroke-width="2">129          <rect x="4" y="9" width="16" height="6" rx="2"></rect>130          <circle cx="8" cy="17" r="2"></circle>131          <circle cx="16" cy="17" r="2"></circle>132        </svg>133        <span>Car rental</span>134      </div>135      <div class="tab">136        <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#E6EEFF" stroke-width="2">137          <rect x="5" y="9" width="14" height="6" rx="2"></rect>138          <circle cx="9" cy="17" r="2"></circle>139          <circle cx="15" cy="17" r="2"></circle>140        </svg>141        <span>Taxi</span>142      </div>143    </div>144  </div>145 146  <!-- Bottom calendar sheet -->147  <div class="sheet">148    <div class="grabber"></div>149 150    <div class="weekdays">151      <div>Sun</div><div>Mon</div><div>Tue</div><div>Wed</div><div>Thu</div><div>Fri</div><div>Sat</div>152    </div>153 154    <div class="month-title">December 2023</div>155 156    <!-- December grid -->157    <div class="grid">158      <!-- Row 1 -->159      <div class="cell muted"></div>160      <div class="cell muted"></div>161      <div class="cell muted"></div>162      <div class="cell muted"></div>163      <div class="cell muted"></div>164      <div class="cell muted">1</div>165      <div class="cell muted">2</div>166 167      <!-- Row 2 -->168      <div class="cell muted">3</div>169      <div class="cell muted">4</div>170      <div class="cell muted">5</div>171      <div class="cell muted">6</div>172      <div class="cell muted">7</div>173      <div class="cell mu