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 - Dark UI</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: #222222;15 color: #EDEDED;16 }17 18 .screen {19 width: 100%;20 height: 100%;21 box-sizing: border-box;22 padding: 48px 48px 40px 48px;23 }24 25 .price-row {26 font-weight: 800;27 font-size: 56px;28 color: #ff517d;29 letter-spacing: 0.5px;30 margin-bottom: 30px;31 }32 .divider {33 height: 1px;34 background: #3a3a3a;35 margin: 24px 0;36 }37 38 .accordion {39 display: flex;40 align-items: center;41 justify-content: space-between;42 text-transform: uppercase;43 letter-spacing: 1px;44 font-weight: 800;45 color: #D7D7D7;46 font-size: 34px;47 padding: 22px 0;48 }49 .accordion .icon {50 width: 40px;51 height: 40px;52 fill: none;53 stroke: #CFCFCF;54 stroke-width: 6;55 }56 57 .cta-row {58 display: flex;59 align-items: center;60 gap: 24px;61 margin: 14px 0 34px 0;62 }63 .btn-primary {64 flex: 1;65 background: #138a43;66 color: #ffffff;67 font-weight: 800;68 font-size: 40px;69 text-align: center;70 padding: 34px 0;71 border-radius: 4px;72 letter-spacing: 1px;73 }74 .wishlist {75 width: 120px;76 height: 120px;77 border-radius: 60px;78 background: #2b2b2b;79 border: 1px solid #444;80 display: flex;81 align-items: center;82 justify-content: center;83 }84 .wishlist svg {85 width: 52px; height: 52px;86 fill: none; stroke: #ffffff; stroke-width: 6;87 }88 89 .card {90 border: 2px solid #4a4a4a;91 border-radius: 6px;92 padding: 32px;93 display: flex;94 align-items: center;95 gap: 28px;96 margin-bottom: 36px;97 background: #232323;98 }99 .truck {100 width: 72px; height: 56px;101 }102 .card-text {103 display: flex;104 flex-direction: column;105 gap: 12px;106 }107 .card-text .small {108 font-size: 30px;109 color: #CFCFCF;110 letter-spacing: 0.3px;111 }112 .card-text .link {113 font-size: 34px;114 font-weight: 800;115 color: #FFFFFF;116 }117 118 .thick-divider {119 height: 8px;120 background: #0d0d0d;121 margin: 14px -48px 18px -48px;122 }123 124 .section-header {125 display: flex;126 align-items: center;127 justify-content: space-between;128 font-weight: 800;129 font-size: 42px;130 color: #EDEDED;131 padding: 18px 0 10px 0;132 }133 .section-header .minus {134 width: 44px; height: 44px;135 }136 137 .lead {138 font-size: 34px;139 color: #D4D4D4;140 margin: 22px 0 32px 0;141 }142 143 ul.features {144 list-style-type: disc;145 padding-left: 42px;146 margin: 0 0 20px 0;147 color: #E0E0E0;148 }149 ul.features li {150 font-size: 32px;151 line-height: 58px;152 }153 154 .code {155 font-size: 32px;156 color: #D6D6D6;157 margin-top: 22px;158 margin-bottom: 28px;159 }160 161 .accordion-item {162 border-top: 1px solid #3a3a3a;163 border-bottom: 1px solid #3a3a3a;164 padding: 28px 0;165 margin: 6px 0;166 display: flex;167 align-items: center;168 justify-content: space-between;169 }170 .accordion-item .title {171 font-size: 36px;172 font-weight: 800;173 color: #DADADA;174 }175 .accordion-item .plus {176 width: 46px; height: 46px;177 stroke: #DADADA; stroke-width: 6; fill: none;178 }179</style>180</head>181<body>182<div id="render-target">183 <div class="screen">184 <div class="price-row">£67.50 <span style="color:#ff6f8f; font-size:38px; font-weight:700;">(-19%)</span></div>185 186 <div class="divider"></div>187 188 <div class="accordion">189 <div>SIZE</div>190 <svg class="icon" viewBox="0 0 24 24">191 <polyline points="6,9 12,15 18,9" />192 </svg>193 </div>194 195 <div class="divider"></div>196 197 <div class="cta-row">198 <div class="btn-primary">ADD TO BAG</div>199 <div class="wishlist">200 <svg viewBox="0 0 24 24">201 <path d="M12 21s-6-4.35-8.5-7.2C1.5 11.4 3 8 6.2 8c2 0 3.2 1.2 3.8 2 0.6-0.8 1.8-2 3.8-2 3.2 0 4.7 3.4 2.7 5.8C18 16.65 12 21 12 21z"/>202 </svg>203 </div>204 </div>205 206 <div class="card">207 <svg class="truck" viewBox="0 0 64 40">208 <rect x="2" y="10" width="36" height="18" fill="none" stroke="#FFFFFF" stroke-width="3"></rect>209 <rect x="38" y="16" width="16" height="12" fill="none" stroke="#FFFFFF" stroke-width="3"></rect>210 <circle cx="14" cy="32" r="4" fill="none" stroke="#FFFFFF" stroke-width="3"></circle>211 <circle cx="46" cy="32" r="4" fill="none" stroke="#FFFFFF" stroke-width="3"></circle>212 </svg>213 <div class="card-text">214 <div class="small">Free Delivery</div>215 <div class="link">View our Delivery & Returns Policy</div>216 </div>217 </div>218 219 <div class="thick-divider"></div>220 221 <div class="section-header">222 <div>Product details</div>223 <svg class="minus" viewBox="0 0 24 24">224 <line x1="5" y1="12" x2="19" y2="12" stroke="#DCDCDC" stroke-width="4" />225 </svg>226 </div>227 228 <div class="lead">Shoes, Boots & Trainers by Under Armour</div>229 230 <ul class="features">231 <li>Hit the ground running</li>232 <li>Low-profile design</li>233 <li>Pull tab for easy entry</li>234 <li>Lace-up fastening</li>235 <li>Padded tongue and cuff</li>236 <li>Signature Under Armour branding</li>237 <li>Charged Cushioning midsole uses compression molded foam for responsiveness and durability</li>238 <li>Durable rubber outsole</li>239 <li>Lugged grip tread</li>240 <li>Textured grip tread</li>241 </ul>242 243 <div class="code">Product code 123868529</div>244 245 <div class="accordion-item">246 <div class="title">Brand</div>247 <svg class="plus" viewBox="0 0 24 24">248 <line x1="12" y1="5" x2="12" y2="19" />249 <line x1="5" y1="12" x2="19" y2="12" />250 </svg>251 </div>252 253 <div class="accordion-item">254 <div class="title">Look after me</div>255 <svg class="plus" viewBox="0 0 24 24">256 <line x1="12" y1="5" x2="12" y2="19" />257 <line x1="5" y1="12" x2="19" y2="12" />258 </svg>259 </div>260 </div>261</div>262</body>263</html>