GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, height=2400, initial-scale=1.0">6<title>Hardware Shack - Reviews</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #ffffff;15  }16 17  /* Status bar */18  .status-bar {19    position: absolute;20    top: 0;21    left: 0;22    width: 1080px;23    height: 120px;24    background: #3F2ACC;25    color: #fff;26    display: flex;27    align-items: center;28    padding: 0 40px;29    box-sizing: border-box;30  }31  .status-left { font-weight: 600; font-size: 40px; }32  .status-right {33    margin-left: auto;34    display: flex;35    align-items: center;36    gap: 30px;37  }38  .status-dot {39    width: 16px; height: 16px; background:#fff; border-radius: 50%;40    opacity: 0.9;41  }42 43  /* Header/App bar */44  .app-bar {45    position: absolute;46    top: 120px;47    left: 0;48    width: 1080px;49    height: 170px;50    background: #ffffff;51    box-shadow: 0 4px 8px rgba(0,0,0,0.08);52    display: flex;53    align-items: center;54    padding: 0 36px;55    box-sizing: border-box;56  }57  .hamburger {58    width: 80px; height: 80px; display: flex; align-items: center; justify-content: center;59    margin-right: 28px;60  }61  .logo {62    width: 140px; height: 140px; background:#E0E0E0; border:1px solid #BDBDBD;63    display:flex; align-items:center; justify-content:center; color:#757575;64    border-radius: 16px;65    margin-right: 30px;66    font-size: 26px; text-align:center; padding:6px; box-sizing:border-box;67  }68  .title {69    font-size: 64px; font-weight: 800; letter-spacing: 1px; color: #000;70  }71  .cart-btn {72    margin-left: auto;73    width: 100px; height: 100px; background: #F4C84A; border-radius: 50%;74    display:flex; align-items:center; justify-content:center;75  }76 77  /* Tabs */78  .tabs {79    position: absolute;80    top: 290px;81    left: 0;82    width: 1080px;83    background: #fff;84    display: flex;85    padding: 0 36px;86    box-sizing: border-box;87    border-top: 1px solid #eee;88    border-bottom: 1px solid #eee;89    height: 120px;90    align-items: center;91    gap: 40px;92  }93  .tab {94    font-weight: 700; font-size: 40px; color: #7A7A7A;95    padding-bottom: 22px;96  }97  .tab.active {98    color: #000;99    border-bottom: 8px solid #F4C84A;100  }101 102  .content {103    position: absolute;104    top: 410px;105    left: 0;106    width: 1080px;107    padding: 0 36px;108    box-sizing: border-box;109  }110 111  .page-title {112    font-size: 54px;113    font-weight: 700;114    color: #111;115    line-height: 1.25;116    margin: 40px 0 30px 0;117  }118 119  .review-row {120    display: flex;121    align-items: flex-start;122    gap: 36px;123    margin-top: 30px;124    padding-bottom: 40px;125  }126  .avatar {127    width: 160px; height: 160px; background:#E0E0E0; border:1px solid #BDBDBD;128    border-radius: 50%;129    display:flex; align-items:center; justify-content:center; color:#757575; font-size:26px;130  }131  .review-body { flex: 1; }132  .stars { display: flex; gap: 12px; margin-bottom: 16px; }133  .author-line {134    font-size: 36px; color: #222;135    margin-bottom: 18px;136  }137  .author-line .name { font-weight: 700; color:#222; }138  .author-line .date { color:#6D6D6D; font-weight: 500; }139  .review-text {140    font-size: 40px; color:#7E7E7E; font-style: italic; line-height: 1.45;141  }142 143  /* Add a review section */144  .add-review {145    margin-top: 80px;146    border: 4px solid #F4C84A;147    padding: 50px 36px;148    box-sizing: border-box;149  }150  .section-title {151    font-size: 50px; font-weight: 800; margin-bottom: 30px;152  }153  .field-label {154    font-size: 38px; font-weight: 700; color: #222; margin: 24px 0 14px;155  }156  .rating-row {157    display: flex; gap: 36px; align-items: center; margin-bottom: 20px;158  }159  .rating-group { display: flex; gap: 26px; }160  .star-gray { opacity: 0.35; }161 162  textarea, input[type="text"] {163    width: 100%;164    border: 2px solid #DADADA;165    border-radius: 6px;166    font-size: 38px;167    padding: 24px;168    box-sizing: border-box;169  }170  textarea { height: 360px; resize: none; }171 172  /* Bottom system bar */173  .system-bar {174    position: absolute;175    bottom: 0; left: 0; width: 1080px; height: 120px; background: #000;176    display: flex; align-items: center; justify-content: center;177  }178  .home-indicator {179    width: 300px; height: 16px; background: #e5e5e5; border-radius: 10px; opacity: 0.8;180  }181</style>182</head>183<body>184<div id="render-target">185 186  <!-- Status Bar -->187  <div class="status-bar">188    <div class="status-left">3:34</div>189    <div class="status-right">190      <!-- small icons -->191      <svg width="46" height="46" viewBox="0 0 24 24" fill="#fff"><path d="M12 3C7 3 3 7 3 12h3c0-3 3-6 6-6s6 3 6 6h3c0-5-4-9-9-9zm0 6c-2 0-3 1-3 3h3c0-.6.4-1 1-1s1 .4 1 1h3c0-2-1-3-3-3z"/></svg>192      <div class="status-dot"></div>193      <svg width="60" height="46" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">194        <rect x="2" y="6" width="18" height="12" rx="2"></rect>195        <rect x="20" y="9" width="2" height="6" fill="#fff" stroke="none"></rect>196      </svg>197    </div>198  </div>199 200  <!-- App Bar -->201  <div class="app-bar">202    <div class="hamburger">203      <svg width="72" height="72" viewBox="0 0 24 24" fill="#6B6B6B">204        <rect x="3" y="5" width="18" height="2"></rect>205        <rect x="3" y="11" width="18" height="2"></rect>206        <rect x="3" y="17" width="18" height="2"></rect>207      </svg>208    </div>209    <div class="logo">[IMG: Hardware Logo]</div>210    <div class="title">HARDWARE SHACK</div>211    <div class="cart-btn">212      <svg width="64" height="64" viewBox="0 0 24 24" fill="#fff">213        <path d="M7 18c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm10 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zM6 6h14l-2 8H8L6 6zm-2-2h2l1 4h12l1-4h2v2h-2l-3 10H8l-3-10H3V4z"/>214      </svg>215    </div>216  </div>217 218  <!-- Tabs -->219  <div class="tabs">220    <div class="tab">DESCRIPTION</div>221    <div class="tab">BRAND</div>222    <div class="tab active">REVIEWS (1)</div>223  </div>224 225  <!-- Content -->226  <div class="content">227    <div class="page-title">228      1 review for Bosch 350W Bench Grinder, GBG 35-15229    </div>230 231    <div class="review-row">232      <div class="avatar">[IMG: User Avatar]</div>233      <div class="review-body">234        <div class="stars">235          <svg width="50" height="50" viewBox="0 0 24 24" class="star-red"><path fill="#D32F2F" d="M12 2l3.1 6.3L22 9.3l-5 4.9 1.2 6.9L12 18l-6.2 3.1L7 14.2 2 9.3l6.9-1L12 2z"/></svg>236          <svg width="50" height="50" viewBox="0 0 24 24" class="star-red"><path fill="#D32F2F" d="M12 2l3.1 6.3L22 9.3l-5 4.9 1.2 6.9L12 18l-6.2 3.1L7 14.2 2 9.3l6.9-1L12 2z"/></svg>237          <svg width="50" height="50" viewBox="0 0 24 24" class="star-red"><path fill="#D32F2F" d="M12 2l3.1 6.3L22 9.3l-5 4.9 1.2 6.9L12 18l-6.2 3.1L7 14.2 2 9.3l6.9-1L12 2z"/></svg>238          <svg width="50" height="50" viewBox="0 0 24 24" class="star-red"><path fill="#D32F2F" d="M12 2l3.1 6.3L22 9.3l-5 4.9 1.2 6.9L12 18l-6.2 3.1L7 14.2 2 9.3l6.9-1L12 2z"/></svg>239          <svg width="50" height="50" viewBox="0 0 24 24" class="star-red"><path fill="#D32F2F" d="M12 2l3.1 6.3L22 9.3l-5 4.9 1.2 6.9L12 18l-6.2 3.1L7 14.2 2 9.3l6.9-1L12 2z"/></svg>240        </div>241        <div class="author-line">242          <span class="name">G.hema</span> – <span class="date">December 5, 2020</span>243        </div>244        <div class="review-text">245          Excellent finish and quality product.<br>246          Speed regulator could have been provided!247        </div>248      </div>249    </div>250 251    <div class="add-review">252      <div class="section-title">Add a review</div>253 254      <div class="field-label">Your rating *</div>255      <div class="rating-row">256        <div class="rating-group">257          <svg width="60" height="60" viewBox="0 0 24 24" class="star-gray"><path fill="#B0B0B0" d="M12 2l3.1 6.3L22 9.3l-5 4.9 1.2 6.9L12 18l-6.2 3.1L7 14.2 2 9.3l6.9-1L12 2z"/></svg>258          <svg width="60" height="60" viewBox="0 0 24 24" class="star-gray"><path fill="#B0B0B0" d="M12 2l3.1 6.3L22 9.3l-5 4.9 1.2 6.9L12 18l-6.2 3.1L7 14.2 2 9.3l6.9-1L12 2z"/></svg>259          <svg width="60" height="60" viewBox="0 0 24 24" class="star-gray"><path fill="#B0B0B0" d="M12 2l3.1 6.3L22 9.3l-5 4.9 1.2 6.9L12 18l-6.2 3.1L7 14.2 2 9.3l6.9-1L12 2z"/></svg>260          <svg width="60" height="60" viewBox="0 0 24 24" class="star-gray"><path fill="#B0B0B0" d="M12 2l3.1 6.3L22 9.3l-5 4.9 1.2 6.9L12 18l-6.2 3.1L7 14.2 2 9.3l6.9-1L12 2z"/></svg>261          <svg width="60" height="60" viewBox="0 0 24 24" class="star-gray"><path fill="#B0B0B0" d="M12 2l3.1 6.3L22 9.3l-5 4.9 1.2 6.9L12 18l-6.2 3.1L7 14.2 2 9.3l6.9-1L12 2z"/></svg>262        </div>263      </div>264 265      <div class="field-label">Your review *</div>266      <textarea placeholder="Write your review here..."></textarea>267 268      <div class="field-label" style="margin-top: 30px;">Name</div>269      <input type="text" placeholder="Enter your name">270    </div>271  </div>272 273  <!-- Bottom System Bar -->274  <div class="system-bar">275    <div class="home-indicator"></div>276  </div>277 278</div>279</body>280</html>