GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Search UI Mock</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }8 #render-target {9 width: 1080px; height: 2400px; position: relative; overflow: hidden;10 background: #FFFFFF;11 }12 13 /* Status bar */14 .statusbar {15 position: absolute; top: 0; left: 0; right: 0;16 height: 120px; padding: 24px 32px;17 display: flex; align-items: center; justify-content: space-between;18 color: #2b2b2b; font-size: 36px; font-weight: 600;19 }20 .sb-right { display: flex; align-items: center; gap: 28px; }21 .sb-icon { width: 44px; height: 44px; }22 23 /* Search header */24 .search-row {25 position: absolute; top: 120px; left: 0; right: 0;26 padding: 22px 28px 18px 28px; background: #fff;27 box-shadow: 0 1px 0 rgba(0,0,0,0.08);28 }29 .search-wrap { display: flex; align-items: center; gap: 24px; }30 .icon-btn {31 width: 72px; height: 72px; border-radius: 36px;32 display: flex; align-items: center; justify-content: center;33 color: #5f6b7a; border: 1px solid #e6e6e6; background: #fff;34 }35 .search-input {36 flex: 1; height: 104px; border-radius: 24px;37 border: 3px solid #2389FF; background: #fff;38 display: flex; align-items: center; padding: 0 28px; gap: 24px;39 box-sizing: border-box;40 }41 .search-input .placeholder {42 font-size: 40px; color: #8aa3bd; font-weight: 500;43 }44 45 /* Current location CTA */46 .cta {47 position: absolute; top: 260px; left: 32px; right: 32px;48 background: #EAF5FF; border-radius: 26px; height: 120px;49 display: flex; align-items: center; padding: 0 28px; gap: 26px;50 border: 1px solid #CFE6FF;51 color: #1E88E5; font-size: 42px; font-weight: 600;52 }53 .cta .target {54 width: 64px; height: 64px; border-radius: 32px;55 border: 2px solid #8FCCFF; display: flex; align-items: center; justify-content: center;56 background: #fff;57 }58 59 /* Recently searched */60 .recent {61 position: absolute; top: 420px; left: 36px; right: 36px;62 }63 .recent-head {64 display: flex; justify-content: space-between; align-items: center;65 color: #90A4AE; font-size: 38px; margin-bottom: 18px;66 }67 .recent-head .clear { color: #2389FF; font-weight: 600; }68 .divider { height: 2px; background: #e8edf3; }69 70 .result {71 display: flex; align-items: flex-start; gap: 26px;72 padding: 34px 0; border-bottom: 1px solid #eef2f6;73 }74 .result:last-child { border-bottom: none; }75 .res-icon {76 width: 56px; height: 56px; color: #6d8aa0;77 }78 .res-text { line-height: 1.28; }79 .res-title { font-size: 46px; color: #203A4B; font-weight: 700; }80 .res-sub { font-size: 42px; color: #8EA3B4; font-weight: 500; }81 82 /* Keyboard mock */83 .keyboard {84 position: absolute; left: 0; right: 0; bottom: 0;85 height: 900px; background: #1f1b19; color: #e9d5c6;86 border-top-left-radius: 24px; border-top-right-radius: 24px;87 box-shadow: 0 -4px 12px rgba(0,0,0,0.2);88 }89 .kb-top {90 height: 120px; padding: 20px 28px; display: flex; align-items: center; gap: 32px;91 }92 .kb-pill {93 width: 72px; height: 72px; border-radius: 18px; background: #2a2421;94 display: flex; align-items: center; justify-content: center; color: #e9d5c6;95 border: 1px solid rgba(255,255,255,0.06);96 }97 .kb-rows { padding: 0 22px; }98 .kb-row { display: flex; justify-content: center; gap: 18px; margin-top: 20px; }99 .key {100 width: 86px; height: 108px; border-radius: 22px; background: #2a2421;101 display: flex; align-items: center; justify-content: center;102 font-size: 44px; font-weight: 600; border: 1px solid rgba(255,255,255,0.05);103 }104 .key-wide { width: 180px; }105 .space { width: 540px; }106 .accent {107 background: #e7c9b3; color: #2a2421; font-weight: 700;108 }109 .gesture {110 position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%);111 width: 220px; height: 10px; background: rgba(255,255,255,0.9); border-radius: 10px;112 }113</style>114</head>115<body>116<div id="render-target">117 118 <!-- Status bar -->119 <div class="statusbar">120 <div>2:46</div>121 <div class="sb-right">122 <!-- simple mail icon -->123 <svg class="sb-icon" viewBox="0 0 24 24">124 <path d="M3 6h18v12H3z" fill="none" stroke="#555" stroke-width="2"/>125 <path d="M3 6l9 6 9-6" fill="none" stroke="#555" stroke-width="2"/>126 </svg>127 <!-- cast icon -->128 <svg class="sb-icon" viewBox="0 0 24 24">129 <path d="M3 4h18v14H3z" fill="none" stroke="#555" stroke-width="2"/>130 <path d="M3 20c2-3 6-3 8 0" fill="none" stroke="#555" stroke-width="2"/>131 <path d="M3 16c1-1 3-1 4 0" fill="none" stroke="#555" stroke-width="2"/>132 </svg>133 <!-- signal/battery group -->134 <svg class="sb-icon" viewBox="0 0 24 24">135 <path d="M2 16h12v6H2z" fill="none" stroke="#555" stroke-width="2"/>136 <rect x="14" y="18" width="2" height="2" fill="#555"/>137 <rect x="4" y="18" width="8" height="2" fill="#555"/>138 </svg>139 </div>140 </div>141 142 <!-- Search header -->143 <div class="search-row">144 <div class="search-wrap">145 <div class="icon-btn">146 <!-- X icon -->147 <svg width="36" height="36" viewBox="0 0 24 24">148 <path d="M5 5l14 14M19 5L5 19" stroke="#6b7785" stroke-width="2" stroke-linecap="round"/>149 </svg>150 </div>151 <div class="search-input">152 <!-- leading circle icon -->153 <svg width="40" height="40" viewBox="0 0 24 24">154 <circle cx="12" cy="12" r="9" fill="none" stroke="#8aa3bd" stroke-width="2"/>155 <circle cx="12" cy="12" r="3" fill="#8aa3bd"/>156 </svg>157 <div class="placeholder">Leaving from...</div>158 </div>159 </div>160 </div>161 162 <!-- Use current location CTA -->163 <div class="cta">164 <div class="target">165 <svg width="40" height="40" viewBox="0 0 24 24">166 <circle cx="12" cy="12" r="9" fill="none" stroke="#1E88E5" stroke-width="2"/>167 <path d="M12 5v14M5 12h14" stroke="#1E88E5" stroke-width="2"/>168 <circle cx="12" cy="12" r="2" fill="#1E88E5"/>169 </svg>170 </div>171 <div>Use current location</div>172 </div>173 174 <!-- Recently searched -->175 <div class="recent">176 <div class="recent-head">177 <div>Recently searched</div>178 <div class="clear">Clear</div>179 </div>180 <div class="divider"></div>181 182 <!-- Item 1 -->183 <div class="result">184 <svg class="res-icon" viewBox="0 0 24 24">185 <path d="M12 2c3.3 0 6 2.6 6 5.8 0 4.6-6 13.2-6 13.2S6 12.4 6 7.8C6 4.6 8.7 2 12 2z" fill="#87a1b3"/>186 <circle cx="12" cy="8" r="2.5" fill="#fff"/>187 </svg>188 <div class="res-text">189 <div class="res-title">Gajnice Train Station</div>190 <div class="res-sub">Zagreb</div>191 </div>192 </div>193 194 <!-- Item 2 -->195 <div class="result">196 <svg class="res-icon" viewBox="0 0 24 24">197 <path d="M12 2c3.3 0 6 2.6 6 5.8 0 4.6-6 13.2-6 13.2S6 12.4 6 7.8C6 4.6 8.7 2 12 2z" fill="#87a1b3"/>198 <circle cx="12" cy="8" r="2.5" fill="#fff"/>199 </svg>200 <div class="res-text">201 <div class="res-title">Paris Gare de l'Est</div>202 <div class="res-sub">Paris</div>203 </div>204 </div>205 206 <!-- Item 3 -->207 <div class="result">208 <svg class="res-icon" viewBox="0 0 24 24">209 <path d="M3 21h18V7H3v14zM6 10h3v3H6v-3zm6 0h3v3h-3v-3z" fill="#87a1b3"/>210 </svg>211 <div class="res-text">212 <div class="res-title">Antwerp</div>213 <div class="res-sub">Antwerp, Belgium</div>214 </div>215 </div>216 </div>217 218 <!-- Keyboard mock -->219 <div class="keyboard">220 <div class="kb-top">221 <div class="kb-pill">222 <svg width="32" height="32" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" fill="none" stroke="#dac2b0" stroke-width="2"/></svg>223 </div>224 <div class="kb-pill">225 <svg width="32" height="32" viewBox="0 0 24 24"><path d="M12 2v20M2 12h20" stroke="#dac2b0" stroke-width="2"/></svg>226 </div>227 <div class="kb-pill">GIF</div>228 <div class="kb-pill">229 <svg width="30" height="30" viewBox="0 0 24 24"><path d="M12 3l-2 9h4l-2 9" stroke="#dac2b0" stroke-width="2" fill="none"/></svg>230 </div>231 <div class="kb-pill">232 <svg width="30" height="30" viewBox="0 0 24 24"><path d="M4 6h16M4 12h16M4 18h16" stroke="#dac2b0" stroke-width="2"/></svg>233 </div>234 <div class="kb-pill">235 <svg width="30" height="30" viewBox="0 0 24 24"><circle cx="12" cy="12" r="8" fill="none" stroke="#dac2b0" stroke-width="2"/></svg>236 </div>237 <div class="kb-pill">238 <svg width="30" height="30" viewBox="0 0 24 24"><path d="M5 5l14 14M19 5L5 19" stroke="#dac2b0" stroke-width="2"/></svg>239 </div>240 </div>241 242 <div class="kb-rows">243 <div class="kb-row">244 <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>245 </div>246 <div class="kb-row">247 <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>248 </div>249 <div class="kb-row">250 <div class="key-wide">251 <svg width="40" height="40" viewBox="0 0 24 24"><path d="M6 18l4-6-4-6" stroke="#e9d5c6" stroke-width="2" fill="none" stroke-linecap="round"/></svg>252 </div>253 <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>254 <div class="key-wide">255 <svg width="40" height="40" viewBox="0 0 24 24"><path d="M4 7h16M9 7l6 6-6 6" stroke="#e9d5c6" stroke-width="2" fill="none" stroke-linecap="round"/></svg>256 </div>257 </div>258 <div class="kb-row">259 <div class="key accent key-wide">?123</div>260 <div class="key">,</div>261 <div class="key key-wide">262 <svg width="34" height="34" viewBox="0 0 24 24"><circle cx="12" cy="12" r="2" fill="#e9d5c6"/><path d="M12 2v6M12 16v6M2 12h6M16 12h6" stroke="#e9d5c6" stroke-width="2"/></svg>263 </div>264 <div class="key space"></div>265 <div class="key">.</div>266 <div class="key accent key-wide">267 <svg width="36" height="36" viewBox="0 0 24 24"><path d="M6 12l4 4 8-8" stroke="#2a2421" stroke-width="3" fill="none" stroke-linecap="round"/></svg>268 </div>269 </div>270 </div>271 272 <div class="gesture"></div>273 </div>274 275</div>276</body>277</html>