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>Meditation for sleep</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    position: relative;11    overflow: hidden;12    width: 1080px;13    height: 2400px;14    background: #0f0f10;15    color: #fff;16    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;17  }18 19  /* Hero */20  .hero {21    position: relative;22    height: 860px;23    overflow: hidden;24  }25  .hero .img {26    position: absolute;27    inset: 0;28    background: #E0E0E0;29    border-bottom: 1px solid #BDBDBD;30    display: flex;31    align-items: center;32    justify-content: center;33    color: #757575;34    font-size: 34px;35    letter-spacing: .2px;36  }37  .hero::after {38    /* bottom dark gradient to make text legible */39    content: "";40    position: absolute;41    left: 0; right: 0; bottom: 0; top: 0;42    background: linear-gradient(to bottom, rgba(15,15,16,0) 40%, rgba(15,15,16,0.9) 90%, rgba(15,15,16,1) 100%);43    pointer-events: none;44  }45  .close-btn {46    position: absolute;47    top: 110px;48    left: 40px;49    width: 56px;50    height: 56px;51    color: #ffffff;52    z-index: 2;53  }54  .title {55    position: absolute;56    left: 40px;57    bottom: 70px;58    right: 40px;59    z-index: 2;60    font-family: Georgia, "Times New Roman", serif;61    font-weight: 700;62    font-size: 100px;63    line-height: 1.05;64    letter-spacing: -0.5px;65  }66 67  /* Intro band */68  .intro {69    background: #2c2e35;70    padding: 48px 40px 56px;71    color: #e9e9e9;72    font-size: 38px;73    line-height: 1.5;74  }75 76  /* Track list */77  .list {78    background: #171717;79    padding: 14px 0 120px;80  }81  .track {82    padding: 46px 40px 42px;83    border-bottom: 1px solid #333;84  }85  .track .name {86    font-size: 44px;87    color: #e8e8e8;88    letter-spacing: 0.2px;89    margin-bottom: 18px;90  }91  .track .meta {92    font-size: 30px;93    letter-spacing: 3px;94    color: #9aa0a6;95    text-transform: lowercase;96  }97 98  /* iOS-like home indicator */99  .home-indicator {100    position: absolute;101    bottom: 26px;102    left: 50%;103    transform: translateX(-50%);104    width: 370px;105    height: 12px;106    background: #e6e6e6;107    opacity: 0.9;108    border-radius: 10px;109  }110</style>111</head>112<body>113<div id="render-target">114  <!-- Hero section with placeholder image -->115  <div class="hero">116    <div class="img">[IMG: Sleeping cat on chair illustration]</div>117    <svg class="close-btn" viewBox="0 0 24 24">118      <path d="M5 5 L19 19 M19 5 L5 19" stroke="white" stroke-width="2.4" stroke-linecap="round" fill="none"></path>119    </svg>120    <div class="title">Meditation for sleep</div>121  </div>122 123  <!-- Intro copy -->124  <div class="intro">125    These guided meditations and sounds will ease you into a peaceful and restful sleep.126  </div>127 128  <!-- Track list -->129  <div class="list">130    <div class="track">131      <div class="name">Getting back to sleep</div>132      <div class="meta">17 min</div>133    </div>134 135    <div class="track">136      <div class="name">Gradual full body relaxation</div>137      <div class="meta">7 - 8 min</div>138    </div>139 140    <div class="track">141      <div class="name">Beach visualization</div>142      <div class="meta">7 - 8 min</div>143    </div>144 145    <div class="track">146      <div class="name">Body scan for sleep</div>147      <div class="meta">14 min</div>148    </div>149 150    <div class="track">151      <div class="name">Mantra meditation for sleep</div>152      <div class="meta">12 min</div>153    </div>154  </div>155 156  <div class="home-indicator"></div>157</div>158</body>159</html>