GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Android Search - Book Report</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7  #render-target {8    width: 1080px;9    height: 2400px;10    position: relative;11    overflow: hidden;12    background: #141217;13    color: #EDEDED;14  }15 16  /* Status bar */17  .status-bar {18    height: 110px;19    padding: 0 36px;20    display: flex;21    align-items: center;22    justify-content: space-between;23    color: #EDEDED;24    font-weight: 600;25    font-size: 40px;26  }27  .status-right {28    display: flex;29    align-items: center;30    gap: 26px;31  }32 33  /* Search header */34  .search-header {35    height: 150px;36    background: #2B2432;37    display: flex;38    align-items: center;39    padding: 0 28px;40  }41  .search-header .text {42    flex: 1;43    font-size: 48px;44    color: #EDEDED;45    padding: 0 20px;46  }47 48  /* Results list */49  .results {50    padding: 40px 40px 20px 40px;51  }52  .result-item {53    display: flex;54    align-items: center;55    padding: 34px 10px;56    border-radius: 12px;57    color: #F5F5F5;58  }59  .result-item + .result-item {60    border-top: 1px solid rgba(255,255,255,0.05);61  }62  .icon {63    width: 64px;64    height: 64px;65    display: inline-flex;66    align-items: center;67    justify-content: center;68    margin-right: 26px;69  }70  .ppt-icon {71    width: 64px;72    height: 64px;73    border-radius: 12px;74    background: #F07A3F;75    color: #231F20;76    font-weight: 800;77    display: flex;78    align-items: center;79    justify-content: center;80    margin-right: 26px;81  }82  .result-title {83    font-size: 50px;84    line-height: 58px;85  }86  .result-meta {87    font-size: 34px;88    color: #B7B7B7;89    margin-top: 10px;90  }91  .result-right {92    margin-left: auto;93    opacity: 0.7;94  }95 96  /* Keyboard */97  .keyboard {98    position: absolute;99    bottom: 0;100    left: 0;101    width: 1080px;102    height: 980px;103    background: #19181D;104    border-top-left-radius: 26px;105    border-top-right-radius: 26px;106    box-shadow: 0 -10px 30px rgba(0,0,0,0.35) inset;107  }108  .kb-toolbar {109    height: 120px;110    padding: 0 40px;111    display: flex;112    align-items: center;113    gap: 40px;114    color: #DCDCDC;115  }116  .tool {117    width: 72px;118    height: 72px;119    border-radius: 16px;120    background: #27262C;121    display: flex; align-items: center; justify-content: center;122  }123  .kb-rows {124    padding: 20px 30px 0 30px;125  }126  .kb-row {127    display: grid;128    grid-gap: 18px;129    margin: 22px 0;130  }131  .kb-row.row10 { grid-template-columns: repeat(10, 1fr); }132  .kb-row.row9 { grid-template-columns: repeat(9, 1fr); }133  .kb-row.row7 { grid-template-columns: repeat(7, 1fr); }134  .key {135    height: 120px;136    border-radius: 20px;137    background: #26252B;138    color: #F0F0F0;139    display: flex;140    align-items: center;141    justify-content: center;142    font-size: 54px;143    box-shadow: 0 2px 0 rgba(255,255,255,0.04) inset;144  }145  .bottom-row {146    display: grid;147    grid-template-columns: 1.3fr 1fr 1fr 4fr 1fr 1.5fr 1.2fr;148    grid-gap: 18px;149    margin: 34px 30px;150  }151  .space {152    height: 140px;153    border-radius: 28px;154    background: #26252B;155    display: flex;156    align-items: center;157    justify-content: center;158    color: #AFAFAF;159    font-size: 42px;160  }161  .circle-btn {162    height: 140px;163    border-radius: 28px;164    background: #26252B;165    display: flex; align-items: center; justify-content: center;166  }167  .search-btn {168    background: #E6C7F0;169    color: #2B2333;170  }171</style>172</head>173<body>174<div id="render-target">175 176  <!-- Status Bar -->177  <div class="status-bar">178    <div>8:56</div>179    <div class="status-right">180      <!-- simple icons -->181      <svg width="48" height="48" viewBox="0 0 48 48">182        <path d="M6 30c6-6 18-6 24 0" stroke="#FFFFFF" stroke-width="3" fill="none" opacity="0.6"/>183        <path d="M10 26c4-4 12-4 16 0" stroke="#FFFFFF" stroke-width="3" fill="none"/>184        <circle cx="22" cy="30" r="2.5" fill="#FFFFFF"/>185      </svg>186      <svg width="64" height="48" viewBox="0 0 64 48">187        <rect x="6" y="10" width="46" height="28" rx="4" stroke="#FFFFFF" stroke-width="3" fill="none"/>188        <rect x="10" y="14" width="32" height="20" rx="2" fill="#FFFFFF"/>189        <rect x="54" y="18" width="6" height="12" rx="2" fill="#FFFFFF"/>190      </svg>191    </div>192  </div>193 194  <!-- Search Header -->195  <div class="search-header">196    <div class="icon">197      <svg width="64" height="64" viewBox="0 0 48 48">198        <path d="M30 12 L16 24 L30 36" stroke="#FFFFFF" stroke-width="4" fill="none" stroke-linecap="round" stroke-linejoin="round"/>199      </svg>200    </div>201    <div class="text">Book Report.pptx</div>202    <div class="icon">203      <svg width="64" height="64" viewBox="0 0 48 48">204        <path d="M12 12 L36 36 M36 12 L12 36" stroke="#FFFFFF" stroke-width="4" stroke-linecap="round"/>205      </svg>206    </div>207  </div>208 209  <!-- Results -->210  <div class="results">211    <div class="result-item">212      <div class="icon">213        <svg width="64" height="64" viewBox="0 0 64 64">214          <circle cx="28" cy="28" r="18" stroke="#FFFFFF" stroke-width="4" fill="none"/>215          <line x1="44" y1="44" x2="58" y2="58" stroke="#FFFFFF" stroke-width="4" />216        </svg>217      </div>218      <div>219        <div class="result-title">Book Report.pptx</div>220      </div>221      <div class="result-right">222        <svg width="56" height="56" viewBox="0 0 48 48">223          <path d="M14 34 L34 14 M22 14 H34 V26" stroke="#FFFFFF" stroke-width="4" fill="none" stroke-linecap="round" stroke-linejoin="round"/>224        </svg>225      </div>226    </div>227 228    <div class="result-item">229      <div class="ppt-icon">P</div>230      <div>231        <div class="result-title" style="font-weight:600;">Book report.pptx</div>232        <div class="result-meta">Modified Oct 16</div>233      </div>234    </div>235  </div>236 237  <!-- Keyboard -->238  <div class="keyboard">239    <div class="kb-toolbar">240      <div class="tool">241        <svg width="36" height="36" viewBox="0 0 36 36">242          <rect x="3" y="5" width="10" height="10" fill="#CFCFCF"/><rect x="19" y="5" width="10" height="10" fill="#CFCFCF"/>243          <rect x="3" y="21" width="10" height="10" fill="#CFCFCF"/><rect x="19" y="21" width="10" height="10" fill="#CFCFCF"/>244        </svg>245      </div>246      <div class="tool">247        <svg width="36" height="36" viewBox="0 0 36 36"><circle cx="18" cy="14" r="8" fill="#CFCFCF"/><rect x="14" y="22" width="8" height="8" fill="#CFCFCF"/></svg>248      </div>249      <div class="tool">250        <svg width="36" height="36" viewBox="0 0 36 36"><text x="6" y="24" font-size="16" fill="#CFCFCF">GIF</text></svg>251      </div>252      <div class="tool">253        <svg width="36" height="36" viewBox="0 0 36 36"><circle cx="18" cy="18" r="14" stroke="#CFCFCF" stroke-width="3" fill="none"/><rect x="16" y="10" width="4" height="14" fill="#CFCFCF"/></svg>254      </div>255      <div class="tool">256        <svg width="36" height="36" viewBox="0 0 36 36"><path d="M6 26 L14 10 L20 20 L26 12 L30 26" stroke="#CFCFCF" stroke-width="3" fill="none"/></svg>257      </div>258      <div class="tool">259        <svg width="36" height="36" viewBox="0 0 36 36"><circle cx="18" cy="18" r="12" stroke="#CFCFCF" stroke-width="3" fill="none"/><rect x="16" y="8" width="4" height="12" fill="#CFCFCF"/><rect x="14" y="20" width="8" height="8" rx="4" fill="#CFCFCF"/></svg>260      </div>261    </div>262 263    <div class="kb-rows">264      <div class="kb-row row10">265        <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>266      </div>267 268      <div class="kb-row row9">269        <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>270      </div>271 272      <div class="kb-row row7">273        <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>274      </div>275    </div>276 277    <div class="bottom-row">278      <div class="circle-btn"><span style="font-size:44px;color:#EDEDED">?123</span></div>279      <div class="circle-btn"><span style="font-size:52px;color:#EDEDED">,</span></div>280      <div class="circle-btn">281        <svg width="42" height="42" viewBox="0 0 42 42">282          <circle cx="21" cy="21" r="12" fill="#CFCFCF"/>283          <circle cx="21" cy="21" r="6" fill="#AFAFAF"/>284        </svg>285      </div>286      <div class="space">space</div>287      <div class="circle-btn"><span style="font-size:52px;color:#EDEDED">.</span></div>288      <div class="circle-btn">289        <svg width="50" height="50" viewBox="0 0 50 50">290          <path d="M16 16 L34 25 L16 34 Z" fill="#EDEDED"/>291        </svg>292      </div>293      <div class="circle-btn search-btn">294        <svg width="56" height="56" viewBox="0 0 56 56">295          <circle cx="26" cy="26" r="16" stroke="#2B2333" stroke-width="4" fill="none"/>296          <line x1="38" y1="38" x2="52" y2="52" stroke="#2B2333" stroke-width="4"/>297        </svg>298      </div>299    </div>300  </div>301 302</div>303</body>304</html>