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 Details - Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #ffffff;15    color: #111;16  }17 18  /* Status bar */19  .status-bar {20    position: absolute;21    top: 0;22    left: 0;23    width: 1080px;24    height: 96px;25    padding: 0 36px;26    display: flex;27    align-items: center;28    justify-content: space-between;29    color: #2b2b2b;30    font-size: 34px;31  }32  .status-icons {33    display: flex;34    gap: 16px;35    align-items: center;36  }37  .dot-icon {38    width: 24px; height: 24px; border-radius: 50%; background: #9e9e9e;39  }40  .wifi {41    width: 32px; height: 20px; border: 3px solid #555; border-top: none; border-radius: 0 0 8px 8px;42  }43  .battery {44    width: 44px; height: 22px; border: 3px solid #555; border-radius: 4px; position: relative;45  }46  .battery:after {47    content: ""; position: absolute; right: -6px; top: 6px; width: 6px; height: 10px; background: #555; border-radius: 2px;48  }49 50  /* Header area */51  .header {52    position: absolute;53    top: 96px;54    left: 0;55    width: 1080px;56    padding: 24px 36px 16px 36px;57    background: #fff;58    display: flex;59    align-items: flex-start;60    gap: 20px;61    z-index: 2;62  }63  .back-btn {64    width: 72px; height: 72px; display: flex; align-items: center; justify-content: center;65  }66  .title-wrap {67    display: flex; flex-direction: column;68  }69  .title {70    font-weight: 800;71    font-size: 58px;72    line-height: 1.1;73    letter-spacing: 0.2px;74  }75  .subtitle {76    margin-top: 8px;77    font-size: 34px;78    color: #6b6f76;79  }80  .actions {81    margin-left: auto;82    margin-top: 6px;83    display: flex;84    align-items: center;85    gap: 8px;86  }87  .icon-btn {88    width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center;89  }90 91  /* Banner image placeholder */92  .banner {93    position: absolute;94    top: 232px;95    left: 0;96    width: 1080px;97    height: 420px;98    background: #E0E0E0;99    border-top: 1px solid #BDBDBD;100    border-bottom: 1px solid #BDBDBD;101    display: flex;102    align-items: center;103    justify-content: center;104    color: #757575;105    font-size: 34px;106  }107 108  /* Overflow menu card */109  .menu-card {110    position: absolute;111    top: 320px;112    right: 36px;113    width: 520px;114    background: #ffffff;115    border-radius: 20px;116    box-shadow: 0 10px 28px rgba(0,0,0,0.18);117    z-index: 5;118    overflow: hidden;119  }120  .menu-item {121    padding: 34px 36px;122    font-size: 40px;123    color: #262626;124    border-bottom: 1px solid #f0f0f0;125  }126  .menu-item:last-child { border-bottom: none; }127 128  /* Notes section */129  .content {130    position: absolute;131    top: 700px;132    left: 0;133    right: 0;134    padding: 54px 36px 0 36px;135  }136  .section-title {137    font-size: 52px;138    font-weight: 700;139    color: #222;140    margin-bottom: 28px;141  }142  .note-card {143    width: 100%;144    background: #fff;145    border: 2px solid #d7e0e6;146    border-radius: 24px;147    overflow: hidden;148  }149  .note-body {150    height: 420px;151    background: #fafcfd;152  }153  .note-footer {154    height: 140px;155    background: #ffffff;156    border-top: 2px solid #d7e0e6;157    display: flex;158    align-items: center;159    justify-content: space-between;160    padding: 0 28px 0 28px;161  }162  .footer-left {163    display: flex;164    align-items: center;165    gap: 16px;166    color: #0a7285;167    font-size: 28px;168  }169  .add-btn {170    padding: 20px 36px;171    background: #2f3740;172    color: #fff;173    border-radius: 22px;174    font-size: 36px;175    font-weight: 700;176  }177 178  /* Bottom navigation pill */179  .nav-bar {180    position: absolute;181    bottom: 0;182    left: 0;183    width: 1080px;184    height: 120px;185    background: #000000;186    display: flex;187    align-items: center;188    justify-content: center;189  }190  .home-pill {191    width: 180px; height: 10px; background: #e5e5e5; border-radius: 8px;192  }193</style>194</head>195<body>196<div id="render-target">197 198  <!-- Status bar -->199  <div class="status-bar">200    <div>6:00</div>201    <div class="status-icons">202      <div class="dot-icon"></div>203      <div class="dot-icon" style="background:#616161;"></div>204      <div class="dot-icon" style="background:#757575;"></div>205      <div class="dot-icon" style="background:#9e9e9e;"></div>206      <div class="wifi"></div>207      <div class="battery"></div>208    </div>209  </div>210 211  <!-- Header -->212  <div class="header">213    <div class="back-btn" aria-label="Back">214      <svg width="48" height="48" viewBox="0 0 24 24">215        <path d="M15.5 19l-7-7 7-7" stroke="#1f1f1f" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>216      </svg>217    </div>218    <div class="title-wrap">219      <div class="title">Honolulu Trip</div>220      <div class="subtitle">Wed, Jan 24 – Fri, Jan 26</div>221    </div>222    <div class="actions">223      <div class="icon-btn" aria-label="More">224        <svg width="44" height="44" viewBox="0 0 24 24" fill="#333">225          <circle cx="12" cy="5" r="2"></circle>226          <circle cx="12" cy="12" r="2"></circle>227          <circle cx="12" cy="19" r="2"></circle>228        </svg>229      </div>230    </div>231  </div>232 233  <!-- Banner placeholder -->234  <div class="banner">[IMG: Honolulu beach skyline]</div>235 236  <!-- Overflow menu -->237  <div class="menu-card">238    <div class="menu-item">Disable notifications</div>239    <div class="menu-item">Edit Trip</div>240    <div class="menu-item">Add event</div>241    <div class="menu-item">Delete Trip</div>242    <div class="menu-item">Merge Trip</div>243  </div>244 245  <!-- Notes section -->246  <div class="content">247    <div class="section-title">Notes</div>248    <div class="note-card">249      <div class="note-body"></div>250      <div class="note-footer">251        <div class="footer-left">252          <svg width="44" height="44" viewBox="0 0 24 24">253            <path d="M12 2C8.7 2 6 4.7 6 8c0 4.2 6 12 6 12s6-7.8 6-12c0-3.3-2.7-6-6-6zm0 8.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z" fill="#0a7285"></path>254          </svg>255        </div>256        <div class="add-btn">Add note</div>257      </div>258    </div>259  </div>260 261  <!-- Bottom navigation -->262  <div class="nav-bar">263    <div class="home-pill"></div>264  </div>265 266</div>267</body>268</html>