GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="utf-8">4<title>Amazon UI Mock</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }7 #render-target {8 width: 1080px;9 height: 2400px;10 position: relative;11 overflow: hidden;12 background: linear-gradient(180deg, #bde6e0 0%, #a7d8d3 40%, #ffffff 40%);13 color: #111;14 }15 /* Generic styles */16 .row { display: flex; align-items: center; }17 .icon-btn { width: 72px; height: 72px; border-radius: 36px; display: flex; justify-content: center; align-items: center; }18 .search-bar {19 position: absolute; left: 96px; top: 120px;20 width: 888px; height: 100px; background: #fff;21 border: 1px solid #dcdcdc; border-radius: 50px;22 box-shadow: 0 2px 8px rgba(0,0,0,0.08);23 display: flex; align-items: center; padding: 0 24px;24 gap: 18px;25 }26 .search-input { flex: 1; font-size: 34px; color: #333; }27 .search-pill svg { fill: #666; }28 .top-back {29 position: absolute; left: 24px; top: 132px;30 width: 64px; height: 64px; display: flex; justify-content: center; align-items: center;31 }32 /* Location bar */33 .location-bar {34 position: absolute; left: 0; top: 240px; width: 1080px;35 padding: 26px 32px; background: rgba(255,255,255,0.85); border-bottom: 1px solid #e8e8e8;36 display: flex; align-items: center; justify-content: space-between;37 }38 .location-text { font-size: 30px; color: #333; }39 .location-left { display: flex; align-items: center; gap: 16px; }40 .filters-btn {41 display: flex; align-items: center; gap: 12px;42 font-size: 30px; color: #333; padding: 12px 20px; border: 1px solid #ddd; border-radius: 30px; background: #fff;43 margin-right: 24px;44 }45 /* Content */46 .content {47 position: absolute; left: 0; top: 344px; width: 1080px; padding: 24px 28px 220px;48 }49 .section-title { font-size: 42px; font-weight: 700; margin-top: 18px; }50 .sponsored { display: flex; align-items: center; gap: 10px; color: #777; font-size: 28px; margin-top: 10px; }51 .hero-img {52 width: 640px; height: 760px; margin: 24px auto; background: #E0E0E0; border: 1px solid #BDBDBD;53 display: flex; justify-content: center; align-items: center; color: #757575; font-size: 28px; text-align: center; border-radius: 12px;54 }55 .brand-row { display: flex; align-items: center; gap: 20px; padding: 10px 0 24px; }56 .brand-logo { width: 140px; height: 140px; background: #E0E0E0; border: 1px solid #BDBDBD; display: flex; justify-content: center; align-items: center; color: #757575; border-radius: 16px; font-size: 24px; }57 .brand-link { color: #1473ff; font-size: 34px; }58 /* Product card */59 .card {60 width: 1024px; margin: 0 auto 24px; background: #fff; border: 1px solid #e6e6e6; border-radius: 20px;61 box-shadow: 0 2px 8px rgba(0,0,0,0.06); display: grid; grid-template-columns: 360px 1fr;62 }63 .card-left { padding: 28px; display: flex; justify-content: center; align-items: center; }64 .product-img { width: 300px; height: 380px; background: #E0E0E0; border: 1px solid #BDBDBD; display: flex; justify-content: center; align-items: center; color: #757575; border-radius: 16px; }65 .card-right { padding: 28px 28px 36px 0; }66 .product-title { font-size: 40px; font-weight: 700; line-height: 1.2; margin-bottom: 10px; }67 .rating-row { display: flex; align-items: center; gap: 12px; margin: 10px 0 6px; }68 .rating-num { font-size: 30px; color: #0b5; font-weight: 700; }69 .stars svg { margin-right: 6px; }70 .review-count { font-size: 28px; color: #666; }71 .bought { font-size: 28px; color: #666; margin: 6px 0 16px; }72 .price { font-size: 54px; font-weight: 800; letter-spacing: 0.5px; margin: 10px 0; }73 .offer { font-size: 28px; color: #555; margin-bottom: 14px; }74 .prime-row { display: flex; align-items: baseline; gap: 12px; font-size: 28px; margin-bottom: 14px; }75 .prime-badge { background: #ffcf00; color: #222; font-weight: 700; padding: 4px 10px; border-radius: 10px; font-size: 26px; }76 .free-del { font-size: 28px; color: #666; margin-bottom: 18px; }77 .swatches { display: flex; gap: 22px; }78 .swatch { width: 70px; height: 70px; border-radius: 35px; border: 2px solid #bdbdbd; }79 .swatch.dark { background: #3a3a3a; }80 .swatch.mid { background: #555; }81 .swatch.gray { background: #777; }82 .swatch.light { background: #a5a5a5; }83 /* Bottom nav */84 .bottom-nav {85 position: absolute; bottom: 0; left: 0; width: 1080px; height: 168px; background: #fff;86 border-top: 1px solid #e6e6e6; display: flex; justify-content: space-around; align-items: center;87 }88 .nav-item { display: flex; flex-direction: column; align-items: center; gap: 10px; color: #333; }89 .nav-item.active { color: #1473ff; }90 .nav-item span { font-size: 30px; }91</style>92</head>93<body>94<div id="render-target">95 96 <!-- Back button -->97 <div class="top-back">98 <svg width="36" height="36" viewBox="0 0 24 24">99 <path fill="#333" d="M15.5 19.5L8 12l7.5-7.5-1.4-1.4L5.2 12l8.9 8.9z"/>100 </svg>101 </div>102 103 <!-- Search Bar -->104 <div class="search-bar">105 <svg width="40" height="40" viewBox="0 0 24 24">106 <path fill="#666" d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0016 9.5 6.5 6.5 0 109.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 5 1.5-1.5-5-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/>107 </svg>108 <div class="search-input">iPhone 15 Pro Max (256GB) in Blue...</div>109 <svg width="42" height="42" viewBox="0 0 24 24">110 <path fill="#666" d="M4 5h16v14H4V5zm2 2v10h12V7H6zm3 1l3 3 3-3v6H9V8z"/>111 </svg>112 </div>113 114 <!-- Location and Filters -->115 <div class="location-bar">116 <div class="location-left">117 <svg width="36" height="36" viewBox="0 0 24 24">118 <path fill="#333" d="M12 2a7 7 0 00-7 7c0 5.25 7 13 7 13s7-7.75 7-13a7 7 0 00-7-7zm0 9.5a2.5 2.5 0 110-5 2.5 2.5 0 010 5z"/>119 </svg>120 <div class="location-text">Delivering to Faridabad 121004 - Update location</div>121 <svg width="30" height="30" viewBox="0 0 24 24">122 <path fill="#333" d="M7 10l5 5 5-5z"/>123 </svg>124 </div>125 <div class="filters-btn">126 <svg width="28" height="28" viewBox="0 0 24 24">127 <path fill="#333" d="M3 5h18v2H3V5zm4 6h10v2H7v-2zm3 6h4v2H10v-2z"/>128 </svg>129 <span>Filters</span>130 <svg width="26" height="26" viewBox="0 0 24 24">131 <path fill="#333" d="M12 8l6 6H6z"/>132 </svg>133 </div>134 </div>135 136 <!-- Main content -->137 <div class="content">138 <div class="section-title">The t-shirts you need.</div>139 <div class="sponsored">140 <span>Sponsored</span>141 <svg width="22" height="22" viewBox="0 0 24 24">142 <path fill="#777" d="M11 17h2v-6h-2v6zm0-8h2V7h-2v2z"/>143 </svg>144 </div>145 146 <div class="hero-img">[IMG: Model wearing black band t-shirt]</div>147 148 <div class="brand-row">149 <div class="brand-logo">[IMG: Brand Logo]</div>150 <div class="brand-link">Shop Quote Marshals ›</div>151 </div>152 153 <!-- Product Card -->154 <div class="card">155 <div class="card-left">156 <div class="product-img">[IMG: iPhone 15 Pro Max - Blue Titanium]</div>157 </div>158 <div class="card-right">159 <div class="product-title">Apple iPhone 15 Pro Max (256 GB) - Blue Titanium</div>160 <div class="rating-row">161 <div class="rating-num">4.4</div>162 <div class="stars">163 <svg width="28" height="28" viewBox="0 0 24 24"><path fill="#ff9f00" d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>164 <svg width="28" height="28" viewBox="0 0 24 24"><path fill="#ff9f00" d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>165 <svg width="28" height="28" viewBox="0 0 24 24"><path fill="#ff9f00" d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>166 <svg width="28" height="28" viewBox="0 0 24 24"><path fill="#ff9f00" d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>167 <svg width="28" height="28" viewBox="0 0 24 24"><path fill="#ddd" d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>168 </div>169 <div class="review-count">(61)</div>170 </div>171 <div class="bought">100+ bought in past month</div>172 <div class="price">₹1,59,900</div>173 <div class="offer">Flat INR 4000 Off on HDFC BankCards</div>174 <div class="prime-row">175 <div class="prime-badge">prime</div>176 <div>Get it by Thursday, 30 November</div>177 </div>178 <div class="free-del">FREE Delivery by Amazon</div>179 <div class="swatches">180 <div class="swatch dark"></div>181 <div class="swatch mid"></div>182 <div class="swatch gray"></div>183 <div class="swatch light"></div>184 </div>185 </div>186 </div>187 </div>188 189 <!-- Bottom Navigation -->190 <div class="bottom-nav">191 <div class="nav-item active">192 <svg width="48" height="48" viewBox="0 0 24 24"><path fill="#1473ff" d="M12 3l9 8h-2v9h-5v-6H10v6H5v-9H3l9-8z"/></svg>193 <span>Home</span>194 </div>195 <div class="nav-item">196 <svg width="48" height="48" viewBox="0 0 24 24"><path fill="#333" d="M12 12a5 5 0 100-10 5 5 0 000 10zm0 2c-4.42 0-8 2.24-8 5v3h16v-3c0-2.76-3.58-5-8-5z"/></svg>197 <span>You</span>198 </div>199 <div class="nav-item">200 <svg width="48" height="48" viewBox="0 0 24 24"><path fill="#333" d="M3 5h18v4H3V5zm4 6h10v4H7v-4zm3 6h4v4h-4v-4z"/></svg>201 <span>More</span>202 </div>203 <div class="nav-item">204 <svg width="48" height="48" viewBox="0 0 24 24"><path fill="#333" d="M7 4h-2l-2 16h16l2-12H8l-.5-4zm2 16a2 2 0 11.001-3.999A2 2 0 019 20zm8 0a2 2 0 11.999-3.999A2 2 0 0117 20z"/></svg>205 <span>Cart</span>206 </div>207 <div class="nav-item">208 <svg width="48" height="48" viewBox="0 0 24 24"><path fill="#333" d="M3 6h18v2H3V6zm0 5h18v2H3v-2zm0 5h18v2H3v-2z"/></svg>209 <span>Menu</span>210 </div>211 </div>212 213</div>214</body>215</html>