GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Mobile UI - Search Suggestions</title>5<style>6 body{margin:0;padding:0;background:transparent;font-family:Arial, Helvetica, sans-serif;}7 #render-target{8 width:1080px;height:2400px;position:relative;overflow:hidden;9 background:#ffffff; box-shadow:0 0 0 rgba(0,0,0,0);10 }11 12 /* Status bar */13 .status-bar{14 position:absolute;top:0;left:0;width:100%;height:100px;15 background:#FFFFFF;16 display:flex;align-items:center;justify-content:space-between;17 padding:0 36px;box-sizing:border-box;color:#333;font-size:40px;18 }19 .status-left{display:flex;gap:20px;align-items:center;}20 .status-icons{letter-spacing:6px;color:#666;font-size:38px;}21 .status-right{display:flex;gap:26px;align-items:center;color:#444;}22 .dot{width:10px;height:10px;background:#555;border-radius:50%;display:inline-block;margin:0 6px;}23 24 /* Search bar */25 .search-area{position:absolute;top:110px;left:24px;right:24px;height:120px;}26 .search-bar{27 width:100%;height:120px;background:#F1F3F4;border-radius:60px;28 display:flex;align-items:center;box-sizing:border-box;padding:0 32px;29 border:1px solid #E5E7E9;30 }31 .icon-btn{32 width:78px;height:78px;border-radius:39px;background:#ffffff;border:1px solid #DADCE0;33 display:flex;align-items:center;justify-content:center;margin-right:18px;34 }35 .search-input{36 flex:1;font-size:50px;color:#222;outline:none;border:none;background:transparent;37 }38 .close-btn{39 width:78px;height:78px;border-radius:39px;background:#ffffff;border:1px solid #DADCE0;40 display:flex;align-items:center;justify-content:center;margin-left:18px;41 }42 43 /* Suggestions list */44 .list{position:absolute;top:250px;left:0;width:100%;bottom:915px;overflow:hidden;}45 .list-inner{padding:0 24px;box-sizing:border-box;height:100%;overflow-y:auto;}46 .item{47 display:flex;align-items:center;gap:30px;padding:30px 12px;border-bottom:1px solid #EEE;48 }49 .pin{50 width:84px;height:84px;border-radius:42px;background:#F2F2F2;border:1px solid #D5D5D5;51 display:flex;align-items:center;justify-content:center;52 }53 .texts{flex:1;}54 .title{font-size:54px;color:#222;font-weight:700;line-height:1.1;}55 .subtitle{font-size:40px;color:#6F6F6F;margin-top:12px;}56 .arrow{57 width:60px;height:60px;border-radius:12px;display:flex;align-items:center;justify-content:center;color:#666;58 }59 60 /* Keyboard */61 .keyboard{62 position:absolute;bottom:0;left:0;width:100%;height:900px;background:#1F1F1F;color:#EDEDED;63 border-top-left-radius:24px;border-top-right-radius:24px;64 }65 .kb-toolbar{66 height:120px;background:#1F1F1F;display:flex;align-items:center;gap:46px;padding:0 40px;67 box-sizing:border-box;color:#D7D7D7;font-size:40px;68 }69 .kb-rows{padding:22px 28px 30px;box-sizing:border-box;}70 .row{display:flex;justify-content:space-between;margin-bottom:28px;}71 .key{72 width:90px;height:120px;background:#2B2B2B;border-radius:22px;display:flex;align-items:center;justify-content:center;73 font-size:48px;color:#EDEDED;74 box-shadow:inset 0 -2px 0 rgba(0,0,0,0.3);75 }76 .key.wide{width:140px;}77 .space{flex:1;height:120px;background:#2B2B2B;border-radius:22px;display:flex;align-items:center;justify-content:center;font-size:42px;color:#AFAFAF;margin:0 20px;}78 .search-circle{79 width:140px;height:140px;background:#CFE0FF;border-radius:70px;display:flex;align-items:center;justify-content:center;color:#2B5AA6;80 box-shadow:0 0 0 8px rgba(255,255,255,0.06);81 }82 83 /* Simple SVG icon styling */84 svg{display:block}85</style>86</head>87<body>88<div id="render-target">89 90 <!-- Status Bar -->91 <div class="status-bar">92 <div class="status-left">93 <div>11:04</div>94 <div class="status-icons">๐ ๐ ๐ ๐ โข</div>95 </div>96 <div class="status-right">97 <div>๐ถ</div>98 <div>๐</div>99 </div>100 </div>101 102 <!-- Search Bar -->103 <div class="search-area">104 <div class="search-bar">105 <div class="icon-btn">106 <!-- Back arrow -->107 <svg width="36" height="36" viewBox="0 0 24 24">108 <path d="M14.5 5l-7 7 7 7" stroke="#4A4A4A" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>109 </svg>110 </div>111 <div class="search-input">Yok</div>112 <div class="close-btn">113 <!-- Close (x) -->114 <svg width="28" height="28" viewBox="0 0 24 24">115 <path d="M6 6l12 12M18 6l-12 12" stroke="#555" stroke-width="2" stroke-linecap="round"/>116 </svg>117 </div>118 </div>119 </div>120 121 <!-- Suggestions -->122 <div class="list">123 <div class="list-inner">124 125 <div class="item">126 <div class="pin">127 <!-- location pin -->128 <svg width="34" height="34" viewBox="0 0 24 24">129 <path d="M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7zm0 9a2 2 0 1 1 0-4 2 2 0 0 1 0 4z" fill="#9E9E9E"/>130 </svg>131 </div>132 <div class="texts">133 <div class="title">Yokohama</div>134 <div class="subtitle">Kanagawa, Japan</div>135 </div>136 <div class="arrow">137 <svg width="30" height="30" viewBox="0 0 24 24">138 <path d="M7 17l10-10M9 7h8v8" stroke="#666" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>139 </svg>140 </div>141 </div>142 143 <div class="item">144 <div class="pin">145 <svg width="34" height="34" viewBox="0 0 24 24">146 <path d="M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7zm0 9a2 2 0 1 1 0-4 2 2 0 0 1 0 4z" fill="#9E9E9E"/>147 </svg>148 </div>149 <div class="texts">150 <div class="title">Yokohama Bay</div>151 <div class="subtitle">Hawaii, USA</div>152 </div>153 <div class="arrow">154 <svg width="30" height="30" viewBox="0 0 24 24">155 <path d="M7 17l10-10M9 7h8v8" stroke="#666" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>156 </svg>157 </div>158 </div>159 160 <div class="item">161 <div class="pin">162 <svg width="34" height="34" viewBox="0 0 24 24">163 <path d="M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7zm0 9a2 2 0 1 1 0-4 2 2 0 0 1 0 4z" fill="#9E9E9E"/>164 </svg>165 </div>166 <div class="texts">167 <div class="title">Yokohama</div>168 <div class="subtitle">South Lenola Road, Maple Shade, NJ, USA</div>169 </div>170 <div class="arrow">171 <svg width="30" height="30" viewBox="0 0 24 24">172 <path d="M7 17l10-10M9 7h8v8" stroke="#666" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>173 </svg>174 </div>175 </div>176 177 <div class="item">178 <div class="pin">179 <svg width="34" height="34" viewBox="0 0 24 24">180 <path d="M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7zm0 9a2 2 0 1 1 0-4 2 2 0 0 1 0 4z" fill="#9E9E9E"/>181 </svg>182 </div>183 <div class="texts">184 <div class="title">Yokocho</div>185 <div class="subtitle">North Green Street, Chicago, IL, USA</div>186 </div>187 <div class="arrow">188 <svg width="30" height="30" viewBox="0 0 24 24">189 <path d="M7 17l10-10M9 7h8v8" stroke="#666" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>190 </svg>191 </div>192 </div>193 194 <div class="item">195 <div class="pin">196 <svg width="34" height="34" viewBox="0 0 24 24">197 <path d="M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7zm0 9a2 2 0 1 1 0-4 2 2 0 0 1 0 4z" fill="#9E9E9E"/>198 </svg>199 </div>200 <div class="texts">201 <div class="title">Yokusuka</div>202 <div class="subtitle">Kanagawa, Japan</div>203 </div>204 <div class="arrow">205 <svg width="30" height="30" viewBox="0 0 24 24">206 <path d="M7 17l10-10M9 7h8v8" stroke="#666" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>207 </svg>208 </div>209 </div>210 211 <div class="item">212 <div class="pin">213 <svg width="34" height="34" viewBox="0 0 24 24">214 <path d="M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7zm0 9a2 2 0 1 1 0-4 2 2 0 0 1 0 4z" fill="#9E9E9E"/>215 </svg>216 </div>217 <div class="texts">218 <div class="title">Yokine</div>219 <div class="subtitle">WA, Australia</div>220 </div>221 <div class="arrow">222 <svg width="30" height="30" viewBox="0 0 24 24">223 <path d="M7 17l10-10M9 7h8v8" stroke="#666" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>224 </svg>225 </div>226 </div>227 228 <div class="item">229 <div class="pin">230 <svg width="34" height="34" viewBox="0 0 24 24">231 <path d="M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7zm0 9a2 2 0 1 1 0-4 2 2 0 0 1 0 4z" fill="#9E9E9E"/>232 </svg>233 </div>234 <div class="texts">235 <div class="title">Yokkaichi</div>236 <div class="subtitle">Mie, Japan</div>237 </div>238 <div class="arrow">239 <svg width="30" height="30" viewBox="0 0 24 24">240 <path d="M7 17l10-10M9 7h8v8" stroke="#666" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>241 </svg>242 </div>243 </div>244 245 </div>246 </div>247 248 <!-- Keyboard -->249 <div class="keyboard">250 <div class="kb-toolbar">251 <div>โป๏ธ</div>252 <div>๐</div>253 <div>GIF</div>254 <div>โ๏ธ</div>255 <div>Gแตสณ</div>256 <div>๐จ</div>257 <div style="margin-left:auto">๐ค</div>258 </div>259 <div class="kb-rows">260 <div class="row">261 <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>262 </div>263 <div class="row">264 <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>265 </div>266 <div class="row">267 <div class="key wide">โง</div><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><div class="key wide">โซ</div>268 </div>269 <div class="row" style="align-items:center">270 <div class="key wide">?123</div>271 <div class="key wide">,</div>272 <div class="key wide">๐</div>273 <div class="space">space</div>274 <div class="key wide">.</div>275 <div class="search-circle">276 <!-- magnifier -->277 <svg width="48" height="48" viewBox="0 0 24 24">278 <circle cx="11" cy="11" r="7" stroke="#2B5AA6" stroke-width="2" fill="none"/>279 <path d="M20 20l-4.5-4.5" stroke="#2B5AA6" stroke-width="2" stroke-linecap="round"/>280 </svg>281 </div>282 </div>283 </div>284 </div>285 286</div>287</body>288</html>