GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Product Detail - Kawan Oat Chapati</title>7<style>8 body { margin: 0; padding: 0; background: transparent; }9 #render-target {10 width: 1080px; height: 2400px; position: relative; overflow: hidden;11 background: #f6f6f6; color: #111;12 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;13 }14 15 /* Status bar */16 .status-bar {17 height: 90px; padding: 0 32px;18 display: flex; align-items: center; justify-content: space-between;19 color: #3a3a3a; font-weight: 600; font-size: 34px;20 }21 .status-right { display: flex; align-items: center; gap: 18px; }22 .battery {23 width: 46px; height: 24px; border: 2px solid #3a3a3a; border-radius: 6px; position: relative;24 }25 .battery::after { content: ""; position: absolute; right: -8px; top: 6px; width: 6px; height: 12px; background: #3a3a3a; border-radius: 2px; }26 .battery .level { width: 34px; height: 16px; background: #3a3a3a; border-radius: 4px; margin: 4px; }27 28 /* Search header / dimmed app bar */29 .appbar {30 height: 240px; background: #6d6d6d; padding: 24px 32px 0 32px;31 }32 .appbar-row { display: flex; align-items: center; gap: 20px; }33 .icon-btn {34 width: 72px; height: 72px; display: flex; align-items: center; justify-content: center;35 color: #1f4e1f;36 }37 .search-field {38 flex: 1; height: 96px; background: #889f7c; /* muted green-grey */39 border-radius: 48px; display: flex; align-items: center; padding: 0 28px; gap: 24px;40 box-shadow: inset 0 0 0 2px rgba(255,255,255,0.25);41 color: #f3f7ef; font-size: 40px;42 }43 .search-field .placeholder { flex: 1; color: #f3f7ef; }44 .search-icon, .mic-icon { width: 48px; height: 48px; }45 46 /* White sheet (product detail) */47 .sheet {48 position: absolute; left: 0; right: 0; top: 240px; bottom: 0;49 background: #ffffff; border-radius: 48px 48px 0 0;50 box-shadow: 0 -12px 24px rgba(0,0,0,0.05);51 }52 .sheet-header {53 height: 96px; display: flex; align-items: center; justify-content: space-between;54 padding: 0 32px; color: #333;55 }56 .sheet-actions { display: flex; align-items: center; gap: 28px; }57 .sheet-title { padding: 0 40px; }58 59 /* Product image placeholder */60 .product-image {61 width: 900px; height: 900px; margin: 24px auto 24px auto;62 background: #E0E0E0; border: 1px solid #BDBDBD;63 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 40px;64 }65 66 /* Text styles */67 .title {68 font-size: 44px; line-height: 60px; letter-spacing: 1.2px; color: #111; margin: 0 40px 16px 40px;69 }70 .price {71 font-size: 72px; font-weight: 800; margin: 0 40px 24px 40px;72 }73 74 /* Availability list */75 .availability { margin: 0 40px 16px 40px; }76 .availability li {77 list-style: none; display: flex; align-items: center; gap: 18px;78 font-size: 38px; margin: 18px 0; color: #333;79 }80 .check-icon {81 width: 40px; height: 40px; color: #2e7d32;82 }83 84 /* EBT pill */85 .ebt-row { display: flex; align-items: center; gap: 18px; margin: 6px 40px 32px 40px; font-size: 38px; }86 .ebt-badge {87 background: #2e7d32; color: #fff; font-weight: 700; border-radius: 10px;88 padding: 12px 18px; font-size: 32px; line-height: 1;89 letter-spacing: 2px;90 }91 92 /* Recommendations */93 .section-label { font-size: 40px; font-weight: 600; color: #333; margin: 8px 40px 20px 40px; }94 .cards { display: flex; gap: 24px; padding: 0 40px; }95 .card {96 width: 320px; background: #fff; border: 1px solid #e5e5e5; border-radius: 20px;97 box-shadow: 0 2px 8px rgba(0,0,0,0.04); overflow: hidden; position: relative;98 }99 .card .img {100 width: 100%; height: 420px; background: #E0E0E0; border-bottom: 1px solid #BDBDBD;101 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 32px;102 }103 .card .name { padding: 18px; font-size: 32px; color: #222; height: 140px; }104 .fav-btn {105 position: absolute; right: 16px; top: 16px; width: 64px; height: 64px;106 border-radius: 32px; background: rgba(255,255,255,0.9);107 display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(0,0,0,0.08);108 }109 .heart-icon { width: 36px; height: 36px; color: #9e9e9e; }110 111 /* Sticky button */112 .notify-wrap {113 position: absolute; left: 40px; right: 40px; bottom: 160px;114 }115 .notify-btn {116 width: 100%; height: 120px; border-radius: 18px;117 background: #4c7c35; color: #fff; font-size: 44px; font-weight: 700;118 display: flex; align-items: center; justify-content: center;119 box-shadow: 0 6px 16px rgba(76,124,53,0.4);120 }121 122 /* Bottom system handle */123 .home-handle {124 position: absolute; bottom: 72px; left: 50%; transform: translateX(-50%);125 width: 200px; height: 12px; background: #1a1a1a; border-radius: 6px; opacity: 0.9;126 }127 128 /* Simple icon styles (using currentColor) */129 svg { display: block; }130</style>131</head>132<body>133<div id="render-target">134 135 <!-- Status bar -->136 <div class="status-bar">137 <div>1:15</div>138 <div class="status-right">139 <span style="font-size:28px; color:#555;">⃝</span>140 <div class="battery"><div class="level"></div></div>141 <div style="font-size:32px; color:#555;">100%</div>142 </div>143 </div>144 145 <!-- App bar with search -->146 <div class="appbar">147 <div class="appbar-row">148 <div class="icon-btn">149 <svg class="back-icon" width="48" height="48" viewBox="0 0 24 24" fill="none">150 <path d="M15 19L8 12l7-7" stroke="#f3f7ef" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/>151 </svg>152 </div>153 <div class="search-field">154 <svg class="search-icon" viewBox="0 0 24 24" fill="none">155 <circle cx="10.5" cy="10.5" r="6.5" stroke="#f3f7ef" stroke-width="2.2"/>156 <path d="M16 16l5 5" stroke="#f3f7ef" stroke-width="2.2" stroke-linecap="round"/>157 </svg>158 <div class="placeholder">Oats</div>159 <svg class="mic-icon" viewBox="0 0 24 24" fill="none">160 <rect x="8" y="3" width="8" height="12" rx="4" stroke="#f3f7ef" stroke-width="2"/>161 <path d="M5 11a7 7 0 0014 0" stroke="#f3f7ef" stroke-width="2" stroke-linecap="round"/>162 <path d="M12 19v3" stroke="#f3f7ef" stroke-width="2" stroke-linecap="round"/>163 </svg>164 </div>165 </div>166 </div>167 168 <!-- Product sheet -->169 <div class="sheet">170 <div class="sheet-header">171 <div class="icon-btn" style="color:#333;">172 <svg width="44" height="44" viewBox="0 0 24 24" fill="none">173 <path d="M6 6l12 12M18 6L6 18" stroke="#111" stroke-width="2.4" stroke-linecap="round"/>174 </svg>175 </div>176 <div class="sheet-actions">177 <div class="icon-btn" style="color:#333;">178 <svg width="44" height="44" viewBox="0 0 24 24" fill="none">179 <path d="M4 12v8a2 2 0 002 2h12a2 2 0 002-2v-8" stroke="#111" stroke-width="2" stroke-linecap="round"/>180 <path d="M12 16V4" stroke="#111" stroke-width="2" stroke-linecap="round"/>181 <path d="M8 8l4-4 4 4" stroke="#111" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>182 </svg>183 </div>184 <div class="icon-btn" style="color:#333;">185 <svg class="heart-icon" viewBox="0 0 24 24" fill="none">186 <path d="M12 20s-7-4.5-7-9a4.5 4.5 0 018-2.7A4.5 4.5 0 0121 11c0 4.5-7 9-9 9z" stroke="#111" stroke-width="2" fill="none"/>187 </svg>188 </div>189 </div>190 </div>191 192 <div class="product-image">[IMG: Kawan Oat Chapati Pack]</div>193 194 <h1 class="title">Kawan Oat Chapati, 24 pieces, (Frozen)</h1>195 <div class="price">$7.49</div>196 197 <ul class="availability">198 <li>199 <svg class="check-icon" viewBox="0 0 24 24" fill="none">200 <circle cx="12" cy="12" r="10" fill="#2e7d32" opacity="0.15"/>201 <path d="M6 12l4 4 8-8" stroke="#2e7d32" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>202 </svg>203 <span>Pickup: Tomorrow 9am - 5pm</span>204 </li>205 <li>206 <svg class="check-icon" viewBox="0 0 24 24" fill="none">207 <circle cx="12" cy="12" r="10" fill="#2e7d32" opacity="0.15"/>208 <path d="M6 12l4 4 8-8" stroke="#2e7d32" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>209 </svg>210 <span>Delivery: Tomorrow 1pm - 8pm</span>211 </li>212 </ul>213 214 <div class="ebt-row">215 <div class="ebt-badge">EBT</div>216 <div>SNAP EBT eligible</div>217 </div>218 219 <div class="section-label">Product Recommendations</div>220 <div class="cards">221 <div class="card">222 <div class="img">[IMG: Kurkure Masala Munch Snack Pack]</div>223 <div class="fav-btn">224 <svg class="heart-icon" viewBox="0 0 24 24" fill="none">225 <path d="M12 20s-7-4.5-7-9a4.5 4.5 0 018-2.7A4.5 4.5 0 0121 11c0 4.5-7 9-9 9z" stroke="#999" stroke-width="2" fill="none"/>226 </svg>227 </div>228 <div class="name">Kurkure Masala Munch</div>229 </div>230 231 <div class="card">232 <div class="img">[IMG: Kawan Chapatti Pack]</div>233 <div class="fav-btn">234 <svg class="heart-icon" viewBox="0 0 24 24" fill="none">235 <path d="M12 20s-7-4.5-7-9a4.5 4.5 0 018-2.7A4.5 4.5 0 0121 11c0 4.5-7 9-9 9z" stroke="#999" stroke-width="2" fill="none"/>236 </svg>237 </div>238 <div class="name">Kawan Chapatti (Wheat)</div>239 </div>240 241 <div class="card">242 <div class="img">[IMG: Snack or Roti Pack]</div>243 <div class="fav-btn">244 <svg class="heart-icon" viewBox="0 0 24 24" fill="none">245 <path d="M12 20s-7-4.5-7-9a4.5 4.5 0 018-2.7A4.5 4.5 0 0121 11c0 4.5-7 9-9 9z" stroke="#999" stroke-width="2" fill="none"/>246 </svg>247 </div>248 <div class="name">Popular Roti / Snack</div>249 </div>250 </div>251 252 <div class="notify-wrap">253 <div class="notify-btn">Notify Me</div>254 </div>255 256 <div class="home-handle"></div>257 </div>258 259</div>260</body>261</html>