GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Amazon Search - iPhone 15</title>6<meta name="viewport" content="width=1080, initial-scale=1.0">7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9 #render-target {10 width: 1080px; height: 2400px;11 position: relative; overflow: hidden;12 background: #ffffff;13 }14 /* Top gradient header area */15 .top-gradient {16 background: linear-gradient(180deg, #6ec9c1 0%, #7acfc8 40%, #ffffff 100%);17 padding-bottom: 20px;18 }19 .status-bar {20 height: 60px; padding: 16px 24px; color: #083b3a; font-size: 28px; display: flex; align-items: center; justify-content: space-between;21 }22 .status-icons { display: flex; gap: 18px; align-items: center; }23 /* Search row */24 .search-row { display: flex; align-items: center; padding: 12px 24px 20px 24px; gap: 20px; }25 .icon-btn {26 width: 70px; height: 70px; border-radius: 35px; background: rgba(255,255,255,0.7);27 box-shadow: 0 4px 8px rgba(0,0,0,0.08); display: flex; align-items: center; justify-content: center;28 }29 .search-bar {30 flex: 1; height: 90px; background: #ffffff; border-radius: 20px;31 box-shadow: 0 6px 14px rgba(0,0,0,0.12); display: flex; align-items: center; padding: 0 24px; gap: 16px; border: 1px solid #d0d6da;32 }33 .search-text { flex: 1; color: #333; font-size: 34px; }34 .location-bar {35 background: rgba(255,255,255,0.7); border-top: 1px solid #d7e7e5; border-bottom: 1px solid #d7e7e5;36 padding: 18px 24px; display: flex; align-items: center; gap: 14px; color: #0f1111; font-size: 30px;37 }38 .chevron { width: 28px; height: 28px; margin-left: 6px; }39 /* Filter chips */40 .chip-row {41 display: flex; align-items: center; gap: 20px; padding: 16px 24px; border-bottom: 1px solid #ededed; background: #ffffff;42 }43 .chip {44 padding: 16px 24px; border: 1px solid #cbd5e1; border-radius: 18px; font-size: 28px; color: #0f1111; background: #f7fafc;45 }46 .switch { display: inline-flex; align-items: center; gap: 10px; }47 .switch .track { width: 84px; height: 40px; border-radius: 20px; background: #e9ecef; border: 1px solid #cbd5e1; position: relative; }48 .switch .thumb { width: 36px; height: 36px; background: #ffffff; border: 1px solid #cbd5e1; border-radius: 18px; position: absolute; left: 4px; top: 2px; }49 .title-block { padding: 24px; }50 .title-block h1 { margin: 0; font-size: 48px; font-weight: 700; color: #0f1111; }51 .sponsored { color: #6b7280; font-size: 26px; display: flex; align-items: center; gap: 10px; margin-top: 8px; }52 /* Product grid */53 .prod-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding: 20px 24px; }54 .img-box {55 width: 100%; height: 320px; background: #E0E0E0; border: 1px solid #BDBDBD;56 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 28px; border-radius: 8px;57 }58 .subtext { margin-top: 12px; color: #374151; font-size: 28px; }59 .deal-label {60 display: inline-block; background: #8b2d13; color: #ffffff; padding: 10px 16px; border-radius: 6px; font-size: 28px; margin: 10px 0 6px 0;61 }62 .price { font-size: 44px; font-weight: 700; color: #0f1111; }63 .prime-badge { display: inline-flex; align-items: center; gap: 6px; color: #2a73ff; font-size: 30px; margin-left: 8px; }64 .strike { color: #6b7280; text-decoration: line-through; margin-right: 8px; }65 .muted { color: #6b7280; font-size: 28px; }66 /* Big card */67 .choice-banner {68 position: absolute; left: 24px; top: -16px; background: #0b4d52; color: #e8f7f7; padding: 10px 18px; border-radius: 8px;69 font-size: 28px; font-weight: 600;70 }71 .card {72 position: relative; margin: 10px 24px; border: 1px solid #e5e7eb; border-radius: 18px; padding: 24px; display: grid; grid-template-columns: 320px 1fr; gap: 24px;73 box-shadow: 0 2px 4px rgba(0,0,0,0.04);74 }75 .card .img-box { height: 360px; }76 .card .brand { font-size: 30px; color: #0f1111; }77 .card .name { font-size: 36px; font-weight: 700; margin-top: 6px; color: #0f1111; }78 .rating { display: inline-flex; align-items: center; gap: 8px; font-size: 30px; color: #2b6cb0; margin: 10px 0; }79 .stars { display: inline-flex; gap: 4px; }80 .card .price { font-size: 42px; }81 .delivery { margin-top: 8px; font-size: 28px; color: #374151; }82 .link { color: #2b6cb0; text-decoration: underline; font-size: 28px; margin-top: 8px; display: inline-block; }83 /* Bottom nav */84 .bottom-nav {85 position: absolute; bottom: 0; left: 0; right: 0; height: 160px; border-top: 1px solid #e5e7eb; background: #ffffff;86 display: grid; grid-template-columns: repeat(5, 1fr); align-items: center; text-align: center;87 }88 .nav-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: #0f1111; font-size: 26px; }89 .nav-item.active { color: #1a9f85; }90 .center-drag { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); width: 300px; height: 10px; background: #d1d5db; border-radius: 6px; }91 /* Utility SVG colors */92 .icon { width: 36px; height: 36px; }93 .icon.lg { width: 44px; height: 44px; }94</style>95</head>96<body>97<div id="render-target">98 99 <div class="top-gradient">100 <div class="status-bar">101 <div>9:40</div>102 <div class="status-icons">103 <!-- simple signal dot -->104 <svg class="icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="5" fill="#083b3a"/></svg>105 <svg class="icon" viewBox="0 0 24 24"><path d="M3 8h18v10H3z" fill="#083b3a"/><path d="M16 6h-8l2-2h4z" fill="#083b3a"/></svg>106 </div>107 </div>108 109 <div class="search-row">110 <div class="icon-btn">111 <!-- back arrow -->112 <svg class="icon" viewBox="0 0 24 24">113 <path d="M14 6L8 12l6 6" stroke="#1f2937" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>114 </svg>115 </div>116 <div class="search-bar">117 <!-- search icon -->118 <svg class="icon" viewBox="0 0 24 24">119 <circle cx="10" cy="10" r="6" stroke="#4b5563" stroke-width="2" fill="none"></circle>120 <path d="M15 15l5 5" stroke="#4b5563" stroke-width="2" stroke-linecap="round"></path>121 </svg>122 <div class="search-text">iphone 15</div>123 <!-- camera icon -->124 <svg class="icon" viewBox="0 0 24 24">125 <rect x="3" y="6" width="18" height="12" rx="2" ry="2" stroke="#4b5563" stroke-width="2" fill="none"></rect>126 <circle cx="12" cy="12" r="3" stroke="#4b5563" stroke-width="2" fill="none"></circle>127 <path d="M7 6l2-2h6l2 2" stroke="#4b5563" stroke-width="2" fill="none"></path>128 </svg>129 </div>130 </div>131 132 <div class="location-bar">133 <!-- pin icon -->134 <svg class="icon" viewBox="0 0 24 24">135 <path d="M12 21s-6-6-6-10a6 6 0 1112 0c0 4-6 10-6 10z" stroke="#0f766e" stroke-width="2" fill="none"></path>136 <circle cx="12" cy="11" r="2" fill="#0f766e"></circle>137 </svg>138 <div>Delivering to Delhi 110001 - Update location</div>139 <svg class="chevron" viewBox="0 0 20 20">140 <path d="M4 7l6 6 6-6" stroke="#374151" stroke-width="2" fill="none" stroke-linecap="round"/>141 </svg>142 </div>143 </div>144 145 <div class="chip-row">146 <div class="chip switch">147 <span style="color:#2a73ff; font-weight:700;">prime</span>148 <div class="track"><div class="thumb"></div></div>149 </div>150 <div class="chip" style="background:#e8f2f9; color:#2563eb;">Electronics</div>151 <div class="chip" style="margin-left:auto;">Filters (1)152 <svg class="chevron" viewBox="0 0 20 20">153 <path d="M4 7l6 6 6-6" stroke="#374151" stroke-width="2" fill="none" stroke-linecap="round"/>154 </svg>155 </div>156 </div>157 158 <div class="title-block">159 <h1>iPhone 15. Newphoria</h1>160 <div class="sponsored">161 Sponsored162 <svg class="icon" viewBox="0 0 24 24">163 <circle cx="12" cy="12" r="10" stroke="#9ca3af" stroke-width="2" fill="none"></circle>164 <circle cx="12" cy="8" r="1.5" fill="#9ca3af"></circle>165 <path d="M12 11v6" stroke="#9ca3af" stroke-width="2" stroke-linecap="round"></path>166 </svg>167 </div>168 </div>169 170 <div class="prod-grid">171 <div>172 <div class="img-box">[IMG: Apple iPhone wordmark]</div>173 <div class="subtext">Shop Apple</div>174 </div>175 <div>176 <div class="img-box">[IMG: iPhone 15 product photo]</div>177 <div class="deal-label">Limited time Deal</div>178 <div class="price">₹83,999179 <span class="prime-badge">180 <!-- small check icon -->181 <svg class="icon" viewBox="0 0 24 24"><path d="M5 12l4 4 10-10" stroke="#2a73ff" stroke-width="2" fill="none" stroke-linecap="round"/></svg>182 prime183 </span>184 </div>185 <div class="muted"><span class="strike">₹89,900</span> (7% off)</div>186 </div>187 </div>188 189 <!-- Amazon's Choice big card -->190 <div style="position: relative; margin-top: 20px;">191 <div class="choice-banner">Amazon's Choice</div>192 <div class="card">193 <div class="img-box">[IMG: iPhone 15 (Blue) front]</div>194 <div>195 <div class="sponsored">Sponsored</div>196 <div class="brand">Apple</div>197 <div class="name">iPhone 15 (128 GB) - Blue</div>198 <div class="rating">199 4.5200 <div class="stars">201 <svg class="icon" viewBox="0 0 24 24"><path d="M12 3l3.2 6.5 7 1-5.2 4.8L18.5 22 12 18.5 5.5 22l1.5-6.7L1.8 10.5l7-1L12 3z" fill="#f59e0b"/></svg>202 <svg class="icon" viewBox="0 0 24 24"><path d="M12 3l3.2 6.5 7 1-5.2 4.8L18.5 22 12 18.5 5.5 22l1.5-6.7L1.8 10.5l7-1L12 3z" fill="#f59e0b"/></svg>203 <svg class="icon" viewBox="0 0 24 24"><path d="M12 3l3.2 6.5 7 1-5.2 4.8L18.5 22 12 18.5 5.5 22l1.5-6.7L1.8 10.5l7-1L12 3z" fill="#f59e0b"/></svg>204 <svg class="icon" viewBox="0 0 24 24"><path d="M12 3l3.2 6.5 7 1-5.2 4.8L18.5 22 12 18.5 5.5 22l1.5-6.7L1.8 10.5l7-1L12 3z" fill="#f59e0b"/></svg>205 <svg class="icon" viewBox="0 0 24 24"><path d="M12 3l3.2 6.5 7 1-5.2 4.8L18.5 22 12 18.5 5.5 22l1.5-6.7L1.8 10.5l7-1L12 3z" fill="#fcd34d"/></svg>206 </div>207 <span style="color:#6b7280;">(467)</span>208 </div>209 <div class="price">₹72,990 <span class="muted">M.R.P.: <span class="strike">₹79,900</span> (9% off)</span></div>210 <div class="prime-badge" style="margin:8px 0;">211 <svg class="icon" viewBox="0 0 24 24"><path d="M5 12l4 4 10-10" stroke="#2a73ff" stroke-width="2" fill="none" stroke-linecap="round"/></svg>212 prime213 </div>214 <div class="delivery"><b>FREE delivery Wed, 10 Jan</b></div>215 <div class="delivery">Or fastest delivery <b>Tomorrow, 9 Jan</b></div>216 <div class="delivery">Service: Setup at delivery</div>217 <div class="link">+4 colours/patterns</div>218 </div>219 </div>220 </div>221 222 <!-- Next sponsored card preview -->223 <div class="card" style="margin-top: 10px;">224 <div class="img-box">[IMG: iPhone 14 (Midnight) front]</div>225 <div>226 <div class="sponsored">Sponsored</div>227 <div class="brand">Apple</div>228 <div class="name">iPhone 14 (128 GB) - Midnight</div>229 <div class="rating">230 4.6231 <div class="stars">232 <svg class="icon" viewBox="0 0 24 24"><path d="M12 3l3.2 6.5 7 1-5.2 4.8L18.5 22 12 18.5 5.5 22l1.5-6.7L1.8 10.5l7-1L12 3z" fill="#f59e0b"/></svg>233 <svg class="icon" viewBox="0 0 24 24"><path d="M12 3l3.2 6.5 7 1-5.2 4.8L18.5 22 12 18.5 5.5 22l1.5-6.7L1.8 10.5l7-1L12 3z" fill="#f59e0b"/></svg>234 <svg class="icon" viewBox="0 0 24 24"><path d="M12 3l3.2 6.5 7 1-5.2 4.8L18.5 22 12 18.5 5.5 22l1.5-6.7L1.8 10.5l7-1L12 3z" fill="#f59e0b"/></svg>235 <svg class="icon" viewBox="0 0 24 24"><path d="M12 3l3.2 6.5 7 1-5.2 4.8L18.5 22 12 18.5 5.5 22l1.5-6.7L1.8 10.5l7-1L12 3z" fill="#f59e0b"/></svg>236 <svg class="icon" viewBox="0 0 24 24"><path d="M12 3l3.2 6.5 7 1-5.2 4.8L18.5 22 12 18.5 5.5 22l1.5-6.7L1.8 10.5l7-1L12 3z" fill="#fcd34d"/></svg>237 </div>238 </div>239 <div class="price">₹59,990</div>240 <div class="delivery">FREE delivery available</div>241 </div>242 </div>243 244 <!-- Bottom navigation -->245 <div class="bottom-nav">246 <div class="nav-item active">247 <svg class="lg" viewBox="0 0 24 24"><path d="M3 11l9-7 9 7v9H3z" stroke="#1a9f85" stroke-width="2" fill="none"/></svg>248 Home249 </div>250 <div class="nav-item">251 <svg class="lg" viewBox="0 0 24 24"><circle cx="12" cy="8" r="4" stroke="#111827" stroke-width="2" fill="none"/><path d="M4 21c1.5-4 6.5-4 8-4s6.5 0 8 4" stroke="#111827" stroke-width="2" fill="none"/></svg>252 You253 </div>254 <div class="nav-item">255 <svg class="lg" viewBox="0 0 24 24"><path d="M3 12l9-5 9 5-9 5-9-5z" stroke="#111827" stroke-width="2" fill="none"/><path d="M3 12v6l9 5 9-5v-6" stroke="#111827" stroke-width="2" fill="none"/></svg>256 More257 </div>258 <div class="nav-item">259 <svg class="lg" viewBox="0 0 24 24"><path d="M5 6h14l-2 8H7L5 6z" stroke="#111827" stroke-width="2" fill="none"/><circle cx="9" cy="19" r="2" fill="#111827"/><circle cx="17" cy="19" r="2" fill="#111827"/></svg>260 Cart261 </div>262 <div class="nav-item">263 <svg class="lg" viewBox="0 0 24 24"><pa