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>Screwdriver Listing</title>7<style>8 body{margin:0;padding:0;background:transparent;font-family: Arial, Helvetica, sans-serif;}9 #render-target{10 width:1080px;height:2400px;position:relative;overflow:hidden;background:#ffffff;11 color:#222;12 }13 .status-bar{14 position:absolute;top:0;left:0;width:100%;height:110px;background:#5aa7ad;color:#fff;15 display:flex;align-items:center;justify-content:space-between;padding:0 40px;box-sizing:border-box;16 font-weight:600;17 }18 .status-left{font-size:34px;letter-spacing:1px;}19 .status-right{display:flex;gap:24px;align-items:center;}20 .dot{width:14px;height:14px;background:#fff;border-radius:50%;}21 .app-bar{22 position:absolute;top:110px;left:0;width:100%;height:150px;background:#ffffff;23 display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #e9ecef;24 padding:0 36px;box-sizing:border-box;25 }26 .app-title{font-size:48px;font-weight:800;letter-spacing:1px;}27 .icon-btn{width:84px;height:84px;border-radius:42px;display:flex;align-items:center;justify-content:center;}28 .icon-teal{color:#5aa7ad;}29 .filters-top{30 position:absolute;top:260px;left:0;width:100%;height:120px;background:#fff;border-bottom:1px solid #e9ecef;31 display:flex;32 }33 .filter-seg{34 flex:1;display:flex;align-items:center;justify-content:center;gap:18px;color:#6b7a86;font-size:38px;35 position:relative;36 }37 .filter-seg:not(:last-child)::after{38 content:"";position:absolute;right:0;top:22px;bottom:22px;width:1px;background:#e6eaee;39 }40 .badge{41 min-width:48px;height:48px;border-radius:24px;background:#5aa7ad;color:#fff;font-size:30px;42 display:inline-flex;align-items:center;justify-content:center;font-weight:700;43 }44 .chips{45 position:absolute;top:380px;left:0;width:100%;padding:24px 24px 16px;box-sizing:border-box;46 display:flex;gap:26px;overflow:hidden;border-bottom:1px solid #eef1f4;background:#f9fafb;47 }48 .chip{49 background:#fff;border-radius:18px;padding:26px 34px;font-size:36px;color:#666;50 box-shadow:0 2px 6px rgba(0,0,0,0.12);51 white-space:nowrap;52 }53 .content{54 position:absolute;top:500px;left:0;right:0;bottom:0;overflow:hidden;padding:12px 18px 24px;box-sizing:border-box;55 }56 .grid{57 display:flex;flex-wrap:wrap;gap:24px;justify-content:space-between;58 }59 .card{60 position:relative;background:#fff;border:1px solid #eef0f2;border-radius:16px;width:510px;61 overflow:hidden;62 }63 .img-box{64 height:520px;background:#E0E0E0;border-bottom:1px solid #BDBDBD;display:flex;align-items:center;justify-content:center;65 color:#757575;font-size:34px;text-align:center;padding:0 20px;box-sizing:border-box;66 }67 .fav{68 position:absolute;top:24px;right:24px;width:90px;height:90px;border-radius:45px;background:#fff;69 border:1px solid #e9ecef;display:flex;align-items:center;justify-content:center;70 box-shadow:0 2px 6px rgba(0,0,0,0.08);71 }72 .card-body{padding:24px 26px 30px;}73 .title{74 font-size:34px;color:#4f5b67;line-height:1.25;height:86px;overflow:hidden;75 }76 .price-row{display:flex;align-items:baseline;gap:18px;margin-top:12px;}77 .price{font-size:44px;font-weight:800;}78 .strike{font-size:32px;color:#9aa4ad;text-decoration:line-through;}79 .off{color:#18a0ac;font-size:34px;font-weight:700;margin-top:6px;}80 /* Simple SVG helper */81 svg{display:block}82</style>83</head>84<body>85<div id="render-target">86 87 <!-- Status bar -->88 <div class="status-bar">89 <div class="status-left">10:37</div>90 <div class="status-right">91 <div class="dot" title="ib"></div>92 <svg width="44" height="44" viewBox="0 0 24 24" fill="#fff"><path d="M10 20q-3 0-5.15-2.15T2 12t2.15-5.15T9.3 4q.35 0 .525.275T10 4.9q0 .25-.15.425T9.45 5.7Q7 6.3 5.5 8.4T4 12q0 3.35 2.325 5.675T12 20q3.05 0 5.175-1.9.225-.2.525-.2.35 0 .563.275t.137.625q-.1.55-.5.9Q15.75 22 12 22q-1 0-2-.2z"/></svg>93 <svg width="44" height="44" viewBox="0 0 24 24" fill="#fff"><path d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79L20 21.5 21.5 20l-6-6zM9.5 14A4.5 4.5 0 1 1 14 9.5 4.505 4.505 0 0 1 9.5 14z"/></svg>94 <svg width="44" height="44" viewBox="0 0 24 24" fill="#fff"><path d="M11 15h2v2h-2v-2zm0-8h2v6h-2V7zm1-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2z"/></svg>95 <svg width="44" height="44" viewBox="0 0 24 24" fill="#fff"><path d="M12 4l-6 4v8l6 4 6-4V8l-6-4z"/></svg>96 <div style="font-size:34px;">100%</div>97 </div>98 </div>99 100 <!-- App bar -->101 <div class="app-bar">102 <div class="icon-btn icon-teal" aria-label="Back">103 <svg width="50" height="50" viewBox="0 0 24 24" fill="none" stroke="#5aa7ad" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">104 <path d="M15 18l-6-6 6-6"/>105 </svg>106 </div>107 <div class="app-title">SCREWDRIVER</div>108 <div style="display:flex;gap:20px;">109 <div class="icon-btn icon-teal" aria-label="Search">110 <svg width="50" height="50" viewBox="0 0 24 24" fill="#5aa7ad"><path d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79L20 21.5 21.5 20l-6-6zM9.5 14A4.5 4.5 0 1 1 14 9.5 4.505 4.505 0 0 1 9.5 14z"/></svg>111 </div>112 <div class="icon-btn icon-teal" aria-label="Cart">113 <svg width="50" height="50" viewBox="0 0 24 24" fill="#5aa7ad"><path d="M7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zm10 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zM7.16 14l.84-2h7.45c.75 0 1.41-.41 1.75-1.03L21 6H6.21l-.94-2H2v2h2l3.6 7.59L6.25 16c-.11.23-.18.49-.18.76 0 .96.78 1.74 1.74 1.74H19v-2H8.53c-.14 0-.25-.11-.25-.25l.03-.11L9 14h-1.84z"/></svg>114 </div>115 </div>116 </div>117 118 <!-- Filter segmented control -->119 <div class="filters-top">120 <div class="filter-seg">121 <span>Category</span>122 <svg width="28" height="28" viewBox="0 0 24 24" fill="#6b7a86"><path d="M7 10l5 5 5-5z"/></svg>123 </div>124 <div class="filter-seg">125 <span class="badge">1</span>126 <span style="color:#5aa7ad;font-weight:700;">Filter</span>127 </div>128 <div class="filter-seg">129 <span>₹</span>130 <svg width="26" height="26" viewBox="0 0 24 24" fill="#6b7a86"><path d="M7 10l5 5 5-5"/></svg>131 <span>Price</span>132 </div>133 <div class="filter-seg">134 <svg width="26" height="26" viewBox="0 0 24 24" fill="#6b7a86"><path d="M3 18h6v-2H3v2zm0-5h12v-2H3v2zm0-7v2h18V6H3z"/></svg>135 <span>Sort</span>136 </div>137 </div>138 139 <!-- Chips -->140 <div class="chips">141 <div class="chip">Screwdrivers</div>142 <div class="chip">Cutting Tools</div>143 <div class="chip">Hand Tool Sets</div>144 </div>145 146 <!-- Content grid -->147 <div class="content">148 <div class="grid">149 <!-- Card 1 -->150 <div class="card">151 <div class="img-box">[IMG: Multi screwdriver fan layout]</div>152 <div class="fav">153 <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="#8aa0aa" stroke-width="2"><path d="M12 21s-6.7-4.35-9.33-7A5.5 5.5 0 1 1 12 6.09 5.5 5.5 0 1 1 21.33 14c-2.63 2.65-9.33 7-9.33 7z"/></svg>154 </div>155 <div class="card-body">156 <div class="title">Multi-screwdriver letsgrab 8 in 1 ...</div>157 <div class="price-row">158 <div class="price">₹299</div>159 <div class="strike">₹599</div>160 </div>161 <div class="off">50% off</div>162 </div>163 </div>164 165 <!-- Card 2 -->166 <div class="card">167 <div class="img-box">[IMG: 8 in 1 Screwdrivers Toolkit]</div>168 <div class="fav">169 <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="#8aa0aa" stroke-width="2"><path d="M12 21s-6.7-4.35-9.33-7A5.5 5.5 0 1 1 12 6.09 5.5 5.5 0 1 1 21.33 14c-2.63 2.65-9.33 7-9.33 7z"/></svg>170 </div>171 <div class="card-body">172 <div class="title">8 in 1 Screwdrivers Toolkit</div>173 <div class="price-row">174 <div class="price">₹299</div>175 <div class="strike">₹499</div>176 </div>177 <div class="off">40% off</div>178 </div>179 </div>180 181 <!-- Card 3 -->182 <div class="card">183 <div class="img-box">[IMG: Toolkit three pieces]</div>184 <div class="fav">185 <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="#8aa0aa" stroke-width="2"><path d="M12 21s-6.7-4.35-9.33-7A5.5 5.5 0 1 1 12 6.09 5.5 5.5 0 1 1 21.33 14c-2.63 2.65-9.33 7-9.33 7z"/></svg>186 </div>187 <div class="card-body">188 <div class="title">8 in 1 Screwdrivers Toolkit</div>189 <div class="price-row">190 <div class="price">₹299</div>191 <div class="strike">₹499</div>192 </div>193 <div class="off">40% off</div>194 </div>195 </div>196 197 <!-- Card 4 -->198 <div class="card">199 <div class="img-box">[IMG: Multi screwdriver fan layout]</div>200 <div class="fav">201 <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="#8aa0aa" stroke-width="2"><path d="M12 21s-6.7-4.35-9.33-7A5.5 5.5 0 1 1 12 6.09 5.5 5.5 0 1 1 21.33 14c-2.63 2.65-9.33 7-9.33 7z"/></svg>202 </div>203 <div class="card-body">204 <div class="title">Multi-screwdriver letsgrab 8 in 1 ...</div>205 <div class="price-row">206 <div class="price">₹299</div>207 <div class="strike">₹599</div>208 </div>209 <div class="off">50% off</div>210 </div>211 </div>212 </div>213 </div>214 215</div>216</body>217</html>