GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Amazon Review Mock</title>5<style>6 body { margin:0; padding:0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7 #render-target {8 position: relative;9 width: 1080px;10 height: 2400px;11 overflow: hidden;12 background: linear-gradient(180deg, #b9e5dc 0%, #bfe9df 40%, #ffffff 40%, #ffffff 100%);13 }14 15 /* Header / Search */16 .top-bar {17 position: relative;18 height: 200px;19 padding: 30px 36px 0 36px;20 }21 .status-row {22 display: flex;23 align-items: center;24 justify-content: space-between;25 color: #1d1d1d;26 font-weight: 600;27 font-size: 34px;28 margin-bottom: 22px;29 }30 .status-icons { display:flex; gap:18px; align-items:center; }31 .dot { width:18px; height:18px; background:#000; border-radius:50%; display:inline-block; }32 .status-icons .circle { width:28px; height:28px; border-radius:50%; border:3px solid #000; }33 .status-icons .signal { width:32px; height:22px; border:3px solid #000; border-top:none; border-left:none; transform:skewX(-15deg); }34 .back-btn {35 position: absolute;36 left: 30px;37 top: 100px;38 width: 70px; height: 70px;39 display:flex; align-items:center; justify-content:center;40 }41 .search-wrap {42 margin: 60px auto 0 auto;43 width: 960px;44 height: 110px;45 background: #fff;46 border-radius: 26px;47 box-shadow: 0 6px 12px rgba(0,0,0,0.08);48 display:flex; align-items:center; padding: 0 26px; gap:20px;49 }50 .search-input {51 flex:1;52 color:#333;53 font-size:40px;54 }55 .search-right { display:flex; gap:28px; align-items:center; }56 .icon-btn svg { width:56px; height:56px; fill:#4d4d4d; }57 58 /* Content */59 .content {60 background:#fff;61 padding: 40px 36px 0 36px;62 }63 .review-header { display:flex; align-items:center; gap:24px; }64 .avatar {65 width:90px; height:90px; border-radius:50%; background:#E0E0E0; border:1px solid #BDBDBD;66 display:flex; align-items:center; justify-content:center; color:#757575; font-size:26px;67 }68 .name { font-size:42px; font-weight:700; color:#222; }69 .stars { display:flex; align-items:center; gap:10px; margin-top:16px; }70 .star svg { width:42px; height:42px; fill:#FFB300; }71 .verified {72 color:#c65f00; font-weight:700; font-size:34px; margin-left:14px;73 }74 .title { font-size:56px; font-weight:800; margin:30px 0 16px 0; color:#111; }75 .meta { color:#555; font-size:36px; margin-bottom:14px; }76 .meta b { color:#333; }77 .img-row { display:flex; gap:24px; margin:26px 0; }78 .img-box {79 background:#E0E0E0; border:1px solid #BDBDBD; color:#757575;80 display:flex; align-items:center; justify-content:center; text-align:center;81 }82 .img-box.big { width:660px; height:420px; }83 .img-box.small { width:332px; height:420px; }84 .review-text {85 font-size:42px; line-height:1.35; color:#222; margin-top:20px;86 }87 88 .actions {89 display:flex; align-items:center; justify-content:space-between;90 margin:36px 0 20px 0;91 }92 .pill {93 padding:26px 40px; background:#f3f3f3; border-radius:30px; font-size:40px; color:#222;94 box-shadow: inset 0 0 0 1px #d6d6d6;95 }96 .share {97 display:flex; align-items:center; gap:18px; font-size:40px; color:#222;98 }99 .link { font-size:40px; color:#555; }100 101 .divider { height:2px; background:#eee; margin:24px 0; }102 103 .list-link {104 display:flex; align-items:center; justify-content:space-between;105 padding:30px; border-radius:26px; border:1px solid #e7e7e7; background:#fafafa;106 font-size:46px; margin:20px 0;107 }108 109 /* Bottom Nav */110 .bottom-nav {111 position:absolute; left:0; bottom:120px; width:100%; height:140px;112 border-top:1px solid #e6e6e6; background:#fff;113 display:flex; align-items:center; justify-content:space-around;114 }115 .nav-item { display:flex; flex-direction:column; align-items:center; gap:10px; color:#222; }116 .nav-item svg { width:60px; height:60px; fill:#1f1f1f; }117 .nav-label { font-size:36px; }118 119 .home-indicator {120 position:absolute; left:50%; transform:translateX(-50%);121 bottom:50px; width:460px; height:12px; background:#bfbfbf; border-radius:8px;122 }123 124 /* chevron */125 .chev svg { width:44px; height:44px; fill:#777; }126</style>127</head>128<body>129<div id="render-target">130 131 <!-- Top header with search -->132 <div class="top-bar">133 <div class="status-row">134 <div>10:00</div>135 <div class="status-icons">136 <span class="dot"></span>137 <span class="dot" style="background:#1a1a1a;"></span>138 <span class="dot" style="background:#1a1a1a;"></span>139 <span class="dot" style="background:#1a1a1a;"></span>140 <span class="circle"></span>141 <span class="signal"></span>142 </div>143 </div>144 145 <div class="back-btn">146 <svg viewBox="0 0 24 24">147 <path d="M15.5 3.5L5 12l10.5 8.5v-5.5L9 12l6.5-3.5V3.5z"></path>148 </svg>149 </div>150 151 <div class="search-wrap">152 <svg width="48" height="48" viewBox="0 0 24 24">153 <circle cx="10" cy="10" r="7" stroke="#555" stroke-width="2" fill="none"></circle>154 <path d="M15.5 15.5L22 22" stroke="#555" stroke-width="2" fill="none"></path>155 </svg>156 <div class="search-input">Search Amazon.in</div>157 <div class="search-right">158 <div class="icon-btn">159 <!-- camera -->160 <svg viewBox="0 0 24 24">161 <path d="M8 5l2-2h4l2 2h3v14H3V5h5zm4 4a5 5 0 100 10 5 5 0 000-10z"></path>162 </svg>163 </div>164 <div class="icon-btn">165 <!-- microphone -->166 <svg viewBox="0 0 24 24">167 <path d="M12 3a3 3 0 013 3v6a3 3 0 11-6 0V6a3 3 0 013-3zm-7 8h2a5 5 0 0010 0h2a7 7 0 01-6 6.9V21h-2v-3.1A7 7 0 015 11z"></path>168 </svg>169 </div>170 </div>171 </div>172 </div>173 174 <!-- Main content -->175 <div class="content">176 <div class="review-header">177 <div class="avatar">[Avatar]</div>178 <div>179 <div class="name">Aarti Singh</div>180 <div class="stars">181 <div class="star"><svg viewBox="0 0 24 24"><path d="M12 2l3.1 6.6 7 1-5 4.8 1.3 7.3-6.4-3.5-6.4 3.5 1.3-7.3-5-4.8 7-1L12 2z"></path></svg></div>182 <div class="star"><svg viewBox="0 0 24 24"><path d="M12 2l3.1 6.6 7 1-5 4.8 1.3 7.3-6.4-3.5-6.4 3.5 1.3-7.3-5-4.8 7-1L12 2z"></path></svg></div>183 <div class="star"><svg viewBox="0 0 24 24"><path d="M12 2l3.1 6.6 7 1-5 4.8 1.3 7.3-6.4-3.5-6.4 3.5 1.3-7.3-5-4.8 7-1L12 2z"></path></svg></div>184 <div class="star"><svg viewBox="0 0 24 24"><path d="M12 2l3.1 6.6 7 1-5 4.8 1.3 7.3-6.4-3.5-6.4 3.5 1.3-7.3-5-4.8 7-1L12 2z"></path></svg></div>185 <div class="star"><svg viewBox="0 0 24 24"><path d="M12 2l3.1 6.6 7 1-5 4.8 1.3 7.3-6.4-3.5-6.4 3.5 1.3-7.3-5-4.8 7-1L12 2z"></path></svg></div>186 <div class="verified">Verified Purchase</div>187 </div>188 </div>189 </div>190 191 <div class="title">superb quality</div>192 <div class="meta">Reviewed in India on 16 June 2023</div>193 <div class="meta"><b>Size:</b> L | <b>Color:</b> Black</div>194 195 <div class="img-row">196 <div class="img-box big">[IMG: Black jogger pants full view]</div>197 <div class="img-box small">[IMG: Waist close-up with drawstring]</div>198 </div>199 200 <div class="review-text">201 Wow such a wonderful quality product this is. I have got the product as I was expecting for. Good color and fabric quality. One sky is my favorite brand now on.202 </div>203 204 <div class="actions">205 <div class="pill">Helpful</div>206 <div class="share">207 <svg width="40" height="40" viewBox="0 0 24 24"><path d="M18 8l-6-4v3H6v2h6v3l6-4zM6 14h12v2H6v-2z"></path></svg>208 <span>Share</span>209 </div>210 <div class="link">Report</div>211 </div>212 213 <div class="divider"></div>214 215 <div class="list-link">216 <div>Create a video review</div>217 <div class="chev"><svg viewBox="0 0 24 24"><path d="M9 6l6 6-6 6" stroke="#777" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path></svg></div>218 </div>219 220 <div class="list-link">221 <div>Write a review</div>222 <div class="chev"><svg viewBox="0 0 24 24"><path d="M9 6l6 6-6 6" stroke="#777" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path></svg></div>223 </div>224 225 <div style="height:400px;"></div>226 </div>227 228 <!-- Bottom navigation -->229 <div class="bottom-nav">230 <div class="nav-item">231 <svg viewBox="0 0 24 24"><path d="M12 3l9 8h-3v9H6v-9H3l9-8z"></path></svg>232 <div class="nav-label">Home</div>233 </div>234 <div class="nav-item">235 <svg viewBox="0 0 24 24"><circle cx="12" cy="8" r="4"></circle><path d="M4 21c0-4 4-7 8-7s8 3 8 7" fill="none" stroke="#1f1f1f" stroke-width="2"></path></svg>236 <div class="nav-label">You</div>237 </div>238 <div class="nav-item">239 <svg viewBox="0 0 24 24"><rect x="4" y="4" width="6" height="6"></rect><rect x="14" y="4" width="6" height="6"></rect><rect x="4" y="14" width="6" height="6"></rect><rect x="14" y="14" width="6" height="6"></rect></svg>240 <div class="nav-label">More</div>241 </div>242 <div class="nav-item">243 <svg viewBox="0 0 24 24"><path d="M6 6h15l-2 9H8L6 6z"></path><circle cx="9" cy="20" r="2"></circle><circle cx="18" cy="20" r="2"></circle></svg>244 <div class="nav-label">Cart</div>245 </div>246 <div class="nav-item">247 <svg viewBox="0 0 24 24"><path d="M3 6h18v2H3V6zm0 5h18v2H3v-2zm0 5h18v2H3v-2z"></path></svg>248 <div class="nav-label">Menu</div>249 </div>250 </div>251 252 <div class="home-indicator"></div>253</div>254</body>255</html>