GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Product UI</title>6<style>7 body { margin:0; padding:0; background:transparent; font-family: Arial, Helvetica, sans-serif; }8 #render-target {9 width:1080px; height:2400px;10 position:relative; overflow:hidden;11 background:#ffffff; color:#222;12 }13 14 /* General */15 .row { display:flex; align-items:center; }16 .spacer { height:24px; }17 .section-title {18 font-weight:700; font-size:44px; color:#222; margin:32px 36px 20px;19 }20 .divider { height:2px; background:#eee; margin:0 36px; }21 22 /* Status bar */23 .status-bar {24 height:90px; padding:0 28px;25 display:flex; align-items:center; justify-content:space-between;26 color:#1a1a1a; font-size:34px; letter-spacing:1px;27 }28 .status-icons .dot { width:18px; height:18px; border-radius:50%; background:#666; margin-left:18px; display:inline-block; }29 .status-icons .signal { width:26px; height:26px; border:3px solid #666; border-top-color:transparent; border-left-color:transparent; transform:rotate(45deg); display:inline-block; margin-left:18px; }30 .status-icons .battery { width:40px; height:22px; border:3px solid #666; border-radius:4px; margin-left:18px; position:relative; }31 .status-icons .battery:after { content:""; width:6px; height:12px; background:#666; position:absolute; right:-10px; top:3px; border-radius:2px; }32 33 /* Header */34 .app-header { height:120px; padding:0 20px; display:flex; align-items:center; justify-content:space-between; }35 .icon-btn { width:80px; height:80px; display:flex; align-items:center; justify-content:center; }36 .icon { width:44px; height:44px; fill:none; stroke:#222; stroke-width:4; }37 .icon-solid { fill:#222; stroke:none; }38 39 /* Location card */40 .location-card {41 margin:18px 24px; padding:26px; border:2px solid #e6e6e6; border-radius:18px; display:flex; align-items:center; justify-content:space-between;42 }43 .loc-left { display:flex; align-items:center; }44 .loc-pin {45 width:54px; height:54px; border-radius:50%; background:#e8f0e5; display:flex; align-items:center; justify-content:center; margin-right:18px;46 }47 .loc-text { font-size:38px; color:#2b2b2b; }48 .chev { width:34px; height:34px; }49 50 /* Date selector */51 .date-section { margin-top:10px; }52 .pill-row { display:flex; gap:28px; padding:0 24px; }53 .pill {54 width:320px; height:170px; border:2px solid #dedede; border-radius:90px; display:flex; flex-direction:column; align-items:center; justify-content:center;55 color:#3a3a3a; background:#fafafa;56 }57 .pill .big { font-size:44px; font-weight:700; }58 .pill .small { font-size:36px; color:#777; margin-top:6px; }59 60 /* Add message */61 .message-row {62 margin:16px 24px; padding:26px; border:2px solid #e6e6e6; border-radius:18px; display:flex; align-items:center; justify-content:space-between;63 }64 .msg-left { display:flex; align-items:center; }65 .msg-icon {66 width:54px; height:54px; border-radius:10px; background:#e8f0e5; display:flex; align-items:center; justify-content:center; margin-right:18px;67 }68 .msg-text { font-size:38px; color:#2b2b2b; }69 70 /* Accordion items */71 .accordion { margin-top:12px; }72 .acc-item {73 margin:16px 24px; padding:30px; border:2px solid #f0f0f0; border-radius:18px; display:flex; align-items:center; justify-content:space-between; background:#fbfbfb;74 }75 .acc-left { display:flex; align-items:center; }76 .acc-icon {77 width:64px; height:64px; border-radius:14px; background:#cfd7bd; display:flex; align-items:center; justify-content:center; margin-right:22px;78 }79 .acc-text { font-size:42px; font-weight:700; color:#2b2b2b; }80 .plus {81 width:44px; height:44px; border:3px solid #6e7340; border-radius:8px; position:relative;82 }83 .plus:before, .plus:after {84 content:""; position:absolute; background:#6e7340;85 }86 .plus:before { width:24px; height:4px; left:9px; top:20px; }87 .plus:after { width:4px; height:24px; left:20px; top:9px; }88 89 /* Offers */90 .offer-section { margin-top:32px; }91 .offer-card {92 margin:16px 24px; padding:36px; border:2px solid #f2d8d8; border-radius:22px; background:#fff6f6; display:flex; align-items:center; justify-content:space-between;93 }94 .coupon-tag {95 border:2px dashed #8c8c8c; border-radius:12px; padding:12px 22px; font-size:44px; font-weight:800; color:#6f793a; background:#fff;96 }97 .offer-text { font-size:38px; color:#333; margin-left:20px; flex:1; }98 .tnc { font-size:38px; color:#1b75d0; margin-left:26px; white-space:nowrap; }99 100 /* Footer buttons */101 .footer {102 position:absolute; left:0; bottom:0;103 width:100%; padding:24px; background:#fff;104 box-shadow:0 -6px 12px rgba(0,0,0,0.05);105 }106 .footer-row { display:flex; gap:24px; }107 .btn {108 height:140px; flex:1; border-radius:26px; display:flex; align-items:center; justify-content:center; font-size:48px; font-weight:700;109 }110 .btn-outline { border:3px solid #6e7340; color:#6e7340; background:#fff; }111 .btn-solid { background:#6e7340; color:#fff; }112 .btn svg { width:60px; height:60px; margin-right:20px; }113 114 /* Customer reviews heading to mirror screenshot location above footer */115 .reviews-title { font-size:44px; font-weight:700; margin:40px 24px 18px; color:#2b2b2b; }116 117 /* Minor helpers */118 .olive { color:#6e7340; }119</style>120</head>121<body>122<div id="render-target">123 124 <!-- Status bar -->125 <div class="status-bar">126 <div class="row">127 <div style="font-weight:700;">1:11</div>128 <span class="dot" style="margin-left:24px;"></span>129 <span class="dot"></span>130 <span class="dot"></span>131 <span class="dot"></span>132 </div>133 <div class="status-icons">134 <span class="signal"></span>135 <span class="dot" style="background:#999;"></span>136 <span class="battery"></span>137 </div>138 </div>139 140 <!-- Header with back & actions -->141 <div class="app-header">142 <div class="icon-btn">143 <svg class="icon" viewBox="0 0 24 24">144 <path d="M15 4 L7 12 L15 20" stroke-linecap="round" stroke-linejoin="round"></path>145 </svg>146 </div>147 <div class="row" style="gap:26px; margin-right:10px;">148 <div class="icon-btn">149 <svg class="icon" viewBox="0 0 24 24">150 <circle cx="10" cy="10" r="6"></circle>151 <line x1="15" y1="15" x2="22" y2="22" stroke-width="3"></line>152 </svg>153 </div>154 <div class="icon-btn">155 <svg class="icon" viewBox="0 0 24 24">156 <path d="M12 21 C5 14 3 11 6 8 C8 6 11 7 12 9 C13 7 16 6 18 8 C21 11 19 14 12 21" stroke-linecap="round" stroke-linejoin="round"></path>157 </svg>158 </div>159 <div class="icon-btn">160 <svg class="icon" viewBox="0 0 24 24">161 <rect x="3" y="6" width="18" height="12" rx="2"></rect>162 <path d="M7 10 L9 10"></path>163 <path d="M15 10 L17 10"></path>164 <path d="M10 14 L14 14"></path>165 </svg>166 </div>167 </div>168 </div>169 170 <!-- Location -->171 <div class="location-card">172 <div class="loc-left">173 <div class="loc-pin">174 <svg class="icon-solid" viewBox="0 0 24 24">175 <path d="M12 2 C8 2 5 5 5 9 C5 14 12 22 12 22 C12 22 19 14 19 9 C19 5 16 2 12 2 Z M12 6 A3 3 0 1 1 12 12 A3 3 0 1 1 12 6 Z"></path>176 </svg>177 </div>178 <div class="loc-text">121009, Faridabad, Haryana</div>179 </div>180 <svg class="chev" viewBox="0 0 24 24">181 <path d="M9 6 L15 12 L9 18" stroke="#777" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>182 </svg>183 </div>184 185 <!-- Select a Date -->186 <div class="section-title">Select a Date</div>187 <div class="date-section">188 <div class="pill-row">189 <div class="pill">190 <div class="big">Today</div>191 <div class="small">29th Dec</div>192 </div>193 <div class="pill">194 <div class="big">Tomorrow</div>195 <div class="small">30th Dec</div>196 </div>197 <div class="pill">198 <div class="big">Later</div>199 </div>200 </div>201 </div>202 203 <!-- Add Message -->204 <div class="section-title">Add Message</div>205 <div class="message-row">206 <div class="msg-left">207 <div class="msg-icon">208 <svg class="icon-solid" viewBox="0 0 24 24">209 <rect x="3" y="4" width="18" height="14" rx="2"></rect>210 <path d="M3 8 L12 13 L21 8" fill="#fff"></path>211 </svg>212 </div>213 <div class="msg-text">Add Free Message Card</div>214 </div>215 <svg class="chev" viewBox="0 0 24 24">216 <path d="M9 6 L15 12 L9 18" stroke="#777" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>217 </svg>218 </div>219 220 <!-- About the product -->221 <div class="section-title">About the product</div>222 <div class="accordion">223 <div class="acc-item">224 <div class="acc-left">225 <div class="acc-icon">226 <svg class="icon-solid" viewBox="0 0 24 24">227 <rect x="5" y="4" width="14" height="16" rx="2" fill="#6e7340"></rect>228 <line x1="8" y1="8" x2="16" y2="8" stroke="#fff" stroke-width="2"></line>229 <line x1="8" y1="12" x2="16" y2="12" stroke="#fff" stroke-width="2"></line>230 <line x1="8" y1="16" x2="14" y2="16" stroke="#fff" stroke-width="2"></line>231 </svg>232 </div>233 <div class="acc-text">Product Description</div>234 </div>235 <div class="plus"></div>236 </div>237 238 <div class="acc-item">239 <div class="acc-left">240 <div class="acc-icon">241 <svg class="icon-solid" viewBox="0 0 24 24">242 <path d="M12 3 L19 9 L12 21 L5 9 Z" fill="#6e7340"></path>243 <circle cx="12" cy="12" r="3" fill="#fff"></circle>244 </svg>245 </div>246 <div class="acc-text">Care Instructions</div>247 </div>248 <div class="plus"></div>249 </div>250 251 <div class="acc-item">252 <div class="acc-left">253 <div class="acc-icon">254 <svg class="icon-solid" viewBox="0 0 24 24">255 <rect x="3" y="7" width="18" height="10" rx="2" fill="#6e7340"></rect>256 <circle cx="8" cy="18" r="2" fill="#fff"></circle>257 <circle cx="16" cy="18" r="2" fill="#fff"></circle>258 </svg>259 </div>260 <div class="acc-text">Delivery Information</div>261 </div>262 <div class="plus"></div>263 </div>264 </div>265 266 <!-- Offers Available -->267 <div class="section-title">Offer(s) Available</div>268 <div class="offer-card">269 <div class="row" style="align-items:center; gap:20px; flex:1;">270 <div class="coupon-tag">APP20</div>271 <div class="offer-text">Get 20% Off* on 1st Order, Code: APP20</div>272 </div>273 <div class="tnc">*T&C</div>274 </div>275 276 <!-- Customer Reviews heading -->277 <div class="section-title">Customer Reviews</div>278 279 <!-- Footer buttons -->280 <div class="footer">281 <div class="footer-row">282 <div class="btn btn-outline">283 <svg viewBox="0 0 24 24">284 <rect x="3" y="6" width="18" height="12" rx="2" fill="none" stroke="#6e7340" stroke-width="2"></rect>285 <circle cx="8" cy="19" r="2" fill="#6e7340"></circle>286 <circle cx="16" cy="19" r="2" fill="#6e7340"></circle>287 </svg>288 Add To Cart289 </div>290 <div class="btn btn-solid">291 <svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">292 <rect x="3" y="6" width="18" height="12" rx="2"></rect>293 <path d="M7 10 L12 10"></path>294 <path d="M12 10 L12 14"></path>295 </svg>296 Gift Now297 </div>298 </div>299 </div>300 301</div>302</body>303</html>