GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">5<meta name="viewport" content="width=1080, initial-scale=1">6<title>Search History Screen</title>7<style>8 body { margin: 0; padding: 0; background: transparent; }9 #render-target {10 position: relative;11 width: 1080px;12 height: 2400px;13 overflow: hidden;14 background: #F7F5F3;15 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;16 color: #222;17 }18 19 /* Status bar */20 .status-bar {21 position: absolute;22 top: 0; left: 0; right: 0;23 height: 120px;24 background: #D8D8D8;25 display: flex;26 align-items: center;27 padding: 0 36px;28 box-sizing: border-box;29 font-size: 38px;30 color: #111;31 }32 .status-left { flex: 1; }33 .status-right {34 display: flex; align-items: center; gap: 26px;35 }36 .icon {37 width: 44px; height: 44px;38 }39 40 /* Header area */41 .header-area {42 position: absolute;43 top: 120px; left: 0; right: 0;44 height: 320px;45 background: #F3F1EE;46 box-sizing: border-box;47 }48 .back-wrap {49 position: absolute;50 top: 36px;51 left: 36px;52 width: 80px; height: 80px;53 display: flex; align-items: center; justify-content: center;54 }55 .clear-btn {56 position: absolute;57 top: 52px; right: 40px;58 font-size: 40px; color: #333;59 }60 .title {61 position: absolute;62 left: 48px;63 bottom: 40px;64 font-size: 58px;65 font-weight: 700;66 letter-spacing: 0.2px;67 }68 69 /* List */70 .list {71 position: absolute;72 top: 440px; left: 0; right: 0;73 background: #FFFFFF;74 }75 .list-item {76 height: 180px;77 display: flex;78 align-items: center;79 padding: 0 36px 0 48px;80 box-sizing: border-box;81 border-bottom: 1px solid #EFEFEF;82 }83 .clock {84 width: 84px; height: 84px;85 border: 3px solid #222;86 border-radius: 50%;87 margin-right: 28px;88 position: relative;89 }90 .clock::before, .clock::after {91 content: "";92 position: absolute;93 background: #222;94 left: 50%; top: 50%;95 transform-origin: left top;96 }97 .clock::before {98 width: 3px; height: 22px; transform: translate(-1px, -2px) rotate(0deg);99 }100 .clock::after {101 width: 30px; height: 3px; transform: translate(0px, -1px) rotate(0deg);102 }103 .item-text {104 font-size: 44px; color: #333;105 flex: 1;106 }107 .arrow-right {108 width: 56px; height: 56px;109 }110 111 /* Spacer area (blank content) */112 .spacer {113 position: absolute;114 top: 440px; /* start at list top */115 left: 0; right: 0;116 }117 /* compute spacer position after two items */118 .blank-area {119 position: absolute;120 top: calc(440px + 180px * 2); /* below 2 list items */121 left: 0; right: 0;122 height: 700px; /* big empty area */123 background: #F7F5F3;124 border-top: 1px solid #EFEDEA;125 }126 127 /* Bottom tools bar */128 .tools-bar {129 position: absolute;130 left: 0; right: 0;131 bottom: 700px; /* sits above keyboard */132 height: 200px;133 background: #FFFFFF;134 border-top: 1px solid #E9E9E9;135 display: flex;136 align-items: center;137 justify-content: space-around;138 box-sizing: border-box;139 }140 .tool {141 display: flex; flex-direction: column; align-items: center; gap: 16px;142 color: #444;143 }144 .tool svg { width: 64px; height: 64px; }145 .tool span { font-size: 32px; }146 147 /* Keyboard */148 .keyboard {149 position: absolute;150 left: 0; right: 0; bottom: 0;151 height: 700px;152 background: #EFEFF0;153 border-top: 1px solid #DCDCDC;154 box-sizing: border-box;155 }156 .kb-toolbar {157 height: 84px;158 display: flex; align-items: center; gap: 36px;159 padding: 0 28px;160 }161 .kb-dot {162 width: 52px; height: 52px; background: #D4DADE; border-radius: 12px;163 }164 .kb-rows { padding: 8px 18px 0; }165 .row {166 display: flex; gap: 12px; justify-content: center;167 margin: 12px 0;168 }169 .key {170 background: #FFFFFF;171 border-radius: 18px;172 min-width: 80px; height: 110px;173 display: flex; align-items: center; justify-content: center;174 font-size: 44px; color: #222;175 box-shadow: 0 1px 0 rgba(0,0,0,0.08);176 }177 .key.small { min-width: 100px; }178 .key.wide { min-width: 520px; }179 .key.med { min-width: 150px; }180 .key.gray { background: #D7DCE0; color: #1a1a1a; }181 .home-indicator {182 width: 300px; height: 10px; border-radius: 5px; background: #9E9E9E;183 position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%);184 }185</style>186</head>187<body>188<div id="render-target">189 190 <!-- Status bar -->191 <div class="status-bar">192 <div class="status-left">12:51</div>193 <div class="status-right">194 <!-- WiFi -->195 <svg class="icon" viewBox="0 0 24 24"><path d="M2 8c5-5 15-5 20 0l-2 2c-4-4-12-4-16 0L2 8zm4 4c3-3 9-3 12 0l-2 2c-2-2-6-2-8 0l-2-2zm4 4c1-1 3-1 4 0l-2 2-2-2z" fill="#111"/></svg>196 <!-- Battery -->197 <svg class="icon" viewBox="0 0 24 24">198 <rect x="2" y="6" width="18" height="12" rx="2" ry="2" fill="none" stroke="#111" stroke-width="2"/>199 <rect x="4" y="8" width="12" height="8" fill="#111"/>200 <rect x="20" y="10" width="2" height="4" fill="#111"/>201 </svg>202 </div>203 </div>204 205 <!-- Header / top controls -->206 <div class="header-area">207 <div class="back-wrap">208 <svg viewBox="0 0 24 24" class="icon" style="width:64px;height:64px;">209 <path d="M15 18 9 12l6-6" stroke="#111" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>210 </svg>211 </div>212 <div class="clear-btn">Clear</div>213 <div class="title">Search history</div>214 </div>215 216 <!-- List items -->217 <div class="list" style="top: 440px;">218 <div class="list-item">219 <div class="clock"></div>220 <div class="item-text">sneakers</div>221 <svg class="arrow-right" viewBox="0 0 24 24">222 <path d="M9 18l6-6-6-6" fill="none" stroke="#222" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>223 </svg>224 </div>225 <div class="list-item">226 <div class="clock"></div>227 <div class="item-text">canvas trainers</div>228 <svg class="arrow-right" viewBox="0 0 24 24">229 <path d="M9 18l6-6-6-6" fill="none" stroke="#222" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>230 </svg>231 </div>232 </div>233 234 <!-- Blank area under list -->235 <div class="blank-area"></div>236 237 <!-- Bottom tools bar -->238 <div class="tools-bar">239 <div class="tool">240 <svg viewBox="0 0 24 24">241 <rect x="3" y="7" width="18" height="12" rx="2" ry="2" fill="none" stroke="#222" stroke-width="2"/>242 <circle cx="12" cy="13" r="3" fill="none" stroke="#222" stroke-width="2"/>243 <rect x="7" y="5" width="4" height="2" rx="1" fill="#222"/>244 </svg>245 <span>Take photo</span>246 </div>247 <div class="tool">248 <svg viewBox="0 0 24 24">249 <rect x="5" y="5" width="14" height="14" rx="2" ry="2" fill="none" stroke="#222" stroke-width="2"/>250 <path d="M8 5v4M5 8h4M16 19v-4M19 16h-4" stroke="#222" stroke-width="2"/>251 </svg>252 <span>Scan Code</span>253 </div>254 <div class="tool">255 <svg viewBox="0 0 24 24">256 <path d="M12 22s7-6 7-11a7 7 0 1 0-14 0c0 5 7 11 7 11z" fill="none" stroke="#222" stroke-width="2"/>257 <circle cx="12" cy="11" r="2.5" fill="none" stroke="#222" stroke-width="2"/>258 </svg>259 <span>Find stores</span>260 </div>261 </div>262 263 <!-- Keyboard area -->264 <div class="keyboard">265 <div class="kb-toolbar">266 <div class="kb-dot"></div>267 <div class="kb-dot"></div>268 <div class="kb-dot" style="width:84px;"></div>269 <div class="kb-dot" style="width:64px;"></div>270 <div class="kb-dot" style="width:64px;"></div>271 <div class="kb-dot" style="width:64px;"></div>272 <div class="kb-dot" style="width:64px;"></div>273 </div>274 <div class="kb-rows">275 <div class="row">276 <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>277 <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>278 </div>279 <div class="row">280 <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>281 <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>282 </div>283 <div class="row">284 <div class="key gray small">⇧</div>285 <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>286 <div class="key">n</div><div class="key">m</div>287 <div class="key gray small">288 <svg viewBox="0 0 24 24" style="width:40px;height:40px;">289 <path d="M6 6l12 12M18 6L6 18" stroke="#111" stroke-width="2.5" stroke-linecap="round"/>290 </svg>291 </div>292 </div>293 <div class="row">294 <div class="key gray med">?123</div>295 <div class="key gray med">,</div>296 <div class="key gray med">😊</div>297 <div class="key wide"></div>298 <div class="key gray med">.</div>299 <div class="key gray med">300 <svg viewBox="0 0 24 24" style="width:42px;height:42px;">301 <circle cx="11" cy="11" r="6" fill="none" stroke="#111" stroke-width="2"/>302 <path d="M16 16l4 4" stroke="#111" stroke-width="2" stroke-linecap="round"/>303 </svg>304 </div>305 </div>306 </div>307 <div class="home-indicator"></div>308 </div>309 310</div>311</body>312</html>