GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Search Screen 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; color:#222;12 }13 14 /* Status bar */15 .status-bar {16 position:absolute; top:0; left:0; right:0;17 height:120px; background:#ffffff;18 display:flex; align-items:center; justify-content:space-between;19 padding:0 40px; box-sizing:border-box;20 }21 .status-left { display:flex; align-items:center; gap:18px; }22 .status-time { font-weight:600; font-size:40px; }23 .status-icons { display:flex; align-items:center; gap:18px; }24 .dot, .small-icon {25 width:28px; height:28px; border-radius:50%; background:#dcdcdc;26 }27 28 /* Search area */29 .content {30 position:absolute; left:0; right:0;31 top:140px; padding:0 40px; box-sizing:border-box;32 }33 .search-input {34 height:120px; border:1px solid #dcdcdc; border-radius:60px;35 display:flex; align-items:center; padding:0 30px; box-sizing:border-box;36 gap:28px; background:#fff;37 }38 .search-input .back {39 width:70px; height:70px; border-radius:50%; background:#f2f2f2;40 display:flex; align-items:center; justify-content:center;41 }42 .search-input .camera {43 margin-left:auto;44 width:86px; height:86px; border-radius:50%;45 background:#f6f6f6; border:1px solid #e5e5e5;46 display:flex; align-items:center; justify-content:center;47 }48 .search-placeholder {49 flex:1; height:80px; display:flex; align-items:center;50 font-size:38px; color:#888;51 }52 53 .tip {54 margin-top:40px; font-size:40px; line-height:1.45; color:#333;55 }56 .tip b { font-weight:700; color:#111; }57 58 .popular-title {59 margin-top:60px; font-size:56px; font-weight:700; color:#111;60 }61 .chips {62 margin-top:28px; display:flex; gap:28px; flex-wrap:wrap;63 }64 .chip {65 background:#f2f2f2; border-radius:60px;66 padding:26px 42px; font-size:44px; color:#111;67 }68 69 /* Bottom navigation */70 .bottom-nav {71 position:absolute; left:0; right:0; height:120px;72 bottom:920px; /* sits above keyboard */73 background:#ffffff; border-top:1px solid #e9e9e9;74 display:flex; align-items:center; justify-content:space-around;75 }76 .nav-item { display:flex; flex-direction:column; align-items:center; gap:10px; color:#8b8b8b; font-size:26px; }77 .nav-item.active { color:#111; }78 .nav-icon { width:52px; height:52px; }79 80 /* Keyboard overlay */81 .keyboard {82 position:absolute; left:0; right:0; bottom:0; height:920px;83 background:#161616; color:#fff; border-top:1px solid #2a2a2a;84 box-sizing:border-box;85 }86 .kb-top {87 display:flex; align-items:center; gap:28px;88 padding:24px 36px; color:#cfcfcf; font-size:30px;89 }90 .kb-pill {91 background:#242424; border:1px solid #303030; color:#dcdcdc;92 padding:18px 26px; border-radius:18px;93 }94 .kb-rows { padding:10px 36px 30px; }95 .row { display:flex; justify-content:space-between; margin-top:24px; }96 .key {97 background:#242424; border:1px solid #3a3a3a; width:88px; height:108px;98 border-radius:18px; display:flex; align-items:center; justify-content:center;99 font-size:44px; color:#eaeaea;100 }101 .key.wide { width:160px; }102 .space-row { display:flex; align-items:center; justify-content:space-between; margin-top:28px; padding:0 18px; }103 .space { flex:1; height:108px; background:#242424; border:1px solid #3a3a3a; border-radius:22px; margin:0 18px; }104 .search-btn {105 width:130px; height:130px; background:#cfd3ff; color:#222;106 border-radius:42px; display:flex; align-items:center; justify-content:center;107 border:1px solid #b7baf0;108 }109 110 /* SVG base styling */111 svg { display:block; }112</style>113</head>114<body>115<div id="render-target">116 117 <!-- Status bar -->118 <div class="status-bar">119 <div class="status-left">120 <div class="status-time">9:36</div>121 <div class="dot"></div>122 <div class="dot"></div>123 <div class="dot"></div>124 </div>125 <div class="status-icons">126 <div class="small-icon"></div>127 <div class="small-icon"></div>128 <div class="small-icon"></div>129 </div>130 </div>131 132 <!-- Search content -->133 <div class="content">134 <div class="search-input">135 <div class="back">136 <svg class="nav-icon" viewBox="0 0 24 24">137 <path d="M15 18l-6-6 6-6" stroke="#333" stroke-width="2.4" fill="none" stroke-linecap="round" stroke-linejoin="round"/>138 </svg>139 </div>140 <div class="search-placeholder">|</div>141 <div class="camera">142 <svg class="nav-icon" viewBox="0 0 24 24">143 <path d="M9 7l1.5-2h3L15 7h3a2 2 0 012 2v8a2 2 0 01-2 2H6a2 2 0 01-2-2V9a2 2 0 012-2h3z" fill="none" stroke="#333" stroke-width="2"/>144 <circle cx="12" cy="13" r="4" fill="none" stroke="#333" stroke-width="2"/>145 </svg>146 </div>147 </div>148 149 <div class="tip">150 Tip! Try searching for <b>dining chair</b>, <b>round rug</b> or <b>4 seat table</b>151 </div>152 153 <div class="popular-title">Popular searches</div>154 <div class="chips">155 <div class="chip">desk</div>156 <div class="chip">wardrobe</div>157 <div class="chip">kallax</div>158 </div>159 </div>160 161 <!-- Bottom navigation -->162 <div class="bottom-nav">163 <div class="nav-item">164 <svg class="nav-icon" viewBox="0 0 24 24">165 <path d="M3 10l9-7 9 7v8a2 2 0 01-2 2H5a2 2 0 01-2-2v-8z" fill="none" stroke="#8b8b8b" stroke-width="2"/>166 </svg>167 </div>168 <div class="nav-item active">169 <svg class="nav-icon" viewBox="0 0 24 24">170 <circle cx="11" cy="11" r="7" fill="none" stroke="#111" stroke-width="2"/>171 <path d="M21 21l-4-4" stroke="#111" stroke-width="2" fill="none" stroke-linecap="round"/>172 </svg>173 </div>174 <div class="nav-item">175 <svg class="nav-icon" viewBox="0 0 24 24">176 <rect x="4" y="5" width="16" height="12" rx="2" fill="none" stroke="#8b8b8b" stroke-width="2"/>177 <path d="M4 9h16" stroke="#8b8b8b" stroke-width="2"/>178 </svg>179 </div>180 <div class="nav-item">181 <svg class="nav-icon" viewBox="0 0 24 24">182 <path d="M12 21C7 18 4 14.5 4 10a5 5 0 0110 0 5 5 0 0110 0c0 4.5-3 8-8 11" fill="none" stroke="#8b8b8b" stroke-width="2" stroke-linecap="round"/>183 </svg>184 </div>185 <div class="nav-item">186 <svg class="nav-icon" viewBox="0 0 24 24">187 <path d="M6 7h12l-2 13H8L6 7z" fill="none" stroke="#8b8b8b" stroke-width="2"/>188 <path d="M9 7V6a3 3 0 013-3 3 3 0 013 3v1" stroke="#8b8b8b" stroke-width="2" fill="none"/>189 </svg>190 </div>191 </div>192 193 <!-- Keyboard -->194 <div class="keyboard">195 <div class="kb-top">196 <div class="kb-pill">◻︎</div>197 <div class="kb-pill">🙂</div>198 <div class="kb-pill">GIF</div>199 <div class="kb-pill">⚙︎</div>200 <div class="kb-pill">G⇄</div>201 <div class="kb-pill">🎨</div>202 <div class="kb-pill">🎙️</div>203 </div>204 205 <div class="kb-rows">206 <div class="row">207 <div class="key">q</div><div class="key">w</div><div class="key">e</div>208 <div class="key">r</div><div class="key">t</div><div class="key">y</div>209 <div class="key">u</div><div class="key">i</div><div class="key">o</div><div class="key">p</div>210 </div>211 <div class="row">212 <div class="key">a</div><div class="key">s</div><div class="key">d</div>213 <div class="key">f</div><div class="key">g</div><div class="key">h</div>214 <div class="key">j</div><div class="key">k</div><div class="key">l</div>215 </div>216 <div class="row">217 <div class="key">z</div><div class="key">x</div><div class="key">c</div>218 <div class="key">v</div><div class="key">b</div><div class="key">n</div><div class="key">m</div>219 <div class="key wide">⌫</div>220 </div>221 222 <div class="space-row">223 <div class="key wide">?123</div>224 <div class="key wide">,</div>225 <div class="key wide">🙂</div>226 <div class="space"></div>227 <div class="key wide">.</div>228 <div class="search-btn">229 <svg viewBox="0 0 24 24" width="56" height="56">230 <circle cx="11" cy="11" r="6" fill="none" stroke="#333" stroke-width="2"/>231 <path d="M20 20l-4-4" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round"/>232 </svg>233 </div>234 </div>235 </div>236 </div>237 238</div>239</body>240</html>