GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Sleep Story Search</title>5<meta name="viewport" content="width=device-width, initial-scale=1.0">6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: linear-gradient(180deg, #2b5e8c 0%, #1f4e79 40%, #1e4a73 100%);14    color: #fff;15  }16 17  /* Top bar */18  .topbar {19    position: relative;20    padding: 36px 36px 0 36px;21    height: 230px;22  }23  .icon-btn {24    position: absolute;25    top: 40px;26    width: 92px;27    height: 92px;28    border-radius: 50%;29    background: rgba(255,255,255,0.12);30    display: flex;31    align-items: center;32    justify-content: center;33    border: 1px solid rgba(255,255,255,0.25);34    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06);35  }36  .icon-btn.left { left: 36px; }37  .icon-btn.right { right: 36px; }38 39  .title {40    margin: 100px 150px 0 150px;41    font-weight: 700;42    font-size: 54px;43    line-height: 1.2;44    letter-spacing: 0.2px;45  }46 47  /* Filters */48  .filters {49    display: flex;50    gap: 36px;51    padding: 36px;52    margin-top: 8px;53  }54  .pill {55    display: inline-flex;56    align-items: center;57    gap: 18px;58    padding: 22px 34px;59    border-radius: 60px;60    border: 2px solid #7eb5d8;61    color: #d5e9f8;62    font-size: 32px;63    background: rgba(255,255,255,0.06);64  }65  .caret {66    width: 18px;67    height: 18px;68    display: inline-block;69    margin-left: 6px;70    border: 8px solid transparent;71    border-top-color: #d5e9f8;72    transform: translateY(4px);73  }74 75  /* Result card */76  .results {77    padding: 24px 36px;78  }79  .card {80    display: flex;81    gap: 30px;82    align-items: center;83    padding: 18px 8px;84  }85  .cover {86    width: 210px;87    height: 210px;88    background: #E0E0E0;89    border: 1px solid #BDBDBD;90    color: #757575;91    display: flex;92    align-items: center;93    justify-content: center;94    font-size: 26px;95    text-align: center;96    border-radius: 22px;97  }98  .meta .name {99    font-size: 42px;100    font-weight: 700;101    margin-bottom: 10px;102  }103  .meta .byline {104    font-size: 32px;105    color: #c4d9ee;106    margin-bottom: 12px;107  }108  .meta .length {109    font-size: 32px;110    color: #d7e7f6;111  }112 113  /* Spacer to push keyboard visually like the app */114  .spacer {115    height: 850px;116  }117 118  /* Keyboard (approximation) */119  .keyboard {120    position: absolute;121    left: 0;122    right: 0;123    bottom: 0;124    height: 820px;125    background: #e8f3e2;126    border-top-left-radius: 26px;127    border-top-right-radius: 26px;128    box-shadow: 0 -4px 12px rgba(0,0,0,0.12) inset;129    padding: 28px 26px;130  }131  .numbers {132    display: grid;133    grid-template-columns: repeat(10, 1fr);134    gap: 18px;135    margin-bottom: 16px;136  }137  .key {138    height: 98px;139    background: #ffffff;140    border-radius: 18px;141    display: flex;142    align-items: center;143    justify-content: center;144    color: #222;145    font-size: 40px;146    border: 1px solid #d9e6d6;147  }148  .letters-row {149    display: grid;150    grid-template-columns: repeat(10, 1fr);151    gap: 18px;152    margin-top: 12px;153  }154  .letters-row.nine {155    grid-template-columns: 0.5fr repeat(9, 1fr) 0.5fr;156  }157  .letters-row.bottom {158    grid-template-columns: 1.2fr repeat(7, 1fr) 1.2fr;159  }160  .key.green {161    background: #71e28a;162    color: #fff;163    border-color: #6ad07f;164  }165  .space-row {166    display: grid;167    grid-template-columns: 1.2fr 1fr 5fr 1fr 1.6fr;168    gap: 18px;169    margin-top: 22px;170  }171  .space {172    background: #ffffff;173    border-radius: 22px;174    height: 110px;175    border: 1px solid #d9e6d6;176    display: flex;177    align-items: center;178    justify-content: center;179    color: #111;180    font-size: 40px;181  }182 183  /* Simple inline SVG icons color */184  svg { fill: none; stroke: #fff; stroke-width: 6; }185</style>186</head>187<body>188<div id="render-target">189  <div class="topbar">190    <div class="icon-btn left" aria-label="Back">191      <svg width="42" height="42" viewBox="0 0 24 24">192        <path d="M15 18l-6-6 6-6"/>193      </svg>194    </div>195    <div class="icon-btn right" aria-label="Close">196      <svg width="42" height="42" viewBox="0 0 24 24">197        <path d="M6 6l12 12M18 6L6 18"/>198      </svg>199    </div>200    <div class="title">The Grand Plan to rise and Shine</div>201  </div>202 203  <div class="filters">204    <div class="pill">Category <span class="caret"></span></div>205    <div class="pill">Time <span class="caret"></span></div>206  </div>207 208  <div class="results">209    <div class="card">210      <div class="cover">[IMG: Sleep Story Cover]</div>211      <div class="meta">212        <div class="name">The Grand Plan to Rise and Shine</div>213        <div class="byline">Frankie Bridge • Sleep Story</div>214        <div class="length">34 min</div>215      </div>216    </div>217  </div>218 219  <div class="spacer"></div>220 221  <!-- Keyboard approximation -->222  <div class="keyboard">223    <div class="numbers">224      <div class="key">1</div><div class="key">2</div><div class="key">3</div><div class="key">4</div><div class="key">5</div>225      <div class="key">6</div><div class="key">7</div><div class="key">8</div><div class="key">9</div><div class="key">0</div>226    </div>227 228    <div class="letters-row">229      <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>230      <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>231    </div>232 233    <div class="letters-row nine">234      <div></div>235      <div class="key">a</div><div class="key">s</div><div class="key">d</div><div class="key">f</div>236      <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>237      <div></div>238    </div>239 240    <div class="letters-row bottom">241      <div class="key green">⇧</div>242      <div class="key">z</div><div class="key">x</div><div class="key">c</div><div class="key">v</div>243      <div class="key">b</div><div class="key">n</div><div class="key">m</div>244      <div class="key green">⌫</div>245    </div>246 247    <div class="space-row">248      <div class="space">?123</div>249      <div class="space">,</div>250      <div class="space">space</div>251      <div class="space">.</div>252      <div class="space" style="background:#71e28a;color:#fff;border-color:#6ad07f;">return</div>253    </div>254  </div>255</div>256</body>257</html>