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>Travel App UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, system-ui; }9  #render-target {10    width: 1080px; height: 2400px; position: relative; overflow: hidden;11    background: #ffffff; border-radius: 0; box-shadow: none;12    color: #2c2c2c;13  }14 15  /* Top blue header */16  .header {17    position: relative;18    width: 100%;19    height: 320px;20    background: #1487d4;21  }22  .status-bar {23    height: 70px;24    padding: 0 30px;25    display: flex; align-items: center; justify-content: space-between;26    color: #ffffff; font-size: 34px; letter-spacing: 0.2px;27  }28  .status-left, .status-right { display: flex; align-items: center; gap: 20px; }29  .status-icon {30    width: 32px; height: 32px; opacity: 0.9;31    border-radius: 16px; background: rgba(255,255,255,0.25);32  }33 34  .search-row {35    position: absolute; left: 36px; right: 36px; top: 118px;36    display: flex; align-items: center; gap: 20px;37  }38  .search-bar {39    flex: 1; height: 116px; background: #ffffff;40    border-radius: 58px; box-shadow: 0 6px 12px rgba(0,0,0,0.15);41    display: flex; align-items: center; padding: 0 38px; gap: 26px;42  }43  .search-input {44    font-size: 40px; color: #7a7a7a; flex: 1;45    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;46  }47  .circle-btn {48    width: 106px; height: 106px; border-radius: 53px;49    background: #ffffff; display: flex; align-items: center; justify-content: center;50    box-shadow: 0 6px 12px rgba(0,0,0,0.15);51  }52 53  /* Content area */54  .content {55    position: absolute; left: 0; right: 0; top: 320px; bottom: 180px;56    overflow: hidden; /* keep inside viewport */57  }58  .section { padding: 30px 36px; }59  .row { display: flex; gap: 24px; }60 61  /* Image placeholders */62  .img-card {63    background: #E0E0E0; border: 1px solid #BDBDBD; color: #757575;64    display: flex; justify-content: center; align-items: center; text-align: center;65    border-radius: 24px; box-shadow: 0 4px 8px rgba(0,0,0,0.08);66    font-size: 34px; line-height: 1.2;67  }68 69  /* Featured horizontal images */70  .featured .img-card { width: 492px; height: 340px; }71 72  /* Section titles */73  .title { font-size: 64px; font-weight: 700; margin: 16px 0 6px; color: #333; }74  .subtitle { font-size: 38px; color: #9aa0a6; margin-bottom: 24px; }75 76  /* Travel tips cards */77  .tips-row .img-card { width: 330px; height: 440px; }78 79  /* Best bites banner */80  .banner { width: 100%; height: 360px; }81  .paragraph { font-size: 38px; color: #6f6f6f; margin: 22px 0 18px; line-height: 1.4; }82 83  /* Blue CTA button */84  .cta {85    display: inline-flex; align-items: center; gap: 18px;86    background: #1376cf; color: #ffffff; padding: 24px 40px;87    border-radius: 60px; font-size: 44px; font-weight: 600;88    box-shadow: 0 6px 12px rgba(19,118,207,0.35);89  }90 91  /* Bottom navigation */92  .bottom-nav {93    position: absolute; left: 0; right: 0; bottom: 0; height: 180px;94    background: #ffffff; border-top: 2px solid #e6e6e6;95    display: flex; align-items: center; justify-content: space-around;96  }97  .nav-item { display: flex; flex-direction: column; align-items: center; gap: 18px; color: #7b7b7b; font-size: 34px; }98  .nav-item .icon-wrap { width: 64px; height: 64px; }99  .nav-item.active { color: #1376cf; }100</style>101</head>102<body>103<div id="render-target">104 105  <!-- Header with status and search -->106  <div class="header">107    <div class="status-bar">108      <div class="status-left">109        <div>1:33</div>110        <div class="status-icon"></div>111        <div class="status-icon"></div>112        <div class="status-icon"></div>113        <div class="status-icon"></div>114      </div>115      <div class="status-right">116        <!-- simple wifi & battery glyphs -->117        <svg width="44" height="44" viewBox="0 0 24 24" fill="none">118          <path d="M2 8c5-4 15-4 20 0" stroke="#fff" stroke-width="2" stroke-linecap="round"/>119          <path d="M5 11c3-3 11-3 14 0" stroke="#fff" stroke-width="2" stroke-linecap="round"/>120          <path d="M8 14c2-2 6-2 8 0" stroke="#fff" stroke-width="2" stroke-linecap="round"/>121          <circle cx="12" cy="18" r="2" fill="#fff"/>122        </svg>123        <svg width="44" height="44" viewBox="0 0 24 24" fill="none">124          <rect x="3" y="6" width="16" height="12" rx="3" stroke="#fff" stroke-width="2"/>125          <rect x="20" y="10" width="2" height="4" fill="#fff"/>126        </svg>127      </div>128    </div>129 130    <div class="search-row">131      <div class="search-bar">132        <svg width="54" height="54" viewBox="0 0 24 24">133          <circle cx="11" cy="11" r="7" stroke="#808080" stroke-width="2" fill="none"/>134          <path d="M20 20l-4.2-4.2" stroke="#808080" stroke-width="2" stroke-linecap="round"/>135        </svg>136        <div class="search-input">Search for items, destinations...</div>137      </div>138      <div class="circle-btn" aria-label="Notifications">139        <svg width="46" height="46" viewBox="0 0 24 24" fill="none">140          <path d="M12 3c-2.8 0-5 2.2-5 5v3.5L5 14v1h14v-1l-2-2.5V8c0-2.8-2.2-5-5-5z" stroke="#1487d4" stroke-width="2" fill="none" stroke-linejoin="round"/>141          <circle cx="12" cy="18.5" r="1.5" fill="#1487d4"/>142        </svg>143      </div>144      <div class="circle-btn" aria-label="Messages">145        <svg width="46" height="46" viewBox="0 0 24 24" fill="none">146          <path d="M5 5h14v10H8l-3 3V5z" stroke="#1487d4" stroke-width="2" fill="none" stroke-linejoin="round"/>147        </svg>148      </div>149    </div>150  </div>151 152  <!-- Content -->153  <div class="content">154    <!-- Featured images -->155    <div class="section featured">156      <div class="row">157        <div class="img-card">[IMG: Aerial view of boats on turquoise water]</div>158        <div class="img-card">[IMG: Tall palm trees against blue sky]</div>159      </div>160    </div>161 162    <!-- Travel Tips -->163    <div class="section">164      <div class="title">Travel Tips</div>165      <div class="subtitle">Tried-and-true tips to make you a savvy traveler</div>166      <div class="row tips-row">167        <div class="img-card">[IMG: Tip Card - Be prepared for "Alien" invasion]</div>168        <div class="img-card">[IMG: Tip Card - Powerbank is your lifesaver]</div>169        <div class="img-card">[IMG: Tip Card - Travel safety cartoon]</div>170      </div>171    </div>172 173    <!-- Best Bites -->174    <div class="section">175      <div class="title">Best Bites</div>176      <div class="subtitle">For the best eats money can buy</div>177      <div class="img-card banner">[IMG: The Michelin Guide - Hong Kong & Macau food banner]</div>178      <div class="paragraph">Rave about how affordable it is to get a 3 Michelin Star experience in two cities.</div>179      <div style="display:flex; justify-content:center; margin-top: 8px;">180        <div class="cta">181          <svg width="52" height="52" viewBox="0 0 24 24" fill="none">182            <path d="M12 5v10" stroke="#ffffff" stroke-width="2" stroke-linecap="round"/>183            <path d="M7 10l5 5 5-5" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>184          </svg>185          <span>More</span>186        </div>187      </div>188    </div>189  </div>190 191  <!-- Bottom Navigation -->192  <div class="bottom-nav">193    <div class="nav-item active">194      <div class="icon-wrap">195        <svg width="64" height="64" viewBox="0 0 24 24" fill="none">196          <path d="M4 10l8-6 8 6v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-8z" stroke="#1376cf" stroke-width="2" fill="none" stroke-linejoin="round"/>197        </svg>198      </div>199      <div>Home</div>200    </div>201    <div class="nav-item">202      <div class="icon-wrap">203        <svg width="64" height="64" viewBox="0 0 24 24" fill="none">204          <circle cx="12" cy="12" r="9" stroke="#7b7b7b" stroke-width="2"/>205          <path d="M10 8l6 4-6 4V8z" fill="#7b7b7b"/>206        </svg>207      </div>208      <div>Explore</div>209    </div>210    <div class="nav-item">211      <div class="icon-wrap">212        <svg width="64" height="64" viewBox="0 0 24 24" fill="none">213          <rect x="3" y="4" width="18" height="16" rx="2" stroke="#7b7b7b" stroke-width="2"/>214          <path d="M3 8h18M7 12h3M12 12h3M17 12h3M7 16h3M12 16h3M17 16h3" stroke="#7b7b7b" stroke-width="2" stroke-linecap="round"/>215        </svg>216      </div>217      <div>Bookings</div>218    </div>219    <div class="nav-item">220      <div class="icon-wrap">221        <svg width="64" height="64" viewBox="0 0 24 24" fill="none">222          <path d="M6 3h12v18l-6-3-6 3V3z" stroke="#7b7b7b" stroke-width="2" fill="none" stroke-linejoin="round"/>223        </svg>224      </div>225      <div>Saved</div>226    </div>227    <div class="nav-item">228      <div class="icon-wrap">229        <svg width="64" height="64" viewBox="0 0 24 24" fill="none">230          <circle cx="12" cy="8" r="4" stroke="#7b7b7b" stroke-width="2"/>231          <path d="M4 20c2.5-4 13.5-4 16 0" stroke="#7b7b7b" stroke-width="2" stroke-linecap="round"/>232        </svg>233      </div>234      <div>My Account</div>235    </div>236  </div>237 238</div>239</body>240</html>