GD-ML/AndroidCode

1<html>2<head>3<meta charset="utf-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Search Screen</title>6<style>7  body { margin: 0; padding: 0; background: transparent; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #0f1012; /* deep dark background */14    color: #fff;15    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;16  }17 18  /* General utilities */19  .container { padding: 40px 48px; }20  .muted { color: #b5b5bd; }21  .divider { height: 1px; background: #2a2b2f; margin: 12px 0; }22 23  /* Header */24  .header {25    display: flex;26    align-items: center;27    gap: 28px;28    padding: 36px 36px 16px 36px;29  }30  .back-btn {31    width: 66px;32    height: 66px;33    border-radius: 18px;34    background: #1a1b1f;35    display: flex;36    align-items: center;37    justify-content: center;38    border: 1px solid #2a2b2f;39  }40  .header .title {41    font-size: 54px;42    font-weight: 700;43    letter-spacing: 0.3px;44  }45 46  /* Search field */47  .search-box {48    margin: 26px 36px 24px 36px;49    background: #1c1d22;50    border: 1px solid #2c2d33;51    border-radius: 26px;52    height: 132px;53    display: flex;54    align-items: center;55    padding: 0 28px;56    gap: 24px;57  }58  .search-box .input-text {59    flex: 1;60    font-size: 44px;61  }62  .circle-icon {63    width: 72px;64    height: 72px;65    border-radius: 18px;66    background: #24262b;67    border: 1px solid #34363d;68    display: flex;69    align-items: center;70    justify-content: center;71  }72 73  /* Options row */74  .options {75    margin: 20px 36px 0 36px;76    background: transparent;77    border-radius: 24px;78    display: flex;79    border: 0;80  }81  .option-block {82    flex: 1;83    padding: 22px 0 26px 0;84  }85  .option-block .label {86    font-size: 40px;87    font-weight: 700;88    margin-bottom: 18px;89  }90  .option-block .value {91    font-size: 42px;92    color: #d6d6db;93  }94  .options .vline {95    width: 2px;96    background: #2a2b2f;97    margin: 0 28px;98  }99 100  /* Search button */101  .primary-btn {102    margin: 36px 36px 30px 36px;103    height: 120px;104    border-radius: 26px;105    background: #e65a9a;106    display: flex;107    align-items: center;108    justify-content: center;109    font-size: 48px;110    font-weight: 700;111    letter-spacing: 0.5px;112  }113 114  /* Last searches */115  .section-head {116    margin: 18px 36px 12px 36px;117    display: flex;118    align-items: center;119    justify-content: space-between;120  }121  .section-head .title {122    font-size: 44px;123    font-weight: 700;124  }125  .section-head .action {126    font-size: 40px;127    color: #e65a9a;128  }129 130  /* Card */131  .last-card {132    margin: 16px 36px;133    background: #181a1f;134    border: 1px solid #2a2b2f;135    border-radius: 28px;136    padding: 36px;137    display: flex;138    align-items: flex-start;139    gap: 28px;140  }141  .pin {142    width: 86px;143    height: 86px;144    border-radius: 24px;145    background: #202228;146    border: 1px solid #34363d;147    display: flex;148    align-items: center;149    justify-content: center;150  }151  .card-content {152    flex: 1;153  }154  .card-line1 {155    font-size: 44px;156  }157  .card-dates {158    margin-top: 22px;159    font-size: 42px;160    color: #d6d6db;161    display: flex;162    align-items: center;163    gap: 22px;164  }165  .arrow {166    color: #d6d6db;167    font-size: 44px;168  }169 170  /* Small helper for status spacing at bottom */171  .spacer-bottom {172    height: 40px;173  }174 175  /* SVG icons styling */176  svg { width: 40px; height: 40px; fill: none; stroke: #fff; stroke-width: 4; }177  .muted-stroke svg { stroke: #cfcfd6; }178</style>179</head>180<body>181<div id="render-target">182  <!-- Header -->183  <div class="header">184    <div class="back-btn">185      <!-- Back Arrow Icon -->186      <svg viewBox="0 0 24 24">187        <path d="M15 4 L7 12 L15 20" />188      </svg>189    </div>190    <div class="title">Search</div>191  </div>192 193  <!-- Search field -->194  <div class="search-box">195    <div class="circle-icon">196      <!-- Magnifying Glass -->197      <svg viewBox="0 0 24 24">198        <circle cx="10" cy="10" r="6"></circle>199        <line x1="14.5" y1="14.5" x2="20" y2="20"></line>200      </svg>201    </div>202    <div class="input-text">Florianópolis</div>203    <div class="circle-icon muted-stroke">204      <!-- Clear (X) -->205      <svg viewBox="0 0 24 24">206        <line x1="5" y1="5" x2="19" y2="19"></line>207        <line x1="19" y1="5" x2="5" y2="19"></line>208      </svg>209    </div>210    <div class="circle-icon muted-stroke">211      <!-- Location/Compass icon -->212      <svg viewBox="0 0 24 24">213        <circle cx="12" cy="12" r="9"></circle>214        <path d="M12 6 L14 12 L12 18 L10 12 Z"></path>215      </svg>216    </div>217  </div>218 219  <!-- Options row -->220  <div class="options">221    <div class="option-block">222      <div class="label">Enter your dates</div>223      <div class="value">01, Nov - 04, Nov</div>224    </div>225    <div class="vline"></div>226    <div class="option-block">227      <div class="label">Number of rooms</div>228      <div class="value">1 Room 1 person</div>229    </div>230  </div>231 232  <!-- Search button -->233  <div class="primary-btn">Search</div>234 235  <!-- Last searches header -->236  <div class="section-head">237    <div class="title">Last searches</div>238    <div class="action">Clear</div>239  </div>240 241  <!-- Last search card -->242  <div class="last-card">243    <div class="pin">244      <!-- Location Pin -->245      <svg viewBox="0 0 24 24">246        <path d="M12 3 C8 3 6 6 6 9 C6 14 12 21 12 21 C12 21 18 14 18 9 C18 6 16 3 12 3 Z"></path>247        <circle cx="12" cy="9" r="2.5"></circle>248      </svg>249    </div>250    <div class="card-content">251      <div class="card-line1">1 Room, 1 people</div>252      <div class="card-dates">253        <span>2023-11-01</span>254        <span class="arrow">→</span>255        <span>2023-11-04</span>256      </div>257    </div>258  </div>259 260  <div class="spacer-bottom"></div>261</div>262</body>263</html>