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>Trips 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;13    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;14    color:#212121;15  }16 17  .content{ padding: 48px 48px 220px; }18 19  .page-title{20    font-size:64px; line-height:1.1; margin: 48px 0 24px 0; font-weight:700;21  }22  .section-title{23    font-size:44px; line-height:1.2; margin: 16px 0 24px 0; font-weight:700; color:#333;24  }25 26  .card{27    background:#fff;28    border-radius:28px;29    box-shadow: 0 10px 20px rgba(0,0,0,0.06), 0 2px 6px rgba(0,0,0,0.08);30    border: 1px solid #ECECEC;31  }32  .stats-card{33    display:flex; align-items:flex-start;34    padding:36px; margin: 16px 0 36px 0;35  }36  .stats-card .title{ font-size:40px; font-weight:800; margin-bottom:8px; }37  .stats-card .sub{ font-size:32px; color:#616161; }38  .stats-card .email{ font-weight:700; color:#1a73e8; }39 40  .tabs{41    display:flex; align-items:flex-end; gap:64px;42    padding: 12px 8px 0 8px;43    border-bottom:1px solid #E5E5E5;44    margin-bottom: 36px;45  }46  .tab{47    font-size:36px; color:#454545; padding:24px 0; position:relative;48  }49  .tab.active{ font-weight:700; }50  .tab.active::after{51    content:""; position:absolute; left:0; bottom:-1px; width:320px; height:6px; background:#333; border-radius:3px;52  }53 54  .section-header{55    font-size:52px; font-weight:800; margin: 48px 0 28px 0;56  }57 58  .trip-card{59    margin: 0 0 36px 0;60  }61  .trip-image{62    height:520px; border-radius:36px; overflow:hidden;63    background:#E0E0E0; border:1px solid #BDBDBD;64    display:flex; align-items:center; justify-content:center; color:#757575; font-size:36px;65  }66  .trip-title{ font-size:44px; font-weight:800; margin:28px 0 8px 0; }67  .trip-dates{ font-size:34px; color:#666; }68 69  /* Overflow menu (opened) */70  .overflow-menu{71    position:absolute; top:200px; right:36px; width:560px;72    background:#fff; border-radius:22px;73    box-shadow: 0 12px 28px rgba(0,0,0,0.18), 0 2px 6px rgba(0,0,0,0.12);74    border:1px solid #EEE;75    z-index:5;76  }77  .overflow-item{78    padding:32px 36px; font-size:40px; color:#222;79  }80  .overflow-item + .overflow-item{ border-top:1px solid #F0F0F0; }81 82  /* Bottom navigation */83  .bottom-nav{84    position:absolute; left:0; right:0; bottom:0; height:180px;85    background:#ffffff; border-top:1px solid #EAEAEA;86    display:flex; justify-content:space-around; align-items:center;87    z-index:4;88  }89  .nav-item{ text-align:center; color:#666; font-size:30px; }90  .nav-item .label{ margin-top:12px; }91  .nav-item.active{ color:#ff6a00; }92  .home-indicator{93    position:absolute; left:50%; transform:translateX(-50%);94    bottom:20px; width:280px; height:10px; border-radius:6px; background:#CFCFCF;95    z-index:6;96  }97 98  /* Simple icon sizing */99  .nav-icon{ width:56px; height:56px; display:block; margin:0 auto; }100  .icon-stroke{ stroke:currentColor; fill:none; stroke-width:6; stroke-linecap:round; stroke-linejoin:round; }101  .icon-fill{ fill:currentColor; }102</style>103</head>104<body>105<div id="render-target">106 107  <!-- Floating overflow menu -->108  <div class="overflow-menu card">109    <div class="overflow-item">Trips settings</div>110    <div class="overflow-item">Search</div>111    <div class="overflow-item">Create a Trip</div>112  </div>113 114  <div class="content">115    <div class="page-title">Trips</div>116 117    <div class="section-title">Trip Stats</div>118 119    <div class="card stats-card">120      <div>121        <div class="title">Unlock more stats</div>122        <div class="sub">Forward booking emails to <span class="email">trips@kayak.com</span></div>123      </div>124    </div>125 126    <div class="tabs">127      <div class="tab active">Upcoming (4)</div>128      <div class="tab">Past</div>129    </div>130 131    <div class="section-header">Current Trips</div>132 133    <div class="trip-card">134      <div class="trip-image">[IMG: Seattle skyline at dusk]</div>135      <div class="trip-title">Seattle Trip</div>136      <div class="trip-dates">Jan 24 – 26</div>137    </div>138 139    <div class="trip-card">140      <div class="trip-image">[IMG: Seattle skyline at dusk]</div>141    </div>142  </div>143 144  <!-- Bottom navigation -->145  <div class="bottom-nav">146    <div class="nav-item">147      <svg class="nav-icon" viewBox="0 0 24 24">148        <circle class="icon-stroke" cx="11" cy="11" r="7"></circle>149        <line class="icon-stroke" x1="16.5" y1="16.5" x2="22" y2="22"></line>150      </svg>151      <div class="label">Search</div>152    </div>153 154    <div class="nav-item">155      <svg class="nav-icon" viewBox="0 0 24 24">156        <circle class="icon-stroke" cx="12" cy="12" r="8"></circle>157        <path class="icon-stroke" d="M4 12h16M12 4a12 12 0 0 1 0 16"></path>158      </svg>159      <div class="label">Explore</div>160    </div>161 162    <div class="nav-item active">163      <svg class="nav-icon" viewBox="0 0 24 24">164        <path class="icon-fill" d="M12 21s-6-3.84-8.24-6.08C1.5 12.66 2.17 9.5 4.7 8.3c1.6-.77 3.6-.3 4.7 1 1.1-1.3 3.1-1.77 4.7-1 2.53 1.2 3.2 4.36.94 6.62C18 17.16 12 21 12 21z"></path>165      </svg>166      <div class="label">Trips</div>167    </div>168 169    <div class="nav-item">170      <svg class="nav-icon" viewBox="0 0 24 24">171        <circle class="icon-stroke" cx="12" cy="8" r="4"></circle>172        <path class="icon-stroke" d="M4 20c2-3 5-4 8-4s6 1 8 4"></path>173      </svg>174      <div class="label">Profile</div>175    </div>176  </div>177 178  <div class="home-indicator"></div>179</div>180</body>181</html>