GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Meditation Check-In</title>5<style>6  body {7    margin: 0;8    padding: 0;9    background: transparent;10  }11  #render-target {12    width: 1080px;13    height: 2400px;14    position: relative;15    overflow: hidden;16    color: #ffffff;17    font-family: "Helvetica Neue", Arial, sans-serif;18    background: linear-gradient(180deg, #2f7c7a 0%, #315a66 55%, #6a4b77 100%);19  }20 21  /* Top headings */22  .top-title {23    position: absolute;24    top: 120px;25    left: 0;26    width: 100%;27    text-align: center;28    font-size: 70px;29    font-weight: 600;30    letter-spacing: 2px;31  }32  .countdown {33    position: absolute;34    top: 250px;35    left: 0;36    width: 100%;37    text-align: center;38    font-size: 44px;39    opacity: 0.9;40  }41 42  /* Gradient card */43  .card {44    position: absolute;45    top: 470px;46    left: 90px;47    width: 900px;48    height: 780px;49    border-radius: 70px;50    background: linear-gradient(135deg, #67cfc0 0%, #6ea9e8 50%, #8c73e7 100%);51    box-shadow: 0 25px 60px rgba(0,0,0,0.35);52  }53  .card-inner {54    position: absolute;55    inset: 60px;56    display: flex;57    flex-direction: column;58    align-items: center;59    justify-content: flex-start;60    text-align: center;61  }62  .card-title {63    font-size: 60px;64    font-weight: 700;65    letter-spacing: 1px;66    margin-top: 10px;67  }68  .card-script {69    font-size: 140px;70    margin-top: 40px;71    line-height: 1.0;72    color: #ffffff;73    font-weight: 700;74    font-family: "Brush Script MT", "Segoe Script", cursive;75    text-shadow: 0 2px 0 rgba(255,255,255,0.2);76  }77  .smiley {78    margin-top: 80px;79    width: 160px;80    height: 160px;81  }82 83  /* Helper description text */84  .subtext {85    position: absolute;86    top: 1290px;87    left: 90px;88    width: 900px;89    text-align: center;90    font-size: 42px;91    line-height: 1.4;92    color: #f2f2f2;93    opacity: 0.95;94  }95 96  /* Buttons */97  .btn {98    position: absolute;99    left: 90px;100    width: 900px;101    height: 150px;102    border-radius: 90px;103    font-size: 54px;104    font-weight: 700;105    letter-spacing: 1px;106    text-align: center;107    line-height: 150px;108    cursor: default;109  }110  .primary {111    top: 1610px;112    background: #ffffff;113    color: #1c1c1c;114    box-shadow: 0 12px 30px rgba(0,0,0,0.35);115  }116  .secondary {117    top: 1800px;118    border: 4px solid #ffffff;119    color: #ffffff;120    background: transparent;121  }122 123  .link {124    position: absolute;125    top: 2050px;126    width: 100%;127    text-align: center;128    font-size: 44px;129    font-weight: 700;130    color: #ffffff;131    opacity: 0.95;132  }133 134  /* Home indicator */135  .home-indicator {136    position: absolute;137    bottom: 40px;138    left: 290px;139    width: 500px;140    height: 14px;141    background: #bdbdbd;142    border-radius: 10px;143    opacity: 0.8;144  }145</style>146</head>147<body>148<div id="render-target">149  <div class="top-title">Session begins in...</div>150  <div class="countdown">5 seconds</div>151 152  <div class="card">153    <div class="card-inner">154      <div class="card-title">How are you</div>155      <div class="card-script">feeling?</div>156 157      <!-- Simple smiley icon -->158      <svg class="smiley" viewBox="0 0 100 100">159        <circle cx="50" cy="50" r="44" fill="none" stroke="#ffffff" stroke-width="6"/>160        <circle cx="35" cy="42" r="5" fill="#ffffff"/>161        <circle cx="65" cy="42" r="5" fill="#ffffff"/>162        <path d="M28 60 Q50 78 72 60" fill="none" stroke="#ffffff" stroke-width="6" stroke-linecap="round"/>163      </svg>164    </div>165  </div>166 167  <div class="subtext">168    Take a moment to reflect on how you’re feeling169    before your meditation170  </div>171 172  <div class="btn primary">Start Check-In</div>173  <div class="btn secondary">Skip</div>174 175  <div class="link">Never Show Again</div>176 177  <div class="home-indicator"></div>178</div>179</body>180</html>