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>Amazon Product Purchase UI Mock</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; color: #222; }9 #render-target {10 width: 1080px; height: 2400px; position: relative; overflow: hidden;11 background: #ffffff;12 }13 14 /* Header */15 .header {16 position: absolute; left: 0; top: 0; width: 100%; height: 220px;17 background: linear-gradient(180deg, #8fd2cc 0%, #b8e3db 100%);18 }19 .header-inner { position: absolute; left: 24px; right: 24px; bottom: 22px; display: flex; align-items: center; gap: 22px; }20 .icon-btn { width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; }21 .search-bar {22 flex: 1; height: 96px; background: #fff; border-radius: 24px;23 box-shadow: 0 2px 0 rgba(0,0,0,0.08); border: 1px solid #e5e5e5;24 display: flex; align-items: center; padding: 0 24px; gap: 18px;25 }26 .search-text { font-size: 36px; color: #555; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }27 .scan-btn {28 width: 72px; height: 72px; border-radius: 18px; border: 1px solid #d2d2d2; display: flex; align-items: center; justify-content: center; background: #fafafa;29 }30 31 .divider { position: absolute; left: 0; top: 220px; width: 100%; height: 10px; background: #e7e7e7; }32 33 /* Content */34 .content { position: absolute; left: 24px; right: 24px; top: 250px; padding-bottom: 320px; }35 .card {36 background: #fff; border: 1px solid #e3e3e3; border-radius: 24px;37 padding: 36px; box-shadow: 0 1px 0 rgba(0,0,0,0.03);38 }39 .card + .card { margin-top: 40px; }40 41 .title { font-weight: 700; font-size: 44px; margin-bottom: 10px; }42 .price { font-size: 44px; color: #c53a35; margin-bottom: 18px; }43 .fulfilled {44 display: inline-flex; align-items: center; gap: 10px;45 background: #444; color: #fff; border-radius: 14px; padding: 8px 14px; font-size: 28px; margin-bottom: 18px;46 }47 .fulfilled .a-badge { width: 28px; height: 28px; background: #f6a900; color: #222; border-radius: 6px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; font-size: 24px; }48 .line { font-size: 34px; margin: 10px 0; }49 .blue { color: #1e88e5; }50 .bold { font-weight: 700; }51 .green { color: #2e7d32; }52 53 .loc-row { display: flex; align-items: center; gap: 16px; font-size: 34px; margin: 16px 0; }54 .muted { color: #666; }55 .stock { color: #2f9e44; font-size: 42px; margin-top: 22px; }56 57 .qty-select {58 margin-top: 22px; width: 220px; height: 90px; border: 1px solid #ddd; border-radius: 18px;59 display: flex; align-items: center; justify-content: space-between; padding: 0 24px; background: #f7f7f7; box-shadow: 0 2px 0 rgba(0,0,0,0.06);60 font-size: 34px; color: #444;61 }62 63 .btn {64 height: 120px; border-radius: 60px; display: flex; align-items: center; justify-content: center;65 font-size: 40px; font-weight: 700; margin-top: 26px; border: none;66 }67 .btn.cart { background: linear-gradient(180deg, #ffe46a 0%, #ffd54f 100%); color: #3f3f3f; }68 .btn.buy { background: linear-gradient(180deg, #f6a64d 0%, #f39a37 100%); color: #212121; }69 70 .secure { display: flex; align-items: center; gap: 16px; margin-top: 26px; color: #2c7a85; font-size: 34px; }71 .seller { margin-top: 18px; font-size: 34px; }72 .seller .blue { color: #1e88e5; }73 74 .radio {75 position: absolute; top: 26px; right: 26px; width: 64px; height: 64px; border-radius: 32px; border: 8px solid #2aa7a1;76 box-sizing: border-box;77 }78 79 /* Subscribe card */80 .sub-header { font-size: 44px; font-weight: 700; display: flex; align-items: center; gap: 16px; }81 .tag { background: #f0a400; color: #fff; border-radius: 14px; padding: 6px 16px; font-weight: 700; font-size: 32px; }82 .tag.gray { background: #cfcfcf; color: #666; }83 84 .sub-price { font-size: 42px; color: #c53a35; margin: 12px 0; }85 .sub-note { font-size: 36px; font-weight: 700; margin-bottom: 6px; }86 .sub-from { font-size: 30px; color: #666; }87 88 /* Bottom navigation */89 .tabbar {90 position: absolute; left: 0; bottom: 0; width: 100%; height: 200px;91 background: #ffffff; border-top: 1px solid #e2e2e2; box-shadow: 0 -2px 0 rgba(0,0,0,0.05);92 }93 .tabs { display: flex; height: 140px; align-items: center; justify-content: space-around; padding-top: 10px; }94 .tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: #666; font-size: 28px; }95 .tab.active { color: #2aa7a1; }96 .badge {97 position: absolute; top: -8px; right: -8px; background: #ff7043; color: #fff; border-radius: 18px; font-size: 22px; padding: 4px 10px;98 }99 .gesture { position: absolute; left: 50%; transform: translateX(-50%); bottom: 10px; width: 380px; height: 18px; background: #bdbdbd; border-radius: 10px; opacity: 0.6; }100</style>101</head>102<body>103<div id="render-target">104 105 <!-- Header -->106 <div class="header"></div>107 <div class="header-inner">108 <div class="icon-btn" aria-label="Back">109 <svg width="48" height="48" viewBox="0 0 24 24">110 <path d="M15 18l-6-6 6-6" stroke="#212121" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>111 </svg>112 </div>113 114 <div class="search-bar">115 <svg width="44" height="44" viewBox="0 0 24 24">116 <circle cx="11" cy="11" r="7" stroke="#7a7a7a" stroke-width="2" fill="none"/>117 <path d="M20 20l-4.2-4.2" stroke="#7a7a7a" stroke-width="2" fill="none" stroke-linecap="round"/>118 </svg>119 <div class="search-text">Saffola Classic Masala oats</div>120 <div class="scan-btn">121 <svg width="36" height="36" viewBox="0 0 24 24">122 <path d="M4 8V5h3M20 8V5h-3M4 16v3h3M20 16v3h-3" stroke="#777" stroke-width="2" fill="none" stroke-linecap="round"/>123 <rect x="7" y="7" width="10" height="10" rx="2" stroke="#777" stroke-width="2" fill="none"/>124 </svg>125 </div>126 </div>127 </div>128 <div class="divider"></div>129 130 <!-- Content -->131 <div class="content">132 133 <div class="card" style="position: relative;">134 <div class="title">One-time purchase:</div>135 <div class="price">₹167.00 (<span class="muted">₹334.00 / kg</span>)</div>136 137 <div class="fulfilled"><span class="a-badge">a</span> Fulfilled</div>138 139 <div class="line">140 <span class="blue">FREE delivery</span> <span class="bold">Sunday, 17 December</span> on orders dispatched by Amazon over ₹499. Order within141 <span class="green bold">9 hrs 18 mins.</span> <span class="blue">Details</span>142 </div>143 144 <div class="loc-row">145 <svg width="40" height="40" viewBox="0 0 24 24">146 <path d="M12 21s-6-5.2-6-10a6 6 0 1112 0c0 4.8-6 10-6 10z" stroke="#676767" stroke-width="2" fill="none"/>147 <circle cx="12" cy="11" r="2.5" fill="#676767"/>148 </svg>149 <span>Delivering to Faridabad 121004 - <span class="blue">Update location</span></span>150 </div>151 152 <div class="line muted">Use by: 14 MAR 2024</div>153 <div class="line muted">Available at a lower price from <span class="blue">other sellers</span> that may not offer free Prime shipping.</div>154 155 <div class="stock">In stock</div>156 157 <div class="qty-select">158 <span>Qty: 2</span>159 <svg width="34" height="34" viewBox="0 0 24 24">160 <path d="M6 9l6 6 6-6" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>161 </svg>162 </div>163 164 <button class="btn cart">Add to Cart</button>165 <button class="btn buy">Buy Now</button>166 167 <div class="secure">168 <svg width="34" height="34" viewBox="0 0 24 24">169 <rect x="5" y="10" width="14" height="10" rx="2" stroke="#8a8a8a" stroke-width="2" fill="none"/>170 <path d="M8 10V7a4 4 0 118 0v3" stroke="#8a8a8a" stroke-width="2" fill="none"/>171 </svg>172 <span>Secure transaction</span>173 </div>174 175 <div class="seller">Sold by <span class="blue">Amazon Retail</span> and <span class="blue">Fulfilled by Amazon</span>.</div>176 177 <div class="radio"></div>178 </div>179 180 <div class="card">181 <div class="sub-header">182 <span>Subscribe & Save:</span>183 <span class="tag">5%</span>184 <span class="tag gray">10%</span>185 </div>186 <div class="sub-price">₹158.65 (<span class="muted">₹317.30 / kg</span>)</div>187 <div class="sub-note">First delivery on December 17</div>188 <div class="sub-from">Ships from: Amazon</div>189 </div>190 191 </div>192 193 <!-- Bottom Navigation -->194 <div class="tabbar">195 <div class="tabs">196 <div class="tab active">197 <svg width="48" height="48" viewBox="0 0 24 24">198 <path d="M3 10l9-7 9 7v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-9z" stroke="#2aa7a1" stroke-width="2" fill="none"/>199 </svg>200 <div>Home</div>201 </div>202 <div class="tab">203 <svg width="48" height="48" viewBox="0 0 24 24">204 <circle cx="12" cy="8" r="4" stroke="#666" stroke-width="2" fill="none"/>205 <path d="M4 20c1.7-4 14.3-4 16 0" stroke="#666" stroke-width="2" fill="none" stroke-linecap="round"/>206 </svg>207 <div>You</div>208 </div>209 <div class="tab">210 <svg width="48" height="48" viewBox="0 0 24 24">211 <rect x="5" y="5" width="14" height="14" rx="2" stroke="#666" stroke-width="2" fill="none"/>212 <path d="M9 9h6v6H9z" fill="#666"/>213 </svg>214 <div>More</div>215 </div>216 <div class="tab" style="position: relative;">217 <svg width="48" height="48" viewBox="0 0 24 24">218 <path d="M6 6h14l-2 8H8L6 6z" stroke="#666" stroke-width="2" fill="none"/>219 <circle cx="9" cy="19" r="2" fill="#666"/>220 <circle cx="17" cy="19" r="2" fill="#666"/>221 </svg>222 <div class="badge">2</div>223 <div>Cart</div>224 </div>225 <div class="tab">226 <svg width="48" height="48" viewBox="0 0 24 24">227 <path d="M4 6h16M4 12h16M4 18h16" stroke="#666" stroke-width="2" stroke-linecap="round"/>228 </svg>229 <div>Menu</div>230 </div>231 </div>232 <div class="gesture"></div>233 </div>234 235</div>236</body>237</html>