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 - Mobile UI</title>7<style>8 body { margin: 0; padding: 0; background: transparent; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #ffffff;15 font-family: "Roboto", system-ui, -apple-system, Segoe UI, Arial, sans-serif;16 color: #111;17 }18 19 /* Status bar (Android-like) */20 .status-bar {21 height: 120px;22 background: #3a3a3a;23 color: #fff;24 display: flex;25 align-items: center;26 padding: 0 36px;27 font-size: 44px;28 letter-spacing: 0.5px;29 }30 .status-bar .right {31 margin-left: auto;32 display: flex;33 gap: 22px;34 align-items: center;35 }36 .dot {37 width: 14px; height: 14px; background: #bdbdbd; border-radius: 50%;38 }39 .icon-battery {40 width: 64px; height: 34px; border: 3px solid #e0e0e0; border-radius: 6px; position: relative;41 }42 .icon-battery::before {43 content: "";44 position: absolute; right: -10px; top: 8px; width: 8px; height: 18px; background: #e0e0e0; border-radius: 2px;45 }46 .icon-battery::after {47 content: "";48 position: absolute; left: 4px; top: 4px; width: 48px; height: 22px; background: #e0e0e0;49 }50 .icon-wifi {51 width: 0; height: 0; border-left: 18px solid transparent; border-right: 18px solid transparent;52 border-top: 24px solid #e0e0e0; transform: rotate(180deg); margin-right: 2px;53 }54 55 /* App bar */56 .app-bar {57 height: 112px;58 background: #232323;59 display: flex;60 align-items: center;61 padding: 0 28px;62 position: relative;63 color: #fff;64 }65 .app-left {66 display: flex;67 align-items: center;68 gap: 36px;69 }70 .icon-btn {71 width: 88px; height: 88px; display: flex; align-items: center; justify-content: center;72 }73 .cart-wrap {74 position: absolute; right: 28px; top: 50%; transform: translateY(-50%);75 width: 92px; height: 92px; border-radius: 14px; border: 2px solid #8d8d8d;76 display: flex; align-items: center; justify-content: center; color: #fff;77 }78 .badge {79 position: absolute; top: -6px; right: -6px; background: #FFB300; color: #000;80 font-size: 30px; width: 44px; height: 44px; border-radius: 50%;81 display: flex; align-items: center; justify-content: center; font-weight: 700;82 border: 2px solid #232323;83 }84 85 /* Content */86 .content {87 position: absolute;88 left: 0; right: 0;89 top: 232px; /* status(120)+app(112) */90 bottom: 210px; /* leave room for bottom nav and home pill */91 overflow-y: auto;92 padding: 34px 36px 60px 36px;93 background: #ffffff;94 }95 .content p,96 .content div {97 font-size: 42px;98 line-height: 58px;99 margin: 0 0 22px 0;100 }101 .content .title {102 font-weight: 600;103 margin-bottom: 28px;104 }105 .content .section-title {106 font-weight: 700;107 margin-top: 24px;108 margin-bottom: 8px;109 }110 111 /* Bottom navigation */112 .bottom-nav {113 position: absolute;114 left: 0; right: 0; bottom: 64px;115 height: 160px;116 background: #2e2e2e;117 display: flex;118 align-items: center;119 justify-content: space-around;120 color: #eaeaea;121 border-top: 1px solid #444;122 }123 .nav-item {124 width: 20%;125 display: flex;126 flex-direction: column;127 align-items: center;128 gap: 10px;129 font-size: 30px;130 }131 .nav-item svg { fill: #eaeaea; }132 .nav-flag {133 width: 86px; height: 86px; border-radius: 50%;134 background: linear-gradient(180deg, #c62828 0 33%, #ffffff 33% 66%, #1976d2 66% 100%);135 border: 3px solid #eaeaea;136 display: flex; align-items: center; justify-content: center;137 font-size: 26px; font-weight: 700; color: #fff;138 }139 140 /* Home pill */141 .home-pill {142 position: absolute;143 bottom: 18px; left: 50%; transform: translateX(-50%);144 width: 320px; height: 14px; background: #d9d9d9; border-radius: 12px;145 }146 147 /* Subtle selection color */148 ::selection { background: #e0f2f1; }149</style>150</head>151<body>152<div id="render-target">153 154 <!-- Status Bar -->155 <div class="status-bar">156 <div class="time">9:25</div>157 <div class="right">158 <div class="dot"></div>159 <div class="dot"></div>160 <div class="dot"></div>161 <div class="icon-wifi"></div>162 <div class="icon-battery"></div>163 </div>164 </div>165 166 <!-- App Bar -->167 <div class="app-bar">168 <div class="app-left">169 <div class="icon-btn" aria-label="Back">170 <svg width="60" height="60" viewBox="0 0 24 24">171 <path d="M15.5 3l-8 9 8 9 1.5-1.3L10.2 12l6.8-7.7z" fill="#fff"></path>172 </svg>173 </div>174 <div class="icon-btn" aria-label="Menu">175 <svg width="64" height="64" viewBox="0 0 24 24">176 <path d="M3 6h18v2H3zm0 5.5h14v2H3zm0 5.5h10v2H3z" fill="#fff"></path>177 </svg>178 </div>179 </div>180 <div class="cart-wrap" aria-label="Cart">181 <svg width="56" height="56" viewBox="0 0 24 24">182 <path d="M7 4h-2l-1 3h2l2 9h9l2-8H8.6" stroke="#fff" stroke-width="1.8" fill="none"></path>183 </svg>184 <div class="badge">0</div>185 </div>186 </div>187 188 <!-- Scrollable Content -->189 <div class="content">190 <div class="title">191 Quality Furniture - Our furniture prides itself on offering luxurious and comfortable pieces. Whether you need to renovate your apartment or find furniture for your first home, we have quality, stylish products.192 </div>193 194 <div class="section-title">Product Specifications:</div>195 <p>Product Type: Sofa</p>196 <p>Overall Dimension: 75"L x 30.3"W x 35"H</p>197 <p>Armrest Size: 30" × 16.5" × 3.9"</p>198 <p>Seat Height: 17.3"</p>199 <p>Seat Width: 67"</p>200 <p>Seat Depth: 18.9"</p>201 <p>Arm Height: 22.4"</p>202 <p>Back Height: 18.9"</p>203 <p>Leg Height: 5.9"</p>204 <p>Overall Product Weight: 114 lbs</p>205 <p>Seating Capacity: 3</p>206 <p>Upholstery Material: 100% Polyester</p>207 <p>Seat Cushion Fill Material: Foam + Polyester</p>208 <p>Back Cushion Fill Material: Polyester + Cotton</p>209 <p>Frame Material: Solid Wood + Plywood + Metal</p>210 <p>Wood Species: Eucalyptus</p>211 <p>Leg Material: Solid Wood (Rubber wood)</p>212 <p>Leg Color: Black</p>213 <p>Seat Construction: Coil Springs</p>214 <p>Foam Density: 1.9 lbs./cu.ft.</p>215 <p>Arm Type: Square arm</p>216 <p>Toss Pillows: No</p>217 <p>Removable Cushion Cover: Yes for back cushion</p>218 <p>Reversible Cushions: No</p>219 <p>Storage: Yes</p>220 <p>Weight Capacity: 300 lbs each seat</p>221 <p>Product Care: Wipe with fabric cleaner</p>222 <p>Warranty: One Year</p>223 224 <div class="section-title">Luxurious and Comfortable</div>225 <p>Modern large sectional sofas designed for everyday living. Soft upholstery and supportive cushions provide a cozy seating experience for you and your family.</p>226 <p>Easy assembly with clear instructions included.</p>227 </div>228 229 <!-- Bottom Navigation -->230 <div class="bottom-nav">231 <div class="nav-item">232 <svg width="60" height="60" viewBox="0 0 24 24">233 <path d="M12 2l7 7v11h-5v-6H10v6H5V9z"></path>234 </svg>235 <div>Explore</div>236 </div>237 <div class="nav-item">238 <svg width="60" height="60" viewBox="0 0 24 24">239 <path d="M7 4h10l1 3H6zM4 9h16l-2 9H6z"></path>240 </svg>241 <div>Deals</div>242 </div>243 <div class="nav-item">244 <div class="nav-flag">US</div>245 <div>US Store</div>246 </div>247 <div class="nav-item">248 <svg width="60" height="60" viewBox="0 0 24 24">249 <path d="M12 21s-6-3.3-8-8.2C2 8.5 4.7 6 7.6 6c1.8 0 3.2 1 4.4 2.5C13.2 7 14.6 6 16.4 6 19.3 6 22 8.5 20 12.8 18 17.7 12 21 12 21z"></path>250 </svg>251 <div>Favorites</div>252 </div>253 <div class="nav-item">254 <svg width="60" height="60" viewBox="0 0 24 24">255 <path d="M10 3a7 7 0 105.6 12.1l4 4 1.4-1.4-4-4A7 7 0 0010 3zm0 2a5 5 0 110 10 5 5 0 010-10z"></path>256 </svg>257 <div>Search</div>258 </div>259 </div>260 261 <!-- Home gesture pill -->262 <div class="home-pill"></div>263 264</div>265</body>266</html>