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 - Flash Deal</title>7<style>8  :root { --dark:#2f2f38; --text:#222; --muted:#757575; --primary:#ff4b2b; --orange:#ff8a00; --bg:#f7f7f7; }9  * { box-sizing: border-box; }10  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }11  #render-target {12    position: relative; overflow: hidden;13    width: 1080px; height: 2400px;14    background: #ffffff; border-radius: 0;15  }16 17  /* Top system bar + app bar */18  .status-bar { height: 86px; background: var(--dark); color: #fff; padding: 0 36px; display: flex; align-items: center; justify-content: space-between; font-size: 34px; }19  .status-left { letter-spacing: 1px; }20  .status-right { display: flex; gap: 18px; align-items: center; }21 22  .app-bar { height: 120px; background: var(--dark); display: flex; align-items: center; justify-content: space-between; padding: 0 36px; color: #fff; }23  .app-actions { display: flex; gap: 44px; align-items: center; }24 25  .icon { width: 52px; height: 52px; display: inline-flex; align-items: center; justify-content: center; }26  .icon svg { width: 52px; height: 52px; fill: none; stroke: #fff; stroke-width: 40; stroke-linecap: round; stroke-linejoin: round; }27 28  /* Product hero */29  .hero {30    background: #e9f2f2;31    height: 760px;32    display: flex; align-items: center; justify-content: center;33    border-bottom: 1px solid #e0e0e0;34  }35  .img-ph {36    width: 800px; height: 640px;37    background: #E0E0E0; border: 1px solid #BDBDBD;38    color: #757575; display: flex; align-items: center; justify-content: center;39    font-size: 34px; text-align: center; padding: 20px;40  }41 42  /* Flash deals banner */43  .flash-banner {44    height: 170px;45    background: linear-gradient(90deg, #ff3b30 0%, #ff5a32 35%, #ff8a00 100%);46    display: flex; align-items: center; justify-content: space-between;47    color: #fff; padding: 0 36px;48  }49  .flash-left { display: flex; align-items: center; gap: 20px; font-size: 46px; font-weight: 700; }50  .flash-left .bolt svg { width: 56px; height: 56px; stroke: #fff; stroke-width: 50; fill: none; }51  .flash-right { display: flex; align-items: center; gap: 16px; }52  .flash-right .lbl { background: rgba(255,255,255,0.2); padding: 18px 26px; border-radius: 24px; font-weight: 700; }53  .timer { display: flex; gap: 10px; }54  .timer .box { min-width: 90px; height: 70px; background: #fff; color: #ff6b00; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-weight: 800; }55 56  /* Pricing block */57  .content { padding: 34px 36px; }58  .price-row { display: flex; align-items: flex-start; justify-content: space-between; }59  .price-main { display: flex; align-items: baseline; gap: 20px; }60  .price { font-size: 72px; font-weight: 800; color: #111; }61  .old-price { font-size: 36px; color: #9e9e9e; text-decoration: line-through; }62  .discount { font-size: 36px; color: #ff6b00; font-weight: 700; }63  .right-mini { display: flex; align-items: center; gap: 36px; color: #444; }64  .mini-item { display: flex; flex-direction: column; align-items: center; font-size: 28px; }65  .mini-item .icon svg { stroke: #444; }66  .lowest { margin-top: 10px; color: #ff6b00; font-size: 34px; display: flex; align-items: center; gap: 10px; }67 68  .title { margin-top: 26px; font-size: 42px; line-height: 54px; color: var(--text); font-weight: 700; }69  .rating { margin-top: 18px; display: flex; align-items: center; gap: 16px; color: #555; font-size: 32px; }70  .stars { display: flex; gap: 6px; }71  .stars svg { width: 36px; height: 36px; }72 73  /* Ship From card */74  .ship-card {75    margin-top: 26px; background: #fff; border: 1px solid #e4e4e4; border-radius: 24px;76    padding: 34px; box-shadow: 0 2px 6px rgba(0,0,0,0.05); display: flex; align-items: center; justify-content: space-between;77  }78  .ship-from { display: flex; flex-direction: column; gap: 6px; }79  .ship-from .label { color: #777; font-size: 34px; }80  .ship-from .value { font-size: 44px; font-weight: 800; }81 82  /* Skeleton placeholders */83  .skeleton { margin-top: 30px; }84  .sk { height: 90px; background: #ececec; border-radius: 8px; margin-bottom: 26px; }85  .sk.small { width: 60%; height: 70px; }86 87  /* Bottom home indicator */88  .home-indicator {89    position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%);90    width: 280px; height: 14px; background: #c7c7c7; border-radius: 10px;91  }92</style>93</head>94<body>95<div id="render-target">96 97  <!-- System status bar -->98  <div class="status-bar">99    <div class="status-left">2:59</div>100    <div class="status-right">101      <span>◦</span><span>◦</span><span>◦</span>102    </div>103  </div>104 105  <!-- App navigation bar -->106  <div class="app-bar">107    <div class="icon" title="Back">108      <svg viewBox="0 0 512 512"><path d="M320 96L160 256l160 160"/></svg>109    </div>110    <div class="app-actions">111      <div class="icon" title="Cart">112        <svg viewBox="0 0 512 512"><path d="M96 128h336l-32 160H160L128 96H64"/><circle cx="208" cy="416" r="24" stroke="none" fill="#fff"/><circle cx="352" cy="416" r="24" stroke="none" fill="#fff"/></svg>113      </div>114      <div class="icon" title="Share">115        <svg viewBox="0 0 512 512"><path d="M256 320V128M256 128l80 80M256 128l-80 80"/><path d="M128 384h256v0"/></svg>116      </div>117      <div class="icon" title="More">118        <svg viewBox="0 0 512 512"><circle cx="128" cy="256" r="24" stroke="#fff" fill="#fff"/><circle cx="256" cy="256" r="24" stroke="#fff" fill="#fff"/><circle cx="384" cy="256" r="24" stroke="#fff" fill="#fff"/></svg>119      </div>120    </div>121  </div>122 123  <!-- Product hero image -->124  <div class="hero">125    <div class="img-ph">[IMG: Portable mini juicer with strawberries in glass cup]</div>126  </div>127 128  <!-- Flash deals banner -->129  <div class="flash-banner">130    <div class="flash-left">131      <span class="bolt">132        <svg viewBox="0 0 512 512"><path d="M288 32L128 288h128l-32 192L384 256H256z"/></svg>133      </span>134      <span>Flash Deals</span>135    </div>136    <div class="flash-right">137      <div class="lbl">Ends in</div>138      <div class="timer">139        <div class="box">86 d</div>140        <div class="box">06</div>141        <div class="box">30</div>142        <div class="box">40</div>143      </div>144    </div>145  </div>146 147  <!-- Content -->148  <div class="content">149    <div class="price-row">150      <div>151        <div class="price-main">152          <div class="price">₹2,502.74</div>153          <div class="old-price">₹4,205.44</div>154          <div class="discount">-41%</div>155        </div>156        <div class="lowest">↘ Lowest price in 175 days</div>157      </div>158      <div class="right-mini">159        <div class="mini-item">160          <div class="icon">161            <svg viewBox="0 0 512 512"><path d="M256 448V192M192 256l64-64 64 64"/><path d="M96 192v224h320V192"/></svg>162          </div>163          <div style="font-size:28px;color:#666;">Price Alert</div>164        </div>165        <div class="mini-item">166          <div class="icon">167            <svg viewBox="0 0 512 512"><path d="M256 432s-160-96-160-224a96 96 0 0 1 176-56 96 96 0 0 1 176 56c0 128-192 224-192 224z"/></svg>168          </div>169          <div style="font-size:28px;color:#666;">133</div>170        </div>171      </div>172    </div>173 174    <div class="title">175      XIAOMI Mijia Portable Juicer Mixer Electric Mini Blender Fruit Vegetables Quick Juicing Kitchen Food Processor Fitness Travel176    </div>177 178    <div class="rating">179      <div class="stars">180        <svg viewBox="0 0 24 24" fill="#ffb400"><path d="M12 2l3.1 6.3L22 9l-5 4.9L18.2 21 12 17.8 5.8 21 7 13.9 2 9l6.9-0.7z"/></svg>181        <svg viewBox="0 0 24 24" fill="#ffb400"><path d="M12 2l3.1 6.3L22 9l-5 4.9L18.2 21 12 17.8 5.8 21 7 13.9 2 9l6.9-0.7z"/></svg>182        <svg viewBox="0 0 24 24" fill="#ffb400"><path d="M12 2l3.1 6.3L22 9l-5 4.9L18.2 21 12 17.8 5.8 21 7 13.9 2 9l6.9-0.7z"/></svg>183        <svg viewBox="0 0 24 24" fill="#ffb400"><path d="M12 2l3.1 6.3L22 9l-5 4.9L18.2 21 12 17.8 5.8 21 7 13.9 2 9l6.9-0.7z"/></svg>184        <svg viewBox="0 0 24 24"><defs><linearGradient id="half"><stop offset="50%" stop-color="#ffb400"/><stop offset="50%" stop-color="#ddd"/></linearGradient></defs><path d="M12 2l3.1 6.3L22 9l-5 4.9L18.2 21 12 17.8 5.8 21 7 13.9 2 9l6.9-0.7z" fill="url(#half)"/></svg>185      </div>186      <span>(14)</span>187      <span>|</span>188      <span>106 Sold</span>189    </div>190 191    <div class="ship-card">192      <div class="ship-from">193        <div class="label">Ship From</div>194        <div class="value">CN</div>195      </div>196      <div class="icon">197        <svg viewBox="0 0 512 512"><path d="M192 96l160 160-160 160"/></svg>198      </div>199    </div>200 201    <div class="skeleton">202      <div class="sk"></div>203      <div class="sk small"></div>204    </div>205  </div>206 207  <div class="home-indicator"></div>208</div>209</body>210</html>