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>Item Page UI</title>7<style>8 body { margin: 0; padding: 0; background: transparent; }9 #render-target {10 width: 1080px; height: 2400px;11 position: relative; overflow: hidden;12 background: #000;13 color: #fff;14 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;15 }16 .status-bar {17 height: 84px;18 padding: 0 32px;19 display: flex; align-items: center; justify-content: space-between;20 color: #EAEAEA; font-weight: 600; font-size: 32px;21 opacity: 0.9;22 }23 .header {24 padding: 8px 32px 24px 32px;25 display: flex; align-items: center; justify-content: space-between;26 }27 .header-left {28 display: flex; align-items: center; gap: 24px;29 }30 .title { font-size: 54px; font-weight: 700; letter-spacing: 0.2px; }31 .icon-btns { display: flex; gap: 24px; }32 .icon-circle {33 width: 88px; height: 88px; border-radius: 50%;34 background: #1C1C1C; display: flex; align-items: center; justify-content: center;35 }36 .icon { width: 44px; height: 44px; fill: none; stroke: #fff; stroke-width: 3; }37 .content { padding: 0 40px; }38 .price-row {39 margin-top: 24px;40 font-size: 66px; font-weight: 800;41 }42 .shipping { color: #B0B0B0; font-size: 40px; font-weight: 600; margin-left: 16px; }43 .delivery {44 margin-top: 18px; font-size: 40px; color: #DADADA; font-weight: 600;45 }46 .delivery .strong { color: #fff; font-weight: 800; }47 .condition-row {48 margin-top: 40px; display: flex; align-items: center; justify-content: space-between;49 font-size: 40px; color: #BFBFBF;50 }51 .condition-row .right { color: #fff; display: flex; align-items: center; gap: 16px; }52 .info-icon { width: 34px; height: 34px; }53 .dropdown {54 margin-top: 26px;55 border: 2px solid #2B2B2B; border-radius: 20px;56 padding: 28px 28px; height: 120px;57 display: flex; align-items: center; justify-content: space-between;58 background: #0C0C0C;59 color: #DCDCDC; font-size: 40px; font-weight: 600;60 }61 .dropdown .label { color: #AFAFAF; font-weight: 600; }62 .dropdown .value { color: #fff; font-weight: 800; margin-left: 8px; }63 .chev { width: 32px; height: 32px; stroke: #DADADA; }64 .btn {65 height: 126px; border-radius: 64px; display: flex; align-items: center; justify-content: center;66 font-size: 44px; font-weight: 800; margin-top: 34px;67 }68 .btn.primary {69 background: #6FA3FF; color: #04132F;70 }71 .btn.outline {72 background: transparent; border: 3px solid #6FA3FF; color: #75A9FF;73 }74 .btn.outline .icon-heart { stroke: #75A9FF; }75 .icon-heart { width: 44px; height: 44px; margin-right: 16px; fill: none; stroke: #fff; stroke-width: 3; }76 .trend-card {77 margin: 48px 24px 0 24px; padding: 32px;78 background: #1E1E1E; border-radius: 28px; display: flex; align-items: center; gap: 24px;79 }80 .trend-icon-wrap {81 width: 84px; height: 84px; border-radius: 50%; background: #101010;82 display: flex; align-items: center; justify-content: center; border: 1px solid #2C2C2C;83 }84 .trend-text { font-size: 38px; line-height: 1.25; }85 .trend-text b { font-weight: 900; }86 .section-title { margin-top: 48px; font-size: 54px; font-weight: 900; }87 .about-grid { margin-top: 24px; }88 .about-row {89 display: flex; align-items: center; justify-content: space-between;90 padding: 20px 8px; font-size: 40px;91 color: #CFCFCF;92 }93 .about-row .value { color: #fff; font-weight: 700; }94 .about-row .alert { color: #FF5A87; font-weight: 800; }95 .spacer-bottom { height: 240px; }96 .nav {97 position: absolute; bottom: 0; left: 0; right: 0;98 height: 220px; background: #121212; border-top: 1px solid #1F1F1F;99 display: flex; align-items: center; justify-content: space-around;100 }101 .nav-item { width: 20%; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #CFCFCF; }102 .nav-item .label { margin-top: 16px; font-size: 32px; font-weight: 700; }103 .nav-icon { width: 56px; height: 56px; stroke: #DADADA; fill: none; stroke-width: 3; }104 .nav-item.active .bubble {105 width: 96px; height: 96px; background: #0F2148; border-radius: 50%;106 display: flex; align-items: center; justify-content: center;107 }108 .nav-item.active .nav-icon { stroke: #74A6FF; }109</style>110</head>111<body>112<div id="render-target">113 114 <div class="status-bar">115 <div>4:56</div>116 <div style="display:flex; gap:18px; align-items:center;">117 <div style="width:18px;height:18px;background:#EAEAEA;border-radius:50%;opacity:.8;"></div>118 <div style="width:24px;height:24px;border:2px solid #EAEAEA;border-radius:4px;"></div>119 <div style="width:24px;height:24px;border:2px solid #EAEAEA;border-radius:4px;"></div>120 <div style="width:8px;height:8px;background:#EAEAEA;border-radius:50%;"></div>121 <div style="width:22px;height:22px;border:2px solid #EAEAEA;border-radius:4px;"></div>122 <div style="width:18px;height:28px;border:2px solid #EAEAEA;border-radius:3px;"></div>123 </div>124 </div>125 126 <div class="header">127 <div class="header-left">128 <div class="icon-circle" style="background: transparent;">129 <svg class="icon" viewBox="0 0 24 24"><path d="M15 6l-6 6 6 6" stroke="#fff" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>130 </div>131 <div class="title">Item</div>132 </div>133 <div class="icon-btns">134 <div class="icon-circle">135 <svg class="icon" viewBox="0 0 24 24">136 <circle cx="11" cy="11" r="7" />137 <line x1="17" y1="17" x2="22" y2="22" />138 </svg>139 </div>140 <div class="icon-circle">141 <svg class="icon" viewBox="0 0 24 24">142 <path d="M3 6h18l-2 10H7L5 6z" />143 <circle cx="9" cy="20" r="1.5" />144 <circle cx="17" cy="20" r="1.5" />145 </svg>146 </div>147 <div class="icon-circle">148 <svg class="icon" viewBox="0 0 24 24">149 <circle cx="6" cy="12" r="2.5" />150 <circle cx="18" cy="6" r="2.5" />151 <circle cx="18" cy="18" r="2.5" />152 <path d="M8.5 12L15.5 7.5M8.5 12L15.5 16.5" />153 </svg>154 </div>155 <div class="icon-circle">156 <svg class="icon" viewBox="0 0 24 24">157 <circle cx="12" cy="5" r="1.6" /><circle cx="12" cy="12" r="1.6" /><circle cx="12" cy="19" r="1.6" />158 </svg>159 </div>160 </div>161 </div>162 163 <div class="content">164 <div class="price-row">165 $79.99 - $100.00 <span class="shipping">+ $102.97 shipping</span>166 </div>167 168 <div class="delivery">169 Est. delivery <span class="strong">Tue, Dec 26</span> - <span class="strong">Thu, Jan 11</span>170 </div>171 172 <div class="condition-row">173 <div>Condition</div>174 <div class="right">175 <div>New with box</div>176 <svg class="info-icon" viewBox="0 0 24 24">177 <circle cx="12" cy="12" r="10" stroke="#DADADA" stroke-width="2" fill="none"/>178 <line x1="12" y1="10" x2="12" y2="17" stroke="#DADADA" stroke-width="2"/>179 <circle cx="12" cy="7" r="1.5" fill="#DADADA"/>180 </svg>181 </div>182 </div>183 184 <div class="dropdown">185 <div><span class="label">US Shoe Size:</span> <span class="value">Select</span></div>186 <svg class="chev" viewBox="0 0 24 24"><path d="M6 9l6 6 6-6" fill="none" stroke="#DADADA" stroke-width="3" stroke-linecap="round"/></svg>187 </div>188 189 <div class="dropdown">190 <div><span class="label">Fashion Color:</span> <span class="value">Select</span></div>191 <svg class="chev" viewBox="0 0 24 24"><path d="M6 9l6 6 6-6" fill="none" stroke="#DADADA" stroke-width="3" stroke-linecap="round"/></svg>192 </div>193 194 <div class="dropdown">195 <div><span class="label">Quantity:</span> <span class="value">1</span></div>196 <svg class="chev" viewBox="0 0 24 24"><path d="M6 9l6 6 6-6" fill="none" stroke="#DADADA" stroke-width="3" stroke-linecap="round"/></svg>197 </div>198 199 <div class="btn primary">Buy It Now</div>200 <div class="btn outline">Add to cart</div>201 <div class="btn outline">202 <svg class="icon-heart" viewBox="0 0 24 24"><path d="M12 20s-7-4.5-7-9a4 4 0 0 1 7-2.7A4 4 0 0 1 19 11c0 4.5-7 9-7 9z" stroke-linejoin="round" stroke-linecap="round"/></svg>203 Add to watchlist204 </div>205 206 <div class="trend-card">207 <div class="trend-icon-wrap">208 <svg viewBox="0 0 24 24" class="icon" style="stroke:#fff;">209 <path d="M10 3L5 13h6l-1 8 9-14h-6l1-4z" fill="none" stroke-width="2" stroke-linejoin="round"/>210 </svg>211 </div>212 <div class="trend-text">213 <b>This one's trending.</b> 92 have already sold.214 </div>215 </div>216 217 <div class="section-title">About this item</div>218 <div class="about-grid">219 <div class="about-row">220 <div>Condition</div>221 <div class="value">New with box</div>222 </div>223 <div class="about-row">224 <div>Quantity</div>225 <div class="alert">Almost gone</div>226 </div>227 </div>228 229 <div class="spacer-bottom"></div>230 </div>231 232 <div class="nav">233 <div class="nav-item">234 <svg class="nav-icon" viewBox="0 0 24 24">235 <path d="M4 11l8-6 8 6v8H4v-8z" />236 <path d="M9 19v-5h6v5" />237 </svg>238 <div class="label">Home</div>239 </div>240 <div class="nav-item">241 <svg class="nav-icon" viewBox="0 0 24 24">242 <circle cx="12" cy="8" r="4" />243 <path d="M4 20c0-4 4-6 8-6s8 2 8 6" />244 </svg>245 <div class="label">My eBay</div>246 </div>247 <div class="nav-item active">248 <div class="bubble">249 <svg class="nav-icon" viewBox="0 0 24 24">250 <circle cx="11" cy="11" r="7" />251 <line x1="17" y1="17" x2="22" y2="22" />252 </svg>253 </div>254 <div class="label" style="color:#74A6FF;">Search</div>255 </div>256 <div class="nav-item">257 <svg class="nav-icon" viewBox="0 0 24 24">258 <path d="M6 9a6 6 0 0 1 12 0v6H6V9z" />259 <path d="M10 19h4" />260 </svg>261 <div class="label">Inbox</div>262 </div>263 <div class="nav-item">264 <svg class="nav-icon" viewBox="0 0 24 24">265 <path d="M4 7l8-3 8 3-8 10L4 7z" />266 <circle cx="17" cy="7.5" r="2" />267 </svg>268 <div class="label">Selling</div>269 </div>270 </div>271 272</div>273</body>274</html>