GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>Search Results - Peanut Butter</title>6<style>7 body { margin:0; padding:0; background: transparent; font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }8 #render-target {9 width:1080px; height:2400px; position:relative; overflow:hidden;10 background:#ffffff;11 }12 /* Status bar */13 .status-bar {14 height:120px; padding:0 36px; display:flex; align-items:center; justify-content:space-between; color:#000; font-weight:600; font-size:42px;15 }16 .status-icons { display:flex; align-items:center; gap:24px; }17 .icon-dot { width:18px; height:18px; background:#000; border-radius:50%; display:inline-block; }18 .battery {19 width:56px; height:28px; border:2px solid #333; border-radius:6px; position:relative;20 }21 .battery::after { content:""; position:absolute; right:-10px; top:8px; width:6px; height:12px; background:#333; border-radius:2px; }22 .battery .level { width:70%; height:100%; background:#333; }23 /* Search bar */24 .search-wrap { padding:0 24px; }25 .search-bar {26 height:120px; border:1px solid #DADCE0; border-radius:60px; display:flex; align-items:center; padding:0 28px; gap:24px;27 box-shadow:0 2px 0 rgba(0,0,0,0.02); font-size:42px; color:#222;28 }29 .search-input { flex:1; color:#222; }30 .search-muted { color:#757575; }31 .round-btn { width:72px; height:72px; border-radius:50%; display:flex; align-items:center; justify-content:center; }32 .search-actions { display:flex; align-items:center; gap:12px; color:#555; }33 /* Heading */34 .results-note { font-size:36px; color:#6F7782; padding:24px 32px 8px; }35 /* Grid */36 .grid { display:grid; grid-template-columns:repeat(2, 1fr); gap:24px; padding:0 24px; }37 .card {38 background:#fff; border:1px solid #E6E8EB; border-radius:28px; overflow:hidden;39 box-shadow:0 2px 0 rgba(0,0,0,0.02);40 }41 .card-inner { padding:24px; }42 .img {43 width:100%; height:300px; background:#E0E0E0; border:1px solid #BDBDBD;44 display:flex; align-items:center; justify-content:center; color:#757575; font-size:32px; border-radius:18px;45 }46 .badge {47 position:absolute; top:16px; left:16px; background:#2F80ED; color:#fff; font-size:28px; font-weight:700;48 padding:10px 16px; border-radius:12px;49 }50 .card-header { position:relative; padding:16px 24px 0; }51 .chip {52 display:inline-flex; align-items:center; gap:10px; background:#F1FFF1; color:#2E7D32; border:1px solid #CDE7CD; border-radius:20px;53 font-size:28px; padding:8px 12px; margin-bottom:8px;54 }55 .title { font-size:34px; color:#0E1726; line-height:1.25; margin:8px 0 6px; }56 .subtitle { font-size:28px; color:#7A8796; margin-bottom:10px; }57 .price-row { display:flex; align-items:center; justify-content:space-between; margin-top:8px; }58 .price { font-size:36px; color:#0E1726; font-weight:700; }59 .strike { font-size:30px; color:#9AA4B2; text-decoration:line-through; margin-left:10px; }60 .add-btn {61 padding:12px 28px; border:2px solid #2E7D32; color:#2E7D32; border-radius:16px; font-size:32px; font-weight:700; background:#fff;62 }63 /* Keyboard */64 .keyboard {65 position:absolute; left:0; right:0; bottom:84px; height:910px; background:#121212; color:#fff;66 border-top-left-radius:28px; border-top-right-radius:28px; box-shadow:0 -8px 24px rgba(0,0,0,0.25);67 }68 .kb-suggestions {69 height:120px; display:flex; align-items:center; gap:28px; padding:0 28px; color:#ddd; font-size:36px; border-bottom:1px solid #1E1E1E;70 }71 .kb-suggestions .pill {72 background:#1F1F1F; border:1px solid #2A2A2A; color:#eee; padding:12px 22px; border-radius:20px;73 }74 .kb-row { display:flex; gap:12px; padding:20px 28px; }75 .key {76 flex:1; height:110px; background:#1E1E1E; border-radius:18px; display:flex; align-items:center; justify-content:center; font-size:40px; color:#fff;77 border:1px solid #2A2A2A;78 }79 .key.small { flex:0 0 92px; }80 .key.medium { flex:0 0 140px; }81 .key.wide { flex:1 0 360px; }82 .key.space { flex:1; height:120px; }83 .kb-bottom { display:flex; gap:12px; padding:10px 28px 24px; }84 .gesture-bar {85 position:absolute; bottom:20px; left:50%; transform:translateX(-50%);86 width:320px; height:12px; background:#E5E5E5; border-radius:8px;87 }88 /* SVG icons */89 .icon { width:48px; height:48px; }90 .icon-24 { width:32px; height:32px; }91</style>92</head>93<body>94<div id="render-target">95 <!-- Status Bar -->96 <div class="status-bar">97 <div>8:41</div>98 <div class="status-icons">99 <span class="icon-dot"></span>100 <span style="width:34px; height:34px; border-radius:8px; border:2px solid #333; display:inline-block;"></span>101 <svg class="icon-24" viewBox="0 0 24 24"><path d="M3 18h18M6 14h12M9 10h6M12 6h0" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round"/></svg>102 <div class="battery"><div class="level"></div></div>103 </div>104 </div>105 106 <!-- Search Bar -->107 <div class="search-wrap">108 <div class="search-bar">109 <div class="round-btn">110 <svg class="icon" viewBox="0 0 24 24"><path d="M15 6l-6 6 6 6" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>111 </div>112 <div class="search-input">sundrop peanut <span class="search-muted">butter</span></div>113 <div class="search-actions">114 <svg class="icon" viewBox="0 0 24 24"><path d="M6 6l12 12M18 6L6 18" stroke="#666" stroke-width="2" stroke-linecap="round"/></svg>115 <svg class="icon" viewBox="0 0 24 24"><path d="M12 3c2 0 3 1.8 3 3.5V12c0 1.7-1 3-3 3s-3-1.3-3-3V6.5C9 4.8 10 3 12 3zM8 20h8" stroke="#666" stroke-width="2" fill="none" stroke-linecap="round"/></svg>116 </div>117 </div>118 </div>119 120 <!-- Results Note -->121 <div class="results-note">Showing results for "sundrop peanut butter"</div>122 123 <!-- Product Grid -->124 <div class="grid">125 <!-- Card 1 -->126 <div class="card">127 <div class="card-header">128 <div class="badge">MEGA SAVER</div>129 </div>130 <div class="card-inner">131 <div class="img">[IMG: Sundrop Peanut Butter Jar]</div>132 <div class="chip">133 <svg class="icon-24" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" stroke="#2E7D32" stroke-width="2" fill="none"/><path d="M12 7v6l4 2" stroke="#2E7D32" stroke-width="2" fill="none" stroke-linecap="round"/></svg>134 8 MINS135 </div>136 <div class="title">Sundrop Crunchy Peanut Butter</div>137 <div class="subtitle">924 g</div>138 <div class="price-row">139 <div>140 <span class="price">₹248</span>141 <span class="strike">₹250</span>142 </div>143 <button class="add-btn">ADD</button>144 </div>145 </div>146 </div>147 148 <!-- Card 2 -->149 <div class="card">150 <div class="card-header">151 <div class="badge">13% OFF</div>152 </div>153 <div class="card-inner">154 <div class="img">[IMG: The Whole Truth Peanut Butter Jar]</div>155 <div class="chip">156 <svg class="icon-24" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" stroke="#2E7D32" stroke-width="2" fill="none"/><path d="M12 7v6l4 2" stroke="#2E7D32" stroke-width="2" fill="none" stroke-linecap="round"/></svg>157 8 MINS158 </div>159 <div class="title">The Whole Truth Unsweetened & Crunchy...</div>160 <div class="subtitle">325 g</div>161 <div class="price-row">162 <div>163 <span class="price">₹172</span>164 <span class="strike">₹199</span>165 </div>166 <button class="add-btn">ADD</button>167 </div>168 </div>169 </div>170 171 <!-- Card 3 -->172 <div class="card">173 <div class="card-header">174 <div class="badge">13% OFF</div>175 </div>176 <div class="card-inner">177 <div class="img">[IMG: Pintola Natural Peanut Butter Jar]</div>178 <div class="chip">179 <svg class="icon-24" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" stroke="#2E7D32" stroke-width="2" fill="none"/><path d="M12 7v6l4 2" stroke="#2E7D32" stroke-width="2" fill="none" stroke-linecap="round"/></svg>180 8 MINS181 </div>182 <div class="title">Pintola 100% Natural Peanut Butter</div>183 <div class="subtitle">350 g</div>184 <div class="price-row">185 <div>186 <span class="price">₹189</span>187 <span class="strike">₹218</span>188 </div>189 <button class="add-btn">ADD</button>190 </div>191 </div>192 </div>193 194 <!-- Card 4 -->195 <div class="card">196 <div class="card-header">197 <div class="badge">16% OFF</div>198 </div>199 <div class="card-inner">200 <div class="img">[IMG: Fitness Pack Peanut Butter Tub]</div>201 <div class="chip">202 <svg class="icon-24" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" stroke="#2E7D32" stroke-width="2" fill="none"/><path d="M12 7v6l4 2" stroke="#2E7D32" stroke-width="2" fill="none" stroke-linecap="round"/></svg>203 8 MINS204 </div>205 <div class="title">Pintola Fitness Pack Peanut Butter</div>206 <div class="subtitle">1 kg</div>207 <div class="price-row">208 <div>209 <span class="price">₹399</span>210 <span class="strike">₹475</span>211 </div>212 <button class="add-btn">ADD</button>213 </div>214 </div>215 </div>216 </div>217 218 <!-- Keyboard Overlay -->219 <div class="keyboard">220 <div class="kb-suggestions">221 <span class="pill">butter</span>222 <span class="pill">Butter</span>223 <span class="pill">🧈</span>224 <div style="margin-left:auto; display:flex; align-items:center; gap:12px;">225 <svg class="icon" viewBox="0 0 24 24"><path d="M12 3c2 0 3 1.8 3 3.5V12c0 1.7-1 3-3 3s-3-1.3-3-3V6.5C9 4.8 10 3 12 3zM8 20h8" stroke="#bbb" stroke-width="2" fill="none" stroke-linecap="round"/></svg>226 </div>227 </div>228 <div class="kb-row">229 <div class="key">q</div><div class="key">w</div><div class="key">e</div><div class="key">r</div><div class="key">t</div><div class="key">y</div><div class="key">u</div><div class="key">i</div><div class="key">o</div><div class="key">p</div>230 </div>231 <div class="kb-row">232 <div class="key">a</div><div class="key">s</div><div class="key">d</div><div class="key">f</div><div class="key">g</div><div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>233 </div>234 <div class="kb-row">235 <div class="key medium">⇧</div>236 <div class="key">z</div><div class="key">x</div><div class="key">c</div><div class="key">v</div><div class="key">b</div><div class="key">n</div><div class="key">m</div>237 <div class="key medium">⌫</div>238 </div>239 <div class="kb-bottom">240 <div class="key medium">?123</div>241 <div class="key small">,</div>242 <div class="key medium">😊</div>243 <div class="key space">space</div>244 <div class="key small">.</div>245 <div class="key medium">⏎</div>246 </div>247 </div>248 249 <!-- Gesture bar -->250 <div class="gesture-bar"></div>251</div>252</body>253</html>