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>Trips UI</title>7<style>8  body { margin:0; padding:0; background:transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, Helvetica, sans-serif; color:#111; }9  #render-target {10    position: relative;11    overflow: hidden;12    width:1080px;13    height:2400px;14    background:#FFFFFF;15  }16 17  .status-bar {18    height:110px;19    padding:0 36px;20    display:flex;21    align-items:center;22    justify-content:space-between;23    color:#333;24    font-size:34px;25  }26  .status-right {27    display:flex; gap:22px; align-items:center;28  }29  .dot { width:10px; height:10px; background:#888; border-radius:50%; display:inline-block; }30  .battery {31    width:44px; height:24px; border:3px solid #444; border-radius:6px; position:relative;32  }33  .battery:after {34    content:""; position:absolute; right:-8px; top:4px; width:6px; height:12px; background:#444; border-radius:2px;35  }36  .battery .lvl { position:absolute; left:3px; top:3px; bottom:3px; right:10px; background:#444; border-radius:2px; }37 38  .content { padding: 10px 40px 0 40px; }39  .header-row {40    display:flex; align-items:center; justify-content:space-between;41    margin-top:12px;42  }43  .title {44    font-size:64px; font-weight:700; letter-spacing:-0.5px; margin:30px 0 20px 0;45  }46  .top-actions { display:flex; align-items:center; gap:28px; }47  .icon-btn { width:56px; height:56px; display:flex; align-items:center; justify-content:center; }48 49  .section-row {50    display:flex; align-items:center; justify-content:space-between;51    margin-top:30px;52  }53  .section-title { font-size:46px; font-weight:700; }54  .link { color:#0a84a1; font-size:36px; font-weight:600; }55 56  .stats-card {57    margin-top:22px;58    background:#fff;59    border-radius:26px;60    box-shadow: 0 8px 24px rgba(0,0,0,0.08);61    padding:40px 44px;62    display:flex; align-items:center; justify-content:space-between;63  }64  .stats-left b { font-size:40px; display:block; margin-bottom:8px; }65  .subtle { color:#6f6f6f; }66  .email { color:#111; font-weight:700; }67  .stats-right { text-align:right; }68  .big-number { font-size:68px; font-weight:800; }69  .small-note { color:#7d7d7d; font-size:30px; }70 71  .tabs {72    margin-top:40px;73    border-bottom:1px solid #e6e6e6;74    display:flex; justify-content:space-between;75    padding: 0 8px;76  }77  .tab { padding:26px 0 22px; font-weight:700; color:#222; }78  .tab.inactive { color:#6d6d6d; font-weight:600; }79  .tab-indicator {80    height:6px; width:260px; background:#3a3a3a; border-radius:3px; margin-top:-6px;81  }82 83  .current-title { font-size:54px; font-weight:800; margin:44px 0 26px; }84 85  .trip-card {86    background:#E0E0E0; border:1px solid #BDBDBD;87    height:520px; border-radius:40px;88    display:flex; align-items:center; justify-content:center;89    color:#757575; font-size:34px; text-align:center;90    overflow:hidden;91  }92 93  .trip-info { margin:22px 8px 40px; }94  .trip-name { font-size:48px; font-weight:800; margin-bottom:8px; }95  .trip-dates { color:#6f6f6f; font-size:34px; }96 97  .bottom-bar {98    position:absolute; left:0; right:0; bottom:110px;99    height:180px; background:#fff; border-top:1px solid #e6e6e6;100    display:flex; justify-content:space-around; align-items:center;101  }102  .nav-item { display:flex; flex-direction:column; align-items:center; gap:12px; color:#6f6f6f; font-size:30px; }103  .nav-item .ico { width:56px; height:56px; display:flex; align-items:center; justify-content:center; }104  .active { color:#ff6a00; }105 106  .gesture-area {107    position:absolute; left:0; right:0; bottom:0; height:110px; background:#000;108    display:flex; align-items:center; justify-content:center;109  }110  .gesture-pill {111    width:260px; height:10px; background:#fff; opacity:0.9; border-radius:8px;112  }113</style>114</head>115<body>116<div id="render-target">117  <!-- Status bar -->118  <div class="status-bar">119    <div>5:56</div>120    <div class="status-right">121      <span class="dot"></span>122      <svg width="28" height="28" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" fill="#888"/></svg>123      <svg width="28" height="28" viewBox="0 0 24 24"><path d="M3 6h18M6 12h12M9 18h6" stroke="#666" stroke-width="2" fill="none" stroke-linecap="round"/></svg>124      <svg width="28" height="28" viewBox="0 0 24 24"><path d="M13 3l8 4-8 4-8-4 8-4zm-8 8l8 4 8-4" stroke="#666" stroke-width="2" fill="none" stroke-linejoin="round"/></svg>125      <div class="battery"><div class="lvl"></div></div>126    </div>127  </div>128 129  <div class="content">130    <div class="header-row">131      <div class="title">Trips</div>132      <div class="top-actions">133        <!-- clock/history icon -->134        <div class="icon-btn">135          <svg width="44" height="44" viewBox="0 0 24 24">136            <circle cx="12" cy="12" r="9" stroke="#1f2937" stroke-width="2" fill="none"/>137            <path d="M12 7v5l3 2" stroke="#1f2937" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>138          </svg>139        </div>140        <!-- kebab -->141        <div class="icon-btn">142          <svg width="32" height="32" viewBox="0 0 24 24">143            <circle cx="12" cy="5" r="2" fill="#1f2937"/>144            <circle cx="12" cy="12" r="2" fill="#1f2937"/>145            <circle cx="12" cy="19" r="2" fill="#1f2937"/>146          </svg>147        </div>148      </div>149    </div>150 151    <div class="section-row">152      <div class="section-title">Trip Stats</div>153      <div class="link">See all</div>154    </div>155 156    <div class="stats-card">157      <div class="stats-left">158        <b>Unlock more stats</b>159        <div class="subtle">Forward booking emails to</div>160        <div class="email">trips@kayak.com</div>161      </div>162      <div class="stats-right">163        <div class="big-number">0</div>164        <div class="small-note">days on the road</div>165      </div>166    </div>167 168    <div class="tabs">169      <div>170        <div class="tab">Upcoming (4)</div>171        <div class="tab-indicator"></div>172      </div>173      <div class="tab inactive">Past</div>174    </div>175 176    <div class="current-title">Current Trips</div>177 178    <div class="trip-card">179      [IMG: Seattle skyline photo]180    </div>181    <div class="trip-info">182      <div class="trip-name">Seattle Trip</div>183      <div class="trip-dates">Jan 24 – 26</div>184    </div>185 186    <div class="trip-card" style="height:420px; border-radius:36px; margin-top:16px;">187      [IMG: City skyline photo]188    </div>189  </div>190 191  <!-- Bottom navigation -->192  <div class="bottom-bar">193    <div class="nav-item">194      <div class="ico">195        <svg width="44" height="44" viewBox="0 0 24 24">196          <circle cx="11" cy="11" r="6" stroke="#6f6f6f" stroke-width="2" fill="none"/>197          <path d="M16 16l4 4" stroke="#6f6f6f" stroke-width="2" stroke-linecap="round"/>198        </svg>199      </div>200      <div>Search</div>201    </div>202 203    <div class="nav-item">204      <div class="ico">205        <svg width="46" height="46" viewBox="0 0 24 24">206          <circle cx="12" cy="12" r="9" stroke="#6f6f6f" stroke-width="2" fill="none"/>207          <path d="M3 12h18M12 3v18" stroke="#6f6f6f" stroke-width="2" fill="none"/>208        </svg>209      </div>210      <div>Explore</div>211    </div>212 213    <div class="nav-item active">214      <div class="ico">215        <svg width="46" height="46" viewBox="0 0 24 24">216          <path d="M12 21s-7-4.35-7-10a4 4 0 0 1 7-2 4 4 0 0 1 7 2c0 5.65-7 10-7 10z" fill="#ff6a00"/>217        </svg>218      </div>219      <div>Trips</div>220    </div>221 222    <div class="nav-item">223      <div class="ico">224        <svg width="46" height="46" viewBox="0 0 24 24">225          <circle cx="12" cy="8" r="4" stroke="#6f6f6f" stroke-width="2" fill="none"/>226          <path d="M4 20a8 8 0 0 1 16 0" stroke="#6f6f6f" stroke-width="2" fill="none"/>227        </svg>228      </div>229      <div>Profile</div>230    </div>231  </div>232 233  <!-- Gesture bar area -->234  <div class="gesture-area">235    <div class="gesture-pill"></div>236  </div>237</div>238</body>239</html>