GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>eBay Search - Mock</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8 #render-target {9 width: 1080px; height: 2400px;10 position: relative; overflow: hidden;11 background: #FFFFFF;12 }13 14 /* Status bar */15 .status-bar {16 height: 96px;17 padding: 0 36px;18 display: flex; align-items: center; justify-content: space-between;19 color: #222; font-size: 38px; letter-spacing: 0.2px;20 }21 .status-right { display: flex; align-items: center; gap: 28px; }22 23 /* Search area */24 .search-wrap { padding: 0 32px; }25 .search-bar {26 height: 120px; border-radius: 60px;27 background: #F3F3F5;28 display: flex; align-items: center; gap: 28px;29 padding: 0 32px;30 }31 .search-input {32 flex: 1; color: #666; font-size: 44px;33 }34 .icon-btn { width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; }35 36 /* Tabs */37 .tabs {38 display: flex; gap: 40px;39 padding: 36px 48px 16px;40 font-size: 40px;41 }42 .tab-active { color: #2E6BE6; font-weight: 600; }43 .tab-inactive { color: #777; }44 .underline {45 width: 140px; height: 6px; background: #000; border-radius: 3px; margin-left: 48px;46 }47 48 /* Recent list */49 .recent-list {50 padding: 24px 48px 0;51 color: #111; font-size: 42px; line-height: 78px;52 }53 .recent-item { margin: 14px 0; }54 55 /* Keyboard */56 .keyboard {57 position: absolute; left: 0; bottom: 0;58 width: 100%; height: 900px;59 background: #F7F8FC; border-top: 1px solid #E4E7EE;60 }61 .kb-toolbar {62 height: 120px; padding: 0 36px; display: flex; align-items: center; gap: 46px;63 }64 .kb-icon {65 width: 80px; height: 80px; background: #EDEFF6; border-radius: 20px;66 display: flex; align-items: center; justify-content: center;67 border: 1px solid #DEE3EE;68 }69 .keys { padding: 10px 22px; }70 .row { display: grid; grid-template-columns: repeat(10, 1fr); gap: 18px; margin-bottom: 24px; }71 .key {72 height: 120px; background: #FFFFFF; border: 1px solid #E1E5EF;73 border-radius: 26px; display: flex; align-items: center; justify-content: center;74 color: #222; font-size: 46px; font-weight: 500;75 }76 .row2 { grid-template-columns: repeat(9, 1fr); }77 .row3 { grid-template-columns: 140px repeat(7, 1fr) 140px; }78 .key.pink { background: #F8D8E9; border-color: #F1C4DF; }79 .bottom-row {80 display: grid;81 grid-template-columns: 160px 120px 120px 1fr 120px 160px;82 gap: 18px;83 padding: 0 22px;84 }85 .space { background: #FFFFFF; border: 1px solid #E1E5EF; height: 120px; border-radius: 26px; display: flex; align-items: center; justify-content: center; color: #777; font-size: 40px; }86 .search-key {87 height: 120px; border-radius: 60px; background: #CBE27C; border: 1px solid #B6D86A;88 display: flex; align-items: center; justify-content: center;89 }90 91 /* Home pill */92 .home-pill {93 position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%);94 width: 240px; height: 14px; background: #CFCFD3; border-radius: 7px;95 }96</style>97</head>98<body>99<div id="render-target">100 101 <!-- Status Bar -->102 <div class="status-bar">103 <div>5:14</div>104 <div class="status-right">105 <!-- simple "sun" icon -->106 <svg width="40" height="40" viewBox="0 0 40 40">107 <circle cx="20" cy="20" r="8" fill="#7F7F7F"></circle>108 <circle cx="20" cy="20" r="18" stroke="#9C9C9C" stroke-dasharray="2 6" fill="none"></circle>109 </svg>110 <!-- Wifi -->111 <svg width="40" height="40" viewBox="0 0 40 40">112 <path d="M7 16c9-8 17-8 26 0" stroke="#666" stroke-width="3" fill="none" />113 <path d="M12 22c6-5 10-5 16 0" stroke="#666" stroke-width="3" fill="none" />114 <circle cx="20" cy="28" r="3" fill="#666"></circle>115 </svg>116 <!-- Battery -->117 <svg width="60" height="40" viewBox="0 0 60 40">118 <rect x="2" y="8" width="48" height="24" rx="5" ry="5" stroke="#666" fill="none" stroke-width="3"></rect>119 <rect x="6" y="12" width="36" height="16" rx="3" fill="#666"></rect>120 <rect x="52" y="14" width="6" height="12" rx="2" fill="#666"></rect>121 </svg>122 </div>123 </div>124 125 <!-- Search Bar -->126 <div class="search-wrap">127 <div class="search-bar">128 <!-- back arrow -->129 <div class="icon-btn">130 <svg width="54" height="54" viewBox="0 0 54 54">131 <path d="M30 12 L14 27 L30 42" stroke="#333" stroke-width="6" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>132 </svg>133 </div>134 <div class="search-input">Search on eBay</div>135 <div class="icon-btn">136 <svg width="48" height="48" viewBox="0 0 48 48">137 <path d="M24 10c4 0 7 3 7 7v8c0 4-3 7-7 7s-7-3-7-7v-8c0-4 3-7 7-7z" fill="none" stroke="#333" stroke-width="3"></path>138 <path d="M18 30v3c0 3 2 5 6 5s6-2 6-5v-3" stroke="#333" stroke-width="3" fill="none"></path>139 </svg>140 </div>141 <div class="icon-btn">142 <svg width="52" height="52" viewBox="0 0 52 52">143 <rect x="8" y="14" width="36" height="24" rx="6" stroke="#333" stroke-width="3" fill="none"></rect>144 <circle cx="26" cy="26" r="6" stroke="#333" stroke-width="3" fill="none"></circle>145 <rect x="18" y="10" width="16" height="6" rx="3" fill="#333"></rect>146 </svg>147 </div>148 </div>149 </div>150 151 <!-- Tabs -->152 <div class="tabs">153 <div class="tab-active">Recent</div>154 <div class="tab-inactive">Saved</div>155 </div>156 <div class="underline"></div>157 158 <!-- Recent Items -->159 <div class="recent-list">160 <div class="recent-item">hiking boots women size 9</div>161 <div class="recent-item">hiking boots</div>162 <div class="recent-item">soccer training book by Malcolm</div>163 <div class="recent-item">Al-Nassr Ronaldo #7 soccer jerseys</div>164 <div class="recent-item">Al-Nassr Ronaldo #7 soccer jersey</div>165 <div class="recent-item">Ronaldo #7 soccer jersey L size</div>166 <div class="recent-item">soccer jersey</div>167 <div class="recent-item">soccer training book by malcom</div>168 </div>169 170 <!-- Keyboard -->171 <div class="keyboard">172 <div class="kb-toolbar">173 <div class="kb-icon">174 <svg width="42" height="42" viewBox="0 0 42 42">175 <rect x="6" y="6" width="9" height="9" fill="#606980"></rect>176 <rect x="17" y="6" width="9" height="9" fill="#606980"></rect>177 <rect x="28" y="6" width="9" height="9" fill="#606980"></rect>178 <rect x="6" y="17" width="9" height="9" fill="#606980"></rect>179 <rect x="17" y="17" width="9" height="9" fill="#606980"></rect>180 <rect x="28" y="17" width="9" height="9" fill="#606980"></rect>181 </svg>182 </div>183 <div class="kb-icon">184 <svg width="42" height="42" viewBox="0 0 42 42">185 <circle cx="21" cy="16" r="8" stroke="#606980" stroke-width="3" fill="none"></circle>186 <path d="M12 30c6 4 12 4 18 0" stroke="#606980" stroke-width="3" fill="none"></path>187 </svg>188 </div>189 <div class="kb-icon">190 <svg width="42" height="42" viewBox="0 0 42 42">191 <rect x="8" y="10" width="26" height="20" rx="4" stroke="#606980" stroke-width="3" fill="none"></rect>192 <text x="21" y="25" font-size="12" text-anchor="middle" fill="#606980">GIF</text>193 </svg>194 </div>195 <div class="kb-icon">196 <svg width="42" height="42" viewBox="0 0 42 42">197 <circle cx="21" cy="21" r="14" stroke="#606980" stroke-width="3" fill="none"></circle>198 <path d="M21 12v9l6 3" stroke="#606980" stroke-width="3" fill="none"></path>199 </svg>200 </div>201 <div class="kb-icon">202 <svg width="42" height="42" viewBox="0 0 42 42">203 <path d="M6 30l10-22 10 22" stroke="#606980" stroke-width="3" fill="none"></path>204 <circle cx="30" cy="14" r="4" fill="#606980"></circle>205 </svg>206 </div>207 <div style="margin-left:auto" class="kb-icon">208 <svg width="42" height="42" viewBox="0 0 42 42">209 <path d="M21 10c4 0 7 3 7 7v8c0 4-3 7-7 7s-7-3-7-7v-8c0-4 3-7 7-7z" fill="none" stroke="#606980" stroke-width="3"></path>210 </svg>211 </div>212 </div>213 214 <div class="keys">215 <div class="row">216 <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>217 </div>218 <div class="row row2">219 <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>220 </div>221 <div class="row row3">222 <div class="key pink">223 <svg width="48" height="48" viewBox="0 0 48 48">224 <path d="M10 30l14-18 14 18" stroke="#7A2A4E" stroke-width="4" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>225 </svg>226 </div>227 <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>228 <div class="key pink">229 <svg width="48" height="48" viewBox="0 0 48 48">230 <path d="M32 16l-16 16" stroke="#7A2A4E" stroke-width="4" />231 <path d="M32 32l-16-16" stroke="#7A2A4E" stroke-width="4" />232 </svg>233 </div>234 </div>235 </div>236 237 <div class="bottom-row">238 <div class="key pink">?123</div>239 <div class="key">,</div>240 <div class="key">241 <svg width="44" height="44" viewBox="0 0 44 44">242 <circle cx="22" cy="22" r="14" stroke="#666" stroke-width="3" fill="none"></circle>243 <circle cx="22" cy="22" r="4" fill="#666"></circle>244 </svg>245 </div>246 <div class="space">space</div>247 <div class="key">.</div>248 <div class="search-key">249 <svg width="64" height="64" viewBox="0 0 64 64">250 <circle cx="28" cy="28" r="18" stroke="#446220" stroke-width="4" fill="none"></circle>251 <path d="M42 42l16 16" stroke="#446220" stroke-width="4"></path>252 </svg>253 </div>254 </div>255 </div>256 257 <div class="home-pill"></div>258</div>259</body>260</html>