GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Gift Page UI</title>5<meta name="viewport" content="width=1080, initial-scale=1.0">6<style>7 body { margin:0; padding:0; background:transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }8 #render-target {9 width:1080px; height:2400px;10 position:relative; overflow:hidden;11 background:#ffffff;12 box-sizing:border-box;13 }14 15 /* Top app bar */16 .appbar {17 height:110px;18 display:flex;19 align-items:center;20 padding:0 36px;21 box-shadow: 0 1px 0 rgba(0,0,0,0.08);22 }23 .icon-btn {24 width:72px; height:72px;25 display:flex; align-items:center; justify-content:center;26 border-radius:36px;27 }28 .appbar-right { margin-left:auto; display:flex; gap:22px; }29 30 /* Small status text row (price line) */31 .price-line {32 font-size:36px; color:#333;33 padding:22px 36px;34 display:flex; align-items:center; gap:14px;35 }36 .chevron-down {37 width:30px; height:30px;38 border-left:2px solid #666; border-bottom:2px solid #666;39 transform:rotate(-45deg); margin-top:6px;40 }41 42 /* Sections */43 .page {44 padding:12px 36px 180px 36px;45 }46 .section-title {47 font-size:44px; font-weight:700; color:#1f1f1f;48 margin:34px 0 18px 0;49 }50 .input-row {51 background:#fff; border:1px solid #e6e6e6;52 border-radius:28px; height:132px;53 display:flex; align-items:center;54 padding:0 30px; box-shadow:0 1px 0 rgba(0,0,0,0.03);55 }56 .input-row .left-icon {57 width:74px; height:74px; border-radius:20px;58 background:#f0f3e6; display:flex; align-items:center; justify-content:center;59 margin-right:22px;60 }61 .input-row .value {62 font-size:40px; color:#1b1b1b; flex:1;63 }64 .input-row .placeholder {65 font-size:40px; color:#8a8a8a; flex:1;66 }67 .input-row .right-chevron {68 width:22px; height:22px;69 border-right:4px solid #9b9b9b; border-top:4px solid #9b9b9b;70 transform:rotate(45deg);71 margin-left:12px;72 }73 74 /* Add message helper line */75 .helper-line {76 font-size:32px; color:#8a8a8a;77 margin-bottom:16px;78 }79 80 /* About product accordion rows */81 .accordion-row {82 background:#fff; border:1px solid #e6e6e6;83 border-radius:26px; height:128px; display:flex; align-items:center;84 padding:0 28px; margin-bottom:22px;85 }86 .tiny-icon {87 width:72px; height:72px; border-radius:20px; background:#eef3e3;88 display:flex; align-items:center; justify-content:center; margin-right:22px;89 }90 .row-title {91 font-size:40px; color:#222; flex:1;92 }93 .plus {94 width:54px; height:54px; border-radius:14px; border:2px solid #999;95 display:flex; align-items:center; justify-content:center; color:#666; font-size:40px;96 }97 98 /* Offer card */99 .offers-title {100 font-size:42px; font-weight:700; margin:28px 0 18px 0; color:#1f1f1f;101 }102 .offer-card {103 background:#f8ecec; border:1px dashed #d9bcbc;104 border-radius:24px; padding:28px; display:flex; align-items:center;105 }106 .coupon {107 background:#fff7e0; border:2px solid #b9a46a; color:#6a6f3a;108 font-weight:800; border-radius:16px; padding:10px 24px; margin-right:24px; font-size:40px;109 }110 .offer-text { font-size:38px; color:#333; flex:1; }111 .tc { color:#3a67b0; font-size:36px; }112 113 /* Sticky bottom action bar */114 .bottom-bar {115 position:absolute; left:0; right:0; bottom:0;116 padding:22px 26px 28px 26px;117 background:#ffffff;118 box-shadow:0 -2px 8px rgba(0,0,0,0.06);119 display:flex; gap:22px;120 }121 .btn-outline, .btn-solid {122 height:140px; border-radius:28px; display:flex; align-items:center; justify-content:center;123 flex:1; font-size:46px; font-weight:700;124 gap:22px;125 }126 .btn-outline {127 border:3px solid #80844a; color:#40421f; background:#ffffff;128 }129 .btn-solid {130 background:#80844a; color:#ffffff;131 }132 133 /* Simple SVG icons - olive tone */134 .stroke { stroke:#2f2f2f; stroke-width:3; fill:none; }135 .accent { stroke:#71763e; }136</style>137</head>138<body>139<div id="render-target">140 141 <!-- App bar with back + actions -->142 <div class="appbar">143 <div class="icon-btn" aria-label="Back">144 <svg width="44" height="44" viewBox="0 0 24 24">145 <path class="accent" d="M15 19l-7-7 7-7"/>146 </svg>147 </div>148 <div class="appbar-right">149 <div class="icon-btn" aria-label="Search">150 <svg width="44" height="44" viewBox="0 0 24 24">151 <circle class="stroke" cx="11" cy="11" r="6"></circle>152 <path class="stroke" d="M16 16l5 5"></path>153 </svg>154 </div>155 <div class="icon-btn" aria-label="Wishlist">156 <svg width="44" height="44" viewBox="0 0 24 24">157 <path class="stroke" d="M12 21s-6-4.35-9-7.5C-1 8 3 3 7 5c2 1 3 3 5 3s3-2 5-3c4-2 8 3 4 8.5C18 16.65 12 21 12 21"></path>158 </svg>159 </div>160 <div class="icon-btn" aria-label="Cart">161 <svg width="44" height="44" viewBox="0 0 24 24">162 <circle class="stroke" cx="9" cy="20" r="2"></circle>163 <circle class="stroke" cx="18" cy="20" r="2"></circle>164 <path class="stroke" d="M2 3h3l3 12h10l2-8H7"></path>165 </svg>166 </div>167 </div>168 </div>169 170 <!-- Price line -->171 <div class="price-line">172 <span>Price inclusive of all taxes</span>173 <div class="chevron-down"></div>174 </div>175 176 <div class="page">177 178 <!-- Gift Receiver Location -->179 <div class="section-title">Gift Receiver’s Location</div>180 <div class="input-row">181 <div class="left-icon">182 <svg width="40" height="40" viewBox="0 0 24 24">183 <path class="accent" d="M12 22s7-8 7-12a7 7 0 10-14 0c0 4 7 12 7 12z"></path>184 <circle class="accent" cx="12" cy="10" r="3"></circle>185 </svg>186 </div>187 <div class="value">Amsterdam</div>188 <div class="right-chevron"></div>189 </div>190 191 <!-- Select Date -->192 <div class="section-title" style="margin-top:46px;">Select a Date</div>193 <div class="input-row">194 <div class="left-icon">195 <svg width="40" height="40" viewBox="0 0 24 24">196 <rect class="accent" x="3" y="5" width="18" height="16" rx="2"></rect>197 <path class="accent" d="M3 9h18"></path>198 <path class="accent" d="M8 3v4M16 3v4"></path>199 </svg>200 </div>201 <div class="placeholder">Select Date</div>202 <div class="right-chevron"></div>203 </div>204 205 <!-- Add Message -->206 <div class="section-title" style="margin-top:46px;">Add Message</div>207 <div class="helper-line">Add Free Message Card</div>208 <div class="input-row">209 <div class="left-icon">210 <svg width="40" height="40" viewBox="0 0 24 24">211 <rect class="accent" x="3" y="5" width="18" height="14" rx="2"></rect>212 <path class="accent" d="M3 9l9 5 9-5"></path>213 </svg>214 </div>215 <div class="value">Happy Birthday Abdul</div>216 <div class="right-chevron"></div>217 </div>218 219 <!-- About the product -->220 <div class="section-title" style="margin-top:54px;">About the product</div>221 222 <div class="accordion-row">223 <div class="tiny-icon">224 <svg width="34" height="34" viewBox="0 0 24 24">225 <rect class="accent" x="5" y="3" width="14" height="18" rx="2"></rect>226 <path class="accent" d="M7 7h10M7 11h10M7 15h10"></path>227 </svg>228 </div>229 <div class="row-title">Product Description</div>230 <div class="plus">+</div>231 </div>232 233 <div class="accordion-row">234 <div class="tiny-icon">235 <svg width="34" height="34" viewBox="0 0 24 24">236 <path class="accent" d="M5 20c4-8 10-8 14 0"></path>237 <circle class="accent" cx="12" cy="7" r="3"></circle>238 </svg>239 </div>240 <div class="row-title">Care Instructions</div>241 <div class="plus">+</div>242 </div>243 244 <div class="accordion-row">245 <div class="tiny-icon">246 <svg width="36" height="36" viewBox="0 0 24 24">247 <path class="accent" d="M3 7h13v10H3z"></path>248 <path class="accent" d="M16 10h4l1 2v5h-5z"></path>249 <circle class="accent" cx="7" cy="18" r="2"></circle>250 <circle class="accent" cx="18" cy="18" r="2"></circle>251 </svg>252 </div>253 <div class="row-title">Delivery Information</div>254 <div class="plus">+</div>255 </div>256 257 <!-- Offers -->258 <div class="offers-title">Offer(s) Available</div>259 <div class="offer-card">260 <div class="coupon">APP20</div>261 <div class="offer-text">Get 20% Off* on 1st Order, Code: APP20</div>262 <div class="tc">*T&C</div>263 </div>264 265 </div>266 267 <!-- Bottom action bar -->268 <div class="bottom-bar">269 <div class="btn-outline">270 <svg width="44" height="44" viewBox="0 0 24 24">271 <circle class="accent" cx="9" cy="20" r="2"></circle>272 <circle class="accent" cx="18" cy="20" r="2"></circle>273 <path class="accent" d="M2 3h3l3 12h10l2-8H7"></path>274 </svg>275 <span>Add To Cart</span>276 </div>277 <div class="btn-solid">278 <svg width="44" height="44" viewBox="0 0 24 24">279 <path class="stroke" d="M7 10l5 5 5-5"></path>280 <path class="stroke" d="M12 3v11"></path>281 </svg>282 <span>Gift Now</span>283 </div>284 </div>285 286</div>287</body>288</html>