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 Reviews - Mock</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9 #render-target {10 width: 1080px; height: 2400px; position: relative; overflow: hidden;11 background: #EFEFEF; color: #222;12 }13 14 /* Status bar */15 .statusbar {16 height: 120px; background: #1F1F1F; color: #fff;17 display: flex; align-items: center; padding: 0 36px; font-size: 34px; letter-spacing: 0.5px;18 }19 .statusbar .right { margin-left: auto; display: flex; align-items: center; gap: 26px; }20 .dot { width: 10px; height: 10px; background: #BDBDBD; border-radius: 50%; display: inline-block; }21 22 /* App header with search */23 .appbar {24 height: 160px; background: #2C2C2C; display: flex; align-items: center; padding: 0 28px; gap: 22px; color: #fff;25 box-shadow: 0 2px 0 rgba(0,0,0,0.3);26 }27 .icon-btn { width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; }28 .search-pill {29 flex: 1; height: 100px; background: #fff; border-radius: 50px; display: flex; align-items: center;30 padding: 0 28px; color: #666; font-size: 36px; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.05);31 }32 .search-pill .text { flex: 1; padding: 0 18px; color: #3a3a3a; }33 .barcode { width: 72px; height: 72px; border-radius: 16px; display: flex; align-items: center; justify-content: center; }34 35 /* Section: small metric bars near top */36 .metrics-top { padding: 30px 70px 10px 70px; background: #EFEFEF; }37 .meter { width: 780px; height: 34px; display: flex; gap: 14px; }38 .meter .seg { flex: 1; background: #D9D9D9; border-radius: 4px; overflow: hidden; }39 .meter .seg.fill { background: #1209FF; }40 .metric-row { display: flex; gap: 30px; margin: 22px 0; }41 .metric-row .spacer { width: 120px; } /* visual left padding similar to screenshot */42 43 /* Content area */44 .content { padding: 30px 60px 160px 60px; }45 .subtle { color: #8D8D8D; }46 h1, h2, h3, p { margin: 0; }47 .heading { font-size: 40px; margin: 24px 0 40px; }48 .review { padding: 18px 6px 32px; }49 .stars { display: flex; gap: 10px; margin: 14px 0 18px; }50 .star { width: 56px; height: 56px; }51 .username { font-weight: bold; font-size: 36px; text-decoration: underline; display: inline-block; }52 .location { font-size: 36px; color: #333; }53 .time { margin-top: 10px; font-size: 32px; color: #9E9E9E; font-style: italic; }54 .title { margin-top: 28px; font-size: 42px; font-weight: 700; }55 .body { margin-top: 14px; font-size: 36px; color: #222; line-height: 1.4; }56 .kv { margin-top: 10px; font-size: 36px; }57 .kv b { font-weight: 700; }58 .recommend { margin-top: 28px; font-size: 38px; font-weight: 700; display: flex; align-items: center; gap: 14px; }59 .review-metrics { margin: 34px 0 8px 110px; } /* indented like screenshot */60 .chips { display: flex; align-items: center; gap: 16px; margin-top: 26px; font-size: 32px; }61 .chip { border: 2px solid #E0E0E0; padding: 14px 22px; border-radius: 8px; background: #FAFAFA; }62 hr.sep { border: none; border-top: 3px solid #3A3A3A; margin: 34px 0; }63 64 /* Bottom gesture area */65 .bottom-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 120px; background: #0B0B0B; display: flex; align-items: center; justify-content: center; }66 .home-indicator { width: 220px; height: 10px; border-radius: 6px; background: #EDEDED; opacity: 0.95; }67 68 /* Utility icons */69 .check-icon { width: 28px; height: 28px; color: #4CAF50; }70</style>71</head>72<body>73<div id="render-target">74 75 <!-- Status bar -->76 <div class="statusbar">77 <div>8:43</div>78 <div class="right">79 <!-- simple mock notifications -->80 <span style="font-size:30px;">🔔</span>81 <span class="dot"></span>82 <svg width="34" height="34" viewBox="0 0 24 24" fill="#fff"><path d="M12 1a7 7 0 0 0-7 7v4l-2 2v1h18v-1l-2-2V8a7 7 0 0 0-7-7zm0 22a3 3 0 0 0 3-3H9a3 3 0 0 0 3 3z"/></svg>83 <svg width="34" height="34" viewBox="0 0 24 24" fill="#fff"><path d="M17 18H7V6h10v12zM3 6h2v12H3V6zm16 0h2v12h-2V6z"/></svg>84 <svg width="40" height="40" viewBox="0 0 24 24" fill="#fff"><path d="M18 7h-1V4H7v3H6v14h12V7zM9 6h6v1H9V6zm9 14H6V9h12v11z"/></svg>85 <svg width="36" height="36" viewBox="0 0 24 24" fill="#fff"><path d="M12 22c4.97 0 9-4.03 9-9S16.97 4 12 4 3 8.03 3 13s4.03 9 9 9z"/></svg>86 </div>87 </div>88 89 <!-- App bar with search -->90 <div class="appbar">91 <div class="icon-btn">92 <svg width="40" height="40" viewBox="0 0 24 24" fill="#fff">93 <path d="M15.41 7.41 14 6l-6 6 6 6 1.41-1.41L10.83 12z"/>94 </svg>95 </div>96 <div class="icon-btn">97 <svg width="40" height="40" viewBox="0 0 24 24" fill="#fff">98 <path d="M3 6h18v2H3V6zm0 5h18v2H3v-2zm0 5h18v2H3v-2z"/>99 </svg>100 </div>101 <div class="search-pill">102 <svg width="40" height="40" viewBox="0 0 24 24" fill="#757575">103 <path d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16a6.471 6.471 0 0 0 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"/>104 </svg>105 <div class="text">Cycle life guard</div>106 <div class="barcode">107 <svg width="54" height="54" viewBox="0 0 24 24" fill="#2C2C2C">108 <path d="M3 3h6v2H5v4H3V3zm10 0h8v6h-2V5h-6V3zM3 21v-8h2v6h4v2H3zm18-8v8h-8v-2h6v-6h2zM7 7h2v10H7V7zm4 0h2v10h-2V7zm4 0h2v10h-2V7z"/>109 </svg>110 </div>111 </div>112 </div>113 114 <!-- Small metric bars near the very top of list -->115 <div class="metrics-top">116 <div class="metric-row">117 <div class="spacer"></div>118 <div class="meter">119 <div class="seg fill"></div>120 <div class="seg fill"></div>121 <div class="seg fill"></div>122 <div class="seg fill"></div>123 <div class="seg"></div>124 </div>125 </div>126 <div class="metric-row">127 <div class="spacer"></div>128 <div class="meter">129 <div class="seg fill"></div>130 <div class="seg fill"></div>131 <div class="seg fill"></div>132 <div class="seg fill"></div>133 <div class="seg"></div>134 </div>135 </div>136 </div>137 138 <div class="content">139 <div class="heading">1 to 10 of 10 Reviews</div>140 141 <!-- Review 1 -->142 <div class="review">143 <div class="stars">144 <!-- 5 filled stars -->145 <svg class="star" viewBox="0 0 24 24" fill="#8A8A8A"><path d="M12 17.3l-6.18 3.73L7 14.24 2 9.5l6.91-1L12 2.5l3.09 6 6.91 1-5 4.74L18.18 21z"/></svg>146 <svg class="star" viewBox="0 0 24 24" fill="#8A8A8A"><path d="M12 17.3l-6.18 3.73L7 14.24 2 9.5l6.91-1L12 2.5l3.09 6 6.91 1-5 4.74L18.18 21z"/></svg>147 <svg class="star" viewBox="0 0 24 24" fill="#8A8A8A"><path d="M12 17.3l-6.18 3.73L7 14.24 2 9.5l6.91-1L12 2.5l3.09 6 6.91 1-5 4.74L18.18 21z"/></svg>148 <svg class="star" viewBox="0 0 24 24" fill="#8A8A8A"><path d="M12 17.3l-6.18 3.73L7 14.24 2 9.5l6.91-1L12 2.5l3.09 6 6.91 1-5 4.74L18.18 21z"/></svg>149 <svg class="star" viewBox="0 0 24 24" fill="#8A8A8A"><path d="M12 17.3l-6.18 3.73L7 14.24 2 9.5l6.91-1L12 2.5l3.09 6 6.91 1-5 4.74L18.18 21z"/></svg>150 </div>151 152 <div style="font-size:36px;">153 <span class="username">Julie82</span><span class="location">, Bradford</span>154 </div>155 <div class="time">a month ago</div>156 157 <div class="title">Would recommend</div>158 <div class="body">Good quality shin pads</div>159 160 <div class="recommend">161 <svg class="check-icon" viewBox="0 0 24 24" fill="#4CAF50"><path d="M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z"/></svg>162 <span>Yes, I recommend this product.</span>163 </div>164 165 <div class="review-metrics">166 <div class="meter" style="width:760px;">167 <div class="seg fill"></div>168 <div class="seg fill"></div>169 <div class="seg fill"></div>170 <div class="seg fill"></div>171 <div class="seg fill"></div>172 </div>173 <div class="meter" style="width:760px; margin-top:24px;">174 <div class="seg fill"></div>175 <div class="seg fill"></div>176 <div class="seg fill"></div>177 <div class="seg fill"></div>178 <div class="seg fill"></div>179 </div>180 </div>181 182 <div class="chips">183 <div style="margin-right:8px;">Helpful?</div>184 <div class="chip">Yes - 0</div>185 <div class="chip">No - 0</div>186 </div>187 188 <hr class="sep">189 </div>190 191 <!-- Review 2 -->192 <div class="review">193 <div class="stars">194 <!-- 4 filled, 1 outline -->195 <svg class="star" viewBox="0 0 24 24" fill="#8A8A8A"><path d="M12 17.3l-6.18 3.73L7 14.24 2 9.5l6.91-1L12 2.5l3.09 6 6.91 1-5 4.74L18.18 21z"/></svg>196 <svg class="star" viewBox="0 0 24 24" fill="#8A8A8A"><path d="M12 17.3l-6.18 3.73L7 14.24 2 9.5l6.91-1L12 2.5l3.09 6 6.91 1-5 4.74L18.18 21z"/></svg>197 <svg class="star" viewBox="0 0 24 24" fill="#8A8A8A"><path d="M12 17.3l-6.18 3.73L7 14.24 2 9.5l6.91-1L12 2.5l3.09 6 6.91 1-5 4.74L18.18 21z"/></svg>198 <svg class="star" viewBox="0 0 24 24" fill="#8A8A8A"><path d="M12 17.3l-6.18 3.73L7 14.24 2 9.5l6.91-1L12 2.5l3.09 6 6.91 1-5 4.74L18.18 21z"/></svg>199 <svg class="star" viewBox="0 0 24 24" fill="none" stroke="#8A8A8A" stroke-width="2">200 <path d="M12 4.5l2.6 5.1 5.6.8-4 3.9.9 5.6L12 17.8l-5 2.7.9-5.6-4-3.9 5.6-.8L12 4.5z"/>201 </svg>202 </div>203 204 <div style="font-size:36px;">205 <span class="username">Lou and 1</span><span class="location">, Bedford</span>206 </div>207 <div class="time">2 years ago</div>208 209 <div class="title">Shin pads</div>210 <div class="body">Good shin pads good fit</div>211 <div class="kv"><b>Age:</b> 17 or under</div>212 <div class="kv"><b>Gender:</b> Male</div>213 214 <div class="recommend" style="margin-top: 22px;">215 <svg class="check-icon" viewBox="0 0 24 24" fill="#4CAF50"><path d="M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z"/></svg>216 <span>Yes, I recommend this product.</span>217 </div>218 219 <div class="review-metrics">220 <div class="meter" style="width:760px;">221 <div class="seg fill"></div>222 <div class="seg fill"></div>223 <div class="seg fill"></div>224 <div class="seg fill"></div>225 <div class="seg"></div>226 </div>227 <div class="meter" style="width:760px; margin-top:24px;">228 <div class="seg fill"></div>229 <div class="seg fill"></div>230 <div class="seg fill"></div>231 <div class="seg"></div>232 <div class="seg"></div>233 </div>234 </div>235 </div>236 </div>237 238 <!-- Bottom gesture bar -->239 <div class="bottom-bar">240 <div class="home-indicator"></div>241 </div>242</div>243</body>244</html>