GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Gift Product Page</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }7 #render-target {8 width: 1080px;9 height: 2400px;10 position: relative;11 overflow: hidden;12 background: #ffffff;13 color: #222;14 }15 .status-bar {16 height: 70px;17 padding: 0 32px;18 display: flex;19 align-items: center;20 font-size: 28px;21 color: #222;22 }23 .status-bar .right { margin-left: auto; display: flex; gap: 22px; align-items: center; color: #444; }24 .top-nav {25 height: 90px;26 padding: 0 24px;27 display: flex;28 align-items: center;29 border-bottom: 1px solid #eee;30 }31 .icon-btn { width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; }32 .spacer { flex: 1; }33 .screen-content {34 position: absolute;35 top: 160px;36 left: 0;37 right: 0;38 bottom: 220px;39 overflow-y: auto;40 -webkit-overflow-scrolling: touch;41 padding: 20px 32px 140px 32px;42 }43 .line-note {44 font-size: 28px;45 color: #666;46 display: flex;47 align-items: center;48 gap: 12px;49 margin: 8px 0 24px 8px;50 }51 .section-title {52 font-size: 40px;53 font-weight: 700;54 margin: 32px 8px 16px 8px;55 }56 .card {57 border: 1px solid #e6e6e6;58 background: #fff;59 border-radius: 24px;60 padding: 26px;61 display: flex;62 align-items: center;63 gap: 22px;64 margin: 0 8px 22px 8px;65 box-shadow: 0 0 0 rgba(0,0,0,0);66 }67 .card .label {68 font-size: 34px;69 color: #333;70 flex: 1;71 }72 .chev {73 width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; color: #777;74 }75 .about-list .item {76 border: 1px solid #e6e6e6;77 border-radius: 22px;78 padding: 26px;79 display: flex;80 align-items: center;81 margin: 0 8px 18px 8px;82 gap: 22px;83 background: #fff;84 }85 .about-list .text { font-size: 36px; flex: 1; }86 .plus {87 width: 46px; height: 46px; border-radius: 12px; display: flex; align-items: center; justify-content: center; color: #222;88 }89 .offers-title { font-size: 38px; font-weight: 700; margin: 30px 8px 18px 8px; }90 .offer-box {91 margin: 0 8px 28px 8px;92 border-radius: 22px;93 border: 1px solid #f0d9d9;94 background: #fff5f6;95 padding: 26px;96 display: flex;97 align-items: center;98 gap: 22px;99 }100 .coupon-tag {101 padding: 10px 18px;102 border: 2px dashed #8d8d8d;103 border-radius: 12px;104 background: #fff;105 color: #4c5b2c;106 font-weight: 800;107 font-size: 36px;108 }109 .offer-text { font-size: 32px; color: #333; }110 .tnc { margin-left: auto; color: #3b6db5; font-size: 32px; }111 .bottom-bar {112 position: absolute;113 left: 0; right: 0; bottom: 0;114 height: 220px;115 background: #ffffff;116 border-top: 1px solid #e6e6e6;117 display: flex;118 align-items: center;119 padding: 24px 32px;120 gap: 26px;121 }122 .btn {123 flex: 1;124 height: 120px;125 border-radius: 28px;126 display: flex;127 align-items: center;128 justify-content: center;129 gap: 22px;130 font-size: 40px;131 font-weight: 700;132 border: 1px solid #c9c9c9;133 color: #2a2a2a;134 background: #f8f8f8;135 }136 .btn.primary {137 background: #6f763b;138 color: #fff;139 border-color: #6f763b;140 }141 .gesture-bar {142 position: absolute;143 bottom: 8px;144 left: 50%;145 transform: translateX(-50%);146 width: 500px; height: 10px;147 background: #00000022;148 border-radius: 6px;149 }150 /* Small icon helpers */151 .ico { width: 48px; height: 48px; }152 .ico32 { width: 40px; height: 40px; }153</style>154</head>155<body>156<div id="render-target">157 158 <!-- Status bar -->159 <div class="status-bar">160 <div>2:59</div>161 <div class="right">162 <span>◐</span>163 <span>◎</span>164 <span>⎋</span>165 <span>▮▮▮</span>166 </div>167 </div>168 169 <!-- Top navigation -->170 <div class="top-nav">171 <div class="icon-btn">172 <svg class="ico" viewBox="0 0 24 24">173 <path d="M15.5 18.5L9 12l6.5-6.5" stroke="#222" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>174 </svg>175 </div>176 <div class="spacer"></div>177 <div class="icon-btn">178 <svg class="ico" viewBox="0 0 24 24">179 <circle cx="11" cy="11" r="7" stroke="#222" stroke-width="2" fill="none"/>180 <path d="M20 20l-4-4" stroke="#222" stroke-width="2" stroke-linecap="round"/>181 </svg>182 </div>183 <div class="icon-btn">184 <svg class="ico" viewBox="0 0 24 24">185 <path d="M12 20s-7-4.5-7-10a5 5 0 0 1 9-3 5 5 0 0 1 9 3c0 5.5-7 10-7 10z" stroke="#222" stroke-width="2" fill="none"/>186 </svg>187 </div>188 <div class="icon-btn">189 <svg class="ico" viewBox="0 0 24 24">190 <path d="M6 6h15l-2 10H8L6 6z" stroke="#222" stroke-width="2" fill="none"/>191 <circle cx="9" cy="20" r="2" fill="#222"/>192 <circle cx="18" cy="20" r="2" fill="#222"/>193 </svg>194 </div>195 </div>196 197 <!-- Scrollable content -->198 <div class="screen-content">199 <div class="line-note">200 <span>Price inclusive of all taxes</span>201 <svg class="ico32" viewBox="0 0 24 24">202 <path d="M7 9l5 5 5-5" stroke="#777" stroke-width="2" fill="none" stroke-linecap="round"/>203 </svg>204 </div>205 206 <div class="section-title">Gift Receiver’s Location</div>207 <div class="card">208 <svg class="ico32" viewBox="0 0 24 24">209 <path d="M12 21s-7-7.5-7-12a7 7 0 0 1 14 0c0 4.5-7 12-7 12z" stroke="#6a7a3b" stroke-width="2" fill="none"/>210 <circle cx="12" cy="9" r="3" stroke="#6a7a3b" stroke-width="2" fill="none"/>211 </svg>212 <div class="label">Amsterdam</div>213 <div class="chev">214 <svg class="ico32" viewBox="0 0 24 24">215 <path d="M9 6l6 6-6 6" stroke="#777" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>216 </svg>217 </div>218 </div>219 220 <div class="section-title">Select a Date</div>221 <div class="card">222 <svg class="ico32" viewBox="0 0 24 24">223 <rect x="3" y="5" width="18" height="16" rx="2" stroke="#222" stroke-width="2" fill="none"/>224 <path d="M3 9h18" stroke="#222" stroke-width="2"/>225 <path d="M8 3v4M16 3v4" stroke="#222" stroke-width="2" stroke-linecap="round"/>226 </svg>227 <div class="label" style="color:#777;">Select Date</div>228 <div class="chev">229 <svg class="ico32" viewBox="0 0 24 24">230 <path d="M9 6l6 6-6 6" stroke="#777" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>231 </svg>232 </div>233 </div>234 235 <div class="section-title">Add Message</div>236 <div class="card">237 <svg class="ico32" viewBox="0 0 24 24">238 <rect x="3" y="4" width="18" height="14" rx="2" stroke="#6a7a3b" stroke-width="2" fill="none"/>239 <path d="M6 9h12M6 13h8" stroke="#6a7a3b" stroke-width="2" stroke-linecap="round"/>240 </svg>241 <div class="label">Add Free Message Card</div>242 <div class="chev">243 <svg class="ico32" viewBox="0 0 24 24">244 <path d="M9 6l6 6-6 6" stroke="#777" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>245 </svg>246 </div>247 </div>248 249 <div class="section-title">About the product</div>250 <div class="about-list">251 <div class="item">252 <svg class="ico32" viewBox="0 0 24 24">253 <rect x="5" y="3" width="14" height="18" rx="2" stroke="#6a7a3b" stroke-width="2" fill="none"/>254 <path d="M8 8h8M8 12h8M8 16h6" stroke="#6a7a3b" stroke-width="2" stroke-linecap="round"/>255 </svg>256 <div class="text">Product Description</div>257 <div class="plus">258 <svg class="ico32" viewBox="0 0 24 24">259 <path d="M12 5v14M5 12h14" stroke="#222" stroke-width="2" stroke-linecap="round"/>260 </svg>261 </div>262 </div>263 <div class="item">264 <svg class="ico32" viewBox="0 0 24 24">265 <path d="M4 18l4-8 6 6 2-4 4 6" stroke="#6a7a3b" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>266 </svg>267 <div class="text">Care Instructions</div>268 <div class="plus">269 <svg class="ico32" viewBox="0 0 24 24">270 <path d="M12 5v14M5 12h14" stroke="#222" stroke-width="2" stroke-linecap="round"/>271 </svg>272 </div>273 </div>274 <div class="item">275 <svg class="ico32" viewBox="0 0 24 24">276 <path d="M3 14h18l-2-6H6z" stroke="#6a7a3b" stroke-width="2" fill="none"/>277 <circle cx="7" cy="18" r="2" fill="#6a7a3b"/>278 <circle cx="17" cy="18" r="2" fill="#6a7a3b"/>279 </svg>280 <div class="text">Delivery Information</div>281 <div class="plus">282 <svg class="ico32" viewBox="0 0 24 24">283 <path d="M12 5v14M5 12h14" stroke="#222" stroke-width="2" stroke-linecap="round"/>284 </svg>285 </div>286 </div>287 </div>288 289 <div class="offers-title">Offer(s) Available</div>290 <div class="offer-box">291 <div style="display:flex; align-items:center;">292 <span style="font-size:40px; color:#999; margin-right:14px;">✂</span>293 <div class="coupon-tag">APP20</div>294 </div>295 <div class="offer-text">Get 20% Off* on 1st Order, Code: APP20</div>296 <div class="tnc">*T&C</div>297 </div>298 </div>299 300 <!-- Bottom buttons -->301 <div class="bottom-bar">302 <div class="btn">303 <svg class="ico" viewBox="0 0 24 24">304 <path d="M6 6h15l-2 10H8L6 6z" stroke="#2a2a2a" stroke-width="2" fill="none"/>305 <circle cx="9" cy="20" r="2" fill="#2a2a2a"/>306 <circle cx="18" cy="20" r="2" fill="#2a2a2a"/>307 </svg>308 <span>Add To Cart</span>309 </div>310 <div class="btn primary">311 <svg class="ico" viewBox="0 0 24 24">312 <path d="M6 6h15l-2 10H8L6 6z" stroke="#fff" stroke-width="2" fill="none"/>313 <path d="M8 3l4 4 4-4" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/>314 </svg>315 <span>Gift Now</span>316 </div>317 </div>318 319 <div class="gesture-bar"></div>320</div>321</body>322</html>