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 - Viewed Together</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: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; color:#111;12 }13 14 /* Top system/status bar */15 .statusbar {16 height: 110px; background:#000; color:#fff; padding: 0 34px;17 display:flex; align-items:center; justify-content:space-between; font-size:38px;18 }19 .status-right { display:flex; align-items:center; gap:26px; opacity:.9; }20 21 /* App header */22 .navbar {23 height: 120px; display:flex; align-items:center; padding: 0 24px 0 16px;24 border-bottom:1px solid #e9e9e9; background:#fff;25 }26 .nav-title {27 font-weight: 800; font-size: 40px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;28 margin: 0 24px; flex:1;29 }30 .icon-btn {31 width: 88px; height: 88px; border:1px solid #DADADA; border-radius: 44px;32 display:flex; align-items:center; justify-content:center; background:#fff; margin-left:14px;33 }34 .back-btn {35 width: 88px; height: 88px; border-radius: 44px; display:flex; align-items:center; justify-content:center;36 }37 38 .policy-link {39 padding: 26px 40px; border-bottom:1px solid #ececec; font-size: 36px;40 }41 .policy-link a { color:#000; text-decoration: underline; }42 43 /* Ratings section */44 .ratings-wrap { padding: 40px; }45 .section-head {46 display:flex; align-items:center; justify-content:space-between; margin-bottom: 28px;47 }48 .section-head .title { font-size: 48px; font-weight: 700; }49 .chev {50 width: 44px; height: 44px; opacity: .7;51 }52 .rating-row { display:flex; align-items:center; gap: 30px; }53 .big-score { font-size: 120px; font-weight: 700; color:#111; line-height: 1; }54 .stars { display:flex; gap:16px; }55 .star svg { width: 48px; height: 48px; }56 .verified { color:#939393; font-size: 32px; margin-top: 10px; }57 58 .divider-bar { height: 16px; background:#EFEFEF; border-top:1px solid #E3E3E3; border-bottom:1px solid #E3E3E3; }59 60 /* Viewed together */61 .vt-head { padding: 34px 40px 6px; font-size: 46px; font-weight: 700; }62 .cards { padding: 20px 32px 240px; display:flex; gap: 36px; }63 .card {64 width: 488px; background:#fff; border:1px solid #EDEDED; border-radius: 14px;65 box-shadow: 0 6px 10px rgba(0,0,0,.06); overflow:hidden;66 }67 .card .img {68 width: calc(100% - 32px); height: 620px; margin: 16px; background:#E0E0E0;69 border:1px solid #BDBDBD; display:flex; align-items:center; justify-content:center; color:#757575; font-size: 34px; text-align:center;70 }71 .card .content { padding: 10px 26px 24px; }72 .brand { font-weight: 800; font-size: 42px; margin: 6px 0 8px; letter-spacing: .5px; }73 .descr { color:#5a5a5a; font-size: 34px; line-height: 1.3; margin-bottom: 24px; }74 .price-row { display:flex; align-items:center; gap: 18px; margin: 12px 0 26px; }75 .price { font-size: 40px; font-weight: 800; }76 .old { font-size: 34px; color:#9c9c9c; text-decoration: line-through; }77 .link { font-size: 36px; text-decoration: underline; color:#111; }78 79 /* Sticky add to bag bar */80 .sticky-cart {81 position:absolute; left:0; right:0; bottom:0; height: 210px; background:#F4F4F4;82 border-top:1px solid #E3E3E3; display:flex; align-items:center; padding: 0 40px; gap: 28px;83 }84 .wish-btn {85 width: 120px; height: 120px; border-radius: 60px; background:#fff; border:1px solid #DADADA;86 display:flex; align-items:center; justify-content:center;87 }88 .cta {89 flex:1; height: 128px; background:#0F0F0F; color:#fff; border-radius: 10px; display:flex; align-items:center; justify-content:center;90 font-size: 40px; font-weight: 800; box-shadow: 0 8px 18px rgba(0,0,0,.18);91 }92</style>93</head>94<body>95<div id="render-target">96 97 <!-- Status bar -->98 <div class="statusbar">99 <div>8:33</div>100 <div class="status-right">101 <span>●</span>102 <span>◔</span>103 <span>◉</span>104 <span style="border:2px solid #fff; width:38px; height:22px; display:inline-block; border-radius:4px; position:relative;">105 <span style="content:''; position:absolute; right:-8px; top:5px; width:6px; height:12px; background:#fff;"></span>106 </span>107 </div>108 </div>109 110 <!-- App Header -->111 <div class="navbar">112 <div class="back-btn" aria-label="Back">113 <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">114 <path d="M15 18l-6-6 6-6"/>115 </svg>116 </div>117 <div class="nav-title">LOUIS PHILIPPE Stripes Cotto...</div>118 <div class="icon-btn" aria-label="Wishlist">119 <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2">120 <path d="M20.8 8.6c0 5.2-8.8 10.8-8.8 10.8S3.2 13.8 3.2 8.6a4.6 4.6 0 0 1 8-3 4.6 4.6 0 0 1 9.6 3z"/>121 </svg>122 </div>123 <div class="icon-btn" aria-label="Bag">124 <svg width="42" height="42" viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2">125 <path d="M6 8h12l-1 12H7L6 8z"/>126 <path d="M9 8V6a3 3 0 0 1 6 0v2"/>127 </svg>128 </div>129 </div>130 131 <!-- Policy link -->132 <div class="policy-link">133 <a href="#">Read Our Return & Exchange Policy</a>134 </div>135 136 <!-- Ratings -->137 <div class="ratings-wrap">138 <div class="section-head">139 <div class="title">Ratings & Reviews</div>140 <div class="chev">141 <svg viewBox="0 0 24 24" width="44" height="44" fill="none" stroke="#777" stroke-width="2">142 <path d="M6 15l6-6 6 6"/>143 </svg>144 </div>145 </div>146 147 <div class="rating-row">148 <div class="big-score">0.0</div>149 <div>150 <div class="stars">151 <span class="star">152 <svg viewBox="0 0 24 24" fill="none" stroke="#cfcfcf" stroke-width="2">153 <path d="M12 3l3 6 6 .9-4.5 4.3 1 6.1L12 17l-5.5 3.3 1-6.1L3 9.9 9 9z"/>154 </svg>155 </span>156 <span class="star">157 <svg viewBox="0 0 24 24" fill="none" stroke="#cfcfcf" stroke-width="2">158 <path d="M12 3l3 6 6 .9-4.5 4.3 1 6.1L12 17l-5.5 3.3 1-6.1L3 9.9 9 9z"/>159 </svg>160 </span>161 <span class="star">162 <svg viewBox="0 0 24 24" fill="none" stroke="#cfcfcf" stroke-width="2">163 <path d="M12 3l3 6 6 .9-4.5 4.3 1 6.1L12 17l-5.5 3.3 1-6.1L3 9.9 9 9z"/>164 </svg>165 </span>166 <span class="star">167 <svg viewBox="0 0 24 24" fill="none" stroke="#cfcfcf" stroke-width="2">168 <path d="M12 3l3 6 6 .9-4.5 4.3 1 6.1L12 17l-5.5 3.3 1-6.1L3 9.9 9 9z"/>169 </svg>170 </span>171 <span class="star">172 <svg viewBox="0 0 24 24" fill="none" stroke="#cfcfcf" stroke-width="2">173 <path d="M12 3l3 6 6 .9-4.5 4.3 1 6.1L12 17l-5.5 3.3 1-6.1L3 9.9 9 9z"/>174 </svg>175 </span>176 </div>177 <div class="verified">( 0 Verified Buyer )</div>178 </div>179 </div>180 </div>181 182 <div class="divider-bar"></div>183 184 <!-- Viewed Together -->185 <div class="vt-head">Viewed Together</div>186 <div class="cards">187 <!-- Card 1 -->188 <div class="card">189 <div class="img">[IMG: Men's striped dark shirt product]</div>190 <div class="content">191 <div class="brand">VAN HEUSEN</div>192 <div class="descr">Stripes Cotton Slim Fit Mens Work Wear Shirt</div>193 <div class="price-row">194 <div class="price">₹1724</div>195 <div class="old">₹2299</div>196 </div>197 <div class="link">Add To Bag</div>198 </div>199 </div>200 201 <!-- Card 2 -->202 <div class="card">203 <div class="img">[IMG: Men's light blue shirt product]</div>204 <div class="content">205 <div class="brand">LOUIS PHILIPPE</div>206 <div class="descr">Textured Cotton Regular Fit Men's Work Wear Shirt</div>207 <div class="price-row">208 <div class="price">₹2199</div>209 </div>210 <div class="link">Add To Bag</div>211 </div>212 </div>213 </div>214 215 <!-- Sticky bottom add-to-bag -->216 <div class="sticky-cart">217 <div class="wish-btn" aria-label="Wishlist">218 <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2">219 <path d="M20.8 8.6c0 5.2-8.8 10.8-8.8 10.8S3.2 13.8 3.2 8.6a4.6 4.6 0 0 1 8-3 4.6 4.6 0 0 1 9.6 3z"/>220 </svg>221 </div>222 <div class="cta">ADD TO BAG</div>223 </div>224 225</div>226</body>227</html>