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 Detail UI Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9  #render-target {10    width: 1080px; height: 2400px;11    position: relative; overflow: hidden;12    background: #ffffff;13  }14 15  /* Status bar */16  .status-bar {17    height: 110px;18    background: #EEEEEE;19    color: #333;20    display: flex;21    align-items: center;22    justify-content: space-between;23    padding: 0 40px;24    font-size: 36px;25  }26  .status-icons { display: flex; gap: 28px; align-items: center; }27  .dot { width: 14px; height: 14px; background: #777; border-radius: 50%; display: inline-block; }28 29  /* Top black strip */30  .top-strip { height: 140px; background: #000; }31 32  /* Image area */33  .image-area {34    background: #fff;35    padding: 40px 40px 20px 40px;36  }37  .img-placeholder {38    width: 100%;39    height: 760px;40    background: #E0E0E0;41    border: 1px solid #BDBDBD;42    display: flex; align-items: center; justify-content: center;43    color: #757575; font-size: 36px; font-weight: 600;44  }45  .floating-actions {46    position: absolute; right: 40px; top: 440px; display: flex; flex-direction: column; gap: 28px;47  }48  .circle-btn {49    width: 120px; height: 120px;50    background: #fff; border-radius: 60px;51    box-shadow: 0 6px 16px rgba(0,0,0,0.15);52    display: flex; align-items: center; justify-content: center;53  }54  .carousel-dots { display: flex; gap: 18px; justify-content: center; align-items: center; padding: 22px 0 10px; }55  .carousel-dots span { width: 26px; height: 26px; background: #BDBDBD; border-radius: 13px; }56  .carousel-dots span.active { background: #9E9E9E; }57 58  /* Content */59  .content { padding: 0 40px; }60  .title {61    font-size: 42px; line-height: 1.3; color: #222; margin: 18px 0 24px;62  }63  .price-row { display: flex; align-items: baseline; gap: 18px; margin-bottom: 18px; }64  .discount { color: #00C853; font-weight: 700; font-size: 40px; }65  .strike { color: #9E9E9E; text-decoration: line-through; font-size: 36px; }66  .current { color: #111; font-weight: 800; font-size: 44px; }67 68  .rating-row { display: flex; align-items: center; gap: 18px; margin-bottom: 18px; }69  .ratings-text { color: #757575; font-size: 34px; }70  .alert { color: #E53935; font-size: 36px; font-weight: 700; margin: 16px 0 24px; }71 72  .divider { height: 18px; background: #F1F1F1; margin: 12px -40px 0 -40px; }73 74  .offer-summary {75    display: flex; align-items: baseline; gap: 16px; padding: 28px 0 24px;76    font-size: 40px;77  }78  .offer-summary .price-main { font-weight: 800; color: #111; }79  .offer-summary .price-strike { color: #9E9E9E; text-decoration: line-through; font-size: 36px; }80  .offer-summary .with-offer { color: #00C853; font-size: 36px; }81 82  /* Coupon card */83  .coupon {84    margin: 0 -40px 24px -40px;85    padding: 34px 40px;86    background: #EAF9E9;87    display: flex; align-items: center; justify-content: space-between;88    position: relative;89  }90  .coupon-left { max-width: 700px; }91  .coupon-title { font-size: 40px; font-weight: 800; color: #222; margin-bottom: 12px; }92  .coupon-desc { font-size: 34px; color: #555; }93  .coupon-sep {94    position: absolute; right: 300px; top: 0; bottom: 0;95    border-left: 6px dashed #26A69A;96  }97  .coupon-notch-top, .coupon-notch-bottom {98    position: absolute; right: 300px; width: 34px; height: 34px; background: #fff; border-radius: 50%;99  }100  .coupon-notch-top { top: -17px; }101  .coupon-notch-bottom { bottom: -17px; }102  .apply-btn {103    width: 240px; height: 110px; border: 3px solid #5B45F9; color: #5B45F9;104    background: #fff; border-radius: 20px; font-size: 40px; font-weight: 700;105    display: flex; align-items: center; justify-content: center;106    margin-right: 20px;107  }108 109  /* View similar row */110  .view-similar {111    margin: 0 -40px;112    border-top: 1px solid #E0E0E0; border-bottom: 1px solid #E0E0E0;113    background: #FAFAFA;114    height: 140px;115    display: flex; align-items: center; justify-content: center; gap: 18px;116    font-size: 40px; color: #333; font-weight: 700;117  }118 119  /* Bottom action bar */120  .bottom-bar {121    position: absolute; left: 0; right: 0; bottom: 70px;122    padding: 24px 36px;123    display: flex; gap: 28px;124  }125  .btn {126    height: 130px; border-radius: 24px; font-size: 42px; font-weight: 800;127    display: flex; align-items: center; justify-content: center; flex: 1;128    box-shadow: 0 6px 12px rgba(0,0,0,0.08);129  }130  .btn-outline {131    background: #fff; color: #5B45F9; border: 3px solid #5B45F9;132  }133  .btn-primary {134    background: #5B45F9; color: #fff; border: 3px solid #5B45F9;135  }136 137  /* Home indicator */138  .home-indicator {139    position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%);140    width: 360px; height: 12px; background: #D0D0D0; border-radius: 6px;141  }142</style>143</head>144<body>145<div id="render-target">146 147  <!-- Status bar -->148  <div class="status-bar">149    <div>8:51</div>150    <div class="status-icons">151      <span class="dot"></span>152      <span class="dot"></span>153      <span class="dot"></span>154      <span class="dot"></span>155      <span class="dot"></span>156    </div>157  </div>158 159  <div class="top-strip"></div>160 161  <!-- Image area -->162  <div class="image-area">163    <div class="img-placeholder">[IMG: Yellow speed hurdles product]</div>164 165    <!-- Floating heart/share -->166    <div class="floating-actions">167      <div class="circle-btn">168        <svg width="56" height="56" viewBox="0 0 24 24">169          <path d="M12 21s-6.7-4.3-9.3-7.3C1 12.9 1 10.4 2.6 8.9c1.7-1.5 4.3-1.2 5.7.6L12 12l3.7-2.5c1.5-1.8 4-2.1 5.7-.6 1.6 1.5 1.6 4 0 4.8C18.7 16.7 12 21 12 21z" fill="#555"/>170        </svg>171      </div>172      <div class="circle-btn">173        <svg width="56" height="56" viewBox="0 0 24 24">174          <path d="M18 8l-6-6v4H8c-3.3 0-6 2.7-6 6v8h4v-8c0-1.1.9-2 2-2h4v4l6-6z" fill="#555"/>175        </svg>176      </div>177    </div>178 179    <!-- Carousel dots -->180    <div class="carousel-dots">181      <span class="active"></span>182      <span></span>183    </div>184  </div>185 186  <!-- Content -->187  <div class="content">188    <div class="title">PEPUP PVC (Polyvinyl Chloride) Speed Hurdles (For Children, Adults Pack of Pack of 6)</div>189 190    <div class="price-row">191      <div class="discount">33% off</div>192      <div class="strike">1,099</div>193      <div class="current">₹729</div>194    </div>195 196    <div class="rating-row">197      <div style="display:flex; gap:6px;">198        <svg width="40" height="40" viewBox="0 0 24 24">199          <path d="M12 17.3l-5.3 3 1-5.8-4.2-4.1 5.8-.9L12 3l2.6 5.5 5.8.9-4.2 4.1 1 5.8z" fill="#00C853"/>200        </svg>201        <svg width="40" height="40" viewBox="0 0 24 24">202          <path d="M12 17.3l-5.3 3 1-5.8-4.2-4.1 5.8-.9L12 3l2.6 5.5 5.8.9-4.2 4.1 1 5.8z" fill="#00C853"/>203        </svg>204        <svg width="40" height="40" viewBox="0 0 24 24">205          <path d="M12 17.3l-5.3 3 1-5.8-4.2-4.1 5.8-.9L12 3l2.6 5.5 5.8.9-4.2 4.1 1 5.8z" fill="#00C853"/>206        </svg>207        <svg width="40" height="40" viewBox="0 0 24 24">208          <path d="M12 17.3l-5.3 3 1-5.8-4.2-4.1 5.8-.9L12 3l2.6 5.5 5.8.9-4.2 4.1 1 5.8z" fill="#00C853"/>209        </svg>210        <svg width="40" height="40" viewBox="0 0 24 24">211          <path d="M12 17.3l-5.3 3 1-5.8-4.2-4.1 5.8-.9L12 3l2.6 5.5 5.8.9-4.2 4.1 1 5.8z" fill="#00C853"/>212        </svg>213      </div>214      <div class="ratings-text">40 ratings</div>215    </div>216 217    <div class="alert">Hurry, Only 4 left!</div>218 219    <div class="divider"></div>220 221    <div class="offer-summary">222      <div class="price-main">₹689</div>223      <div class="price-strike">₹729</div>224      <div class="with-offer">with 1 offer</div>225    </div>226 227    <div class="coupon">228      <div class="coupon-left">229        <div class="coupon-title">Flat ₹40 off</div>230        <div class="coupon-desc">Apply cashback coupon for instant savings</div>231      </div>232      <div class="coupon-sep"></div>233      <div class="coupon-notch-top"></div>234      <div class="coupon-notch-bottom"></div>235      <div class="apply-btn">Apply</div>236    </div>237 238    <div class="view-similar">239      <svg width="48" height="48" viewBox="0 0 24 24">240        <path d="M3 10v4l6 3V7L3 10zm8 8l10-4V10L11 6v12z" fill="#777"/>241      </svg>242      <span>View Similar</span>243    </div>244  </div>245 246  <!-- Bottom controls -->247  <div class="bottom-bar">248    <div class="btn btn-outline">Add to cart</div>249    <div class="btn btn-primary">Buy Now</div>250  </div>251 252  <div class="home-indicator"></div>253</div>254</body>255</html>