GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<title>iPhone 15 - Details</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }7 #render-target {8 width: 1080px;9 height: 2400px;10 position: relative;11 overflow: hidden;12 background: linear-gradient(180deg, #aee2e3 0%, #c9efe9 40%, #ffffff 70%);13 color: #1f2a2e;14 }15 16 /* Status bar */17 .status-bar {18 height: 80px;19 display: flex;20 align-items: center;21 padding: 0 40px;22 font-weight: 600;23 color: #0f2a2f;24 font-size: 36px;25 }26 .status-icons {27 margin-left: auto;28 display: flex;29 align-items: center;30 gap: 22px;31 color: #2f3b40;32 font-size: 30px;33 }34 35 /* Header search */36 .header {37 display: flex;38 align-items: center;39 padding: 20px 28px 10px 28px;40 }41 .back-btn {42 width: 90px; height: 90px;43 display: flex; align-items: center; justify-content: center;44 border-radius: 14px;45 }46 .back-btn svg { width: 50px; height: 50px; fill: #2e3e44; }47 .search-bar {48 margin-left: 10px;49 flex: 1;50 height: 100px;51 background: #ffffff;52 border-radius: 22px;53 box-shadow: 0 2px 0 rgba(0,0,0,0.04) inset;54 border: 1px solid #d7e6e8;55 display: flex;56 align-items: center;57 padding: 0 28px;58 gap: 26px;59 }60 .search-icon svg { width: 46px; height: 46px; fill: #5a6b70; }61 .search-text {62 font-size: 40px;63 color: #2a3a3f;64 flex: 1;65 }66 .camera-icon {67 width: 72px; height: 72px;68 border-radius: 18px;69 display: flex; align-items: center; justify-content: center;70 background: #eaf7f6;71 border: 1px solid #cfe3e4;72 }73 .camera-icon svg { width: 46px; height: 46px; fill: #415b60; }74 75 /* Tabs row */76 .tabs {77 display: flex;78 align-items: center;79 padding: 18px 28px;80 gap: 36px;81 border-top-left-radius: 24px;82 border-top-right-radius: 24px;83 }84 .tab {85 font-size: 38px;86 color: #34464b;87 padding-bottom: 18px;88 }89 .tab.active {90 font-weight: 700;91 border-bottom: 6px solid #2aa3a6;92 }93 .up-btn {94 margin-left: auto;95 width: 92px; height: 92px;96 border-radius: 14px;97 background: #f5f7f8;98 border: 1px solid #e3e7ea;99 display: flex; align-items: center; justify-content: center;100 }101 .up-btn svg { width: 44px; height: 44px; fill: #3f555b; }102 103 /* Details list */104 .details {105 background: #ffffff;106 border-top: 1px solid #eaecef;107 padding: 18px 32px 18px 32px;108 }109 .detail-row {110 display: grid;111 grid-template-columns: 360px 1fr;112 gap: 30px;113 padding: 26px 0;114 border-bottom: 1px solid #eef2f4;115 }116 .detail-row:last-child { border-bottom: none; }117 .label {118 font-size: 34px; color: #4a5b61; line-height: 1.3;119 }120 .value {121 font-size: 36px; color: #172b32; font-weight: 600; line-height: 1.3;122 }123 .see-more {124 display: inline-flex; align-items: center; gap: 12px; font-size: 36px;125 color: #2aa3a6; font-weight: 700; margin: 16px 0 14px 0;126 }127 .see-more svg { width: 34px; height: 34px; fill: #2aa3a6; }128 129 /* Frequently bought together */130 .section-title {131 font-size: 48px; font-weight: 800; color: #101e22; padding: 30px 32px 10px 32px;132 }133 .fbt {134 background: #ffffff;135 padding: 20px 32px 30px 32px;136 }137 .fbt-items {138 display: flex; align-items: center; gap: 40px;139 padding: 20px 0 30px 0;140 }141 .img-placeholder {142 width: 320px; height: 320px;143 background: #E0E0E0;144 border: 1px solid #BDBDBD;145 display: flex; align-items: center; justify-content: center;146 color: #757575; font-size: 30px; text-align: center;147 border-radius: 24px;148 }149 .plus {150 font-size: 90px; color: #8a9aa0; font-weight: 700;151 }152 .buy-both {153 margin-top: 8px;154 height: 120px;155 border: 1px solid #dfe6ea;156 border-radius: 26px;157 display: flex; align-items: center;158 padding: 0 32px;159 font-size: 42px;160 color: #182a30;161 justify-content: space-between;162 box-shadow: 0 1px 3px rgba(0,0,0,0.04);163 }164 .chevron {165 width: 50px; height: 50px;166 }167 .chevron svg { width: 50px; height: 50px; fill: #66767b; }168 169 /* Box contents */170 .box-section {171 background: #ffffff;172 padding: 24px 32px 28px 32px;173 }174 .mini-title {175 font-size: 46px; font-weight: 800; margin-bottom: 20px; color: #101e22;176 }177 .bullet-list {178 margin: 0; padding: 0 0 0 38px; color: #26363c; font-size: 40px;179 }180 .bullet-list li { margin: 18px 0; }181 182 /* Manufacturer image */183 .manufacturer {184 background: #ffffff;185 padding: 20px 32px 32px 32px;186 }187 .manu-title {188 font-size: 46px; font-weight: 800; color: #101e22; margin-bottom: 22px;189 }190 .wide-image {191 width: 100%;192 height: 520px;193 background: #E0E0E0;194 border: 1px solid #BDBDBD;195 display: flex; align-items: center; justify-content: center;196 color: #757575; font-size: 34px;197 border-radius: 18px;198 }199 200 /* Bottom navigation */201 .bottom-nav {202 position: absolute;203 bottom: 0;204 left: 0;205 width: 1080px;206 height: 180px;207 background: #ffffff;208 border-top: 1px solid #e9eef1;209 display: flex; align-items: center; justify-content: space-around;210 }211 .nav-item {212 display: flex; flex-direction: column; align-items: center; justify-content: center;213 color: #37464b; gap: 12px;214 }215 .nav-item.active { color: #0e9ea3; }216 .nav-item svg { width: 60px; height: 60px; fill: currentColor; }217 .nav-item span { font-size: 34px; }218 219</style>220</head>221<body>222<div id="render-target">223 224 <!-- Status Bar -->225 <div class="status-bar">226 9:58227 <div class="status-icons">228 <span>📶</span>229 <span>🔋</span>230 </div>231 </div>232 233 <!-- Header Search -->234 <div class="header">235 <div class="back-btn" aria-label="Back">236 <svg viewBox="0 0 24 24"><path d="M15.5 4l-9 8 9 8 1.5-1.7L9 12l8-6.3z"/></svg>237 </div>238 <div class="search-bar">239 <div class="search-icon">240 <svg viewBox="0 0 24 24"><path d="M15.5 14h-.8l-.3-.3a6.5 6.5 0 10-.9.9l.3.3v.8l5 5 1.5-1.5-5-5zm-6 0a4.5 4.5 0 110-9 4.5 4.5 0 010 9z"/></svg>241 </div>242 <div class="search-text">iphone 15</div>243 <div class="camera-icon" aria-label="Scan">244 <svg viewBox="0 0 24 24"><path d="M4 6a2 2 0 012-2h3l1-1h4l1 1h3a2 2 0 012 2v12a2 2 0 01-2 2H6a2 2 0 01-2-2V6zm8 2a5 5 0 100 10 5 5 0 000-10zm0 2.2a2.8 2.8 0 110 5.6 2.8 2.8 0 010-5.6z"/></svg>245 </div>246 </div>247 </div>248 249 <!-- Tabs -->250 <div class="tabs">251 <div class="tab active">Details</div>252 <div class="tab">Compare</div>253 <div class="tab">Questions</div>254 <div class="tab">Reviews</div>255 <div class="up-btn" aria-label="Scroll to top">256 <svg viewBox="0 0 24 24"><path d="M12 8l-7 7 1.4 1.4L12 11.8l5.6 5.6L19 15z"/></svg>257 </div>258 </div>259 260 <!-- Details section -->261 <div class="details">262 <div class="detail-row">263 <div class="label">Model Name</div>264 <div class="value">iPhone 15</div>265 </div>266 <div class="detail-row">267 <div class="label">Network Service Provider</div>268 <div class="value">Unlocked for All Carriers</div>269 </div>270 <div class="detail-row">271 <div class="label">Operating System</div>272 <div class="value">iOS</div>273 </div>274 <div class="detail-row">275 <div class="label">Cellular Technology</div>276 <div class="value">5G</div>277 </div>278 <div class="detail-row">279 <div class="label">Memory Storage Capacity</div>280 <div class="value">256 GB</div>281 </div>282 <div class="detail-row">283 <div class="label">Connectivity Technology</div>284 <div class="value">Wi‑Fi 6 (802.11ax) with 2x2 MIMO; Bluetooth 5.3</div>285 </div>286 <div class="see-more">287 <svg viewBox="0 0 24 24"><path d="M12 15l-5-5h10z"/></svg>288 See more289 </div>290 </div>291 292 <!-- Frequently bought together -->293 <div class="section-title">Frequently bought together</div>294 <div class="fbt">295 <div class="fbt-items">296 <div class="img-placeholder">[IMG: iPhone 15]</div>297 <div class="plus">+</div>298 <div class="img-placeholder">[IMG: USB-C Power Adapter]</div>299 </div>300 <div class="buy-both">301 <div>Buy Both: ₹85698<span style="font-size:28px; vertical-align: super;">00</span></div>302 <div class="chevron">303 <svg viewBox="0 0 24 24"><path d="M9 6l6 6-6 6z"/></svg>304 </div>305 </div>306 </div>307 308 <!-- Box contents -->309 <div class="box-section">310 <div class="mini-title">What is in the box?</div>311 <ul class="bullet-list">312 <li>iPhone 15 1N, USB‑C Charge Cable</li>313 </ul>314 </div>315 316 <!-- Manufacturer -->317 <div class="manufacturer">318 <div class="manu-title">From the manufacturer</div>319 <div class="wide-image">[IMG: Apple iPhone promotional banner]</div>320 </div>321 322 <!-- Bottom Navigation -->323 <div class="bottom-nav">324 <div class="nav-item active">325 <svg viewBox="0 0 24 24"><path d="M12 3l9 8v10h-6v-6H9v6H3V11z"/></svg>326 <span>Home</span>327 </div>328 <div class="nav-item">329 <svg viewBox="0 0 24 24"><path d="M12 12a5 5 0 100-10 5 5 0 000 10zm-7 9v-1a7 7 0 0114 0v1H5z"/></svg>330 <span>You</span>331 </div>332 <div class="nav-item">333 <svg viewBox="0 0 24 24"><path d="M4 6h16v3H4zm0 5h16v3H4zm0 5h16v3H4z"/></svg>334 <span>More</span>335 </div>336 <div class="nav-item">337 <svg viewBox="0 0 24 24"><path d="M7 6h14l-2 10H7L5 6H3V4h3zM7 20a2 2 0 100-4 2 2 0 000 4zm10 0a2 2 0 100-4 2 2 0 000 4z"/></svg>338 <span>Cart</span>339 </div>340 <div class="nav-item">341 <svg viewBox="0 0 24 24"><path d="M4 5h16v2H4zm0 6h16v2H4zm0 6h16v2H4z"/></svg>342 <span>Menu</span>343 </div>344 </div>345 346</div>347</body>348</html>