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 {9    margin: 0;10    padding: 0;11    background: transparent;12    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, Helvetica, sans-serif;13  }14  #render-target {15    width: 1080px;16    height: 2400px;17    position: relative;18    overflow: hidden;19    background: #ffffff;20  }21 22  /* Top system/status bar */23  .status-bar {24    height: 120px;25    background: #000000;26    width: 100%;27  }28 29  /* App bar */30  .app-bar {31    height: 160px;32    background: #0A8F98; /* teal */33    display: flex;34    align-items: center;35    padding: 0 36px;36    color: #ffffff;37    box-sizing: border-box;38  }39  .app-bar-left {40    display: flex;41    gap: 48px;42    align-items: center;43  }44  .app-bar-right {45    margin-left: auto;46    font-size: 44px;47  }48  .icon {49    width: 72px;50    height: 72px;51  }52 53  /* Main content */54  .content {55    padding: 36px 60px 0 60px;56    box-sizing: border-box;57  }58 59  .hero {60    width: 100%;61    height: 280px;62    background: #E0E0E0;63    border: 1px solid #BDBDBD;64    display: flex;65    align-items: center;66    justify-content: center;67    color: #757575;68    font-size: 36px;69    margin: 36px 0 48px 0;70  }71 72  .label {73    font-size: 42px;74    color: #212121;75    font-weight: 600;76    margin: 18px 0 12px 0;77  }78 79  .value-line {80    font-size: 54px;81    color: #6d6d6d;82    padding-bottom: 12px;83    border-bottom: 4px solid #1f6ea1;84    letter-spacing: 0.2px;85  }86 87  .spacer-xxl {88    height: 60px;89  }90 91  .divider {92    width: 100%;93    height: 2px;94    background: #E5E5E5;95    margin: 60px 0 80px 0;96  }97 98  .btn-primary {99    width: 650px;100    height: 120px;101    margin: 0 auto 0 auto;102    background: #0E5486;103    color: #ffffff;104    border-radius: 8px;105    display: flex;106    align-items: center;107    justify-content: center;108    font-size: 40px;109    font-weight: 700;110    letter-spacing: 2px;111    text-transform: uppercase;112  }113 114  /* On-screen keyboard (visual placeholder) */115  .keyboard {116    position: absolute;117    bottom: 0;118    left: 0;119    width: 1080px;120    height: 760px;121    background: #1a1a1a;122    box-sizing: border-box;123    padding: 24px 16px;124  }125  .keys-row {126    height: 130px;127    margin: 14px 0;128    border-radius: 16px;129    background:130      repeating-linear-gradient(131        to right,132        #2b2b2b 0,133        #2b2b2b 86px,134        #1a1a1a 86px,135        #1a1a1a 106px136      );137    box-shadow: inset 0 0 0 1px #111;138  }139  .keys-row.small {140    height: 110px;141  }142  .keyboard-bottom {143    position: absolute;144    bottom: 18px;145    left: 50%;146    transform: translateX(-50%);147    width: 360px;148    height: 10px;149    background: #e0e0e0;150    border-radius: 6px;151    opacity: 0.6;152  }153</style>154</head>155<body>156<div id="render-target">157  <div class="status-bar"></div>158 159  <div class="app-bar">160    <div class="app-bar-left">161      <!-- Back Arrow -->162      <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">163        <path d="M15 18l-6-6 6-6"></path>164      </svg>165      <!-- Forward Arrow -->166      <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">167        <path d="M9 6l6 6-6 6"></path>168      </svg>169    </div>170    <div class="app-bar-right">Cancel</div>171  </div>172 173  <div class="content">174    <div class="hero">[IMG: Scenic Coastline Banner]</div>175 176    <div class="label">Your Email</div>177    <div class="value-line">dbwscratch.test.id1@gmail.com</div>178 179    <div class="spacer-xxl"></div>180 181    <div class="label">Your Friend’s Email</div>182 183    <div class="divider"></div>184 185    <div class="btn-primary">SHARE ITINERARY</div>186  </div>187 188  <!-- On-screen keyboard placeholder -->189  <div class="keyboard">190    <div class="keys-row"></div>191    <div class="keys-row"></div>192    <div class="keys-row"></div>193    <div class="keys-row small"></div>194    <div class="keyboard-bottom"></div>195  </div>196</div>197</body>198</html>