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 Detail - Locks</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; }9  #render-target {10    width: 1080px; height: 2400px; position: relative; overflow: hidden;11    background: #141414; color: #EDEDED;12  }13 14  /* Status bar */15  .status-bar { position: absolute; top: 24px; left: 32px; right: 32px; height: 60px; }16  .status-left { position: absolute; left: 0; top: 0; font-size: 34px; color: #FFFFFF; }17  .status-right { position: absolute; right: 0; top: 0; display: flex; align-items: center; gap: 24px; color: #FFFFFF; }18  .status-right span { font-size: 30px; opacity: 0.9; }19 20  /* Top actions */21  .top-actions { position: absolute; top: 200px; left: 32px; right: 32px; height: 72px; display: flex; align-items: center; justify-content: space-between; }22  .icon { width: 56px; height: 56px; display: inline-flex; align-items: center; justify-content: center; }23  .icon svg { width: 44px; height: 44px; stroke: #FFFFFF; fill: none; stroke-width: 3.5; opacity: 0.95; }24  .back-icon svg { stroke-width: 5; }25  .actions-right { display: flex; gap: 44px; }26 27  /* Favorite */28  .favorite { position: absolute; top: 420px; right: 40px; width: 100px; height: 100px; border-radius: 50%; background: rgba(255,255,255,0.06); border: 2px solid rgba(255,255,255,0.25); display: flex; align-items: center; justify-content: center; }29  .favorite svg { width: 56px; height: 56px; stroke: #CCCCCC; fill: none; stroke-width: 4; }30 31  /* Product image placeholder */32  .product-image {33    position: absolute; left: 0; right: 0; top: 380px; height: 700px;34    background: #E0E0E0; border-top: 1px solid #BDBDBD; border-bottom: 1px solid #BDBDBD;35    display: flex; align-items: center; justify-content: center; color: #757575; font-size: 36px; letter-spacing: 0.5px;36  }37 38  /* Carousel dots */39  .dots { position: absolute; top: 1110px; left: 0; right: 0; display: flex; justify-content: center; gap: 22px; }40  .dot { width: 26px; height: 26px; border-radius: 13px; background: #6E6E6E; opacity: 0.8; }41  .dot.active { width: 64px; border-radius: 13px; background: #FFFFFF; opacity: 1; }42 43  /* Details section */44  .details { position: absolute; top: 1180px; left: 48px; right: 48px; }45  .rating-row { display: flex; align-items: center; gap: 18px; color: #B9B9B9; font-size: 34px; }46  .rating-value { color: #FFFFFF; font-weight: 700; }47  .star { width: 34px; height: 34px; background: #15D287; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; }48  .star svg { width: 26px; height: 26px; fill: #ffffff; stroke: none; }49 50  .title { margin-top: 36px; font-size: 58px; font-weight: 800; line-height: 1.2; color: #F5F5F5; }51  .category { margin-top: 18px; font-size: 34px; color: #A9A9A9; }52 53  .price-row { margin-top: 46px; display: flex; align-items: center; gap: 26px; }54  .price { font-size: 86px; font-weight: 800; color: #FFFFFF; }55  .old-price { font-size: 42px; color: #8A8A8A; text-decoration: line-through; }56  .discount { font-size: 34px; color: #D3D3D3; border: 2px solid #5A5A5A; padding: 16px 22px; border-radius: 16px; }57 58  /* Bottom add to cart bar */59  .add-bar {60    position: absolute; left: 0; right: 0; bottom: 0; height: 220px;61    background: rgba(0,0,0,0.45);62    display: flex; align-items: center; justify-content: center;63    padding: 0 32px;64  }65  .add-btn {66    width: 1000px; height: 120px; border-radius: 20px; background: #17D7A0;67    color: #0A0A0A; font-size: 42px; font-weight: 800; letter-spacing: 3px;68    display: flex; align-items: center; justify-content: center;69    box-shadow: 0 8px 26px rgba(23,215,160,0.35);70  }71  .home-indicator {72    position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%);73    width: 240px; height: 12px; border-radius: 6px; background: #EDEDED; opacity: 0.85;74  }75</style>76</head>77<body>78<div id="render-target">79 80  <!-- Status bar -->81  <div class="status-bar">82    <div class="status-left">2:11</div>83    <div class="status-right">84      <span>⦸</span>85      <span>◈</span>86      <span>🔋 100%</span>87    </div>88  </div>89 90  <!-- Top actions -->91  <div class="top-actions">92    <div class="icon back-icon">93      <svg viewBox="0 0 24 24"><path d="M15 18l-6-6 6-6"/></svg>94    </div>95    <div class="actions-right">96      <div class="icon">97        <svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"/><path d="M20 20l-4.5-4.5"/></svg>98      </div>99      <div class="icon">100        <svg viewBox="0 0 24 24"><path d="M4 12c5-2 9-4 16-6"/><path d="M14 6l6 0 0 6"/></svg>101      </div>102      <div class="icon">103        <svg viewBox="0 0 24 24"><path d="M3 6h3l2 12h10l2-9H7"/><circle cx="9" cy="20" r="1.5"/><circle cx="17" cy="20" r="1.5"/></svg>104      </div>105    </div>106  </div>107 108  <!-- Favorite -->109  <div class="favorite">110    <svg viewBox="0 0 24 24"><path d="M12 21s-6.5-4.35-8.2-7.22C2.2 11.1 3.5 8 6.6 8c2 0 3.1 1.2 3.4 2 0.3-0.8 1.4-2 3.4-2 3.1 0 4.4 3.1 2.8 5.78C18.5 16.65 12 21 12 21z"/></svg>111  </div>112 113  <!-- Product image -->114  <div class="product-image">[IMG: Gold TSA Locks with Keys]</div>115 116  <!-- Carousel dots -->117  <div class="dots">118    <div class="dot active"></div>119    <div class="dot"></div>120    <div class="dot"></div>121    <div class="dot"></div>122    <div class="dot"></div>123    <div class="dot"></div>124  </div>125 126  <!-- Details -->127  <div class="details">128    <div class="rating-row">129      <div class="rating-value">4.0</div>130      <div class="star">131        <svg viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>132      </div>133      <div>2 ratings</div>134    </div>135 136    <div class="title">TRAVEL BLUE 2 x TSA Lock (23, Gold)</div>137    <div class="category">Locks</div>138 139    <div class="price-row">140      <div class="price">₹599</div>141      <div class="old-price">₹995</div>142      <div class="discount">39.80% OFF</div>143    </div>144  </div>145 146  <!-- Bottom Add to Cart -->147  <div class="add-bar">148    <div class="add-btn">ADD TO CART</div>149    <div class="home-indicator"></div>150  </div>151 152</div>153</body>154</html>