GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Stays Screen</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: #222; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #FFFFFF;15  }16 17  /* Header */18  .header {19    height: 150px;20    display: flex;21    align-items: center;22    padding: 0 36px;23    border-bottom: 1px solid #ECEFF1;24  }25  .back-btn {26    width: 88px;27    height: 88px;28    display: flex;29    align-items: center;30    justify-content: center;31    margin-right: 8px;32  }33  .header-title {34    font-size: 54px;35    font-weight: 700;36    color: #1F2937;37  }38 39  /* Content */40  .content {41    padding: 36px;42  }43 44  .filled-row {45    background: #EAF1F3;46    border-radius: 28px;47    padding: 34px 36px;48    display: flex;49    align-items: center;50    margin: 26px 0;51  }52  .row-icon {53    width: 72px;54    height: 72px;55    display: flex;56    align-items: center;57    justify-content: center;58    margin-right: 26px;59  }60  .row-text {61    font-size: 42px;62    color: #1F2937;63  }64 65  .section-label {66    font-size: 40px;67    color: #4B5563;68    margin-top: 48px;69    margin-bottom: 18px;70  }71 72  .outlined-row {73    background: #FFFFFF;74    border: 2px solid #D5DEE6;75    border-radius: 30px;76    padding: 30px 36px;77    display: flex;78    align-items: center;79    margin: 20px 0;80    width: 650px;81  }82  .outlined-row .row-text {83    color: #374151;84  }85 86  /* Bottom primary button */87  .bottom-cta {88    position: absolute;89    left: 36px;90    right: 36px;91    bottom: 170px;92    height: 130px;93    border-radius: 28px;94    display: flex;95    align-items: center;96    justify-content: center;97    background: linear-gradient(90deg, #F66B1D 0%, #D84C12 100%);98    color: #fff;99    font-size: 44px;100    font-weight: 700;101    letter-spacing: 0.2px;102  }103 104  /* System navigation area (gesture bar) */105  .sys-nav {106    position: absolute;107    left: 0;108    right: 0;109    bottom: 0;110    height: 120px;111    background: #000;112    display: flex;113    align-items: center;114    justify-content: center;115  }116  .home-pill {117    width: 220px;118    height: 12px;119    background: #E5E7EB;120    border-radius: 8px;121    opacity: 0.9;122  }123 124  /* Utility: thin icon stroke */125  svg { display: block; }126  .icon-stroke { stroke: #374151; stroke-width: 2; fill: none; }127  .icon-fill { fill: #374151; }128</style>129</head>130<body>131<div id="render-target">132  <!-- Header -->133  <div class="header">134    <div class="back-btn" aria-label="Back">135      <svg width="44" height="44" viewBox="0 0 24 24">136        <path class="icon-fill" d="M14.7 5.3a1 1 0 0 1 0 1.4L10.4 11l4.3 4.3a1 1 0 1 1-1.4 1.4l-5-5a1 1 0 0 1 0-1.4l5-5a1 1 0 0 1 1.4 0z"/>137      </svg>138    </div>139    <div class="header-title">Stays</div>140  </div>141 142  <!-- Content -->143  <div class="content">144    <!-- Location -->145    <div class="filled-row">146      <div class="row-icon">147        <svg width="56" height="56" viewBox="0 0 24 24">148          <path class="icon-stroke" d="M12 2a7 7 0 0 1 7 7c0 5-7 13-7 13S5 14 5 9a7 7 0 0 1 7-7z"/>149          <circle class="icon-stroke" cx="12" cy="9" r="2.5"/>150        </svg>151      </div>152      <div class="row-text">Honolulu (HNL), O'ahu, HI</div>153    </div>154 155    <!-- Dates -->156    <div class="filled-row">157      <div class="row-icon">158        <svg width="56" height="56" viewBox="0 0 24 24">159          <rect class="icon-stroke" x="3" y="4" width="18" height="16" rx="2"/>160          <path class="icon-stroke" d="M8 2v4M16 2v4M3 9h18"/>161        </svg>162      </div>163      <div class="row-text">Mon, Jan 29 – Mon, Feb 5</div>164    </div>165 166    <div class="section-label">Options</div>167 168    <!-- Options: guests -->169    <div class="outlined-row">170      <div class="row-icon" style="margin-right:22px;">171        <svg width="56" height="56" viewBox="0 0 24 24">172          <circle class="icon-stroke" cx="12" cy="7" r="3"/>173          <path class="icon-stroke" d="M5 19a7 7 0 0 1 14 0"/>174        </svg>175      </div>176      <div class="row-text">1 room, 1 guest</div>177    </div>178 179    <!-- Options: property types -->180    <div class="outlined-row">181      <div class="row-icon" style="margin-right:22px;">182        <svg width="56" height="56" viewBox="0 0 24 24">183          <path class="icon-stroke" d="M3 10l9-6 9 6"/>184          <path class="icon-stroke" d="M5 10v10h14V10"/>185          <path class="icon-stroke" d="M9 20v-6h6v6"/>186        </svg>187      </div>188      <div class="row-text">All property types</div>189    </div>190  </div>191 192  <!-- Bottom CTA -->193  <div class="bottom-cta">Search stays</div>194 195  <!-- System nav bar -->196  <div class="sys-nav">197    <div class="home-pill"></div>198  </div>199</div>200</body>201</html>