GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">5<meta name="viewport" content="width=1080, initial-scale=1">6<title>UI Render</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: #ffffff;12 }13 14 /* Top purple area */15 .topbar { position: absolute; top: 0; left: 0; width: 1080px; height: 280px; background: #4A54C7; color: #fff; }16 .statusbar { height: 90px; display: flex; align-items: center; padding: 0 40px; font-size: 42px; }17 .statusbar .spacer { flex: 1; }18 .status-icon { width: 40px; height: 40px; border-radius: 20px; background: rgba(255,255,255,0.25); margin-left: 24px; }19 .status-wifi, .status-battery {20 width: 56px; height: 40px; display: flex; align-items: center; justify-content: center; margin-left: 24px;21 }22 .status-wifi svg, .status-battery svg { fill: #fff; width: 36px; height: 36px; }23 24 .tabs { height: 190px; display: flex; align-items: center; padding: 0 24px; overflow: hidden; }25 .chip { padding: 22px 34px; margin: 0 14px; border-radius: 28px; font-size: 42px; color: #fff; background: rgba(255,255,255,0.22); }26 .chip.active { background: rgba(0,0,0,0.45); }27 .chip.close { background: rgba(0,0,0,0.65); padding: 22px 28px; }28 29 /* Content list */30 .content { position: absolute; top: 280px; left: 0; width: 100%; padding-bottom: 260px; }31 .section { padding: 32px 48px; }32 33 .action-row { display: flex; align-items: center; margin: 8px 0 28px; }34 .helpful-btn {35 width: 220px; height: 92px; border-radius: 26px; border: 1px solid #D9D9D9;36 background: #fff; box-shadow: 0 4px 8px rgba(0,0,0,0.08); font-size: 44px; color: #333;37 display: flex; align-items: center; justify-content: center;38 }39 .share { margin-left: 40px; display: flex; align-items: center; color: #555; }40 .share svg { width: 48px; height: 48px; fill: none; stroke: #555; stroke-width: 6px; }41 .report { margin-left: auto; font-size: 42px; color: #777; }42 43 .review { margin-bottom: 40px; }44 .rev-head { display: flex; align-items: center; }45 .avatar {46 width: 96px; height: 96px; border-radius: 48px; background: #E0E0E0; border: 1px solid #BDBDBD;47 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 24px; margin-right: 22px;48 }49 .name { font-size: 44px; color: #333; }50 51 .stars-row { display: flex; align-items: center; margin: 18px 0; }52 .stars { color: #FF8C00; font-size: 42px; letter-spacing: 6px; }53 .verified { margin-left: 16px; color: #FF8C00; font-weight: bold; font-size: 38px; }54 55 .title { font-size: 56px; font-weight: 700; color: #222; margin: 10px 0 12px; }56 .meta { font-size: 38px; color: #777; line-height: 1.5; }57 .text { font-size: 44px; color: #222; margin-top: 14px; }58 59 /* Floating action button */60 .fab {61 position: absolute; right: 40px; bottom: 210px;62 width: 120px; height: 120px; border-radius: 60px; background: #3F7BFA; color: #fff;63 display: flex; align-items: center; justify-content: center; font-size: 72px;64 box-shadow: 0 12px 24px rgba(0,0,0,0.25);65 }66 67 /* Ad banner above gesture bar */68 .ad-banner {69 position: absolute; left: 0; bottom: 90px; width: 100%; height: 130px;70 border-top: 1px solid #E6E6E6; background: #fff; display: flex; align-items: center; padding: 0 24px;71 }72 .ad-img {73 width: 120px; height: 120px; background: #E0E0E0; border: 1px solid #BDBDBD;74 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 26px; margin-right: 20px;75 }76 .ad-text { font-size: 38px; color: #333; flex: 1; }77 .ad-btn { background: #1976D2; color: #fff; font-size: 44px; padding: 22px 38px; border-radius: 10px; }78 79 /* Gesture bar */80 .gesture { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); width: 360px; height: 12px; background: #000; border-radius: 6px; opacity: 0.9; }81 82</style>83</head>84<body>85<div id="render-target">86 87 <!-- Top purple area -->88 <div class="topbar">89 <div class="statusbar">90 <div>9:26</div>91 <div class="spacer"></div>92 <div class="status-icon"></div>93 <div class="status-icon"></div>94 <div class="status-icon"></div>95 <div class="status-icon"></div>96 <div class="status-wifi">97 <svg viewBox="0 0 24 24">98 <path d="M2 8c5-5 15-5 20 0M6 12c3-3 9-3 12 0M10 16c2-2 4-2 6 0M12 20a2 2 0 1 0 0.001 0"></path>99 </svg>100 </div>101 <div class="status-battery">102 <svg viewBox="0 0 24 24">103 <rect x="2" y="6" width="18" height="12" rx="2" ry="2"></rect>104 <rect x="20" y="10" width="2" height="4"></rect>105 </svg>106 </div>107 </div>108 <div class="tabs">109 <div class="chip close">×</div>110 <div class="chip active">Amazon.</div>111 <div class="chip">Flipkar</div>112 <div class="chip">2gud.co</div>113 <div class="chip">Google.</div>114 <div class="chip">Relianc</div>115 <div class="chip">S</div>116 </div>117 </div>118 119 <!-- Content -->120 <div class="content">121 <div class="section">122 <div class="action-row">123 <div class="helpful-btn">Helpful</div>124 <div class="share">125 <svg viewBox="0 0 24 24">126 <circle cx="6" cy="12" r="3"></circle>127 <circle cx="18" cy="6" r="3"></circle>128 <circle cx="18" cy="18" r="3"></circle>129 <path d="M8.6 11l6.8-3.6M8.6 13l6.8 3.6"></path>130 </svg>131 <span style="font-size:42px;margin-left:18px;">Share</span>132 </div>133 <div class="report">Report</div>134 </div>135 136 <div class="review">137 <div class="rev-head">138 <div class="avatar">[IMG: Avatar]</div>139 <div class="name">vivek thakur</div>140 </div>141 <div class="stars-row">142 <div class="stars">★★★★★</div>143 <div class="verified">Verified Purchase</div>144 </div>145 <div class="title">Sturdy metal, good quality rubber</div>146 <div class="meta">Reviewed in India on 19 August 2023</div>147 <div class="meta">Size: Pack of 4 | Colour: Silver-Matt</div>148 <div class="text">Works as advertised, good finish</div>149 </div>150 151 <div class="action-row">152 <div class="helpful-btn">Helpful</div>153 <div class="share">154 <svg viewBox="0 0 24 24">155 <circle cx="6" cy="12" r="3"></circle>156 <circle cx="18" cy="6" r="3"></circle>157 <circle cx="18" cy="18" r="3"></circle>158 <path d="M8.6 11l6.8-3.6M8.6 13l6.8 3.6"></path>159 </svg>160 <span style="font-size:42px;margin-left:18px;">Share</span>161 </div>162 <div class="report">Report</div>163 </div>164 165 <div class="review">166 <div class="rev-head">167 <div class="avatar">[IMG: Avatar]</div>168 <div class="name">Jug</div>169 </div>170 <div class="stars-row">171 <div class="stars">★★★★★</div>172 <div class="verified">Verified Purchase</div>173 </div>174 <div class="title">Strong product</div>175 <div class="meta">Reviewed in India on 11 August 2023</div>176 <div class="meta">Size: Pack of 1 | Colour: Brass Antique</div>177 <div class="text">Strongly built, flexible and value for money</div>178 </div>179 180 <div class="action-row">181 <div class="helpful-btn">Helpful</div>182 <div class="share">183 <svg viewBox="0 0 24 24">184 <circle cx="6" cy="12" r="3"></circle>185 <circle cx="18" cy="6" r="3"></circle>186 <circle cx="18" cy="18" r="3"></circle>187 <path d="M8.6 11l6.8-3.6M8.6 13l6.8 3.6"></path>188 </svg>189 <span style="font-size:42px;margin-left:18px;">Share</span>190 </div>191 <div class="report">Report</div>192 </div>193 194 <div class="review">195 <div class="rev-head">196 <div class="avatar">[IMG: Avatar]</div>197 <div class="name">Amazon Customer</div>198 </div>199 <div class="stars-row">200 <div class="stars">★★★★★</div>201 <div class="verified">Verified Purchase</div>202 </div>203 <div class="title">Vry gd products</div>204 <div class="meta">Reviewed in India on 2 August 2023</div>205 <div class="meta">Size: Pack of 4 | Colour: Black</div>206 <div class="text">Vry gd products</div>207 </div>208 209 <div class="action-row">210 <div class="helpful-btn">Helpful</div>211 <div class="share">212 <svg viewBox="0 0 24 24">213 <circle cx="6" cy="12" r="3"></circle>214 <circle cx="18" cy="6" r="3"></circle>215 <circle cx="18" cy="18" r="3"></circle>216 <path d="M8.6 11l6.8-3.6M8.6 13l6.8 3.6"></path>217 </svg>218 <span style="font-size:42px;margin-left:18px;">Share</span>219 </div>220 <div class="report">R</div>221 </div>222 </div>223 </div>224 225 <!-- Floating action button -->226 <div class="fab">+</div>227 228 <!-- Ad banner -->229 <div class="ad-banner">230 <div class="ad-img">[IMG: Ad graphic]</div>231 <div class="ad-text">Foreign Products To Buy</div>232 <div class="ad-btn">Install</div>233 </div>234 235 <!-- Gesture bar -->236 <div class="gesture"></div>237 238</div>239</body>240</html>