GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Sleep App UI - Featured</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: "Arial", sans-serif; }7  #render-target {8    width: 1080px;9    height: 2400px;10    position: relative;11    overflow: hidden;12    background: #0c1220;13    color: #e9eefc;14  }15 16  /* Status bar */17  .status-bar {18    position: absolute;19    top: 0;20    left: 0;21    width: 1080px;22    height: 90px;23    padding: 20px 30px;24    box-sizing: border-box;25    display: flex;26    align-items: center;27    justify-content: space-between;28    color: #d9d9d9;29    font-size: 30px;30    letter-spacing: 0.5px;31  }32  .sb-right {33    display: flex;34    gap: 22px;35    align-items: center;36  }37  .sb-dot { width: 14px; height: 14px; background:#d9d9d9; border-radius: 50%; opacity:0.8; }38  .sb-icon {39    width: 26px; height: 26px; border:2px solid #d9d9d9; border-radius:4px;40  }41 42  /* Header with back and section titles */43  .header {44    position: absolute;45    top: 90px;46    left: 0;47    width: 1080px;48    padding: 30px 40px 0 40px;49    box-sizing: border-box;50  }51  .back-btn {52    position: absolute;53    left: 30px;54    top: 22px;55    width: 70px;56    height: 70px;57    border: none;58    background: transparent;59    cursor: pointer;60  }61  .back-btn svg { width: 44px; height: 44px; fill: none; stroke: #e9eefc; stroke-width: 6; }62  .top-tabs {63    display: flex;64    gap: 36px;65    align-items: baseline;66    margin-left: 80px;67  }68  .top-tabs .tab {69    color: #b7c1d9;70    font-size: 40px;71  }72  .top-tabs .big {73    font-size: 64px;74    color: #ffffff;75    font-weight: 700;76  }77 78  /* Category chips */79  .chips {80    margin-top: 36px;81    padding-left: 40px;82    padding-right: 40px;83    display: flex;84    gap: 24px;85    flex-wrap: wrap;86  }87  .chip {88    padding: 18px 30px;89    border-radius: 40px;90    background: #182238;91    color: #c7d2f0;92    font-size: 34px;93  }94  .chip.active {95    background: #2870ff;96    color: #ffffff;97    font-weight: 700;98    box-shadow: 0 6px 16px rgba(40,112,255,0.35);99  }100 101  /* Grid of cards */102  .content {103    position: absolute;104    top: 380px;105    left: 40px;106    right: 40px;107    bottom: 250px;108    overflow-y: auto;109    padding-right: 6px;110  }111  .grid {112    display: grid;113    grid-template-columns: repeat(2, 1fr);114    grid-column-gap: 40px;115    grid-row-gap: 40px;116  }117  .card {118    position: relative;119  }120  .card .img {121    height: 420px;122    background: #E0E0E0;123    border: 1px solid #BDBDBD;124    border-radius: 24px;125    display: flex;126    justify-content: center;127    align-items: center;128    color: #757575;129    font-size: 30px;130    text-align: center;131    padding: 0 20px;132  }133  .overlay-label {134    position: absolute;135    left: 26px;136    bottom: 140px;137    padding: 6px 12px;138    color: #ffffff;139    font-size: 34px;140    font-weight: 600;141    text-shadow: 0 2px 6px rgba(0,0,0,0.4);142  }143  .badge {144    position: absolute;145    top: 18px;146    right: 18px;147    padding: 10px 18px;148    font-size: 28px;149    border-radius: 20px;150    font-weight: 700;151  }152  .badge.blue { background: #2e7aff; color: #fff; }153  .badge.yellow { background: #f5c843; color: #222; }154 155  .title {156    margin-top: 20px;157    font-size: 44px;158    color: #ffffff;159    font-weight: 700;160  }161 162  .meta { margin-top: 14px; display: flex; align-items: center; gap: 12px; }163  .timechip {164    display: inline-flex;165    align-items: center;166    gap: 10px;167    background: #1a3a73;168    color: #cfe0ff;169    padding: 10px 16px;170    border-radius: 14px;171    font-size: 30px;172  }173  .timechip svg { width: 28px; height: 28px; fill: none; stroke: #cfe0ff; stroke-width: 3; }174 175  /* Mini player */176  .player-bar {177    position: absolute;178    left: 0;179    right: 0;180    bottom: 120px;181    height: 120px;182    margin: 0 0;183    padding: 0 40px;184    display: flex;185    align-items: center;186    background: #0f182d;187    border-top: 1px solid rgba(255,255,255,0.06);188  }189  .avatar {190    width: 84px;191    height: 84px;192    border-radius: 50%;193    background: #E0E0E0;194    border: 1px solid #BDBDBD;195    display: flex;196    justify-content: center;197    align-items: center;198    color: #757575;199    font-size: 22px;200    margin-right: 22px;201  }202  .track-info {203    font-size: 40px;204    color: #ffffff;205    font-weight: 600;206    flex: 1;207  }208  .controls { display: flex; gap: 26px; }209  .icon-btn {210    width: 60px; height: 60px;211    border: none; background: transparent; cursor: pointer;212  }213  .icon-btn svg { width: 48px; height: 48px; stroke: #e9eefc; stroke-width: 6; fill: none; }214 215  /* Home indicator */216  .home-indicator {217    position: absolute;218    bottom: 40px;219    left: 50%;220    transform: translateX(-50%);221    width: 260px;222    height: 12px;223    background: #cfd6ea;224    border-radius: 8px;225    opacity: 0.7;226  }227</style>228</head>229<body>230<div id="render-target">231 232  <!-- Status bar -->233  <div class="status-bar">234    <div>12:14</div>235    <div class="sb-right">236      <div class="sb-dot"></div>237      <div class="sb-icon"></div>238      <div class="sb-icon" style="border-radius:50%;"></div>239    </div>240  </div>241 242  <!-- Header and top navigation -->243  <div class="header">244    <button class="back-btn" aria-label="Back">245      <svg viewBox="0 0 24 24"><path d="M15 19l-7-7 7-7"/></svg>246    </button>247    <div class="top-tabs">248      <span class="tab">Favorite</span>249      <span class="tab big">Featured</span>250      <span class="tab">White Noise</span>251      <span class="tab">Meditation</span>252      <span class="tab">Sleep</span>253    </div>254 255    <div class="chips">256      <div class="chip active">Quick Sleep</div>257      <div class="chip">Deep Sleep</div>258      <div class="chip">Healing Music</div>259      <div class="chip">Inner Peace</div>260    </div>261  </div>262 263  <!-- Content grid -->264  <div class="content">265    <div class="grid">266 267      <!-- Card 1 -->268      <div class="card">269        <div class="img">[IMG: Lush green hills with tiny person]</div>270        <div class="badge blue">Free</div>271        <div class="overlay-label">Music</div>272        <div class="title">Relaxing Piano</div>273        <div class="meta">274          <div class="timechip">275            <svg viewBox="0 0 24 24">276              <circle cx="12" cy="12" r="9"></circle>277              <path d="M12 6v6l4 2"></path>278            </svg>279            33:17280          </div>281        </div>282      </div>283 284      <!-- Card 2 -->285      <div class="card">286        <div class="img">[IMG: Christmas tree with lights and gifts]</div>287        <div class="overlay-label">Music</div>288        <div class="title">White Christmas</div>289        <div class="meta">290          <div class="timechip">291            <svg viewBox="0 0 24 24">292              <circle cx="12" cy="12" r="9"></circle>293              <path d="M12 6v6l4 2"></path>294            </svg>295            05:06296          </div>297        </div>298      </div>299 300      <!-- Card 3 -->301      <div class="card">302        <div class="img">[IMG: Cozy fireplace with stockings and Christmas tree]</div>303        <div class="badge yellow">New</div>304        <div class="overlay-label">Music</div>305        <div class="title">Peaceful Christmas Eve</div>306        <div class="meta">307          <div class="timechip">308            <svg viewBox="0 0 24 24">309              <circle cx="12" cy="12" r="9"></circle>310              <path d="M12 6v6l4 2"></path>311            </svg>312            63:43313          </div>314        </div>315      </div>316 317      <!-- Card 4 -->318      <div class="card">319        <div class="img">[IMG: Window city view with Christmas tree]</div>320        <div class="badge yellow">New</div>321        <div class="overlay-label">Meditation</div>322        <div class="title">Christmas Sounds</div>323        <div class="meta">324          <div class="timechip">325            <svg viewBox="0 0 24 24">326              <circle cx="12" cy="12" r="9"></circle>327              <path d="M12 6v6l4 2"></path>328            </svg>329            6days330          </div>331        </div>332      </div>333 334      <!-- Card 5 -->335      <div class="card">336        <div class="img" style="height: 420px;">[IMG: Misty green mountains]</div>337        <div class="badge yellow">New</div>338        <div class="title" style="margin-top:20px;">Nature Serenity</div>339      </div>340 341      <!-- Card 6 -->342      <div class="card">343        <div class="img" style="height: 420px;">[IMG: Daisy flowers in a bright field]</div>344        <div class="badge yellow">New</div>345        <div class="title" style="margin-top:20px;">Spring Meadow</div>346      </div>347 348    </div>349  </div>350 351  <!-- Mini player -->352  <div class="player-bar">353    <div class="avatar">[IMG]</div>354    <div class="track-info">Relaxing Piano</div>355    <div class="controls">356      <button class="icon-btn" aria-label="Pause">357        <svg viewBox="0 0 24 24"><path d="M8 5h3v14H8zM13 5h3v14h-3z"/></svg>358      </button>359      <button class="icon-btn" aria-label="Repeat">360        <svg viewBox="0 0 24 24"><path d="M4 7h11l-2-2M20 17H9l2 2"/><path d="M4 7v6M20 17v-6"/></svg>361      </button>362    </div>363  </div>364 365  <!-- Home indicator -->366  <div class="home-indicator"></div>367 368</div>369</body>370</html>