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 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 }16 .status-bar {17 height: 120px;18 background: #1AA4A8;19 color: #ffffff;20 padding: 0 40px;21 display: flex;22 align-items: center;23 justify-content: space-between;24 font-family: Arial, Helvetica, sans-serif;25 font-size: 36px;26 letter-spacing: 0.5px;27 }28 .status-icons {29 display: flex;30 align-items: center;31 gap: 28px;32 }33 .app-bar {34 height: 160px;35 background: #ffffff;36 box-shadow: 0 2px 6px rgba(0,0,0,0.15);37 display: flex;38 align-items: center;39 padding: 0 40px;40 position: relative;41 z-index: 2;42 }43 .app-title {44 font-size: 50px;45 font-weight: 600;46 color: #333333;47 font-family: Arial, Helvetica, sans-serif;48 }49 .close-btn {50 position: absolute;51 right: 40px;52 top: 50%;53 transform: translateY(-50%);54 width: 72px;55 height: 72px;56 }57 .content {58 position: absolute;59 top: 280px; /* 120 + 160 */60 left: 0;61 right: 0;62 bottom: 0;63 overflow-y: auto;64 -webkit-overflow-scrolling: touch;65 background: #ffffff;66 font-family: Arial, Helvetica, sans-serif;67 }68 .product-card {69 background: #EEEEEE;70 border-top: 1px solid #E0E0E0;71 border-bottom: 1px solid #DADADA;72 padding: 30px 40px;73 display: flex;74 gap: 32px;75 align-items: center;76 }77 .img-ph {78 width: 220px;79 height: 160px;80 background: #E0E0E0;81 border: 1px solid #BDBDBD;82 display: flex;83 justify-content: center;84 align-items: center;85 color: #757575;86 font-size: 24px;87 text-align: center;88 border-radius: 6px;89 }90 .prod-text {91 flex: 1;92 display: flex;93 flex-direction: column;94 gap: 12px;95 }96 .prod-name {97 font-size: 40px;98 line-height: 1.2;99 color: #4A4A4A;100 font-weight: 600;101 }102 .prod-id {103 font-size: 30px;104 color: #9E9E9E;105 }106 .price {107 font-size: 44px;108 font-weight: 700;109 color: #000000;110 margin-top: 8px;111 }112 .tabs {113 display: flex;114 gap: 48px;115 padding: 24px 40px 0 40px;116 border-bottom: 1px solid #E0E0E0;117 position: relative;118 }119 .tab {120 font-size: 34px;121 padding-bottom: 28px;122 color: #9E9E9E;123 font-weight: 600;124 }125 .tab.active {126 color: #000000;127 }128 .tab-indicator {129 position: absolute;130 left: 40px;131 bottom: 0;132 width: 240px;133 height: 6px;134 background: #1AA4A8;135 }136 .section {137 padding: 24px 40px 12px 40px;138 }139 .section-title {140 font-size: 38px;141 font-weight: 700;142 color: #333333;143 margin: 12px 0 8px 0;144 }145 .row {146 display: flex;147 justify-content: space-between;148 padding: 26px 0;149 border-bottom: 1px solid #ECECEC;150 font-size: 34px;151 color: #555555;152 }153 .row .label { color: #3E3E3E; }154 .row .value { color: #7A7A7A; }155 .gesture-bar {156 position: absolute;157 left: 0;158 right: 0;159 bottom: 0;160 height: 140px;161 background: #000000;162 display: flex;163 align-items: center;164 justify-content: center;165 }166 .gesture-pill {167 width: 320px;168 height: 16px;169 background: #E0E0E0;170 border-radius: 12px;171 }172 /* Simple icons */173 .icon-wifi, .icon-battery {174 display: inline-block;175 }176 .icon-wifi svg, .icon-battery svg { height: 40px; width: 40px; }177</style>178</head>179<body>180<div id="render-target">181 <div class="status-bar">182 <div>9:10</div>183 <div class="status-icons">184 <div class="icon-wifi">185 <svg viewBox="0 0 24 24">186 <path fill="#ffffff" d="M12 18a2 2 0 1 0 0.001 0z"/>187 <path fill="#ffffff" d="M5 11c4-4 10-4 14 0l-2 2c-3-3-7-3-10 0l-2-2z"/>188 <path fill="#ffffff" d="M8 14c2.5-2.5 5.5-2.5 8 0l-1.8 1.8c-1.7-1.7-3.7-1.7-5.4 0L8 14z"/>189 </svg>190 </div>191 <div class="icon-battery">192 <svg viewBox="0 0 24 24">193 <rect x="2" y="6" width="18" height="12" rx="2" ry="2" fill="#ffffff"></rect>194 <rect x="21" y="10" width="2" height="4" fill="#ffffff"></rect>195 </svg>196 </div>197 </div>198 </div>199 200 <div class="app-bar">201 <div class="app-title">Product Details</div>202 <div class="close-btn">203 <svg viewBox="0 0 24 24">204 <path d="M6 6 L18 18 M18 6 L6 18" stroke="#1AA4A8" stroke-width="2" fill="none" />205 </svg>206 </div>207 </div>208 209 <div class="content">210 <div class="product-card">211 <div class="img-ph">[IMG: Gray Women's Sports Shoe]</div>212 <div class="prod-text">213 <div class="prod-name">Columbus Selena Women'S Sports Shoes -Running, Walking, Gym (B.Pink)</div>214 <div class="prod-id">Product Id:153321582</div>215 <div class="price">₹1499</div>216 </div>217 </div>218 219 <div class="tabs">220 <div class="tab active">SPECIFICATION</div>221 <div class="tab">DESCRIPTION</div>222 <div class="tab">LEGAL INFO</div>223 <div class="tab-indicator"></div>224 </div>225 226 <div class="section">227 <div class="section-title">Key Feature</div>228 <div class="row">229 <div class="label">Brand</div>230 <div class="value">Columbus,</div>231 </div>232 </div>233 234 <div class="section">235 <div class="section-title">Closure Detail</div>236 <div class="row">237 <div class="label">Closure</div>238 <div class="value">Lace-up,</div>239 </div>240 </div>241 242 <div class="section">243 <div class="section-title">Footwear Specification</div>244 <div class="row">245 <div class="label">Color</div>246 <div class="value">Gray</div>247 </div>248 <div class="row">249 <div class="label">Upper Material</div>250 <div class="value">Mesh</div>251 </div>252 <div class="row">253 <div class="label">Sole Material</div>254 <div class="value">EVA,</div>255 </div>256 </div>257 </div>258 259 <div class="gesture-bar">260 <div class="gesture-pill"></div>261 </div>262</div>263</body>264</html>