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>Share Itinerary</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: Arial, Helvetica, sans-serif;16    color: #222;17  }18  /* Top App Bar */19  .appbar {20    position: absolute;21    top: 0;22    left: 0;23    width: 1080px;24    height: 160px;25    background: #028C94;26    display: flex;27    align-items: center;28    padding: 0 36px;29    box-sizing: border-box;30  }31  .nav-icons {32    display: flex;33    gap: 64px;34    align-items: center;35  }36  .nav-icon {37    width: 72px;38    height: 72px;39    fill: none;40    stroke: #ffffff;41    stroke-width: 40;42  }43  .appbar .cancel {44    margin-left: auto;45    color: #ffffff;46    font-size: 48px;47    font-weight: 600;48  }49 50  /* Content */51  .content {52    position: absolute;53    top: 160px;54    left: 0;55    right: 0;56    bottom: 0;57    padding: 56px;58    box-sizing: border-box;59    overflow: hidden;60  }61 62  .hero {63    width: 968px;64    height: 320px;65    background: #E0E0E0;66    border: 1px solid #BDBDBD;67    display: flex;68    justify-content: center;69    align-items: center;70    color: #757575;71    font-size: 36px;72    margin-bottom: 64px;73  }74 75  .field {76    margin-bottom: 56px;77  }78  .label {79    font-size: 42px;80    font-weight: 600;81    margin-bottom: 20px;82  }83  .input {84    width: 968px;85    font-size: 46px;86    color: #777777;87    padding: 18px 0 22px;88    border: none;89    border-bottom: 2px solid #DDDDDD;90    outline: none;91    background: transparent;92  }93  .input.active {94    border-bottom: 4px solid #1E76A8;95    color: #777777;96  }97 98  .cta-wrap {99    width: 100%;100    display: flex;101    justify-content: center;102    margin-top: 80px;103  }104  .cta {105    width: 640px;106    height: 120px;107    background: #0B4D7A;108    color: #ffffff;109    font-size: 44px;110    font-weight: 800;111    letter-spacing: 1px;112    border-radius: 8px;113    display: flex;114    align-items: center;115    justify-content: center;116  }117 118  /* Keyboard mock */119  .keyboard {120    position: absolute;121    bottom: 0;122    left: 0;123    width: 1080px;124    height: 860px;125    background: #151515;126    border-top: 1px solid #2a2a2a;127    box-sizing: border-box;128    padding: 28px 24px;129  }130  .kbd-top {131    display: flex;132    gap: 28px;133    margin-bottom: 28px;134  }135  .kbd-top .icon {136    width: 96px;137    height: 96px;138    background: #2a2a2a;139    border-radius: 24px;140  }141  .key-row {142    display: grid;143    grid-template-columns: repeat(10, 1fr);144    gap: 14px;145    margin-bottom: 18px;146  }147  .key {148    height: 120px;149    background: #2a2a2a;150    border-radius: 16px;151  }152  .key.wide { grid-column: span 2; }153  .key.space { grid-column: span 5; }154 155  .kbd-bottom {156    display: grid;157    grid-template-columns: 150px 1fr 150px;158    gap: 14px;159    margin-top: 22px;160  }161  .bar {162    height: 14px;163    background: #ECECEC;164    width: 220px;165    border-radius: 7px;166    position: absolute;167    bottom: 20px;168    left: 50%;169    transform: translateX(-50%);170    opacity: 0.8;171  }172</style>173</head>174<body>175<div id="render-target">176  <div class="appbar">177    <div class="nav-icons">178      <!-- Back arrow -->179      <svg class="nav-icon" viewBox="0 0 100 100">180        <path d="M60 20 L30 50 L60 80" />181      </svg>182      <!-- Forward arrow -->183      <svg class="nav-icon" viewBox="0 0 100 100">184        <path d="M40 20 L70 50 L40 80" />185      </svg>186    </div>187    <div class="cancel">Cancel</div>188  </div>189 190  <div class="content">191    <div class="hero">[IMG: Scenic Coastal Landscape]</div>192 193    <div class="field">194      <div class="label">Your Email</div>195      <input class="input" type="text" value="dbwscratch.test.id1@gmail.com">196    </div>197 198    <div class="field">199      <div class="label">Your Friend’s Email</div>200      <input class="input active" type="text" value="dbwscratch.test.id1@gmail.com">201    </div>202 203    <div class="cta-wrap">204      <div class="cta">SHARE ITINERARY</div>205    </div>206  </div>207 208  <!-- Keyboard mock -->209  <div class="keyboard">210    <div class="kbd-top">211      <div class="icon"></div>212      <div class="icon"></div>213      <div class="icon"></div>214      <div class="icon"></div>215      <div class="icon"></div>216    </div>217    <div class="key-row">218      <div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div>219      <div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div>220    </div>221    <div class="key-row">222      <div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div>223      <div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div>224    </div>225    <div class="key-row">226      <div class="key wide"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div>227      <div class="key"></div><div class="key"></div><div class="key"></div><div class="key wide"></div>228    </div>229    <div class="kbd-bottom">230      <div class="key wide"></div>231      <div class="key space"></div>232      <div class="key wide"></div>233    </div>234  </div>235 236  <div class="bar"></div>237</div>238</body>239</html>