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>Product Details</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; color: #222; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #F1F1F1;15  }16 17  /* App Bar */18  .appbar {19    position: absolute;20    top: 0;21    left: 0;22    width: 1080px;23    height: 160px;24    background: #2E2E2E;25    display: flex;26    align-items: center;27    padding: 0 28px;28    box-sizing: border-box;29    color: #fff;30  }31  .appbar .title {32    font-size: 44px;33    font-weight: 600;34    margin-left: 18px;35  }36  .appbar .left {37    display: flex;38    align-items: center;39    gap: 16px;40    flex: 1;41  }42  .appbar .right {43    display: flex;44    align-items: center;45    gap: 26px;46  }47  .icon {48    width: 56px;49    height: 56px;50    display: inline-flex;51    align-items: center;52    justify-content: center;53    fill: currentColor;54    color: #fff;55  }56 57  /* Scrollable content area */58  .content {59    position: absolute;60    top: 160px;61    left: 0;62    right: 0;63    bottom: 190px; /* leave space for bottom bar */64    overflow-y: auto;65    padding: 28px;66    box-sizing: border-box;67  }68 69  .section-title {70    font-size: 30px;71    letter-spacing: 2px;72    font-weight: 800;73    color: #A7A7A7;74    margin: 18px 8px 18px;75    text-transform: uppercase;76  }77 78  .card {79    background: #fff;80    border-radius: 22px;81    box-shadow: 0 2px 6px rgba(0,0,0,0.06);82  }83 84  .feedback-card {85    height: 280px;86    display: flex;87    align-items: center;88    justify-content: center;89    color: #6F6F6F;90    flex-direction: column;91    gap: 16px;92  }93 94  .image-placeholder {95    width: 100%;96    height: 280px;97    background: #E0E0E0;98    border: 1px solid #BDBDBD;99    border-radius: 16px;100    display: flex;101    align-items: center;102    justify-content: center;103    color: #757575;104    font-size: 30px;105  }106 107  /* Product carousel */108  .carousel {109    display: flex;110    gap: 24px;111    overflow-x: auto;112    padding-bottom: 8px;113  }114  .product-card {115    min-width: 470px;116    max-width: 470px;117    padding: 20px;118    box-sizing: border-box;119  }120  .product-title {121    font-size: 30px;122    color: #333;123    margin: 18px 0 8px;124    white-space: nowrap;125    overflow: hidden;126    text-overflow: ellipsis;127  }128  .product-price {129    font-size: 36px;130    font-weight: 800;131    color: #111;132    margin-bottom: 8px;133  }134 135  /* Seller info */136  .seller-section .seller-card {137    padding: 24px;138  }139  .seller-row {140    display: flex;141    align-items: center;142    justify-content: space-between;143    gap: 18px;144  }145  .seller-name {146    font-size: 36px;147    font-weight: 700;148    color: #222;149  }150  .follow-btn {151    background: #F29920;152    color: #fff;153    border: none;154    border-radius: 12px;155    padding: 18px 28px;156    font-size: 28px;157    font-weight: 700;158    box-shadow: 0 2px 6px rgba(242,153,32,0.4);159  }160  .seller-meta {161    margin-top: 14px;162    color: #666;163    font-size: 28px;164    display: flex;165    gap: 44px;166  }167  .chevron {168    width: 28px;169    height: 28px;170    margin-left: 8px;171  }172 173  /* Bottom action bar */174  .bottom-bar {175    position: absolute;176    left: 0; right: 0; bottom: 0;177    height: 190px;178    background: #fff;179    box-shadow: 0 -4px 12px rgba(0,0,0,0.08);180    padding: 22px 28px 28px;181    box-sizing: border-box;182    display: flex;183    align-items: flex-end;184  }185  .bottom-actions {186    width: 100%;187    display: flex;188    align-items: center;189    gap: 24px;190  }191  .mini-btn {192    width: 150px;193    height: 120px;194    border: 2px solid #F29920;195    border-radius: 18px;196    background: #fff;197    display: flex;198    align-items: center;199    justify-content: center;200    color: #F29920;201  }202  .mini-btn svg { width: 54px; height: 54px; }203 204  .mini-btn.filled {205    background: #F29920;206    color: #fff;207    border-color: #F29920;208  }209 210  .cta {211    flex: 1;212    height: 120px;213    background: #F29920;214    border-radius: 20px;215    color: #fff;216    font-size: 38px;217    font-weight: 800;218    display: flex;219    align-items: center;220    justify-content: center;221    letter-spacing: 0.5px;222    box-shadow: 0 6px 14px rgba(242,153,32,0.45);223  }224</style>225</head>226<body>227<div id="render-target">228 229  <!-- App Bar -->230  <div class="appbar">231    <div class="left">232      <div class="icon" aria-label="Back">233        <svg viewBox="0 0 24 24"><path d="M15.5 3.5 7 12l8.5 8.5-1.9 1.9L3.2 12l10.4-10.4 1.9 1.9z"/></svg>234      </div>235      <div class="title">Details</div>236    </div>237    <div class="right">238      <div class="icon" aria-label="Search">239        <svg viewBox="0 0 24 24"><path d="M15.5 14h-.8l-.3-.3a6.4 6.4 0 1 0-.7.7l.3.3v.8l5 5 1.5-1.5-5-5Zm-6.1 0a4.9 4.9 0 1 1 0-9.8 4.9 4.9 0 0 1 0 9.8Z"/></svg>240      </div>241      <div class="icon" aria-label="Cart">242        <svg viewBox="0 0 24 24"><path d="M7 18a2 2 0 1 0 0 4 2 2 0 0 0 0-4Zm10 0a2 2 0 1 0 .001 3.999A2 2 0 0 0 17 18ZM6 4H3v2h2l3.6 7.6L7.2 16A2 2 0 0 0 9 19h10v-2H9.4l1.1-2H17a2 2 0 0 0 1.8-1.1l3.2-6.4H7.4L6.6 4Z"/></svg>243      </div>244      <div class="icon" aria-label="More">245        <svg viewBox="0 0 24 24"><circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/></svg>246      </div>247    </div>248  </div>249 250  <!-- Scrollable Content -->251  <div class="content">252    <!-- Verified Customer Feedback -->253    <div class="section-title">Verified customer feedback</div>254    <div class="card feedback-card">255      <svg width="86" height="86" viewBox="0 0 24 24" fill="#CFCFCF" aria-hidden="true">256        <path d="M4 4h16v12H7l-3 3V4z" opacity="0.6"></path>257        <path d="M12 6l1.2 2.4L16 9l-2 1.6.7 2.6L12 12.4 9.3 13l.7-2.6L8 9l2.8-.6L12 6z" fill="#BDBDBD"></path>258      </svg>259      <div style="font-size:30px; color:#777;">This product has no ratings yet.</div>260    </div>261 262    <!-- You may also like -->263    <div class="section-title" style="margin-top:36px;">You may also like</div>264    <div class="carousel">265      <div class="card product-card">266        <div class="image-placeholder">[IMG: Laptop]</div>267        <div class="product-title">Apple MacBook Air M2 13-inch</div>268        <div class="product-price">EGP 71,700.00</div>269      </div>270      <div class="card product-card">271        <div class="image-placeholder">[IMG: Laptop]</div>272        <div class="product-title">Apple MacBook Air M2 13-inch</div>273        <div class="product-price">EGP 71,700.00</div>274      </div>275      <div class="card product-card">276        <div class="image-placeholder">[IMG: Laptop]</div>277        <div class="product-title">Apple MacBook Air M2 13-inch</div>278        <div class="product-price">EGP 71,700.00</div>279      </div>280    </div>281 282    <!-- Seller Information -->283    <div class="section-title" style="margin-top:34px;">Seller information</div>284    <div class="card seller-section">285      <div class="seller-card">286        <div class="seller-row">287          <div style="display:flex; align-items:center; gap:12px;">288            <div class="seller-name">Techmart Marketplace</div>289            <svg class="chevron" viewBox="0 0 24 24"><path d="M9 6l6 6-6 6" stroke="#999" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>290          </div>291          <button class="follow-btn">FOLLOW</button>292        </div>293        <div class="seller-meta">294          <div><strong style="color:#222;">66%</strong> Seller Score</div>295          <div><strong style="color:#222;">382</strong> Followers</div>296        </div>297      </div>298    </div>299 300    <!-- Spacer to show content above bottom bar -->301    <div style="height: 120px;"></div>302  </div>303 304  <!-- Bottom Action Bar -->305  <div class="bottom-bar">306    <div class="bottom-actions">307      <div class="mini-btn" aria-label="Home">308        <svg viewBox="0 0 24 24"><path d="M4 10l8-6 8 6v10a1 1 0 0 1-1 1h-5v-7H10v7H5a1 1 0 0 1-1-1V10z"/></svg>309      </div>310      <div class="mini-btn" aria-label="Call">311        <svg viewBox="0 0 24 24"><path d="M6.6 10.8a15 15 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25 11 11 0 0 0 3.5.6 1 1 0 0 1 1 1V20a2 2 0 0 1-2.2 2A18 18 0 0 1 2 6.2 2 2 0 0 1 4 4h2.4a1 1 0 0 1 1 1 11 11 0 0 0 .6 3.5 1 1 0 0 1-.24 1l-2.16 1.3z"/></svg>312      </div>313      <div class="mini-btn filled" aria-label="Cart">314        <svg viewBox="0 0 24 24"><path d="M7 18a2 2 0 1 0 0 4 2 2 0 0 0 0-4Zm10 0a2 2 0 1 0 .001 3.999A2 2 0 0 0 17 18ZM6 4H3v2h2l3.6 7.6L7.2 16A2 2 0 0 0 9 19h10v-2H9.4l1.1-2H17a2 2 0 0 0 1.8-1.1l3.2-6.4H7.4L6.6 4Z" fill="#fff"/></svg>315      </div>316      <div class="cta">ADD TO CART</div>317    </div>318  </div>319 320</div>321</body>322</html>