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 Screen Mock</title>7<style>8  body {9    margin: 0;10    padding: 0;11    background: transparent;12    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;13  }14  #render-target {15    width: 1080px;16    height: 2400px;17    position: relative;18    overflow: hidden;19    background: #1d2740; /* deep navy */20    color: #e8f0ff;21  }22  .safe-top {23    height: 120px; /* status bar spacing */24    width: 100%;25  }26  .content {27    padding: 0 64px;28  }29  h1.title {30    margin: 20px 0 30px;31    font-size: 96px;32    font-weight: 600;33    letter-spacing: 0.2px;34    color: #e8f0ff;35  }36  .lead {37    font-size: 42px;38    line-height: 58px;39    color: #d5deff;40    margin: 12px 0 26px;41  }42  .lead a {43    color: #45b7ff;44    text-decoration: underline;45  }46  .cta {47    margin-top: 50px;48    width: 952px;49    height: 150px;50    background: #1ea7ff;51    border-radius: 90px;52    display: flex;53    align-items: center;54    justify-content: center;55    color: #07223d;56    font-size: 48px;57    font-weight: 600;58    box-shadow: 0 6px 0 rgba(0,0,0,0.15) inset;59  }60 61  /* Illustration placeholder near bottom */62  .skyline {63    position: absolute;64    left: 0;65    right: 0;66    bottom: 300px;67    height: 360px;68    display: flex;69    align-items: center;70    justify-content: center;71    background: #E0E0E0;72    border-top: 1px solid #BDBDBD;73    border-bottom: 1px solid #BDBDBD;74    color: #5f6b7a;75    font-size: 36px;76    letter-spacing: 0.2px;77  }78 79  /* Floating Action Button */80  .fab {81    position: absolute;82    right: 48px;83    bottom: 420px;84    width: 150px;85    height: 150px;86    background: #1ea7ff;87    border-radius: 50%;88    box-shadow: 0 10px 22px rgba(0,0,0,0.35);89    display: flex;90    align-items: center;91    justify-content: center;92  }93  .fab svg { width: 72px; height: 72px; fill: #0b1830; }94 95  /* Bottom navigation bar */96  .tabbar {97    position: absolute;98    left: 0;99    right: 0;100    bottom: 0;101    height: 240px;102    background: #171f35;103    border-top: 1px solid rgba(255,255,255,0.06);104    display: flex;105    align-items: center;106    justify-content: space-around;107    padding-bottom: 18px;108  }109  .tab {110    width: 160px;111    text-align: center;112    color: #7d879b;113    font-size: 34px;114  }115  .tab .icon {116    width: 76px;117    height: 76px;118    margin: 0 auto 14px;119  }120  .tab.active { color: #1ea7ff; }121  .tab.active svg { fill: #1ea7ff; }122  .tab svg { width: 100%; height: 100%; fill: #7d879b; }123 124  /* Alerts badge */125  .badge {126    position: absolute;127    top: -6px;128    right: -18px;129    width: 48px;130    height: 48px;131    background: #ff4d5a;132    color: #fff;133    font-size: 28px;134    border-radius: 50%;135    display: flex;136    align-items: center;137    justify-content: center;138    box-shadow: 0 2px 6px rgba(0,0,0,0.35);139  }140 141  .tab-label {142    display: block;143  }144</style>145</head>146<body>147  <div id="render-target">148    <div class="safe-top"></div>149 150    <div class="content">151      <h1 class="title">Trips</h1>152      <p class="lead">It looks like you have no upcoming trips.</p>153      <p class="lead">Connect your email to TripIt or forward booking emails to <a href="#">plans@tripit.com</a> and we’ll build your trip itinerary.</p>154      <div class="cta">Turn On Inbox Sync</div>155    </div>156 157    <div class="skyline">[IMG: Stylized skyline illustration of world landmarks]</div>158 159    <div class="fab" aria-label="Add">160      <svg viewBox="0 0 24 24">161        <path d="M11 4h2v7h7v2h-7v7h-2v-7H4v-2h7z"/>162      </svg>163    </div>164 165    <div class="tabbar">166      <div class="tab active">167        <div class="icon">168          <!-- suitcase -->169          <svg viewBox="0 0 24 24">170            <path d="M9 6V4a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v2h3a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h3zm2-2h2v2h-2V4zm9 6H4v8h16v-8z"/>171          </svg>172        </div>173        <span class="tab-label">Trips</span>174      </div>175 176      <div class="tab" style="position: relative;">177        <div class="icon" style="position: relative;">178          <!-- bell -->179          <svg viewBox="0 0 24 24">180            <path d="M12 22a2 2 0 0 0 2-2h-4a2 2 0 0 0 2 2zm6-6V11a6 6 0 1 0-12 0v5l-2 2v1h18v-1l-2-2z"/>181          </svg>182          <div class="badge">1</div>183        </div>184        <span class="tab-label">Alerts</span>185      </div>186 187      <div class="tab">188        <div class="icon">189          <!-- star -->190          <svg viewBox="0 0 24 24">191            <path d="M12 2l3 6 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z"/>192          </svg>193        </div>194        <span class="tab-label">Pro</span>195      </div>196 197      <div class="tab">198        <div class="icon">199          <!-- files -->200          <svg viewBox="0 0 24 24">201            <path d="M8 2h7l5 5v11a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2zm7 2H8v16h10V9h-5V4z"/>202          </svg>203        </div>204        <span class="tab-label">Unfiled</span>205      </div>206 207      <div class="tab">208        <div class="icon">209          <!-- account/person -->210          <svg viewBox="0 0 24 24">211            <path d="M12 12a5 5 0 1 0-5-5 5 5 0 0 0 5 5zm0 2c-5 0-9 3-9 6v2h18v-2c0-3-4-6-9-6z"/>212          </svg>213        </div>214        <span class="tab-label">Account</span>215      </div>216    </div>217  </div>218</body>219</html>