GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<style>7  body { margin: 0; padding: 0; background: transparent; }8  #render-target {9    width: 1080px; height: 2400px; position: relative; overflow: hidden;10    background: #0b1f23; color: #111;11    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;12  }13 14  /* Top browser/status area */15  .status-bar {16    position: absolute; top: 0; left: 0; width: 1080px; height: 120px;17    color: #ffffff; padding: 24px 32px; display: flex; justify-content: space-between; align-items: center;18    font-weight: 600;19  }20  .url-bar { position: absolute; top: 120px; left: 30px; right: 30px; height: 92px; display: flex; align-items: center; gap: 12px; }21  .url-pill {22    background: #174a4d; color: #c7e5e6; border-radius: 46px; height: 92px; flex: 1;23    display: flex; align-items: center; padding: 0 32px; gap: 20px; font-size: 30px;24  }25  .icon-btn { width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; color: #c7e5e6; }26 27  /* Dark header */28  .dark-header {29    position: absolute; top: 240px; left: 0; width: 1080px; height: 180px;30    background: #2e2a2c; color: #fff; display: flex; align-items: center; justify-content: center;31  }32  .dark-header .title { font-size: 44px; font-weight: 800; }33  .dark-header .back { position: absolute; left: 32px; }34  .dark-header .share { position: absolute; right: 32px; opacity: 0.85; }35 36  /* Main light content area */37  .content { position: absolute; top: 420px; left: 0; width: 1080px; height: 1980px; background: #f5f5f5; }38  .card { background: #fff; border-radius: 18px; box-shadow: 0 4px 10px rgba(0,0,0,0.12); padding: 32px; }39 40  /* Journey card overlaps header */41  .journey-card { margin: -70px 32px 24px 32px; position: relative; }42  .badge { display: inline-flex; align-items: center; gap: 12px; color: #ff2d8a; font-weight: 700; letter-spacing: 1px; font-size: 26px; }43  .badge .dot { width: 20px; height: 20px; background: #ff2d8a; border-radius: 50%; }44  .journey-title { font-size: 40px; font-weight: 800; margin-top: 12px; }45  .journey-sub { color: #757575; font-size: 28px; margin-top: 6px; }46  .small-tag { display: inline-block; background: #ff2d8a; color: #fff; border-radius: 6px; padding: 4px 8px; font-weight: 700; margin-right: 10px; }47  .small-gray { color: #9e9e9e; }48 49  .section { padding: 28px 32px; }50  .section-title { font-size: 38px; font-weight: 800; margin: 22px 0; }51 52  /* Class options */53  .option-row { display: flex; gap: 24px; }54  .option-card { flex: 1; border-radius: 18px; border: 2px solid #e0e0e0; background: #fff; padding: 28px; }55  .option-card.selected { background: #ffe3ef; border-color: #ff2d8a; }56  .opt-title { font-size: 34px; font-weight: 800; color: #666; }57  .option-card.selected .opt-title { color: #ff2d8a; }58  .price { margin-top: 18px; font-size: 32px; font-weight: 700; color: #333; }59 60  .helper { color: #777; font-size: 28px; padding: 0 32px 20px 32px; }61 62  /* Fare options */63  .fare-row { display: flex; gap: 24px; padding: 0 32px; }64  .fare-card { flex: 1; border-radius: 18px; border: 2px solid #e0e0e0; background: #fff; padding: 28px; min-height: 260px; }65  .fare-card.selected { background: #ffe3ef; border-color: #ff2d8a; }66  .fare-title { font-size: 32px; font-weight: 800; color: #666; }67  .fare-card.selected .fare-title { color: #ff2d8a; }68  .fare-list { margin-top: 16px; color: #777; font-size: 28px; display: flex; flex-direction: column; gap: 10px; }69  .fare-price { margin-top: 20px; font-size: 32px; font-weight: 800; color: #333; }70  .fare-terms { padding: 24px 32px; font-size: 34px; font-weight: 800; color: #333; }71 72  /* CTA button */73  .cta {74    position: absolute; bottom: 110px; left: 32px; width: 1016px; height: 120px;75    background: #ff007a; border-radius: 16px; display: flex; align-items: center; justify-content: center;76    color: #fff; font-size: 36px; font-weight: 800; box-shadow: 0 6px 14px rgba(255,0,122,0.35);77  }78 79  .icon { width: 36px; height: 36px; vertical-align: middle; margin-right: 8px; }80</style>81</head>82<body>83<div id="render-target">84 85  <!-- Status and URL area -->86  <div class="status-bar">87    <div>10:38</div>88    <div>100%</div>89  </div>90  <div class="url-bar">91    <div class="icon-btn">92      <svg viewBox="0 0 24 24" width="36" height="36" fill="#c7e5e6"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/></svg>93    </div>94    <div class="url-pill">95      <svg viewBox="0 0 24 24" width="32" height="32" fill="#c7e5e6"><path d="M10 4a6 6 0 00-6 6v4a6 6 0 106 6h4a6 6 0 000-12h-4zm0 2h4a4 4 0 010 8h-4a4 4 0 110-8z"/></svg>96      <span>rome2rio.omio.com/app...</span>97    </div>98    <div class="icon-btn">99      <svg viewBox="0 0 24 24" width="32" height="32" fill="none" stroke="#c7e5e6" stroke-width="2"><path d="M12 5v14m7-7H5"/></svg>100    </div>101    <div class="icon-btn">102      <svg viewBox="0 0 24 24" width="32" height="32" fill="none" stroke="#c7e5e6" stroke-width="2"><circle cx="12" cy="12" r="9"/><text x="12" y="16" font-size="12" text-anchor="middle" fill="#c7e5e6">5</text></svg>103    </div>104    <div class="icon-btn">105      <svg viewBox="0 0 24 24" width="32" height="32" fill="#c7e5e6"><path d="M4 6h16v2H4zm0 5h16v2H4zm0 5h16v2H4z"/></svg>106    </div>107  </div>108 109  <!-- Dark header -->110  <div class="dark-header">111    <div class="back">112      <svg viewBox="0 0 24 24" width="40" height="40" fill="#fff"><path d="M15 6l-6 6 6 6"/></svg>113    </div>114    <div class="title">Train ticket options</div>115    <div class="share">116      <svg viewBox="0 0 24 24" width="40" height="40" fill="#bdbdbd"><path d="M18 8a3 3 0 10-2.9-3.7L8.8 8.6a3 3 0 100 6.8l6.3 4.3A3 3 0 1017 18l-6.3-4.3a3 3 0 000-3.4l6.3-4.3A3 3 0 0018 8z"/></svg>117    </div>118  </div>119 120  <!-- Main content -->121  <div class="content">122    <div class="journey-card card">123      <div class="badge"><span class="dot"></span> OUTBOUND</div>124      <div class="journey-title">Fri, Nov 03   8:04 AM – 1:53 PM</div>125      <div class="journey-sub">Berlin Hbf  –  Neu-Ulm station</div>126      <div class="journey-sub" style="margin-top: 10px;">127        <span class="small-tag">DB</span>128        <span class="small-gray">5h49m • 2 transfers</span>129      </div>130    </div>131 132    <div class="section">133      <div class="section-title">Select your class</div>134      <div class="option-row">135        <div class="option-card selected">136          <div class="opt-title">2nd Class</div>137          <div class="price">+₹0</div>138        </div>139        <div class="option-card">140          <div class="opt-title">1st Class</div>141          <div class="price">+₹7,605.87</div>142        </div>143      </div>144    </div>145 146    <div class="helper">You also get<br>Restaurant service, power outlets and free Wi‑Fi.</div>147 148    <div class="section">149      <div class="section-title">Select your fare</div>150    </div>151 152    <div class="fare-row">153      <div class="fare-card selected">154        <div class="fare-title">Super Saver Fare</div>155        <div class="fare-list">156          <div>157            <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#ff2d8a" stroke-width="2">158              <circle cx="12" cy="12" r="10"></circle>159              <path d="M12 7v6"></path>160              <circle cx="12" cy="16" r="1.5" fill="#ff2d8a"></circle>161            </svg>162            Non refundable163          </div>164          <div>165            <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#ff2d8a" stroke-width="2">166              <path d="M5 5l14 14M19 5L5 19"></path>167            </svg>168            Non exchangeable169          </div>170        </div>171        <div class="fare-price">+₹0</div>172      </div>173 174      <div class="fare-card">175        <div class="fare-title">Savings fare</div>176        <div class="fare-list">177          <div>178            <svg class="icon" viewBox="0 0 24 24" fill="#777">179              <path d="M12 4l4 4-4 4-4-4 4-4zm-6 12h12v2H6z"></path>180            </svg>181            Fully refundable182          </div>183          <div>184            <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#777" stroke-width="2">185              <path d="M4 12h16M12 4v16"></path>186            </svg>187            Semi exchangeable188          </div>189        </div>190        <div class="fare-price">+₹972.84</div>191      </div>192    </div>193 194    <div class="fare-terms">Fare terms</div>195  </div>196 197  <!-- CTA -->198  <div class="cta">Go to passenger details</div>199 200</div>201</body>202</html>