GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Where from UI</title>7<style>8  body { margin:0; padding:0; background:transparent; }9  #render-target {10    width:1080px; height:2400px;11    position:relative; overflow:hidden;12    background:#ffffff; box-shadow:0 2px 8px rgba(0,0,0,0.08);13    font-family: Arial, Helvetica, sans-serif; color:#212121;14  }15  .status-bar {16    height:100px;17    padding:24px 32px;18    display:flex; align-items:center; justify-content:space-between;19    color:#222; font-size:32px; letter-spacing:0.5px;20  }21  .status-icons { display:flex; gap:22px; align-items:center; }22  .top-cancel {23    position:absolute; right:40px; top:130px;24    color:#1976d2; font-size:38px; font-weight:600;25  }26  .content { padding:0 40px; }27  .title {28    margin-top:170px;29    font-size:64px; font-weight:700; line-height:1.2;30  }31  .search-input {32    margin-top:40px;33    border:2px solid #CFCFCF; border-radius:18px;34    height:120px; display:flex; align-items:center;35    padding:0 24px; gap:24px; font-size:36px;36    color:#757575;37  }38  .chip {39    background:#EDEDED; border:1px solid #C8C8C8;40    border-radius:14px; padding:18px 24px;41    display:flex; align-items:center; gap:16px;42    color:#333; font-size:36px; font-weight:600;43  }44  .helper {45    margin-top:24px; font-size:32px; color:#757575;46  }47  .divider { margin-top:34px; height:2px; background:#E5E5E5; }48  .section-header {49    display:flex; align-items:center; justify-content:space-between;50    padding:28px 8px; font-size:36px; color:#424242;51  }52  .list { margin-top:8px; }53  .item {54    display:flex; align-items:flex-start; justify-content:space-between;55    padding:32px 8px; border-bottom:1px solid #EEEEEE;56  }57  .item-left { display:flex; gap:28px; }58  .icon-wrap { width:52px; height:52px; display:flex; align-items:center; justify-content:center; }59  .item-text .main {60    font-size:38px; color:#222; font-weight:600;61  }62  .item-text .sub {63    font-size:34px; color:#757575; margin-top:8px;64  }65  .km { font-size:34px; color:#757575; margin-top:8px; }66  .checkbox { width:60px; height:60px; }67  .bottom-sheet {68    position:absolute; left:0; right:0; bottom:116px;69    background:#fff; border-top:1px solid #E5E5E5;70    height:220px; display:flex; align-items:center; justify-content:center;71  }72  .btn {73    background:#1976d2; color:#fff; font-size:42px; font-weight:700;74    padding:28px 120px; border-radius:22px; box-shadow:0 2px 4px rgba(0,0,0,0.2);75  }76  .nav-bar {77    position:absolute; left:0; right:0; bottom:0; height:116px;78    background:#000; display:flex; align-items:center; justify-content:center;79  }80  .nav-pill {81    width:180px; height:12px; background:#EDEDED; border-radius:6px;82  }83</style>84</head>85<body>86<div id="render-target">87 88  <div class="status-bar">89    <div>3:31</div>90    <div class="status-icons">91      <!-- simple dots/timers placeholders -->92      <svg width="28" height="28"><circle cx="14" cy="14" r="6" fill="#888"/></svg>93      <svg width="28" height="28"><circle cx="14" cy="14" r="6" fill="#888"/></svg>94      <svg width="28" height="28"><circle cx="14" cy="14" r="6" fill="#888"/></svg>95      <!-- WiFi -->96      <svg width="40" height="28" viewBox="0 0 24 24">97        <path d="M2 8c5-4 15-4 20 0" stroke="#666" stroke-width="2" fill="none" stroke-linecap="round"/>98        <path d="M5 12c3-3 11-3 14 0" stroke="#666" stroke-width="2" fill="none" stroke-linecap="round"/>99        <circle cx="12" cy="16" r="2" fill="#666"/>100      </svg>101      <!-- Battery -->102      <svg width="50" height="28" viewBox="0 0 28 14">103        <rect x="1" y="2" width="22" height="10" rx="2" ry="2" stroke="#666" stroke-width="2" fill="none"/>104        <rect x="3" y="4" width="16" height="6" fill="#666"/>105        <rect x="24" y="5" width="3" height="4" fill="#666"/>106      </svg>107    </div>108  </div>109 110  <div class="top-cancel">Cancel</div>111 112  <div class="content">113    <div class="title">Where from?</div>114 115    <div class="search-input">116      <div class="chip">117        <span>New York</span>118        <svg width="30" height="30" viewBox="0 0 24 24">119          <path d="M6 6 L18 18 M18 6 L6 18" stroke="#333" stroke-width="2" stroke-linecap="round"/>120        </svg>121      </div>122      <span>Add another airport</span>123    </div>124 125    <div class="helper">Select multiple airports at once and compare flights</div>126 127    <div class="divider"></div>128 129    <div class="section-header">130      <div>Included in your search (1)</div>131      <svg width="36" height="36" viewBox="0 0 24 24">132        <path d="M6 9 L12 15 L18 9" stroke="#757575" stroke-width="2" fill="none" stroke-linecap="round"/>133      </svg>134    </div>135 136    <div class="list">137      <!-- New York group -->138      <div class="item">139        <div class="item-left">140          <div class="icon-wrap">141            <!-- location pin -->142            <svg width="44" height="44" viewBox="0 0 24 24">143              <path d="M12 2C8 2 6 5 6 8c0 6 6 12 6 12s6-6 6-12c0-3-2-6-6-6z" stroke="#757575" stroke-width="2" fill="none"/>144              <circle cx="12" cy="8" r="2.5" fill="#757575"/>145            </svg>146          </div>147          <div class="item-text">148            <div class="main">New York · All airports</div>149            <div class="sub">New York State, United States</div>150          </div>151        </div>152        <div class="checkbox">153          <!-- selected checkbox -->154          <svg width="60" height="60" viewBox="0 0 24 24">155            <rect x="2" y="2" width="20" height="20" rx="4" fill="#1A73E8"/>156            <path d="M7 12l3 3 7-7" stroke="#fff" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>157          </svg>158        </div>159      </div>160 161      <!-- JFK -->162      <div class="item">163        <div class="item-left">164          <div class="icon-wrap">165            <!-- airplane -->166            <svg width="44" height="44" viewBox="0 0 24 24">167              <path d="M2 16l7-3 5 0 5 5-2 2-5-5-5 2-3-1z" fill="#757575"/>168            </svg>169          </div>170          <div class="item-text">171            <div class="main"><span style="font-weight:800;">JFK</span> John F. Kennedy International Airport</div>172            <div class="km">21 km from city center</div>173          </div>174        </div>175        <div class="checkbox">176          <svg width="60" height="60" viewBox="0 0 24 24">177            <rect x="2" y="2" width="20" height="20" rx="4" fill="#1A73E8"/>178            <path d="M7 12l3 3 7-7" stroke="#fff" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>179          </svg>180        </div>181      </div>182 183      <!-- EWR -->184      <div class="item">185        <div class="item-left">186          <div class="icon-wrap">187            <svg width="44" height="44" viewBox="0 0 24 24">188              <path d="M2 16l7-3 5 0 5 5-2 2-5-5-5 2-3-1z" fill="#757575"/>189            </svg>190          </div>191          <div class="item-text">192            <div class="main"><span style="font-weight:800;">EWR</span> Newark Liberty International Airport</div>193            <div class="km">18 km from city center</div>194          </div>195        </div>196        <div class="checkbox">197          <svg width="60" height="60" viewBox="0 0 24 24">198            <rect x="2" y="2" width="20" height="20" rx="4" fill="#1A73E8"/>199            <path d="M7 12l3 3 7-7" stroke="#fff" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>200          </svg>201        </div>202      </div>203 204      <!-- LGA -->205      <div class="item">206        <div class="item-left">207          <div class="icon-wrap">208            <svg width="44" heigh