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>Amazon - iPhone 15</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; position:relative; overflow:hidden;10 background:#ffffff; color:#111;11 }12 13 /* Top gradient header */14 .top-gradient{15 position:relative;16 height:280px;17 background: linear-gradient(180deg, #a7e1dc 0%, #cbeee7 60%, #e4f6f2 100%);18 box-shadow: inset 0 -1px 0 rgba(0,0,0,0.06);19 }20 .status-bar{21 height:70px; display:flex; align-items:center; justify-content:space-between;22 padding:0 36px; font-weight:600; color:#0a0a0a; font-size:36px;23 }24 .status-icons{ display:flex; gap:22px; align-items:center; }25 .status-icons .ic{26 width:32px; height:22px; background:#1e1e1e; border-radius:4px;27 }28 .status-icons .dot{ width:14px; height:14px; background:#1e1e1e; border-radius:50%; }29 30 .back-icon{31 position:absolute; left:24px; top:120px; width:72px; height:72px;32 display:flex; align-items:center; justify-content:center; color:#333;33 }34 .back-icon svg{ width:36px; height:36px; }35 36 .search-wrap{37 position:absolute; left:112px; right:24px; top:108px;38 }39 .search-bar{40 height:90px; background:#fff; border-radius:50px; display:flex;41 align-items:center; padding:0 26px; box-shadow: 0 2px 0 rgba(0,0,0,0.06) inset;42 border:1px solid #dfe5e7;43 }44 .search-icon svg{ width:38px; height:38px; fill:#616161; }45 .search-text{ flex:1; color:#111; font-size:38px; padding-left:18px; }46 .cam-icon{47 width:64px; height:64px; border-radius:16px; border:2px solid #cfd8dc;48 display:flex; align-items:center; justify-content:center; color:#616161;49 }50 .cam-icon svg{ width:34px; height:34px; }51 52 /* Product info */53 .content{ padding:20px 28px 0 28px; }54 .link-store{ color:#0071e3; font-size:40px; margin-top:8px; }55 .title-row{ display:flex; align-items:flex-start; justify-content:space-between; margin-top:8px; }56 .prod-title{ font-size:42px; font-weight:600; color:#222; line-height:1.25; max-width:720px; }57 .rating{ display:flex; align-items:center; gap:10px; margin-top:10px; }58 .stars svg{ width:34px; height:34px; }59 .rating-count{ color:#444; font-size:34px; }60 61 .choice-row{62 display:flex; align-items:center; gap:18px; margin:18px 0 10px 0;63 }64 .choice-badge{65 background:#1f2937; color:#fff; padding:10px 18px; border-radius:10px;66 font-size:30px; display:inline-flex; align-items:center; gap:12px;67 }68 .choice-badge .bar{ width:18px; height:18px; background:#f59e0b; border-radius:3px; }69 .choice-text{ color:#3a3a3a; font-size:30px; }70 71 /* Image block */72 .phone-img{73 position:relative; height:1180px; border-radius:24px; overflow:hidden;74 border:1px solid #d5d5d5; background:#E0E0E0;75 display:flex; align-items:center; justify-content:center; color:#6b6b6b; font-size:42px; letter-spacing:.2px;76 }77 .badge-off{78 position:absolute; left:24px; top:44px; width:140px; height:140px; background:#a9442a;79 color:#fff; border-radius:80px; display:flex; align-items:center; justify-content:center; flex-direction:column;80 font-weight:700; box-shadow:0 2px 8px rgba(0,0,0,0.2);81 }82 .share-btn{83 position:absolute; right:24px; top:44px; width:96px; height:96px; background:#ffffffd9;84 border-radius:60px; display:flex; align-items:center; justify-content:center; border:1px solid #d9d9d9;85 }86 .heart-btn{87 position:absolute; left:24px; bottom:24px; width:96px; height:96px; background:#ffffff;88 border-radius:60px; display:flex; align-items:center; justify-content:center; border:1px solid #d9d9d9;89 }90 .share-btn svg, .heart-btn svg{ width:44px; height:44px; fill:none; stroke:#333; stroke-width:2.5; }91 92 .dots{93 display:flex; justify-content:center; gap:22px; padding:22px 0 14px 0;94 }95 .dots .d{ width:20px; height:20px; border-radius:50%; border:2px solid #99a0a3; }96 .dots .d.active{ background:#2a6f7a; border-color:#2a6f7a; }97 98 /* Series */99 .series{100 padding:10px 28px 220px 28px; position:relative;101 }102 .series-title{ font-size:56px; font-weight:800; margin-bottom:8px; }103 .series-sub{ color:#666; font-size:36px; }104 .chev{ position:absolute; right:28px; top:18px; }105 .chev svg{ width:44px; height:44px; fill:none; stroke:#111; stroke-width:3; }106 .deal-pill{107 position:absolute; left:28px; bottom:190px; background:#c83434; color:#fff;108 padding:14px 28px; border-radius:16px; font-size:34px; font-weight:700;109 }110 111 /* Bottom nav */112 .bottom-nav{113 position:absolute; left:0; right:0; bottom:0; height:176px; background:#ffffff;114 border-top:1px solid #e1e1e1; display:flex; justify-content:space-around; align-items:center;115 }116 .nav-item{ display:flex; flex-direction:column; align-items:center; gap:10px; color:#222; font-size:30px; }117 .nav-item svg{ width:54px; height:54px; }118 .nav-item.active{ color:#0f766e; }119 .cart-bubble{120 position:absolute; top:-8px; right:-14px; background:#10b981; color:#fff; border-radius:16px; padding:2px 10px; font-size:24px;121 }122 .nav-icon{ position:relative; }123</style>124</head>125<body>126<div id="render-target">127 128 <!-- Top gradient header with search -->129 <div class="top-gradient">130 <div class="status-bar">131 <div class="time">9:57</div>132 <div class="status-icons">133 <div class="dot"></div>134 <div class="ic"></div>135 </div>136 </div>137 138 <div class="back-icon">139 <svg viewBox="0 0 24 24"><path d="M15.5 4l-8 8 8 8" stroke="#222" stroke-width="2.6" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>140 </div>141 142 <div class="search-wrap">143 <div class="search-bar">144 <div class="search-icon">145 <svg viewBox="0 0 24 24"><circle cx="10" cy="10" r="7" stroke="#616161" stroke-width="2" fill="none"/><path d="M15.5 15.5L22 22" stroke="#616161" stroke-width="2" /></svg>146 </div>147 <div class="search-text">iphone 15</div>148 <div class="cam-icon" aria-label="scan">149 <svg viewBox="0 0 24 24"><rect x="4" y="4" width="16" height="16" rx="3" ry="3" stroke="#616161" fill="none" stroke-width="2"/><circle cx="12" cy="12" r="4" fill="none" stroke="#616161" stroke-width="2"/></svg>150 </div>151 </div>152 </div>153 </div>154 155 <!-- Content -->156 <div class="content">157 <div class="link-store">Visit the Apple Store</div>158 159 <div class="title-row">160 <div class="prod-title">Apple iPhone 15 (256 GB) - Black</div>161 <div class="rating">162 <div class="stars">163 <svg viewBox="0 0 24 24"><path fill="#f59e0b" d="M12 2l3 6 6 .9-4.4 4.2 1 6-5.6-3-5.6 3 1-6L3 8.9 9 8z"/></svg>164 <svg viewBox="0 0 24 24"><path fill="#f59e0b" d="M12 2l3 6 6 .9-4.4 4.2 1 6-5.6-3-5.6 3 1-6L3 8.9 9 8z"/></svg>165 <svg viewBox="0 0 24 24"><path fill="#f59e0b" d="M12 2l3 6 6 .9-4.4 4.2 1 6-5.6-3-5.6 3 1-6L3 8.9 9 8z"/></svg>166 <svg viewBox="0 0 24 24"><path fill="#f59e0b" d="M12 2l3 6 6 .9-4.4 4.2 1 6-5.6-3-5.6 3 1-6L3 8.9 9 8z"/></svg>167 <svg viewBox="0 0 24 24"><path fill="#f59e0b" d="M12 2l3 6 6 .9-4.4 4.2 1 6-5.6-3-5.6 3 1-6L3 8.9 9 8z"/></svg>168 </div>169 <div class="rating-count">467</div>170 </div>171 </div>172 173 <div class="choice-row">174 <div class="choice-badge"><span class="bar"></span>Amazon's Choice</div>175 <div class="choice-text">for "iphone 15 256gb"</div>176 </div>177 178 <div class="phone-img">179 [IMG: iPhone 15 close-up product photo]180 <div class="badge-off"><div>7%</div><div style="font-weight:600;font-size:28px;">off</div></div>181 182 <div class="share-btn" title="Share">183 <svg viewBox="0 0 24 24"><circle cx="6" cy="12" r="2.3"/><circle cx="12" cy="6" r="2.3"/><circle cx="18" cy="12" r="2.3"/><path d="M7.8 10.8l3.8-3.8M12.4 8.6l3.9 3.9" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round"/></svg>184 </div>185 186 <div class="heart-btn" title="Wishlist">187 <svg viewBox="0 0 24 24"><path d="M12 21s-7-4.6-9-8.2C1.5 9 3.3 6 6.6 6c2 0 3.1 1 3.4 1.6C10.3 7 11.4 6 13.4 6c3.3 0 5.1 3 3.6 6.8C19 16.4 12 21 12 21z"/></svg>188 </div>189 </div>190 191 <div class="dots">192 <div class="d active"></div>193 <div class="d"></div>194 <div class="d"></div>195 <div class="d"></div>196 <div class="d"></div>197 <div class="d"></div>198 </div>199 200 <div class="series">201 <div class="series-title">iPhone 15 Series</div>202 <div class="chev"><svg viewBox="0 0 24 24"><path d="M6 10l6 6 6-6" stroke-linecap="round" stroke-linejoin="round"/></svg></div>203 <div class="series-sub">4 options to choose from</div>204 <div class="deal-pill">Deal</div>205 </div>206 </div>207 208 <!-- Bottom navigation -->209 <div class="bottom-nav">210 <div class="nav-item active">211 <svg viewBox="0 0 24 24"><path d="M3 10l9-7 9 7v9a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1z" fill="#0f766e"/></svg>212 <div>Home</div>213 </div>214 <div class="nav-item">215 <svg viewBox="0 0 24 24"><circle cx="12" cy="8" r="4" fill="#333"/><path d="M4 20c1.5-4 6.5-6 8-6s6.5 2 8 6" fill="#333"/></svg>216 <div>You</div>217 </div>218 <div class="nav-item">219 <svg viewBox="0 0 24 24"><rect x="4" y="4" width="7" height="7" fill="#333"/><rect x="13" y="4" width="7" height="7" fill="#333"/><rect x="4" y="13" width="7" height="7" fill="#333"/></svg>220 <div>More</div>221 </div>222 <div class="nav-item">223 <div class="nav-icon">224 <svg viewBox="0 0 24 24"><path d="M3 5h3l2 12h10l2-8H7" fill="none" stroke="#333" stroke-width="2"/><circle cx="10" cy="20" r="1.6" fill="#333"/><circle cx="17" cy="20" r="1.6" fill="#333"/></svg>225 <span class="cart-bubble">0</span>226 </div>227 <div>Cart</div>228 </div>229 <div class="nav-item">230 <svg viewBox="0 0 24 24"><path d="M3 6h18M3 12h18M3 18h18" stroke="#333" stroke-width="2" /></svg>231 <div>Menu</div>232 </div>233 </div>234 235</div>236</body>237</html>