GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">5<title>UI Render</title>6<style>7 body { margin:0; padding:0; background: transparent; }8 #render-target {9 width:1080px; height:2400px; position:relative; overflow:hidden;10 background:#FFFFFF; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;11 color:#222;12 }13 .status-bar {14 position:absolute; top:0; left:0; width:100%; height:190px;15 background:#4B55D2; color:#fff; padding:32px 32px 24px 32px;16 box-sizing:border-box;17 }18 .status-top { display:flex; justify-content:space-between; align-items:center; }19 .status-top .time { font-size:42px; font-weight:600; }20 .status-icons { display:flex; gap:24px; align-items:center; }21 .status-icons .dot { width:12px; height:12px; background:#fff; border-radius:50%; opacity:0.85; }22 .chip-row { margin-top:24px; display:flex; gap:16px; }23 .chip {24 background:#2C2C2C; color:#fff; border-radius:36px;25 padding:18px 28px; font-size:36px; line-height:1; display:flex; align-items:center; gap:18px;26 }27 .chip .close {28 width:36px; height:36px; background:#444; border-radius:50%;29 display:flex; align-items:center; justify-content:center; font-size:28px;30 }31 32 .content { position:absolute; left:0; right:0; top:190px; padding:36px; box-sizing:border-box; }33 34 .rating-row { display:flex; align-items:center; gap:24px; }35 .rating-row .label { font-size:38px; color:#1A6D93; }36 .progress {37 width:780px; height:56px; background:#EDEFF1; border-radius:10px; border:1px solid #D0D5DB; position:relative;38 box-shadow: inset 0 1px 0 rgba(0,0,0,0.05);39 }40 .progress .fill { width:5%; height:100%; background:#F3B562; border-radius:10px; }41 .percent { font-size:38px; color:#1A6D93; }42 43 .collapse { margin-top:26px; display:flex; align-items:center; gap:16px; color:#0F1111; font-size:40px; }44 .collapse svg { width:36px; height:36px; }45 46 .card {47 margin-top:28px; background:#fff; border:1px solid #E5E7EB; border-radius:24px;48 box-shadow:0 2px 8px rgba(0,0,0,0.08); padding:28px; box-sizing:border-box;49 }50 .card .card-title { font-size:44px; font-weight:700; margin-bottom:26px; }51 .thumbs { display:flex; gap:24px; }52 .img-ph {53 width:220px; height:220px; background:#E0E0E0; border:1px solid #BDBDBD;54 display:flex; justify-content:center; align-items:center; color:#757575; font-size:28px;55 }56 .card .chev-right { position:absolute; right:42px; top:50%; transform:translateY(-50%); }57 58 .toolbar { margin-top:32px; display:flex; justify-content:space-between; align-items:center; }59 .dropdown {60 border:1px solid #E5E7EB; background:#F8FAFB; border-radius:18px; padding:22px 26px; font-size:40px; color:#0F1111;61 display:inline-flex; align-items:center; gap:18px; box-shadow:0 2px 6px rgba(0,0,0,0.08);62 }63 .filter { font-size:40px; color:#1A6D93; }64 .meta { margin-top:24px; font-size:36px; color:#555; }65 66 .section-title { margin-top:36px; font-size:52px; font-weight:800; }67 68 .review { padding-top:30px; padding-bottom:30px; border-bottom:1px solid #EEE; }69 .rev-head { display:flex; align-items:center; gap:24px; }70 .avatar {71 width:90px; height:90px; border-radius:50%;72 background:#E0E0E0; border:1px solid #BDBDBD; overflow:hidden;73 display:flex; justify-content:center; align-items:center; color:#757575; font-size:24px;74 }75 .name { font-size:42px; font-weight:600; }76 77 .stars { margin-top:14px; display:flex; align-items:center; gap:14px; }78 .stars svg { width:44px; height:44px; }79 .verified { margin-left:16px; color:#C75C00; font-weight:700; font-size:36px; }80 81 .title { margin-top:16px; font-size:48px; font-weight:800; }82 .detail { margin-top:10px; color:#6B7280; font-size:36px; }83 .body-text { margin-top:16px; font-size:40px; line-height:1.35; color:#222; }84 85 .actions { margin-top:26px; display:flex; align-items:center; justify-content:space-between; }86 .left-actions { display:flex; align-items:center; gap:28px; }87 .btn-helpful {88 padding:18px 28px; border:1px solid #D0D5DB; border-radius:20px; background:#fff;89 font-size:40px; box-shadow:0 3px 10px rgba(0,0,0,0.12);90 }91 .share { display:flex; align-items:center; gap:16px; color:#4B5563; font-size:40px; }92 .report { color:#4B5563; font-size:40px; }93 94 .fab {95 position:absolute; right:40px; top:1650px; width:120px; height:120px;96 background:#3F66F3; border-radius:50%; box-shadow:0 10px 24px rgba(0,0,0,0.22);97 display:flex; align-items:center; justify-content:center;98 }99 .fab svg { width:60px; height:60px; fill:#fff; }100 101 .adbar {102 position:absolute; left:0; bottom:120px; width:100%; height:150px; background:#fff;103 border-top:1px solid #E5E7EB; box-shadow:0 -6px 16px rgba(0,0,0,0.08);104 display:flex; align-items:center; justify-content:space-between; padding:0 28px; box-sizing:border-box;105 }106 .ad-left { display:flex; align-items:center; gap:24px; }107 .ad-icon {108 width:100px; height:100px; background:#E0E0E0; border:1px solid #BDBDBD;109 display:flex; justify-content:center; align-items:center; color:#757575; font-size:26px;110 }111 .ad-title { font-size:36px; color:#222; }112 .ad-btn {113 background:#2F73FF; color:#fff; font-size:42px; padding:22px 42px;114 border-radius:12px; font-weight:700;115 }116 117 .nav-pill {118 position:absolute; left:50%; transform:translateX(-50%);119 bottom:40px; width:260px; height:18px; background:#D9D9D9; border-radius:12px;120 }121</style>122</head>123<body>124<div id="render-target">125 126 <div class="status-bar">127 <div class="status-top">128 <div class="time">9:26</div>129 <div class="status-icons">130 <div class="dot"></div>131 <div class="dot"></div>132 <div class="dot"></div>133 <!-- battery icon -->134 <svg width="48" height="28">135 <rect x="2" y="4" width="40" height="20" rx="4" ry="4" fill="none" stroke="#fff" stroke-width="3"></rect>136 <rect x="44" y="9" width="6" height="10" fill="#fff"></rect>137 <rect x="6" y="7" width="30" height="14" fill="#fff"></rect>138 </svg>139 </div>140 </div>141 <div class="chip-row">142 <div class="chip"><span class="close">×</span><span>Amazon.</span></div>143 <div class="chip">Flipkar</div>144 <div class="chip">2gud.co</div>145 <div class="chip">Google.</div>146 <div class="chip">Relianc</div>147 <div class="chip">S...</div>148 </div>149 </div>150 151 <div class="content">152 <div class="rating-row">153 <div class="label">1 star</div>154 <div class="progress"><div class="fill"></div></div>155 <div class="percent">5%</div>156 </div>157 158 <div class="collapse">159 <svg viewBox="0 0 24 24"><path d="M5 9l7 7 7-7" fill="none" stroke="#0F1111" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg>160 <span>How are ratings calculated?</span>161 </div>162 163 <div class="card" style="position:relative;">164 <div class="card-title">Reviews with images</div>165 <div class="thumbs">166 <div class="img-ph">[IMG: Product photo]</div>167 <div class="img-ph">[IMG: Product photo]</div>168 </div>169 <div class="chev-right">170 <svg width="40" height="40" viewBox="0 0 24 24"><path d="M9 6l6 6-6 6" fill="none" stroke="#6B7280" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg>171 </div>172 </div>173 174 <div class="toolbar">175 <div class="dropdown">176 <span>Top reviews</span>177 <svg viewBox="0 0 24 24" width="32" height="32"><path d="M5 9l7 7 7-7" fill="none" stroke="#111" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg>178 </div>179 <div class="filter">Filter »</div>180 </div>181 182 <div class="meta">101 total ratings, 18 with reviews</div>183 184 <div class="section-title">From India</div>185 186 <!-- Review 1 -->187 <div class="review">188 <div class="rev-head">189 <div class="avatar">[IMG: Avatar]</div>190 <div class="name">R C DAHIYA</div>191 </div>192 193 <div class="stars">194 <!-- 5 stars -->195 <svg viewBox="0 0 24 24"><path fill="#F59A00" d="M12 2l3 6 6 1-4.5 4 1 6L12 17 6.5 19 7.5 13 3 9l6-1z"></path></svg>196 <svg viewBox="0 0 24 24"><path fill="#F59A00" d="M12 2l3 6 6 1-4.5 4 1 6L12 17 6.5 19 7.5 13 3 9l6-1z"></path></svg>197 <svg viewBox="0 0 24 24"><path fill="#F59A00" d="M12 2l3 6 6 1-4.5 4 1 6L12 17 6.5 19 7.5 13 3 9l6-1z"></path></svg>198 <svg viewBox="0 0 24 24"><path fill="#F59A00" d="M12 2l3 6 6 1-4.5 4 1 6L12 17 6.5 19 7.5 13 3 9l6-1z"></path></svg>199 <svg viewBox="0 0 24 24"><path fill="#F59A00" d="M12 2l3 6 6 1-4.5 4 1 6L12 17 6.5 19 7.5 13 3 9l6-1z"></path></svg>200 <div class="verified">Verified Purchase</div>201 </div>202 203 <div class="title">Washbasins mirror</div>204 <div class="detail">Reviewed in India on 24 October 2023</div>205 <div class="detail">Size: Pack of 4 | Colour: Silver-Matt</div>206 <div class="body-text">Easy to install, good quality performance etc.</div>207 208 <div class="actions">209 <div class="left-actions">210 <div class="btn-helpful">Helpful</div>211 <div class="share">212 <svg viewBox="0 0 24 24" width="40" height="40"><path d="M18 8a3 3 0 1 0-2.9-3.5L8.7 8.8a3 3 0 0 0 0 6.5l6.4 4.3A3 3 0 1 0 16 18l-6.4-4.3a3 3 0 0 0 0-3.4L16 6a3 3 0 0 0 2-.6z" fill="#4B5563"></path></svg>213 <span>Share</span>214 </div>215 </div>216 <div class="report">Report</div>217 </div>218 </div>219 220 <!-- Review 2 -->221 <div class="review" style="border-bottom:none;">222 <div class="rev-head">223 <div class="avatar">[IMG: Avatar]</div>224 <div class="name">Haneefa</div>225 </div>226 227 <div class="stars">228 <svg viewBox="0 0 24 24"><path fill="#F59A00" d="M12 2l3 6 6 1-4.5 4 1 6L12 17 6.5 19 7.5 13 3 9l6-1z"></path></svg>229 <svg viewBox="0 0 24 24"><path fill="#F59A00" d="M12 2l3 6 6 1-4.5 4 1 6L12 17 6.5 19 7.5 13 3 9l6-1z"></path></svg>230 <svg viewBox="0 0 24 24"><path fill="#F59A00" d="M12 2l3 6 6 1-4.5 4 1 6L12 17 6.5 19 7.5 13 3 9l6-1z"></path></svg>231 <svg viewBox="0 0 24 24"><path fill="#F59A00" d="M12 2l3 6 6 1-4.5 4 1 6L12 17 6.5 19 7.5 13 3 9l6-1z"></path></svg>232 <svg viewBox="0 0 24 24"><path fill="#F59A00" d="M12 2l3 6 6 1-4.5 4 1 6L12 17 6.5 19 7.5 13 3 9l6-1z"></path></svg>233 <div class="verified">Verified Purchase</div>234 </div>235 236 <div class="title">Quality product</div>237 <div class="detail">Reviewed in India on 14 October 2023</div>238 <div class="detail">Size: Pack of 2 | Colour: Brass Antique</div>239 <div class="body-text">The product was as expected and I am impressed with...</div>240 </div>241 242 <div class="fab">243 <svg viewBox="0 0 24 24"><path d="M12 5v14M5 12h14" stroke="#fff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" fill="none"></path></svg>244 </div>245 </div>246 247 <div class="adbar">248 <div class="ad-left">249 <div class="ad-icon">[IMG: App icon]</div>250 <div class="ad-title">Foreign Products To Buy</div>251 </div>252 <div class="ad-btn">Install</div>253 </div>254 255 <div class="nav-pill"></div>256 257</div>258</body>259</html>