GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Samba Classic - Ratings & Reviews</title>5<style>6 body { margin:0; padding:0; background:transparent; font-family: Helvetica, Arial, sans-serif; color:#111; }7 #render-target {8 width:1080px; height:2400px;9 position:relative; overflow:hidden;10 background:#ffffff;11 }12 13 /* Top actions */14 .top-actions {15 position:relative;16 padding:40px 40px 0 40px;17 display:flex;18 align-items:center;19 justify-content:space-between;20 }21 .icon-btn { width:64px; height:64px; display:flex; align-items:center; justify-content:center; }22 .icon-btn svg { width:44px; height:44px; stroke:#111; fill:none; stroke-width:3; }23 24 /* Title & price */25 .title-area { text-align:center; padding-top:10px; }26 .product-title { font-size:48px; letter-spacing:4px; font-weight:700; }27 .price { font-size:36px; margin-top:10px; }28 29 /* Thumbnail strip */30 .thumb-strip {31 margin:30px auto 10px auto;32 width:100%; padding:0 40px;33 display:flex; justify-content:center; gap:140px;34 }35 .thumb {36 width:210px; height:110px;37 background:#E0E0E0; border:2px solid #BDBDBD; display:flex;38 align-items:center; justify-content:center; color:#666; font-size:26px;39 border-radius:10px;40 }41 42 /* Hero product image */43 .hero {44 width:960px; height:730px;45 margin:0 auto;46 background:#E0E0E0; border:1px solid #BDBDBD;47 display:flex; align-items:center; justify-content:center;48 color:#757575; font-size:28px; border-radius:8px;49 }50 51 /* Ratings header */52 .section-title {53 font-size:64px; font-weight:700; letter-spacing:6px;54 margin:70px 40px 20px 40px;55 }56 57 /* Ratings grid */58 .ratings-row {59 display:flex; justify-content:space-between; align-items:flex-start;60 padding:10px 40px 0 40px;61 }62 .rating-left, .rating-right { width:48%; }63 .big-number { font-size:150px; font-weight:700; letter-spacing:8px; }64 .stars { display:flex; gap:12px; margin:20px 0; }65 .stars svg { width:42px; height:42px; fill:#111; }66 .reviews-count { font-size:30px; letter-spacing:2px; margin-top:15px; font-weight:600; }67 .recommend-text { font-size:32px; margin-top:30px; color:#333; line-height:1.3; }68 69 /* Sliders & scales */70 .scale-block { padding:40px 40px 10px 40px; }71 .label { font-size:30px; font-weight:700; letter-spacing:3px; margin-bottom:18px; }72 .scale-line {73 height:10px; background:#ddd; position:relative; border-radius:6px;74 }75 .scale-indicator {76 position:absolute; top:-6px; width:120px; height:22px; background:#111; border-radius:10px;77 left:50%; transform:translateX(-50%);78 }79 .scale-indicator.left { left:36%; }80 .scale-indicator.center { left:50%; }81 .scale-indicator.right { left:78%; }82 .scale-texts {83 display:flex; justify-content:space-between; font-size:30px; color:#555; margin-top:16px;84 }85 86 /* Bars for comfort & quality */87 .bar-block { padding:30px 40px 10px 40px; }88 .bar-line {89 height:16px; background:#ddd; border-radius:8px; position:relative;90 }91 .bar-fill {92 position:absolute; top:0; left:0; height:100%; background:#111; border-radius:8px;93 width:78%;94 }95 .bar-fill.q { width:90%; }96 .bar-caption {97 display:flex; justify-content:space-between; color:#333; font-size:30px; margin-top:16px;98 }99</style>100</head>101<body>102<div id="render-target">103 104 <!-- Top actions -->105 <div class="top-actions">106 <div class="icon-btn">107 <!-- Back arrow -->108 <svg viewBox="0 0 24 24">109 <path d="M15 4 L7 12 L15 20" />110 </svg>111 </div>112 <div style="display:flex; gap:26px;">113 <div class="icon-btn">114 <!-- Share icon -->115 <svg viewBox="0 0 24 24">116 <circle cx="6" cy="12" r="2"></circle>117 <circle cx="18" cy="6" r="2"></circle>118 <circle cx="18" cy="18" r="2"></circle>119 <path d="M8 12 L16 7 M8 12 L16 17"></path>120 </svg>121 </div>122 <div class="icon-btn">123 <!-- Heart icon -->124 <svg viewBox="0 0 24 24">125 <path d="M12 20 C12 20 5 14 4 10 C3 7 5 5 8 5 C10 5 12 7 12 7 C12 7 14 5 16 5 C19 5 21 7 20 10 C19 14 12 20 12 20 Z"></path>126 </svg>127 </div>128 </div>129 </div>130 131 <!-- Title and price -->132 <div class="title-area">133 <div class="product-title">SAMBA CLASSIC</div>134 <div class="price">$90.00</div>135 </div>136 137 <!-- Thumbnail strip -->138 <div class="thumb-strip">139 <div class="thumb">[IMG: Black Shoe]</div>140 <div class="thumb">[IMG: White Shoe]</div>141 </div>142 143 <!-- Hero image -->144 <div class="hero">[IMG: Person wearing Samba shoes on orange backdrop]</div>145 146 <!-- Ratings & Reviews -->147 <div class="section-title">RATINGS & REVIEWS</div>148 149 <div class="ratings-row">150 <div class="rating-left">151 <div class="big-number">4.6</div>152 <div class="stars">153 <svg viewBox="0 0 24 24"><polygon points="12,2 15,9 22,9 16.5,13.5 18.5,21 12,16.8 5.5,21 7.5,13.5 2,9 9,9"></polygon></svg>154 <svg viewBox="0 0 24 24"><polygon points="12,2 15,9 22,9 16.5,13.5 18.5,21 12,16.8 5.5,21 7.5,13.5 2,9 9,9"></polygon></svg>155 <svg viewBox="0 0 24 24"><polygon points="12,2 15,9 22,9 16.5,13.5 18.5,21 12,16.8 5.5,21 7.5,13.5 2,9 9,9"></polygon></svg>156 <svg viewBox="0 0 24 24"><polygon points="12,2 15,9 22,9 16.5,13.5 18.5,21 12,16.8 5.5,21 7.5,13.5 2,9 9,9"></polygon></svg>157 <svg viewBox="0 0 24 24"><polygon points="12,2 15,9 22,9 16.5,13.5 18.5,21 12,16.8 5.5,21 7.5,13.5 2,9 9,9"></polygon></svg>158 </div>159 <div class="reviews-count">1893 REVIEWS</div>160 </div>161 <div class="rating-right">162 <div class="big-number">93%</div>163 <div class="recommend-text">of customers recommend<br>this product</div>164 </div>165 </div>166 167 <!-- Size scale -->168 <div class="scale-block">169 <div class="label">SIZE</div>170 <div class="scale-line">171 <div class="scale-indicator center"></div>172 </div>173 <div class="scale-texts">174 <div>Too small</div>175 <div>Perfect</div>176 <div>Too large</div>177 </div>178 </div>179 180 <!-- Width scale -->181 <div class="scale-block">182 <div class="label">WIDTH</div>183 <div class="scale-line">184 <div class="scale-indicator left"></div>185 </div>186 <div class="scale-texts">187 <div>Too narrow</div>188 <div>Perfect</div>189 <div>Too wide</div>190 </div>191 </div>192 193 <!-- Comfort bar -->194 <div class="bar-block">195 <div class="label">COMFORT</div>196 <div class="bar-line">197 <div class="bar-fill"></div>198 </div>199 <div class="bar-caption">200 <div>Uncomfortable</div>201 <div>Comfortable</div>202 </div>203 </div>204 205 <!-- Quality bar -->206 <div class="bar-block">207 <div class="label">QUALITY</div>208 <div class="bar-line">209 <div class="bar-fill q"></div>210 </div>211 <div class="bar-caption">212 <div>Poor</div>213 <div>Perfect</div>214 </div>215 </div>216 217</div>218</body>219</html>