GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>Search City UI</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: Roboto, Arial, sans-serif; }8 #render-target {9 width: 1080px;10 height: 2400px;11 position: relative;12 overflow: hidden;13 background: #FFFFFF;14 }15 16 /* App bar */17 .appbar {18 position: absolute;19 left: 0; top: 0;20 width: 1080px;21 height: 260px;22 background: #AEEA00; /* Lime A700 */23 }24 .status-row {25 height: 80px;26 padding: 0 28px;27 display: flex;28 align-items: center;29 justify-content: space-between;30 color: #1A1A1A;31 font-size: 34px;32 font-weight: 500;33 opacity: 0.95;34 }35 .icon-pack {36 display: flex;37 gap: 22px;38 align-items: center;39 }40 .search-row {41 height: 180px;42 display: flex;43 align-items: center;44 padding: 0 26px;45 gap: 24px;46 }47 .search-text {48 flex: 1;49 font-size: 56px;50 color: #1F1F1F;51 }52 .cursor {53 display: inline-block;54 width: 3px;55 height: 64px;56 background: #1F1F1F;57 margin-left: 6px;58 border-radius: 1px;59 }60 61 /* List area */62 .content {63 position: absolute;64 left: 0;65 top: 260px;66 width: 1080px;67 bottom: 0;68 background: #FFFFFF;69 }70 .list {71 padding-top: 8px;72 }73 .list-item {74 display: flex;75 align-items: center;76 gap: 26px;77 padding: 34px 28px;78 border-top: 1px solid #E9E9E9;79 }80 .list-item:first-child { border-top: none; }81 .item-title {82 font-size: 42px;83 color: #212121;84 font-weight: 600;85 line-height: 1.2;86 }87 .item-sub {88 font-size: 34px;89 color: #7A7A7A;90 margin-top: 8px;91 }92 .muted {93 color: #666;94 font-weight: 500;95 }96 97 /* Keyboard mock */98 .keyboard {99 position: absolute;100 left: 0;101 bottom: 0;102 width: 1080px;103 height: 820px;104 background: #2A2625;105 border-top-left-radius: 28px;106 border-top-right-radius: 28px;107 box-shadow: 0 -4px 14px rgba(0,0,0,0.18);108 }109 .kb-caption {110 text-align: center;111 color: #E9DDD6;112 font-size: 38px;113 padding: 16px 0 6px;114 opacity: 0.9;115 }116 .row {117 display: flex;118 justify-content: center;119 gap: 18px;120 padding: 16px 22px;121 }122 .key {123 height: 110px;124 min-width: 90px;125 background: #3A3533;126 border-radius: 26px;127 color: #EADDD4;128 font-size: 44px;129 display: flex;130 align-items: center;131 justify-content: center;132 }133 .key.wide { min-width: 160px; }134 .key.space { flex: 1; min-width: 400px; }135 .key.func { background: #3C3735; color: #E5D5CC; }136 .key.primary { background: #F3D2BD; color: #2B2B2B; }137 138 /* Gesture bar */139 .gesture {140 position: absolute;141 left: 50%;142 transform: translateX(-50%);143 bottom: 22px;144 width: 240px;145 height: 10px;146 background: #FFFFFF;147 border-radius: 8px;148 opacity: 0.85;149 }150 151 /* Simple SVG icon sizing */152 .icon {153 width: 56px; height: 56px;154 color: #1F1F1F;155 }156 .icon.small { width: 40px; height: 40px; }157 .icon.status { width: 40px; height: 40px; color: #1A1A1A; }158 .loc-icon { color: #31C04A; }159</style>160</head>161<body>162<div id="render-target">163 164 <!-- App Bar -->165 <div class="appbar">166 <div class="status-row">167 <div>3:52</div>168 <div class="icon-pack">169 <!-- Wi-Fi -->170 <svg class="icon status" viewBox="0 0 24 24"><path fill="currentColor" d="M12 18.5a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3Zm-5.6-4.1 1.4 1.4A7 7 0 0 1 12 14a7 7 0 0 1 4.2 1.8l1.4-1.4A8.9 8.9 0 0 0 12 12a8.9 8.9 0 0 0-5.6 2.4Zm-3.5-3.6 1.4 1.4A13 13 0 0 1 12 10c3.5 0 6.8 1.4 9.7 4.2l1.4-1.4A15.8 15.8 0 0 0 12 8c-4.6 0-8.3 1.8-11.1 4.8Z"/></svg>171 <!-- Battery -->172 <svg class="icon status" viewBox="0 0 24 24"><path fill="currentColor" d="M17 6h1a2 2 0 0 1 2 2v1h1v6h-1v1a2 2 0 0 1-2 2h-1V6ZM4 8a2 2 0 0 1 2-2h9v12H6a2 2 0 0 1-2-2V8Zm2 0v8h7V8H6Z"/></svg>173 </div>174 </div>175 <div class="search-row">176 <!-- Back arrow -->177 <svg class="icon" viewBox="0 0 24 24"><path fill="currentColor" d="M14.7 5.3 9 11l5.7 5.7-1.4 1.4L6.2 11l7.1-7.1 1.4 1.4Z"/></svg>178 <div class="search-text">Antwerp<span class="cursor"></span></div>179 <!-- Clear (X) -->180 <svg class="icon" viewBox="0 0 24 24"><path fill="currentColor" d="M6.7 6.7 11 11l-4.3 4.3 1.4 1.4L12.4 12l4.3 4.3 1.4-1.4L13.8 11l4.3-4.3-1.4-1.4L12.4 9.6 8.1 5.3 6.7 6.7Z"/></svg>181 </div>182 </div>183 184 <!-- Content List -->185 <div class="content">186 <div class="list">187 <div class="list-item">188 <!-- Location/navigation arrow -->189 <svg class="icon small loc-icon" viewBox="0 0 24 24"><path fill="currentColor" d="M3 12 21 3l-9 18-1.8-7.2L3 12Z"/></svg>190 <div class="item-title muted">Enable location to see nearby cities</div>191 </div>192 193 <div class="list-item">194 <div>195 <div class="item-title">Antwerp</div>196 <div class="item-sub">Belgium</div>197 </div>198 </div>199 </div>200 </div>201 202 <!-- Keyboard mock -->203 <div class="keyboard">204 <div class="kb-caption">Antwerp</div>205 <div class="row">206 <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>207 <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>208 </div>209 <div class="row" style="padding-left:70px; padding-right:70px;">210 <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>211 <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>212 </div>213 <div class="row">214 <div class="key wide func">⇧</div>215 <div class="key">z</div><div class="key">x</div><div class="key">c</div><div class="key">v</div>216 <div class="key">b</div><div class="key">n</div><div class="key">m</div>217 <div class="key wide func">⌫</div>218 </div>219 <div class="row">220 <div class="key wide func">?123</div>221 <div class="key wide func">,</div>222 <div class="key space"> </div>223 <div class="key wide func">.</div>224 <div class="key wide primary">🔎</div>225 </div>226 <div class="gesture"></div>227 </div>228 229</div>230</body>231</html>