GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Amazon Reviews UI Mock</title>5<meta name="viewport" content="width=1080, initial-scale=1.0">6<style>7  body { margin:0; padding:0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8  #render-target {9    width:1080px; height:2400px; position:relative; overflow:hidden;10    background: linear-gradient(180deg, #bfe9e1 0%, #aee3da 50%, #ffffff 100%);11  }12  /* Status bar */13  .status-bar {14    position:absolute; top:0; left:0; right:0; height:110px; display:flex; align-items:center;15    padding:0 34px; font-size:42px; color:#222;16  }17  .status-icons { margin-left:auto; display:flex; align-items:center; gap:28px; color:#555; }18  .dot { width:12px; height:12px; background:#777; border-radius:50%; display:inline-block; }19  /* Header search */20  .header {21    position:absolute; top:110px; left:0; right:0; height:140px; display:flex; align-items:center; gap:24px; padding:0 28px;22  }23  .icon-btn {24    width:80px; height:80px; border-radius:40px; display:flex; align-items:center; justify-content:center; color:#333;25  }26  .search-box {27    flex:1; background:#fff; border-radius:26px; box-shadow:0 2px 4px rgba(0,0,0,0.08); height:96px;28    display:flex; align-items:center; padding:0 28px; border:1px solid #e6e6e6;29  }30  .search-text { font-size:40px; color:#111; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }31  .camera {32    width:80px; height:80px; border-radius:20px; display:flex; align-items:center; justify-content:center; color:#111;33  }34  /* Tabs */35  .tabs {36    position:absolute; top:266px; left:0; right:0; height:110px; display:flex; align-items:center; gap:40px; padding:0 28px; font-size:40px;37    background:rgba(255,255,255,0.6);38  }39  .tab { color:#333; padding:16px 8px; }40  .tab.active { color:#e66a2c; font-weight:700; position:relative; }41  .tab.active::after {42    content:""; position:absolute; left:0; right:0; bottom:-8px; height:10px; background:#e66a2c; border-radius:6px;43  }44  /* Carousel thumbnails */45  .thumb-row { position:absolute; top:376px; left:28px; right:28px; display:flex; gap:28px; }46  .thumb {47    width:330px; height:310px; background:#E0E0E0; border:1px solid #BDBDBD; border-radius:18px; position:relative;48    overflow:hidden; display:flex; align-items:center; justify-content:center; color:#757575; font-size:34px;49  }50  .thumb .overlay { position:absolute; bottom:16px; left:16px; right:16px; display:flex; justify-content:space-between; align-items:center; }51  .stars { color:#f79c3b; font-size:44px; letter-spacing:2px; }52  .duration { color:#222; font-size:36px; background:rgba(255,255,255,0.9); padding:6px 12px; border-radius:10px; }53  /* Section title */54  .section-title {55    position:absolute; top:720px; left:28px; font-size:52px; font-weight:700; color:#222;56  }57  /* Review images grid */58  .img-grid { position:absolute; top:820px; left:28px; right:28px; display:flex; gap:28px; }59  .img-card {60    width:496px; height:452px; background:#E0E0E0; border:1px solid #BDBDBD; border-radius:20px;61    display:flex; align-items:center; justify-content:center; color:#666; font-size:34px;62  }63  /* Mentions chips section */64  .mentions-title { position:absolute; top:1320px; left:28px; font-size:52px; font-weight:700; color:#222; width:1000px; }65  .chips { position:absolute; top:1440px; left:28px; right:28px; display:flex; flex-wrap:wrap; gap:28px; }66  .chip {67    background:#e7eff0; border:1px solid #d3dcdc; color:#222; font-size:42px; padding:22px 28px; border-radius:20px;68  }69  .see-more { position:absolute; top:1750px; left:28px; display:flex; align-items:center; gap:16px; color:#2b6d86; font-size:44px; }70  .caret { width:30px; height:30px; border-right:6px solid #2b6d86; border-bottom:6px solid #2b6d86; transform:rotate(45deg); }71  /* Bottom section */72  .bottom-title { position:absolute; top:1820px; left:28px; font-size:56px; font-weight:800; color:#222; }73  /* Floating Add to Cart */74  .add-to-cart {75    position:absolute; bottom:210px; right:28px; background:#ffd34d; color:#222; font-size:46px; font-weight:700;76    padding:28px 40px; border-radius:40px; box-shadow:0 8px 18px rgba(0,0,0,0.15);77  }78  /* Bottom navigation */79  .bottom-nav {80    position:absolute; bottom:0; left:0; right:0; height:160px; background:#fff; border-top:1px solid #e5e5e5;81    display:flex; justify-content:space-around; align-items:center;82  }83  .nav-item { display:flex; flex-direction:column; align-items:center; gap:8px; font-size:38px; color:#333; }84  .nav-item.active .dot-under { width:100px; height:8px; background:#4aa5bf; border-radius:4px; margin-top:8px; }85  .nav-icon { width:64px; height:64px; }86  /* Utility simple icons */87  svg { display:block; }88</style>89</head>90<body>91<div id="render-target">92 93  <!-- Status Bar -->94  <div class="status-bar">95    <div>1:07</div>96    <div class="status-icons">97      <div style="display:flex; gap:18px; align-items:center;">98        <span class="dot"></span>99        <span class="dot"></span>100        <span class="dot"></span>101        <span class="dot"></span>102      </div>103      <!-- Wi-Fi icon -->104      <svg class="nav-icon" viewBox="0 0 24 24">105        <path d="M2 8c5-4 15-4 20 0" stroke="#444" stroke-width="2" fill="none" stroke-linecap="round"/>106        <path d="M5 11c4-3 10-3 14 0" stroke="#444" stroke-width="2" fill="none" stroke-linecap="round"/>107        <path d="M8 14c3-2 5-2 8 0" stroke="#444" stroke-width="2" fill="none" stroke-linecap="round"/>108        <circle cx="12" cy="18" r="2" fill="#444"/>109      </svg>110      <!-- Battery icon -->111      <svg class="nav-icon" viewBox="0 0 24 24">112        <rect x="2" y="6" width="18" height="12" rx="2" ry="2" stroke="#444" stroke-width="2" fill="none"/>113        <rect x="4" y="8" width="14" height="8" fill="#444"/>114        <rect x="20" y="9" width="2" height="6" rx="1" fill="#444"/>115      </svg>116    </div>117  </div>118 119  <!-- Header Search -->120  <div class="header">121    <div class="icon-btn">122      <svg width="64" height="64" viewBox="0 0 24 24">123        <path d="M15 18l-6-6 6-6" stroke="#222" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>124      </svg>125    </div>126    <div class="search-box">127      <svg width="56" height="56" viewBox="0 0 24 24" style="margin-right:18px;">128        <circle cx="11" cy="11" r="7" stroke="#222" stroke-width="2" fill="none"/>129        <path d="M20 20l-4-4" stroke="#222" stroke-width="2" fill="none" stroke-linecap="round"/>130      </svg>131      <div class="search-text">Duroflex sofa set for living room</div>132      <div class="camera" style="margin-left:auto;">133        <svg width="56" height="56" viewBox="0 0 24 24">134          <rect x="3" y="7" width="18" height="12" rx="3" stroke="#222" stroke-width="2" fill="none"/>135          <path d="M9 7l2-3h2l2 3" stroke="#222" stroke-width="2" fill="none" stroke-linecap="round"/>136          <circle cx="12" cy="13" r="3" stroke="#222" stroke-width="2" fill="none"/>137        </svg>138      </div>139    </div>140  </div>141 142  <!-- Tabs -->143  <div class="tabs">144    <div class="tab">Details</div>145    <div class="tab">Compare</div>146    <div class="tab active">Reviews</div>147    <div style="margin-left:auto; display:flex; align-items:center;">148      <svg width="40" height="40" viewBox="0 0 24 24">149        <path d="M12 5l7 7H5z" fill="#222"/>150      </svg>151    </div>152  </div>153 154  <!-- Thumbnails -->155  <div class="thumb-row">156    <div class="thumb">157      [IMG: Video thumbnail]158      <div class="overlay">159        <div class="stars">★★★★★</div>160        <div class="duration">0:10</div>161      </div>162    </div>163    <div class="thumb">164      [IMG: Video thumbnail]165      <div class="overlay">166        <div class="stars">★★★★★</div>167        <div class="duration">0:09</div>168      </div>169    </div>170    <div class="thumb">171      [IMG: Video thumbnail]172      <div class="overlay">173        <div class="stars">★★★★★</div>174        <div class="duration">0:00</div>175      </div>176    </div>177  </div>178 179  <!-- Reviews with images -->180  <div class="section-title">Reviews with images</div>181  <div class="img-grid">182    <div class="img-card">[IMG: Blue 2-seater sofa]</div>183    <div class="img-card">[IMG: Beige 2-seater sofa]</div>184  </div>185 186  <!-- Mentions -->187  <div class="mentions-title">Read reviews that mention</div>188  <div class="chips">189    <div class="chip">quality is good</div>190    <div class="chip">good comfort</div>191    <div class="chip">sofa this is comfortable</div>192    <div class="chip">sofa is good</div>193    <div class="chip">fabric</div>194    <div class="chip">colour</div>195    <div class="chip">legs</div>196    <div class="chip">poor</div>197  </div>198 199  <div class="see-more">200    <div class="caret"></div>201    <div>See more</div>202  </div>203 204  <div class="bottom-title">Top reviews from India</div>205 206  <!-- Floating Add to Cart -->207  <div class="add-to-cart">Add to Cart</div>208 209  <!-- Bottom Navigation -->210  <div class="bottom-nav">211    <div class="nav-item active">212      <svg class="nav-icon" viewBox="0 0 24 24">213        <path d="M3 10l9-7 9 7v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" stroke="#333" stroke-width="2" fill="none"/>214        <path d="M9 21v-6h6v6" stroke="#333" stroke-width="2" fill="none"/>215      </svg>216      <div>Home</div>217      <div class="dot-under"></div>218    </div>219    <div class="nav-item">220      <svg class="nav-icon" viewBox="0 0 24 24">221        <circle cx="12" cy="8" r="4" stroke="#333" stroke-width="2" fill="none"/>222        <path d="M4 21c0-4 4-7 8-7s8 3 8 7" stroke="#333" stroke-width="2" fill="none"/>223      </svg>224      <div>You</div>225    </div>226    <div class="nav-item">227      <svg class="nav-icon" viewBox="0 0 24 24">228        <rect x="3" y="4" width="7" height="7" stroke="#333" stroke-width="2" fill="none"/>229        <rect x="14" y="4" width="7" height="7" stroke="#333" stroke-width="2" fill="none"/>230        <rect x="3" y="15" width="7" height="7" stroke="#333" stroke-width="2" fill="none"/>231        <rect x="14" y="15" width="7" height="7" stroke="#333" stroke-width="2" fill="none"/>232      </svg>233      <div>More</div>234    </div>235    <div class="nav-item">236      <svg class="nav-icon" viewBox="0 0 24 24">237        <path d="M6 6h15l-2 10H7L6 6z" stroke="#333" stroke-width="2" fill="none"/>238        <circle cx="9" cy="20" r="2" fill="#333"/>239        <circle cx="17" cy="20" r="2" fill="#333"/>240      </svg>241      <div>Cart</div>242    </div>243    <div class="nav-item">244      <svg class="nav-icon" viewBox="0 0 24 24">245        <path d="M4 6h16M4 12h16M4 18h16" stroke="#333" stroke-width="2" stroke-linecap="round"/>246      </svg>247      <div>Menu</div>248    </div>249  </div>250 251</div>252</body>253</html>