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>Search UI Replica</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;11 background: #ffffff; border-radius: 28px; box-shadow: 0 10px 30px rgba(0,0,0,0.25);12 }13 14 /* Header */15 .header { background: #0a84b4; color: #fff; }16 .status {17 height: 64px; display: flex; align-items: center; justify-content: space-between;18 padding: 0 24px; font-weight: 600; letter-spacing: .2px;19 }20 .appbar {21 height: 120px; display: flex; align-items: center; padding: 0 24px; gap: 20px;22 }23 .appbar-title { font-size: 42px; font-weight: 700; color: #fff; }24 .icon-btn { width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; }25 26 /* Sections */27 .section-label {28 background: #efefef; padding: 24px 32px; font-size: 34px; color: #6c6c6c;29 font-weight: 700; display: flex; align-items: center; justify-content: space-between;30 }31 .clear-link { color: #0a84b4; font-weight: 700; }32 .list-row {33 height: 110px; display: flex; align-items: center; padding: 0 32px;34 border-bottom: 1px solid #e0e0e0; background: #fff;35 }36 .list-row .text { font-size: 36px; color: #333; margin-left: 20px; }37 .icon { width: 48px; height: 48px; }38 39 /* Suggestions */40 .suggestions {41 position: relative; margin: 24px; padding: 24px; border-radius: 16px;42 background: linear-gradient(90deg, #e8f7e6, #e7f2fb);43 border: 1px solid #d8e6ec;44 }45 .suggest-title { font-size: 42px; color: #333; font-weight: 800; margin-bottom: 6px; }46 .suggest-sub { font-size: 28px; color: #777; margin-bottom: 24px; }47 .cards { display: flex; gap: 24px; }48 .card {49 width: 220px; background: #fff; border: 1px solid #e0e0e0; border-radius: 16px;50 padding: 20px; box-shadow: 0 1px 0 rgba(0,0,0,0.04);51 }52 .card .tag { font-size: 26px; color: #888; margin-top: 12px; }53 .card .title { font-size: 32px; color: #333; font-weight: 700; margin-top: 8px; }54 .card .discount { font-size: 28px; color: #1db954; font-weight: 700; margin-top: 10px; }55 .badge {56 position: absolute; right: 40px; top: 40px; width: 220px; height: 220px; border-radius: 110px;57 background: #E0E0E0; border: 1px solid #BDBDBD; color: #757575;58 display: flex; align-items: center; justify-content: center;59 }60 61 /* Trending */62 .trending {63 background: #efefef; padding: 24px 32px; font-size: 34px; color: #6c6c6c; font-weight: 700;64 }65 .trend-row {66 height: 110px; display: flex; align-items: center; padding: 0 32px; background: #fff;67 border-top: 1px solid #e0e0e0;68 }69 .trend-row .text { font-size: 36px; color: #333; margin-left: 20px; }70 71 /* Keyboard */72 .keyboard {73 position: absolute; left: 0; bottom: 0; width: 100%; height: 980px;74 background: #121518; border-top-left-radius: 24px; border-top-right-radius: 24px;75 padding: 32px; box-sizing: border-box;76 }77 .key-row { display: flex; gap: 16px; margin-bottom: 22px; justify-content: center; }78 .key {79 width: 80px; height: 100px; background: #1f2428; border-radius: 18px;80 display: flex; align-items: center; justify-content: center;81 color: #eaeaea; font-size: 40px;82 }83 .key.wide { width: 160px; }84 .bottom-bar { display: flex; align-items: center; gap: 16px; }85 .space { flex: 1; height: 110px; background: #1f2428; border-radius: 18px; }86 .special {87 width: 180px; height: 110px; background: #cfeeff; color: #0a84b4;88 border-radius: 999px; display: flex; align-items: center; justify-content: center;89 font-size: 40px; font-weight: 700;90 }91</style>92</head>93<body>94<div id="render-target">95 96 <!-- Header -->97 <div class="header">98 <div class="status">99 <div style="display:flex; align-items:center; gap: 10px;">100 <span style="font-size:34px;">8:03</span>101 <svg width="24" height="24" viewBox="0 0 24 24" fill="#fff" aria-hidden="true">102 <path d="M12 2l2 3h-4l2-3zm0 19a7 7 0 0 1-7-7h2a5 5 0 0 0 10 0h2a7 7 0 0 1-7 7z"/>103 </svg>104 </div>105 <div style="display:flex; align-items:center; gap: 18px;">106 <!-- WiFi-ish icon -->107 <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" aria-hidden="true">108 <path d="M2 8c5-4 15-4 20 0M5 12c3-3 11-3 14 0M9 16c2-2 6-2 8 0M12 21l1-1-1-1-1 1 1 1z"/>109 </svg>110 <!-- Battery -->111 <svg width="30" height="30" viewBox="0 0 24 24" fill="#fff" aria-hidden="true">112 <rect x="3" y="7" width="18" height="10" rx="2"/>113 <rect x="21" y="10" width="1.7" height="4"/>114 </svg>115 </div>116 </div>117 118 <div class="appbar">119 <div class="icon-btn">120 <svg class="icon" viewBox="0 0 24 24" fill="#fff" aria-hidden="true">121 <path d="M15.5 5.5L9 12l6.5 6.5-1.4 1.4L6.2 12l7.9-7.9 1.4 1.4z"/>122 </svg>123 </div>124 <div class="appbar-title">Search</div>125 <div style="flex:1"></div>126 <div class="icon-btn">127 <svg class="icon" viewBox="0 0 24 24" fill="#fff" aria-hidden="true">128 <path d="M12 14a4 4 0 0 0 4-4V7a4 4 0 0 0-8 0v3a4 4 0 0 0 4 4zM10 16h4v4h-4z"/>129 </svg>130 </div>131 </div>132 </div>133 134 <!-- Recent Searches -->135 <div class="section-label">Recent Searches <span class="clear-link">Clear</span></div>136 <div class="list-row">137 <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#777" stroke-width="2" aria-hidden="true">138 <circle cx="12" cy="12" r="9"/>139 <path d="M12 7v5l4 2"/>140 </svg>141 <div class="text">Nikon Coolpix With Charger</div>142 </div>143 144 <!-- You May Also Like -->145 <div class="suggestions">146 <div class="suggest-title">You May Also Like</div>147 <div class="suggest-sub">Inspired by your browsing history</div>148 149 <div class="badge">[IMG: Discount Badge]</div>150 151 <div class="cards">152 <div class="card">153 <div style="width:80px;height:80px;background:#E0E0E0;border:1px solid #BDBDBD;border-radius:12px;display:flex;align-items:center;justify-content:center;color:#757575;">[IMG: Jobs]</div>154 <div class="tag">Jobs</div>155 <div class="title">BPO/ Telecaller</div>156 <div class="discount">₹0 Discount</div>157 </div>158 <div class="card">159 <div style="width:80px;height:80px;background:#E0E0E0;border:1px solid #BDBDBD;border-radius:12px;display:flex;align-items:center;justify-content:center;color:#757575;">[IMG: Lifestyle]</div>160 <div class="tag">Lifestyle</div>161 <div class="title">Furniture</div>162 <div class="discount">₹0 Discount</div>163 </div>164 <div class="card">165 <div style="width:80px;height:80px;background:#E0E0E0;border:1px solid #BDBDBD;border-radius:12px;display:flex;align-items:center;justify-content:center;color:#757575;">[IMG: Electronics]</div>166 <div class="tag">Electronics</div>167 <div class="title">Refrigerators</div>168 <div class="discount">₹0 Discount</div>169 </div>170 <div class="card">171 <div style="width:80px;height:80px;background:#E0E0E0;border:1px solid #BDBDBD;border-radius:12px;display:flex;align-items:center;justify-content:center;color:#757575;">[IMG: Mobiles]</div>172 <div class="tag">Mobiles</div>173 <div class="title">Apple Clones</div>174 <div class="discount">₹0 Discount</div>175 </div>176 </div>177 </div>178 179 <!-- Trending -->180 <div class="trending">Trending Searches</div>181 <div class="trend-row">182 <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#777" stroke-width="2" aria-hidden="true">183 <path d="M3 17l5-5 4 4 7-7"/>184 <path d="M14 6h7v7"/>185 </svg>186 <div class="text">Apple Clones</div>187 </div>188 189 <!-- Keyboard -->190 <div class="keyboard">191 <div class="key-row">192 <div class="key">q</div><div class="key">w</div><div class="key">e</div><div class="key">r</div>193 <div class="key">t</div><div class="key">y</div><div class="key">u</div><div class="key">i</div>194 <div class="key">o</div><div class="key">p</div>195 </div>196 <div class="key-row">197 <div class="key">a</div><div class="key">s</div><div class="key">d</div><div class="key">f</div>198 <div class="key">g</div><div class="key">h</div><div class="key">j</div><div class="key">k</div>199 <div class="key">l</div>200 </div>201 <div class="key-row">202 <div class="key wide">shift</div><div class="key">z</div><div class="key">x</div><div class="key">c</div>203 <div class="key">v</div><div class="key">b</div><div class="key">n</div><div class="key">m</div>204 <div class="key wide">205 <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="#eaeaea" stroke-width="2" aria-hidden="true">206 <path d="M3 4l8 8-8 8M13 4l8 8-8 8"/>207 </svg>208 </div>209 </div>210 <div class="bottom-bar">211 <div class="key wide">?123</div>212 <div class="key">,</div>213 <div class="space"></div>214 <div class="key">.</div>215 <div class="special">216 <svg width="34" height="34" viewBox="0 0 24 24" fill="none" stroke="#0a84b4" stroke-width="2" aria-hidden="true">217 <circle cx="11" cy="11" r="7"/>218 <path d="M20 20l-4-4"/>219 </svg>220 </div>221 </div>222 </div>223 224</div>225</body>226</html>