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>Morning Meditation Screen</title>7<style>8  body {9    margin: 0;10    padding: 0;11    background: transparent;12    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;13  }14  #render-target {15    width: 1080px;16    height: 2400px;17    position: relative;18    overflow: hidden;19    background: #1f272b; /* deep slate */20  }21  /* Top safe area (status bar) */22  .safe-top {23    position: absolute;24    top: 0;25    left: 0;26    width: 1080px;27    height: 120px;28    background: #000;29  }30  /* Header icons row just below the safe area */31  .header {32    position: absolute;33    top: 120px;34    left: 0;35    width: 100%;36    height: 120px;37    pointer-events: none;38  }39  .icon {40    width: 64px;41    height: 64px;42  }43  .icon-left {44    position: absolute;45    left: 48px;46    top: 28px;47    opacity: 0.5;48  }49  .icon-right {50    position: absolute;51    right: 48px;52    top: 28px;53  }54 55  /* Central emblem */56  .emblem-wrap {57    position: absolute;58    top: 560px;59    left: 50%;60    transform: translateX(-50%);61    width: 360px;62    height: 360px;63    background: #2f3f45;64    border-radius: 50%;65    display: flex;66    align-items: center;67    justify-content: center;68  }69  .stone {70    position: absolute;71    background: #557181;72    border-radius: 40px;73    opacity: 0.9;74  }75  .stone.top-dot {76    width: 88px;77    height: 88px;78    border-radius: 50%;79    top: 96px;80  }81  .stone.mid {82    width: 220px;83    height: 32px;84    top: 188px;85  }86  .stone.bot {87    width: 250px;88    height: 36px;89    top: 232px;90  }91 92  /* Title section near bottom */93  .title-block {94    position: absolute;95    left: 0;96    right: 0;97    bottom: 460px;98    text-align: center;99    color: #EDEFF0;100  }101  .title-block h1 {102    margin: 0 0 24px 0;103    font-size: 88px;104    font-weight: 600;105    letter-spacing: 0.5px;106  }107  .title-block p {108    margin: 0;109    font-size: 44px;110    color: #7e9099;111  }112 113  /* Bottom home indicator area */114  .safe-bottom {115    position: absolute;116    bottom: 0;117    left: 0;118    width: 1080px;119    height: 120px;120    background: #000;121  }122  .home-pill {123    position: absolute;124    bottom: 36px;125    left: 50%;126    transform: translateX(-50%);127    width: 270px;128    height: 10px;129    background: #e6e6e6;130    border-radius: 10px;131    opacity: 0.9;132  }133</style>134</head>135<body>136<div id="render-target">137  <div class="safe-top"></div>138 139  <div class="header">140    <!-- Music note icon -->141    <div class="icon-left">142      <svg class="icon" viewBox="0 0 24 24" fill="#A0A6A9">143        <path d="M9 4v9.2A3.8 3.8 0 1 1 7 10.7V6h9V4H9z"></path>144      </svg>145    </div>146    <!-- Close (X) icon -->147    <div class="icon-right">148      <svg class="icon" viewBox="0 0 24 24" stroke="#FFFFFF" stroke-width="2.5" fill="none" stroke-linecap="round">149        <line x1="4" y1="4" x2="20" y2="20"></line>150        <line x1="20" y1="4" x2="4" y2="20"></line>151      </svg>152    </div>153  </div>154 155  <!-- Center emblem representing a calm/meditation logo -->156  <div class="emblem-wrap">157    <div class="stone top-dot"></div>158    <div class="stone mid"></div>159    <div class="stone bot"></div>160  </div>161 162  <!-- Title -->163  <div class="title-block">164    <h1>Morning</h1>165    <p>Morning Meditation</p>166  </div>167 168  <!-- Bottom safe area with home indicator -->169  <div class="safe-bottom">170    <div class="home-pill"></div>171  </div>172</div>173</body>174</html>