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>Save with bundles</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #ffffff;15 }16 .scroll-area{17 position:absolute; inset:0;18 overflow-y: auto;19 -webkit-overflow-scrolling: touch;20 }21 /* Top status bar (light mock) */22 .status-bar{23 height: 84px; padding: 0 36px; display:flex; align-items:center; color:#6b7280; font-size:30px;24 }25 .status-right{ margin-left:auto; display:flex; gap:22px; align-items:center; }26 /* App bar */27 .app-bar{28 height: 126px; display:flex; align-items:center; padding: 0 36px; border-bottom:1px solid #eee;29 background:#fff; position: sticky; top: 0; z-index: 5;30 }31 .app-title{ font-size: 48px; font-weight: 600; color:#1f2937; margin-left:18px; }32 .app-actions{ margin-left:auto; display:flex; gap:26px; }33 .icon-btn{ width:72px; height:72px; display:flex; align-items:center; justify-content:center; border-radius:50%; }34 /* Intro block */35 .intro{ padding:40px 40px 20px 40px; }36 .intro h1{ margin:0 0 16px 0; font-size:54px; line-height:1.2; color:#111827; font-weight:700; }37 .intro p{ margin:0; font-size:34px; line-height:1.5; color:#6b7280; }38 /* Cards */39 .bundle-card{40 margin: 26px 36px;41 background:#fff;42 border-radius:28px;43 box-shadow: 0 8px 24px rgba(0,0,0,0.06), 0 2px 6px rgba(0,0,0,0.05);44 border:1px solid #eee;45 padding:36px;46 }47 .bundle-header{48 display:flex; align-items:flex-start; gap:28px; position:relative;49 }50 .bundle-title{51 font-size:64px; line-height:1; font-weight:800;52 }53 .bundle-title.light{ color:#e4572e; }54 .bundle-title.purple{ color:#5e35b1; }55 .illus{56 margin-left:auto;57 width:250px; height:120px; background:#E0E0E0; border:1px solid #BDBDBD; border-radius:12px;58 display:flex; align-items:center; justify-content:center; color:#757575; font-size:26px;59 }60 .discount-badge{61 position:absolute; right:8px; top:-12px;62 width:128px; height:128px; border-radius:50%;63 background:#fff; display:flex; align-items:center; justify-content:center;64 box-shadow: 0 10px 24px rgba(0,0,0,0.12);65 font-size:44px; font-weight:700; color:#e4572e;66 }67 .discount-badge.purple{ color:#5e35b1; }68 .included{ margin-top:24px; color:#6b7280; font-size:34px; }69 .feature{70 display:flex; align-items:flex-start; gap:22px; padding:30px 0;71 border-top:1px solid #e5e7eb;72 }73 .feature:first-of-type{ border-top:1px solid #e5e7eb; }74 .feat-icon{75 width:52px; height:52px; border-radius:26px; display:flex; align-items:center; justify-content:center; color:#374151;76 background:#f3f4f6;77 }78 .feat-text{ flex:1; font-size:38px; color:#111827; }79 .feat-text b{ font-weight:800; }80 .chev{ width:40px; height:40px; opacity:.6; }81 .pricing{ padding:24px 0 8px 0; border-top:1px solid #e5e7eb; }82 .old-price{ color:#9ca3af; font-size:36px; text-decoration: line-through; margin-bottom:8px; }83 .new-price{ font-size:60px; font-weight:800; color:#111827; }84 .per{ font-size:34px; color:#6b7280; font-weight:500; margin-left:12px; }85 .cta{86 margin-top:22px;87 height:120px; border:none; width:100%;88 border-radius:22px; color:#fff; font-size:40px; font-weight:700;89 background: linear-gradient(90deg, #F5515F 0%, #F58E2F 100%);90 box-shadow: 0 8px 14px rgba(245, 81, 95, 0.35);91 }92 /* Bottom gesture bar (mock) */93 .gesture{ position:sticky; bottom:0; height:90px; display:flex; align-items:center; justify-content:center; }94 .pill{ width:300px; height:10px; background:#d1d5db; border-radius:10px; }95</style>96</head>97<body>98<div id="render-target">99 <div class="scroll-area">100 <!-- Status bar mock -->101 <div class="status-bar">102 <div>8:10</div>103 <div class="status-right">104 <span>83°</span>105 <span>⏱️</span>106 <span>✉️</span>107 <span>•</span>108 <span>📶</span>109 <span>🔋</span>110 </div>111 </div>112 113 <!-- App bar -->114 <div class="app-bar">115 <div class="icon-btn" aria-label="Back">116 <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="#111827" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">117 <path d="M15 18l-6-6 6-6"/>118 </svg>119 </div>120 <div class="app-title">Save with bundles</div>121 <div class="app-actions">122 <div class="icon-btn" aria-label="Share">123 <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="#111827" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">124 <circle cx="18" cy="5" r="3"></circle>125 <circle cx="6" cy="12" r="3"></circle>126 <circle cx="18" cy="19" r="3"></circle>127 <path d="M8.5 12.8l6.5-4.2M8.5 11.2l6.5 4.2"></path>128 </svg>129 </div>130 <div class="icon-btn" aria-label="Help">131 <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="#111827" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">132 <circle cx="12" cy="12" r="10"></circle>133 <path d="M9 9a3 3 0 1 1 5 2c-.7.5-1.4 1-1.4 2.3M12 17h.01"></path>134 </svg>135 </div>136 </div>137 </div>138 139 <!-- Introductory text -->140 <div class="intro">141 <h1>Add a bundle and get an additional discount</h1>142 <p>We bundled our most popular extras so you can have a cheaper, more enjoyable trip.</p>143 </div>144 145 <!-- Light bundle card -->146 <div class="bundle-card">147 <div class="bundle-header">148 <div class="bundle-title light">149 <div>Light</div>150 <div>bundle</div>151 </div>152 <div class="illus">[IMG: Travelers illustration]</div>153 <div class="discount-badge">-7%</div>154 </div>155 156 <div class="included">Included per traveler and trip</div>157 158 <div class="feature" style="border-top:none;">159 <div class="feat-icon" title="info">160 <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#374151" stroke-width="2"><circle cx="12" cy="12" r="9"/><path d="M12 8h.01"/><path d="M11 12h2v5"/></svg>161 </div>162 <div class="feat-text"><b>Limited rescheduling</b> options</div>163 <svg class="chev" viewBox="0 0 24 24" fill="none" stroke="#6b7280" stroke-width="2"><path d="M6 9l6 6 6-6"/></svg>164 </div>165 166 <div class="feature">167 <div class="feat-icon" title="seat">168 <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#374151" stroke-width="2"><path d="M5 7h7v6H5z"/><path d="M14 13h3a2 2 0 0 1 2 2v2H6v-2"/></svg>169 </div>170 <div class="feat-text"><b>Standard</b> reserved seating</div>171 </div>172 173 <div class="feature">174 <div class="feat-icon" title="check">175 <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#374151" stroke-width="2"><path d="M20 6l-11 11-5-5"/></svg>176 </div>177 <div class="feat-text"><b>Instant refund</b> in case of carrier cancellations or delays</div>178 <svg class="chev" viewBox="0 0 24 24" fill="none" stroke="#6b7280" stroke-width="2"><path d="M6 9l6 6 6-6"/></svg>179 </div>180 181 <div class="feature">182 <div class="feat-icon" title="support">183 <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#374151" stroke-width="2"><circle cx="12" cy="12" r="8"/><path d="M8 13v-2a4 4 0 1 1 8 0v2"/><path d="M9 17h6"/></svg>184 </div>185 <div class="feat-text"><b>Plus</b> customer service</div>186 <svg class="chev" viewBox="0 0 24 24" fill="none" stroke="#6b7280" stroke-width="2"><path d="M6 9l6 6 6-6"/></svg>187 </div>188 189 <div class="pricing">190 <div class="old-price">+ CHF109.08</div>191 <div style="display:flex; align-items:baseline;">192 <div class="new-price">+ CHF101.60</div>193 <div class="per">per traveler</div>194 </div>195 </div>196 197 <button class="cta">Continue with Light bundle</button>198 </div>199 200 <!-- Comfort bundle card (partially visible) -->201 <div class="bundle-card" style="margin-bottom:40px;">202 <div class="bundle-header">203 <div class="bundle-title purple">204 <div>Comfort</div>205 <div>bundle</div>206 </div>207 <div class="illus">[IMG: Relaxed traveler illustration]</div>208 <div class="discount-badge purple">-11%</div>209 </div>210 211 <div class="included">Included per traveler and trip</div>212 213 <div class="feature" style="border-top:none;">214 <div class="feat-icon">215 <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#374151" stroke-width="2"><circle cx="12" cy="12" r="9"/><path d="M12 6v6l4 2"/></svg>216 </div>217 <div class="feat-text"><b>Reschedule</b> your trip</div>218 <svg class="chev" viewBox="0 0 24 24" fill="none" stroke="#6b7280" stroke-width="2"><path d="M6 9l6 6 6-6"/></svg>219 </div>220 221 <div class="feature">222 <div class="feat-icon">223 <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#374151" stroke-width="2"><path d="M5 7h7v6H5z"/><path d="M14 13h3a2 2 0 0 1 2 2v2H6v-2"/></svg>224 </div>225 <div class="feat-text"><b>Standard</b> reserved seating</div>226 </div>227 <!-- More features and actions would continue here -->228 </div>229 230 <div class="gesture">231 <div class="pill"></div>232 </div>233 </div>234</div>235</body>236</html>