GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Baggage - UI Mock</title>6<meta name="viewport" content="width=1080, initial-scale=1.0">7<style>8 body { margin:0; padding:0; background: transparent; font-family: Arial, Helvetica, sans-serif; color:#1f2937; }9 #render-target {10 position: relative;11 overflow: hidden;12 width: 1080px;13 height: 2400px;14 background: #ffffff;15 }16 .appbar {17 height: 140px;18 padding: 0 36px;19 display: flex;20 align-items: center;21 border-bottom: 1px solid #ECEFF1;22 }23 .back-btn, .icon-btn {24 width: 96px; height: 96px;25 display: flex; align-items: center; justify-content: center;26 border-radius: 48px;27 }28 .app-title {29 font-size: 46px; font-weight: 700; margin-left: 6px;30 flex: 1; color:#202124;31 }32 .icon-row { display: flex; gap: 6px; }33 .content {34 padding: 36px;35 padding-bottom: 360px; /* space for sticky footer */36 }37 h1 {38 font-size: 58px; line-height: 1.18; margin: 26px 0 10px; color:#202124;39 letter-spacing: -0.5px;40 }41 .sub {42 font-size: 32px; color:#5f6368; margin-bottom: 26px;43 }44 .cards-area { margin-top: 10px; display: flex; gap: 24px; align-items:flex-start; }45 .left-radios {46 width: 120px;47 }48 .ghost-radio {49 width: 56px; height: 56px; border: 4px solid #E0E0E0; border-radius: 50%;50 margin: 22px 0 200px 24px;51 background:#fff;52 }53 .option-card {54 flex: 1;55 background:#fff;56 border: 4px solid #1a73e8;57 border-radius: 24px;58 padding: 34px;59 box-shadow: 0 6px 12px rgba(26,115,232,0.18);60 position: relative;61 }62 .option-title { font-size: 40px; font-weight: 700; margin-bottom: 18px; color:#202124; }63 .row { display:flex; align-items:center; gap: 18px; }64 .bagline { font-size: 36px; font-weight: 700; color:#202124; }65 .muted { color:#607d8b; font-weight: 600; }66 .dim { font-size: 30px; color:#8a98a7; margin-top: 6px; }67 .price-free { color:#1a73e8; font-weight: 700; font-size: 40px; margin-top: 28px; }68 .radio-selected {69 position: absolute; right: 26px; bottom: 26px;70 width: 64px; height: 64px; border-radius: 50%;71 border: 8px solid #1a73e8; display:flex; align-items:center; justify-content:center; background:#fff;72 }73 .radio-selected::after{74 content:""; width:28px; height:28px; background:#1a73e8; border-radius:50%;75 }76 .after-card {77 margin: 26px 8px 18px 8px; display:flex; align-items:flex-start; justify-content:space-between;78 }79 .after-left { display:flex; gap:18px; align-items:flex-start; }80 .after-text { font-size:32px; color:#374151; }81 .modify { color:#0b8e64; font-weight:700; font-size:32px; }82 .divider { height: 16px; background:#F1F3F4; margin: 16px -36px 24px; }83 .section-title { font-size: 50px; font-weight: 800; margin: 16px 0 6px; }84 .section-sub { font-size: 32px; color:#5f6368; margin-bottom: 24px; }85 .tip {86 border: 4px solid #1a73e8; background:#e8f0fe; color:#1f2937;87 padding: 24px; border-radius: 18px; display:flex; gap:20px; align-items:flex-start;88 }89 .tip b { color:#0b57d0; }90 .checkbox {91 margin-top: 26px; display:flex; align-items:center; gap:18px; font-size:36px; color:#1f2937; font-weight:600;92 }93 /* Sticky summary */94 .summary {95 position: absolute; left:0; right:0; bottom:0;96 background:#ffffff; border-top-left-radius:24px; border-top-right-radius:24px;97 box-shadow: 0 -8px 24px rgba(0,0,0,0.08);98 padding: 28px 36px 34px;99 }100 .summary-top { display:flex; align-items:center; justify-content:space-between; color:#374151; font-size:34px; margin-bottom: 20px; }101 .total { font-weight:700; color:#202124; }102 .price { font-weight:800; font-size: 42px; color:#202124; }103 .cta {104 width:100%; height:120px; background:#0aa77e; color:#fff; border:none; border-radius:18px;105 font-size: 42px; font-weight:800; letter-spacing:0.2px;106 }107 .progress-wrap { margin-top: 20px; }108 .progress {109 height: 16px; background:#E5E7EB; border-radius: 10px; overflow:hidden;110 }111 .progress > span {112 display:block; height:100%; width: 36%; background:#0aa77e;113 border-top-right-radius:10px; border-bottom-right-radius:10px;114 }115 /* Simple icon helpers */116 .svg-24 { width: 48px; height: 48px; }117 .svg-28 { width: 56px; height: 56px; }118 .circle-help {119 width: 72px; height: 72px; border-radius: 50%;120 background:#1f2937; color:#fff; display:flex; align-items:center; justify-content:center;121 font-weight: 800; font-size: 40px;122 }123</style>124</head>125<body>126<div id="render-target">127 <!-- App bar -->128 <div class="appbar">129 <div class="back-btn">130 <svg class="svg-28" viewBox="0 0 24 24" fill="none" stroke="#1f2937" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">131 <path d="M15 18l-6-6 6-6"></path>132 </svg>133 </div>134 <div class="app-title">Baggage</div>135 <div class="icon-row">136 <div class="icon-btn">137 <svg class="svg-28" viewBox="0 0 24 24" fill="none" stroke="#1f2937" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">138 <circle cx="18" cy="5" r="2"></circle>139 <circle cx="6" cy="12" r="2"></circle>140 <circle cx="18" cy="19" r="2"></circle>141 <path d="M8 12h7"></path>142 <path d="M16 6l-7 4"></path>143 <path d="M9 13l7 4"></path>144 </svg>145 </div>146 <div class="icon-btn">147 <div class="circle-help">?</div>148 </div>149 </div>150 </div>151 152 <div class="content">153 <h1>Pick your cabin bag allowance</h1>154 <div class="sub">These are the baggage items you can take into the cabin with you.</div>155 156 <div class="cards-area">157 <div class="left-radios">158 <div class="ghost-radio"></div>159 <div class="ghost-radio" style="margin-top:260px;"></div>160 </div>161 162 <div class="option-card">163 <div class="option-title">Personal item only</div>164 <div class="row">165 <svg class="svg-24" viewBox="0 0 24 24" fill="none" stroke="#263238" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">166 <rect x="3" y="8" width="18" height="12" rx="2"></rect>167 <path d="M9 8V6a3 3 0 0 1 6 0v2"></path>168 </svg>169 <div class="bagline"><span style="font-weight:800;">22 lb</span> <span class="muted">Personal item</span></div>170 </div>171 <div class="dim">12×16×8 in</div>172 <div class="price-free">Free</div>173 <div class="radio-selected"></div>174 </div>175 </div>176 177 <div class="after-card">178 <div class="after-left">179 <svg class="svg-28" viewBox="0 0 24 24" fill="none" stroke="#14a44d" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round">180 <path d="M20 6L9 17l-5-5"></path>181 </svg>182 <div class="after-text">183 Added for 3 travelers (CHF0.00)<br>184 <span style="color:#6b7280;">Modify per traveler</span>185 </div>186 </div>187 <div class="modify">Modify</div>188 </div>189 190 <div class="divider"></div>191 192 <div>193 <div class="section-title">Need any checked bags?</div>194 <div class="section-sub">Save by adding checked baggage now and take everything you need for the trip.</div>195 196 <div class="tip">197 <div>198 <svg class="svg-28" viewBox="0 0 24 24" fill="none" stroke="#1a73e8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">199 <circle cx="12" cy="12" r="9"></circle>200 <path d="M12 8v6"></path>201 <circle cx="12" cy="17" r="1" fill="#1a73e8" stroke="none"></circle>202 </svg>203 </div>204 <div style="font-size:32px; line-height:1.4;">205 <b>Savings tip:</b> purchase checked baggage now, instead of after you book, to save up to 25% in airline fees.206 </div>207 </div>208 209 <div class="checkbox">210 <svg class="svg-28" viewBox="0 0 24 24" fill="none" stroke="#1a73e8" stroke-width="2.4">211 <rect x="3" y="3" width="18" height="18" rx="3"></rect>212 <path d="M7 12l3 3 7-7" stroke="#1a73e8" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"></path>213 </svg>214 No bags to check in215 </div>216 </div>217 </div>218 219 <!-- Sticky summary area -->220 <div class="summary">221 <div class="summary-top">222 <div class="total">Total due</div>223 <div class="price">CHF915.80</div>224 </div>225 <button class="cta">Continue</button>226 <div class="progress-wrap">227 <div class="progress"><span></span></div>228 </div>229 </div>230</div>231</body>232</html>