GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Travel Search UI</title>6<style>7  body { margin:0; padding:0; background:transparent; font-family: Arial, Helvetica, sans-serif; }8  #render-target {9    position: relative;10    overflow: hidden;11    width: 1080px;12    height: 2400px;13    background: #F7F7F7;14    border-radius: 0;15  }16  .status-bar {17    position: absolute;18    top: 0;19    left: 0;20    width: 1080px;21    height: 110px;22    background: rgba(0,0,0,0.08);23    color: #111;24    display: flex;25    align-items: center;26    justify-content: space-between;27    padding: 0 30px;28    font-weight: 600;29    letter-spacing: 0.5px;30  }31  .status-left { font-size: 42px; }32  .status-right {33    display: flex; align-items: center; gap: 22px; font-size: 36px;34  }35  .icon-wifi {36    width: 40px; height: 40px;37  }38  .battery {39    display: inline-flex; align-items: center; gap: 10px;40    color: #111; font-size: 36px;41  }42  .battery-box {43    width: 60px; height: 32px; border: 3px solid #111; border-radius: 6px; position: relative;44  }45  .battery-box::after {46    content:''; position:absolute; right:-10px; top:8px; width:6px; height:16px; background:#111; border-radius:2px;47  }48  .battery-level {49    position:absolute; left:3px; top:3px; height:24px; width:48px; background:#111; border-radius:3px;50  }51 52  .hero {53    position: absolute;54    top: 110px;55    left: 0;56    width: 1080px;57    height: 520px;58    background: #E0E0E0;59    border: 1px solid #BDBDBD;60    display: flex; align-items: center; justify-content: center;61    color: #757575; font-size: 34px;62  }63 64  .search-card {65    position: absolute;66    top: 540px;67    left: 30px;68    width: 1020px;69    height: 260px;70    background: #FFFFFF;71    border-radius: 22px;72    box-shadow: 0 10px 24px rgba(0,0,0,0.12);73    padding: 40px 40px;74  }75  .route-line {76    position: absolute;77    left: 70px;78    top: 40px;79    width: 6px;80    height: 180px;81    background: #E9E9E9;82    border-radius: 3px;83  }84  .field {85    display: flex; align-items: center; gap: 28px; color: #222; font-size: 48px; font-weight: 600;86  }87  .marker-circle {88    width: 32px; height: 32px; border-radius: 50%; background: #DADADA; border: 2px solid #BFBFBF;89  }90  .divider {91    height: 2px; background: #E6E6E6; margin: 24px 0 24px 0;92  }93  .marker-triangle {94    width: 0; height: 0; border-left: 18px solid transparent; border-right: 18px solid transparent; border-top: 28px solid #D55694;95  }96  .fab {97    position: absolute;98    right: 30px;99    bottom: -60px;100    width: 140px; height: 140px;101    background: #D55694;102    border-radius: 70px;103    box-shadow: 0 12px 24px rgba(213,86,148,0.5);104    display: flex; align-items: center; justify-content: center;105  }106  .fab svg { width: 68px; height: 68px; }107  .content {108    position: absolute;109    top: 840px;110    left: 0;111    width: 100%;112    padding: 0 30px;113  }114  .section-header {115    display: flex; align-items: center; justify-content: space-between;116    margin-bottom: 30px;117  }118  .section-header .title {119    font-size: 64px; font-weight: 700; color: #222;120  }121  .section-header .action {122    font-size: 40px; font-weight: 700; color: #D55694; letter-spacing: 2px;123  }124  .list {125    margin-top: 10px;126    border-radius: 14px;127  }128  .list-item {129    display: flex; align-items: center; justify-content: space-between;130    padding: 34px 10px 34px 0;131    border-bottom: 1px solid #E8E8E8;132  }133  .list-item:last-child { border-bottom: none; }134  .list-item .text {135    font-size: 54px; color: #222;136  }137  .chevron {138    width: 42px; height: 42px; margin-right: 18px;139  }140 141  .featured {142    margin-top: 60px;143  }144  .featured .title {145    font-size: 64px; font-weight: 700; color: #222; margin-bottom: 26px;146  }147  .cards {148    display: flex; gap: 30px;149  }150  .card {151    width: 510px; height: 360px; background:#E0E0E0; border:1px solid #BDBDBD;152    display:flex; align-items:center; justify-content:center; color:#757575; font-size:32px; border-radius:16px;153  }154 155  .bottom-nav {156    position: absolute;157    bottom: 0;158    left: 0;159    width: 1080px;160    height: 190px;161    background: #FFFFFF;162    border-top: 1px solid #E4E4E4;163    display: flex; align-items: center; justify-content: space-around;164  }165  .nav-item {166    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;167    color: #222; font-size: 42px;168  }169  .nav-item .label { font-size: 40px; }170  .nav-item.active { color: #D55694; }171  .nav-icon {172    width: 70px; height: 70px;173  }174  .home-indicator {175    position: absolute;176    bottom: 10px; left: 50%; transform: translateX(-50%);177    width: 300px; height: 12px; background: #D0D0D0; border-radius: 6px;178  }179</style>180</head>181<body>182<div id="render-target">183 184  <!-- Status Bar -->185  <div class="status-bar">186    <div class="status-left">8:48</div>187    <div class="status-right">188      <svg class="icon-wifi" viewBox="0 0 24 24">189        <path d="M12 18.5l2.2 2.2-2.2 2.2-2.2-2.2L12 18.5zm-5-4c3.9-3.9 10.2-3.9 14.1 0l-1.4 1.4c-3-3-8.3-3-11.3 0L7 14.5zm-4-4c6.6-6.6 17.4-6.6 24 0l-1.4 1.4c-5.8-5.8-15.4-5.8-21.2 0L3 10.5z" fill="#111"/>190      </svg>191      <div class="battery">192        <div class="battery-box"><div class="battery-level"></div></div>193        <span>100%</span>194      </div>195    </div>196  </div>197 198  <!-- Hero image -->199  <div class="hero">[IMG: Mountain Landscape]</div>200 201  <!-- Search Card -->202  <div class="search-card">203    <div class="route-line"></div>204    <div class="field">205      <div class="marker-circle"></div>206      <div>Dubai</div>207    </div>208    <div class="divider"></div>209    <div class="field">210      <div class="marker-triangle"></div>211      <div>Vienna</div>212    </div>213    <!-- Floating Search Button -->214    <div class="fab">215      <svg viewBox="0 0 24 24">216        <circle cx="10.5" cy="10.5" r="7" stroke="#fff" stroke-width="2.2" fill="none"/>217        <line x1="16" y1="16" x2="21" y2="21" stroke="#fff" stroke-width="2.2" stroke-linecap="round"/>218      </svg>219    </div>220  </div>221 222  <!-- Content -->223  <div class="content">224    <div class="section-header">225      <div class="title">Searches</div>226      <div class="action">SHOW ALL</div>227    </div>228 229    <div class="list">230      <div class="list-item">231        <div class="text">Dubai to Vienna</div>232        <svg class="chevron" viewBox="0 0 24 24">233          <path d="M8 4l8 8-8 8" fill="none" stroke="#888" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>234        </svg>235      </div>236      <div class="list-item">237        <div class="text">Ulm to Berlin</div>238        <svg class="chevron" viewBox="0 0 24 24">239          <path d="M8 4l8 8-8 8" fill="none" stroke="#888" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>240        </svg>241      </div>242      <div class="list-item">243        <div class="text">Dubai to Hungary</div>244        <svg class="chevron" viewBox="0 0 24 24">245          <path d="M8 4l8 8-8 8" fill="none" stroke="#888" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>246        </svg>247      </div>248      <div class="list-item">249        <div class="text">Vienna to Washington</div>250        <svg class="chevron" viewBox="0 0 24 24">251          <path d="M8 4l8 8-8 8" fill="none" stroke="#888" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>252        </svg>253      </div>254    </div>255 256    <div class="featured">257      <div class="title">Featured Trips</div>258      <div class="cards">259        <div class="card">[IMG: Eiffel Tower]</div>260        <div class="card">[IMG: Royal Palace]</div>261      </div>262    </div>263  </div>264 265  <!-- Bottom Navigation -->266  <div class="bottom-nav">267    <div class="nav-item active">268      <svg class="nav-icon" viewBox="0 0 24 24">269        <circle cx="11" cy="11" r="6.5" stroke="#D55694" stroke-width="2" fill="none"/>270        <line x1="16.5" y1="16.5" x2="22" y2="22" stroke="#D55694" stroke-width="2" stroke-linecap="round"/>271      </svg>272      <div class="label">Search</div>273    </div>274    <div class="nav-item">275      <svg class="nav-icon" viewBox="0 0 24 24">276        <rect x="3" y="10" width="18" height="9" rx="1.5" fill="none" stroke="#444" stroke-width="2"/>277        <rect x="6" y="7" width="6" height="3" fill="none" stroke="#444" stroke-width="2"/>278        <line x1="12" y1="13" x2="12" y2="16" stroke="#444" stroke-width="2"/>279      </svg>280      <div class="label">Hotels</div>281    </div>282    <div class="nav-item">283      <svg class="nav-icon" viewBox="0 0 24 24">284        <circle cx="12" cy="8" r="4" fill="none" stroke="#444" stroke-width="2"/>285        <path d="M4 22c0-4.4 4-7 8-7s8 2.6 8 7" fill="none" stroke="#444" stroke-width="2" stroke-linecap="round"/>286      </svg>287      <div class="label">Profile</div>288    </div>289    <div class="home-indicator"></div>290  </div>291 292</div>293</body>294</html>