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>Sleep UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #121212;15    font-family: ui-sans-serif, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Noto Sans", sans-serif;16    color: #ffffff;17  }18 19  /* Status bar */20  .statusbar {21    position: absolute;22    top: 0;23    left: 0;24    right: 0;25    height: 90px;26    padding: 20px 28px 0 28px;27    display: flex;28    align-items: center;29    justify-content: space-between;30    z-index: 5;31    color: #fff;32    pointer-events: none;33  }34  .status-left {35    font-size: 42px;36    font-weight: 600;37    opacity: 0.95;38  }39  .status-right {40    display: flex;41    align-items: center;42    gap: 22px;43  }44  .dot {45    width: 14px; height: 14px; background: #fff; border-radius: 50%; opacity: 0.9;46  }47 48  /* Hero section with image placeholder */49  .hero {50    position: relative;51    width: 100%;52    height: 780px;53  }54  .img-ph {55    width: 100%;56    height: 100%;57    background: #E0E0E0;58    border: 1px solid #BDBDBD;59    color: #757575;60    display: flex;61    align-items: center;62    justify-content: center;63    font-size: 34px;64    text-align: center;65  }66  .hero .shade {67    position: absolute;68    inset: 0;69    background: linear-gradient(to bottom, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.65) 85%);70  }71  .hero-title {72    position: absolute;73    left: 48px;74    bottom: 64px;75    font-size: 120px;76    line-height: 1;77    font-weight: 800;78    letter-spacing: -0.5px;79    z-index: 2;80    text-shadow: 0 2px 8px rgba(0,0,0,0.35);81  }82 83  /* CTA banner */84  .cta {85    width: 100%;86    background: #282A33;87    padding: 46px 48px;88    font-size: 48px;89    font-weight: 600;90    letter-spacing: 0.2px;91  }92 93  /* List */94  .list {95    background: #121212;96  }97  .item {98    position: relative;99    padding: 52px 48px 38px 48px;100  }101  .item:not(:last-child)::after {102    content: "";103    position: absolute;104    left: 48px;105    right: 48px;106    bottom: 0;107    height: 2px;108    background: #2D2D2D;109  }110  .item-title {111    font-size: 52px;112    font-weight: 600;113    color: #F5F5F5;114    margin: 0 0 18px 0;115  }116  .item-sub {117    margin: 0;118    font-size: 36px;119    color: #A0A4A8;120    letter-spacing: 1.6px;121    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;122  }123 124  /* Gesture bar */125  .gesture {126    position: absolute;127    left: 50%;128    bottom: 26px;129    transform: translateX(-50%);130    width: 360px;131    height: 12px;132    background: #9AA0A6;133    opacity: 0.6;134    border-radius: 8px;135  }136 137  /* Simple icon styles */138  svg { display: block; }139</style>140</head>141<body>142  <div id="render-target">143    <!-- Faux status bar -->144    <div class="statusbar">145      <div class="status-left">6:14</div>146      <div class="status-right">147        <!-- Simple dots as placeholders for other status icons -->148        <div class="dot" style="opacity:0.5;"></div>149        <div class="dot"></div>150        <!-- Wi-Fi icon -->151        <svg width="46" height="46" viewBox="0 0 24 24" fill="none">152          <path d="M12 18.5a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Z" fill="#fff"/>153          <path d="M4 12.5c4.9-4.7 10.9-4.7 15.9 0" stroke="#fff" stroke-width="2" stroke-linecap="round"/>154          <path d="M7 15.5c3.2-3.1 6.8-3.1 10 0" stroke="#fff" stroke-width="2" stroke-linecap="round"/>155        </svg>156        <!-- Battery icon -->157        <svg width="48" height="48" viewBox="0 0 28 16" fill="none">158          <rect x="1.5" y="2" width="22" height="12" rx="2" stroke="#fff" stroke-width="2"/>159          <rect x="4" y="4.5" width="17" height="7" fill="#fff"/>160          <rect x="24.5" y="6" width="2.5" height="4" rx="1" fill="#fff"/>161        </svg>162      </div>163    </div>164 165    <!-- Hero image placeholder -->166    <div class="hero">167      <div class="img-ph">[IMG: Starry night village illustration]</div>168      <div class="shade"></div>169      <div class="hero-title">Sleep</div>170    </div>171 172    <!-- CTA banner -->173    <div class="cta">Get a peaceful night's rest</div>174 175    <!-- List of sections -->176    <div class="list">177      <div class="item">178        <div class="item-title">Meditation for sleep</div>179        <p class="item-sub">Sessions for a good night's sleep</p>180      </div>181 182      <div class="item">183        <div class="item-title">Sleep stories</div>184        <p class="item-sub">Stories to help you drift off</p>185      </div>186 187      <div class="item">188        <div class="item-title">Meditative music</div>189        <p class="item-sub">Relaxing, ambient tunes</p>190      </div>191 192      <div class="item">193        <div class="item-title">Nature sounds</div>194        <p class="item-sub">Relax with sounds from nature</p>195      </div>196    </div>197 198    <!-- Gesture handle -->199    <div class="gesture"></div>200  </div>201</body>202</html>