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>Product Details Mock</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #f5f5f5;15 color: #212121;16 }17 /* Status bar */18 .status-bar {19 height: 100px;20 background: #2f2f2f;21 color: #fff;22 padding: 0 36px;23 display: flex;24 align-items: center;25 justify-content: space-between;26 font-weight: 600;27 letter-spacing: 1px;28 font-size: 40px;29 }30 .status-icons {31 display: flex;32 align-items: center;33 gap: 22px;34 }35 .dot { width: 10px; height: 10px; background: #cfcfcf; border-radius: 50%; display: inline-block; }36 37 /* App bar */38 .app-bar {39 height: 120px;40 background: #3b3b3b;41 color: #fff;42 display: flex;43 align-items: center;44 padding: 0 28px;45 position: relative;46 }47 .app-title {48 font-size: 54px;49 font-weight: 700;50 margin-left: 18px;51 }52 .app-actions {53 margin-left: auto;54 display: flex;55 gap: 28px;56 }57 .icon-btn svg { width: 44px; height: 44px; fill: #fff; }58 59 /* Content */60 .content {61 height: calc(2400px - 100px - 120px);62 overflow: hidden;63 position: relative;64 }65 .scroll {66 height: 100%;67 overflow-y: auto;68 padding: 26px 28px 260px; /* bottom padding for sticky bar */69 }70 .image-card {71 background: #ffffff;72 border-radius: 26px;73 padding: 34px;74 box-shadow: 0 0 0 1px rgba(0,0,0,0.05) inset;75 }76 .img-placeholder {77 width: 100%;78 height: 640px;79 background: #E0E0E0;80 border: 1px solid #BDBDBD;81 border-radius: 18px;82 display: flex;83 align-items: center;84 justify-content: center;85 color: #757575;86 font-size: 40px;87 }88 .title {89 font-size: 44px;90 line-height: 1.3;91 margin: 28px 6px 10px;92 font-weight: 700;93 color: #222;94 }95 .brand {96 margin: 6px 6px 18px;97 font-size: 30px;98 color: #666;99 }100 .brand a { color: #2559b5; text-decoration: none; }101 .price {102 font-size: 60px;103 font-weight: 800;104 margin: 14px 6px 12px;105 color: #e65100;106 }107 .stock {108 display: flex;109 align-items: center;110 gap: 12px;111 color: #d32f2f;112 font-size: 30px;113 margin: 6px 6px 16px;114 }115 .note {116 margin: 8px 6px;117 color: #555;118 font-size: 30px;119 line-height: 1.45;120 }121 .note a { color: #2559b5; text-decoration: none; }122 .rating-row {123 display: flex;124 align-items: center;125 justify-content: space-between;126 margin: 22px 6px;127 }128 .stars {129 display: flex;130 align-items: center;131 gap: 8px;132 color: #9e9e9e;133 font-size: 30px;134 }135 .stars svg { width: 36px; height: 36px; fill: #cfcfcf; }136 .side-actions {137 display: flex;138 gap: 26px;139 }140 .side-actions svg { width: 44px; height: 44px; fill: #fb8c00; }141 142 .section-header {143 margin: 30px 0 12px;144 padding: 22px 0 8px;145 font-size: 28px;146 font-weight: 800;147 color: #9e9e9e;148 letter-spacing: 2px;149 border-top: 1px solid #e3e3e3;150 }151 .promo-item {152 background: #fff;153 border: 1px solid #e6e6e6;154 border-radius: 16px;155 padding: 26px 22px;156 display: flex;157 align-items: center;158 gap: 18px;159 color: #2559b5;160 font-size: 32px;161 }162 .promo-icon {163 width: 44px; height: 44px; border-radius: 50%;164 background: #ffe6c4; display: flex; align-items: center; justify-content: center;165 color: #fb8c00; font-weight: 800;166 }167 .promo-spacer { flex: 1; text-align: right; color: #7b7b7b; }168 169 .banner {170 margin: 26px 0 40px;171 height: 200px;172 background: #E0E0E0;173 border: 1px solid #BDBDBD;174 border-radius: 14px;175 display: flex;176 align-items: center;177 justify-content: center;178 color: #757575;179 font-size: 36px;180 }181 182 /* Sticky bottom bar */183 .bottom-bar {184 position: absolute;185 left: 0; right: 0; bottom: 60px;186 padding: 18px 28px;187 }188 .bottom-inner {189 background: #ffffff;190 border-radius: 20px;191 box-shadow: 0 10px 28px rgba(0,0,0,0.12);192 padding: 22px 20px;193 display: flex;194 align-items: center;195 gap: 24px;196 }197 .mini-btn {198 width: 150px; height: 120px;199 border: 3px solid #fb8c00;200 border-radius: 18px;201 background: #fff;202 display: flex; align-items: center; justify-content: center;203 }204 .mini-btn svg { width: 54px; height: 54px; fill: #fb8c00; }205 .cta {206 flex: 1;207 height: 120px;208 background: #fb8c00;209 color: #fff;210 border-radius: 18px;211 display: flex; align-items: center; justify-content: center;212 gap: 18px;213 font-size: 40px; font-weight: 800;214 box-shadow: 0 8px 18px rgba(251,140,0,0.4);215 }216 .cta svg { width: 56px; height: 56px; fill: #fff; }217 218 /* Gesture bar */219 .gesture {220 position: absolute;221 bottom: 16px;222 left: 50%;223 transform: translateX(-50%);224 width: 360px; height: 8px;225 background: #000;226 border-radius: 8px;227 }228</style>229</head>230<body>231<div id="render-target">232 <!-- Status bar -->233 <div class="status-bar">234 <div>1:27</div>235 <div class="status-icons">236 <span class="dot"></span>237 <span class="dot"></span>238 <span class="dot"></span>239 <svg width="44" height="44" viewBox="0 0 24 24" fill="#fff"><path d="M12 4a8 8 0 0 1 8 8h-2a6 6 0 0 0-6-6V4z"/></svg>240 <svg width="44" height="44" viewBox="0 0 24 24" fill="#fff"><path d="M20 8h-3V6a5 5 0 0 0-10 0v2H4v12h16V8zm-5 0H9V6a3 3 0 0 1 6 0v2z"/></svg>241 </div>242 </div>243 244 <!-- App bar -->245 <div class="app-bar">246 <div class="icon-btn">247 <svg viewBox="0 0 24 24"><path d="M15.5 19.5 8 12l7.5-7.5" stroke="#fff" stroke-width="2.4" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>248 </div>249 <div class="app-title">Details</div>250 <div class="app-actions">251 <div class="icon-btn">252 <svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="7" stroke="#fff" stroke-width="2" fill="none"/><path d="M20 20l-3.5-3.5" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/></svg>253 </div>254 <div class="icon-btn">255 <svg viewBox="0 0 24 24"><path d="M7 7h13l-1.5 8.5a2 2 0 0 1-2 1.6H9.5a2 2 0 0 1-2-1.6L6 4H3" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/><circle cx="9" cy="20" r="1.7" fill="#fff"/><circle cx="17" cy="20" r="1.7" fill="#fff"/></svg>256 </div>257 <div class="icon-btn">258 <svg viewBox="0 0 24 24"><circle cx="5" cy="12" r="2" fill="#fff"/><circle cx="12" cy="12" r="2" fill="#fff"/><circle cx="19" cy="12" r="2" fill="#fff"/></svg>259 </div>260 </div>261 </div>262 263 <!-- Content scroll area -->264 <div class="content">265 <div class="scroll">266 <div class="image-card">267 <div class="img-placeholder">[IMG: MacBook product photo]</div>268 </div>269 270 <div class="title">MacBook Air 13.6 M2 8C CPU 10C GPU 8GB 512GB Midnight Arabic Keyboard</div>271 <div class="brand">Brand: <a href="#">Apple</a> | <a href="#">Similar products from Apple</a></div>272 <div class="price">EGP 87,700.00</div>273 274 <div class="stock">275 <svg width="30" height="30" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="#d32f2f"/><rect x="11" y="6" width="2" height="8" fill="#fff"/><rect x="11" y="16" width="2" height="2" fill="#fff"/></svg>276 <span>1 units left</span>277 </div>278 279 <div class="note">Delivery fees from EGP 20.00 to 6th of October.<br>Save 10 EGP on shipping with prepaid payment <a href="#">See options</a></div>280 281 <div class="rating-row">282 <div class="stars">283 <svg viewBox="0 0 24 24"><path d="M12 17.3l-5.2 3.1 1.4-5.9L3 9.8l6-0.5L12 4l3 5.3 6 .5-5.2 4.7 1.4 5.9z"/></svg>284 <svg viewBox="0 0 24 24"><path d="M12 17.3l-5.2 3.1 1.4-5.9L3 9.8l6-0.5L12 4l3 5.3 6 .5-5.2 4.7 1.4 5.9z"/></svg>285 <svg viewBox="0 0 24 24"><path d="M12 17.3l-5.2 3.1 1.4-5.9L3 9.8l6-0.5L12 4l3 5.3 6 .5-5.2 4.7 1.4 5.9z"/></svg>286 <svg viewBox="0 0 24 24"><path d="M12 17.3l-5.2 3.1 1.4-5.9L3 9.8l6-0.5L12 4l3 5.3 6 .5-5.2 4.7 1.4 5.9z"/></svg>287 <svg viewBox="0 0 24 24"><path d="M12 17.3l-5.2 3.1 1.4-5.9L3 9.8l6-0.5L12 4l3 5.3 6 .5-5.2 4.7 1.4 5.9z"/></svg>288 <span style="margin-left:10px;">(No ratings available)</span>289 </div>290 <div class="side-actions">291 <svg viewBox="0 0 24 24"><path d="M18 8a3 3 0 0 0-2 5.3v3.2l-4-2.4v-1.8A3 3 0 1 0 10 8a3 3 0 0 0 2 5.3v1.8l6 3.6v-7.2A3 3 0 0 0 18 8z"/></svg>292 <svg viewBox="0 0 24 24"><path d="M12 21s-7-4.6-7-10a4 4 0 0 1 7-2.6A4 4 0 0 1 19 11c0 5.4-7 10-7 10z" fill="none" stroke="#fb8c00" stroke-width="2"/></svg>293 </div>294 </div>295 296 <div class="section-header">PROMOTIONS</div>297 <div class="promo-item">298 <div class="promo-icon">★</div>299 <div>Check All Our Installments Offers From Here</div>300 <div class="promo-spacer">→</div>301 </div>302 303 <div class="banner">[IMG: Promotional banner]</div>304 </div>305 </div>306 307 <!-- Sticky bottom bar -->308 <div class="bottom-bar">309 <div class="bottom-inner">310 <div class="mini-btn">311 <svg viewBox="0 0 24 24"><path d="M3 10l9-7 9 7v10a2 2 0 0 1-2 2h-4v-7H9v7H5a2 2 0 0 1-2-2V10z" /></svg>312 </div>313 <div class="mini-btn">314 <svg viewBox="0 0 24 24"><path d="M6.6 10.8a15 15 0 0 0 6.6 6.6l2.2-2.2a1.5 1.5 0 0 1 1.6-.37 12 12 0 0 0 3.8.63v3a2 2 0 0 1-2 2A16 16 0 0 1 4 6a2 2 0 0 1 2-2h3a12 12 0 0 0 .63 3.8 1.5 1.5 0 0 1-.37 1.6l-2.26 2.4z"/></svg>315 </div>316 <div class="cta">317 <svg viewBox="0 0 24 24"><path d="M7 7h13l-1.5 8.5a2 2 0 0 1-2 1.6H9.5a2 2 0 0 1-2-1.6L6 4H3" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/><circle cx="9" cy="20" r="1.7" fill="#fff"/><circle cx="17" cy="20" r="1.7" fill="#fff"/></svg>318 <span>ADD TO CART</span>319 </div>320 </div>321 </div>322 323 <!-- Gesture bar -->324 <div class="gesture"></div>325</div>326</body>327</html>