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 Page Mock</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  /* Header */18  .topbar {19    height: 300px;20    background: linear-gradient(135deg, #7ddbd0, #9fe8d9);21    position: relative;22    box-sizing: border-box;23    padding: 26px 32px 0 32px;24  }25  .status {26    display: flex;27    align-items: center;28    justify-content: space-between;29    color: #0b3a3a;30    opacity: .9;31    font-size: 36px;32    padding: 8px 8px 0 8px;33  }34  .status .dots {35    letter-spacing: 8px;36    opacity: .7;37  }38  .status .right-icons {39    display: flex;40    align-items: center;41    gap: 22px;42  }43  .back-btn {44    position: absolute;45    left: 24px;46    bottom: 108px;47    width: 72px;48    height: 72px;49    display: flex;50    align-items: center;51    justify-content: center;52    border-radius: 36px;53    color: #0e615f;54  }55  .search-wrap {56    position: absolute;57    left: 108px;58    right: 36px;59    bottom: 60px;60    height: 96px;61    background: #ffffff;62    border-radius: 20px;63    box-shadow: 0 10px 16px rgba(0,0,0,0.12);64    display: flex;65    align-items: center;66    padding: 0 24px;67    gap: 18px;68  }69  .search-wrap .input {70    flex: 1;71    color: #333;72    font-size: 36px;73    opacity: .95;74  }75  .camera {76    width: 72px; height: 72px;77    border-radius: 16px;78    background: #f3f5f6;79    display: flex; align-items: center; justify-content: center;80  }81 82  /* Content */83  .content {84    padding: 28px 40px 0 40px;85  }86  .divider {87    height: 18px;88    background: #f3f5f6;89    margin: 6px -40px 24px -40px;90  }91  .line {92    height: 2px; background: #E6EAEC; margin: 24px -40px;93  }94  .delivery {95    font-size: 38px;96    color: #6a7b83;97    line-height: 1.5;98  }99  .delivery .free { color: #2db8c0; font-weight: 600; }100  .delivery .strong { color: #2b3a40; font-weight: 700; }101  .delivery .highlight { color: #2ac084; font-weight: 600; }102 103  .link {104    color: #4bb6c2;105    font-size: 38px;106    text-decoration: none;107  }108  .map-row {109    display: flex; align-items: center; gap: 16px; margin-top: 18px;110  }111 112  .stock {113    color: #6bbf59;114    font-size: 48px;115    font-weight: 600;116    margin: 40px 0 22px 0;117  }118 119  .qty {120    width: 220px;121    height: 86px;122    border-radius: 18px;123    background: #ffffff;124    border: 2px solid #E5E8EA;125    box-shadow: 0 6px 10px rgba(0,0,0,0.06);126    display: flex; align-items: center; justify-content: space-between;127    padding: 0 22px; color: #7b8a95; font-size: 34px;128  }129 130  .cta {131    margin-top: 34px;132  }133  .btn-yellow {134    width: 100%;135    height: 128px;136    border-radius: 64px;137    background: #f7e08d;138    color: #5b6166;139    font-size: 44px;140    font-weight: 600;141    display: flex; align-items: center; justify-content: center;142    border: 4px solid #cfeff7;143    box-shadow: 0 0 0 8px #e8fbff inset;144  }145  .btn-orange {146    width: 94%;147    height: 128px;148    border-radius: 64px;149    background: #ffd192;150    color: #5b6166;151    font-size: 44px;152    font-weight: 600;153    display: flex; align-items: center; justify-content: center;154    margin-top: 28px;155    margin-left: 3%;156    border: 1px solid #f2c17c;157  }158  .added-badge {159    position: absolute;160    left: 50%;161    transform: translateX(-50%);162    margin-top: -64px;163    background: #364049;164    color: #ffffff;165    font-size: 40px;166    padding: 18px 28px;167    border-radius: 18px;168    display: inline-flex; align-items: center; gap: 14px;169  }170 171  .small-sec {172    margin-top: 36px;173    color: #8aa3ab;174    font-size: 38px;175  }176  .small-sec .blue { color: #4bb6c2; }177 178  /* Feature row */179  .features {180    display: grid;181    grid-template-columns: repeat(4, 1fr);182    gap: 24px;183    text-align: center;184    padding: 40px 0 30px 0;185  }186  .feature {187    color: #8aa3ab;188    font-size: 32px;189  }190  .feat-ico {191    width: 120px; height: 120px;192    margin: 0 auto 12px auto;193    background: #f6f8f9;194    border: 2px solid #e3e7ea;195    border-radius: 60px;196    display: flex; align-items: center; justify-content: center;197  }198 199  /* Product details header */200  .pd-header {201    font-size: 48px;202    color: #87959c;203    font-weight: 700;204    padding: 28px 0 12px 0;205  }206  .pd-sub {207    font-size: 38px;208    color: #96a7ae;209    padding-bottom: 18px;210    border-bottom: 4px solid #d6e3e7;211  }212 213  /* Bottom Nav */214  .bottom-nav {215    position: absolute;216    left: 0; right: 0; bottom: 90px;217    height: 170px;218    border-top: 2px solid #e6eaec;219    background: #ffffff;220    display: grid;221    grid-template-columns: repeat(5, 1fr);222    align-items: center;223    padding: 0 10px;224  }225  .nav-item {226    text-align: center;227    color: #8aa3ab;228    font-size: 32px;229  }230  .nav-item.active { color: #1f9ea5; }231  .nav-ico {232    width: 64px; height: 64px; margin: 0 auto 8px auto;233  }234 235  .gesture {236    position: absolute;237    bottom: 24px; left: 50%;238    transform: translateX(-50%);239    width: 340px; height: 10px;240    border-radius: 5px; background: #bfc6cc;241    opacity: .8;242  }243</style>244</head>245<body>246<div id="render-target">247  <!-- Header -->248  <div class="topbar">249    <div class="status">250      <div>11:24</div>251      <div class="dots">• • • • •</div>252      <div class="right-icons">253        <!-- Wifi -->254        <svg width="38" height="38" viewBox="0 0 24 24" fill="none">255          <path d="M12 18.5a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3z" fill="#0b3a3a"/>256          <path d="M4 11c4.4-3.7 11.6-3.7 16 0" stroke="#0b3a3a" stroke-width="2" stroke-linecap="round"/>257          <path d="M7 14c3-2.4 7-2.4 10 0" stroke="#0b3a3a" stroke-width="2" stroke-linecap="round"/>258        </svg>259        <!-- Signal -->260        <svg width="38" height="38" viewBox="0 0 24 24" fill="none">261          <rect x="3" y="14" width="3" height="7" fill="#0b3a3a"/>262          <rect x="8" y="11" width="3" height="10" fill="#0b3a3a"/>263          <rect x="13" y="8" width="3" height="13" fill="#0b3a3a"/>264          <rect x="18" y="5" width="3" height="16" fill="#0b3a3a"/>265        </svg>266        <!-- Battery -->267        <svg width="52" height="28" viewBox="0 0 52 28" fill="none">268          <rect x="1" y="5" width="44" height="18" rx="4" stroke="#0b3a3a" stroke-width="2"/>269          <rect x="47" y="10" width="4" height="8" rx="1" fill="#0b3a3a"/>270          <rect x="4" y="8" width="38" height="12" rx="2" fill="#0b3a3a"/>271        </svg>272      </div>273    </div>274    <div class="back-btn">275      <svg width="48" height="48" viewBox="0 0 24 24" fill="none">276        <path d="M15 18l-6-6 6-6" stroke="#0e615f" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>277      </svg>278    </div>279    <div class="search-wrap">280      <svg width="44" height="44" viewBox="0 0 24 24" fill="none">281        <circle cx="11" cy="11" r="7" stroke="#7f8d93" stroke-width="2"/>282        <path d="M20 20l-3-3" stroke="#7f8d93" stroke-width="2" stroke-linecap="round"/>283      </svg>284      <div class="input">formal suit for women</div>285      <div class="camera">286        <svg width="38" height="38" viewBox="0 0 24 24" fill="none">287          <rect x="4" y="6" width="16" height="12" rx="2" stroke="#8ea2a9" stroke-width="2"/>288          <path d="M9 6l1.5-2h3L15 6" stroke="#8ea2a9" stroke-width="2" stroke-linecap="round"/>289          <rect x="9" y="9" width="6" height="6" rx="1" stroke="#8ea2a9" stroke-width="2"/>290        </svg>291      </div>292    </div>293  </div>294 295  <!-- Subtle context cut -->296  <div class="divider"></div>297 298  <!-- Content -->299  <div class="content">300    <div class="delivery">301      <span class="free">FREE delivery</span> <span class="strong">Sunday, 3 September.</span> Details302    </div>303    <div class="delivery" style="margin-top: 12px;">304      Or fastest delivery <span class="strong">Tomorrow, 2 September.</span> Order within <span class="highlight">1 hr 20 mins.</span> Details305    </div>306    <div class="map-row">307      <svg width="40" height="40" viewBox="0 0 24 24" fill="none">308        <path d="M12 22s7-7.2 7-12a7 7 0 1 0-14 0c0 4.8 7 12 7 12z" stroke="#9ab1b8" stroke-width="2"/>309        <circle cx="12" cy="10" r="3" stroke="#9ab1b8" stroke-width="2"/>310      </svg>311      <a class="link" href="#">Select delivery location</a>312    </div>313 314    <div class="stock">In stock</div>315 316    <div class="qty">Qty: 1317      <svg width="26" height="26" viewBox="0 0 24 24" fill="none">318        <path d="M6 9l6 6 6-6" stroke="#7b8a95" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>319      </svg>320    </div>321 322    <div class="cta" style="position: relative;">323      <div class="btn-yellow">Add to Cart</div>324      <div class="btn-orange">Buy Now</div>325      <div class="added-badge">326        <svg width="40" height="40" viewBox="0 0 24 24" fill="none">327          <path d="M5 13l4 4L19 7" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>328        </svg>329        Added to cart330      </div>331    </div>332 333    <div class="small-sec" style="margin-top: 36px;">334      <span>335        <svg width="36" height="36" viewBox="0 0 24 24" fill="none" style="vertical-align: middle;">336          <path d="M6 10v10h12V10" stroke="#c8d3d8" stroke-width="2"/><path d="M4 10l8-6 8 6" stroke="#c8d3d8" stroke-width="2"/>337        </svg>338      </span>339      <a class="link" href="#" style="margin-left: 12px;">Secure transaction</a>340    </div>341 342    <div class="small-sec" style="margin-top: 18px;">343      Sold by <span class="blue">Zolario</span> and <span class="blue">Fulfilled by Amazon.</span>344    </div>345    <div class="small-sec" style="margin-top: 10px;">346      <a class="link" href="#">Add to Wish List</a>347    </div>348 349    <div class="line"></div>350 351    <div class="features">352      <div class="feature">353        <div class="feat-ico">354          <svg width="58" height="58" viewBox="0 0 24 24" fill="none">355            <path d="M3 16h18l-2 5H5l-2-5z" stroke="#c9d2d7" stroke-width="2"/>356            <path d="M5 16V6h14v10" stroke="#c9d2d7" stroke-width="2"/>357          </svg>358        </div>359        Free Delivery360      </div>361      <div class="feature">362        <div class="feat-ico">363          <svg width="58" height="58" viewBox="0 0 24 24" fill="none">364            <rect x="4" y="6" width="16" height="12" rx="2" stroke="#c9d2d7" stroke-width="2"/>365            <path d="M4 12h16" stroke="#c9d2d7" stroke-width="2"/>366          </svg>367        </div>368        Pay on Delivery369      </div>370      <div class="feature">371        <div class="feat-ico">372          <svg width="58" height="58" viewBox="0 0 24 24" fill="none">373            <path d="M4 8h10v10H4z" stroke="#c9d2d7" stroke-width="2"/>374            <path d="M14 12h6v6h-6" stroke="#c9d2d7" stroke-width="2"/>375            <path d="M10 4v4" stroke="#c9d2d7" stroke-width="2"/>376          </svg>377        </div>378        10 days Return & Exchange379      </div>380      <div class="feature">381        <div class="feat-ico">382          <svg width="58" height="58" viewBox="0 0 24 24" fill="none">383            <path d="M3 16h15l3-6H6L3 16z" stroke="#c9d2d7" stroke-width="2"/>384            <circle cx="8" cy="19" r="2" fill="#c9d2d7"/>385            <circle cx="18" cy="19" r="2" fill="#c9d2d7"/>386          </svg>387        </div>388        Amazon Delivered389      </div>390    </div>391 392    <div class="line"></div>393 394    <div class="pd-header">Product Details</div>395    <div class="pd-sub">Material Composition</div>396  </div>397 398  <!-- Bottom Navigation -->399  <div class="bottom-nav">400    <div class="nav-item active">401      <svg class="nav-ico" viewBox="0 0 24 24" fill="none">402        <path d="M4 10l8-6 8 6v8a2 2 0 0 1-2 2h-4a2 2 0 0 1-2-2v-4H8v4a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-8z" stroke="#1f9ea5" stroke-width="2"/>403      </svg>404      Home405    </div>406    <div class="nav-item">407      <svg class="nav-ico" viewBox="0 0 24 24" fill="none">408        <circle cx="12" cy="8" r="4" stroke="#8aa3ab" stroke-width="2"/>409        <path d="M4 20c2-4 6-6 8-6s6 2 8 6" stroke="#8aa3ab" stroke-width="2"/>410      </svg>411      You412    </div>413    <div class="nav-item">414      <svg class="nav-ico" viewBox="0 0 24 24" fill="none">415        <path d="M12 6v12M6 12h12" stroke="#8aa3ab" stroke-width="2" stroke-linecap="round"/>416      </svg>417      More418    </div>419    <div class="nav-item">420      <svg class="nav-ico" viewBox="0 0 24 24" fill="none">421        <path d="M6 6h14l-2 10H6L5 6h1z" stroke="#8aa3ab" stroke-width="2"/>422        <circle cx="9" cy="20" r="1.6" fill="#8aa3ab"/>423        <circle cx="17" cy="20" r="1.6" fill="#8aa3ab"/>424      </svg>425      Cart426    </div>427    <div class="nav-item">428      <svg class="nav-ico" viewBox="0 0 24 24" fill="none">429        <path d="M3 6h18M3 12h18M3 18h18" stroke="#8aa3ab" stroke-width="2" stroke-linecap="round"/>430      </svg>431      Menu432    </div>433  </div>434 435  <div class="gesture"></div>436</div>437</body>438</html>