GD-ML/AndroidCode
13.4k
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 Mock</title>7<style>8 body { margin:0; padding:0; background: transparent; }9 #render-target{10 width:1080px; height:2400px; position:relative; overflow:hidden;11 background:#ffffff; font-family: Arial, Helvetica, sans-serif; color:#222;12 }13 14 /* Header / status */15 .header {16 height:240px;17 background: linear-gradient(180deg,#7fd6cf 0%, #bdebe6 100%);18 padding:24px 28px 16px 28px;19 box-sizing:border-box;20 }21 .statusbar {22 display:flex; align-items:center; justify-content:space-between;23 color:#2b2b2b; font-size:34px; opacity:.85;24 padding:4px 8px 10px 8px;25 }26 .search-row{27 margin-top:12px;28 display:flex; align-items:center; gap:20px;29 }30 .back-btn{31 width:64px; height:64px; display:flex; align-items:center; justify-content:center;32 border-radius:32px; background:transparent;33 }34 .search-box{35 flex:1;36 height:92px; background:#fff; border-radius:46px;37 box-shadow: 0 4px 10px rgba(0,0,0,0.15);38 display:flex; align-items:center; gap:16px; padding:0 28px; box-sizing:border-box;39 color:#666; font-size:38px;40 }41 .chip-row{42 position:relative;43 margin-top:16px;44 }45 .ad-chip{46 background:#f7f7f7; border-top:1px solid #e6e6e6; border-bottom:1px solid #e6e6e6;47 display:flex; align-items:center; gap:20px; padding:18px 24px;48 font-size:34px;49 }50 .ad-img{51 width:100px; height:100px; background:#E0E0E0; border:1px solid #BDBDBD;52 display:flex; align-items:center; justify-content:center; color:#757575; font-size:24px;53 }54 .price{ color:#c62828; font-weight:bold; }55 .strike{ text-decoration: line-through; color:#9e9e9e; margin-left:8px; }56 57 /* Content */58 .content{ padding:28px; padding-bottom:260px; }59 .author{ color:#0b7c8a; font-size:40px; margin-top:20px; }60 .title{ font-size:64px; font-weight:700; margin:8px 0 8px 0; }61 .part-of{ color:#0b7c8a; font-size:40px; margin-bottom:16px; }62 .rating-row{ display:flex; align-items:center; gap:14px; margin:6px 0 16px 0; }63 .rating-row .count{ color:#555; font-size:34px; }64 .stars svg{ margin-right:3px; }65 66 .image-wrap{67 position:relative; margin-top:8px; background:#fff;68 border-radius:12px; padding:10px 10px 20px 10px;69 }70 .book-img{71 width:900px; height:1100px; margin:0 auto; background:#E0E0E0; border:1px solid #BDBDBD;72 display:flex; align-items:center; justify-content:center; color:#757575; font-size:40px;73 }74 .share-fab{75 position:absolute; right:14px; top:24px; width:96px; height:96px; border-radius:48px;76 background:#fff; border:1px solid #e0e0e0; box-shadow:0 4px 10px rgba(0,0,0,0.15);77 display:flex; align-items:center; justify-content:center;78 }79 .badge{80 position:absolute; left:18px; top:40px; width:128px; height:128px; border-radius:64px;81 background:#a33b00; color:#fff; font-weight:700; display:flex; align-items:center; justify-content:center; 82 font-size:36px;83 }84 .dots{85 display:flex; justify-content:center; gap:22px; margin:22px 0 10px 0;86 }87 .dot{ width:18px; height:18px; border-radius:50%; border:2px solid #cfd8dc; }88 .dot.active{ background:#0f7f87; border-color:#0f7f87; }89 90 /* Options grid */91 .options{92 margin-top:16px;93 border:1px solid #d9d9d9; border-radius:10px; overflow:hidden;94 }95 .grid{96 display:grid; grid-template-columns: 1fr 1fr; width:100%;97 }98 .cell{99 min-height:220px; border-right:1px solid #e2e2e2; border-bottom:1px solid #e2e2e2;100 padding:26px; box-sizing:border-box;101 }102 .cell:nth-child(2n){ border-right:none; }103 .cell h4{ margin:0; font-size:42px; font-weight:600; color:#333; }104 .sub{ color:#6a6a6a; font-size:32px; margin-top:8px; }105 .price-big{ font-size:50px; color:#d32f2f; font-weight:700; margin-top:6px; }106 .selected{107 background:#eaf7f7; border-left:8px solid #ff9100; padding-left:18px;108 }109 110 /* Bottom navigation */111 .bottom-bar{112 position:absolute; left:0; right:0; bottom:0; height:220px; background:#ffffff;113 border-top:1px solid #e3e3e3; display:flex; align-items:center; justify-content:space-around;114 padding-bottom:18px;115 }116 .nav-item{ display:flex; flex-direction:column; align-items:center; gap:10px; color:#687276; font-size:30px; }117 .nav-item.active{ color:#0f7f87; }118 .home-indicator{119 position:absolute; left:50%; transform:translateX(-50%);120 bottom:220px; width:360px; height:14px; background:#c7c7c7; border-radius:8px;121 }122</style>123</head>124<body>125<div id="render-target">126 127 <div class="header">128 <div class="statusbar">129 <div>2:01</div>130 <div>◯ ☾ ✉︎</div>131 </div>132 133 <div class="search-row">134 <div class="back-btn" aria-label="Back">135 <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="#1f1f1f" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">136 <path d="M15 18l-6-6 6-6"/>137 </svg>138 </div>139 <div class="search-box">140 <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#7d7d7d" stroke-width="2">141 <circle cx="11" cy="11" r="7"></circle>142 <path d="M21 21l-4.3-4.3"></path>143 </svg>144 <div style="flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;">145 Twelfth Night by William Shakesp...146 </div>147 <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#707070" stroke-width="2">148 <rect x="3" y="3" width="7" height="7" rx="1"></rect>149 <rect x="14" y="14" width="7" height="7" rx="1"></rect>150 <path d="M14 7h7M3 14h7"></path>151 </svg>152 </div>153 </div>154 155 <div class="chip-row">156 <div class="ad-chip">157 <div class="ad-img">[IMG: Book]</div>158 <div style="flex:1;">159 <div><strong>Metamorphosis (Pocket Classics)</strong></div>160 <div><span class="price">₹83.00</span> <span class="strike">₹129.00</span></div>161 </div>162 </div>163 </div>164 </div>165 166 <div class="content">167 <div class="author">William Shakespeare</div>168 <div class="title">Twelfth Night</div>169 170 <div class="rating-row">171 <div class="stars" aria-label="rating 4.5">172 <svg width="34" height="34" viewBox="0 0 24 24" fill="#ff9800"><path d="M12 17.3l-6.2 3.7 1.7-6.9L2 9.7l7-.6L12 2l3 7.1 7 .6-5.5 4.4 1.7 6.9z"/></svg>173 <svg width="34" height="34" viewBox="0 0 24 24" fill="#ff9800"><path d="M12 17.3l-6.2 3.7 1.7-6.9L2 9.7l7-.6L12 2l3 7.1 7 .6-5.5 4.4 1.7 6.9z"/></svg>174 <svg width="34" height="34" viewBox="0 0 24 24" fill="#ff9800"><path d="M12 17.3l-6.2 3.7 1.7-6.9L2 9.7l7-.6L12 2l3 7.1 7 .6-5.5 4.4 1.7 6.9z"/></svg>175 <svg width="34" height="34" viewBox="0 0 24 24" fill="#ff9800"><path d="M12 17.3l-6.2 3.7 1.7-6.9L2 9.7l7-.6L12 2l3 7.1 7 .6-5.5 4.4 1.7 6.9z"/></svg>176 <svg width="34" height="34" viewBox="0 0 24 24" fill="#ffcc80"><path d="M12 17.3l-6.2 3.7 1.7-6.9L2 9.7l7-.6L12 2l3 7.1 7 .6-5.5 4.4 1.7 6.9z"/></svg>177 </div>178 <div class="count">3,182</div>179 </div>180 181 <div class="part-of">Part of: Shakespeare's Works (1 books)</div>182 183 <div class="image-wrap">184 <div class="badge">34% off</div>185 <div class="book-img">[IMG: Twelfth Night book cover]</div>186 <div class="share-fab" aria-label="Share">187 <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="#5f5f5f" stroke-width="2">188 <circle cx="18" cy="5" r="3"></circle>189 <circle cx="6" cy="12" r="3"></circle>190 <circle cx="18" cy="19" r="3"></circle>191 <path d="M8.6 13.4l6.8 3.2M15.4 7.4L8.6 10.6"></path>192 </svg>193 </div>194 <div class="dots">195 <div class="dot active"></div>196 <div class="dot"></div>197 <div class="dot"></div>198 <div class="dot"></div>199 <div class="dot"></div>200 <div class="dot"></div>201 <div class="dot"></div>202 </div>203 </div>204 205 <div class="options">206 <div class="grid">207 <div class="cell">208 <h4>Kindle Edition</h4>209 <div class="price-big">₹0.00</div>210 <div class="sub">Available instantly</div>211 </div>212 <div class="cell">213 <h4>214 <span style="vertical-align:middle;">215 <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="#ff9800" stroke-width="2">216 <path d="M4 10v4a4 4 0 0 0 4 4h6"></path>217 <path d="M11 5l4 4-4 4"></path>218 </svg>219 </span>220 Audiobook221 </h4>222 <div class="price-big">₹0.00</div>223 <div class="sub">with membership trial</div>224 </div>225 <div class="cell">226 <h4>Hardcover</h4>227 <div class="price-big">₹147.00</div>228 </div>229 <div class="cell selected">230 <h4>Paperback</h4>231 <div class="price-big">₹99.00</div>232 </div>233 </div>234 </div>235 </div>236 237 <div class="home-indicator"></div>238 239 <div class="bottom-bar">240 <div class="nav-item active">241 <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="#0f7f87" stroke-width="2"><path d="M3 10l9-7 9 7v9a2 2 0 0 1-2 2h-4a2 2 0 0 1-2-2v-5H9v5a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/></svg>242 <div>Home</div>243 </div>244 <div class="nav-item">245 <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="#687276" stroke-width="2"><circle cx="12" cy="8" r="4"/><path d="M20 21a8 8 0 0 0-16 0"/></svg>246 <div>You</div>247 </div>248 <div class="nav-item">249 <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="#687276" stroke-width="2"><path d="M21 12a9 9 0 1 1-2.6-6.4"/><path d="M21 3v6h-6"/></svg>250 <div>More</div>251 </div>252 <div class="nav-item">253 <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="#687276" stroke-width="2"><path d="M6 6h15l-1.5 9H7.5L6 6z"/><circle cx="9" cy="20" r="1.5"/><circle cx="17" cy="20" r="1.5"/></svg>254 <div>Cart</div>255 </div>256 <div class="nav-item">257 <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="#687276" stroke-width="2"><path d="M3 6h18M3 12h18M3 18h18"/></svg>258 <div>Menu</div>259 </div>260 </div>261 262</div>263</body>264</html>