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>Trip Summary UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: #2b2b2b; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #ffffff;15  }16 17  /* Status bar */18  .status-bar {19    height: 80px;20    padding: 22px 32px 0 32px;21    display: flex;22    align-items: center;23    justify-content: space-between;24    color: #5b5b5b;25    font-size: 30px;26  }27  .status-right {28    display: flex;29    align-items: center;30    gap: 20px;31    color: #7a7a7a;32    font-size: 26px;33  }34  .status-dot { font-weight: 700; }35 36  /* App bar */37  .app-bar {38    height: 120px;39    padding: 0 32px;40    display: flex;41    align-items: center;42    position: relative;43  }44  .back-btn {45    width: 72px; height: 72px;46    display: flex; align-items: center; justify-content: center;47  }48  .app-title {49    position: absolute;50    left: 50%; transform: translateX(-50%);51    font-size: 48px; font-weight: 700; color: #3a3a3a;52  }53  .app-actions {54    margin-left: auto;55    display: flex; align-items: center; gap: 26px;56  }57  .circle-count {58    width: 60px; height: 60px; border-radius: 30px;59    background: #f1f4f6; display: flex; align-items: center; justify-content: center;60    font-weight: 700; color: #3a3a3a;61    border: 1px solid #e2e6ea;62  }63  .icon-btn {64    width: 58px; height: 58px; display: flex; align-items: center; justify-content: center;65    border-radius: 12px;66    color: #3a3a3a;67  }68  .divider { height: 1px; background: #e9eef2; }69 70  /* Content */71  .content {72    padding: 36px 36px 180px 36px;73  }74  .section-title {75    font-size: 52px; font-weight: 700; margin-bottom: 12px;76  }77  .subline {78    font-size: 28px; letter-spacing: 1px; text-transform: uppercase; color: #7c8a98;79  }80 81  /* Card */82  .trip-card {83    margin-top: 28px;84    background: #fff;85    border: 2px solid #d7e3ec;86    border-radius: 26px;87    padding: 28px;88    box-shadow: 0 2px 0 rgba(0,0,0,0.04);89  }90  .card-header {91    display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px;92  }93  .line-left {94    display: flex; align-items: center; gap: 16px;95    font-weight: 800; letter-spacing: 0.3px; color: #4f6a7f; font-size: 30px;96  }97  .rating {98    display: inline-flex; align-items: center; gap: 8px; margin-left: 12px; color: #00a6e7; font-weight: 700;99  }100  .price {101    color: #00a6e7; font-weight: 800; font-size: 34px;102  }103 104  .times-row {105    display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; column-gap: 20px;106    margin: 8px 0 6px 0;107  }108  .time {109    font-size: 56px; font-weight: 800; color: #2d2d2d;110  }111  .duration {112    color: #8da0b1; font-size: 26px; display: flex; align-items: center; gap: 12px;113  }114 115  .stations {116    display: grid; grid-template-columns: 1fr 1fr; column-gap: 20px; margin-top: 10px; margin-bottom: 22px;117    color: #5b6c79; font-size: 28px;118  }119 120  .pills { display: flex; flex-wrap: wrap; gap: 18px; }121  .pill {122    padding: 18px 26px; border-radius: 30px; font-weight: 700; font-size: 26px;123    display: inline-flex; align-items: center; gap: 12px;124  }125  .pill.details { background: #e6f7f8; color: #179fa2; }126  .pill.transfers { background: #e9edf1; color: #7b858e; }127  .pill.ticket { background: #dff6ea; color: #1aa578; }128  .pill.luxury { background: #efe4fb; color: #8c62d6; margin-top: 18px; }129 130  /* Bottom CTA */131  .cta-wrap {132    position: absolute; left: 0; right: 0; bottom: 80px;133    padding: 0 34px;134  }135  .cta {136    width: 100%;137    background: #ff6661;138    border-radius: 24px;139    height: 140px;140    display: flex; align-items: center; justify-content: center;141    color: #ffffff; font-weight: 800; font-size: 40px; letter-spacing: 3px;142    box-shadow: 0 8px 18px rgba(255, 102, 97, 0.35);143  }144  .home-indicator {145    position: absolute; left: 50%; transform: translateX(-50%);146    bottom: 24px; width: 260px; height: 10px; background: #d7d7d7; border-radius: 6px;147  }148 149  /* Simple helpers */150  .muted { color: #7a8a98; }151  .img-placeholder {152    width: 40px; height: 40px; background: #E0E0E0; border: 1px solid #BDBDBD;153    display: flex; align-items: center; justify-content: center; color: #757575; font-size: 20px; border-radius: 8px;154  }155</style>156</head>157<body>158<div id="render-target">159 160  <!-- Status bar -->161  <div class="status-bar">162    <div>9:46</div>163    <div class="status-right">164      <span>4°</span>165      <span class="img-placeholder">[IMG]</span>166      <span>82°</span>167      <span class="status-dot">•</span>168      <!-- Simple wifi icon -->169      <svg width="28" height="28" viewBox="0 0 24 24"><path fill="#6d6d6d" d="M12 18.5l-1.6 1.6a2.3 2.3 0 013.2 0L12 18.5zm-5-3.8l1.5 1.5a6 6 0 018 0l1.5-1.5a8.5 8.5 0 00-11 0zm-3.2-3.2l1.6 1.6a10.5 10.5 0 0114.2 0l1.6-1.6c-5.5-5-13.5-5-19 0z"/></svg>170      <!-- Battery icon -->171      <svg width="36" height="36" viewBox="0 0 24 24"><rect x="2" y="6" width="18" height="12" rx="2" ry="2" fill="none" stroke="#6d6d6d" stroke-width="2"/><rect x="4" y="8" width="12" height="8" fill="#6d6d6d"/><rect x="20" y="10" width="2" height="4" fill="#6d6d6d"/></svg>172    </div>173  </div>174 175  <!-- App bar -->176  <div class="app-bar">177    <div class="back-btn">178      <svg width="36" height="36" viewBox="0 0 24 24"><path d="M15 18l-6-6 6-6" stroke="#3a3a3a" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>179    </div>180    <div class="app-title">Trip Summary</div>181    <div class="app-actions">182      <div class="circle-count">1</div>183      <div class="icon-btn">184        <!-- plus icon -->185        <svg width="36" height="36" viewBox="0 0 24 24"><path d="M12 5v14M5 12h14" stroke="#3a3a3a" stroke-width="2" stroke-linecap="round"/></svg>186      </div>187      <div class="icon-btn">188        <!-- user icon -->189        <svg width="36" height="36" viewBox="0 0 24 24"><circle cx="12" cy="8" r="4" fill="#3a3a3a"/><path d="M4 20c0-4.4 4-6 8-6s8 1.6 8 6" fill="#3a3a3a"/></svg>190      </div>191    </div>192  </div>193  <div class="divider"></div>194 195  <!-- Main content -->196  <div class="content">197    <div class="section-title">Departure</div>198    <div class="subline">NEW YORK › NEWARK • MON, AUG 14</div>199 200    <div class="trip-card">201      <div class="card-header">202        <div class="line-left">203          <!-- train icon -->204          <svg width="32" height="32" viewBox="0 0 24 24"><path d="M7 3h10a2 2 0 012 2v9a3 3 0 01-3 3l1.5 2H7.5L9 17a3 3 0 01-3-3V5a2 2 0 012-2z" fill="#8ea4b4"/><circle cx="9" cy="13" r="1.4" fill="#fff"/><circle cx="15" cy="13" r="1.4" fill="#fff"/></svg>205          <span>AMTRAK ACELA</span>206          <span class="rating">207            <svg width="26" height="26" viewBox="0 0 24 24"><path d="M12 2l3.1 6.6 7 1-5.1 4.9 1.3 7-6.3-3.3-6.3 3.3 1.3-7L1.9 9.6l7-1L12 2z" fill="#00a6e7"/></svg>208            4.5209          </span>210        </div>211        <div class="price">$46.00</div>212      </div>213 214      <div class="times-row">215        <div class="time">6:00 PM</div>216        <div class="duration">217          <span>0h 13m</span>218          <svg width="56" height="20" viewBox="0 0 56 20"><path d="M2 10h50M46 5l6 5-6 5" stroke="#c5d2dc" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>219        </div>220        <div class="time">6:13 PM</div>221      </div>222 223      <div class="stations">224        <div>NY Moynihan Train Hall …</div>225        <div style="text-align:right;">Newark Penn Station</div>226      </div>227 228      <div class="pills">229        <div class="pill details">230          Details231          <svg width="22" height="22" viewBox="0 0 24 24"><path d="M6 9l6 6 6-6" stroke="#179fa2" stroke-width="2" fill="none" stroke-linecap="round"/></svg>232        </div>233        <div class="pill transfers">0 transfers</div>234        <div class="pill ticket">E-ticket</div>235      </div>236 237      <div class="pill luxury">Luxury</div>238    </div>239  </div>240 241  <!-- Bottom CTA -->242  <div class="cta-wrap">243    <div class="cta">BOOK | $46.00</div>244  </div>245  <div class="home-indicator"></div>246 247</div>248</body>249</html>