GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8 #render-target {9 width: 1080px; height: 2400px;10 position: relative; overflow: hidden;11 background: #000; color: #fff;12 }13 14 /* Top status bar */15 .status-bar {16 height: 90px;17 display: flex; align-items: center; justify-content: space-between;18 padding: 0 32px; color: #cfcfcf; font-size: 36px;19 }20 21 /* Header search row */22 .header { display: flex; align-items: center; gap: 24px; padding: 14px 32px 26px; }23 .icon-btn {24 width: 90px; height: 90px; border-radius: 45px;25 background: #1d1d1d; display: flex; align-items: center; justify-content: center;26 }27 .query { flex: 1; font-size: 56px; font-weight: 800; }28 29 /* Save/sort/filter row */30 .row { display: flex; align-items: center; justify-content: space-between; padding: 8px 32px 20px; }31 .row .left, .row .right { display: flex; align-items: center; gap: 18px; }32 .row .left { color: #58adff; font-size: 40px; }33 .row .right { color: #8ec8ff; font-size: 40px; }34 35 .section-title { font-size: 50px; font-weight: 800; padding: 16px 32px 8px; }36 .size-chips { display: flex; gap: 24px; padding: 12px 32px; flex-wrap: wrap; }37 .chip {38 width: 120px; height: 120px; border-radius: 60px;39 border: 2px solid #444; background: #111; color: #ddd;40 display: flex; align-items: center; justify-content: center; font-size: 42px;41 }42 .divider { height: 2px; background: #2b2b2b; margin: 28px 32px; }43 44 .list { padding: 0 32px 180px; }45 .item { display: flex; gap: 32px; margin-bottom: 26px; }46 .image {47 width: 360px; height: 260px;48 background: #E0E0E0; border: 1px solid #BDBDBD; color: #757575;49 border-radius: 36px; display: flex; align-items: center; justify-content: center;50 position: relative; overflow: hidden;51 }52 .like-badge {53 position: absolute; right: 16px; top: 16px;54 width: 88px; height: 88px; border-radius: 44px; background: #2a2a2a;55 display: flex; align-items: center; justify-content: center;56 }57 .details { flex: 1; }58 .title { font-size: 44px; font-weight: 800; line-height: 1.2; }59 .meta { font-size: 34px; color: #b7b7b7; margin-top: 6px; }60 .price { font-size: 56px; font-weight: 900; margin-top: 10px; }61 .shipping { font-size: 34px; color: #b7b7b7; margin-top: 6px; }62 .tag { font-size: 30px; color: #9e9e9e; margin-top: 10px; }63 64 .strike { color: #9e9e9e; text-decoration: line-through; margin-left: 16px; font-size: 36px; }65 .green { color: #61d279; font-size: 36px; margin-left: 8px; }66 .badge {67 display: inline-flex; align-items: center; gap: 12px;68 background: #13284e; color: #bce2ff; border-radius: 36px; padding: 14px 20px; margin-top: 12px; font-size: 32px;69 }70 71 .results-overlay {72 position: absolute; left: 0; right: 0; bottom: 220px;73 height: 120px; background: #111; border-top: 2px solid #2b2b2b; border-bottom: 2px solid #2b2b2b;74 display: flex; align-items: center; justify-content: center; font-size: 44px; color: #dcdcdc;75 }76 77 .bottom-nav {78 position: absolute; left: 0; right: 0; bottom: 0; height: 220px;79 background: #111; border-top: 2px solid #2b2b2b;80 display: flex; align-items: center; justify-content: space-around; padding-top: 24px;81 }82 .nav-item { display: flex; flex-direction: column; align-items: center; gap: 14px; color: #cfcfcf; font-size: 32px; }83 .nav-item.active { color: #4da3ff; }84</style>85</head>86<body>87<div id="render-target">88 89 <div class="status-bar">90 <div>9:11</div>91 <div>● ● ●</div>92 <div>100%</div>93 </div>94 95 <div class="header">96 <div class="icon-btn">97 <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">98 <path d="M15 18l-6-6 6-6"></path>99 </svg>100 </div>101 <div class="query">clarks shoes women</div>102 <div class="icon-btn">103 <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">104 <circle cx="11" cy="11" r="7"></circle>105 <path d="M20 20l-4-4"></path>106 </svg>107 </div>108 <div class="icon-btn">109 <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">110 <rect x="3" y="6" width="18" height="12" rx="2"></rect>111 <circle cx="12" cy="12" r="3"></circle>112 </svg>113 </div>114 <div class="icon-btn">115 <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">116 <path d="M6 6h15l-2 10H7L6 6z"></path>117 <circle cx="9" cy="20" r="2"></circle>118 <circle cx="18" cy="20" r="2"></circle>119 </svg>120 </div>121 </div>122 123 <div class="row">124 <div class="left">125 <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#58adff" stroke-width="2">126 <path d="M12 21s-7-4.35-7-10a7 7 0 0114 0c0 5.65-7 10-7 10z"></path>127 </svg>128 <div>Save this search</div>129 </div>130 <div class="right">131 <div style="display:flex; align-items:center; gap: 10px;">132 <span>Sort</span>133 <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#8ec8ff" stroke-width="2">134 <path d="M8 7l4-4 4 4"></path>135 <path d="M16 17l-4 4-4-4"></path>136 </svg>137 </div>138 <div style="display:flex; align-items:center; gap: 10px;">139 <span>Filter</span>140 <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#8ec8ff" stroke-width="2">141 <path d="M3 5h18l-7 8v6l-4-2v-4L3 5z"></path>142 </svg>143 </div>144 </div>145 </div>146 147 <div class="section-title">Shop by US Shoe Size</div>148 149 <div class="size-chips">150 <div class="chip">5</div>151 <div class="chip">6</div>152 <div class="chip">6.5</div>153 <div class="chip">7</div>154 <div class="chip">7.5</div>155 <div class="chip">8</div>156 <div class="chip">8.5</div>157 </div>158 159 <div class="divider"></div>160 161 <div class="list">162 <div class="item">163 <div class="image">164 [IMG: Multicolor Clarks slip-on]165 <div class="like-badge">166 <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">167 <path d="M12 21s-7-4.35-7-10a7 7 0 0114 0c0 5.65-7 10-7 10z"></path>168 </svg>169 </div>170 </div>171 <div class="details">172 <div class="title">clarks womens shoes 8.5 new</div>173 <div class="meta">Brand New · Clarks · Multicolor · Slip-On</div>174 <div class="price">$160.00</div>175 <div class="shipping">Shipping not specified from United States</div>176 <div class="tag">Sponsored</div>177 </div>178 </div>179 180 <div class="divider"></div>181 182 <div class="item">183 <div class="image">184 [IMG: Brown moccasin cup leather shoe]185 <div class="like-badge">186 <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">187 <path d="M12 21s-7-4.35-7-10a7 7 0 0114 0c0 5.65-7 10-7 10z"></path>188 </svg>189 </div>190 </div>191 <div class="details">192 <div class="title">Clarks Originals Womens Wallabee Moccasin Cup Brown Leather Shoes</div>193 <div class="meta">Brand New</div>194 <div style="display:flex; align-items:center; gap:16px; margin-top:6px;">195 <div class="price" style="margin:0;">$74.99</div>196 <div class="strike">$160.00</div>197 <div class="green">53% off</div>198 </div>199 <div class="shipping">+$66.85 shipping from United States</div>200 <div class="badge">201 <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#bce2ff" stroke-width="2">202 <circle cx="12" cy="12" r="10"></circle>203 <path d="M7 12l3 3 7-7"></path>204 </svg>205 <span>Direct From Clarks</span>206 </div>207 </div>208 </div>209 210 <div class="divider"></div>211 212 <div class="item">213 <div class="image" style="background:#ffffff; color:#999;">214 [IMG: White leather moccasin shoe]215 <div class="like-badge">216 <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">217 <path d="M12 21s-7-4.35-7-10a7 7 0 0114 0c0 5.65-7 10-7 10z"></path>218 </svg>219 </div>220 </div>221 <div class="details">222 <div class="title">Clarks Originals Womens Wallabee Moccasin White Leather Shoes</div>223 <div class="meta">Brand New</div>224 </div>225 </div>226 </div>227 228 <div class="results-overlay">62,000+ results</div>229 230 <div class="bottom-nav">231 <div class="nav-item">232 <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="#cfcfcf" stroke-width="2">233 <path d="M3 11l9-8 9 8v9H3z"></path>234 <path d="M9 20v-6h6v6"></path>235 </svg>236 <div>Home</div>237 </div>238 <div class="nav-item">239 <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="#cfcfcf" stroke-width="2">240 <circle cx="12" cy="8" r="4"></circle>241 <path d="M4 22c0-4 4-7 8-7s8 3 8 7"></path>242 </svg>243 <div>My eBay</div>244 </div>245 <div class="nav-item active">246 <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="#4da3ff" stroke-width="2">247 <circle cx="11" cy="11" r="7"></circle>248 <path d="M20 20l-4-4"></path>249 </svg>250 <div>Search</div>251 </div>252 <div class="nav-item">253 <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="#cfcfcf" stroke-width="2">254 <path d="M6 8a6 6 0 0112 0v4l2 2H4l2-2V8z"></path>255 <path d="M9 20h6"></path>256 </svg>257 <div>Inbox</div>258 </div>259 <div class="nav-item">260 <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="#cfcfcf" stroke-width="2">261 <path d="M20 12l-8 8-6-6 8-8 6 6z"></path>262 <circle cx="8" cy="14" r="1.5" fill="#cfcfcf"></circle>263 </svg>264 <div>Selling</div>265 </div>266 </div>267 268</div>269</body>270</html>