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>UI Render - Screwdriver Set Search</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }9 #render-target {10 width: 1080px; height: 2400px; position: relative; overflow: hidden;11 background: #0B0B0B; color: #FFFFFF;12 }13 .content { padding: 48px 36px 0 36px; }14 .topbar { display: flex; align-items: center; justify-content: space-between; }15 .title-wrap { display: flex; align-items: center; gap: 24px; }16 .top-title { font-size: 56px; font-weight: 700; letter-spacing: 0.2px; }17 .back-btn svg { width: 48px; height: 48px; }18 .actions { display: flex; align-items: center; gap: 24px; }19 .circle-btn {20 width: 96px; height: 96px; border-radius: 48px;21 background: #1A1A1A; display: flex; align-items: center; justify-content: center;22 }23 .circle-btn svg { width: 44px; height: 44px; fill: none; stroke: #FFFFFF; stroke-width: 3; }24 .badge-dot {25 position: absolute; right: 18px; top: 10px; width: 36px; height: 36px; border-radius: 18px;26 background: #FF3B30; color: #fff; font-size: 24px; display: flex; align-items: center; justify-content: center; font-weight: 700;27 }28 29 .util-row { display: flex; align-items: center; justify-content: space-between; margin-top: 32px; }30 .save-link { display: flex; align-items: center; gap: 16px; color: #3B82F6; font-size: 34px; font-weight: 600; }31 .save-link svg { width: 38px; height: 38px; stroke: #3B82F6; fill: none; stroke-width: 3; }32 .sort-filter { display: flex; align-items: center; gap: 36px; color: #74A2FF; font-size: 34px; font-weight: 600; }33 .sort-filter .icon { width: 34px; height: 34px; stroke: #74A2FF; fill: none; stroke-width: 3; vertical-align: middle; }34 35 .section-title { margin-top: 48px; font-size: 44px; font-weight: 800; }36 .chips { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 22px; }37 .chip {38 padding: 20px 28px; border-radius: 999px; font-size: 32px; font-weight: 600;39 background: #1B1B1B; border: 2px solid #3A3A3A; color: #EAEAEA;40 }41 42 .divider { height: 2px; background: #202020; margin: 40px 0; }43 44 .card { background: #181818; border-radius: 24px; padding: 24px; display: flex; gap: 24px; }45 .thumb {46 width: 300px; height: 300px; border-radius: 28px;47 background: #E0E0E0; border: 1px solid #BDBDBD; color: #757575;48 display: flex; align-items: center; justify-content: center; text-align: center; font-size: 28px; font-weight: 600;49 position: relative;50 }51 .thumb .heart {52 position: absolute; right: 16px; top: 16px; width: 44px; height: 44px; border-radius: 22px; background: rgba(0,0,0,0.35);53 display: flex; align-items: center; justify-content: center;54 }55 .thumb .heart svg { width: 26px; height: 26px; stroke: #FFFFFF; fill: none; stroke-width: 3; }56 57 .details { flex: 1; }58 .title { font-size: 38px; font-weight: 700; line-height: 1.25; }59 .meta { margin-top: 8px; color: #BFBFBF; font-size: 28px; }60 .rating { display: flex; align-items: center; gap: 8px; margin-top: 16px; }61 .rating svg { width: 28px; height: 28px; fill: #FFFFFF; stroke: none; }62 .rating .count { color: #BFBFBF; font-size: 28px; margin-left: 8px; }63 .price { margin-top: 12px; font-size: 54px; font-weight: 800; }64 .shipping { color: #BFBFBF; font-size: 28px; margin-top: 6px; }65 .sold { color: #BFBFBF; font-size: 28px; margin-top: 2px; }66 67 .sponsored { color: #9C9C9C; font-size: 26px; margin: 8px 0 24px 0; }68 69 .results-count { text-align: center; color: #DADADA; font-size: 36px; margin: 36px 0; }70 71 /* Bottom Navigation */72 .bottom-nav {73 position: absolute; left: 0; bottom: 0; width: 100%; height: 200px; background: #121212;74 border-top: 1px solid #232323; display: flex; align-items: center; justify-content: space-around;75 }76 .nav-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; color: #D6D6D6; }77 .nav-item svg { width: 48px; height: 48px; stroke: #D6D6D6; fill: none; stroke-width: 3; }78 .nav-item.active svg { stroke: #3B82F6; }79 .nav-item.active { color: #3B82F6; }80 .nav-label { font-size: 28px; font-weight: 600; }81 .nav-badge {82 position: absolute; margin-left: 32px; margin-top: -64px;83 width: 40px; height: 40px; border-radius: 20px; background: #FF3B30; color: #fff; font-size: 26px;84 display: flex; align-items: center; justify-content: center; font-weight: 800;85 }86</style>87</head>88<body>89<div id="render-target">90 <div class="content">91 <!-- Top bar -->92 <div class="topbar">93 <div class="title-wrap">94 <div class="back-btn">95 <svg viewBox="0 0 24 24">96 <path d="M15 4 L7 12 L15 20" stroke="#FFFFFF" stroke-width="3" fill="none" />97 </svg>98 </div>99 <div class="top-title">screwdriver set</div>100 </div>101 <div class="actions">102 <div class="circle-btn" aria-label="Search">103 <svg viewBox="0 0 24 24">104 <circle cx="10" cy="10" r="7"></circle>105 <line x1="16" y1="16" x2="22" y2="22"></line>106 </svg>107 </div>108 <div class="circle-btn" aria-label="Camera">109 <svg viewBox="0 0 24 24">110 <rect x="4" y="7" width="16" height="12" rx="2"></rect>111 <circle cx="12" cy="13" r="4"></circle>112 <path d="M9 7 L11 4 L13 7" stroke="#FFFFFF" fill="none"></path>113 </svg>114 </div>115 <div class="circle-btn" style="position: relative;" aria-label="Cart">116 <svg viewBox="0 0 24 24">117 <path d="M3 5 H6 L7 13 H18 L20 8 H8" stroke="#FFFFFF" fill="none"></path>118 <circle cx="9" cy="19" r="2"></circle>119 <circle cx="17" cy="19" r="2"></circle>120 </svg>121 <div class="badge-dot">1</div>122 </div>123 </div>124 </div>125 126 <!-- Save / Sort / Filter -->127 <div class="util-row">128 <div class="save-link">129 <svg viewBox="0 0 24 24">130 <path d="M12 21 C12 21 4 14 4 9 A4 4 0 0 1 12 7 A4 4 0 0 1 20 9 C20 14 12 21 12 21"></path>131 </svg>132 <span>Save this search</span>133 </div>134 <div class="sort-filter">135 <span>Sort</span>136 <svg class="icon" viewBox="0 0 24 24"><path d="M8 6 L12 10 L16 6"></path><path d="M16 18 L12 14 L8 18"></path></svg>137 <span>Filter</span>138 <svg class="icon" viewBox="0 0 24 24"><path d="M3 5 H21 L14 12 V19 L10 21 V12 Z"></path></svg>139 </div>140 </div>141 142 <!-- Shop by Brand -->143 <div class="section-title">Shop by Brand</div>144 <div class="chips">145 <div class="chip">Craftsman</div>146 <div class="chip">Snap-on</div>147 <div class="chip">Milwaukee</div>148 <div class="chip">Klein Tools</div>149 </div>150 151 <div class="divider"></div>152 153 <!-- Card 1 -->154 <div class="card">155 <div class="thumb">156 [IMG: Precision Screwdriver Set with Bits]157 <div class="heart">158 <svg viewBox="0 0 24 24"><path d="M12 21 C12 21 4 14 4 9 A4 4 0 0 1 12 7 A4 4 0 0 1 20 9 C20 14 12 21 12 21"></path></svg>159 </div>160 </div>161 <div class="details">162 <div class="title">WIREHARD 62 in 1 Precision Screwdriver Set Computer Repair Tool Kit Magnetic Bit</div>163 <div class="meta">Brand New · WIREHARD · Additional Bits</div>164 <div class="rating">165 <svg viewBox="0 0 24 24"><path d="M12 2 L15 9 L22 9 L17 14 L19 21 L12 17 L5 21 L7 14 L2 9 L9 9 Z"></path></svg>166 <svg viewBox="0 0 24 24"><path d="M12 2 L15 9 L22 9 L17 14 L19 21 L12 17 L5 21 L7 14 L2 9 L9 9 Z"></path></svg>167 <svg viewBox="0 0 24 24"><path d="M12 2 L15 9 L22 9 L17 14 L19 21 L12 17 L5 21 L7 14 L2 9 L9 9 Z"></path></svg>168 <svg viewBox="0 0 24 24"><path d="M12 2 L15 9 L22 9 L17 14 L19 21 L12 17 L5 21 L7 14 L2 9 L9 9 Z"></path></svg>169 <svg viewBox="0 0 24 24"><path d="M12 2 L15 9 L22 9 L17 14 L19 21 L12 17 L5 21 L7 14 L2 9 L9 9 Z"></path></svg>170 <span class="count">(16)</span>171 </div>172 <div class="price">$12.99</div>173 <div class="shipping">+$24.80 shipping · from United States</div>174 <div class="sold">1,384 sold</div>175 </div>176 </div>177 <div class="sponsored">Sponsored</div>178 179 <!-- Card 2 -->180 <div class="card" style="margin-top: 8px;">181 <div class="thumb">182 [IMG: Magnetic Screwdriver Set with Case]183 <div class="heart">184 <svg viewBox="0 0 24 24"><path d="M12 21 C12 21 4 14 4 9 A4 4 0 0 1 12 7 A4 4 0 0 1 20 9 C20 14 12 21 12 21"></path></svg>185 </div>186 </div>187 <div class="details">188 <div class="title">58 in 1 Magnetic Screwdriver Set Slotted Phillips Torx Pozidriv Hex With Case</div>189 <div class="meta">Brand New · HORUSDY · Cushion Grip</div>190 <div class="price">$29.99</div>191 <div class="shipping">+$61.99 shipping · from United States</div>192 <div class="sold">175 sold</div>193 </div>194 </div>195 196 <div class="divider"></div>197 198 <div class="results-count">13,000+ results</div>199 </div>200 201 <!-- Bottom Navigation -->202 <div class="bottom-nav">203 <div class="nav-item">204 <svg viewBox="0 0 24 24"><path d="M3 11 L12 3 L21 11 V21 H14 V15 H10 V21 H3 Z"></path></svg>205 <div class="nav-label">Home</div>206 </div>207 <div class="nav-item">208 <svg viewBox="0 0 24 24">209 <circle cx="12" cy="8" r="5"></circle>210 <path d="M4 22 C4 16 20 16 20 22"></path>211 </svg>212 <div class="nav-label">My eBay</div>213 </div>214 <div class="nav-item active">215 <svg viewBox="0 0 24 24">216 <circle cx="10" cy="10" r="7"></circle>217 <line x1="16" y1="16" x2="22" y2="22"></line>218 </svg>219 <div class="nav-label">Search</div>220 </div>221 <div class="nav-item" style="position: relative;">222 <svg viewBox="0 0 24 24">223 <path d="M6 8 A6 6 0 0 1 18 8 V16 H6 Z" fill="none"></path>224 <path d="M10 3 H14 V6 H10 Z"></path>225 </svg>226 <div class="nav-label">Inbox</div>227 <div class="nav-badge">1</div>228 </div>229 <div class="nav-item">230 <svg viewBox="0 0 24 24">231 <path d="M4 7 L14 7 L20 13 L14 19 L4 19 Z"></path>232 <circle cx="7" cy="13" r="2"></circle>233 </svg>234 <div class="nav-label">Selling</div>235 </div>236 </div>237</div>238</body>239</html>