GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Product Reviews - Dark UI</title>7<style>8  body { margin:0; padding:0; background:transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji"; color:#fff; }9  #render-target{10    width:1080px; height:2400px; position:relative; overflow:hidden;11    background:#0f0f10; border-radius:0;12  }13  .topbar{14    height:160px; background:#1b1b1c; display:flex; align-items:center; padding:0 36px;15    border-bottom:1px solid #2a2a2a;16  }17  .topbar .left, .topbar .right{ display:flex; align-items:center; }18  .topbar .left{ flex:1; gap:24px; }19  .topbar .right{ gap:36px; }20  .icon-btn{21    width:72px; height:72px; display:flex; align-items:center; justify-content:center;22  }23  .content{ padding:28px 40px 180px; }24  .pill{25    width:100%; height:120px; border-radius:60px; font-weight:600; font-size:44px;26    display:flex; align-items:center; justify-content:center; letter-spacing:0.3px;27  }28  .btn-add{ background:#ffffff; color:#111; margin:28px 0; }29  .btn-buy{ background:#111; color:#fff; border:3px solid #fff; }30  .divider{ height:2px; background:#2a2a2a; margin:44px 0; }31  .section-title{32    font-size:56px; font-weight:700; display:flex; align-items:center; justify-content:space-between;33  }34  .rating-wrap{ display:flex; gap:50px; align-items:flex-start; margin-top:28px; }35  .big-score{ font-size:118px; font-weight:700; line-height:1; }36  .muted{ color:#adadad; font-size:34px; margin-top:12px; }37  .score-box{ display:flex; align-items:center; gap:14px; }38  .bars{ flex:1; }39  .bar-row{ display:grid; grid-template-columns: 1fr 520px 100px; align-items:center; gap:22px; margin:24px 0; }40  .bar-label{ color:#ddd; font-size:40px; }41  .bar-track{ height:20px; background:#2a2a2a; border-radius:20px; overflow:hidden; }42  .bar-fill{ height:100%; width:92%; background:#fff; }43  .bar-val{ font-size:40px; color:#ddd; text-align:right; }44  .photos{ margin-top:36px; }45  .photo-row{ display:flex; gap:30px; padding-top:14px; }46  .img-ph{47    width:300px; height:300px; background:#E0E0E0; border:1px solid #BDBDBD; color:#757575;48    display:flex; align-items:center; justify-content:center; border-radius:26px; text-align:center; font-size:30px; padding:16px;49  }50  .sub-title{ font-size:50px; font-weight:700; margin-top:50px; }51  .card{52    background:#232324; border-radius:32px; padding:36px; margin-top:24px; box-shadow: 0 4px 12px rgba(0,0,0,0.35);53  }54  .card-top{ display:flex; align-items:center; justify-content:space-between; }55  .stars{ display:flex; gap:10px; }56  .review-text{ font-size:42px; line-height:1.35; margin-top:24px; color:#ededed; }57  .reviewer{ font-size:34px; color:#9a9a9a; margin-top:26px; }58  .btn-outline{59    width:650px; height:120px; border-radius:60px; border:3px solid #fff; color:#fff; background:transparent;60    display:flex; align-items:center; justify-content:center; font-size:44px; font-weight:700;61    margin:46px auto 0;62  }63  .bottom-nav{64    position:absolute; left:0; right:0; bottom:0; height:190px; background:#111;65    border-top:1px solid #2a2a2a; display:flex; align-items:flex-start; justify-content:space-around; padding-top:22px;66  }67  .nav-item{ display:flex; flex-direction:column; align-items:center; gap:10px; color:#e6e6e6; font-size:30px; }68  .nav-icon{ width:54px; height:54px; display:flex; align-items:center; justify-content:center; }69</style>70</head>71<body>72<div id="render-target">73  <!-- Top App Bar -->74  <div class="topbar">75    <div class="left">76      <div class="icon-btn" aria-label="Back">77        <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">78          <path d="M15 18l-6-6 6-6"/>79        </svg>80      </div>81    </div>82    <div class="right">83      <div class="icon-btn" aria-label="Chat">84        <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">85          <path d="M21 15a4 4 0 0 1-4 4H8l-5 4V5a4 4 0 0 1 4-4h10a4 4 0 0 1 4 4z"/>86        </svg>87      </div>88      <div class="icon-btn" aria-label="Share">89        <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">90          <circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/>91          <path d="M8.6 11l6.8-4M8.6 13l6.8 4"/>92        </svg>93      </div>94      <div class="icon-btn" aria-label="Favorite">95        <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">96          <path d="M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.6l-1-1a5.5 5.5 0 1 0-7.8 7.8l1 1L12 22l7.8-8.6 1-1a5.5 5.5 0 0 0 0-7.8z"/>97        </svg>98      </div>99    </div>100  </div>101 102  <div class="content">103    <div class="pill btn-add">Add to cart</div>104    <div class="pill btn-buy">Buy it now</div>105 106    <div class="divider"></div>107 108    <div class="section-title">109      <span>Item reviews and shop ratings</span>110      <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2"><path d="M6 15l6-6 6 6"/></svg>111    </div>112 113    <div class="rating-wrap">114      <div>115        <div class="score-box">116          <div class="big-score">4.79</div>117          <svg width="72" height="72" viewBox="0 0 24 24" fill="#fff"><path d="M12 2l3.1 6.3 6.9 1-5 4.9 1.2 6.8L12 18l-6.2 3 1.2-6.8-5-4.9 6.9-1L12 2z"/></svg>118        </div>119        <div class="muted">295 ratings</div>120      </div>121      <div class="bars">122        <div class="bar-row">123          <div class="bar-label">Item quality</div>124          <div class="bar-track"><div class="bar-fill" style="width:95%"></div></div>125          <div class="bar-val">4.9</div>126        </div>127        <div class="bar-row">128          <div class="bar-label">Shipping</div>129          <div class="bar-track"><div class="bar-fill" style="width:95%"></div></div>130          <div class="bar-val">4.9</div>131        </div>132        <div class="bar-row">133          <div class="bar-label">Customer service</div>134          <div class="bar-track"><div class="bar-fill" style="width:95%"></div></div>135          <div class="bar-val">4.9</div>136        </div>137      </div>138    </div>139 140    <div class="photos">141      <div class="sub-title">Photos from reviews</div>142      <div class="photo-row">143        <div class="img-ph">[IMG: Door lock product in use]</div>144        <div class="img-ph">[IMG: Closeup of red door blocker]</div>145        <div class="img-ph">[IMG: Another review photo]</div>146      </div>147    </div>148 149    <div class="sub-title">Item reviews</div>150    <div class="card">151      <div class="card-top">152        <div class="stars">153          <svg width="42" height="42" viewBox="0 0 24 24" fill="#fff"><path d="M12 2l3.1 6.3 6.9 1-5 4.9 1.2 6.8L12 18l-6.2 3 1.2-6.8-5-4.9 6.9-1L12 2z"/></svg>154          <svg width="42" height="42" viewBox="0 0 24 24" fill="#fff"><path d="M12 2l3.1 6.3 6.9 1-5 4.9 1.2 6.8L12 18l-6.2 3 1.2-6.8-5-4.9 6.9-1L12 2z"/></svg>155          <svg width="42" height="42" viewBox="0 0 24 24" fill="#fff"><path d="M12 2l3.1 6.3 6.9 1-5 4.9 1.2 6.8L12 18l-6.2 3 1.2-6.8-5-4.9 6.9-1L12 2z"/></svg>156          <svg width="42" height="42" viewBox="0 0 24 24" fill="#fff"><path d="M12 2l3.1 6.3 6.9 1-5 4.9 1.2 6.8L12 18l-6.2 3 1.2-6.8-5-4.9 6.9-1L12 2z"/></svg>157          <svg width="42" height="42" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2"><path d="M12 3l2.6 5.3 5.9.8-4.2 4.1 1 5.8L12 16.9 6.7 19l1-5.8L3.5 9.1l5.9-.8L12 3z"/></svg>158        </div>159        <div class="muted">Nov 10, 2023</div>160      </div>161      <div class="review-text">162        Shipped quickly! Good packaging! Sadly it does not fit all doors though. I tried for my house doors and the hotel door and it did not fit into the door163      </div>164      <div class="reviewer">Jannie</div>165    </div>166 167    <div class="btn-outline">See all reviews (77)</div>168  </div>169 170  <!-- Bottom Navigation -->171  <div class="bottom-nav">172    <div class="nav-item">173      <div class="nav-icon">174        <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">175          <path d="M3 10l9-7 9 7v10a2 2 0 0 1-2 2h-4V12H9v10H5a2 2 0 0 1-2-2z"/>176        </svg>177      </div>178      <div>Home</div>179    </div>180    <div class="nav-item">181      <div class="nav-icon">182        <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">183          <path d="M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.6l-1-1a5.5 5.5 0 1 0-7.8 7.8l1 1L12 22l7.8-8.6 1-1a5.5 5.5 0 0 0 0-7.8z"/>184        </svg>185      </div>186      <div>Favorites</div>187    </div>188    <div class="nav-item">189      <div class="nav-icon">190        <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">191          <path d="M20 6l-2 12H6L4 6h16zM9 6l1-3h4l1 3"/>192        </svg>193      </div>194      <div>Deals</div>195    </div>196    <div class="nav-item">197      <div class="nav-icon">198        <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">199          <circle cx="12" cy="7" r="4"/><path d="M5.5 21a7.5 7.5 0 0 1 13 0"/>200        </svg>201      </div>202      <div>You</div>203    </div>204    <div class="nav-item">205      <div class="nav-icon">206        <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">207          <path d="M6 6h15l-1.5 9H7.5L6 6z"/><circle cx="9" cy="20" r="1.5"/><circle cx="18" cy="20" r="1.5"/>208        </svg>209      </div>210      <div>Cart</div>211    </div>212  </div>213</div>214</body>215</html>