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>Red Tape Product Page</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: #222; }9  #render-target {10    width: 1080px; height: 2400px; position: relative; overflow: hidden;11    background: #ffffff; border-radius: 28px;12  }13 14  /* Status bar */15  .status-bar {16    height: 110px; padding: 0 40px; display: flex; align-items: center; justify-content: space-between; color: #444;17    font-size: 42px; letter-spacing: 1px;18  }19  .status-icons { display: flex; gap: 30px; align-items: center; }20  .icon { width: 48px; height: 48px; }21 22  /* Header */23  .header {24    height: 120px; display: flex; align-items: center; padding: 0 30px; border-bottom: 1px solid #e8e8e8;25  }26  .back { width: 80px; height: 80px; display: flex; align-items: center; justify-content: center; }27  .title { font-size: 56px; font-weight: 700; margin-left: 15px; }28  .header-actions { margin-left: auto; display: flex; gap: 40px; align-items: center; padding-right: 20px; }29  .header-action { width: 64px; height: 64px; }30 31  /* Ad card */32  .ad-card {33    height: 150px; display: flex; align-items: center; gap: 24px; padding: 20px 30px; border-bottom: 1px solid #e8e8e8;34    background: #fff;35  }36  .thumb {37    width: 110px; height: 110px; background: #E0E0E0; border: 1px solid #BDBDBD; display: flex; justify-content: center; align-items: center; color: #757575; font-size: 28px;38    border-radius: 8px;39  }40  .ad-text { line-height: 1.2; }41  .ad-title { font-size: 34px; color: #555; }42  .ad-sub { font-size: 36px; font-weight: 600; color: #333; margin-top: 6px; }43  .ad-price { font-size: 32px; color: #8e8e8e; margin-top: 8px; }44  .strike { text-decoration: line-through; margin-right: 10px; }45  .ad-off { color: #ff3f6c; font-weight: 700; margin-left: 10px; }46  .ad-badge {47    margin-left: auto; font-size: 26px; color: #777; border: 1px solid #ddd; border-radius: 8px; padding: 8px 14px; background: #f7f7f7;48  }49 50  /* Hero image */51  .hero-wrap { position: relative; }52  .hero {53    width: 1080px; height: 980px; background: #E0E0E0; border: 1px solid #BDBDBD; display: flex; justify-content: center; align-items: center; color: #757575; font-size: 40px;54  }55  .ribbon {56    position: absolute; top: 30px; left: 30px; background: #ff6f8d; color: #fff; font-weight: 700; font-size: 28px;57    padding: 14px 18px; border-radius: 8px;58  }59  .rating-pill {60    position: absolute; right: 30px; bottom: 30px; background: #ffffff; border: 1px solid #ddd; border-radius: 40px;61    padding: 18px 26px; display: flex; align-items: center; gap: 14px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); font-size: 34px;62  }63  .star { width: 32px; height: 32px; }64  .rating-score { font-weight: 700; }65  .rating-count { color: #666; }66 67  /* Dots indicator */68  .dots { display: flex; justify-content: center; gap: 16px; margin: 20px 0; }69  .dot { width: 18px; height: 18px; background: #d0d0d0; border-radius: 50%; }70  .dot.active { background: #9e9e9e; }71 72  /* Product info */73  .product-info { padding: 0 30px 20px 30px; }74  .product-line {75    display: flex; align-items: flex-start; justify-content: space-between; gap: 20px;76  }77  .product-title {78    font-size: 44px; font-weight: 700; color: #222; line-height: 1.25;79  }80  .brand-link { color: #ff3f6c; font-weight: 700; font-size: 36px; white-space: nowrap; padding-top: 6px; }81  .price-row { margin-top: 18px; font-size: 36px; color: #666; }82  .new-price { color: #111; font-weight: 800; margin-left: 12px; }83  .discount { color: #ff6f00; font-weight: 700; margin-left: 12px; }84 85  /* Buttons */86  .actions {87    position: absolute; left: 0; right: 0; bottom: 120px;88    display: flex; gap: 24px; padding: 0 30px;89  }90  .btn {91    height: 120px; border-radius: 14px; font-size: 40px; font-weight: 800; display: flex; align-items: center; justify-content: center; gap: 18px;92  }93  .btn-outline {94    flex: 1; border: 2px solid #e2e2e2; color: #222; background: #fff;95  }96  .btn-primary {97    flex: 1.3; background: #ff3f6c; color: #fff; border: none;98  }99  .btn svg { width: 48px; height: 48px; }100 101  /* Gesture bar */102  .gesture {103    position: absolute; left: 50%; transform: translateX(-50%);104    bottom: 40px; width: 220px; height: 14px; background: #d9d9d9; border-radius: 10px;105  }106</style>107</head>108<body>109<div id="render-target">110 111  <!-- Status bar -->112  <div class="status-bar">113    <div>12:46</div>114    <div class="status-icons">115      <!-- wifi -->116      <svg class="icon" viewBox="0 0 24 24">117        <path d="M12 18a2 2 0 1 0 0.001 0z" fill="#666"/>118        <path d="M2 9c5-5 15-5 20 0" stroke="#666" stroke-width="2" fill="none"/>119        <path d="M5 12c4-4 10-4 14 0" stroke="#666" stroke-width="2" fill="none"/>120        <path d="M8 15c2-2 6-2 8 0" stroke="#666" stroke-width="2" fill="none"/>121      </svg>122      <!-- battery -->123      <svg class="icon" viewBox="0 0 26 26">124        <rect x="1" y="6" width="18" height="12" rx="2" ry="2" stroke="#666" stroke-width="2" fill="none"/>125        <rect x="3" y="8" width="12" height="8" fill="#666"/>126        <rect x="20" y="10" width="4" height="4" fill="#666"/>127      </svg>128    </div>129  </div>130 131  <!-- Header -->132  <div class="header">133    <div class="back">134      <svg class="icon" viewBox="0 0 24 24">135        <path d="M15 19L8 12l7-7" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>136      </svg>137    </div>138    <div class="title">Red Tape</div>139    <div class="header-actions">140      <!-- share -->141      <svg class="header-action" viewBox="0 0 24 24">142        <circle cx="18" cy="5" r="3" stroke="#333" stroke-width="2" fill="none"/>143        <circle cx="6" cy="12" r="3" stroke="#333" stroke-width="2" fill="none"/>144        <circle cx="18" cy="19" r="3" stroke="#333" stroke-width="2" fill="none"/>145        <path d="M8.8 11l6.4-4M8.8 13l6.4 4" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round"/>146      </svg>147      <!-- heart -->148      <svg class="header-action" viewBox="0 0 24 24">149        <path d="M12 21s-7-4.4-9-8.2C1.3 9.5 3.3 7 6 7c2 0 3.2 1.1 4 2.3C10.8 8.1 12 7 14 7c2.7 0 4.7 2.5 3 5.8C19 16.6 12 21 12 21z" stroke="#333" stroke-width="2" fill="none" stroke-linejoin="round"/>150      </svg>151      <!-- bag -->152      <svg class="header-action" viewBox="0 0 24 24">153        <path d="M6 8h12l-1 12H7L6 8z" stroke="#333" stroke-width="2" fill="none"/>154        <path d="M9 8V6a3 3 0 0 1 6 0v2" stroke="#333" stroke-width="2" fill="none"/>155      </svg>156    </div>157  </div>158 159  <!-- Ad Card -->160  <div class="ad-card">161    <div class="thumb">[IMG: Small Sneaker]</div>162    <div class="ad-text">163      <div class="ad-title">Azzaro Black</div>164      <div class="ad-sub">Men Colourblocked Lightweight Sneakers</div>165      <div class="ad-price"><span class="strike">₹2,799</span><span style="color:#111;font-weight:800;">₹727</span> <span class="ad-off">74% Off</span></div>166    </div>167    <div class="ad-badge">AD</div>168  </div>169 170  <!-- Hero image with overlays -->171  <div class="hero-wrap">172    <div class="hero">[IMG: White Mid-Top Sneakers on wooden surface]</div>173    <div class="ribbon">NEW</div>174    <div class="rating-pill">175      <span class="rating-score">4.5</span>176      <svg class="star" viewBox="0 0 24 24">177        <path d="M12 2l3 7h7l-5.5 4 2 7-6.5-4.5L5.5 20l2-7L2 9h7z" fill="#2ecc71"/>178      </svg>179      <span class="rating-count">461</span>180    </div>181  </div>182 183  <!-- Dots -->184  <div class="dots">185    <div class="dot"></div><div class="dot"></div><div class="dot active"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div>186  </div>187 188  <!-- Product info -->189  <div class="product-info">190    <div class="product-line">191      <div class="product-title">Red Tape Men Perforations PU Mid-Top Sneakers</div>192      <div class="brand-link">Explore Brand</div>193    </div>194    <div class="price-row">MRP <span class="strike">₹5,599</span><span class="new-price">₹1,119</span> <span class="discount">(80% OFF)</span></div>195  </div>196 197  <!-- Buttons -->198  <div class="actions">199    <button class="btn btn-outline">200      <svg viewBox="0 0 24 24">201        <path d="M12 21s-7-4.4-9-8.2C1.3 9.5 3.3 7 6 7c2 0 3.2 1.1 4 2.3C10.8 8.1 12 7 14 7c2.7 0 4.7 2.5 3 5.8C19 16.6 12 21 12 21z" stroke="#333" stroke-width="2" fill="none" stroke-linejoin="round"/>202      </svg>203      WISHLIST204    </button>205    <button class="btn btn-primary">206      <svg viewBox="0 0 24 24">207        <path d="M6 8h12l-1 12H7L6 8z" stroke="#fff" stroke-width="2" fill="none"/>208        <path d="M9 8V6a3 3 0 0 1 6 0v2" stroke="#fff" stroke-width="2" fill="none"/>209      </svg>210      ADD TO BAG211    </button>212  </div>213 214  <!-- Gesture bar -->215  <div class="gesture"></div>216 217</div>218</body>219</html>