GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Location Search UI Mock</title>5<style>6 body { margin:0; padding:0; background: transparent; font-family: Roboto, Arial, sans-serif; }7 #render-target {8 width:1080px; height:2400px; position:relative; overflow:hidden;9 background: linear-gradient(#87a7cf 0%, #a8bfdc 45%, #cfe1f3 100%);10 border-radius: 28px;11 box-shadow: 0 20px 60px rgba(0,0,0,0.35);12 }13 14 /* Status bar */15 .statusbar {16 position:absolute; top:0; left:0; width:100%; height:112px;17 color:#ffffff; font-size:38px; letter-spacing:0.5px;18 display:flex; align-items:center; padding:0 36px; box-sizing:border-box;19 }20 .status-icons { margin-left:auto; display:flex; align-items:center; gap:22px; }21 .status-dot { width:18px; height:18px; border-radius:50%; background:#ffffff88; }22 .status-battery { width:30px; height:18px; border:2px solid #fff; border-radius:4px; position:relative; }23 .status-battery:after { content:""; position:absolute; right:-6px; top:4px; width:4px; height:10px; background:#fff; border-radius:1px; }24 .status-battery-fill { position:absolute; left:2px; top:2px; height:12px; width:22px; background:#9be582; }25 26 /* Dark sheet */27 .sheet {28 position:absolute; left:15px; top:120px; width:1050px; height:1500px;29 background:#1f1f1f; border-radius:22px; color:#fff;30 box-shadow: 0 12px 24px rgba(0,0,0,0.45);31 }32 .sheet-header {33 height:120px; display:flex; align-items:center; padding:0 24px; box-sizing:border-box;34 gap:24px; font-size:48px; font-weight:600;35 }36 .caret {37 width:3px; height:52px; background:#b1e9a9; margin-right:8px;38 }39 .divider { height:2px; background:#2e2e2e; }40 .list { padding:8px 0; }41 .item {42 display:flex; align-items:center; padding:26px 24px; gap:26px; box-sizing:border-box;43 border-bottom:1px solid #2c2c2c;44 }45 .icon-wrap {46 width:64px; height:64px; border-radius:16px; display:flex; align-items:center; justify-content:center;47 color:#cfcfcf;48 }49 .item-title { font-size:40px; }50 .item-sub { font-size:28px; color:#b0b0b0; margin-top:10px; }51 .item-text { flex:1; display:flex; flex-direction:column; }52 .more { width:80px; display:flex; justify-content:flex-end; }53 .ellipsis { width:18px; height:60px; position:relative; }54 .ellipsis span { position:absolute; left:7px; width:10px; height:10px; background:#cfcfcf; border-radius:50%; }55 .ellipsis span:nth-child(1){ top:6px;}56 .ellipsis span:nth-child(2){ top:26px;}57 .ellipsis span:nth-child(3){ top:46px;}58 59 /* Keyboard */60 .keyboard {61 position:absolute; left:0; bottom:0; width:100%; height:900px; background:#111111;62 border-top-left-radius:26px; border-top-right-radius:26px; box-shadow: 0 -10px 20px rgba(0,0,0,0.35);63 color:#e8e8e8;64 }65 .kb-top {66 height:140px; display:flex; align-items:center; gap:34px; padding:0 36px; box-sizing:border-box;67 color:#cfcfcf; font-size:40px;68 }69 .kb-pill {70 display:inline-flex; align-items:center; justify-content:center;71 height:84px; padding:0 26px; background:#1e1e1e; border-radius:18px;72 }73 .keys-row { display:flex; justify-content:center; gap:16px; padding:22px 18px; }74 .key {75 width:88px; height:120px; background:#2a2a2a; border-radius:18px; display:flex;76 align-items:center; justify-content:center; font-size:46px; color:#ddd;77 box-shadow: inset 0 -3px 0 rgba(255,255,255,0.06);78 }79 .key.wide { width:160px; }80 .spacebar { flex:1; height:120px; background:#2a2a2a; border-radius:22px; margin:0 18px; display:flex; align-items:center; justify-content:center; font-size:42px; color:#bdbdbd;}81 .check-btn {82 width:140px; height:140px; border-radius:70px; background:#caff90; display:flex; align-items:center; justify-content:center;83 margin-right:26px;84 }85 .home-pill {86 position:absolute; bottom:20px; left:50%; transform:translateX(-50%);87 width:420px; height:12px; border-radius:8px; background:#cfcfcf55;88 }89 90 /* Simple inline SVG formatting */91 svg { display:block; }92</style>93</head>94<body>95<div id="render-target">96 97 <!-- Status bar -->98 <div class="statusbar">99 <div>8:03</div>100 <div style="margin-left:20px;">0°</div>101 <div style="margin-left:20px;">31°</div>102 <div class="status-icons">103 <div class="status-dot"></div>104 <div class="status-dot"></div>105 <div class="status-dot"></div>106 <div class="status-dot"></div>107 <div class="status-dot"></div>108 <div class="status-battery"><div class="status-battery-fill"></div></div>109 </div>110 </div>111 112 <!-- Dark search sheet -->113 <div class="sheet">114 <div class="sheet-header">115 <!-- Back arrow -->116 <div class="icon-wrap">117 <svg width="64" height="64">118 <polyline points="40,14 20,32 40,50" fill="none" stroke="#e5e5e5" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"></polyline>119 </svg>120 </div>121 <div class="caret"></div>122 <div>Location Search</div>123 <div style="margin-left:auto;" class="icon-wrap">124 <!-- Mic icon -->125 <svg width="56" height="56" viewBox="0 0 56 56">126 <rect x="22" y="12" width="12" height="22" rx="6" fill="#e5e5e5"></rect>127 <path d="M14 26 C14 38 42 38 42 26" fill="none" stroke="#e5e5e5" stroke-width="4" />128 <rect x="26" y="36" width="4" height="8" fill="#e5e5e5"></rect>129 <rect x="22" y="44" width="12" height="4" rx="2" fill="#e5e5e5"></rect>130 </svg>131 </div>132 </div>133 <div class="divider"></div>134 135 <div class="list">136 <!-- Item: Home -->137 <div class="item">138 <div class="icon-wrap">139 <!-- Location arrow / paper-plane -->140 <svg width="64" height="64" viewBox="0 0 64 64">141 <polygon points="14,30 54,20 36,54 30,38" fill="none" stroke="#cfcfcf" stroke-width="4"></polygon>142 </svg>143 </div>144 <div class="item-text">145 <div class="item-title">Home: Dera Mândi</div>146 <div class="item-sub">"Home" is opened on app launch</div>147 </div>148 <div class="more">149 <div class="ellipsis">150 <span></span><span></span><span></span>151 </div>152 </div>153 </div>154 155 <!-- Prague -->156 <div class="item">157 <div class="icon-wrap">158 <!-- Heart outline -->159 <svg width="64" height="64" viewBox="0 0 64 64">160 <path d="M32 50 C22 42 14 36 14 26 C14 18 22 16 28 22 C30 24 32 26 32 26 C32 26 34 24 36 22 C42 16 50 18 50 26 C50 36 42 42 32 50 Z" fill="none" stroke="#cfcfcf" stroke-width="4"></path>161 </svg>162 </div>163 <div class="item-text">164 <div class="item-title">Prague</div>165 </div>166 <div class="more"><div class="ellipsis"><span></span><span></span><span></span></div></div>167 </div>168 169 <!-- New York -->170 <div class="item">171 <div class="icon-wrap">172 <svg width="64" height="64" viewBox="0 0 64 64">173 <path d="M32 50 C22 42 14 36 14 26 C14 18 22 16 28 22 C30 24 32 26 32 26 C32 26 34 24 36 22 C42 16 50 18 50 26 C50 36 42 42 32 50 Z" fill="none" stroke="#cfcfcf" stroke-width="4"></path>174 </svg>175 </div>176 <div class="item-text">177 <div class="item-title">New York</div>178 </div>179 <div class="more"><div class="ellipsis"><span></span><span></span><span></span></div></div>180 </div>181 182 <!-- Innsbruck -->183 <div class="item">184 <div class="icon-wrap">185 <svg width="64" height="64" viewBox="0 0 64 64">186 <path d="M32 50 C22 42 14 36 14 26 C14 18 22 16 28 22 C30 24 32 26 32 26 C32 26 34 24 36 22 C42 16 50 18 50 26 C50 36 42 42 32 50 Z" fill="none" stroke="#cfcfcf" stroke-width="4"></path>187 </svg>188 </div>189 <div class="item-text">190 <div class="item-title">Innsbruck</div>191 </div>192 <div class="more"><div class="ellipsis"><span></span><span></span><span></span></div></div>193 </div>194 195 <!-- Tokyo -->196 <div class="item">197 <div class="icon-wrap">198 <svg width="64" height="64" viewBox="0 0 64 64">199 <path d="M32 50 C22 42 14 36 14 26 C14 18 22 16 28 22 C30 24 32 26 32 26 C32 26 34 24 36 22 C42 16 50 18 50 26 C50 36 42 42 32 50 Z" fill="none" stroke="#cfcfcf" stroke-width="4"></path>200 </svg>201 </div>202 <div class="item-text">203 <div class="item-title">Tokyo</div>204 </div>205 <div class="more"><div class="ellipsis"><span></span><span></span><span></span></div></div>206 </div>207 208 <!-- Los Angeles -->209 <div class="item">210 <div class="icon-wrap">211 <svg width="64" height="64" viewBox="0 0 64 64">212 <path d="M32 50 C22 42 14 36 14 26 C14 18 22 16 28 22 C30 24 32 26 32 26 C32 26 34 24 36 22 C42 16 50 18 50 26 C50 36 42 42 32 50 Z" fill="none" stroke="#cfcfcf" stroke-width="4"></path>213 </svg>214 </div>215 <div class="item-text">216 <div class="item-title">Los Angeles</div>217 </div>218 <div class="more"><div class="ellipsis"><span></span><span></span><span></span></div></div>219 </div>220 221 <!-- London -->222 <div class="item" style="border-bottom:none;">223 <div class="icon-wrap">224 <svg width="64" height="64" viewBox="0 0 64 64">225 <path d="M32 50 C22 42 14 36 14 26 C14 18 22 16 28 22 C30 24 32 26 32 26 C32 26 34 24 36 22 C42 16 50 18 50 26 C50 36 42 42 32 50 Z" fill="none" stroke="#cfcfcf" stroke-width="4"></path>226 </svg>227 </div>228 <div class="item-text">229 <div class="item-title">London</div>230 </div>231 <div class="more"><div class="ellipsis"><span></span><span></span><span></span></div></div>232 </div>233 </div>234 </div>235 236 <!-- Keyboard mock -->237 <div class="keyboard">238 <div class="kb-top">239 <div class="kb-pill">⌁</div>240 <div class="kb-pill">😊</div>241 <div class="kb-pill">GIF</div>242 <div class="kb-pill">⚙️</div>243 <div class="kb-pill">G↔︎</div>244 <div class="kb-pill">🎨</div>245 <div class="kb-pill">🎤</div>246 </div>247 248 <!-- qwerty row -->249 <div class="keys-row">250 <div class="key">q</div><div class="key">w</div><div class="key">e</div><div class="key">r</div>251 <div class="key">t</div><div class="key">y</div><div class="key">u</div><div class="key">i</div>252 <div class="key">o</div><div class="key">p</div>253 </div>254 255 <!-- asdf row -->256 <div class="keys-row">257 <div class="key">a</div><div class="key">s</div><div class="key">d</div><div class="key">f</div>258 <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>259 </div>260 261 <!-- zxc row + backspace -->262 <div class="keys-row">263 <div class="key wide">⇧</div>264 <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>265 <div class="key">n</div><div class="key">m</div>266 <div class="key wide">⌫</div>267 </div>268 269 <!-- bottom utilities -->270 <div class="keys-row" style="align-items:center;">271 <div class="key wide">?123</div>272 <div class="key">,</div>273 <div class="key">😊</div>274 <div class="spacebar">space</div>275 <div class="key">.</div>276 <div class="check-btn">277 <svg width="70" height="70" viewBox="0 0 70 70">278 <polyline points="16,36 30,50 54,24" fill="none" stroke="#1a1a1a" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"></polyline>279 </svg>280 </div>281 </div>282 283 <div class="home-pill"></div>284 </div>285 286</div>287</body>288</html>