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: Roboto, Arial, sans-serif; }7 #render-target {8 width:1080px; height:2400px; position:relative; overflow:hidden;9 background:#ffffff;10 }11 12 /* Status bar */13 .status-bar {14 position:absolute; top:0; left:0; right:0;15 height:110px; padding:0 36px;16 display:flex; align-items:center; justify-content:space-between;17 color:#2f2f2f; font-size:42px; letter-spacing:0.5px;18 background:#ffffff;19 }20 .status-right { display:flex; gap:28px; align-items:center; }21 .dot-icon { width:28px; height:28px; border-radius:50%; background:#6d6d6d; }22 .battery {23 width:48px; height:26px; border:3px solid #6d6d6d; border-radius:6px; position:relative;24 }25 .battery:after {26 content:""; position:absolute; right:-10px; top:8px; width:8px; height:10px; background:#6d6d6d; border-radius:2px;27 }28 29 /* Search header */30 .search-header {31 position:absolute; top:110px; left:0; right:0; padding:24px 36px;32 background:#ffffff;33 border-bottom:1px solid #e6e6e6;34 }35 .search-bar {36 height:120px; border-radius:60px; background:#f7f7f7;37 display:flex; align-items:center; padding:0 32px; gap:26px;38 box-shadow: inset 0 0 0 1px #e1e1e1;39 }40 .circle-btn {41 width:70px; height:70px; border-radius:50%; background:#eaeaea; display:flex; align-items:center; justify-content:center;42 }43 .back-arrow svg, .close-x svg { width:34px; height:34px; fill:#444; }44 .search-input {45 flex:1; font-size:56px; color:#111; letter-spacing:0.5px;46 }47 .gps-dot { width:26px; height:26px; border-radius:50%; background:#8e8e8e; }48 49 /* Suggestions list */50 .list {51 position:absolute; top:260px; left:0; right:0; bottom:900px;52 overflow:hidden; padding:0 0;53 background:#ffffff;54 }55 .item {56 display:flex; align-items:flex-start; gap:28px;57 padding:34px 36px;58 border-bottom:1px solid #eeeeee;59 }60 .item .pin {61 width:70px; height:70px; border-radius:50%; background:#f0f0f0; border:1px solid #d7d7d7;62 display:flex; align-items:center; justify-content:center;63 }64 .item .pin svg { width:36px; height:36px; fill:#666; }65 .item .text { flex:1; }66 .item .title { font-size:48px; color:#111; }67 .item .sub { font-size:38px; color:#757575; margin-top:10px; }68 .item .arrow {69 width:52px; height:52px; display:flex; align-items:center; justify-content:center;70 }71 .item .arrow svg { width:40px; height:40px; fill:#6b6b6b; }72 73 /* Keyboard */74 .keyboard {75 position:absolute; left:0; right:0; bottom:0;76 height:900px; background:#f3f1f6; border-top:1px solid #ddd;77 box-shadow: 0 -4px 12px rgba(0,0,0,0.05);78 }79 .kb-toolbar {80 display:flex; gap:44px; padding:30px 36px; align-items:center;81 }82 .tool {83 width:92px; height:92px; border-radius:26px; background:#e7e4ea; display:flex; align-items:center; justify-content:center;84 color:#5a5a5a; font-size:40px; border:1px solid #dad6e0;85 }86 87 .kb-row {88 display:flex; justify-content:space-between;89 padding:18px 28px;90 }91 .key {92 width:88px; height:118px; background:#ffffff; border:1px solid #dcdcdc; border-radius:22px;93 display:flex; align-items:center; justify-content:center;94 font-size:46px; color:#222;95 box-shadow: 0 1px 0 rgba(0,0,0,0.04);96 }97 .key.wide { width:170px; }98 .space-row { display:flex; align-items:center; justify-content:space-between; padding:18px 28px; }99 .space { flex:1; height:120px; background:#ffffff; border:1px solid #dcdcdc; border-radius:32px; margin:0 24px; }100 .home-pill {101 position:absolute; bottom:22px; left:50%; transform:translateX(-50%);102 width:420px; height:12px; border-radius:12px; background:#9f9f9f;103 }104</style>105</head>106<body>107<div id="render-target">108 109 <!-- Status bar -->110 <div class="status-bar">111 <div>10:35</div>112 <div class="status-right">113 <div class="dot-icon"></div>114 <div class="dot-icon" style="background:#9a9a9a;"></div>115 <div class="battery"></div>116 </div>117 </div>118 119 <!-- Search header -->120 <div class="search-header">121 <div class="search-bar">122 <div class="circle-btn back-arrow">123 <!-- Back icon -->124 <svg viewBox="0 0 24 24"><path d="M15.5 6l-6 6 6 6-1.4 1.4L6.7 12l7.4-7.4z"/></svg>125 </div>126 <div class="gps-dot"></div>127 <div class="search-input">98101</div>128 <div class="circle-btn close-x">129 <!-- Close icon -->130 <svg viewBox="0 0 24 24"><path d="M18.3 5.7L12 12l6.3 6.3-1.3 1.3L10.7 13.3 4.4 19.6 3.1 18.3 9.4 12 3.1 5.7 4.4 4.4l6.3 6.3 6.3-6.3z"/></svg>131 </div>132 </div>133 </div>134 135 <!-- Suggestions -->136 <div class="list">137 <div class="item">138 <div class="pin">139 <svg viewBox="0 0 24 24"><path d="M12 2C8.7 2 6 4.7 6 8c0 5.2 6 12 6 12s6-6.8 6-12c0-3.3-2.7-6-6-6zm0 8.5c-1.4 0-2.5-1.1-2.5-2.5S10.6 5.5 12 5.5s2.5 1.1 2.5 2.5S13.4 10.5 12 10.5z"/></svg>140 </div>141 <div class="text">142 <div class="title">98101</div>143 <div class="sub">Seattle, WA, USA</div>144 </div>145 <div class="arrow">146 <svg viewBox="0 0 24 24"><path d="M7 17l8-8H9V7h8v8h-2V9l-8 8z"/></svg>147 </div>148 </div>149 150 <div class="item">151 <div class="pin">152 <!-- Search icon -->153 <svg viewBox="0 0 24 24"><path d="M15.5 14h-.8l-.3-.3A6.5 6.5 0 1015.5 14l4.3 4.3-1.2 1.2L15.5 14zm-6 0A4.5 4.5 0 1114 9.5 4.5 4.5 0 019.5 14z"/></svg>154 </div>155 <div class="text">156 <div class="title">98101 county</div>157 </div>158 <div class="arrow">159 <svg viewBox="0 0 24 24"><path d="M7 17l8-8H9V7h8v8h-2V9l-8 8z"/></svg>160 </div>161 </div>162 163 <div class="item">164 <div class="pin">165 <svg viewBox="0 0 24 24"><path d="M12 2C8.7 2 6 4.7 6 8c0 5.2 6 12 6 12s6-6.8 6-12c0-3.3-2.7-6-6-6zm0 8.5c-1.4 0-2.5-1.1-2.5-2.5S10.6 5.5 12 5.5s2.5 1.1 2.5 2.5S13.4 10.5 12 10.5z"/></svg>166 </div>167 <div class="text">168 <div class="title">98101 Sitkum Lane</div>169 <div class="sub">Myrtle Point, OR, USA</div>170 </div>171 <div class="arrow">172 <svg viewBox="0 0 24 24"><path d="M7 17l8-8H9V7h8v8h-2V9l-8 8z"/></svg>173 </div>174 </div>175 176 <div class="item">177 <div class="pin">178 <svg viewBox="0 0 24 24"><path d="M12 2C8.7 2 6 4.7 6 8c0 5.2 6 12 6 12s6-6.8 6-12c0-3.3-2.7-6-6-6zm0 8.5c-1.4 0-2.5-1.1-2.5-2.5S10.6 5.5 12 5.5s2.5 1.1 2.5 2.5S13.4 10.5 12 10.5z"/></svg>179 </div>180 <div class="text">181 <div class="title">〒 981-0121</div>182 <div class="sub">Japan Miyagi, Rifu, 神谷沢</div>183 </div>184 <div class="arrow">185 <svg viewBox="0 0 24 24"><path d="M7 17l8-8H9V7h8v8h-2V9l-8 8z"/></svg>186 </div>187 </div>188 189 <div class="item">190 <div class="pin">191 <svg viewBox="0 0 24 24"><path d="M12 2C8.7 2 6 4.7 6 8c0 5.2 6 12 6 12s6-6.8 6-12c0-3.3-2.7-6-6-6zm0 8.5c-1.4 0-2.5-1.1-2.5-2.5S10.6 5.5 12 5.5s2.5 1.1 2.5 2.5S13.4 10.5 12 10.5z"/></svg>192 </div>193 <div class="text">194 <div class="title">981 01</div>195 <div class="sub">Hnúšťa, Slovakia</div>196 </div>197 <div class="arrow">198 <svg viewBox="0 0 24 24"><path d="M7 17l8-8H9V7h8v8h-2V9l-8 8z"/></svg>199 </div>200 </div>201 202 <div class="item">203 <div class="pin">204 <svg viewBox="0 0 24 24"><path d="M12 2C8.7 2 6 4.7 6 8c0 5.2 6 12 6 12s6-6.8 6-12c0-3.3-2.7-6-6-6zm0 8.5c-1.4 0-2.5-1.1-2.5-2.5S10.6 5.5 12 5.5s2.5 1.1 2.5 2.5S13.4 10.5 12 10.5z"/></svg>205 </div>206 <div class="text">207 <div class="title">981-0111</div>208 <div class="sub">Kase, Rifu, Miyagi, Japan</div>209 </div>210 <div class="arrow">211 <svg viewBox="0 0 24 24"><path d="M7 17l8-8H9V7h8v8h-2V9l-8 8z"/></svg>212 </div>213 </div>214 215 <div class="item">216 <div class="pin">217 <svg viewBox="0 0 24 24"><path d="M12 2C8.7 2 6 4.7 6 8c0 5.2 6 12 6 12s6-6.8 6-12c0-3.3-2.7-6-6-6zm0 8.5c-1.4 0-2.5-1.1-2.5-2.5S10.6 5.5 12 5.5s2.5 1.1 2.5 2.5S13.4 10.5 12 10.5z"/></svg>218 </div>219 <div class="text">220 <div class="title">〒 981-0136</div>221 <div class="sub">Japan Miyagi, Rifu, 皆の丘</div>222 </div>223 <div class="arrow">224 <svg viewBox="0 0 24 24"><path d="M7 17l8-8H9V7h8v8h-2V9l-8 8z"/></svg>225 </div>226 </div>227 228 <div class="item">229 <div class="pin">230 <svg viewBox="0 0 24 24"><path d="M12 2C8.7 2 6 4.7 6 8c0 5.2 6 12 6 12s6-6.8 6-12c0-3.3-2.7-6-6-6zm0 8.5c-1.4 0-2.5-1.1-2.5-2.5S10.6 5.5 12 5.5s2.5 1.1 2.5 2.5S13.4 10.5 12 10.5z"/></svg>231 </div>232 <div class="text">233 <div class="title">〒 981-0112</div>234 <div class="sub">Japan Miyagi, Rifu, ...</div>235 </div>236 <div class="arrow">237 <svg viewBox="0 0 24 24"><path d="M7 17l8-8H9V7h8v8h-2V9l-8 8z"/></svg>238 </div>239 </div>240 </div>241 242 <!-- Keyboard -->243 <div class="keyboard">244 <div class="kb-toolbar">245 <div class="tool">◰</div>246 <div class="tool">☺</div>247 <div class="tool">GIF</div>248 <div class="tool">☆</div>249 <div class="tool">🅖</div>250 <div class="tool">🎨</div>251 <div class="tool">⌨</div>252 </div>253 254 <div class="kb-row">255 <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>256 </div>257 <div class="kb-row">258 <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>259 </div>260 <div class="kb-row">261 <div class="key wide">⇧</div>262 <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>263 <div class="key wide">⌫</div>264 </div>265 <div class="space-row">266 <div class="key wide">?123</div>267 <div class="key">,</div>268 <div class="space"></div>269 <div class="key">.</div>270 <div class="key wide">🔍</div>271 </div>272 <div class="home-pill"></div>273 </div>274 275</div>276</body>277</html>