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>Skyscanner Style UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #0f1a21; /* deep navy/black */15    color: #eaf1f4;16    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;17  }18 19  /* Header / Logo */20  .header {21    margin: 140px 72px 40px 72px;22    display: flex;23    align-items: center;24    gap: 28px;25  }26  .brand-text {27    font-size: 82px;28    font-weight: 700;29    letter-spacing: 0.5px;30    color: #76c3cc; /* teal brand tone */31  }32 33  /* Quick actions */34  .quick-actions {35    margin: 40px 72px 36px 72px;36    display: flex;37    justify-content: space-between;38  }39  .qa-item {40    width: 300px;41    text-align: center;42    color: #cdd7db;43  }44  .qa-circle {45    width: 160px; height: 160px;46    margin: 0 auto 22px;47    border-radius: 50%;48    background: #76c3cc;49    display: flex; align-items: center; justify-content: center;50  }51  .qa-item .label {52    font-size: 40px;53    font-weight: 600;54    color: #cfe3e6;55  }56 57  /* Small feature cards */58  .feature-row {59    margin: 18px 72px 44px;60    display: flex;61    gap: 40px;62  }63  .feature-card {64    width: 292px; height: 260px;65    background: #1b2a33;66    border-radius: 36px;67    padding: 28px;68    box-sizing: border-box;69  }70  .feature-card .icon-circle {71    width: 72px; height: 72px;72    border-radius: 50%;73    background: #aac9cd;74    display: flex; align-items: center; justify-content: center;75    margin-bottom: 24px;76  }77  .feature-card .title {78    font-size: 36px;79    line-height: 44px;80    font-weight: 700;81    color: #e6ecef;82  }83 84  /* Big content card */85  .big-card {86    margin: 24px 72px 0;87    background: #0f2230;88    border-radius: 40px;89    padding: 44px;90    box-sizing: border-box;91  }92  .big-card .heading {93    font-size: 76px;94    font-weight: 800;95    line-height: 88px;96    color: #eaf1f4;97    margin-bottom: 24px;98  }99  .big-card .subtext {100    font-size: 34px;101    color: #c0c9ce;102    margin-bottom: 28px;103  }104  .big-card .photo {105    width: 100%;106    height: 280px;107    background: #E0E0E0;108    border: 1px solid #BDBDBD;109    border-radius: 28px;110    display: flex; align-items: center; justify-content: center;111    color: #757575;112    font-size: 34px;113  }114 115  /* Bottom navigation */116  .bottom-nav {117    position: absolute;118    left: 0; right: 0; bottom: 0;119    height: 180px;120    background: #142028;121    border-top: 1px solid #1e2c36;122    display: flex;123    justify-content: space-around;124    align-items: center;125  }126  .nav-item {127    width: 280px;128    text-align: center;129    color: #9fb0b8;130  }131  .nav-item .icon-wrap {132    width: 86px; height: 86px;133    margin: 0 auto 14px;134    display: flex; align-items: center; justify-content: center;135  }136  .nav-item .label {137    font-size: 34px;138    font-weight: 600;139  }140  .nav-item.active .label { color: #76c3cc; }141  .nav-item.active svg path, .nav-item.active svg circle, .nav-item.active svg rect { fill: #76c3cc; stroke: #76c3cc; }142 143  /* Utility */144  svg { display: block; }145</style>146</head>147<body>148<div id="render-target">149 150  <!-- Brand header -->151  <div class="header">152    <!-- Simple sunrise/wave logo -->153    <svg width="160" height="92" viewBox="0 0 160 92">154      <!-- wave -->155      <path d="M16 70 C40 52,120 52,144 70" fill="none" stroke="#76c3cc" stroke-width="10" stroke-linecap="round"/>156      <!-- sun rays -->157      <path d="M80 26 L80 8" stroke="#76c3cc" stroke-width="10" stroke-linecap="round"/>158      <path d="M60 30 L48 16" stroke="#76c3cc" stroke-width="10" stroke-linecap="round"/>159      <path d="M100 30 L112 16" stroke="#76c3cc" stroke-width="10" stroke-linecap="round"/>160      <!-- sun -->161      <circle cx="80" cy="36" r="10" fill="#76c3cc"/>162    </svg>163    <div class="brand-text">Skyscanner</div>164  </div>165 166  <!-- Quick actions -->167  <div class="quick-actions">168    <!-- Flights -->169    <div class="qa-item">170      <div class="qa-circle">171        <svg width="88" height="88" viewBox="0 0 88 88">172          <path d="M10 44 L48 44 L70 32 L76 36 L58 44 L76 52 L70 56 L48 44 L10 44 L18 54 L14 56 L8 46 Z"173                fill="#0f1a21"/>174        </svg>175      </div>176      <div class="label">Flights</div>177    </div>178    <!-- Hotels -->179    <div class="qa-item">180      <div class="qa-circle">181        <svg width="88" height="88" viewBox="0 0 88 88">182          <rect x="14" y="40" width="60" height="22" rx="6" fill="#0f1a21"/>183          <rect x="18" y="34" width="30" height="10" rx="4" fill="#0f1a21"/>184          <rect x="52" y="34" width="18" height="10" rx="4" fill="#0f1a21"/>185        </svg>186      </div>187      <div class="label">Hotels</div>188    </div>189    <!-- Car Rental -->190    <div class="qa-item">191      <div class="qa-circle">192        <svg width="100" height="88" viewBox="0 0 100 88">193          <rect x="20" y="40" width="60" height="22" rx="11" fill="#0f1a21"/>194          <rect x="30" y="34" width="40" height="10" rx="5" fill="#0f1a21"/>195          <circle cx="32" cy="66" r="7" fill="#0f1a21"/>196          <circle cx="68" cy="66" r="7" fill="#0f1a21"/>197        </svg>198      </div>199      <div class="label">Car Rental</div>200    </div>201  </div>202 203  <!-- Feature cards row -->204  <div class="feature-row">205    <div class="feature-card">206      <div class="icon-circle">207        <svg width="44" height="44" viewBox="0 0 44 44">208          <circle cx="22" cy="22" r="18" fill="#0f1a21"/>209          <path d="M8 22 H36" stroke="#aac9cd" stroke-width="2" />210          <path d="M22 8 V36" stroke="#aac9cd" stroke-width="2" />211        </svg>212      </div>213      <div class="title">Explore everywhere</div>214    </div>215 216    <div class="feature-card">217      <div class="icon-circle">218        <svg width="44" height="44" viewBox="0 0 44 44">219          <path d="M10 10 L30 10 L36 20 L20 36 L10 26 Z" fill="#0f1a21"/>220          <circle cx="28" cy="16" r="3" fill="#aac9cd"/>221        </svg>222      </div>223      <div class="title">Hot hotel deals</div>224    </div>225 226    <div class="feature-card">227      <div class="icon-circle">228        <svg width="44" height="44" viewBox="0 0 44 44">229          <circle cx="22" cy="22" r="18" fill="#0f1a21"/>230          <text x="22" y="28" text-anchor="middle" font-size="24" font-weight="800" fill="#aac9cd">?</text>231        </svg>232      </div>233      <div class="title">12 ways we help you</div>234    </div>235  </div>236 237  <!-- Big feature card -->238  <div class="big-card">239    <div class="heading">Where should I go in 2024?</div>240    <div class="subtext">Stay on-budget but don’t compromise on adventure. Find inspiration and tips.</div>241    <div class="photo">[IMG: Beach destination photo]</div>242  </div>243 244  <!-- Bottom navigation -->245  <div class="bottom-nav">246    <div class="nav-item active">247      <div class="icon-wrap">248        <svg width="72" height="72" viewBox="0 0 120 92">249          <path d="M16 70 C40 52,120 52,144 70" fill="none" stroke="#76c3cc" stroke-width="10" stroke-linecap="round"/>250          <path d="M80 26 L80 8" stroke="#76c3cc" stroke-width="10" stroke-linecap="round"/>251          <path d="M60 30 L48 16" stroke="#76c3cc" stroke-width="10" stroke-linecap="round"/>252          <path d="M100 30 L112 16" stroke="#76c3cc" stroke-width="10" stroke-linecap="round"/>253          <circle cx="80" cy="36" r="10" fill="#76c3cc"/>254        </svg>255      </div>256      <div class="label">Explore</div>257    </div>258 259    <div class="nav-item">260      <div class="icon-wrap">261        <svg width="72" height="72" viewBox="0 0 80 80">262          <rect x="18" y="28" width="44" height="30" rx="6" fill="#9fb0b8"/>263          <rect x="30" y="18" width="20" height="8" rx="4" fill="#9fb0b8"/>264        </svg>265      </div>266      <div class="label">Trips</div>267    </div>268 269    <div class="nav-item">270      <div class="icon-wrap">271        <svg width="72" height="72" viewBox="0 0 80 80">272          <circle cx="40" cy="30" r="12" fill="#9fb0b8"/>273          <path d="M20 60 C20 46,60 46,60 60" fill="#9fb0b8"/>274        </svg>275      </div>276      <div class="label">Profile</div>277    </div>278  </div>279 280</div>281</body>282</html>