GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Meditation Check-In UI</title>5<style>6  body {7    margin: 0;8    padding: 0;9    background: transparent;10    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";11  }12  #render-target {13    width: 1080px;14    height: 2400px;15    position: relative;16    overflow: hidden;17    /* Deep gradient background with soft color blobs to mimic the screenshot */18    background:19      radial-gradient(1100px 900px at 10% 20%, rgba(92, 192, 170, 0.35), transparent 60%),20      radial-gradient(900px 800px at 95% 30%, rgba(95, 150, 233, 0.25), transparent 70%),21      radial-gradient(900px 900px at 80% 85%, rgba(154, 102, 210, 0.25), transparent 70%),22      linear-gradient(180deg, #1f4f56 0%, #2a4b59 35%, #4b4767 65%, #6f4b64 100%);23    color: #fff;24  }25 26  /* Header */27  .header {28    position: absolute;29    top: 180px;30    left: 0;31    width: 100%;32    text-align: center;33  }34  .session-title {35    font-size: 72px;36    font-weight: 600;37    letter-spacing: 1px;38  }39  .countdown {40    margin-top: 28px;41    font-size: 44px;42    opacity: 0.9;43  }44 45  /* Feeling card */46  .feeling-card {47    position: absolute;48    left: 60px;49    top: 750px;50    width: 960px;51    height: 750px;52    border-radius: 56px;53    background: linear-gradient(135deg, #64d1bf 0%, #66b6f3 45%, #7f6fe8 100%);54    box-shadow: 0 24px 60px rgba(0,0,0,0.35);55    display: flex;56    flex-direction: column;57    align-items: center;58    justify-content: center;59  }60  .card-title {61    font-size: 68px;62    font-weight: 600;63    letter-spacing: 1px;64    margin-bottom: 24px;65  }66  .feeling-script {67    font-family: "Brush Script MT", "Segoe Script", cursive;68    font-size: 170px;69    line-height: 1;70    font-weight: 700;71    margin-top: 10px;72    margin-bottom: 40px;73    text-shadow: 0 6px 0 rgba(255,255,255,0.08);74  }75  .smiley {76    margin-top: 10px;77  }78 79  /* Sub text */80  .subtext {81    position: absolute;82    top: 1540px;83    left: 90px;84    width: 900px;85    font-size: 40px;86    line-height: 56px;87    text-align: center;88    opacity: 0.9;89  }90 91  /* Buttons */92  .buttons {93    position: absolute;94    top: 1720px;95    left: 90px;96    width: 900px;97  }98  .btn {99    width: 900px;100    height: 140px;101    border-radius: 70px;102    font-size: 46px;103    font-weight: 700;104    letter-spacing: 0.5px;105    cursor: default;106  }107  .btn-primary {108    background: #ffffff;109    color: #1c1c1c;110    border: none;111    box-shadow: 0 12px 28px rgba(0,0,0,0.35);112  }113  .btn-secondary {114    margin-top: 36px;115    background: transparent;116    color: #ffffff;117    border: 4px solid rgba(255,255,255,0.8);118  }119 120  .never {121    position: absolute;122    top: 2050px;123    left: 0;124    width: 100%;125    text-align: center;126    font-size: 42px;127    font-weight: 700;128    opacity: 0.95;129  }130 131  /* Home indicator mimic */132  .home-indicator {133    position: absolute;134    bottom: 28px;135    left: 440px;136    width: 200px;137    height: 16px;138    border-radius: 12px;139    background: rgba(255,255,255,0.7);140  }141</style>142</head>143<body>144<div id="render-target">145  <div class="header">146    <div class="session-title">Session begins in...</div>147    <div class="countdown">4 seconds</div>148  </div>149 150  <div class="feeling-card">151    <div class="card-title">How are you</div>152    <div class="feeling-script">feeling?</div>153    <div class="smiley">154      <svg width="130" height="130" viewBox="0 0 130 130">155        <circle cx="65" cy="65" r="54" fill="none" stroke="#fff" stroke-width="8"/>156        <circle cx="48" cy="58" r="6" fill="#fff"/>157        <circle cx="82" cy="58" r="6" fill="#fff"/>158        <path d="M42 80c8 18 38 18 46 0" fill="none" stroke="#fff" stroke-width="8" stroke-linecap="round"/>159      </svg>160    </div>161  </div>162 163  <div class="subtext">Take a moment to reflect on how you’re feeling before your meditation</div>164 165  <div class="buttons">166    <button class="btn btn-primary">Start Check-In</button>167    <button class="btn btn-secondary">Skip</button>168  </div>169 170  <div class="never">Never Show Again</div>171 172  <div class="home-indicator"></div>173</div>174</body>175</html>