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=1440, initial-scale=1.0" />6<title>Product Detail Mock</title>7<style>8 :root{9 --bg:#ffffff;10 --text:#212121;11 --muted:#666666;12 --border:#E5E5E5;13 --chip:#E6F2F1;14 --brand:#E91E63;15 --brand-dark:#d81b60;16 --dark:#1e1e1f;17 }18 body{ margin:0; padding:0; background:transparent; font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Inter,Arial,sans-serif; }19 #render-target{20 width:1440px; height:3120px;21 position:relative; overflow:hidden;22 background:#fff; border-radius:0;23 color:var(--text);24 }25 /* Status bar */26 .statusbar{27 height:120px; background:var(--dark); color:#fff;28 padding:0 48px; display:flex; align-items:center; justify-content:space-between;29 box-sizing:border-box;30 }31 .status-left{ font-weight:700; font-size:54px; letter-spacing:1px; }32 .status-right{ display:flex; align-items:center; gap:38px; }33 .status-icon{ width:40px; height:40px; opacity:.95; }34 /* App bar */35 .appbar{36 height:160px; background:var(--dark); color:#fff;37 display:flex; align-items:center; justify-content:space-between;38 padding:0 36px 0 24px; box-sizing:border-box; border-bottom:1px solid rgba(255,255,255,.06);39 }40 .app-left{ display:flex; align-items:center; gap:16px; }41 .icon-btn{ width:120px; height:120px; display:flex; align-items:center; justify-content:center; }42 .app-actions{ display:flex; align-items:center; gap:28px; padding-right:8px; }43 /* Content */44 .content{45 position:absolute; left:0; right:0; top:280px; bottom:0;46 overflow:auto; background:#fff;47 }48 .section{ padding:48px 56px 0 56px; box-sizing:border-box; }49 .row{ display:flex; align-items:center; gap:28px; }50 .ret-icon{51 width:92px; height:92px; border:2px solid #CFCFCF; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#9E9E9E;52 }53 .ret-text h3{ margin:0; font-size:52px; font-weight:700; }54 .ret-text p{ margin:6px 0 0 0; font-size:46px; color:var(--brand); font-weight:700; }55 .divider{ height:28px; background:#F1F1F1; margin:44px 0; }56 .card{57 border:1px solid var(--border); border-radius:28px; background:#fff;58 padding:44px; box-sizing:border-box;59 }60 .card-row{ display:flex; align-items:center; justify-content:space-between; }61 .card-title{ font-size:54px; font-weight:750; }62 .seller{ font-size:50px; font-weight:600; color:#2c2c2c; }63 .arrow{ width:44px; height:44px; }64 .pd p{ margin:18px 0; font-size:46px; line-height:1.4; color:#555; }65 .chips{ margin-top:32px; display:grid; grid-template-columns: 1fr 1fr; row-gap:28px; column-gap:36px; align-items:center; }66 .chip{67 background:linear-gradient(90deg,#d7efee, #eef7f6);68 padding:28px 36px; border-radius:22px; font-size:44px; font-weight:700; color:#2e6b66;69 border:1px solid #d6e8e7; width:420px;70 }71 .chip-val{ font-size:44px; color:#333; }72 .collapsed{ padding:44px; }73 .collapsed .card-title{ font-size:54px; font-weight:750; color:#303030; }74 .brand-header{75 display:flex; align-items:center; justify-content:space-between;76 padding:20px 8px 0 8px;77 }78 .brand-header h2{ margin:0; font-size:58px; font-weight:800; }79 .pink-wrap{80 margin-top:28px;81 background:linear-gradient(180deg,#fde8ef,#fdeff4);82 padding:36px; border-radius:36px;83 }84 .brand-card{85 background:#fff; border:1px solid #f7ccd9; border-radius:36px;86 padding:44px; box-sizing:border-box;87 }88 .brand-top{ display:flex; align-items:center; gap:36px; }89 .logo-ph{90 width:280px; height:140px; background:#E0E0E0; border:1px solid #BDBDBD;91 display:flex; align-items:center; justify-content:center; color:#757575; font-weight:600;92 border-radius:12px;93 }94 .brand-name{ font-size:56px; font-weight:800; }95 .brand-desc{ margin-top:18px; font-size:46px; line-height:1.45; color:#555; }96 .visit{97 margin-top:38px; display:flex; justify-content:center;98 }99 .visit a{100 display:inline-block; padding:28px 60px; border:3px solid var(--brand);101 border-radius:18px; color:var(--brand); text-decoration:none; font-weight:800; font-size:50px;102 background:#fff;103 }104 /* Bottom action bar */105 .bottom-bar{106 position:sticky; bottom:0; background:#fff; padding:28px 40px 32px 40px; box-shadow:0 -6px 18px rgba(0,0,0,.06);107 }108 .actions{ display:flex; gap:36px; }109 .btn{110 flex:1; height:160px; border-radius:26px; font-size:54px; font-weight:800; display:flex; align-items:center; justify-content:center; text-decoration:none;111 }112 .btn-outline{ border:2px solid var(--border); background:#fff; color:#333; }113 .btn-primary{ background:linear-gradient(180deg, var(--brand), var(--brand-dark)); color:#fff; }114 .wish-row{ display:flex; align-items:center; gap:28px; }115 .heart{116 width:56px; height:56px;117 }118 /* Small system gesture bar */119 .pill{120 width:360px; height:14px; background:#000; opacity:0.2; border-radius:8px; margin:18px auto 0 auto;121 }122 /* Helpers */123 .mt-24{ margin-top:24px; }124 .mt-40{ margin-top:40px; }125</style>126</head>127<body>128<div id="render-target">129 <!-- Status bar -->130 <div class="statusbar">131 <div class="status-left">9:47</div>132 <div class="status-right">133 <!-- simple wifi -->134 <svg class="status-icon" viewBox="0 0 24 24" fill="#fff"><path d="M2 8c5-4 15-4 20 0l-2 2c-4-3-12-3-16 0L2 8zm4 4c3-2 9-2 12 0l-2 2c-2-1-6-1-8 0l-2-2zm4 4c1-1 3-1 4 0l-2 2-2-2z"/></svg>135 <!-- battery -->136 <svg class="status-icon" viewBox="0 0 24 24" fill="#fff"><path d="M2 7h16a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2zm18 3h2v4h-2V10z"/></svg>137 </div>138 </div>139 <!-- App bar -->140 <div class="appbar">141 <div class="app-left">142 <div class="icon-btn" aria-label="Back">143 <svg width="56" height="56" viewBox="0 0 24 24" fill="#fff"><path d="M15.5 3.5 7 12l8.5 8.5-2 2L3 12 13.5 1.5l2 2z"/></svg>144 </div>145 </div>146 <div class="app-actions">147 <div class="icon-btn" aria-label="Search">148 <svg width="56" height="56" viewBox="0 0 24 24" fill="#fff"><path d="M15.5 14h.79l5.21 5.21-1.49 1.49L14.8 15.5v-.79l-.27-.28A6.5 6.5 0 1 1 15.5 14zm-6 0A4.5 4.5 0 1 0 5 9.5 4.5 4.5 0 0 0 9.5 14z"/></svg>149 </div>150 <div class="icon-btn" aria-label="Wishlist">151 <svg width="56" height="56" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2"><path d="M12 21s-6.7-4.3-9.3-7.2C.3 11 .8 6.9 4 6.2c2-.4 3.4.8 4 1.6.6-.8 2-2 4-1.6 3.2.7 3.7 4.8 1.3 7.6C18.7 16.7 12 21 12 21z"/></svg>152 </div>153 <div class="icon-btn" aria-label="Bag">154 <svg width="56" height="56" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2"><path d="M6 7h12l1 13H5L6 7z"/><path d="M9 7V5a3 3 0 0 1 6 0v2"/></svg>155 </div>156 </div>157 </div>158 159 <!-- Scrollable content -->160 <div class="content">161 <div class="section">162 <div class="row">163 <div class="ret-icon">164 <svg width="52" height="52" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">165 <path d="M3 12a9 9 0 1 0 2.64-6.36L3 7"/><path d="M3 3v4h4"/>166 </svg>167 </div>168 <div class="ret-text">169 <h3>15 Days Easy Return</h3>170 <p>Know More</p>171 </div>172 </div>173 174 <div class="divider"></div>175 176 <!-- Seller card -->177 <div class="card">178 <div class="card-row">179 <div class="seller">Sold by RedTape Limited</div>180 <svg class="arrow" viewBox="0 0 24 24" fill="#9E9E9E"><path d="M8 4l8 8-8 8z"/></svg>181 </div>182 </div>183 184 <div class="mt-40"></div>185 186 <!-- Product Details expanded -->187 <div class="card pd">188 <div class="card-row">189 <div class="card-title">Product Details</div>190 <svg class="arrow" viewBox="0 0 24 24" fill="#9E9E9E"><path d="M7 10l5 5 5-5z"/></svg>191 </div>192 <p>A perfect pair for your aerobic workout session, this pair of white running shoes from Red Tape is designed for absolute comfort and robust performance. The ...</p>193 194 <div class="chips">195 <div class="chip">Sole Material</div>196 <div class="chip-val">EVA</div>197 <div class="chip">Color Family</div>198 <div class="chip-val">White</div>199 </div>200 </div>201 202 <div class="mt-40"></div>203 204 <!-- Product Overview collapsed -->205 <div class="card collapsed">206 <div class="card-row">207 <div class="card-title">Product Overview</div>208 <svg class="arrow" viewBox="0 0 24 24" fill="#9E9E9E"><path d="M7 14l5-5 5 5z"/></svg>209 </div>210 </div>211 212 <div class="divider"></div>213 214 <div class="brand-header">215 <h2>Product Details</h2>216 <svg class="arrow" viewBox="0 0 24 24" fill="#9E9E9E"><path d="M8 4l8 8-8 8z"/></svg>217 </div>218 219 <div class="pink-wrap">220 <div class="brand-card">221 <div class="brand-top">222 <div class="logo-ph">[IMG: Red Tape Logo]</div>223 <div class="brand-name">Red Tape</div>224 </div>225 <div class="brand-desc">226 A perfect amalgamation of unparalleled comfort and latest fashion trends, Red Tape is an undisputed leader in the high-end fashion footwear segment. Browse through the extensive category only on Tata CLiQ.227 </div>228 <div class="visit">229 <a href="#">Visit Store</a>230 </div>231 </div>232 </div>233 234 <!-- Bottom spacing before sticky bar -->235 <div style="height:48px;"></div>236 </div>237 238 <!-- Bottom bar -->239 <div class="bottom-bar">240 <div class="actions">241 <a class="btn btn-outline" href="#">242 <span class="wish-row">243 <svg class="heart" viewBox="0 0 24 24" fill="none" stroke="#333" stroke-width="2"><path d="M12 21s-6.7-4.3-9.3-7.2C.3 11 .8 6.9 4 6.2c2-.4 3.4.8 4 1.6.6-.8 2-2 4-1.6 3.2.7 3.7 4.8 1.3 7.6C18.7 16.7 12 21 12 21z"/></svg>244 Wishlist245 </span>246 </a>247 <a class="btn btn-primary" href="#">Add to Bag</a>248 </div>249 <div class="pill"></div>250 </div>251 252 <div style="height:200px;"></div>253 </div>254</div>255</body>256</html>