GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Explore Italy UI</title>6<style>7  body {8    margin: 0;9    padding: 0;10    background: transparent;11    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;12  }13  #render-target {14    width: 1080px;15    height: 2400px;16    position: relative;17    overflow: hidden;18    background: #0B141A;19    color: #EAEFF4;20  }21 22  /* Header / Title */23  .top-area {24    padding: 60px 48px 0 48px;25  }26  .title-row {27    display: flex;28    align-items: center;29    gap: 28px;30    margin-top: 16px;31  }32  .back-icon {33    width: 48px;34    height: 48px;35  }36  .screen-title {37    font-size: 54px;38    font-weight: 600;39    letter-spacing: 0.2px;40  }41 42  /* Tabs */43  .tabs {44    display: flex;45    gap: 60px;46    margin-top: 44px;47    padding-bottom: 18px;48    border-bottom: 1px solid rgba(255,255,255,0.08);49  }50  .tab {51    font-size: 30px;52    font-weight: 700;53    color: #C7D1D8;54    letter-spacing: 1.5px;55  }56  .tab.active {57    color: #FFFFFF;58    position: relative;59  }60  .tab.active::after {61    content: "";62    position: absolute;63    bottom: -20px;64    left: 0;65    width: 140px;66    height: 6px;67    background: #5CE3E8;68    border-radius: 3px;69  }70 71  /* Filters / Pills */72  .filters {73    margin-top: 28px;74    display: grid;75    grid-template-columns: 1fr 420px;76    gap: 18px;77  }78  .pill {79    background: #18222B;80    border-radius: 26px;81    box-shadow: 0 8px 14px rgba(0,0,0,0.3);82    padding: 26px 30px;83    font-size: 34px;84    color: #E6EDF3;85  }86  .pill.secondary {87    color: #C0CCD6;88  }89  .pill-row {90    margin-top: 16px;91  }92 93  .swap-badge {94    display: inline-flex;95    align-items: center;96    justify-content: center;97    width: 60px;98    height: 60px;99    background: #E65C4A;100    border-radius: 30px;101    margin-right: 14px;102    vertical-align: middle;103  }104  .swap-badge svg {105    width: 32px;106    height: 32px;107    fill: #fff;108  }109 110  /* Illustration placeholder */111  .illustration {112    margin: 64px auto 24px auto;113    width: 760px;114    height: 560px;115    background: #E0E0E0;116    border: 1px solid #BDBDBD;117    border-radius: 12px;118    display: flex;119    align-items: center;120    justify-content: center;121    color: #757575;122    font-size: 32px;123    font-weight: 600;124  }125 126  /* Empty state text */127  .empty-title {128    text-align: center;129    font-size: 44px;130    font-weight: 700;131    margin-top: 24px;132  }133  .empty-sub {134    text-align: center;135    font-size: 30px;136    color: #A9B4BD;137    margin-top: 16px;138  }139 140  /* Info bar above bottom nav */141  .info-bar {142    position: absolute;143    left: 0;144    right: 0;145    bottom: 210px;146    height: 110px;147    background: #141C23;148    border-top: 1px solid rgba(255,255,255,0.08);149    border-bottom: 1px solid rgba(255,255,255,0.06);150    display: flex;151    align-items: center;152    padding: 0 40px;153    gap: 24px;154    color: #C7D1D8;155    font-size: 32px;156  }157  .info-icon {158    width: 56px;159    height: 56px;160    border-radius: 28px;161    background: #26323B;162    display: inline-flex;163    align-items: center;164    justify-content: center;165  }166  .info-icon svg { width: 34px; height: 34px; fill: #9FB3C4; }167 168  /* Bottom Navigation */169  .bottom-nav {170    position: absolute;171    left: 0;172    right: 0;173    bottom: 0;174    height: 210px;175    background: #1A232C;176    border-top: 1px solid rgba(255,255,255,0.08);177    display: flex;178    align-items: center;179    justify-content: space-around;180    padding-bottom: 24px;181  }182  .nav-item {183    width: 240px;184    display: flex;185    flex-direction: column;186    align-items: center;187    gap: 16px;188    color: #9FB3C4;189    font-size: 28px;190  }191  .nav-item .icon {192    width: 60px;193    height: 60px;194  }195  .nav-item.active {196    color: #5CE3E8;197  }198  .nav-item.active svg {199    fill: #5CE3E8;200  }201  .nav-item svg {202    fill: #9FB3C4;203    width: 60px;204    height: 60px;205  }206</style>207</head>208<body>209<div id="render-target">210  <div class="top-area">211    <div class="title-row">212      <svg class="back-icon" viewBox="0 0 24 24">213        <path d="M15.5 19l-7-7 7-7" stroke="#EAEFF4" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>214      </svg>215      <div class="screen-title">Explore Italy</div>216    </div>217 218    <div class="tabs">219      <div class="tab active">ROUNDTRIP</div>220      <div class="tab">ONE-WAY</div>221    </div>222 223    <div class="filters">224      <div class="pill">New York</div>225      <div class="pill">226        <span class="swap-badge">227          <svg viewBox="0 0 24 24">228            <path d="M7 8h8l-2-2 2 2-2 2M17 16H9l2 2-2-2 2-2" />229          </svg>230        </span>231        Italy232      </div>233    </div>234 235    <div class="pill pill-row secondary">Dates of Travel: Aug 16 – Aug 20</div>236  </div>237 238  <div class="illustration">[IMG: Traveler illustration with clouds and binoculars]</div>239 240  <div class="empty-title">No flight prices found</div>241  <div class="empty-sub">Try changing trip type or destination.</div>242 243  <div class="info-bar">244    <div class="info-icon">245      <svg viewBox="0 0 24 24">246        <circle cx="12" cy="12" r="10" fill="none" stroke="#9FB3C4" stroke-width="2"/>247        <path d="M12 7.5a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3zM11 12h2v6h-2z" />248      </svg>249    </div>250    <div>Estimated lowest prices</div>251  </div>252 253  <div class="bottom-nav">254    <div class="nav-item active">255      <svg class="icon" viewBox="0 0 24 24">256        <path d="M3 17h18v2H3z"/>257        <path d="M12 7a4 4 0 1 0 0 8 4 4 0 0 0 0-8z"/>258      </svg>259      <div>Explore</div>260    </div>261    <div class="nav-item">262      <svg class="icon" viewBox="0 0 24 24">263        <rect x="5" y="7" width="14" height="12" rx="2" ry="2"/>264        <path d="M9 7V5h6v2" />265      </svg>266      <div>Trips</div>267    </div>268    <div class="nav-item">269      <svg class="icon" viewBox="0 0 24 24">270        <circle cx="12" cy="8" r="4"/>271        <path d="M4 20c0-4 4-7 8-7s8 3 8 7" />272      </svg>273      <div>Profile</div>274    </div>275  </div>276</div>277</body>278</html>