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>Gazelle Shoes - Ratings & Reviews</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: #111; }9 #render-target {10 width: 1080px; height: 2400px; position: relative; overflow: hidden; background: #ffffff;11 }12 13 .pad { padding-left: 56px; padding-right: 56px; }14 15 /* Top header */16 .top-area {17 background: #efefef;18 height: 370px;19 position: relative;20 }21 .top-actions {22 position: absolute; left: 0; right: 0; top: 80px; height: 56px;23 }24 .icon-btn {25 width: 56px; height: 56px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%;26 }27 .back { position: absolute; left: 24px; top: 0; }28 .share { position: absolute; right: 120px; top: 0; }29 .favorite { position: absolute; right: 48px; top: 0; }30 31 .title-wrap {32 position: absolute; left: 0; right: 0; top: 150px; text-align: center;33 }34 .product-title {35 font-weight: 800; font-size: 44px; letter-spacing: 6px;36 }37 .price {38 margin-top: 16px; font-size: 34px; color: #333; letter-spacing: 2px;39 }40 41 /* Thumbnail carousel (semantic image placeholders) */42 .thumbs {43 position: absolute; left: 0; right: 0; bottom: 0;44 height: 140px; display: flex; align-items: center; gap: 24px;45 padding: 0 24px 18px 24px; overflow: hidden;46 }47 .thumb {48 flex: 0 0 200px; height: 110px; background: #E0E0E0; border: 1px solid #BDBDBD;49 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 24px; border-radius: 6px; position: relative;50 }51 .thumb.selected::after {52 content: ""; position: absolute; inset: -8px; border: 3px dashed #d9d9d9; border-radius: 10px;53 }54 55 /* Section heading */56 .section-title {57 font-weight: 900; font-size: 58px; letter-spacing: 6px; margin: 48px 0 24px 0;58 }59 60 /* Ratings Summary */61 .ratings-summary { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; }62 .score-big { font-size: 130px; font-weight: 800; letter-spacing: 6px; line-height: 1; }63 .percent-big { font-size: 130px; font-weight: 800; letter-spacing: 10px; line-height: 1; }64 .stars { margin-top: 18px; display: flex; gap: 8px; }65 .star svg { width: 30px; height: 30px; }66 .review-count {67 margin-top: 22px; font-weight: 800; letter-spacing: 4px; font-size: 32px; display: inline-block; border-bottom: 5px solid #111; padding-bottom: 10px;68 }69 .recommend-note { font-size: 34px; line-height: 1.35; color: #222; max-width: 420px; }70 71 .divider { height: 2px; background: #ddd; margin: 40px 0; }72 73 /* Sliders (Size / Width) */74 .meter-block { margin: 28px 0 46px 0; }75 .meter-title { font-weight: 800; letter-spacing: 6px; font-size: 32px; margin-bottom: 18px; }76 .meter-rail { height: 4px; background: #d9d9d9; position: relative; }77 .meter-thumb { position: absolute; top: -10px; width: 120px; height: 24px; background: #111; border-radius: 4px; }78 .meter-labels { margin-top: 22px; display: flex; justify-content: space-between; font-size: 30px; color: #333; }79 80 /* Progress Bars (Comfort / Quality) */81 .progress-title { font-weight: 800; letter-spacing: 6px; font-size: 32px; margin: 40px 0 16px 0; }82 .progress-rail { height: 10px; background: #d9d9d9; position: relative; }83 .progress-fill { position: absolute; left: 0; top: 0; bottom: 0; background: #000; }84 .progress-labels { display: flex; justify-content: space-between; margin-top: 18px; font-size: 30px; color: #333; }85 86 /* Complete the look */87 .look-title { font-weight: 900; font-size: 62px; letter-spacing: 6px; margin: 66px 0 28px 0; }88 .look-row {89 display: flex; gap: 24px; overflow: hidden;90 }91 .card {92 width: 306px; height: 410px; position: relative; background: #E0E0E0; border: 1px solid #BDBDBD;93 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 26px;94 }95 .card .heart {96 position: absolute; right: 20px; top: 20px; width: 48px; height: 48px; background: rgba(255,255,255,0.9); border-radius: 24px;97 display: flex; align-items: center; justify-content: center; border: 1px solid #dcdcdc;98 }99 100 /* Bottom gesture bar */101 .gesture {102 position: absolute; left: 50%; transform: translateX(-50%);103 bottom: 22px; width: 320px; height: 10px; background: #bdbdbd; border-radius: 8px;104 }105</style>106</head>107<body>108<div id="render-target">109 <!-- Header -->110 <div class="top-area">111 <div class="top-actions pad">112 <div class="icon-btn back">113 <svg viewBox="0 0 24 24" width="28" height="28"><path d="M15.5 4l-8 8 8 8" fill="none" stroke="#111" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>114 </div>115 <div class="icon-btn share">116 <svg viewBox="0 0 24 24" width="28" height="28"><path d="M18 8a3 3 0 10-3-3 3 3 0 003 3zm-12 7a3 3 0 103 3 3 3 0 00-3-3zm12-4a3 3 0 103 3 3 3 0 00-3-3zM7.5 16.5l9-5.5M7.5 7.5l9 5.5" fill="none" stroke="#111" stroke-width="2" stroke-linecap="round"/></svg>117 </div>118 <div class="icon-btn favorite">119 <svg viewBox="0 0 24 24" width="28" height="28"><path d="M12 21s-7-4.7-7-10a4 4 0 017-2.7A4 4 0 0119 11c0 5.3-7 10-7 10z" fill="none" stroke="#111" stroke-width="2" stroke-linejoin="round"/></svg>120 </div>121 </div>122 <div class="title-wrap">123 <div class="product-title">GAZELLE SHOES</div>124 <div class="price">$130.00</div>125 </div>126 127 <div class="thumbs">128 <div class="thumb">[IMG: Tan Shoe]</div>129 <div class="thumb">[IMG: White Shoe]</div>130 <div class="thumb">[IMG: Green Shoe]</div>131 <div class="thumb selected">[IMG: Beige Shoe]</div>132 <div class="thumb">[IMG: White Shoe]</div>133 <div class="thumb">[IMG: Orange Shoe]</div>134 <div class="thumb">[IMG: Pink Shoe]</div>135 </div>136 </div>137 138 <!-- Ratings & Reviews -->139 <div class="pad">140 <div class="section-title">RATINGS & REVIEWS</div>141 <div class="ratings-summary">142 <div>143 <div class="score-big">4.7</div>144 <div class="stars">145 <span class="star"><svg viewBox="0 0 24 24"><path d="M12 2l3 7h7l-5.7 4.1L18.5 22 12 17.6 5.5 22l2.2-8.9L2 9h7z" fill="#111"/></svg></span>146 <span class="star"><svg viewBox="0 0 24 24"><path d="M12 2l3 7h7l-5.7 4.1L18.5 22 12 17.6 5.5 22l2.2-8.9L2 9h7z" fill="#111"/></svg></span>147 <span class="star"><svg viewBox="0 0 24 24"><path d="M12 2l3 7h7l-5.7 4.1L18.5 22 12 17.6 5.5 22l2.2-8.9L2 9h7z" fill="#111"/></svg></span>148 <span class="star"><svg viewBox="0 0 24 24"><path d="M12 2l3 7h7l-5.7 4.1L18.5 22 12 17.6 5.5 22l2.2-8.9L2 9h7z" fill="#111"/></svg></span>149 <span class="star"><svg viewBox="0 0 24 24"><path d="M12 2l3 7h7l-5.7 4.1L18.5 22 12 17.6 5.5 22l2.2-8.9L2 9h7z" fill="#111"/></svg></span>150 </div>151 <div class="review-count">616 REVIEWS</div>152 </div>153 <div style="text-align:right;">154 <div class="percent-big">95 %</div>155 <div class="recommend-note">of customers recommend this product</div>156 </div>157 </div>158 159 <div class="divider"></div>160 161 <!-- Size -->162 <div class="meter-block">163 <div class="meter-title">SIZE</div>164 <div class="meter-rail">165 <div class="meter-thumb" style="left:62%;"></div>166 </div>167 <div class="meter-labels">168 <span>Too small</span>169 <span>Perfect</span>170 <span>Too large</span>171 </div>172 </div>173 174 <!-- Width -->175 <div class="meter-block">176 <div class="meter-title">WIDTH</div>177 <div class="meter-rail">178 <div class="meter-thumb" style="left:46%;"></div>179 </div>180 <div class="meter-labels">181 <span>Too narrow</span>182 <span>Perfect</span>183 <span>Too wide</span>184 </div>185 </div>186 187 <!-- Comfort -->188 <div class="progress-title">COMFORT</div>189 <div class="progress-rail">190 <div class="progress-fill" style="width: 86%;"></div>191 </div>192 <div class="progress-labels">193 <span>Uncomfortable</span>194 <span>Comfortable</span>195 </div>196 197 <!-- Quality -->198 <div class="progress-title">QUALITY</div>199 <div class="progress-rail">200 <div class="progress-fill" style="width: 94%;"></div>201 </div>202 <div class="progress-labels">203 <span>Poor</span>204 <span>Perfect</span>205 </div>206 207 <!-- Complete the look -->208 <div class="look-title">COMPLETE THE LOOK</div>209 <div class="look-row">210 <div class="card">211 [IMG: Tank Top on Model]212 <div class="heart">213 <svg viewBox="0 0 24 24" width="24" height="24"><path d="M12 21s-7-4.7-7-10a4 4 0 017-2.7A4 4 0 0119 11c0 5.3-7 10-7 10z" fill="none" stroke="#111" stroke-width="2" stroke-linejoin="round"/></svg>214 </div>215 </div>216 <div class="card">217 [IMG: Patterned Jacket on Model]218 <div class="heart">219 <svg viewBox="0 0 24 24" width="24" height="24"><path d="M12 21s-7-4.7-7-10a4 4 0 017-2.7A4 4 0 0119 11c0 5.3-7 10-7 10z" fill="none" stroke="#111" stroke-width="2" stroke-linejoin="round"/></svg>220 </div>221 </div>222 <div class="card">223 [IMG: Outfit Item]224 <div class="heart">225 <svg viewBox="0 0 24 24" width="24" height="24"><path d="M12 21s-7-4.7-7-10a4 4 0 017-2.7A4 4 0 0119 11c0 5.3-7 10-7 10z" fill="none" stroke="#111" stroke-width="2" stroke-linejoin="round"/></svg>226 </div>227 </div>228 </div>229 </div>230 231 <div class="gesture"></div>232</div>233</body>234</html>