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>Duroflex Sofa Reviews - Mock UI</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8 #render-target {9 width: 1080px; height: 2400px; position: relative; overflow: hidden;10 background: #f6f7f9; border-radius: 24px; box-shadow: 0 12px 40px rgba(0,0,0,0.25);11 }12 /* Top gradient header */13 .gradient-header {14 position: relative;15 width: 100%;16 height: 320px;17 background: linear-gradient(180deg, #a8e0dc 0%, #c7efe9 60%, #e6f7f5 100%);18 }19 .status-row {20 position: absolute; top: 18px; left: 24px; right: 24px;21 display: flex; align-items: center; justify-content: space-between; color: #2c2c2c;22 font-size: 34px; opacity: 0.8;23 }24 .search-bar {25 position: absolute; left: 24px; right: 24px; top: 90px;26 display: flex; align-items: center; gap: 22px;27 }28 .back-btn {29 width: 72px; height: 72px; display: flex; align-items: center; justify-content: center;30 }31 .search-input {32 flex: 1; height: 100px; border-radius: 22px; background: #fff;33 box-shadow: 0 2px 0 rgba(0,0,0,0.08) inset; display: flex; align-items: center;34 padding: 0 24px; gap: 18px; border: 1px solid #e3e3e3;35 }36 .search-input .label {37 font-size: 36px; color: #333;38 white-space: nowrap; overflow: hidden; text-overflow: ellipsis;39 }40 .round-icon {41 width: 72px; height: 72px; border-radius: 20px; background: #fff;42 border: 1px solid #e0e0e0; display: flex; align-items: center; justify-content: center;43 }44 /* Tabs */45 .tabs {46 position: absolute; bottom: 0; left: 0; right: 0;47 display: flex; gap: 40px; padding: 0 24px 18px 24px; align-items: flex-end;48 }49 .tab {50 font-size: 40px; color: #4a4a4a; padding: 30px 18px 16px 18px;51 }52 .tab.active { color: #e8671e; font-weight: 700; border-bottom: 8px solid #e8671e; }53 /* Content */54 .content {55 position: relative; background: #fff; border-top-left-radius: 24px; border-top-right-radius: 24px;56 margin-top: -10px; padding: 24px;57 }58 .section-title {59 font-size: 54px; font-weight: 700; color: #222; margin-top: 24px; margin-bottom: 18px;60 }61 .rating-row {62 display: flex; align-items: center; justify-content: space-between;63 padding: 12px 0;64 }65 .stars { color: #ff9900; font-size: 44px; letter-spacing: 4px; }66 .rating-row .right {67 display: flex; align-items: center; gap: 18px; font-size: 42px; color: #333;68 }69 .subtext {70 font-size: 40px; color: #666; margin-bottom: 24px;71 }72 /* By Feature */73 .feature-title {74 font-size: 50px; font-weight: 700; margin-top: 26px; margin-bottom: 10px; color: #232f3e;75 }76 .feature-item {77 display: flex; align-items: center; justify-content: space-between;78 padding: 26px 0; border-bottom: 1px solid #eee;79 }80 .feature-item .label { font-size: 44px; color: #333; }81 .feature-item .metrics { display: flex; align-items: center; gap: 24px; }82 .feature-item .metrics .stars { font-size: 44px; }83 .see-more {84 display: flex; align-items: center; gap: 16px; color: #0a4; font-weight: 700;85 font-size: 42px; margin: 18px 0 4px 0;86 }87 /* Reviews with videos */88 .media-title { font-size: 52px; font-weight: 700; margin: 38px 0 18px 0; color: #222; }89 .video-list {90 display: flex; gap: 28px; overflow: hidden;91 }92 .video-card {93 width: 330px; height: 520px; border-radius: 22px; overflow: hidden; position: relative;94 box-shadow: 0 8px 18px rgba(0,0,0,0.08); background: #fff;95 }96 .video-thumb {97 width: 100%; height: 100%; background: #E0E0E0; border: 1px solid #BDBDBD;98 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 34px;99 }100 .video-overlay {101 position: absolute; left: 16px; right: 16px; bottom: 18px; color: #fff;102 }103 .overlay-stars { color: #ff9900; font-size: 40px; text-shadow: 0 2px 6px rgba(0,0,0,0.4); }104 .duration-row {105 display: flex; align-items: center; gap: 12px; margin-top: 10px; font-size: 36px;106 color: #fff; text-shadow: 0 2px 6px rgba(0,0,0,0.4);107 }108 /* Reviews with images section title placeholder */109 .images-title { font-size: 50px; font-weight: 700; margin-top: 34px; color: #222; }110 /* Bottom nav bar */111 .bottom-nav {112 position: absolute; bottom: 0; left: 0; right: 0; height: 180px;113 background: #fff; border-top: 1px solid #e2e2e2; display: flex; justify-content: space-around; align-items: center;114 }115 .nav-item { display: flex; flex-direction: column; align-items: center; gap: 14px; color: #333; }116 .nav-item span { font-size: 34px; }117 .nav-icon {118 width: 84px; height: 84px; border-radius: 22px; background: #f3f3f3; border: 1px solid #ddd;119 display: flex; align-items: center; justify-content: center;120 }121 /* Small home indicator bar */122 .gesture-bar {123 position: absolute; bottom: 192px; left: 50%; transform: translateX(-50%);124 width: 340px; height: 12px; background: #bdbdbd; border-radius: 6px; opacity: 0.7;125 }126</style>127</head>128<body>129<div id="render-target">130 <div class="gradient-header">131 <div class="status-row">132 <div>1:07</div>133 <div>• • •</div>134 </div>135 136 <div class="search-bar">137 <div class="back-btn">138 <svg width="56" height="56" viewBox="0 0 24 24" fill="#333"><path d="M15.5 18.5L9 12l6.5-6.5-1.4-1.4L6.2 12l7.9 7.9 1.4-1.4z"/></svg>139 </div>140 <div class="search-input">141 <svg width="44" height="44" viewBox="0 0 24 24" fill="#666"><path d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0016 9.5 6.5 6.5 0 109.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>142 <div class="label">Duroflex sofa set for living room</div>143 <div class="round-icon">144 <svg width="36" height="36" viewBox="0 0 24 24" fill="#333"><path d="M21 5h-3.2l-1.5-1.5h-6.6L8.2 5H5c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 12H5V7h16v10z"/></svg>145 </div>146 </div>147 </div>148 149 <div class="tabs">150 <div class="tab">Details</div>151 <div class="tab">Compare</div>152 <div class="tab active">Reviews</div>153 </div>154 </div>155 156 <div class="content">157 <div class="section-title">Customer reviews</div>158 <div class="rating-row">159 <div class="stars">★★★★★</div>160 <div class="right">161 <div>4 out of 5</div>162 <svg width="40" height="40" viewBox="0 0 24 24" fill="#555"><path d="M9 6l6 6-6 6z"/></svg>163 </div>164 </div>165 <div class="subtext">184 global ratings</div>166 167 <div class="feature-title">By feature</div>168 <div class="feature-item">169 <div class="label">Light weight</div>170 <div class="metrics">171 <div class="stars">★★★★☆</div>172 <div style="font-size:44px; color:#333;">4.4</div>173 </div>174 </div>175 <div class="feature-item">176 <div class="label">Value for money</div>177 <div class="metrics">178 <div class="stars">★★★★☆</div>179 <div style="font-size:44px; color:#333;">4.1</div>180 </div>181 </div>182 <div class="feature-item" style="border-bottom:none;">183 <div class="label">Comfort</div>184 <div class="metrics">185 <div class="stars">★★★☆☆</div>186 <div style="font-size:44px; color:#333;">3.9</div>187 </div>188 </div>189 190 <div class="see-more">191 <svg width="42" height="42" viewBox="0 0 24 24" fill="#0a4"><path d="M7 10l5 5 5-5z"/></svg>192 <div>See more</div>193 </div>194 195 <div class="media-title">Reviews with videos</div>196 <div class="video-list">197 <div class="video-card">198 <div class="video-thumb">[IMG: Video of product part]</div>199 <div class="video-overlay">200 <div class="overlay-stars">★★★★★</div>201 <div class="duration-row">202 <svg width="32" height="32" viewBox="0 0 24 24" fill="#fff"><path d="M8 5v14l11-7z"/></svg>203 <span>0:10</span>204 </div>205 </div>206 </div>207 <div class="video-card">208 <div class="video-thumb">[IMG: Cushion close-up]</div>209 <div class="video-overlay">210 <div class="overlay-stars">★★★★★</div>211 <div class="duration-row">212 <svg width="32" height="32" viewBox="0 0 24 24" fill="#fff"><path d="M8 5v14l11-7z"/></svg>213 <span>0:09</span>214 </div>215 </div>216 </div>217 <div class="video-card">218 <div class="video-thumb">[IMG: Sofa in living room]</div>219 <div class="video-overlay">220 <div class="overlay-stars">★★★★★</div>221 <div class="duration-row">222 <svg width="32" height="32" viewBox="0 0 24 24" fill="#fff"><path d="M8 5v14l11-7z"/></svg>223 <span>0:00</span>224 </div>225 </div>226 </div>227 </div>228 229 <div class="images-title">Reviews with images</div>230 </div>231 232 <div class="gesture-bar"></div>233 234 <div class="bottom-nav">235 <div class="nav-item">236 <div class="nav-icon">237 <svg width="40" height="40" viewBox="0 0 24 24" fill="#444"><path d="M12 3l9 8h-3v9H6v-9H3z"/></svg>238 </div>239 <span>Home</span>240 </div>241 <div class="nav-item">242 <div class="nav-icon">243 <svg width="40" height="40" viewBox="0 0 24 24" fill="#444"><path d="M12 12c2.8 0 5-2.2 5-5s-2.2-5-5-5-5 2.2-5 5 2.2 5 5 5zm0 2c-3.9 0-7 3.1-7 7h14c0-3.9-3.1-7-7-7z"/></svg>244 </div>245 <span>You</span>246 </div>247 <div class="nav-item">248 <div class="nav-icon">249 <svg width="40" height="40" viewBox="0 0 24 24" fill="#444"><path d="M12 2l9 6-9 6-9-6 9-6zm0 14l7.5-5 2.5 1.6v6.4c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V12.6L4.5 11 12 16z"/></svg>250 </div>251 <span>More</span>252 </div>253 <div class="nav-item">254 <div class="nav-icon">255 <svg width="40" height="40" viewBox="0 0 24 24" fill="#444"><path d="M7 4h-2l-2 12h16l-2-12h-2m-6 0v2h6V4H9z"/></svg>256 </div>257 <span>Cart</span>258 </div>259 <div class="nav-item">260 <div class="nav-icon">261 <svg width="40" height="40" viewBox="0 0 24 24" fill="#444"><path d="M3 6h18v2H3V6zm0 5h18v2H3v-2zm0 5h18v2H3v-2z"/></svg>262 </div>263 <span>Menu</span>264 </div>265 </div>266</div>267</body>268</html>