GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8" />5<meta name="viewport" content="width=1080, initial-scale=1.0" />6<title>Getting back to sleep</title>7<style>8  body {9    margin: 0;10    padding: 0;11    background: transparent;12    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;13    color: #F4F1F6;14  }15  #render-target {16    width: 1080px;17    height: 2400px;18    position: relative;19    overflow: hidden;20    background: #1E1A21;21  }22 23  /* Status bar */24  .status-bar {25    position: absolute;26    top: 24px;27    left: 32px;28    right: 32px;29    height: 64px;30    display: flex;31    align-items: center;32    justify-content: space-between;33    color: #ffffff;34    opacity: 0.9;35    pointer-events: none;36  }37  .status-left {38    font-size: 36px;39    font-weight: 600;40    letter-spacing: 0.5px;41  }42  .status-right {43    display: flex;44    align-items: center;45    gap: 22px;46  }47  .dot {48    width: 18px;49    height: 18px;50    background: #ffffff;51    border-radius: 50%;52    opacity: 0.85;53  }54 55  /* Top close button */56  .close-btn {57    position: absolute;58    top: 160px;59    left: 36px;60    width: 56px;61    height: 56px;62    display: grid;63    place-items: center;64    opacity: 0.8;65  }66  .close-btn svg { width: 40px; height: 40px; }67 68  /* Hero image placeholder */69  .hero {70    position: absolute;71    top: 0;72    left: 0;73    width: 1080px;74    height: 760px;75  }76  .img-box {77    width: 100%;78    height: 100%;79    background: #E0E0E0;80    border: 1px solid #BDBDBD;81    color: #757575;82    display: flex;83    align-items: center;84    justify-content: center;85    font-size: 36px;86    text-align: center;87    line-height: 1.3;88  }89  .hero .fade {90    position: absolute;91    inset: 0;92    background: linear-gradient(180deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.5) 30%, rgba(0,0,0,0.55) 60%, rgba(30,26,33,1) 100%);93    pointer-events: none;94  }95 96  /* Middle rounded image card */97  .art-card {98    position: absolute;99    top: 600px;100    left: 0;101    width: 1080px;102    height: 640px;103    border-top-left-radius: 40px;104    border-top-right-radius: 40px;105    overflow: hidden;106  }107  .art-card .img-box {108    border: 1px solid #BDBDBD;109    border-bottom: none;110  }111  .handle {112    position: absolute;113    top: 26px;114    left: 50%;115    transform: translateX(-50%);116    width: 140px;117    height: 14px;118    background: #ECECEC;119    border-radius: 10px;120    opacity: 0.95;121  }122 123  /* Content section */124  .content {125    position: absolute;126    top: 1240px;127    left: 40px;128    right: 40px;129    color: #EFEAF2;130  }131  .title {132    font-family: Georgia, "Times New Roman", serif;133    font-size: 86px;134    line-height: 1.05;135    margin: 0 0 26px 0;136    letter-spacing: -0.5px;137  }138  .desc {139    font-size: 38px;140    line-height: 1.55;141    color: #D8D4DC;142    margin: 0 0 48px 0;143  }144 145  .pill {146    background: #2A2630;147    border-radius: 28px;148    padding: 34px 36px;149    display: flex;150    align-items: center;151    justify-content: space-between;152    margin-bottom: 28px;153  }154  .pill .left {155    display: flex;156    align-items: center;157    gap: 22px;158    font-size: 40px;159    color: #F2EEF6;160  }161  .pill svg { width: 46px; height: 46px; fill: none; stroke: #EDE8F2; stroke-width: 2.5; }162 163  .play-btn {164    margin-top: 18px;165    background: #FFFFFF;166    color: #141114;167    border-radius: 36px;168    height: 150px;169    display: flex;170    align-items: center;171    justify-content: center;172    box-shadow: 0 2px 0 rgba(0,0,0,0.12) inset;173  }174  .play-icon {175    width: 48px;176    height: 48px;177    fill: #141114;178  }179 180  /* Home indicator */181  .home-indicator {182    position: absolute;183    bottom: 32px;184    left: 50%;185    transform: translateX(-50%);186    width: 420px;187    height: 12px;188    background: #BEBAC3;189    border-radius: 8px;190    opacity: 0.6;191  }192</style>193</head>194<body>195<div id="render-target">196 197  <!-- Status bar -->198  <div class="status-bar">199    <div class="status-left">6:13</div>200    <div class="status-right">201      <div class="dot" style="opacity:.7"></div>202      <div class="dot"></div>203      <div class="dot" style="opacity:.6"></div>204      <!-- WiFi icon -->205      <svg viewBox="0 0 24 24" width="44" height="44" stroke="#fff" fill="none" stroke-width="2">206        <path d="M2 8c5-4 15-4 20 0" />207        <path d="M5 12c4-3 10-3 14 0" />208        <path d="M8 16c3-2 5-2 8 0" />209        <circle cx="12" cy="19" r="1.6" fill="#fff" stroke="none"/>210      </svg>211      <!-- Battery icon -->212      <svg viewBox="0 0 28 16" width="48" height="32" fill="none" stroke="#fff" stroke-width="2">213        <rect x="1" y="3" width="22" height="10" rx="2"></rect>214        <rect x="24" y="6" width="3" height="4" rx="1" fill="#fff" stroke="none"></rect>215        <rect x="3" y="5" width="18" height="6" fill="#fff" stroke="none"></rect>216      </svg>217    </div>218  </div>219 220  <!-- Close button -->221  <div class="close-btn">222    <svg viewBox="0 0 24 24" stroke="#FFFFFF" stroke-width="2.5" stroke-linecap="round">223      <path d="M5 5 L19 19"></path>224      <path d="M19 5 L5 19"></path>225    </svg>226  </div>227 228  <!-- Hero image -->229  <div class="hero">230    <div class="img-box">[IMG: Sleeping cat on a starry patterned couch]</div>231    <div class="fade"></div>232  </div>233 234  <!-- Rounded art card -->235  <div class="art-card">236    <div class="img-box">[IMG: Night lake with stars, moon, tree, and cat]</div>237    <div class="handle"></div>238  </div>239 240  <!-- Content -->241  <section class="content">242    <h1 class="title">Getting back to sleep</h1>243    <p class="desc">244      This session is designed to help you get back to sleep if you've woken up in the middle of the night.245    </p>246 247    <!-- Voice selector -->248    <div class="pill">249      <div class="left">250        <svg