GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1440, initial-scale=1.0">6<title>Product Reviews - Mobile UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1440px;11    height: 3120px;12    position: relative;13    overflow: hidden;14    background: #ffffff;15    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif;16    color: #212121;17  }18 19  /* Status bar */20  .status-bar {21    height: 140px;22    background: #E0E0E0;23    display: flex;24    align-items: center;25    padding: 0 36px;26    box-sizing: border-box;27    font-size: 40px;28    color: #4F4F4F;29    letter-spacing: 1px;30  }31  .status-icons {32    margin-left: auto;33    display: flex;34    align-items: center;35    gap: 26px;36  }37  .status-dot {38    width: 16px; height: 16px; background: #BDBDBD; border-radius: 50%;39  }40 41  /* App header */42  .app-header {43    height: 160px;44    display: flex;45    align-items: center;46    padding: 0 36px;47    box-sizing: border-box;48    background: #fff;49    border-bottom: 1px solid #EEEEEE;50  }51  .left-actions, .right-actions {52    display: flex;53    align-items: center;54  }55  .left-actions { gap: 24px; }56  .right-actions { margin-left: auto; gap: 40px; }57  .icon {58    width: 64px;59    height: 64px;60    stroke: #222;61    fill: none;62    stroke-width: 2.5;63  }64 65  /* Content */66  .content {67    padding: 24px 40px 240px;68    box-sizing: border-box;69  }70  .section {71    padding: 24px 8px;72  }73  .title-lg {74    font-size: 58px;75    font-weight: 700;76    margin: 18px 0 10px;77  }78  .subtitle {79    font-size: 42px;80    color: #616161;81    margin: 6px 0 18px;82  }83  .meta {84    display: flex;85    align-items: center;86    gap: 14px;87    font-size: 36px;88    color: #4F4F4F;89  }90  .meta .verified {91    width: 44px; height: 44px; border-radius: 50%;92    background: #14C671;93    display: inline-flex; align-items: center; justify-content: center;94  }95  .meta .verified svg { width: 28px; height: 28px; stroke: #fff; stroke-width: 4; }96 97  .vote-row {98    display: flex;99    align-items: center;100    gap: 22px;101    margin: 18px 0;102    color: #757575;103    font-size: 34px;104  }105  .vote-icon {106    width: 52px; height: 52px;107    stroke: #9E9E9E; fill: none; stroke-width: 2.4;108  }109  .report {110    margin-left: auto;111    font-size: 38px;112    color: #757575;113  }114  .divider {115    height: 1px;116    background: #E0E0E0;117    margin: 24px 0;118  }119 120  /* Review item */121  .review {122    position: relative;123    padding: 24px 0 8px;124  }125  .rating-badge {126    display: inline-flex;127    align-items: center;128    gap: 14px;129    background: #E9F2FF;130    color: #1A73E8;131    padding: 12px 18px;132    border-radius: 12px;133    font-weight: 700;134    font-size: 36px;135    width: fit-content;136  }137  .rating-badge .star {138    color: #FFC107;139    font-weight: 800;140  }141  .review-title {142    font-size: 44px;143    font-weight: 600;144    color: #424242;145    margin: 6px 0 14px;146  }147  .review-text {148    font-size: 42px;149    color: #424242;150    line-height: 1.35;151    margin: 14px 0 12px;152  }153 154  /* View all button */155  .view-all {156    margin: 36px 0 26px;157    background: #F1F9FF;158    color: #0B69C7;159    text-align: center;160    font-weight: 700;161    font-size: 44px;162    padding: 40px 24px;163    border-radius: 28px;164    border: 1px solid #D9ECFF;165  }166 167  /* Compare products header */168  .compare-header {169    display: flex;170    align-items: center;171    padding: 32px 0;172    gap: 24px;173  }174  .compare-title {175    font-size: 46px;176    font-weight: 800;177    color: #3D3D3D;178    letter-spacing: 0.5px;179  }180  .rule {181    flex: 1;182    height: 1px;183    background: #E0E0E0;184    margin-left: 30px;185  }186  .chev {187    width: 36px; height: 36px; stroke: #9E9E9E; fill: none; stroke-width: 3;188  }189 190  /* Compare carousel placeholder */191  .compare-strip {192    width: 100%;193    background: #F6FAFF;194    border-radius: 24px;195    padding: 40px 30px;196    box-sizing: border-box;197    display: flex;198    gap: 30px;199    overflow: hidden;200  }201  .img-ph {202    flex: 1 1 30%;203    min-width: 360px;204    height: 420px;205    background: #E0E0E0;206    border: 1px solid #BDBDBD;207    display: flex; align-items: center; justify-content: center;208    color: #757575;209    font-size: 34px;210    border-radius: 12px;211  }212 213  /* Sticky add to cart */214  .sticky-cta {215    position: absolute;216    left: 24px;217    right: 24px;218    bottom: 120px;219    background: #ffffff;220    border-radius: 28px;221    box-shadow: 0 14px 40px rgba(0,0,0,0.12);222    padding: 24px;223    display: flex;224    align-items: center;225    gap: 24px;226  }227  .like-box {228    width: 180px; height: 120px;229    border-radius: 24px;230    border: 2px solid #D3E3FF;231    display: flex; align-items: center; justify-content: center;232    background: #FAFDFF;233  }234  .like-icon { width: 64px; height: 64px; stroke: #0B69C7; fill: none; stroke-width: 2.8; }235  .add-btn {236    flex: 1;237    height: 120px;238    background: #FFE100;239    border-radius: 22px;240    display: flex; align-items: center; justify-content: center;241    font-weight: 800;242    font-size: 48px;243    letter-spacing: 1px;244    color: #212121;245    gap: 24px;246  }247  .cart-icon { width: 64px; height: 64px; stroke: #212121; fill: none; stroke-width: 2.6; }248 249  /* Home indicator */250  .home-indicator {251    position: absolute;252    bottom: 32px;253    left: 50%;254    transform: translateX(-50%);255    width: 340px; height: 12px; background: #000;256    border-radius: 8px; opacity: 0.28;257  }258</style>259</head>260<body>261<div id="render-target">262 263  <!-- Mock status bar -->264  <div class="status-bar">265    1:25266    <div class="status-icons">267      <span>◌ ◌ ◌</span>268      <span class="status-dot"></span>269      <span style="font-size:44px;">📶</span>270      <span style="font-size:44px;">🔋</span>271    </div>272  </div>273 274  <!-- App header -->275  <div class="app-header">276    <div class="left-actions">277      <!-- Back -->278      <svg class="icon" viewBox="0 0 24 24">279        <path d="M15 4 L7 12 L15 20" stroke-linecap="round" stroke-linejoin="round"></path>280      </svg>281    </div>282    <div class="right-actions">283      <!-- Search -->284      <svg class="icon" viewBox="0 0 24 24">285        <circle cx="11" cy="11" r="7"></circle>286        <line x1="16.5" y1="16.5" x2="22" y2="22"></line>287      </svg>288      <!-- Heart -->289      <svg class="icon" viewBox="0 0 24 24">290        <path d="M12 21s-6-4.3-8.5-7.5C1.4 11.3 2 7.7 5 6.5c2.1-.8 3.9.4 5 2 1.1-1.6 2.9-2.8 5-2 3 .2 3.6 4.8 1.5 7C18 16.7 12 21 12 21z"></path>291      </svg>292      <!-- Cart -->293      <svg class="icon" viewBox="0 0 24 24">294        <circle cx="9" cy="20" r="1.6" fill="none"></circle>295        <circle cx="18" cy="20" r="1.6" fill="none"></circle>296        <path d="M2 4h2l2 12h12l2-9H6" stroke-linecap="round" stroke-linejoin="round"></path>297      </svg>298    </div>299  </div>300 301  <!-- Content -->302  <div class="content">303 304    <!-- First summary block -->305    <div class="section">306      <div class="title-lg">Very Good</div>307      <div class="subtitle">Excellent</div>308      <div class="meta">309        <span class="verified">310          <svg viewBox="0 0 24 24">311            <path d="M6 12l3 3 9-9" fill="none"></path>312          </svg>313        </span>314        <span>SINGH (India) | 14-11-2023</span>315        <span class="report">Report</span>316      </div>317      <div class="vote-row">318        <!-- Like -->319        <svg class="vote-icon" viewBox="0 0 24 24">320          <path d="M2 11h4v9H2zM7 11h3l3-5h2v14H7z" stroke-linejoin="round"></path>321        </svg>322        <span>0</span>323        <!-- Dislike -->324        <svg class="vote-icon" viewBox="0 0 24 24">325          <path d="M2 4h4v9H2zM7 13h3l3 5h2V4H7z" stroke-linejoin="round"></path>326        </svg>327        <span>0</span>328      </div>329      <div class="divider"></div>330    </div>331 332    <!-- Review item 1 -->333    <div class="review">334      <div class="rating-badge">335        <span>5</span> <span class="star">★</span>336      </div>337      <div class="review-title">Product Experience (2 to 8 weeks)</div>338      <div class="review-text">Good n comfortable and nice collection</div>339      <div class="meta">340        <span class="verified">341          <svg viewBox="0 0 24 24">342            <path d="M6 12l3 3 9-9" fill="none"></path>343          </svg>344        </span>345        <span>SANGEETA (India) | 14-11-2023</span>346        <span class="report">Report</span>347      </div>348      <div class="vote-row">349        <svg class="vote-icon" viewBox="0 0 24 24">350          <path d="M2 11h4v9H2zM7 11h3l3-5h2v14H7z" stroke-linejoin="round"></path>351        </svg>352        <span>0</span>353        <svg class="vote-icon" viewBox="0 0 24 24">354          <path d="M2 4h4v9H2zM7 13h3l3 5h2V4H7z" stroke-linejoin="round"></path>355        </svg>356        <span>0</span>357      </div>358      <div class="divider"></div>359    </div>360 361    <!-- Review item 2 -->362    <div class="review">363      <div class="rating-badge">364        <span>5</span> <span class="star">★</span>365      </div>366      <div class="review-title">Product Experience (2 to 8 weeks)</div>367      <div class="review-text">Nice product</div>368      <div class="meta">369        <span class="verified">370          <svg viewBox="0 0 24 24">371            <path d="M6 12l3 3 9-9" fill="none"></path>372          </svg>373        </span>374        <span>Santhosh Kumar (India) | 14-11-2023</span>375        <span class="report">Report</span>376      </div>377      <div class="vote-row">378        <svg class="vote-icon" viewBox="0 0 24 24">379          <path d="M2 11h4v9H2zM7 11h3l3-5h2v14H7z" stroke-linejoin="round"></path>380        </svg>381        <span>0</span>382        <svg class="vote-icon" viewBox="0 0 24 24">383          <path d="M2 4h4v9H2zM7 13h3l3 5h2V4H7z" stroke-linejoin="round"></path>384        </svg>385        <span>0</span>386      </div>387      <div class="divider"></div>388    </div>389 390    <!-- View all reviews -->391    <div class="view-all">View all 19358 Reviews</div>392 393    <!-- Compare products -->394    <div class="compare-header">395      <div class="compare-title">COMPARE PRODUCTS</div>396      <div class="rule"></div>397      <svg class="chev" viewBox="0 0 24 24">398        <path d="M8 10l4 4 4-4" stroke-linecap="round" stroke-linejoin="round"></path>399      </svg>400    </div>401 402    <div class="compare-strip">403      <div class="img-ph">[IMG: Grey Running Shoe]</div>404      <div class="img-ph">[IMG: Black Sports Shoe]</div>405      <div class="img-ph">[IMG: Blue Casual Sneaker]</div>406    </div>407  </div>408 409  <!-- Sticky Add to Cart -->410  <div class="sticky-cta">411    <div class="like-box">412      <svg class="like-icon" viewBox="0 0 24 24">413        <path d="M12 21s-6-4.3-8.5-7.5C1.4 11.3 2 7.7 5 6.5c2.1-.8 3.9.4 5 2 1.1-1.6 2.9-2.8 5-2 3 .2 3.6 4.8 1.5 7C18 16.7 12 21 12 21z"></path>414        <line x1="18" y1="6" x2="20" y2="4"></line>415      </svg>416    </div>417    <div class="add-btn">418      ADD TO CART419      <svg class="cart-icon" viewBox="0 0 24 24">420        <circle cx="9" cy="20" r="1.6" fill="none"></circle>421        <circle cx="18" cy="20" r="1.6" fill="none"></circle>422        <path d="M2 4h2l2 12h12l2-9H6" stroke-linecap="round" stroke-linejoin="round"></path>423      </svg>424    </div>425  </div>426 427  <!-- Home indicator -->428  <div class="home-indicator"></div>429</div>430</body>431</html>