GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4  <meta charset="UTF-8">5  <title>Share Itinerary UI</title>6  <style>7    body { margin: 0; padding: 0; background: transparent; }8    #render-target {9      width: 1080px;10      height: 2400px;11      position: relative;12      overflow: hidden;13      background: #ffffff;14      font-family: Arial, Helvetica, sans-serif;15      color: #212121;16    }17    /* Top bars */18    .status-bar {19      position: absolute;20      top: 0;21      left: 0;22      width: 100%;23      height: 120px;24      background: #000000;25    }26    .app-bar {27      position: absolute;28      top: 120px;29      left: 0;30      width: 100%;31      height: 190px;32      background: #0097A7;33      color: #ffffff;34      box-sizing: border-box;35      padding: 0 40px;36      display: flex;37      align-items: center;38    }39    .left-icons {40      display: flex;41      gap: 52px;42      align-items: center;43    }44    .icon-btn {45      width: 72px;46      height: 72px;47      display: inline-flex;48      align-items: center;49      justify-content: center;50    }51    .icon-btn svg { width: 56px; height: 56px; fill: #ffffff; }52    .cancel {53      margin-left: auto;54      font-size: 46px;55      font-weight: 500;56      letter-spacing: 0.2px;57    }58 59    /* Content */60    .content {61      position: absolute;62      top: 310px; /* below app bar */63      left: 0;64      right: 0;65      bottom: 760px; /* room for keyboard overlay */66      background: #ffffff;67      overflow: hidden;68    }69    .inner {70      padding: 50px 56px 0 56px;71      box-sizing: border-box;72    }73    .image-placeholder {74      width: 968px;75      height: 300px;76      background: #E0E0E0;77      border: 1px solid #BDBDBD;78      margin: 10px auto 60px auto;79      display: flex;80      align-items: center;81      justify-content: center;82      color: #757575;83      font-size: 34px;84      letter-spacing: 0.2px;85    }86    .field {87      width: 968px;88      margin: 0 auto 36px auto;89    }90    .field label {91      display: block;92      font-size: 42px;93      margin-bottom: 18px;94      color: #222222;95    }96    .value {97      font-size: 54px;98      color: #555555;99      padding-bottom: 16px;100      border-bottom: 3px solid #2E7ABF;101      line-height: 1.15;102      word-break: break-all;103    }104    .empty {105      height: 72px;106      border-bottom: 3px solid #B0BEC5;107    }108    .divider {109      width: 968px;110      height: 2px;111      background: #ECEFF1;112      margin: 80px auto;113    }114    .primary-btn {115      width: 640px;116      height: 120px;117      margin: 0 auto;118      background: #0B4D79;119      color: #ffffff;120      border-radius: 6px;121      display: flex;122      align-items: center;123      justify-content: center;124      text-transform: uppercase;125      font-weight: 700;126      font-size: 40px;127      letter-spacing: 2px;128    }129 130    /* Keyboard overlay (visual approximation) */131    .keyboard {132      position: absolute;133      left: 0;134      bottom: 0;135      width: 100%;136      height: 760px;137      background: #1B1B1B;138      border-top: 1px solid #333;139      box-sizing: border-box;140      padding: 28px 24px;141    }142    .kb-row {143      display: grid;144      grid-template-columns: repeat(10, 1fr);145      gap: 14px;146      margin-bottom: 18px;147    }148    .key {149      height: 95px;150      background: #2A2A2A;151      border-radius: 14px;152    }153    .kb-bar {154      width: 780px;155      height: 120px;156      background: #2A2A2A;157      border-radius: 26px;158      margin: 18px auto 0 auto;159    }160  </style>161</head>162<body>163  <div id="render-target">164    <div class="status-bar"></div>165 166    <div class="app-bar">167      <div class="left-icons">168        <div class="icon-btn" aria-label="Back">169          <svg viewBox="0 0 24 24">170            <path d="M15.5 5l-7 7 7 7-1.5 1.5L5.5 12l8.5-8.5L15.5 5z"/>171          </svg>172        </div>173        <div class="icon-btn" aria-label="Forward">174          <sv