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 - Specification</title>7 <style>8 body { margin:0; padding:0; background:transparent; font-family: Arial, Helvetica, sans-serif; }9 #render-target {10 width:1080px; height:2400px; position:relative; overflow:hidden;11 background:#FAFAFA;12 color:#212121;13 }14 15 /* Top teal system bar */16 .system-bar {17 position:absolute; top:0; left:0; right:0; height:120px;18 background:#149DA1;19 color:#fff; display:flex; align-items:center; justify-content:space-between;20 padding:0 32px; box-sizing:border-box; font-weight:600; font-size:38px;21 }22 .status-left { display:flex; align-items:center; gap:18px; }23 .pill {24 background:rgba(255,255,255,0.25);25 color:#fff; padding:6px 14px; border-radius:10px; font-size:32px; font-weight:700;26 }27 .status-right { display:flex; align-items:center; gap:26px; }28 .icon {29 width:42px; height:42px; display:inline-block;30 }31 32 /* White app bar */33 .app-bar {34 position:absolute; top:120px; left:0; right:0; height:170px;35 background:#FFFFFF; display:flex; align-items:center; justify-content:space-between;36 box-shadow:0 2px 6px rgba(0,0,0,0.15);37 padding:0 36px; box-sizing:border-box;38 }39 .app-title { font-size:48px; font-weight:700; color:#333; }40 .close-btn {41 width:80px; height:80px; border-radius:40px;42 display:flex; align-items:center; justify-content:center;43 cursor:default;44 }45 .close-btn svg { width:44px; height:44px; }46 .close-btn line { stroke:#26A69A; stroke-width:6; stroke-linecap:round; }47 48 /* Product summary card */49 .summary {50 position:absolute; top:310px; left:0; right:0;51 background:#EEEEEE; border-top:1px solid #E0E0E0; border-bottom:1px solid #E0E0E0;52 padding:26px 36px; box-sizing:border-box;53 display:flex; gap:28px; align-items:center;54 }55 .img-ph {56 width:260px; height:160px; background:#E0E0E0; border:1px solid #BDBDBD;57 display:flex; align-items:center; justify-content:center; color:#757575; font-size:28px;58 }59 .summary-text { flex:1; }60 .name { font-size:42px; font-weight:600; color:#333; margin-bottom:6px; }61 .pid { font-size:32px; color:#9E9E9E; }62 .price { font-size:44px; font-weight:800; color:#111; margin-top:18px; }63 64 /* Tabs */65 .tabs {66 position:absolute; top:488px; left:0; right:0; background:#fff;67 border-bottom:1px solid #E0E0E0;68 }69 .tab-row {70 display:flex; gap:60px; padding:24px 36px 0 36px; box-sizing:border-box;71 align-items:flex-end;72 }73 .tab {74 font-size:34px; color:#9E9E9E; padding-bottom:22px; position:relative; letter-spacing:1px;75 }76 .tab.active { color:#222; font-weight:700; }77 .tab.active::after {78 content:""; position:absolute; left:0; bottom:0; height:6px; width:240px; background:#26A69A; border-radius:3px;79 }80 81 /* Content area */82 .content {83 position:absolute; top:590px; left:0; right:0; bottom:140px;84 overflow:auto; -webkit-overflow-scrolling:touch;85 padding:0 0 60px 0;86 background:#fff;87 }88 .section {89 padding:28px 36px 6px 36px; box-sizing:border-box;90 }91 .section-title {92 font-size:40px; font-weight:800; color:#424242; margin:18px 0;93 }94 .row {95 display:flex; padding:26px 0; border-top:1px solid #EEEEEE; font-size:34px; line-height:1.35;96 }97 .row:first-of-type { border-top:none; }98 .label { width:470px; color:#616161; }99 .value { flex:1; color:#8D8D8D; }100 .divider { height:1px; background:#EAEAEA; margin:10px 0 0 0; }101 102 /* Gesture bar */103 .gesture {104 position:absolute; bottom:36px; left:50%; transform:translateX(-50%);105 width:360px; height:14px; background:#000; opacity:0.25; border-radius:8px;106 }107 </style>108</head>109<body>110 <div id="render-target">111 112 <!-- Top system/status bar -->113 <div class="system-bar">114 <div class="status-left">115 <div>10:10</div>116 <div class="pill">LR</div>117 </div>118 <div class="status-right">119 <!-- Do not over-detail; simple icons -->120 <svg class="icon" viewBox="0 0 24 24" aria-hidden="true">121 <circle cx="12" cy="12" r="10" fill="none" stroke="white" stroke-width="2"></circle>122 <circle cx="12" cy="12" r="4" fill="white"></circle>123 </svg>124 <svg class="icon" viewBox="0 0 24 24" aria-hidden="true">125 <path d="M2 17c4-4 8-6 10-6s6 2 10 6" fill="none" stroke="white" stroke-width="2" stroke-linecap="round"></path>126 <path d="M7 17c3-3 5-4 5-4s2 1 5 4" fill="none" stroke="white" stroke-width="2" stroke-linecap="round"></path>127 </svg>128 <svg class="icon" viewBox="0 0 24 24" aria-hidden="true">129 <rect x="2" y="7" width="16" height="10" rx="2" ry="2" fill="none" stroke="white" stroke-width="2"></rect>130 <rect x="19" y="10" width="3" height="4" fill="white"></rect>131 </svg>132 <div style="font-weight:700;">75%</div>133 </div>134 </div>135 136 <!-- App bar -->137 <div class="app-bar">138 <div class="app-title">Product Details</div>139 <div class="close-btn" aria-label="Close">140 <svg viewBox="0 0 24 24">141 <line x1="5" y1="5" x2="19" y2="19"></line>142 <line x1="19" y1="5" x2="5" y2="19"></line>143 </svg>144 </div>145 </div>146 147 <!-- Product summary -->148 <div class="summary">149 <div class="img-ph">[IMG: Black Running Shoes]</div>150 <div class="summary-text">151 <div class="name">Men's Black Running Sports Shoes</div>152 <div class="pid">Product Id:151324261</div>153 <div class="price">₹649</div>154 </div>155 </div>156 157 <!-- Tabs -->158 <div class="tabs">159 <div class="tab-row">160 <div class="tab active">SPECIFICATION</div>161 <div class="tab">DESCRIPTION</div>162 <div class="tab">LEGAL INFO</div>163 </div>164 </div>165 166 <!-- Content -->167 <div class="content">168 169 <div class="section">170 <div class="section-title">Key Feature</div>171 <div class="row">172 <div class="label">Brand</div>173 <div class="value">Woakers,</div>174 </div>175 <div class="row">176 <div class="label">Model ID</div>177 <div class="value">BLACK-SPORT-FASHION,</div>178 </div>179 <div class="row">180 <div class="label">Part Number</div>181 <div class="value">BLACK-SPORT-FASHION,</div>182 </div>183 <div class="divider"></div>184 </div>185 186 <div class="section">187 <div class="section-title">Ideal Specification</div>188 <div class="row">189 <div class="label">Ideal For</div>190 <div class="value">Men,</div>191 </div>192 <div class="divider"></div>193 </div>194 195 <div class="section">196 <div class="section-title">Occasion Specification</div>197 <div class="row">198 <div class="label">Occasion</div>199 <div class="value">Casual,</div>200 </div>201 <div class="divider"></div>202 </div>203 204 <div class="section">205 <div class="section-title">Closure Detail</div>206 <div class="row">207 <div class="label">Closure</div>208 <div class="value">Slip on,</div>209 </div>210 <div class="divider"></div>211 </div>212 213 <div class="section">214 <div class="section-title">Footwear Specification</div>215 <div class="row">216 <div class="label">Color</div>217 <div class="value">Black</div>218 </div>219 <div class="row">220 <div class="label">Weight</div>221 <div class="value">1 - 1.5 kg,</div>222 </div>223 <div class="row">224 <div class="label">Upper Material</div>225 <div class="value">Faux Leather</div>226 </div>227 <div class="row">228 <div class="label">Inner Material</div>229 <div class="value">Comfort Foam,</div>230 </div>231 <div class="row">232 <div class="label">Sole Material</div>233 <div class="value">EVA,</div>234 </div>235 <div class="divider"></div>236 </div>237 238 <div class="section">239 <div class="section-title">Casual Shoes Specification</div>240 <div class="row">241 <div class="label">Casual Shoes Type</div>242 <div class="value">Sneakers</div>243 </div>244 <div class="divider"></div>245 </div>246 247 <div class="section" style="padding-bottom:80px;">248 <div class="section-title">IndiMarket</div>249 <div class="row">250 <div class="label">IndiMarket Art</div>251 <div class="value">Bandhni,</div>252 </div>253 </div>254 255 </div>256 257 <!-- Gesture bar -->258 <div class="gesture"></div>259 </div>260</body>261</html>