GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Product Gift Screen</title>5<style>6 body { margin:0; padding:0; background:transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }7 #render-target{8 width:1080px; height:2400px; position:relative; overflow:hidden;9 background:#ffffff;10 }11 12 /* Top status and app bar */13 .status-bar{14 height:90px; padding:0 28px; display:flex; align-items:center; justify-content:space-between; color:#333;15 font-size:30px;16 }17 .status-left{display:flex; gap:22px; align-items:center;}18 .status-right{display:flex; gap:22px; align-items:center;}19 .top-bar{20 height:120px; display:flex; align-items:center; justify-content:space-between;21 padding:0 28px;22 }23 .icon-btn{width:70px; height:70px; display:flex; align-items:center; justify-content:center; border-radius:40px; }24 .icon{width:44px; height:44px; fill:#1f1f1f; stroke:#1f1f1f;}25 .muted{color:#7d7d7d;}26 27 /* Location card */28 .location-card{29 margin:18px 28px 12px;30 border:1px solid #e6e6e6; border-radius:18px; padding:26px 24px; display:flex; align-items:center; justify-content:space-between;31 box-shadow:0 0 0 rgba(0,0,0,0);32 }33 .loc-left{display:flex; align-items:center; gap:18px; color:#2b2b2b; font-size:36px;}34 .chev{width:22px; height:22px; border-right:3px solid #9e9e9e; border-bottom:3px solid #9e9e9e; transform:rotate(-45deg); margin-left:12px;}35 36 /* Section titles */37 .section{padding:20px 28px;}38 .section h3{margin:12px 0; font-size:40px; color:#1e1e1e; font-weight:700;}39 40 /* Pills for date */41 .pill-row{display:flex; gap:30px; margin-top:10px;}42 .pill{43 flex:1; background:#fff; border:3px solid #dcdcdc; border-radius:90px; height:170px;44 display:flex; flex-direction:column; align-items:center; justify-content:center;45 }46 .pill .big{font-size:44px; color:#4a4a4a; font-weight:700;}47 .pill .small{font-size:34px; margin-top:8px; color:#8a8a8a;}48 49 /* Message input like row */50 .subtext{font-size:28px; color:#7c7c7c; margin-bottom:16px;}51 .input-row{52 border:2px solid #e6e6e6; border-radius:18px; padding:24px; display:flex; align-items:center; justify-content:space-between;53 }54 .input-left{display:flex; align-items:center; gap:20px;}55 .msg-icon{56 width:62px; height:62px; border-radius:12px; background:#f2f5ec; border:1px solid #c9d0b1;57 display:flex; align-items:center; justify-content:center;58 }59 .msg-icon div{width:34px; height:24px; border:2px solid #7c8c53; border-radius:4px; position:relative;}60 .msg-icon div:before{61 content:""; position:absolute; left:6px; right:6px; top:6px; height:0; border-top:2px solid #7c8c53; transform:skewY(-12deg);62 }63 .input-text{font-size:36px; color:#2e2e2e;}64 .chev-right{width:22px; height:22px; border-right:4px solid #a6a6a6; border-bottom:4px solid #a6a6a6; transform:rotate(-45deg);}65 66 /* Accordion rows */67 .accordion{68 border:1px solid #f0f0f0; border-radius:22px; overflow:hidden;69 }70 .acc-row{71 padding:34px 26px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid #f0f0f0; background:#fafafa;72 }73 .acc-row:last-child{border-bottom:none;}74 .acc-left{display:flex; align-items:center; gap:20px;}75 .round-ic{76 width:68px; height:68px; border-radius:16px; background:#eef2e7; border:1px solid #cbd3b8; display:flex; align-items:center; justify-content:center; color:#6e7747; font-size:32px; font-weight:700;77 }78 .acc-title{font-size:38px; color:#2c2c2c; font-weight:700;}79 .plus{font-size:52px; color:#5b5b5b;}80 81 /* Offer banner */82 .offer-section h3{margin-bottom:16px;}83 .offer-card{84 background:#fff5f5; border:2px dashed #e8caca; border-radius:24px;85 padding:30px; display:flex; align-items:center; justify-content:space-between;86 }87 .coupon{background:#fff; border:2px solid #e0d5d5; padding:10px 18px; border-radius:10px; color:#6a6a6a; font-weight:800; letter-spacing:2px; font-size:36px;}88 .offer-text{flex:1; margin:0 20px; color:#333; font-size:34px;}89 .tnc{color:#1a73e8; font-size:34px; white-space:nowrap;}90 91 /* Customer review header */92 .reviews{padding:20px 28px 0;}93 .reviews h3{font-size:40px; margin:12px 0; color:#1f1f1f; font-weight:700;}94 95 /* Bottom bar buttons */96 .bottom-actions{97 position:absolute; left:0; right:0; bottom:34px; padding:0 28px;98 }99 .btn-row{display:flex; gap:28px;}100 .btn{101 flex:1; height:140px; border-radius:26px; font-size:44px; font-weight:700; display:flex; align-items:center; justify-content:center; gap:20px; cursor:default;102 }103 .btn-outline{border:3px solid #79844b; color:#79844b; background:#fff;}104 .btn-solid{background:#79844b; color:#fff;}105 .mini-cart{width:50px; height:50px; border:3px solid currentColor; border-radius:8px; position:relative;}106 .mini-cart:before, .mini-cart:after{107 content:""; position:absolute; bottom: -10px; width:12px; height:12px; border-radius:50%; border:3px solid currentColor;108 }109 .mini-cart:before{left:6px;}110 .mini-cart:after{right:6px;}111 112 /* subtle divider spacing */113 .spacer{height:22px;}114</style>115</head>116<body>117<div id="render-target">118 119 <!-- Fake status bar -->120 <div class="status-bar">121 <div class="status-left">122 <div>1:15</div>123 <div class="muted">• • •</div>124 </div>125 <div class="status-right muted">🔇 📶 🔋</div>126 </div>127 128 <!-- App bar -->129 <div class="top-bar">130 <div class="icon-btn" aria-label="Back">131 <svg class="icon" viewBox="0 0 24 24">132 <path d="M15.5 4L7 12l8.5 8" stroke="#1f1f1f" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>133 </svg>134 </div>135 <div style="display:flex; gap:18px;">136 <div class="icon-btn">137 <svg class="icon" viewBox="0 0 24 24">138 <circle cx="11" cy="11" r="7" stroke="#1f1f1f" stroke-width="2" fill="none"/>139 <path d="M20 20l-4-4" stroke="#1f1f1f" stroke-width="2" fill="none" stroke-linecap="round"/>140 </svg>141 </div>142 <div class="icon-btn">143 <svg class="icon" viewBox="0 0 24 24">144 <path d="M12 21s-7-4.35-7-10a4.5 4.5 0 0 1 8-2.87A4.5 4.5 0 0 1 19 11c0 5.65-7 10-7 10z" fill="none" stroke="#1f1f1f" stroke-width="2"/>145 </svg>146 </div>147 <div class="icon-btn">148 <svg class="icon" viewBox="0 0 24 24">149 <path d="M3 6h2l2 12h10l2-9H7" fill="none" stroke="#1f1f1f" stroke-width="2" stroke-linecap="round"/>150 <circle cx="10" cy="20" r="1.6" fill="#1f1f1f"/>151 <circle cx="17" cy="20" r="1.6" fill="#1f1f1f"/>152 </svg>153 </div>154 </div>155 </div>156 157 <!-- Location -->158 <div class="location-card">159 <div class="loc-left">160 <svg width="42" height="42" viewBox="0 0 24 24" class="icon">161 <path d="M12 22s7-7.2 7-12a7 7 0 1 0-14 0c0 4.8 7 12 7 12z" fill="none" stroke="#6e7747" stroke-width="2"/>162 <circle cx="12" cy="10" r="2.5" fill="none" stroke="#6e7747" stroke-width="2"/>163 </svg>164 <div>121009, Faridabad, Haryana</div>165 </div>166 <div class="chev"></div>167 </div>168 169 <!-- Select a Date -->170 <div class="section">171 <h3>Select a Date</h3>172 <div class="pill-row">173 <div class="pill">174 <div class="big">Today</div>175 <div class="small">29th Dec</div>176 </div>177 <div class="pill">178 <div class="big">Tomorrow</div>179 <div class="small">30th Dec</div>180 </div>181 <div class="pill">182 <div class="big">Later</div>183 </div>184 </div>185 </div>186 187 <!-- Add Message -->188 <div class="section">189 <h3>Add Message</h3>190 <div class="subtext">Add Free Message Card</div>191 <div class="input-row">192 <div class="input-left">193 <div class="msg-icon"><div></div></div>194 <div class="input-text">happy marriage anniversary</div>195 </div>196 <div class="chev-right"></div>197 </div>198 </div>199 200 <!-- About the product -->201 <div class="section">202 <h3>About the product</h3>203 <div class="accordion">204 <div class="acc-row">205 <div class="acc-left">206 <div class="round-ic">i</div>207 <div class="acc-title">Product Description</div>208 </div>209 <div class="plus">+</div>210 </div>211 <div class="acc-row">212 <div class="acc-left">213 <div class="round-ic">ℹ</div>214 <div class="acc-title">Care Instructions</div>215 </div>216 <div class="plus">+</div>217 </div>218 <div class="acc-row">219 <div class="acc-left">220 <div class="round-ic">⟲</div>221 <div class="acc-title">Delivery Information</div>222 </div>223 <div class="plus">+</div>224 </div>225 </div>226 </div>227 228 <!-- Offer(s) Available -->229 <div class="section offer-section">230 <h3>Offer(s) Available</h3>231 <div class="offer-card">232 <div class="coupon">APP20</div>233 <div class="offer-text">Get 20% Off* on 1st Order, Code: APP20</div>234 <div class="tnc">*T&C</div>235 </div>236 </div>237 238 <!-- Customer Reviews -->239 <div class="reviews">240 <h3>Customer Reviews</h3>241 </div>242 243 <div class="spacer"></div>244 245 <!-- Bottom Buttons -->246 <div class="bottom-actions">247 <div class="btn-row">248 <div class="btn btn-outline">249 <div class="mini-cart"></div>250 <div>Add To Cart</div>251 </div>252 <div class="btn btn-solid">253 <div class="mini-cart"></div>254 <div>Gift Now</div>255 </div>256 </div>257 </div>258 259</div>260</body>261</html>