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 - Mock</title>7<style>8  body{margin:0;padding:0;background:transparent;font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;color:#222;}9  #render-target{10    width:1080px;height:2400px;position:relative;overflow:hidden;11    background:#ffffff;border-radius:0;12  }13  /* Top App Bar */14  .appbar{15    position:absolute;left:0;top:0;width:100%;height:230px;background:#0A7EA3;color:#fff;16  }17  .status-dots{position:absolute;top:20px;left:36px;height:40px;opacity:.9}18  .toolbar{position:absolute;left:0;right:0;bottom:22px;padding:0 36px;display:flex;align-items:center;gap:26px;}19  .back-btn{width:72px;height:72px;display:flex;align-items:center;justify-content:center;border-radius:36px;cursor:default}20  .search-pill{21    flex:1;height:96px;background:#fff;border-radius:48px;padding:0 36px 0 36px;22    display:flex;align-items:center;gap:22px;color:#6b6b6b;font-size:38px;23    box-shadow:0 2px 0 rgba(0,0,0,0.04);24  }25  .cart{width:84px;height:84px;display:flex;align-items:center;justify-content:center}26  /* Content */27  .content{position:absolute;left:0;top:230px;right:0;bottom:180px;overflow:auto;background:#fff;}28  .section{padding:40px 48px;}29  .title-lg{font-size:56px;font-weight:800;margin:8px 0 28px;}30  .subhead{font-size:36px;font-weight:700;color:#7a7a7a;letter-spacing:.3px;margin-bottom:28px;}31  .info-grid{display:grid;grid-template-columns: 320px 1fr;row-gap:34px;column-gap:28px;}32  .label{font-weight:800;font-size:38px;}33  .value{font-size:38px;color:#555;line-height:1.35;}34  .chip-btn{35    display:inline-flex;align-items:center;gap:18px;border:2px solid #cfd8dc;color:#0A7EA3;36    padding:24px 36px;border-radius:48px;font-size:42px;font-weight:700;background:#fff;37  }38  hr.sep{border:none;border-top:1px solid #e5e5e5;margin:32px 0;}39  .h2{font-size:54px;font-weight:800;margin:12px 0 8px;}40  .muted{font-size:38px;color:#6b6b6b;}41  .link{color:#0A7EA3;font-weight:700;text-decoration:none;}42  .row{display:flex;align-items:center;justify-content:space-between;gap:20px;}43  .article{font-size:38px;font-weight:700;margin-top:28px;}44  .copy-ic{width:64px;height:64px;border-radius:14px;background:#0A7EA3;display:flex;align-items:center;justify-content:center;}45  /* Recommendations */46  .rec-wrap{background:#f6f7f8;padding:36px 0 40px;}47  .rec-title{font-size:54px;font-weight:800;margin:16px 0 24px;padding:0 48px;}48  .cards{display:flex;gap:28px;overflow:auto;padding:0 48px 12px;}49  .card{50    width:300px;background:#fff;border-radius:26px;box-shadow:0 2px 6px rgba(0,0,0,0.06);51    border:1px solid #eee;overflow:hidden;flex:0 0 auto;position:relative;52  }53  .img-ph{54    height:260px;background:#E0E0E0;border-bottom:1px solid #BDBDBD;display:flex;align-items:center;justify-content:center;color:#757575;font-size:34px;text-align:center;padding:0 16px;55  }56  .heart{57    position:absolute;right:18px;top:18px;width:64px;height:64px;border-radius:50%;background:#fff;border:1px solid #e0e0e0;display:flex;align-items:center;justify-content:center;58  }59  .card-body{padding:22px;}60  .card-title{font-size:34px;line-height:1.25;color:#333;}61  /* Bottom bar */62  .bottom-bar{63    position:absolute;left:0;right:0;bottom:0;height:180px;background:#ffffff;border-top:1px solid #e6e6e6;64    display:flex;align-items:center;justify-content:space-between;padding:0 40px;65  }66  .explore{display:flex;flex-direction:column;gap:8px;}67  .explore .small{font-size:34px;color:#6b6b6b;}68  .explore .big{font-size:44px;font-weight:800;color:#0A7EA3;display:flex;align-items:center;gap:12px;}69  .cta{70    background:#0A7EA3;color:#fff;font-size:48px;font-weight:800;padding:28px 64px;border-radius:60px;border:none;71    box-shadow:0 3px 8px rgba(10,126,163,0.25);72  }73  /* helper icons */74  svg{display:block}75</style>76</head>77<body>78<div id="render-target">79  <!-- App Bar -->80  <div class="appbar">81    <div class="toolbar">82      <div class="back-btn" aria-label="Back">83        <svg width="48" height="48" viewBox="0 0 24 24" fill="none">84          <path d="M15.5 19L8.5 12L15.5 5" stroke="#ffffff" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>85        </svg>86      </div>87      <div class="search-pill">88        <svg width="44" height="44" viewBox="0 0 24 24" fill="none">89          <circle cx="11" cy="11" r="7" stroke="#5f6a6f" stroke-width="2"/>90          <path d="M20 20L17 17" stroke="#5f6a6f" stroke-width="2" stroke-linecap="round"/>91        </svg>92        <span>Search JioMart</span>93      </div>94      <div class="cart" aria-label="Cart">95        <svg width="44" height="44" viewBox="0 0 24 24" fill="none">96          <path d="M6 6h15l-2 8H8L6 3H3" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>97          <circle cx="9.5" cy="19.5" r="1.5" fill="#ffffff"/>98          <circle cx="17.5" cy="19.5" r="1.5" fill="#ffffff"/>99        </svg>100      </div>101    </div>102  </div>103 104  <!-- Scrollable Content -->105  <div class="content">106    <div class="section">107      <div class="title-lg">Product Information</div>108      <div class="subhead">GENERAL INFORMATION</div>109      <div class="info-grid">110        <div class="label">Brand</div>111        <div class="value">Tools Titan</div>112 113        <div class="label">Manufacturer</div>114        <div class="value">KALKAJI TRADING</div>115 116        <div class="label">Manufacturer Address</div>117        <div class="value">KALKAJI TRADING<br>30/75, GALI NO.7, BLOCK 30 NEAR DURGA MANDIR VISHWAS NAGAR, East Delhi, Delhi, 110032</div>118 119        <div class="label">Manufacturer Email</div>120        <div class="value">aditya.gupta559@gmail.com</div>121 122        <div class="label">Sold By</div>123        <div class="value">KALKAJI TRADING</div>124      </div>125 126      <div style="height:32px"></div>127      <a href="#" class="chip-btn">128        <span>More Details</span>129      </a>130 131      <hr class="sep">132 133      <div class="h2">Return Policy</div>134      <div class="muted">This product is returnable within 7 days <a href="#" class="link">know more.</a></div>135 136      <hr class="sep">137 138      <div class="row">139        <div class="article">Article ID: RVWWQKRBCZ</div>140        <div class="copy-ic" title="Copy">141          <svg width="34" height="34" viewBox="0 0 24 24" fill="none">142            <rect x="9" y="9" width="11" height="11" rx="2" stroke="#ffffff" stroke-width="2"/>143            <rect x="4" y="4" width="11" height="11" rx="2" stroke="#ffffff" stroke-width="2"/>144          </svg>145        </div>146      </div>147    </div>148 149    <div class="rec-wrap">150      <div class="rec-title">Frequently Bought Together</div>151      <div class="cards">152        <!-- Card 1 -->153        <div class="card">154          <div class="img-ph">[IMG: Yellow/Black Utility Knife Photo]</div>155          <div class="heart">156            <svg width="30" height="30" viewBox="0 0 24 24" fill="none">157              <path d="M12 20s-7-4.5-7-9a4 4 0 0 1 7-2 4 4 0 0 1 7 2c0 4.5-7 9-7 9z" stroke="#888" stroke-width="1.8" fill="none"/>158            </svg>159          </div>160          <div class="card-body">161            <div class="card-title">Implemental Heavy Duty Paper Cutter with 10...</div>162          </div>163        </div>164        <!-- Card 2 -->165        <div class="card">166          <div class="img-ph">[IMG: Bathroom Shelf Dispenser Set Photo]</div>167          <div class="heart">168            <svg width="30" height="30" viewBox="0 0 24 24" fill="none">169              <path d="M12 20s-7-4.5-7-9a4 4 0 0 1 7-2 4 4 0 0 1 7 2c0 4.5-7 9-7 9z" stroke="#888" stroke-width="1.8" fill="none"/>170            </svg>171          </div>172          <div class="card-body">173            <div class="card-title">SHOPITECH COMBO OF 4 PCS Bathroom Shelf...</div>174          </div>175        </div>176        <!-- Card 3 -->177        <div class="card">178          <div class="img-ph">[IMG: Chrome Shower Fixture Photo]</div>179          <div class="heart">180            <svg width="30" height="30" viewBox="0 0 24 24" fill="none">181              <path d="M12 20s-7-4.5-7-9a4 4 0 0 1 7-2 4 4 0 0 1 7 2c0 4.5-7 9-7 9z" stroke="#888" stroke-width="1.8" fill="none"/>182            </svg>183          </div>184          <div class="card-body">185            <div class="card-title">Bathonix Silver Steel, Brass ...</div>186          </div>187        </div>188      </div>189    </div>190 191    <div class="section" style="padding-top:24px;">192      <div class="muted" style="font-size:40px;">Explore More!</div>193    </div>194  </div>195 196  <!-- Bottom Action Bar -->197  <div class="bottom-bar">198    <div class="explore">199      <div class="small">Explore More!</div>200      <div class="big">201        View Categories202        <svg width="34" height="34" viewBox="0 0 24 24" fill="none">203          <path d="M8 5l7 7-7 7" stroke="#0A7EA3" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>204        </svg>205      </div>206    </div>207    <button class="cta">Add to Cart</button>208  </div>209</div>210</body>211</html>