GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Mobile UI - Search Results</title>5<style>6 body { margin: 0; padding: 0; background: transparent; }7 #render-target {8 width: 1080px;9 height: 2400px;10 position: relative;11 overflow: hidden;12 background: #121212;13 color: #FFFFFF;14 font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;15 }16 17 /* Status bar */18 .status-bar {19 position: absolute;20 top: 0;21 left: 0;22 width: 100%;23 height: 120px;24 padding: 0 36px;25 display: flex;26 align-items: center;27 justify-content: space-between;28 color: #fff;29 font-size: 42px;30 }31 .status-right {32 display: flex;33 align-items: center;34 gap: 22px;35 font-size: 34px;36 color: #cfcfcf;37 }38 .icon-battery {39 width: 70px; height: 36px; border: 3px solid #cfcfcf; border-radius: 6px; position: relative;40 }41 .icon-battery::after {42 content: "";43 position: absolute; right: -10px; top: 10px;44 width: 8px; height: 16px; background: #cfcfcf; border-radius: 2px;45 }46 .icon-battery-fill { width: 50px; height: 28px; background: #cfcfcf; margin: 4px; border-radius: 4px; }47 48 /* Search header */49 .search-header {50 position: absolute;51 top: 120px;52 left: 0;53 width: 100%;54 height: 120px;55 display: flex;56 align-items: center;57 padding: 0 24px;58 background: #1a1a1a;59 box-shadow: 0 1px 0 rgba(255,255,255,0.06) inset;60 }61 .back-btn, .close-btn {62 width: 96px; height: 96px; display: flex; align-items: center; justify-content: center;63 }64 .search-field {65 flex: 1;66 height: 90px;67 margin: 0 10px;68 display: flex;69 align-items: center;70 color: #eaeaea;71 font-size: 46px;72 letter-spacing: 0.2px;73 }74 75 /* Content list */76 .content {77 position: absolute;78 top: 240px;79 left: 0;80 width: 100%;81 bottom: 930px; /* leave room for keyboard */82 overflow: hidden;83 padding: 10px 24px;84 }85 86 .list-row {87 height: 140px;88 display: flex;89 align-items: center;90 padding: 0 6px;91 border-bottom: 1px solid rgba(255,255,255,0.06);92 }93 .list-row .left-icon {94 width: 96px; height: 96px; display: flex; align-items: center; justify-content: center; margin-right: 20px;95 }96 .list-row .right-icon {97 margin-left: auto;98 width: 80px; height: 80px; display: flex; align-items: center; justify-content: center;99 }100 .row-title {101 font-size: 48px;102 color: #f5f5f5;103 }104 .row-subtitle {105 font-size: 34px;106 color: #9e9e9e;107 margin-top: 10px;108 }109 110 .pdf-row {111 height: 180px;112 display: flex;113 align-items: center;114 padding: 0 6px;115 border-bottom: 1px solid rgba(255,255,255,0.06);116 }117 .pdf-icon {118 width: 88px; height: 88px;119 background: #E57373;120 border-radius: 12px;121 color: #1b1b1b;122 font-weight: 700;123 display: flex; align-items: center; justify-content: center;124 margin-right: 26px;125 font-size: 30px;126 }127 .pdf-text { flex: 1; }128 .pdf-title {129 font-size: 44px; color: #ffffff; line-height: 1.25;130 }131 .pdf-title .bold { font-weight: 700; }132 .pdf-meta { font-size: 34px; color: #9e9e9e; margin-top: 12px; }133 134 /* Floating search button */135 .fab {136 position: absolute;137 right: 36px;138 bottom: 1040px; /* sits above keyboard edge */139 width: 120px; height: 120px;140 background: #C8FF7E;141 border-radius: 60px;142 box-shadow: 0 6px 16px rgba(0,0,0,0.35);143 display: flex; align-items: center; justify-content: center;144 }145 146 /* Keyboard */147 .keyboard {148 position: absolute;149 bottom: 0;150 left: 0;151 width: 100%;152 height: 930px;153 background: #1b1b1b;154 border-top-left-radius: 18px;155 border-top-right-radius: 18px;156 padding: 40px 28px 24px;157 box-shadow: 0 -6px 24px rgba(0,0,0,0.45);158 }159 .suggestions {160 display: flex; gap: 28px; color: #e0e0e0; font-size: 40px; margin-bottom: 26px; align-items: center;161 }162 .sugg-pill { padding: 12px 22px; background: #262626; border-radius: 18px; }163 .keys-row {164 display: grid;165 grid-template-columns: repeat(10, 1fr);166 gap: 20px;167 margin-bottom: 24px;168 }169 .keys-row.short { grid-template-columns: repeat(9, 1fr); }170 .keys-row.bottom { grid-template-columns: 1.2fr 7fr 1.2fr; }171 .key {172 height: 120px; background: #2a2a2a; border-radius: 22px;173 color: #ffffff; display: flex; align-items: center; justify-content: center;174 font-size: 48px;175 box-shadow: inset 0 -3px 0 rgba(255,255,255,0.05);176 }177 .key.small { font-size: 40px; }178 .space { height: 120px; background: #2a2a2a; border-radius: 22px; }179</style>180</head>181<body>182<div id="render-target">183 184 <!-- Status Bar -->185 <div class="status-bar">186 <div>9:37</div>187 <div class="status-right">188 <span>LR</span>189 <span>N</span>190 <span>•</span>191 <span>100%</span>192 <div class="icon-battery"><div class="icon-battery-fill"></div></div>193 </div>194 </div>195 196 <!-- Search Header -->197 <div class="search-header">198 <div class="back-btn">199 <svg width="60" height="60" viewBox="0 0 100 100">200 <path d="M70 15 L30 50 L70 85" stroke="#E0E0E0" stroke-width="12" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>201 </svg>202 </div>203 <div class="search-field">JRR Tolkien</div>204 <div class="close-btn">205 <svg width="60" height="60" viewBox="0 0 100 100">206 <path d="M20 20 L80 80 M80 20 L20 80" stroke="#E0E0E0" stroke-width="12" stroke-linecap="round"></path>207 </svg>208 </div>209 </div>210 211 <!-- Content / Results -->212 <div class="content">213 <!-- Suggestion row -->214 <div class="list-row">215 <div class="left-icon">216 <svg width="70" height="70" viewBox="0 0 100 100">217 <circle cx="42" cy="42" r="28" stroke="#BDBDBD" stroke-width="8" fill="none"></circle>218 <line x1="66" y1="66" x2="90" y2="90" stroke="#BDBDBD" stroke-width="8" stroke-linecap="round"></line>219 </svg>220 </div>221 <div>222 <div class="row-title">JRR Tolkien</div>223 </div>224 <div class="right-icon">225 <svg width="70" height="70" viewBox="0 0 100 100">226 <path d="M30 70 L70 30" stroke="#9E9E9E" stroke-width="10" stroke-linecap="round"></path>227 <path d="M70 30 L70 55 L45 55" stroke="#9E9E9E" stroke-width="10" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>228 </svg>229 </div>230 </div>231 232 <!-- PDF result row 1 -->233 <div class="pdf-row">234 <div class="pdf-icon">PDF</div>235 <div class="pdf-text">236 <div class="pdf-title">Copy of <span class="bold">JRR Tolkien</span> - Lord of the Rings Co...</div>237 <div class="pdf-meta">Modified Oct 6</div>238 </div>239 </div>240 241 <!-- PDF result row 2 -->242 <div class="pdf-row">243 <div class="pdf-icon">PDF</div>244 <div class="pdf-text">245 <div class="pdf-title"><span class="bold">JRR Tolkien</span> - Lord of the Rings Collection....</div>246 <div class="pdf-meta">Modified Oct 6</div>247 </div>248 </div>249 </div>250 251 <!-- Floating search button -->252 <div class="fab">253 <svg width="64" height="64" viewBox="0 0 100 100">254 <circle cx="42" cy="42" r="28" stroke="#2E2E2E" stroke-width="8" fill="none"></circle>255 <line x1="66" y1="66" x2="90" y2="90" stroke="#2E2E2E" stroke-width="8" stroke-linecap="round"></line>256 </svg>257 </div>258 259 <!-- Keyboard -->260 <div class="keyboard">261 <div class="suggestions">262 <div class="sugg-pill">Tolkien</div>263 <div class="sugg-pill">Tolkien's</div>264 <div style="margin-left:auto;">265 <svg width="60" height="60" viewBox="0 0 100 100">266 <circle cx="42" cy="42" r="28" stroke="#BDBDBD" stroke-width="8" fill="none"></circle>267 <line x1="66" y1="66" x2="90" y2="90" stroke="#BDBDBD" stroke-width="8" stroke-linecap="round"></line>268 </svg>269 </div>270 </div>271 272 <div class="keys-row">273 <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>274 <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>275 </div>276 <div class="keys-row short">277 <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>278 <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>279 </div>280 <div class="keys-row short">281 <div class="key small">z</div><div class="key small">x</div><div class="key small">c</div><div class="key small">v</div>282 <div class="key small">b</div><div class="key small">n</div><div class="key small">m</div>283 <div class="key small">⌫</div><div class="key small">↵</div>284 </div>285 <div class="keys-row bottom">286 <div class="key small">?123</div>287 <div class="space"></div>288 <div class="key small">.</div>289 </div>290 </div>291 292</div>293</body>294</html>