GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Mobile UI Render</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: "Helvetica Neue", Arial, sans-serif; }7  #render-target {8    width: 1080px;9    height: 2400px;10    position: relative;11    overflow: hidden;12    background: #243864;13    color: #1f2a44;14  }15 16  /* Status bar */17  .status-bar {18    position: absolute;19    top: 0;20    left: 0;21    width: 1080px;22    height: 96px;23    background: #2f3f73;24    color: #fff;25    display: flex;26    align-items: center;27    justify-content: space-between;28    padding: 0 32px;29    box-sizing: border-box;30    font-weight: 600;31  }32  .status-left { display: flex; align-items: center; gap: 18px; }33  .status-left .dots { letter-spacing: 10px; font-size: 26px; opacity: 0.9; }34  .status-right { display: flex; align-items: center; gap: 20px; }35  .icon { width: 36px; height: 36px; }36 37  /* Hero illustration */38  .hero {39    position: absolute;40    top: 96px;41    left: 0;42    width: 1080px;43    height: 560px;44    background: linear-gradient(180deg, #5f78b3 0%, #7ea0d1 50%, #9bb6d8 100%);45  }46  .hero .img {47    position: absolute;48    left: 24px;49    right: 24px;50    top: 24px;51    bottom: 24px;52    background: #E0E0E0;53    border: 1px solid #BDBDBD;54    display: flex;55    align-items: center;56    justify-content: center;57    color: #757575;58    font-size: 30px;59    border-radius: 12px;60  }61 62  /* White search panel */63  .panel {64    position: absolute;65    top: 540px;66    left: 24px;67    width: 1032px;68    background: #ffffff;69    border-radius: 28px;70    box-shadow: 0 10px 24px rgba(0,0,0,0.15);71    padding: 28px;72    box-sizing: border-box;73  }74  .panel h1 {75    margin: 8px 8px 24px 8px;76    font-size: 58px;77    color: #0d2352;78    letter-spacing: -0.5px;79  }80 81  .field {82    display: flex;83    align-items: center;84    background: #eef2f8;85    border-radius: 22px;86    height: 116px;87    margin: 18px 8px;88    padding: 0 28px;89    box-sizing: border-box;90    color: #102a59;91    font-size: 40px;92    font-weight: 600;93  }94  .field .f-icon {95    width: 56px;96    height: 56px;97    margin-right: 26px;98    flex: 0 0 auto;99  }100  .field .f-right {101    margin-left: auto;102  }103 104  .row {105    display: flex;106    gap: 24px;107    margin: 18px 8px;108  }109  .row .field {110    margin: 0;111    flex: 1;112    font-size: 38px;113  }114 115  .subtext {116    font-size: 38px;117    font-weight: 600;118  }119 120  .btn {121    margin: 26px 8px 18px 8px;122    height: 116px;123    border-radius: 22px;124    background: #e9746c;125    color: #ffffff;126    font-size: 44px;127    font-weight: 700;128    display: flex;129    align-items: center;130    justify-content: center;131  }132 133  /* Below panel section */134  .section-title {135    position: absolute;136    top: 1420px;137    left: 32px;138    font-size: 54px;139    color: #0c2456;140    font-weight: 800;141  }142 143  .cards {144    position: absolute;145    top: 1516px;146    left: 24px;147    width: 1032px;148    display: flex;149    gap: 24px;150  }151  .card {152    width: 330px;153    height: 430px;154    background: #ffffff;155    border-radius: 24px;156    box-shadow: 0 8px 20px rgba(0,0,0,0.1);157    padding: 18px;158    box-sizing: border-box;159  }160  .card .img {161    width: 100%;162    height: 330px;163    background: #E0E0E0;164    border: 1px solid #BDBDBD;165    border-radius: 16px;166    display: flex;167    align-items: center;168    justify-content: center;169    color: #757575;170    font-size: 28px;171    margin-bottom: 12px;172  }173  .card .label {174    font-size: 36px;175    color: #233661;176    font-weight: 700;177    line-height: 1.1;178  }179 180  /* Bottom navigation */181  .bottom-bar {182    position: absolute;183    bottom: 86px;184    left: 0;185    width: 1080px;186    height: 160px;187    background: #ffffff;188    border-top: 1px solid #d9dde7;189    display: flex;190    align-items: center;191    justify-content: center;192    gap: 220px;193  }194  .nav-item {195    display: flex;196    flex-direction: column;197    align-items: center;198    color: #cc7670;199    font-size: 28px;200    font-weight: 700;201  }202  .nav-item.secondary {203    color: #8fa0bf;204  }205 206  /* Android home indicator */207  .home-indicator {208    position: absolute;209    bottom: 24px;210    left: 375px;211    width: 330px;212    height: 14px;213    background: #0c0c0c;214    border-radius: 8px;215    opacity: 0.85;216  }217</style>218</head>219<body>220<div id="render-target">221 222  <!-- Status Bar -->223  <div class="status-bar">224    <div class="status-left">225      <div style="font-size:42px;">9:53</div>226      <div class="dots">• • • • •</div>227    </div>228    <div class="status-right">229      <!-- WiFi Icon -->230      <svg class="icon" viewBox="0 0 24 24" fill="#ffffff">231        <path d="M2 9c5-4 15-4 20 0l-2 2c-4-3-12-3-16 0L2 9zm4 4c3-2 9-2 12 0l-2 2c-2-1-6-1-8 0l-2-2zm4 4l2 2 2-2c-2-1-4-1-6 0z"/>232      </svg>233      <!-- Battery Icon -->234      <svg class="icon" viewBox="0 0 32 24" fill="none" stroke="#ffffff" stroke-width="2">235        <rect x="2" y="4" width="24" height="16" rx="3" />236        <rect x="27" y="9" width="3" height="6" fill="#ffffff" stroke="none"/>237        <rect x="5" y="7" width="18" height="10" fill="#ffffff" stroke="none"/>238      </svg>239    </div>240  </div>241 242  <!-- Hero Illustration -->243  <div class="hero">244    <div class="img">[IMG: Travel illustration with bus, train and plane]</div>245  </div>246 247  <!-- White Panel -->248  <div class="panel">249    <h1>Where to, Maria?</h1>250 251    <!-- From -->252    <div class="field">253      <!-- circle icon -->254      <svg class="f-icon" viewBox="0 0 24 24">255        <circle cx="12" cy="12" r="9" fill="none" stroke="#5b6ea6" stroke-width="3"/>256        <circle cx="12" cy="12" r="3" fill="#5b6ea6"/>257      </svg>258      <div>Par United Kingdom</div>259      <div class="f-right">260        <!-- swap arrows -->261        <svg width="56" height="56" viewBox="0 0 24 24">262          <path d="M7 16V5l-3 3" stroke="#5b6ea6" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>263          <path d="M17 8v11l3-3" stroke="#5b6ea6" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>264        </svg>265      </div>266    </div>267 268    <!-- To -->269    <div class="field">270      <!-- location pin -->271      <svg class="f-icon" viewBox="0 0 24 24">272        <path d="M12 2c-4 0-7 3-7 7 0 6 7 13 7 13s7-7 7-13c0-4-3-7-7-7zm0 10a3 3 0 1 0 0-6 3 3 0 0 0 0 6z" fill="#5b6ea6"/>273      </svg>274      <div>Granada Spain</div>275    </div>276 277    <!-- Dates -->278    <div class="row">279      <div class="field">280        <!-- calendar -->281        <svg class="f-icon" viewBox="0 0 24 24">282          <rect x="3" y="4" width="18" height="16" rx="2" fill="none" stroke="#5b6ea6" stroke-width="3"/>283          <line x1="3" y1="9" x2="21" y2="9" stroke="#5b6ea6" stroke-width="3"/>284          <line x1="7" y1="2" x2="7" y2="7" stroke="#5b6ea6" stroke-width="3"/>285          <line x1="17" y1="2" x2="17" y2="7" stroke="#5b6ea6" stroke-width="3"/>286        </svg>287        <div>Thu, Nov 30</div>288      </div>289      <div class="field">290        <!-- calendar -->291        <svg class="f-icon" viewBox="0 0 24 24">292          <rect x="3" y="4" width="18" height="16" rx="2" fill="none" stroke="#5b6ea6" stroke-width="3"/>293          <line x1="3" y1="9" x2="21" y2="9" stroke="#5b6ea6" stroke-width="3"/>294          <line x1="7" y1="2" x2="7" y2="7" stroke="#5b6ea6" stroke-width="3"/>295          <line x1="17" y1="2" x2="17" y2="7" stroke="#5b6ea6" stroke-width="3"/>296        </svg>297        <div>Thu, Nov 30</div>298        <div class="f-right">299          <!-- close X -->300          <svg width="40" height="40" viewBox="0 0 24 24">301            <path d="M6 6l12 12M18 6L6 18" stroke="#8394c2" stroke-width="3" stroke-linecap="round"/>302          </svg>303        </div>304      </div>305    </div>306 307    <!-- Passenger -->308    <div class="field subtext">309      <!-- person icon -->310      <svg class="f-icon" viewBox="0 0 24 24">311        <circle cx="12" cy="7" r="4" fill="#5b6ea6"/>312        <path d="M4 20c0-4 4-6 8-6s8 2 8 6" fill="none" stroke="#5b6ea6" stroke-width="3"/>313      </svg>314      <div>1 Adult, No discount card</div>315    </div>316 317    <!-- Search button -->318    <div class="btn">Search Omio</div>319  </div>320 321  <!-- Section below -->322  <div class="section-title">Need a place to stay?</div>323 324  <div class="cards">325    <div class="card">326      <div class="img">[IMG: Book now, pay later - hotel desk]</div>327      <div class="label">Book now, pay later</div>328    </div>329    <div class="card">330      <div class="img">[IMG: Free cancelation on most stays - phone]</div>331      <div class="label">Free cancelation on most stays</div>332    </div>333    <div class="card">334      <div class="img">[IMG: Get 10% with mobile app]</div>335      <div class="label">Get 10% with mobile</div>336    </div>337  </div>338 339  <!-- Bottom navigation -->340  <div class="bottom-bar">341    <div class="nav-item">342      <svg width="60" height="60" viewBox="0 0 24 24">343        <circle cx="11" cy="11" r="8" stroke="#cc7670" stroke-width="3" fill="none"/>344        <line x1="20" y1="20" x2="15" y2="15" stroke="#cc7670" stroke-width="3" stroke-linecap="round"/>345      </svg>346      <div>Search</div>347    </div>348    <div class="nav-item secondary">349      <svg width="60" height="60" viewBox="0 0 24 24">350        <rect x="4" y="5" width="16" height="12" rx="2" stroke="#8fa0bf" stroke-width="3" fill="none"/>351        <line x1="4" y1="9" x2="20" y2="9" stroke="#8fa0bf" stroke-width="3"/>352      </svg>353      <div>Tickets</div>354    </div>355    <div class="nav-item secondary">356      <svg width="60" height="60" viewBox="0 0 24 24">357        <circle cx="12" cy="7" r="4" fill="#8fa0bf"/>358        <path d="M4 21c0-4 4-6 8-6s8 2 8 6" fill="none" stroke="#8fa0bf" stroke-width="3"/>359      </svg>360      <div>Profile</div>361    </div>362  </div>363 364  <div class="home-indicator"></div>365</div>366</body>367</html>