GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Search Results - iPhone 15</title>7<style>8 body { margin: 0; padding: 0; background: transparent; }9 #render-target {10 width: 1080px; height: 2400px;11 position: relative; overflow: hidden;12 background: #ffffff; font-family: Arial, Helvetica, sans-serif; color: #222;13 }14 .status-bar {15 height: 110px; padding: 0 32px;16 display: flex; align-items: center; justify-content: space-between;17 color: #4a4a4a; font-size: 34px;18 }19 .status-icons { display: flex; gap: 24px; align-items: center; }20 .icon { width: 36px; height: 36px; }21 .header {22 padding: 16px 32px 24px 32px;23 border-bottom: 1px solid #e6e6e6;24 }25 .search-row {26 display: flex; align-items: center; gap: 24px;27 }28 .back-btn {29 width: 72px; height: 72px; border-radius: 36px;30 display: flex; align-items: center; justify-content: center;31 }32 .search-box {33 flex: 1;34 background: #f3f4f5;35 border: 1px solid #d8d9db;36 border-radius: 16px;37 height: 88px;38 display: flex; align-items: center; padding: 0 24px; gap: 18px;39 color: #777; font-size: 34px;40 }41 .search-box .placeholder { color: #5e5e5e; flex: 1; }42 .cart-area { position: relative; width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; }43 .badge {44 position: absolute; top: -4px; right: -4px;45 background: #e53935; color: #fff; font-size: 26px; line-height: 26px;46 padding: 8px 10px; border-radius: 24px;47 }48 .chips-row { display: flex; gap: 18px; padding: 18px 32px; flex-wrap: wrap; }49 .chip {50 padding: 20px 26px; border: 1px solid #dcdcdc; border-radius: 28px;51 font-size: 32px; color: #444; background: #fff; display: inline-flex; align-items: center; gap: 12px;52 }53 .label-row { display: flex; gap: 18px; padding: 6px 32px 18px 32px; flex-wrap: wrap; }54 .label-pill {55 padding: 18px 22px; border: 1px solid #dcdcdc; border-radius: 20px; font-size: 30px; color: #4a4a4a; background: #fafafa; display: inline-flex; align-items: center; gap: 14px;56 }57 .section-header {58 margin-top: 10px;59 border-top: 10px solid #f1f1f1;60 border-bottom: 1px solid #ededed;61 padding: 28px 32px;62 display: flex; align-items: center; justify-content: space-between;63 }64 .section-title { font-size: 48px; font-weight: 700; color: #111; }65 .section-sub { font-size: 30px; color: #777; margin-top: 8px; }66 .apple-logo {67 width: 130px; height: 130px; display: flex; align-items: center; justify-content: center;68 }69 .list { padding: 0 16px 100px 16px; }70 .card {71 display: flex; gap: 28px; padding: 28px 16px; border-bottom: 1px solid #eee;72 }73 .img {74 width: 260px; height: 320px; background: #E0E0E0;75 border: 1px solid #BDBDBD; display: flex; align-items: center; justify-content: center; color: #757575; font-size: 28px;76 border-radius: 16px;77 }78 .details { flex: 1; padding-top: 6px; }79 .title { font-size: 40px; color: #222; font-weight: 600; margin-bottom: 12px; }80 .rating-row { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }81 .stars { display: inline-flex; gap: 6px; }82 .stars svg { width: 28px; height: 28px; }83 .rating-count { color: #666; font-size: 28px; }84 .assured { font-size: 26px; color: #1a73e8; display: inline-flex; align-items: center; gap: 6px; }85 .price-row { display: flex; align-items: baseline; gap: 20px; margin-top: 10px; }86 .discount { color: #1a9f42; font-weight: 700; font-size: 36px; }87 .old-price { color: #9e9e9e; font-size: 34px; text-decoration: line-through; }88 .new-price { color: #111; font-size: 42px; font-weight: 700; }89 .floating-btn {90 position: absolute; right: 36px; bottom: 280px;91 width: 120px; height: 120px; border-radius: 60px;92 background: #2e66ff; box-shadow: 0 8px 16px rgba(0,0,0,0.15);93 display: flex; align-items: center; justify-content: center;94 color: #ffd100; font-weight: 800; font-size: 48px;95 }96 .home-indicator {97 position: absolute; bottom: 60px; left: 50%; transform: translateX(-50%);98 width: 420px; height: 16px; background: #d8d8d8; border-radius: 12px;99 }100 .dot { width: 20px; height: 20px; border-radius: 50%; background: #aaa; }101</style>102</head>103<body>104<div id="render-target">105 106 <!-- Status Bar -->107 <div class="status-bar">108 <div>10:33</div>109 <div class="status-icons">110 <!-- simple network icon -->111 <svg class="icon" viewBox="0 0 24 24">112 <path d="M3 17h3v4H3zm5-6h3v10H8zm5-4h3v14h-3zm5-5h3v19h-3z" fill="#6b6b6b"></path>113 </svg>114 <!-- battery icon -->115 <svg class="icon" viewBox="0 0 26 14">116 <rect x="1" y="3" width="20" height="8" rx="2" ry="2" stroke="#6b6b6b" fill="none"></rect>117 <rect x="3" y="5" width="14" height="4" fill="#6b6b6b"></rect>118 <rect x="22" y="5" width="3" height="4" fill="#6b6b6b"></rect>119 </svg>120 </div>121 </div>122 123 <!-- Header with search -->124 <div class="header">125 <div class="search-row">126 <div class="back-btn">127 <svg width="44" height="44" viewBox="0 0 24 24">128 <path d="M15 6l-6 6 6 6" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>129 </svg>130 </div>131 132 <div class="search-box">133 <svg width="34" height="34" viewBox="0 0 24 24">134 <circle cx="10" cy="10" r="7" stroke="#888" stroke-width="2" fill="none"></circle>135 <path d="M15 15l6 6" stroke="#888" stroke-width="2" stroke-linecap="round"></path>136 </svg>137 <div class="placeholder">iphone 15</div>138 <!-- mic -->139 <svg width="34" height="34" viewBox="0 0 24 24">140 <rect x="8" y="4" width="8" height="10" rx="4" fill="#9aa0a6"></rect>141 <path d="M6 11a6 6 0 0012 0M12 17v3" stroke="#9aa0a6" stroke-width="2" fill="none" stroke-linecap="round"></path>142 </svg>143 <!-- camera -->144 <svg width="40" height="34" viewBox="0 0 24 24">145 <rect x="3" y="6" width="18" height="12" rx="2" fill="#9aa0a6"></rect>146 <circle cx="12" cy="12" r="4" fill="#f3f4f5"></circle>147 </svg>148 </div>149 150 <div class="cart-area">151 <svg width="44" height="44" viewBox="0 0 24 24">152 <path d="M3 6h2l2 10h10l2-8H7" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>153 <circle cx="9" cy="20" r="2" fill="#333"></circle>154 <circle cx="17" cy="20" r="2" fill="#333"></circle>155 </svg>156 <div class="badge">1</div>157 </div>158 </div>159 160 <!-- Filter chips -->161 <div class="chips-row">162 <div class="chip">Sort By163 <svg width="20" height="20" viewBox="0 0 24 24"><path d="M6 9l6 6 6-6" stroke="#666" stroke-width="2" fill="none" stroke-linecap="round"></path></svg>164 </div>165 <div class="chip">166 <svg width="22" height="22" viewBox="0 0 24 24"><path d="M4 6h16M6 12h12M10 18h4" stroke="#666" stroke-width="2" fill="none" stroke-linecap="round"></path></svg>167 Filter168 </div>169 <div class="chip">170 <svg width="22" height="22" viewBox="0 0 24 24"><rect x="4" y="5" width="7" height="14" stroke="#666" fill="none"></rect><rect x="13" y="5" width="7" height="12" stroke="#666" fill="none"></rect></svg>171 Compare172 </div>173 <div class="chip">Price174 <svg width="20" height="20" viewBox="0 0 24 24"><path d="M6 9l6 6 6-6" stroke="#666" stroke-width="2" fill="none" stroke-linecap="round"></path></svg>175 </div>176 <div class="chip">RAM</div>177 </div>178 179 <!-- Label pills -->180 <div class="label-row">181 <div class="label-pill">182 <svg width="22" height="22" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" stroke="#666" fill="none"></circle><text x="12" y="16" text-anchor="middle" font-size="12" fill="#666">%</text></svg>183 Big Bachat Deals184 </div>185 <div class="label-pill">186 <svg width="24" height="24" viewBox="0 0 24 24"><path d="M5 18l4-8 4 5 6-10" stroke="#666" stroke-width="2" fill="none" stroke-linecap="round"></path></svg>187 5G188 </div>189 <div class="label-pill">190 <svg width="24" height="24" viewBox="0 0 24 24"><path d="M12 3l9 9-9 9-9-9z" stroke="#3cb371" fill="none"></path></svg>191 Rs. 10000 - Rs. 15000192 </div>193 <div class="label-pill">194 <svg width="24" height="24" viewBox="0 0 24 24"><rect x="5" y="5" width="14" height="14" stroke="#666" fill="none"></rect><text x="12" y="15" text-anchor="middle" font-size="12" fill="#9561e2">NEW</text></svg>195 New Launch196 </div>197 </div>198 </div>199 200 <!-- Section Header -->201 <div class="section-header">202 <div>203 <div class="section-title">APPLE iPhone 15</div>204 <div class="section-sub">15.49 cm (6.1 inch) Super Retina XDR Display</div>205 </div>206 <div class="apple-logo">207 <svg width="110" height="110" viewBox="0 0 24 24">208 <path d="M16 13c2 0 3-2 3-4-1 0-2 1-2 1s1-3-2-3c-2 0-3 2-3 2s-1-2-3-2c-3 0-4 3-4 5 0 5 3 8 6 8 2 0 3-1 3-1s1 1 3 1c2 0 4-2 5-4-2-1-3-3-3-3s-1 0-2 0z" fill="#000"></path>209 </svg>210 </div>211 </div>212 213 <!-- List -->214 <div class="list">215 216 <!-- Card 1 -->217 <div class="card">218 <div class="img">[IMG: iPhone 15 Blue Front/Back]</div>219 <div class="details">220 <div class="title">APPLE iPhone 15 (Blue, 256 GB)</div>221 <div class="rating-row">222 <div class="stars">223 <svg viewBox="0 0 24 24"><path d="M12 2l3 7h7l-5 4 2 7-7-4-7 4 2-7-5-4h7z" fill="#1a9f42"></path></svg>224 <svg viewBox="0 0 24 24"><path d="M12 2l3 7h7l-5 4 2 7-7-4-7 4 2-7-5-4h7z" fill="#1a9f42"></path></svg>225 <svg viewBox="0 0 24 24"><path d="M12 2l3 7h7l-5 4 2 7-7-4-7 4 2-7-5-4h7z" fill="#1a9f42"></path></svg>226 <svg viewBox="0 0 24 24"><path d="M12 2l3 7h7l-5 4 2 7-7-4-7 4 2-7-5-4h7z" fill="#1a9f42"></path></svg>227 <svg viewBox="0 0 24 24"><path d="M12 2l3 7h7l-5 4 2 7-7-4-7 4 2-7-5-4h7z" fill="#1a9f42"></path></svg>228 </div>229 <div class="rating-count">(2,766)</div>230 <div class="assured">231 <svg width="18" height="18" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="#ffd100"></circle><path d="M8 12l3 3 5-6" stroke="#2e66ff" stroke-width="2" fill="none"></path></svg>232 Plus F-ASSURED233 </div>234 </div>235 <div class="price-row">236 <div class="discount">7% off</div>237 <div class="old-price">89,900</div>238 <div class="new-price">₹82,999</div>239 </div>240 </div>241 </div>242 243 <!-- Card 2 -->244 <div class="card">245 <div class="img">[IMG: iPhone 15 Blue Front/Back]</div>246 <div class="details">247 <div class="title">APPLE iPhone 15 (Blue, 512 GB)</div>248 <div class="rating-row">249 <div class="stars">250 <svg viewBox="0 0 24 24"><path d="M12 2l3 7h7l-5 4 2 7-7-4-7 4 2-7-5-4h7z" fill="#1a9f42"></path></svg>251 <svg viewBox="0 0 24 24"><path d="M12 2l3 7h7l-5 4 2 7-7-4-7 4 2-7-5-4h7z" fill="#1a9f42"></path></svg>252 <svg viewBox="0 0 24 24"><path d="M12 2l3 7h7l-5 4 2 7-7-4-7 4 2-7-5-4h7z" fill="#1a9f42"></path></svg>253 <svg viewBox="0 0 24 24"><path d="M12 2l3 7h7l-5 4 2 7-7-4-7 4 2-7-5-4h7z" fill="#1a9f42"></path></svg>254 <svg viewBox="0 0 24 24"><path d="M12 2l3 7h7l-5 4 2 7-7-4-7 4 2-7-5-4h7z" fill="#1a9f42"></path></svg>255 </div>256 <div class="rating-count">(2,766)</div>257 <div class="assured">258 <svg width="18" height="18" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="#ffd100"></circle><path d="M8 12l3 3 5-6" stroke="#2e66ff" stroke-width="2" fill="none"></path></svg>259 Plus F-ASSURED260 </div>261 </div>262 <div class="price-row">263 <div class="discount">6% off</div>264 <div class="old-price">1,09,900</div>265 <div class="new-price">₹1,02,999</div>266 </div>267 </div>268 </div>269 270 <!-- Card 3 -->271 <div class="card">272 <div class="img">[IMG: iPhone 15 Black Front/Back]</div>273 <div class="details">274 <div class="title">APPLE iPhone 15 (Black, 128 GB)</div>275 <div class="rating-row">276 <div class="stars">277 <svg viewBox="0 0 24 24"><path d="M12 2l3 7h7l-5 4 2 7-7-4-7 4 2-7-5-4h7z" fill="#1a9f42"></path></svg>278 <svg viewBox="0 0 24 24"><path d="M12 2l3 7h7l-5 4 2 7-7-4-7 4 2-7-5-4h7z" fill="#1a9f42"></path></svg>279 <svg viewBox="0 0 24 24"><path d="M12 2l3 7h7l-5 4 2 7-7-4-7 4 2-7-5-4h7z" fill="#1a9f42"></path></svg>280 <svg viewBox="0 0 24 24"><path d="M12 2l3 7h7l-5 4 2 7-7-4-7 4 2-7-5-4h7z" fill="#1a9f42"></path></svg>281 <svg viewBox="0 0 24 24"><path d="M12 2l3 7h7l-5 4 2 7-7-4-7 4 2-7-5-4h7z" fill="#1a9f42"></path></svg>282 </div>283 <div class="rating-count">(2,766)</div>284 <div class="assured">285 <svg width="18" height="18" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="#ffd100"></circle><path d="M8 12l3 3 5-6" stroke="#2e66ff" stroke-width="2" fill="none"></path></svg>286 Plus F-ASSURED287 </div>288 </div>289 <div class="price-row">290 <div class="discount">7% off</div>291 <div class="old-price">79,900</div>292 <div class="new-price">₹73,999</div>293 </div>294 </div>295 </div>296 297 <!-- Card 4 -->298 <div class="card">299 <div class="img">[IMG: iPhone 15 Black Front/Back]</div>300 <div class="details">301 <div class="title">APPLE iPhone 15 (Black, 512 GB)</div>302 <div class="rating-row">303 <div class="stars">304 <svg viewBox="0 0 24 24"><path d="M12 2l3 7h7l-5 4 2 7-7-4-7 4 2-7-5-4h7z" fill="#1a9f42"></path></svg>305 <svg viewBox="0 0 24 24"><path d="M12 2l3 7h7l-5 4 2 7-7-4-7 4 2-7-5-4h7z" fill="#1a9f42"></path></svg>306 <svg viewBox="0 0 24 24"><path d="M12 2l3 7h7l-5 4 2 7-7-4-7 4 2-7-5-4h7z" fill="#1a9f42"></path></svg>307 <svg viewBox="0 0 24 24"><path d="M12 2l3 7h7l-5 4 2 7-7-4-7 4 2-7-5-4h7z" fill="#1a9f42"></path></svg>308 <svg viewBox="0 0 24 24"><path d="M12 2l3 7h7l-5 4 2 7-7-4-7 4 2-7-5-4h7z" fill="#1a9f42"></path></svg>309 </div>310 <div class="rating-count">(2,766)</div>311 <div class="assured">312 <svg width="18" height="18" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="#ffd100"></circle><path d="M8 12l3 3 5-6" stroke="#2e66ff" stroke-width="2" fill="none"></path></svg>313 Plus F-ASSURED314 </div>315 </div>316 <div class="price-row">317 <div class="discount">6% off</div>318 <div class="old-price">1,09,900</div>319 <div class="new-price">₹1,02,999</div>320 </div>321 </div>322 </div>323 324 </div>325 326 <!-- Floating support button -->327 <div class="floating-btn">f</div>328 329 <!-- Home indicator -->330 <div class="home-indicator"></div>331 332</div>333</body>334</html>