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>Product Details Mock</title>7<style>8 body {9 margin: 0;10 padding: 0;11 background: transparent;12 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;13 }14 #render-target {15 width: 1080px;16 height: 2400px;17 position: relative;18 overflow: hidden;19 background: #ffffff;20 border-radius: 0;21 }22 23 /* Header */24 .app-header {25 position: absolute;26 top: 0;27 left: 0;28 width: 1080px;29 height: 240px;30 background: #1E1E1E;31 color: #fff;32 }33 .status-bar {34 height: 100px;35 padding: 0 40px;36 display: flex;37 align-items: center;38 font-weight: 600;39 font-size: 40px;40 color: #fff;41 justify-content: space-between;42 }43 .status-icons {44 display: flex;45 gap: 24px;46 align-items: center;47 }48 .toolbar {49 height: 140px;50 display: flex;51 align-items: center;52 padding: 0 32px;53 justify-content: space-between;54 }55 .left-back {56 width: 120px;57 height: 120px;58 display: flex;59 align-items: center;60 justify-content: flex-start;61 }62 .right-actions {63 display: flex;64 gap: 40px;65 align-items: center;66 padding-right: 20px;67 }68 .icon-btn {69 width: 96px;70 height: 96px;71 display: flex;72 align-items: center;73 justify-content: center;74 }75 .icon-btn svg { width: 60px; height: 60px; fill: none; stroke: #fff; stroke-width: 6px; }76 77 /* Main content */78 .content {79 position: absolute;80 top: 240px;81 left: 0;82 width: 100%;83 padding: 40px 40px 340px;84 background: #ffffff;85 }86 .card {87 background: #fff;88 border: 1px solid #E6E6E6;89 border-radius: 28px;90 box-shadow: 0 2px 0 rgba(0,0,0,0.02);91 margin: 24px 16px;92 padding: 34px 36px;93 }94 .row {95 display: flex;96 align-items: center;97 justify-content: space-between;98 }99 .row .left {100 display: flex;101 align-items: center;102 gap: 26px;103 color: #333;104 font-size: 40px;105 font-weight: 600;106 }107 .row .chev svg { width: 40px; height: 40px; stroke: #9E9E9E; }108 109 .return-icon {110 width: 80px;111 height: 80px;112 border-radius: 40px;113 display: flex;114 align-items: center;115 justify-content: center;116 background: #F3EDF7;117 }118 .return-icon svg { width: 58px; height: 58px; stroke: #c7b6d6; fill: none; stroke-width: 5px; }119 120 /* Specifications card */121 .spec-header {122 display: flex;123 align-items: center;124 justify-content: space-between;125 padding-bottom: 16px;126 }127 .spec-title {128 font-size: 54px;129 font-weight: 700;130 color: #222;131 }132 .spec-grid {133 display: grid;134 grid-template-columns: 360px 1fr;135 gap: 22px 36px;136 margin-top: 16px;137 }138 .spec-label {139 background: linear-gradient(90deg, #d8ecec 0%, #eef6f6 70%, #f7fbfb 100%);140 color: #28747a;141 border-radius: 24px;142 padding: 20px 26px;143 font-size: 36px;144 font-weight: 700;145 }146 .spec-value {147 color: #333;148 font-size: 36px;149 padding: 22px 10px;150 border-bottom: 1px solid #f0f0f0;151 }152 .spec-value:last-child { border-bottom: none; }153 154 /* Overview card */155 .overview-title {156 font-size: 52px;157 font-weight: 700;158 color: #222;159 margin-bottom: 12px;160 }161 .overview-text {162 font-size: 36px;163 color: #666;164 line-height: 1.5;165 }166 167 /* Bottom sticky action bar */168 .sticky-wrap {169 position: absolute;170 bottom: 0;171 left: 0;172 width: 1080px;173 height: 280px;174 background: #FBE6EE;175 border-top-left-radius: 48px;176 border-top-right-radius: 48px;177 display: flex;178 align-items: center;179 padding: 26px 40px 26px 40px;180 box-sizing: border-box;181 }182 .actions {183 width: 100%;184 display: flex;185 align-items: center;186 gap: 34px;187 }188 .like-btn {189 width: 140px;190 height: 120px;191 border: 2px solid #E6E6E6;192 border-radius: 24px;193 background: #fff;194 display: flex;195 align-items: center;196 justify-content: center;197 }198 .like-btn svg { width: 56px; height: 56px; stroke: #D24B6A; stroke-width: 6px; fill: none; }199 200 .buy-btn {201 flex: 1;202 height: 120px;203 border: 3px solid #D24B6A;204 color: #D24B6A;205 background: #fff;206 border-radius: 28px;207 font-size: 44px;208 font-weight: 700;209 display: flex;210 align-items: center;211 justify-content: center;212 }213 .bag-btn {214 flex: 1;215 height: 120px;216 background: #D24B6A;217 color: #fff;218 border-radius: 28px;219 font-size: 44px;220 font-weight: 700;221 display: flex;222 align-items: center;223 justify-content: center;224 border: 3px solid #D24B6A;225 }226 227 /* Bottom home indicator */228 .home-indicator {229 position: absolute;230 bottom: 16px;231 left: 50%;232 transform: translateX(-50%);233 width: 360px;234 height: 12px;235 background: #000;236 opacity: 0.2;237 border-radius: 6px;238 }239</style>240</head>241<body>242<div id="render-target">243 244 <!-- Header -->245 <div class="app-header">246 <div class="status-bar">247 <div>4:00</div>248 <div class="status-icons">249 <span style="width:18px;height:18px;border-radius:9px;background:#fff;display:inline-block;opacity:0.7;"></span>250 <span style="width:32px;height:32px;border:2px solid #fff;border-radius:4px;display:inline-block;opacity:0.7;"></span>251 <span style="width:48px;height:28px;border:2px solid #fff;border-radius:6px;display:inline-block;opacity:0.7;"></span>252 <span style="width:26px;height:26px;border-radius:6px;border:2px solid #fff;display:inline-block;transform:skewX(-10deg);opacity:0.7;"></span>253 <span style="width:10px;height:10px;background:#fff;border-radius:5px;display:inline-block;opacity:0.8;"></span>254 <span style="width:40px;height:28px;border:2px solid #fff;border-radius:6px;display:inline-block;opacity:0.8;"></span>255 <span style="width:16px;height:28px;background:#fff;border-radius:3px;display:inline-block;opacity:0.9;"></span>256 </div>257 </div>258 <div class="toolbar">259 <div class="left-back">260 <svg viewBox="0 0 24 24">261 <path d="M15 5 L7 12 L15 19" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>262 </svg>263 </div>264 <div class="right-actions">265 <div class="icon-btn">266 <svg viewBox="0 0 24 24">267 <circle cx="10" cy="10" r="6"></circle>268 <path d="M16 16 L22 22"></path>269 </svg>270 </div>271 <div class="icon-btn">272 <svg viewBox="0 0 24 24">273 <path d="M12 20 C5 14, 4 9, 8 6 C10 5,12 6,12 8 C12 6,14 5,16 6 C20 9,19 14,12 20 Z"></path>274 </svg>275 </div>276 <div class="icon-btn">277 <svg viewBox="0 0 24 24">278 <rect x="5" y="8" width="14" height="12" rx="2" ry="2"></rect>279 <path d="M8 8 C8 5, 16 5, 16 8" stroke-linecap="round"></path>280 </svg>281 </div>282 </div>283 </div>284 </div>285 286 <!-- Content -->287 <div class="content">288 <!-- 7 Days Return card -->289 <div class="card">290 <div class="row">291 <div class="left">292 <div class="return-icon">293 <svg viewBox="0 0 24 24">294 <circle cx="12" cy="12" r="8"></circle>295 <path d="M8 10 L11 13 L16 8" stroke="#b88fb0" fill="none" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"></path>296 </svg>297 </div>298 <span>7 Days Return</span>299 </div>300 <div class="chev">301 <svg viewBox="0 0 24 24"><path d="M9 6 L15 12 L9 18" fill="none" stroke-width="2" stroke="#9E9E9E" stroke-linecap="round" stroke-linejoin="round"></path></svg>302 </div>303 </div>304 </div>305 306 <!-- Product Specifications -->307 <div class="card">308 <div class="spec-header">309 <div class="spec-title">Product Specifications</div>310 <svg viewBox="0 0 24 24" width="40" height="40">311 <path d="M6 10 L12 16 L18 10" fill="none" stroke="#707070" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>312 </svg>313 </div>314 <div class="spec-grid">315 <div class="spec-label">Ideal For</div>316 <div class="spec-value">Home</div>317 318 <div class="spec-label">Material</div>319 <div class="spec-value">Pinewood</div>320 321 <div class="spec-label">Pattern</div>322 <div class="spec-value">Solid</div>323 324 <div class="spec-label">Fabric Weave</div>325 <div class="spec-value">NA</div>326 327 <div class="spec-label">Product Dimensions</div>328 <div class="spec-value">89cm (35.1in.) L X 190.5cm (75in.) W X 93.98cm (37in.) H</div>329 330 <div class="spec-label">Material Composition</div>331 <div class="spec-value">Pine Wood</div>332 333 <div class="spec-label">Style / Model No</div>334 <div class="spec-value">UTOPIASOFABAZORABG3S</div>335 336 <div class="spec-label">Country of Origin</div>337 <div class="spec-value">India</div>338 339 <div class="spec-label">Color</div>340 <div class="spec-value">Beige</div>341 </div>342 </div>343 344 <!-- Product Overview -->345 <div class="card">346 <div class="row" style="margin-bottom: 18px;">347 <div class="overview-title">Product Overview</div>348 <svg viewBox="0 0 24 24" width="40" height="40">349 <path d="M6 10 L12 16 L18 10" fill="none" stroke="#707070" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>350 </svg>351 </div>352 <div class="overview-text">353 Bring home a luxurious seating experience with Utopia Fabric Sofa by Duroflex. Made with trusted Duroflex foam, this sofa is designed for comfort. The …354 </div>355 </div>356 </div>357 358 <!-- Sticky bottom action bar -->359 <div class="sticky-wrap">360 <div class="actions">361 <div class="like-btn">362 <svg viewBox="0 0 24 24">363 <path d="M12 20 C5 14, 4 9, 8 6 C10 5,12 6,12 8 C12 6,14 5,16 6 C20 9,19 14,12 20 Z"></path>364 </svg>365 </div>366 <div class="buy-btn">Buy Now</div>367 <div class="bag-btn">Add to Bag</div>368 </div>369 </div>370 371 <!-- Home indicator -->372 <div class="home-indicator"></div>373</div>374</body>375</html>