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>Cart UI Mock</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; color: #111; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: linear-gradient(180deg, #90D9D0 0px, #9DE3D7 200px, #F3F4F6 200px, #F3F4F6 100%);15 border-radius: 0px;16 }17 18 .header { padding: 32px; height: 200px; box-sizing: border-box; }19 .search {20 height: 96px;21 background: #fff;22 border-radius: 28px;23 box-shadow: 0 8px 16px rgba(0,0,0,0.12);24 display: flex;25 align-items: center;26 padding: 0 22px 0 26px;27 gap: 18px;28 }29 .search .placeholder { flex: 1; color: #5f6368; font-size: 38px; }30 .icon-btn { width: 72px; height: 72px; border-radius: 18px; background: #F6F7F8; display: flex; align-items: center; justify-content: center; }31 32 .primary-cta {33 margin: 18px 32px 14px;34 height: 112px;35 background: #FFD814;36 border-radius: 22px;37 display: flex; align-items: center; justify-content: center;38 font-weight: 700; font-size: 40px;39 }40 41 .item-card {42 margin: 12px 24px 0;43 background: #fff;44 border-radius: 22px;45 padding: 28px;46 box-shadow: 0 1px 0 rgba(0,0,0,0.05);47 }48 .item-row { display: flex; gap: 26px; }49 .img {50 width: 220px; height: 300px;51 background: #E0E0E0; border: 1px solid #BDBDBD;52 color: #757575; display: flex; align-items: center; justify-content: center; text-align: center; font-size: 26px; padding: 6px; box-sizing: border-box;53 }54 .item-info { flex: 1; }55 .label { font-weight: 700; font-size: 34px; }56 .badges { display: flex; gap: 12px; margin: 10px 0; }57 .badge-red { background: #E53935; color: #fff; padding: 8px 14px; border-radius: 8px; font-size: 26px; font-weight: 800; }58 .badge-gray { background: #F2F2F2; color: #333; padding: 8px 14px; border-radius: 8px; font-size: 26px; font-weight: 700; }59 .price-line { display: flex; align-items: baseline; gap: 20px; margin-top: 6px; }60 .price { font-size: 58px; font-weight: 800; }61 .small { font-size: 26px; color: #666; }62 .mrp { color: #777; font-size: 30px; text-decoration: line-through; }63 .stock { color: #15883E; font-size: 34px; margin-top: 8px; }64 .link { color: #007185; font-size: 32px; margin-top: 4px; }65 66 .qty-row { display: flex; align-items: center; gap: 20px; margin-top: 24px; flex-wrap: wrap; }67 .qty-box { display: flex; border: 1px solid #E0E0E0; border-radius: 14px; overflow: hidden; }68 .qty-btn { width: 96px; height: 88px; background: #F6F6F6; display: flex; align-items: center; justify-content: center; font-size: 44px; }69 .qty-val { width: 116px; height: 88px; background: #fff; display: flex; align-items: center; justify-content: center; font-size: 44px; }70 .actions { display: flex; gap: 20px; }71 .pill { padding: 22px 36px; border: 1px solid #D0D0D0; border-radius: 18px; background: #fff; font-size: 34px; }72 .see-more { margin-top: 22px; width: 440px; text-align: center; }73 74 .hr { height: 2px; background: #E6E6E6; margin: 32px 0; }75 76 .feature-row { display: flex; justify-content: space-around; text-align: center; padding: 8px 40px 18px; }77 .feature { display: flex; flex-direction: column; align-items: center; gap: 16px; }78 .feature .circle {79 width: 140px; height: 140px; border-radius: 70px;80 background: #F0F3F6; border: 1px solid #E0E0E0;81 display: flex; align-items: center; justify-content: center;82 }83 .feature span { color: #0F7F87; font-size: 36px; }84 85 .section { background: #fff; margin: 24px; border-radius: 18px; padding: 28px; }86 .section h2 { font-size: 44px; margin: 0 0 22px 0; }87 .product-grid { display: flex; gap: 34px; overflow: hidden; }88 .prod { width: 300px; }89 .prod .img { width: 300px; height: 360px; font-size: 24px; }90 .prod .title { color: #007185; font-size: 36px; margin-top: 10px; }91 .prod .author { color: #333; font-size: 30px; }92 .stars { color: #FF9800; font-size: 30px; margin: 6px 0; }93 94 .footer-nav {95 position: absolute; left: 0; right: 0; bottom: 80px;96 height: 160px; background: #fff; border-top: 1px solid #E0E0E0;97 display: flex; justify-content: space-around; align-items: center;98 }99 .nav-item { display: flex; flex-direction: column; align-items: center; gap: 10px; color: #3A3A3A; font-size: 26px; }100 .nav-item.active { color: #0F7F87; }101 .gesture { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); width: 360px; height: 12px; background: #BFBFBF; border-radius: 10px; }102</style>103</head>104<body>105<div id="render-target">106 107 <div class="header">108 <div class="search">109 <svg width="44" height="44" viewBox="0 0 24 24">110 <circle cx="10" cy="10" r="7" stroke="#555" stroke-width="2" fill="none"></circle>111 <line x1="15" y1="15" x2="22" y2="22" stroke="#555" stroke-width="2"></line>112 </svg>113 <div class="placeholder">Twelfth Night by William Shakespeare</div>114 <div class="icon-btn">115 <svg width="36" height="36" viewBox="0 0 24 24">116 <path d="M4 7v-3h3M20 7v-3h-3M4 17v3h3M20 17v3h-3M7 7h10v10H7z" stroke="#444" fill="none" stroke-width="2" stroke-linecap="round"></path>117 </svg>118 </div>119 </div>120 </div>121 122 <div class="primary-cta">Proceed to Buy (2 items)</div>123 124 <div class="item-card">125 <div class="item-row">126 <div class="img">[IMG: Book - Twelfth Night cover]</div>127 <div class="item-info">128 <div class="label">Paperback</div>129 <div class="badges">130 <div class="badge-red">34% off</div>131 <div class="badge-gray">Deal</div>132 </div>133 <div class="price-line">134 <div class="price">₹99<span class="small">00</span></div>135 <div class="small">M.R.P.:</div>136 <div class="mrp">₹150.00</div>137 </div>138 <div class="stock">In stock</div>139 <div class="link">10 days Replacement</div>140 141 <div class="qty-row">142 <div class="qty-box">143 <div class="qty-btn">-</div>144 <div class="qty-val">2</div>145 <div class="qty-btn">+</div>146 </div>147 <div class="actions">148 <div class="pill">Delete</div>149 <div class="pill">Save for later</div>150 </div>151 </div>152 153 <div class="see-more pill">See more like this</div>154 </div>155 </div>156 </div>157 158 <div class="hr"></div>159 160 <div class="feature-row">161 <div class="feature">162 <div class="circle">163 <svg width="64" height="64" viewBox="0 0 24 24">164 <rect x="5" y="10" width="14" height="9" rx="2" fill="none" stroke="#777" stroke-width="2"></rect>165 <path d="M8 10V7a4 4 0 0 1 8 0v3" stroke="#777" fill="none" stroke-width="2"></path>166 <text x="12" y="16" text-anchor="middle" font-size="6" fill="#FF9800">$</text>167 </svg>168 </div>169 <span>Secure Payment</span>170 </div>171 <div class="feature">172 <div class="circle">173 <svg width="70" height="70" viewBox="0 0 24 24">174 <rect x="3" y="8" width="13" height="8" rx="1" stroke="#777" fill="none" stroke-width="2"></rect>175 <path d="M16 12h3l2 3h-5z" stroke="#777" fill="none" stroke-width="2"></path>176 <circle cx="8" cy="18" r="1.6" fill="#777"></circle>177 <circle cx="19" cy="18" r="1.6" fill="#777"></circle>178 </svg>179 </div>180 <span>Amazon Delivered</span>181 </div>182 </div>183 184 <div class="section">185 <h2>Customers who shopped for items in your cart also shopped for</h2>186 <div class="product-grid">187 <div class="prod">188 <div class="img">[IMG: Book - Twelfth Night white cover]</div>189 <div class="title">Twelfth Night</div>190 <div class="author">William Shakespeare</div>191 <div class="stars">★★★★★ <span class="small">173</span></div>192 <div class="small">Paperback</div>193 </div>194 <div class="prod">195 <div class="img">[IMG: Book - Macbeth black cover]</div>196 <div class="title">Macbeth</div>197 <div class="author">William Shakespeare</div>198 <div class="stars">★★★★★ <span class="small">4,786</span></div>199 <div class="small">Paperback</div>200 </div>201 <div class="prod">202 <div class="img">[IMG: Book - Hamlet blue cover]</div>203 <div class="title">Hamlet</div>204 <div class="author">William Shakespeare</div>205 <div class="stars">★★★★★ <span class="small">2,145</span></div>206 <div class="small">Paperback</div>207 </div>208 </div>209 </div>210 211 <div class="footer-nav">212 <div class="nav-item">213 <svg width="40" height="40" viewBox="0 0 24 24"><path d="M4 10l8-6 8 6v8a2 2 0 0 1-2 2h-12a2 2 0 0 1-2-2z" fill="none" stroke="#555" stroke-width="2"></path></svg>214 <div>Home</div>215 </div>216 <div class="nav-item">217 <svg width="40" height="40" viewBox="0 0 24 24"><circle cx="12" cy="8" r="4" stroke="#555" fill="none" stroke-width="2"></circle><path d="M4 20c2-4 14-4 16 0" stroke="#555" fill="none" stroke-width="2"></path></svg>218 <div>You</div>219 </div>220 <div class="nav-item">221 <svg width="40" height="40" viewBox="0 0 24 24"><path d="M4 13a8 8 0 1 0 3-6" fill="none" stroke="#555" stroke-width="2"></path><path d="M3 4v5h5" fill="none" stroke="#555" stroke-width="2"></path></svg>222 <div>More</div>223 </div>224 <div class="nav-item active">225 <svg width="42" height="42" viewBox="0 0 24 24"><path d="M6 6h15l-2 8H7L6 6z" fill="none" stroke="#0F7F87" stroke-width="2"></path><circle cx="9" cy="19" r="1.5" fill="#0F7F87"></circle><circle cx="17" cy="19" r="1.5" fill="#0F7F87"></circle></svg>226 <div>Cart</div>227 </div>228 <div class="nav-item">229 <svg width="42" height="42" viewBox="0 0 24 24"><path d="M3 6h18M3 12h18M3 18h18" stroke="#555" stroke-width="2"></path></svg>230 <div>Menu</div>231 </div>232 </div>233 234 <div class="gesture"></div>235</div>236</body>237</html>