GD-ML/AndroidCode
13.4k
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>Flight Fare Selection</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; color: #202124; }9 #render-target {10 width: 1080px; height: 2400px; position: relative; overflow: hidden;11 background: #FFFFFF;12 }13 14 /* Status bar */15 .status-bar {16 height: 120px;17 padding: 40px 44px 0 44px;18 display: flex; align-items: center; justify-content: space-between;19 color: #5f6368; font-size: 32px;20 }21 .status-icons { display: flex; gap: 24px; align-items: center; }22 .dot { width: 10px; height: 10px; background: #5f6368; border-radius: 50%; display: inline-block; }23 24 /* Close */25 .top-row { display: flex; align-items: center; padding: 24px 44px; }26 .close-btn {27 width: 72px; height: 72px; display: flex; align-items: center; justify-content: center;28 color: #1a73e8;29 }30 .close-btn svg { width: 36px; height: 36px; }31 32 /* Header card */33 .header {34 padding: 8px 44px 32px 44px;35 border-top: 1px solid #E0E3E7;36 }37 .route-title {38 font-size: 64px; font-weight: 700; letter-spacing: 0.2px; margin: 24px 0 18px;39 color: #202a44;40 }41 .airline-row { display: flex; align-items: center; gap: 18px; color: #5f6368; font-size: 30px; }42 .img-ph {43 width: 48px; height: 48px; background: #E0E0E0; border: 1px solid #BDBDBD; display: flex;44 align-items: center; justify-content: center; color: #757575; font-size: 18px; border-radius: 6px;45 }46 .link { color: #1a73e8; font-size: 32px; margin-top: 22px; }47 48 /* Section intro */49 .section {50 border-top: 1px solid #E0E3E7;51 padding: 48px 44px 0 44px;52 }53 .section h2 {54 margin: 0 0 16px; font-size: 40px; font-weight: 700; color: #202124;55 }56 .section p { margin: 0; font-size: 30px; color: #5f6368; line-height: 1.4; }57 58 /* Cards area */59 .cards { display: flex; gap: 32px; padding: 36px 24px 120px 24px; }60 .card {61 width: 920px; background: #fff; border: 2px solid #E7E9ED; border-radius: 28px;62 box-shadow: 0 2px 6px rgba(0,0,0,0.06);63 padding: 44px;64 }65 .price-row { display: flex; align-items: baseline; justify-content: space-between; }66 .price-big { font-size: 56px; font-weight: 800; color: #202124; }67 .price-sub { font-size: 28px; color: #5f6368; margin-top: 8px; }68 69 .fare-title { margin-top: 24px; font-size: 36px; font-weight: 700; }70 .fare-sub { font-size: 30px; color: #5f6368; margin-top: 10px; }71 72 .features { margin-top: 26px; }73 .feature { display: flex; gap: 16px; align-items: center; font-size: 30px; color: #202124; margin: 16px 0; }74 .feature .muted { color: #5f6368; }75 .coin {76 width: 28px; height: 28px;77 }78 .cross { font-size: 36px; color: #5f6368; line-height: 1; }79 80 .hr { height: 2px; background: #E7E9ED; margin: 38px 0; }81 82 .carry { display: flex; justify-content: space-between; align-items: center; font-size: 30px; }83 .carry .muted { color: #5f6368; }84 85 .protection {86 display: flex; justify-content: space-between; align-items: center; margin-top: 28px;87 }88 .left-protection { display: flex; align-items: center; gap: 16px; }89 .shield { width: 34px; height: 34px; }90 .prot-title { font-size: 32px; font-weight: 700; }91 .prot-price { font-size: 30px; color: #202124; }92 .prot-link { color: #1a73e8; font-size: 30px; margin-top: 10px; }93 94 .toggle {95 width: 120px; height: 56px; border-radius: 28px; background: #C9CDD3; position: relative; display: inline-block;96 }97 .toggle .knob {98 position: absolute; right: 8px; top: 8px; width: 40px; height: 40px;99 background: #ECEEF2; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #8a8d92; font-size: 26px;100 box-shadow: 0 1px 2px rgba(0,0,0,0.2);101 }102 103 .select-btn {104 margin-top: 36px; width: 100%; height: 100px; background: #3066F6; color: #fff;105 border: none; border-radius: 22px; font-size: 36px; font-weight: 700; cursor: pointer;106 }107 108 /* Partial second card just for visual continuity */109 .card.secondary { opacity: 0.85; }110 111</style>112</head>113<body>114<div id="render-target">115 116 <div class="status-bar">117 <div>4:10</div>118 <div class="status-icons">119 <span class="dot"></span>120 <span class="dot"></span>121 <span class="dot"></span>122 <span>📶</span>123 <span>🔋</span>124 </div>125 </div>126 127 <div class="top-row">128 <div class="close-btn" aria-label="Close">129 <svg viewBox="0 0 24 24">130 <path d="M6 6 L18 18 M18 6 L6 18" stroke="#1a73e8" stroke-width="2.5" stroke-linecap="round" fill="none"/>131 </svg>132 </div>133 </div>134 135 <div class="header">136 <div class="route-title">Mumbai to Abu Dhabi</div>137 <div class="airline-row">138 <div class="img-ph">[IMG]</div>139 <div>Etihad Airways • Fri, Jul 28</div>140 </div>141 <div class="link">Show details</div>142 </div>143 144 <div class="section">145 <h2>Select your fare to Abu Dhabi</h2>146 <p>The fare class for this flight is the same as the fare class for your flight from AUH to BOM</p>147 </div>148 149 <div class="cards">150 <!-- Main card -->151 <div class="card">152 <div class="price-row">153 <div>154 <div class="price-big">+$27</div>155 <div class="price-sub">$546.10 roundtrip for 2 travelers</div>156 </div>157 </div>158 159 <div class="fare-title">Economy Hbo</div>160 <div class="fare-sub">Cabin: Economy</div>161 162 <div class="features">163 <div class="feature">164 <svg class="coin" viewBox="0 0 24 24">165 <circle cx="12" cy="12" r="10" fill="#e9edf3" stroke="#9aa0a6" stroke-width="1.5"/>166 <text x="12" y="15" font-size="12" text-anchor="middle" fill="#5f6368">$</text>167 </svg>168 <span>Seat choice</span>169 </div>170 <div class="feature">171 <span class="cross">×</span>172 <span class="muted">Cancellation</span>173 </div>174 <div class="feature">175 <svg class="coin" viewBox="0 0 24 24">176 <circle cx="12" cy="12" r="10" fill="#e9edf3" stroke="#9aa0a6" stroke-width="1.5"/>177 <text x="12" y="15" font-size="12" text-anchor="middle" fill="#5f6368">$</text>178 </svg>179 <span>Changes</span>180 </div>181 <div class="link">Show more</div>182 </div>183 184 <div class="hr"></div>185 186 <div class="carry">187 <div>Carry-on:</div>188 <div class="muted">Included up to 15 lb</div>189 </div>190 191 <div class="hr"></div>192 193 <div class="protection">194 <div class="left-protection">195 <svg class="shield" viewBox="0 0 24 24">196 <path d="M12 2 L19 5 V12c0 5-4.5 8-7 9-2.5-1-7-4-7-9V5z" fill="#2b3a67" opacity="0.12" stroke="#2b3a67" stroke-width="1.5"/>197 </svg>198 <div>199 <div class="prot-title">Price Drop Protection</div>200 <div class="prot-link">How it works</div>201 </div>202 </div>203 <div class="prot-price">$11</div>204 <div class="toggle">205 <div class="knob">✕</div>206 </div>207 </div>208 209 <button class="select-btn">Select</button>210 </div>211 212 <!-- Secondary (partially visible) card stub -->213 <div class="card secondary">214 <div class="price-row">215 <div>216 <div class="price-big">+$64</div>217 <div class="price-sub">$600.00 roundtrip for 2 travelers</div>218 </div>219 </div>220 <div class="fare-title">Economy</div>221 <div class="fare-sub">Cabin: Economy</div>222 <div class="features">223 <div class="feature">224 <svg class="coin" viewBox="0 0 24 24">225 <circle cx="12" cy="12" r="10" fill="#e9edf3" stroke="#9aa0a6" stroke-width="1.5"/>226 <text x="12" y="15" font-size="12" text-anchor="middle" fill="#5f6368">$</text>227 </svg>228 <span>Seat choice</span>229 </div>230 <div class="feature">231 <svg class="coin" viewBox="0 0 24 24">232 <circle cx="12" cy="12" r="10" fill="#e9edf3" stroke="#9aa0a6" stroke-width="1.5"/>233 <text x="12" y="15" font-size="12" text-anchor="middle" fill="#5f6368">$</text>234 </svg>235 <span>Changes</span>236 </div>237 <div class="link">Show more</div>238 </div>239 <div class="hr"></div>240 <button class="select-btn">Select</button>241 </div>242 </div>243 244</div>245</body>246</html>