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>Create a Trip</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #ffffff;15    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;16    color: #111;17  }18 19  /* Status bar (mock) */20  .status-bar {21    height: 100px;22    background: #0e1215;23    color: #e8f0f7;24    display: flex;25    align-items: center;26    padding: 0 36px;27    font-size: 36px;28    box-sizing: border-box;29  }30  .status-bar .right {31    margin-left: auto;32    display: flex;33    align-items: center;34    gap: 18px;35  }36  .icon-dot {37    width: 20px;38    height: 20px;39    background: #d8dee4;40    border-radius: 50%;41    opacity: 0.9;42  }43  .battery {44    width: 40px;45    height: 20px;46    border: 2px solid #d8dee4;47    border-radius: 4px;48    position: relative;49  }50  .battery::after {51    content: "";52    position: absolute;53    right: -6px;54    top: 5px;55    width: 4px;56    height: 10px;57    background: #d8dee4;58    border-radius: 1px;59  }60  .battery .level {61    height: 100%;62    width: 70%;63    background: #d8dee4;64  }65 66  /* Header */67  .app-bar {68    height: 160px;69    display: flex;70    align-items: center;71    padding: 0 36px;72    box-sizing: border-box;73    background: #ffffff;74    box-shadow: 0 1px 0 rgba(0,0,0,0.08);75  }76  .app-bar .title {77    flex: 1;78    text-align: center;79    font-size: 54px;80    font-weight: 700;81    color: #1a1a1a;82    letter-spacing: -0.2px;83  }84  .app-bar .left,85  .app-bar .right {86    width: 160px;87    display: flex;88    align-items: center;89    justify-content: center;90  }91  .app-bar .right .save {92    color: #1e88e5;93    font-size: 42px;94    font-weight: 600;95  }96  .icon-close {97    width: 56px;98    height: 56px;99  }100 101  /* Form area */102  .content {103    padding: 24px 36px 0 36px;104    box-sizing: border-box;105  }106  .field {107    padding: 28px 0 24px 0;108    border-bottom: 2px solid #eceff1;109  }110  .placeholder {111    font-size: 42px;112    color: #9aa4ab;113  }114  .label {115    font-size: 34px;116    color: #9aa4ab;117    margin-bottom: 8px;118  }119  .value {120    font-size: 48px;121    color: #1f2933;122    font-weight: 500;123  }124 125  /* Spacer after header divider */126  .content .field + .field {127    margin-top: 8px;128  }129 130  /* Bottom gesture bar (mock) */131  .nav-area {132    position: absolute;133    bottom: 0;134    left: 0;135    width: 1080px;136    height: 120px;137    background: #000000;138    display: flex;139    align-items: center;140    justify-content: center;141  }142  .home-pill {143    width: 260px;144    height: 12px;145    background: #d1d5db;146    border-radius: 8px;147    opacity: 0.9;148  }149</style>150</head>151<body>152<div id="render-target">153  <!-- Status bar -->154  <div class="status-bar">155    <div class="left-time">5:57</div>156    <div class="right">157      <div class="icon-dot"></div>158      <div class="icon-dot" style="opacity:0.6;"></div>159      <div class="icon-dot" style="width:22px;height:22px;"></div>160      <div class="battery"><div class="level"></div></div>161    </div>162  </div>163 164  <!-- App bar -->165  <div class="app-bar">166    <div class="left">167      <svg class="icon-close" viewBox="0 0 24 24" fill="none" stroke="#1f2933" stroke-width="2.2" stroke-linecap="round">168        <line x1="5" y1="5" x2="19" y2="19"></line>169        <line x1="19" y1="5" x2="5" y2="19"></line>170      </svg>171    </div>172    <div class="title">Create a Trip</div>173    <div class="right"><div class="save">Save</div></div>174  </div>175 176  <!-- Content -->177  <div class="content">178    <div class="field">179      <div class="placeholder">Destination</div>180    </div>181 182    <div class="field">183      <div class="placeholder">Trip name</div>184    </div>185 186    <div class="field">187      <div class="label">Start date</div>188      <div class="value">Wed Jan 24, 2024</div>189    </div>190 191    <div class="field">192      <div class="label">End date</div>193      <div class="value">Fri Jan 26, 2024</div>194    </div>195  </div>196 197  <!-- Bottom gesture/navigation bar -->198  <div class="nav-area">199    <div class="home-pill"></div>200  </div>201</div>202</body>203</html>