GD-ML/AndroidCode

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>Reviews - Winter Clothes</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; color: #222; }9  #render-target {10    width: 1080px; height: 2400px; position: relative; overflow: hidden; background: #FFFFFF;11    border-radius: 24px;12  }13 14  /* Header */15  .top-header {16    position: absolute; top: 0; left: 0; right: 0; height: 220px;17    background: linear-gradient(180deg, #9EE0D6 0%, #BFE8E2 100%);18    padding: 24px 32px;19  }20  .status-bar {21    height: 44px; display: flex; align-items: center; justify-content: space-between; color: #0b1f1e; opacity: 0.9;22    font-size: 36px; padding: 0 8px;23  }24  .search-row {25    margin-top: 24px; display: flex; align-items: center; gap: 24px;26  }27  .icon-btn {28    width: 72px; height: 72px; border-radius: 36px; display: flex; align-items: center; justify-content: center;29  }30  .search-box {31    flex: 1; background: #fff; height: 96px; border-radius: 24px; box-shadow: 0 6px 16px rgba(0,0,0,0.15);32    display: flex; align-items: center; padding: 0 28px; gap: 22px;33  }34  .search-input {35    flex: 1; font-size: 42px; color: #333;36  }37  .corner-icon {38    width: 72px; height: 72px; border-radius: 20px; background: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 10px rgba(0,0,0,0.1);39  }40 41  /* Content area */42  .content {43    position: absolute; top: 220px; left: 0; right: 0; bottom: 220px;44    overflow: hidden;45  }46  .scroll {47    height: 100%; overflow-y: auto; padding: 24px 40px 240px 40px;48  }49 50  .review {51    padding-bottom: 48px; border-bottom: 1px solid #eee; margin-bottom: 28px;52  }53  .user-line {54    display: flex; align-items: center; gap: 18px; margin-top: 8px; margin-bottom: 12px;55    font-size: 40px; color: #333;56  }57  .avatar {58    width: 72px; height: 72px; border-radius: 50%; background: #E0E0E0; border: 1px solid #BDBDBD;59    display: flex; align-items: center; justify-content: center; color: #757575; font-size: 22px;60  }61 62  .stars-row { display: flex; align-items: center; gap: 14px; margin-top: 8px; }63  .stars-row .badge { color: #CE6A05; font-weight: 700; font-size: 34px; }64  .review-title { font-size: 52px; font-weight: 800; margin: 12px 0 8px; }65  .meta { color: #666; font-size: 34px; margin-bottom: 16px; }66  .dim-divider::before { content: " | "; color: #c7c7c7; padding: 0 8px; }67  .body-text { font-size: 42px; line-height: 1.35; margin: 8px 0 18px; }68 69  .image-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin: 16px 0 12px; }70  .img-ph {71    width: 100%; height: 420px; background: #E0E0E0; border: 1px solid #BDBDBD; border-radius: 28px;72    display: flex; align-items: center; justify-content: center; color: #757575; font-size: 34px; text-align: center;73  }74 75  .helpful-row {76    display: flex; align-items: center; justify-content: space-between; margin-top: 20px;77  }78  .left-actions { display: flex; align-items: center; gap: 24px; }79  .pill {80    height: 96px; padding: 0 32px; border-radius: 24px; border: 1px solid #D6D6D6; background: #fff;81    display: inline-flex; align-items: center; gap: 16px; font-size: 42px; color: #222; font-weight: 600;82    box-shadow: 0 3px 8px rgba(0,0,0,0.06);83  }84  .share-link { display: inline-flex; align-items: center; gap: 14px; font-size: 42px; color: #4b5563; }85  .report { font-size: 42px; color: #737373; }86 87  /* Bottom navigation */88  .bottom-nav {89    position: absolute; left: 0; right: 0; bottom: 60px; height: 180px; border-top: 1px solid #e5e5e5; background: #FAFAFA;90    display: grid; grid-template-columns: repeat(5, 1fr); align-items: center;91  }92  .nav-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: #374151; }93  .nav-item.active { color: #2AA69A; }94  .nav-label { font-size: 34px; }95  .gesture-bar {96    position: absolute; left: 50%; transform: translateX(-50%); bottom: 16px; width: 360px; height: 16px; background: #BDBDBD; border-radius: 8px; opacity: 0.6;97  }98 99  /* Icons */100  .icon { width: 48px; height: 48px; }101  .icon-large { width: 56px; height: 56px; }102  .star-icon { width: 40px; height: 40px; }103 104</style>105</head>106<body>107<div id="render-target">108  <div class="top-header">109    <div class="status-bar">110      <div>11:13</div>111      <div style="display:flex; gap:22px; align-items:center;">112        <svg class="icon" viewBox="0 0 24 24"><path d="M12 4a8 8 0 1 0 0 16 8 8 0 0 0 0-16z" fill="#2B5F5A" opacity="0.5"/></svg>113        <svg class="icon" viewBox="0 0 24 24"><rect x="5" y="6" width="14" height="12" rx="2" fill="#2B5F5A" opacity="0.6"/></svg>114        <svg class="icon" viewBox="0 0 24 24"><path d="M2 7h20v10H2z" fill="#2B5F5A" opacity="0.4"/><circle cx="20" cy="6" r="2" fill="#2B5F5A"/></svg>115      </div>116    </div>117    <div class="search-row">118      <div class="icon-btn">119        <svg class="icon-large" viewBox="0 0 24 24"><path d="M15 19L8 12l7-7" stroke="#1F2937" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>120      </div>121      <div class="search-box">122        <svg class="icon-large" viewBox="0 0 24 24"><circle cx="11" cy="11" r="7" stroke="#4B5563" stroke-width="2" fill="none"/><path d="M20 20l-4-4" stroke="#4B5563" stroke-width="2" stroke-linecap="round"/></svg>123        <div class="search-input">winter clothes for men</div>124        <div class="corner-icon">125          <svg class="icon-large" viewBox="0 0 24 24">126            <rect x="5" y="5" width="14" height="14" rx="2" stroke="#1F2937" stroke-width="2" fill="none"/>127            <path d="M9 5v4M5 9h4M15 19v-4M19 15h-4" stroke="#1F2937" stroke-width="2" stroke-linecap="round"/>128          </svg>129        </div>130      </div>131    </div>132  </div>133 134  <div class="content">135    <div class="scroll">136 137      <!-- Review 1 -->138      <div class="review">139        <div class="stars-row">140          <svg class="star-icon" viewBox="0 0 20 20"><path d="M10 2l2.3 4.7 5.2.7-3.8 3.6 1 5.1L10 14.5 5.3 16.1l1-5.1L2.5 7.4l5.2-.7L10 2z" fill="#F59E0B"/></svg>141          <svg class="star-icon" viewBox="0 0 20 20"><path d="M10 2l2.3 4.7 5.2.7-3.8 3.6 1 5.1L10 14.5 5.3 16.1l1-5.1L2.5 7.4l5.2-.7L10 2z" fill="#F59E0B"/></svg>142          <svg class="star-icon" viewBox="0 0 20 20"><path d="M10 2l2.3 4.7 5.2.7-3.8 3.6 1 5.1L10 14.5 5.3 16.1l1-5.1L2.5 7.4l5.2-.7L10 2z" fill="#F59E0B"/></svg>143          <svg class="star-icon" viewBox="0 0 20 20"><path d="M10 2l2.3 4.7 5.2.7-3.8 3.6 1 5.1L10 14.5 5.3 16.1l1-5.1L2.5 7.4l5.2-.7L10 2z" fill="#F59E0B"/></svg>144          <svg class="star-icon" viewBox="0 0 20 20"><path d="M10 2l2.3 4.7 5.2.7-3.8 3.6 1 5.1L10 14.5 5.3 16.1l1-5.1L2.5 7.4l5.2-.7L10 2z" fill="#F59E0B" opacity="0.4"/></svg>145          <div class="badge">Verified Purchase</div>146        </div>147        <div class="review-title">Good</div>148        <div class="meta">Reviewed in India on 1 November 2023</div>149        <div class="meta">Height: 5'6"<span class="dim-divider"></span>Weight: 54–56 kg</div>150        <div class="body-text">Good product</div>151 152        <div class="helpful-row">153          <div class="left-actions">154            <div class="pill">155              Helpful156            </div>157            <div class="share-link">158              <svg class="icon" viewBox="0 0 24 24"><circle cx="6" cy="12" r="3" fill="#4B5563"/><circle cx="18" cy="6" r="3" fill="#4B5563"/><circle cx="18" cy="18" r="3" fill="#4B5563"/><path d="M9 12l6-6M9 12l6 6" stroke="#4B5563" stroke-width="2" fill="none" stroke-linecap="round"/></svg>159              Share160            </div>161          </div>162          <div class="report">Report</div>163        </div>164      </div>165 166      <!-- Review 2 -->167      <div class="review">168        <div class="user-line">169          <div class="avatar">User Avatar</div>170          <div>Balasheb Chandrakant Moze</div>171        </div>172        <div class="stars-row">173          <svg class="star-icon" viewBox="0 0 20 20"><path d="M10 2l2.3 4.7 5.2.7-3.8 3.6 1 5.1L10 14.5 5.3 16.1l1-5.1L2.5 7.4l5.2-.7L10 2z" fill="#F59E0B"/></svg>174          <svg class="star-icon" viewBox="0 0 20 20"><path d="M10 2l2.3 4.7 5.2.7-3.8 3.6 1 5.1L10 14.5 5.3 16.1l1-5.1L2.5 7.4l5.2-.7L10 2z" fill="#F59E0B"/></svg>175          <svg class="star-icon" viewBox="0 0 20 20"><path d="M10 2l2.3 4.7 5.2.7-3.8 3.6 1 5.1L10 14.5 5.3 16.1l1-5.1L2.5 7.4l5.2-.7L10 2z" fill="#F59E0B"/></svg>176          <svg class="star-icon" viewBox="0 0 20 20"><path d="M10 2l2.3 4.7 5.2.7-3.8 3.6 1 5.1L10 14.5 5.3 16.1l1-5.1L2.5 7.4l5.2-.7L10 2z" fill="#F59E0B"/></svg>177          <svg class="star-icon" viewBox="0 0 20 20"><path d="M10 2l2.3 4.7 5.2.7-3.8 3.6 1 5.1L10 14.5 5.3 16.1l1-5.1L2.5 7.4l5.2-.7L10 2z" fill="#F59E0B" opacity="0.4"/></svg>178          <div class="badge">Verified Purchase</div>179        </div>180        <div class="review-title">Travel Hoodie</div>181        <div class="meta">Reviewed in India on 5 November 2023</div>182        <div class="meta">Height: 4'4"<span class="dim-divider"></span>Weight: 52–54 kg</div>183 184        <div class="image-grid">185          <div class="img-ph">[IMG: Dark Blue Hoodie]</div>186          <div class="img-ph">[IMG: Grey Hoodie Interior]</div>187        </div>188 189        <div class="body-text">Good product, value for money, soft, comftebal,</div>190        <div class="meta">5 people found this helpful</div>191 192        <div class="helpful-row">193          <div class="left-actions">194            <div class="pill">Helpful</div>195            <div class="share-link">196              <svg class="icon" viewBox="0 0 24 24"><circle cx="6" cy="12" r="3" fill="#4B5563"/><circle cx="18" cy="6" r="3" fill="#4B5563"/><circle cx="18" cy="18" r="3" fill="#4B5563"/><path d="M9 12l6-6M9 12l6 6" stroke="#4B5563" stroke-width="2" fill="none" stroke-linecap="round"/></svg>197              Share198            </div>199          </div>200          <div class="report">Report</div>201        </div>202      </div>203 204      <!-- Review 3 (partial, visible above bottom nav) -->205      <div class="review">206        <div class="user-line">207          <div class="avatar">User Avatar</div>208          <div>Yashraj</div>209        </div>210        <div class="stars-row">211          <svg class="star-icon" viewBox="0 0 20 20"><path d="M10 2l2.3 4.7 5.2.7-3.8 3.6 1 5.1L10 14.5 5.3 16.1l1-5.1L2.5 7.4l5.2-.7L10 2z" fill="#F59E0B"/></svg>212          <svg class="star-icon" viewBox="0 0 20 20"><path d="M10 2l2.3 4.7 5.2.7-3.8 3.6 1 5.1L10 14.5 5.3 16.1l1-5.1L2.5 7.4l5.2-.7L10 2z" fill="#F59E0B"/></svg>213          <svg class="star-icon" viewBox="0 0 20 20"><path d="M10 2l2.3 4.7 5.2.7-3.8 3.6 1 5.1L10 14.5 5.3 16.1l1-5.1L2.5 7.4l5.2-.7L10 2z" fill="#F59E0B"/></svg>214          <svg class="star-icon" viewBox="0 0 20 20"><path d="M10 2l2.3 4.7 5.2.7-3.8 3.6 1 5.1L10 14.5 5.3 16.1l1-5.1L2.5 7.4l5.2-.7L10 2z" fill="#F59E0B"/></svg>215          <svg class="star-icon" viewBox="0 0 20 20"><path d="M10 2l2.3 4.7 5.2.7-3.8 3.6 1 5.1L10 14.5 5.3 16.1l1-5.1L2.5 7.4l5.2-.7L10 2z" fill="#F59E0B"/></svg>216          <div class="badge">Verified Purchase</div>217        </div>218        <div class="review-title">Quality product</div>219        <div class="meta">Reviewed in India on 20 November 2023</div>220      </div>221 222    </div>223  </div>224 225  <!-- Bottom navigation bar -->226  <div class="bottom-nav">227    <div class="nav-item active">228      <svg class="icon" viewBox="0 0 24 24"><path d="M3 11l9-7 9 7v8a2 2 0 0 1-2 2h-4v-6H9v6H5a2 2 0 0 1-2-2v-8z" fill="#2AA69A"/></svg>229      <div class="nav-label">Home</div>230    </div>231    <div class="nav-item">232      <svg class="icon" viewBox="0 0 24 24"><circle cx="12" cy="8" r="4" fill="#374151"/><path d="M4 20a8 8 0 0 1 16 0" fill="none" stroke="#374151" stroke-width="2"/></svg>233      <div class="nav-label">You</div>234    </div>235    <div class="nav-item">236      <svg class="icon" viewBox="0 0 24 24"><rect x="5" y="5" width="14" height="14" rx="2" fill="none" stroke="#374151" stroke-width="2"/><path d="M3 9h18M9 3v18" stroke="#374151" stroke-width="2" opacity="0.7"/></svg>237      <div class="nav-label">More</div>238    </div>239    <div class="nav-item">240      <svg class="icon" viewBox="0 0 24 24"><path d="M6 6h15l-2 9H8L6 6z" fill="none" stroke="#374151" stroke-width="2"/><circle cx="9" cy="20" r="2" fill="#374151"/><circle cx="17" cy="20" r="2" fill="#374151"/></svg>241      <div class="nav-label">Cart</div>242    </div>243    <div class="nav-item">244      <svg class="icon" viewBox="0 0 24 24"><path d="M4 7h16M4 12h16M4 17h16" stroke="#374151" stroke-width="2" stroke-linecap="round"/></svg>245      <div class="nav-label">Menu</div>246    </div>247  </div>248 249  <div class="gesture-bar"></div>250</div>251</body>252</html>