GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Wrench kit UI</title>5<style>6 body { margin:0; padding:0; background:transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }7 #render-target {8 width:1080px; height:2400px; position:relative; overflow:hidden;9 background:#FFFFFF; border:1px solid #ddd; border-radius:24px;10 }11 .status-bar {12 height:90px; padding:0 32px; display:flex; align-items:center; justify-content:space-between; color:#222;13 font-weight:600; font-size:38px;14 }15 .status-icons { display:flex; align-items:center; gap:26px; color:#444; font-size:34px; }16 .header {17 height:120px; border-bottom:1px solid #eee; display:flex; align-items:center; padding:0 24px; gap:20px;18 }19 .icon-btn {20 width:90px; height:90px; display:flex; align-items:center; justify-content:center; border-radius:24px;21 }22 .header-title { font-size:44px; font-weight:700; color:#111; flex:1; }23 .header-actions { display:flex; align-items:center; gap:20px; }24 .tabs { display:flex; gap:38px; padding:22px 24px 12px 24px; border-bottom:1px solid #eee; font-size:34px; }25 .tab { color:#666; }26 .tab.active { color:#111; font-weight:700; position:relative; }27 .tab.active::after { content:""; position:absolute; left:0; bottom:-14px; width:100%; height:6px; background:#ff6f00; border-radius:6px; }28 .filters { display:flex; gap:18px; padding:22px 24px; align-items:center; }29 .chip {30 padding:18px 26px; border:1px solid #ddd; border-radius:36px; font-size:32px; color:#333; background:#fafafa;31 }32 .chip .caret { margin-left:8px; font-size:30px; color:#777; }33 .list {34 padding:24px;35 }36 .card { display:flex; gap:24px; padding:20px; border-bottom:1px solid #eee; }37 .img {38 width:280px; height:280px; background:#E0E0E0; border:1px solid #BDBDBD; display:flex; align-items:center; justify-content:center; color:#757575; text-align:center; font-size:28px; border-radius:12px;39 }40 .details { flex:1; }41 .title { font-size:36px; font-weight:700; color:#111; margin-bottom:8px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }42 .price { font-size:42px; font-weight:800; color:#111; margin:6px 0; }43 .sub { font-size:32px; color:#666; margin:6px 0; }44 .meta { font-size:30px; color:#999; margin-top:6px; display:flex; align-items:center; gap:12px; }45 .badge { display:inline-block; background:#f3f3f3; color:#555; font-size:30px; border-radius:28px; padding:10px 18px; margin-top:12px; }46 .safe-bottom { position:absolute; left:0; right:0; bottom:0; height:28px; background:#000; opacity:0.9; }47 /* floating help */48 .float-help {49 position:absolute; right:24px; bottom:90px; width:120px; height:120px; background:#fff; border:1px solid #ddd; border-radius:60px;50 box-shadow:0 8px 20px rgba(0,0,0,0.12); display:flex; align-items:center; justify-content:center;51 }52 /* small utility icon colors */53 svg { width:44px; height:44px; }54 .icon-small { width:40px; height:40px; }55</style>56</head>57<body>58<div id="render-target">59 60 <!-- Status bar -->61 <div class="status-bar">62 <div>3:08</div>63 <div class="status-icons">64 <span>✉️</span>65 <span>🔔</span>66 <span>📶</span>67 <span style="display:flex; align-items:center; gap:8px;">68 <svg class="icon-small" viewBox="0 0 24 24"><path d="M3 12h18" stroke="#222" stroke-width="2" fill="none"/></svg>69 <span>100%</span>70 </span>71 </div>72 </div>73 74 <!-- Header -->75 <div class="header">76 <div class="icon-btn">77 <svg viewBox="0 0 24 24"><path d="M15 6L9 12l6 6" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>78 </div>79 <div class="header-title">Wrench kit</div>80 <div class="header-actions">81 <div class="icon-btn">82 <!-- heart outline -->83 <svg viewBox="0 0 24 24"><path d="M12 21s-7-4.35-9-8.5C1 8.5 3.6 6 6.5 6c1.9 0 3.4 1.1 4.5 2.4C12.1 7.1 13.6 6 15.5 6 18.4 6 21 8.5 21 12.5 19 16.65 12 21 12 21z" stroke="#333" stroke-width="2" fill="none" stroke-linejoin="round"/></svg>84 </div>85 <div class="icon-btn">86 <!-- camera -->87 <svg viewBox="0 0 24 24"><rect x="3" y="6" width="18" height="12" rx="2" ry="2" stroke="#333" stroke-width="2" fill="none"/><path d="M9 6l2-3h2l2 3" stroke="#333" stroke-width="2" fill="none"/><circle cx="12" cy="12" r="3" stroke="#333" stroke-width="2" fill="none"/></svg>88 </div>89 <div class="icon-btn">90 <!-- sliders filter -->91 <svg viewBox="0 0 24 24"><path d="M4 6h16M4 12h10M4 18h16" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round"/><circle cx="18" cy="6" r="2" fill="#333"/><circle cx="14" cy="12" r="2" fill="#333"/><circle cx="8" cy="18" r="2" fill="#333"/></svg>92 </div>93 <div class="icon-btn">94 <!-- dots -->95 <svg viewBox="0 0 24 24"><circle cx="5" cy="12" r="2" fill="#333"/><circle cx="12" cy="12" r="2" fill="#333"/><circle cx="19" cy="12" r="2" fill="#333"/></svg>96 </div>97 </div>98 </div>99 100 <!-- Tabs -->101 <div class="tabs">102 <div class="tab active">All</div>103 <div class="tab">Customizable</div>104 <div class="tab">Ready to Ship</div>105 <div class="tab">Suppliers</div>106 </div>107 108 <!-- Filters -->109 <div class="filters">110 <div class="chip">Sort <span class="caret">▼</span></div>111 <div class="chip">Verified supplier</div>112 <div class="chip">Jaw capacity <span class="caret">▼</span></div>113 <div class="chip">Custom <span class="caret">▼</span></div>114 </div>115 116 <!-- List -->117 <div class="list">118 119 <!-- Card 1 -->120 <div class="card">121 <div class="img">[IMG: Wrench tool kits]</div>122 <div class="details">123 <div class="title">Complete tool set with wrenches and accessories</div>124 <div class="price">₹861.95 - ₹8,619.46</div>125 <div class="sub">Min. order: 1 piece</div>126 <div class="meta">11 yrs · JP <span style="background:#f9f9f9; border:1px solid #eee; padding:4px 10px; border-radius:10px; color:#888;">Ad</span></div>127 </div>128 </div>129 130 <!-- Card 2 -->131 <div class="card">132 <div class="img">[IMG: Blue tool set case]</div>133 <div class="details">134 <div class="title">FIXTEC Heavy Duty 234PCS Hand Tool Set</div>135 <div class="price">₹1,766.99</div>136 <div class="sub">Min. order: 4 pieces</div>137 <div class="meta">13 yrs · CN</div>138 </div>139 </div>140 141 <!-- Card 3 -->142 <div class="card">143 <div class="img">[IMG: Red auto repair tool set]</div>144 <div class="details">145 <div class="sub" style="color:#3a7bd5;">Easy Return · Ready to Ship</div>146 <div class="title">46 piece set of auto repair tools</div>147 <div class="price">₹236.18 - ₹253.42</div>148 <div class="sub">Shipping per piece: ₹4,694.16</div>149 <div class="sub">Min. order: 1 piece</div>150 <div class="meta">28 orders · 4 yrs · CN</div>151 <div class="badge">#2 hot selling</div>152 </div>153 </div>154 155 <!-- Card 4 -->156 <div class="card">157 <div class="img">[IMG: Orange household hand tools set]</div>158 <div class="details">159 <div class="title">Professional Household Hand Tools</div>160 <div class="price">₹1,292.92 - ₹1,551.51</div>161 <div class="sub">Min. order: 500 sets</div>162 <div class="meta">8 yrs · CN <span style="background:#f9f9f9; border:1px solid #eee; padding:4px 10px; border-radius:10px; color:#888;">Ad</span></div>163 </div>164 </div>165 166 <!-- Card 5 (partially visible) -->167 <div class="card">168 <div class="img">[IMG: Spanner Kit Combination]</div>169 <div class="details">170 <div class="title">Spanner Kit Combination Metric</div>171 <div class="price">₹1,206.73</div>172 </div>173 </div>174 175 </div>176 177 <!-- Floating help -->178 <div class="float-help">179 <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" stroke="#333" stroke-width="2" fill="none"/><path d="M12 16v-1.5c0-1.6 2-1.9 2-3.5a2.5 2.5 0 10-5 0" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round"/><circle cx="12" cy="18.5" r="1" fill="#333"/></svg>180 </div>181 182 <div class="safe-bottom"></div>183</div>184</body>185</html>