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>Booking UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; color: #1b2a4d; }9  #render-target {10    width: 1080px; height: 2400px; position: relative; overflow: hidden;11    background: #0f2a66;12  }13  .status-bar {14    height: 110px; background: #4d5e8b; color: #fff; display: flex; align-items: center; padding: 0 40px; font-weight: 600; font-size: 38px;15  }16  .status-right { margin-left: auto; display: flex; align-items: center; gap: 30px; }17  .icon { display: inline-flex; align-items: center; justify-content: center; }18  .header {19    background: #0a2c67; color: #fff; padding: 40px; padding-top: 30px;20    height: 250px;21  }22  .header-row { display: flex; align-items: center; }23  .header-title {24    margin-left: 24px; font-size: 52px; font-weight: 800; letter-spacing: 0.2px;25  }26  .header-sub { margin-left: 88px; margin-top: 12px; font-size: 34px; opacity: 0.9; }27  .share { margin-left: auto; }28  .card {29    position: relative; margin: 30px auto 0; width: 980px; background: #ffffff; border-radius: 28px; box-shadow: 0 12px 24px rgba(0,0,0,0.25);30    padding: 36px 40px;31  }32  .outbound { display: flex; align-items: center; gap: 16px; color: #4d6fbf; font-weight: 700; font-size: 30px; letter-spacing: 1px; }33  .trip-time { margin-top: 18px; font-size: 48px; font-weight: 800; color: #0e1f53; }34  .route-row { display: flex; align-items: center; margin-top: 14px; color: #233d7a; font-size: 38px; }35  .route-row .dash { margin: 0 14px; }36  .route-row .flex-spacer { margin-left: auto; display: flex; align-items: center; gap: 14px; color: #7b8aaa; font-size: 36px; }37  .rail-row { display: flex; align-items: center; margin-top: 18px; color: #63739b; font-size: 32px; }38  .img-ph {39    width: 92px; height: 56px; background: #E0E0E0; border: 1px solid #BDBDBD;40    display: flex; align-items: center; justify-content: center; color: #757575; border-radius: 8px; margin-right: 16px; font-size: 22px;41  }42  .section {43    background: #ffffff; margin-top: 30px; border-top: 1px solid #e9edf5; border-bottom: 1px solid #e9edf5;44  }45  .quick-wrap { display: grid; grid-template-columns: 1fr 360px; gap: 20px; padding: 40px; }46  .quick-title { font-size: 48px; font-weight: 800; color: #0e1f53; }47  .quick-desc { margin-top: 14px; font-size: 36px; color: #4a5a88; line-height: 1.35; max-width: 600px; }48  .illustration {49    width: 360px; height: 210px; background: #E0E0E0; border: 1px solid #BDBDBD; display: flex; align-items: center; justify-content: center; color: #757575; border-radius: 12px;50  }51  .social-row { display: flex; gap: 26px; margin-top: 28px; }52  .btn-outline {53    flex: 1; height: 120px; border: 2px solid #cfd6e6; border-radius: 22px; display: flex; align-items: center; gap: 24px; padding: 0 34px; font-size: 42px; color: #1f2d5c; background: #fff;54  }55  .fb-icon {56    width: 66px; height: 66px; background: #3b5998; color: #fff; border-radius: 8px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; font-size: 46px;57  }58  .g-icon {59    width: 66px; height: 66px; border-radius: 8px; border: 2px solid #cfd6e6; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; color: #ea4335; font-size: 44px; background: #fff;60  }61  .divider { height: 20px; background: #eef1f7; }62  .passenger { background: #ffffff; padding: 36px 40px; }63  .passenger-title-row { display: flex; align-items: center; }64  .passenger-title { font-size: 48px; font-weight: 800; color: #0e1f53; }65  .adult-tag { margin-left: auto; font-size: 34px; color: #8b94ab; font-weight: 700; letter-spacing: 0.5px; }66  .label { margin-top: 34px; font-size: 34px; color: #5a6b91; }67  .field {68    margin-top: 16px; background: #eef0f5; border-radius: 22px; height: 120px; display: flex; align-items: center; padding: 0 36px; font-size: 40px; color: #2d3864;69    border: 1px solid #dfe5f0;70  }71  .bottom-bar {72    position: absolute; bottom: 0; left: 0; width: 1080px; height: 160px; background: #0a2c67; display: flex; align-items: center; justify-content: center;73  }74  .home-pill { width: 400px; height: 16px; background: #e5e6ea; border-radius: 20px; }75</style>76</head>77<body>78<div id="render-target">79 80  <div class="status-bar">81    <div>5:12</div>82    <div class="status-right">83      <svg class="icon" width="40" height="40" viewBox="0 0 24 24"><circle cx="12" cy="12" r="5" fill="#fff"/><path d="M12 1v3M12 20v3M1 12h3M20 12h3M4 4l2 2M18 18l2 2M18 4l2 2M4 18l2 2" stroke="#fff" stroke-width="2" fill="none"/></svg>84      <svg class="icon" width="40" height="40" viewBox="0 0 24 24"><path d="M3 4h18v16H3z" fill="none" stroke="#fff" stroke-width="2"/><path d="M3 8h18" stroke="#fff" stroke-width="2"/><circle cx="6" cy="6" r="1.6" fill="#fff"/></svg>85      <svg class="icon" width="40" height="40" viewBox="0 0 24 24"><path d="M6 2h12v20H6z" fill="none" stroke="#fff" stroke-width="2"/><rect x="10" y="18" width="4" height="2" fill="#fff"/></svg>86    </div>87  </div>88 89  <div class="header">90    <div class="header-row">91      <svg width="56" height="56" viewBox="0 0 24 24">92        <path d="M15 6l-6 6 6 6" stroke="#ffffff" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>93      </svg>94      <div class="header-title">Amsterda... › Rotterdam Centraal</div>95      <div class="share">96        <svg width="54" height="54" viewBox="0 0 24 24">97          <circle cx="6" cy="12" r="2.4" fill="#c8d2ea"/>98          <circle cx="18" cy="6" r="2.4" fill="#c8d2ea"/>99          <circle cx="18" cy="18" r="2.4" fill="#c8d2ea"/>100          <path d="M8.3 11.3l7.2-4.1M8.3 12.7l7.2 4.1" stroke="#c8d2ea" stroke-width="2" fill="none" stroke-linecap="round"/>101        </svg>102      </div>103    </div>104    <div class="header-sub">Fri, Oct 20, 1 passenger</div>105  </div>106 107  <div class="card">108    <div class="outbound">109      <svg width="34" height="34" viewBox="0 0 24 24">110        <circle cx="12" cy="12" r="11" fill="#e9f2ff" stroke="#4d6fbf" stroke-width="2"/>111        <path d="M8 12l3 3 5-6" stroke="#4d6fbf" stroke-width="2" fill="none" stroke-linecap="round"/>112      </svg>113      <span>OUTBOUND</span>114    </div>115    <div class="trip-time">Fri, Oct 20  1:38 PM – 2:19 PM</div>116    <div class="route-row">117      <div>Amsterdam Centraal</div>118      <div class="dash">-</div>119      <div>Rotterdam Centraal</div>120      <div class="flex-spacer">121        <div>0h41m • 0 transfers</div>122        <svg width="28" height="28" viewBox="0 0 24 24">123          <path d="M6 9l6 6 6-6" stroke="#8795b5" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>124        </svg>125      </div>126    </div>127    <div class="rail-row">128      <div class="img-ph">[IMG: Rail logo]</div>129      <div>Flight partially operated by NS International | IC Direct</div>130    </div>131  </div>132 133  <div class="divider"></div>134 135  <div class="section">136    <div class="quick-wrap">137      <div>138        <div class="quick-title">Quick sign up</div>139        <div class="quick-desc">Skip filling in all your details by signing up through Facebook or Google</div>140        <div class="social-row">141          <div class="btn-outline">142            <span class="fb-icon">f</span>143            <span>Facebook</span>144          </div>145          <div class="btn-outline">146            <span class="g-icon">G</span>147            <span>Google</span>148          </div>149        </div>150      </div>151      <div class="illustration">[IMG: Traveler illustration]</div>152    </div>153  </div>154 155  <div class="divider"></div>156 157  <div class="passenger">158    <div class="passenger-title-row">159      <div class="passenger-title">Main passenger</div>160      <div class="adult-tag">ADULT</div>161    </div>162 163    <div class="label">Email address *</div>164    <div class="field">natalie.larson1998@gmail.com</div>165 166    <div class="label">First name *</div>167    <div class="field">Natalie</div>168 169    <div class="label">Last name *</div>170    <div class="field">Lasrson</div>171  </div>172 173  <div class="bottom-bar">174    <div class="home-pill"></div>175  </div>176 177</div>178</body>179</html>