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>Shop - Shoes</title>7<style>8 body {9 margin: 0;10 padding: 0;11 background: transparent;12 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;13 }14 #render-target {15 width: 1080px;16 height: 2400px;17 position: relative;18 overflow: hidden;19 background: #FFFFFF;20 }21 22 /* Status bar */23 .status-bar {24 position: relative;25 height: 120px;26 background: #0E0E0E;27 color: #fff;28 display: flex;29 align-items: center;30 padding: 0 40px;31 justify-content: space-between;32 box-sizing: border-box;33 }34 .status-left {35 display: flex;36 align-items: center;37 gap: 22px;38 font-weight: 600;39 }40 .time {41 font-size: 36px;42 letter-spacing: 0.5px;43 }44 .mini-icons {45 display: flex;46 align-items: center;47 gap: 16px;48 }49 .dot {50 width: 12px;51 height: 12px;52 border-radius: 50%;53 background: #fff;54 opacity: 0.9;55 }56 .status-right {57 display: flex;58 align-items: center;59 gap: 18px;60 }61 .status-right svg {62 display: block;63 }64 65 /* App bar */66 .app-bar {67 height: 140px;68 background: #FFFFFF;69 display: flex;70 align-items: center;71 padding: 0 36px;72 box-sizing: border-box;73 border-bottom: 1px solid #E6E6E6;74 }75 .app-left, .app-right {76 display: flex;77 align-items: center;78 gap: 36px;79 }80 .app-title {81 font-size: 46px;82 font-weight: 600;83 color: #111111;84 margin-left: 24px;85 }86 .icon-btn svg {87 width: 56px;88 height: 56px;89 }90 91 /* Banner */92 .banner {93 position: relative;94 height: 700px;95 overflow: hidden;96 }97 .banner .img {98 position: absolute;99 inset: 0;100 background: #E0E0E0;101 border: 1px solid #BDBDBD;102 display: flex;103 justify-content: center;104 align-items: center;105 color: #757575;106 font-size: 32px;107 }108 .banner .overlay {109 position: absolute;110 left: 40px;111 top: 60px;112 color: #FFFFFF;113 }114 .overlay .eyebrow {115 font-size: 48px;116 font-weight: 600;117 margin-bottom: 28px;118 text-shadow: 0 1px 2px rgba(0,0,0,0.25);119 }120 .overlay .divider {121 width: 1000px;122 height: 8px;123 background: #FFFFFF;124 opacity: 0.9;125 }126 .overlay .title {127 margin-top: 110px;128 font-size: 88px;129 font-weight: 700;130 text-shadow: 0 1px 2px rgba(0,0,0,0.25);131 }132 133 /* List */134 .list {135 background: #FFFFFF;136 }137 .list-item {138 height: 160px;139 display: flex;140 align-items: center;141 padding: 0 40px;142 box-sizing: border-box;143 border-bottom: 2px solid #EAEAEA;144 color: #222222;145 font-size: 44px;146 font-weight: 600;147 }148 149 /* Bottom gesture area */150 .bottom-safe {151 position: absolute;152 left: 0;153 right: 0;154 bottom: 0;155 height: 120px;156 background: #0E0E0E;157 display: flex;158 align-items: center;159 justify-content: center;160 }161 .gesture {162 width: 280px;163 height: 16px;164 background: #D6D6D6;165 border-radius: 10px;166 }167</style>168</head>169<body>170<div id="render-target">171 <!-- Status Bar -->172 <div class="status-bar">173 <div class="status-left">174 <div class="time">9:15</div>175 <div class="mini-icons">176 <div class="dot"></div>177 <div class="dot"></div>178 <div class="dot"></div>179 <span style="color:#fff; font-weight:700; font-size:28px;">N</span>180 <div class="dot" style="opacity:0.6;"></div>181 </div>182 </div>183 <div class="status-right">184 <!-- WiFi -->185 <svg width="40" height="24" viewBox="0 0 24 24" aria-label="WiFi">186 <path d="M2 9c5-4 15-4 20 0" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/>187 <path d="M5 12c4-3 10-3 14 0" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/>188 <path d="M9 15c2-2 4-2 6 0" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/>189 <circle cx="12" cy="18" r="1.5" fill="#fff"/>190 </svg>191 <!-- Battery -->192 <svg width="40" height="24" viewBox="0 0 28 16" aria-label="Battery">193 <rect x="1" y="3" width="22" height="10" rx="2" ry="2" stroke="#fff" fill="none" stroke-width="2"/>194 <rect x="3" y="5" width="14" height="6" fill="#fff"/>195 <rect x="23" y="6" width="3" height="4" fill="#fff"/>196 </svg>197 </div>198 </div>199 200 <!-- App Bar -->201 <div class="app-bar">202 <div class="app-left">203 <!-- Hamburger -->204 <div class="icon-btn" aria-label="Menu">205 <svg viewBox="0 0 24 24">206 <path d="M3 6h18M3 12h18M3 18h18" stroke="#111" stroke-width="2" stroke-linecap="round" fill="none"/>207 </svg>208 </div>209 <div class="app-title">Shop</div>210 </div>211 <div style="flex:1"></div>212 <div class="app-right">213 <!-- Search -->214 <div class="icon-btn" aria-label="Search">215 <svg viewBox="0 0 24 24">216 <circle cx="11" cy="11" r="7" stroke="#111" stroke-width="2" fill="none"/>217 <line x1="16.5" y1="16.5" x2="22" y2="22" stroke="#111" stroke-width="2"/>218 </svg>219 </div>220 <!-- Bag -->221 <div class="icon-btn" aria-label="Bag">222 <svg viewBox="0 0 24 24">223 <path d="M6 8h12l-1 12H7L6 8z" fill="none" stroke="#111" stroke-width="2"/>224 <path d="M9 8a3 3 0 0 1 6 0" fill="none" stroke="#111" stroke-width="2"/>225 </svg>226 </div>227 </div>228 </div>229 230 <!-- Banner -->231 <div class="banner">232 <div class="img">[IMG: Promotional banner with person stepping out of a vehicle]</div>233 <div class="overlay">234 <div class="eyebrow">New & Featured</div>235 <div class="divider"></div>236 <div class="title">Shoes</div>237 </div>238 </div>239 240 <!-- Category List -->241 <div class="list">242 <div class="list-item">All Shoes</div>243 <div class="list-item">Newest Sneakers</div>244 <div class="list-item">Lifestyle</div>245 <div class="list-item">Jordan</div>246 <div class="list-item">Running</div>247 <div class="list-item">Gym and Training</div>248 <div class="list-item">Sandals and Slides</div>249 <div class="list-item">Basketball</div>250 </div>251 252 <!-- Bottom Gesture Area -->253 <div class="bottom-safe">254 <div class="gesture"></div>255 </div>256</div>257</body>258</html>