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>UI Render</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }9 #render-target {10 width: 1080px; height: 2400px;11 position: relative; overflow: hidden;12 background: #FFFFFF;13 color: #111;14 }15 16 /* Top purple area */17 .top-area { background: #4A54C7; color: #fff; }18 .status-bar {19 height: 110px; padding: 0 40px;20 display: flex; align-items: center; justify-content: space-between;21 font-weight: 600; font-size: 40px;22 }23 .status-icons { display: flex; align-items: center; gap: 24px; }24 .dot { width: 18px; height: 18px; background: #D9DBFF; border-radius: 50%; display: inline-block; }25 .chip-bar {26 padding: 20px 24px 30px 24px;27 display: flex; align-items: center; gap: 16px; overflow: hidden;28 }29 .chip {30 padding: 22px 28px; border-radius: 40px;31 background: rgba(255,255,255,0.12); color: #fff; font-size: 34px; white-space: nowrap;32 border: 1px solid rgba(255,255,255,0.25);33 }34 .chip.dark { background: rgba(0,0,0,0.35); border-color: rgba(0,0,0,0.4); }35 .tab-bar {36 height: 120px; background: #fff; color: #333;37 display: flex; align-items: center; gap: 40px; padding: 0 32px; border-bottom: 1px solid #E6E6E6;38 font-size: 36px;39 }40 .tab { opacity: 0.6; }41 .tab.active {42 opacity: 1; position: relative; font-weight: 600; color: #333;43 }44 .tab.active::after {45 content: ""; position: absolute; left: 0; right: 0; bottom: -22px;46 height: 8px; background: #F3792B; border-radius: 4px;47 }48 .tab-right { margin-left: auto; display: flex; align-items: center; gap: 18px; color: #2C3E50; }49 50 /* Content area */51 .content { padding: 32px; }52 .section-title { font-size: 48px; font-weight: 700; margin: 24px 0; }53 .ratings-row { display: flex; align-items: center; gap: 18px; font-size: 40px; color: #333; }54 .star { width: 42px; height: 42px; }55 .star svg { width: 100%; height: 100%; }56 .star.outline svg path { fill: none; stroke: #F5A623; stroke-width: 2; }57 .star.fill svg path { fill: #F5A623; }58 .chevron { width: 30px; height: 30px; }59 .subtext { font-size: 34px; color: #7A7A7A; margin-top: 12px; }60 .divider { height: 2px; background: #E6E6E6; margin: 28px 0; }61 62 .image-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }63 .img-card {64 height: 480px; border-radius: 32px; overflow: hidden;65 border: 1px solid #D0D0D0; background: #E0E0E0;66 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 34px; text-align: center; padding: 20px;67 }68 69 .review-section-title { font-size: 52px; font-weight: 800; margin: 36px 0 24px; }70 .review-card { padding: 20px; }71 .review-header { display: flex; align-items: center; gap: 24px; }72 .avatar {73 width: 86px; height: 86px; border-radius: 50%;74 background: #E0E0E0; border: 1px solid #BDBDBD;75 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 28px;76 }77 .reviewer-name { font-size: 40px; font-weight: 600; color: #333; }78 .stars-line { display: flex; align-items: center; gap: 12px; margin-top: 12px; }79 .verified { color: #F3792B; font-weight: 700; margin-left: 12px; font-size: 34px; }80 .title { font-size: 46px; font-weight: 800; margin-top: 16px; }81 .meta { font-size: 34px; color: #5F5F5F; margin-top: 10px; }82 .body-text { font-size: 38px; margin-top: 16px; color: #333; }83 .actions { display: flex; align-items: center; gap: 26px; margin-top: 28px; }84 .pill { padding: 18px 26px; border-radius: 28px; border: 1px solid #D0D0D0; font-size: 34px; color: #333; }85 .share { display: flex; align-items: center; gap: 12px; color: #333; font-size: 34px; }86 .report { margin-left: auto; color: #6B6B6B; font-size: 34px; }87 88 /* Floating action button */89 .fab {90 position: absolute; right: 40px; bottom: 380px;91 width: 120px; height: 120px; border-radius: 60px;92 background: #3E4CB8; box-shadow: 0 8px 16px rgba(0,0,0,0.25);93 display: flex; align-items: center; justify-content: center;94 }95 .fab svg { width: 52px; height: 52px; }96 97 /* Bottom ad/install bar */98 .ad-bar {99 position: absolute; left: 0; right: 0; bottom: 160px;100 height: 180px; background: #F6F7FB; border-top: 1px solid #E2E2E2;101 display: flex; align-items: center; padding: 0 32px; gap: 20px;102 }103 .ad-icon {104 width: 110px; height: 110px; border-radius: 14px;105 background: #E0E0E0; border: 1px solid #BDBDBD;106 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 26px;107 }108 .ad-texts { flex: 1; }109 .ad-title { font-size: 38px; font-weight: 700; }110 .ad-sub { font-size: 32px; color: #666; margin-top: 6px; }111 .install-btn {112 background: #2F66F7; color: #fff; font-size: 38px; font-weight: 700;113 padding: 22px 44px; border-radius: 14px;114 }115 116 /* Gesture bar */117 .gesture {118 position: absolute; left: 380px; right: 380px; bottom: 60px;119 height: 16px; background: #000; opacity: 0.9; border-radius: 10px;120 }121</style>122</head>123<body>124<div id="render-target">125 <div class="top-area">126 <div class="status-bar">127 <div>9:25</div>128 <div class="status-icons">129 <span class="dot"></span>130 <span class="dot"></span>131 <span class="dot"></span>132 <span class="dot"></span>133 </div>134 <div class="status-icons">135 <!-- wifi -->136 <svg width="36" height="36" viewBox="0 0 24 24" fill="#fff"><path d="M2 8c5-4 15-4 20 0l-2 2c-4-3-12-3-16 0L2 8zm4 5c3-2 9-2 12 0l-2 2c-2-1-6-1-8 0l-2-2zm4 5l2 2 2-2-2-2-2 2z"/></svg>137 <!-- battery -->138 <svg width="36" height="36" viewBox="0 0 24 24" fill="#fff"><path d="M2 8h16v8H2V8zm18 3h2v2h-2v-2z"/></svg>139 </div>140 </div>141 <div class="chip-bar">142 <div class="chip dark">✕</div>143 <div class="chip">Amazon.</div>144 <div class="chip">Flipkar</div>145 <div class="chip">2gud.co</div>146 <div class="chip">Google.</div>147 <div class="chip">Relianc</div>148 <div class="chip">Shop</div>149 </div>150 </div>151 152 <div class="tab-bar">153 <div class="tab">Details</div>154 <div class="tab">Compare</div>155 <div class="tab">Questions</div>156 <div class="tab active">Reviews</div>157 <div class="tab-right">158 <!-- up icon -->159 <svg width="34" height="34" viewBox="0 0 24 24" fill="#2C3E50"><path d="M7 14l5-5 5 5H7z"/></svg>160 </div>161 </div>162 163 <div class="content">164 <div class="section-title">Customer reviews</div>165 <div class="ratings-row">166 <div class="star fill">167 <svg viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 6.9 1L16.5 14l1.7 7L12 17.7 5.8 21l1.7-7-5.5-4.7 6.9-1L12 2z"/></svg>168 </div>169 <div class="star fill">170 <svg viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 6.9 1L16.5 14l1.7 7L12 17.7 5.8 21l1.7-7-5.5-4.7 6.9-1L12 2z"/></svg>171 </div>172 <div class="star fill">173 <svg viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 6.9 1L16.5 14l1.7 7L12 17.7 5.8 21l1.7-7-5.5-4.7 6.9-1L12 2z"/></svg>174 </div>175 <div class="star fill">176 <svg viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 6.9 1L16.5 14l1.7 7L12 17.7 5.8 21l1.7-7-5.5-4.7 6.9-1L12 2z"/></svg>177 </div>178 <div class="star outline">179 <svg viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 6.9 1L16.5 14l1.7 7L12 17.7 5.8 21l1.7-7-5.5-4.7 6.9-1L12 2z"/></svg>180 </div>181 <div>4.4 out of 5</div>182 <svg class="chevron" viewBox="0 0 24 24" fill="#666"><path d="M9 6l6 6-6 6V6z"/></svg>183 </div>184 <div class="subtext">101 global ratings</div>185 186 <div class="divider"></div>187 188 <div class="section-title" style="font-size:46px;">Reviews with images</div>189 <div class="image-grid">190 <div class="img-card">[IMG: Door stopper attached near cabinet/door base]</div>191 <div class="img-card">[IMG: Metal door stopper parts on red floral cloth]</div>192 </div>193 194 <div class="divider" style="margin-top: 36px;"></div>195 196 <div class="review-section-title">Top reviews from India</div>197 198 <div class="review-card">199 <div class="review-header">200 <div class="avatar">Avatar</div>201 <div class="reviewer-name">vivek thakur</div>202 </div>203 204 <div class="stars-line">205 <div class="star fill">206 <svg viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 6.9 1L16.5 14l1.7 7L12 17.7 5.8 21l1.7-7-5.5-4.7 6.9-1L12 2z"/></svg>207 </div>208 <div class="star fill">209 <svg viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 6.9 1L16.5 14l1.7 7L12 17.7 5.8 21l1.7-7-5.5-4.7 6.9-1L12 2z"/></svg>210 </div>211 <div class="star fill">212 <svg viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 6.9 1L16.5 14l1.7 7L12 17.7 5.8 21l1.7-7-5.5-4.7 6.9-1L12 2z"/></svg>213 </div>214 <div class="star fill">215 <svg viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 6.9 1L16.5 14l1.7 7L12 17.7 5.8 21l1.7-7-5.5-4.7 6.9-1L12 2z"/></svg>216 </div>217 <div class="star fill">218 <svg viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 6.9 1L16.5 14l1.7 7L12 17.7 5.8 21l1.7-7-5.5-4.7 6.9-1L12 2z"/></svg>219 </div>220 <div class="verified">Verified Purchase</div>221 </div>222 223 <div class="title">Sturdy metal, good quality rubber</div>224 <div class="meta">Reviewed in India on 19 August 2023</div>225 <div class="meta">Size: Pack of 4 Colour: Silver-Matt</div>226 <div class="body-text">Works as advertised, good finish</div>227 228 <div class="actions">229 <div class="pill">Helpful</div>230 <div class="share">231 <svg width="34" height="34" viewBox="0 0 24 24" fill="#666"><path d="M18 8a3 3 0 1 0-2.8-2H9v4h6.2A3 3 0 0 0 18 8zM6 14a3 3 0 1 0 2.8 2H15v-4H8.8A3 3 0 0 0 6 14z"/></svg>232 <span>Share</span>233 </div>234 <div class="report">Report</div>235 </div>236 </div>237 </div>238 239 <div class="fab">240 <svg viewBox="0 0 24 24" fill="#fff"><path d="M11 5h2v14h-2zM5 11h14v2H5z"/></svg>241 </div>242 243 <div class="ad-bar">244 <div class="ad-icon">[IMG: App Icon]</div>245 <div class="ad-texts">246 <div class="ad-title">Haneefa</div>247 <div class="ad-sub">Foreign Products To Buy</div>248 </div>249 <div class="install-btn">Install</div>250 </div>251 252 <div class="gesture"></div>253</div>254</body>255</html>