GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Samba Classic - Mock</title>6<style>7 body { margin:0; padding:0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif; }8 #render-target {9 width:1080px; height:2400px; position:relative; overflow:hidden;10 background:#FFFFFF; color:#111;11 }12 /* Generic */13 .row { display:flex; align-items:center; }14 .space-between { justify-content:space-between; }15 .title { font-weight:800; letter-spacing:3px; }16 .muted { color:#7a7a7a; }17 .section { padding: 0 60px; }18 .divider { height:1px; background:#e9e9e9; margin:24px 0; }19 20 /* Top app bar */21 .appbar {22 height:120px; display:flex; align-items:center;23 padding: 0 40px; box-sizing:border-box;24 }25 .icon-btn { width:72px; height:72px; display:flex; justify-content:center; align-items:center; cursor:default; }26 .icon { width:40px; height:40px; }27 .header-center { position:absolute; left:0; right:0; text-align:center; top:120px; }28 .product-name { font-size:42px; font-weight:800; letter-spacing:2px; text-transform:uppercase; margin-top:10px; }29 .price { font-size:38px; margin-top:8px; color:#111; }30 31 /* Thumbnail strip */32 .thumb-strip { margin-top:150px; padding:0 40px; display:flex; gap:28px; }33 .thumb {34 width:220px; height:120px; background:#E0E0E0; border:1px solid #BDBDBD; border-radius:8px;35 display:flex; align-items:center; justify-content:center; color:#666; font-size:24px;36 }37 38 /* Fit bars */39 .fit-section { margin-top:60px; }40 .fit-block { margin: 38px 0 46px 0; }41 .fit-label { font-size:30px; font-weight:800; letter-spacing:2px; margin-bottom:18px; }42 .scale-track {43 position:relative; height:6px; background:#d9d9d9; border-radius:6px;44 }45 .scale-track::after { /* endpoints faint line extensions mimic long slider */46 content:''; position:absolute; left:0; right:0; top:-1px; height:8px; border-radius:8px;47 }48 .scale-knob {49 position:absolute; top:-10px; width:120px; height:20px; background:#111; border-radius:10px;50 }51 .scale-row { display:flex; justify-content:space-between; font-size:28px; color:#555; margin-top:18px;}52 .progress-bar {53 height:10px; background:#111; border-radius:6px;54 }55 .legend-row { display:flex; justify-content:space-between; font-size:28px; color:#555; margin-top:18px;}56 57 /* "Complete the look" */58 .section-title {59 padding:0 60px; margin-top:40px; font-size:56px; font-weight:900; letter-spacing:2px; text-transform:uppercase;60 }61 .grid {62 padding: 0 40px; margin-top:30px;63 display:grid; grid-template-columns: repeat(3, 1fr); gap:30px;64 }65 .card {66 background:#fff; border:1px solid #eee; border-radius:8px; overflow:hidden;67 }68 .card-img {69 width:100%; height:520px; background:#E0E0E0; border-bottom:1px solid #BDBDBD;70 display:flex; align-items:center; justify-content:center; color:#666; font-size:28px; position:relative;71 }72 .heart-wrap { position:absolute; right:22px; top:22px; width:64px; height:64px; background:#fff; border-radius:50%;73 display:flex; align-items:center; justify-content:center; box-shadow:0 2px 6px rgba(0,0,0,0.12); }74 .card-body { padding:28px; }75 .price-row { display:flex; gap:22px; align-items:baseline; }76 .sale { color:#f44336; font-size:36px; font-weight:800; }77 .orig { color:#777; text-decoration:line-through; font-size:34px; }78 .prod-name { margin-top:18px; font-size:36px; font-weight:800; letter-spacing:1px; line-height:1.25; text-transform:uppercase; }79 .subtle { color:#7a7a7a; font-size:30px; margin-top:10px; }80 81 /* Footer header */82 .footer-title { padding:0 60px; margin-top:60px; font-size:64px; font-weight:900; letter-spacing:2px; text-transform:uppercase; }83</style>84</head>85<body>86<div id="render-target">87 88 <!-- Top app bar -->89 <div class="appbar space-between">90 <div class="icon-btn" title="Back">91 <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">92 <polyline points="15 18 9 12 15 6"></polyline>93 </svg>94 </div>95 <div class="row" style="gap:18px;">96 <div class="icon-btn" title="Share">97 <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">98 <circle cx="18" cy="5" r="3"></circle>99 <circle cx="6" cy="12" r="3"></circle>100 <circle cx="18" cy="19" r="3"></circle>101 <line x1="8.7" y1="10.7" x2="15.3" y2="6.3"></line>102 <line x1="8.7" y1="13.3" x2="15.3" y2="17.7"></line>103 </svg>104 </div>105 <div class="icon-btn" title="Favorite">106 <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2">107 <path d="M12 21s-7-4.35-9.5-8.23C.4 9.2 2.24 5 6.1 5c2 0 3.4 1.1 3.9 2.1C10.6 6.1 12 5 13.9 5c3.86 0 5.7 4.2 3.6 7.77C19 16.65 12 21 12 21z"/>108 </svg>109 </div>110 </div>111 </div>112 113 <!-- Center title and price -->114 <div class="header-center">115 <div class="product-name">SAMBA CLASSIC</div>116 <div class="price">$90.00</div>117 </div>118 119 <!-- Thumbnails -->120 <div class="thumb-strip">121 <div class="thumb">[IMG: Black Samba Sneaker]</div>122 <div class="thumb">[IMG: White Samba Sneaker]</div>123 </div>124 125 <!-- Fit information -->126 <div class="section fit-section">127 <!-- Size -->128 <div class="fit-block">129 <div class="fit-label">SIZE</div>130 <div class="scale-track">131 <div class="scale-knob" style="left:43%;"></div>132 </div>133 <div class="scale-row">134 <div>Too small</div>135 <div>Perfect</div>136 <div>Too large</div>137 </div>138 </div>139 140 <!-- Width -->141 <div class="fit-block">142 <div class="fit-label">WIDTH</div>143 <div class="scale-track">144 <div class="scale-knob" style="left:38%;"></div>145 </div>146 <div class="scale-row">147 <div>Too narrow</div>148 <div>Perfect</div>149 <div>Too wide</div>150 </div>151 </div>152 153 <!-- Comfort -->154 <div class="fit-block">155 <div class="fit-label">COMFORT</div>156 <div class="progress-bar" style="width:86%;"></div>157 <div class="legend-row">158 <div>Uncomfortable</div>159 <div>Comfortable</div>160 </div>161 </div>162 163 <!-- Quality -->164 <div class="fit-block">165 <div class="fit-label">QUALITY</div>166 <div class="progress-bar" style="width:92%;"></div>167 <div class="legend-row">168 <div>Poor</div>169 <div>Perfect</div>170 </div>171 </div>172 </div>173 174 <!-- Complete the look -->175 <div class="section-title">COMPLETE THE LOOK</div>176 <div class="grid">177 <!-- Card 1 -->178 <div class="card">179 <div class="card-img">[IMG: Black Track Jacket]180 <div class="heart-wrap">181 <svg viewBox="0 0 24 24" width="30" height="30" fill="none" stroke="#111" stroke-width="2">182 <path d="M12 21s-7-4.35-9.5-8.23C.4 9.2 2.24 5 6.1 5c2 0 3.4 1.1 3.9 2.1C10.6 6.1 12 5 13.9 5c3.86 0 5.7 4.2 3.6 7.77C19 16.65 12 21 12 21z"/>183 </svg>184 </div>185 </div>186 <div class="card-body">187 <div class="price-row">188 <div class="sale">$66.00</div>189 <div class="orig">$110.00</div>190 </div>191 <div class="prod-name">AUSTIN FC ANTHEM JACKET</div>192 <div class="subtle">Men's Performance</div>193 </div>194 </div>195 196 <!-- Card 2 -->197 <div class="card">198 <div class="card-img">[IMG: Navy Sweat Shorts]199 <div class="heart-wrap">200 <svg viewBox="0 0 24 24" width="30" height="30" fill="none" stroke="#111" stroke-width="2">201 <path d="M12 21s-7-4.35-9.5-8.23C.4 9.2 2.24 5 6.1 5c2 0 3.4 1.1 3.9 2.1C10.6 6.1 12 5 13.9 5c3.86 0 5.7 4.2 3.6 7.77C19 16.65 12 21 12 21z"/>202 </svg>203 </div>204 </div>205 <div class="card-body">206 <div class="price-row">207 <div class="sale">$27.00</div>208 <div class="orig">$45.00</div>209 </div>210 <div class="prod-name">TIRO 23 LEAGUE SWEAT SHORTS</div>211 <div class="subtle">Men's Performance</div>212 </div>213 </div>214 215 <!-- Card 3 -->216 <div class="card">217 <div class="card-img">[IMG: Black Sports Bag]218 <div class="heart-wrap">219 <svg viewBox="0 0 24 24" width="30" height="30" fill="none" stroke="#111" stroke-width="2">220 <path d="M12 21s-7-4.35-9.5-8.23C.4 9.2 2.24 5 6.1 5c2 0 3.4 1.1 3.9 2.1C10.6 6.1 12 5 13.9 5c3.86 0 5.7 4.2 3.6 7.77C19 16.65 12 21 12 21z"/>221 </svg>222 </div>223 </div>224 <div class="card-body">225 <div class="price-row">226 <div class="sale">$50.00</div>227 </div>228 <div class="prod-name">STADIUM BAG</div>229 <div class="subtle">Performance</div>230 </div>231 </div>232 </div>233 234 <!-- Footer heading -->235 <div class="footer-title">YOU MAY ALSO LIKE</div>236 237</div>238</body>239</html>