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 Onboarding</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: linear-gradient(180deg, #4b2e86 0%, #2f1f63 35%, #1b1740 70%, #0d0c1f 100%);15  }16 17  /* Top status bar */18  .status-bar {19    position: absolute;20    top: 0;21    left: 0;22    width: 1080px;23    height: 120px;24    background: #000000;25    opacity: 0.95;26  }27 28  /* Skip button */29  .skip-pill {30    position: absolute;31    top: 160px;32    right: 48px;33    padding: 22px 36px;34    border-radius: 40px;35    background: rgba(44, 35, 70, 0.95);36    color: #ffffff;37    font-size: 38px;38    line-height: 1;39    box-shadow: 0 8px 24px rgba(0,0,0,0.35);40  }41 42  /* Illustration placeholder */43  .illustration {44    position: absolute;45    left: 50px;46    top: 270px;47    width: 980px;48    height: 1050px;49    background: #E0E0E0;50    border: 1px solid #BDBDBD;51    border-radius: 24px;52    display: flex;53    align-items: center;54    justify-content: center;55    color: #757575;56    font-size: 42px;57    text-align: center;58  }59 60  /* Title section */61  .title-wrap {62    position: absolute;63    top: 1460px;64    width: 100%;65    text-align: center;66    color: #ffffff;67    padding: 0 60px;68  }69  .clouds {70    display: inline-flex;71    gap: 18px;72    margin-bottom: 20px;73    opacity: 0.9;74  }75  .title {76    font-size: 88px;77    font-weight: 700;78    letter-spacing: 0.5px;79    margin: 18px 0 12px 0;80  }81  .subtitle {82    font-size: 42px;83    color: rgba(255,255,255,0.85);84  }85 86  /* Info card */87  .card {88    position: absolute;89    left: 60px;90    top: 1710px;91    width: 960px;92    background: #ffffff;93    border-radius: 48px;94    box-shadow: 0 30px 80px rgba(0,0,0,0.55);95    padding: 56px 60px;96  }97  .meta {98    display: flex;99    align-items: center;100    gap: 16px;101    color: #8a8a8a;102    font-size: 36px;103  }104  .question {105    margin: 32px 0 40px;106    font-size: 46px;107    color: #2f2f2f;108    text-align: center;109    line-height: 1.25;110  }111  .cta {112    width: 520px;113    margin: 0 auto;114    padding: 26px 36px;115    background: #6c49f6;116    color: #ffffff;117    border-radius: 96px;118    display: flex;119    align-items: center;120    justify-content: center;121    gap: 22px;122    font-size: 46px;123    font-weight: 600;124    box-shadow: 0 10px 24px rgba(108,73,246,0.55);125  }126 127  /* Home indicator */128  .home-indicator {129    position: absolute;130    bottom: 28px;131    left: 50%;132    transform: translateX(-50%);133    width: 300px;134    height: 12px;135    background: #cfcfcf;136    border-radius: 8px;137    opacity: 0.85;138  }139 140  /* SVG icon helpers */141  .icon {142    display: inline-block;143    vertical-align: middle;144  }145</style>146</head>147<body>148<div id="render-target">149 150  <!-- Top status bar -->151  <div class="status-bar"></div>152 153  <!-- Skip -->154  <div class="skip-pill">Skip</div>155 156  <!-- Illustration area -->157  <div class="illustration">[IMG: Night bedroom illustration with person resting, window and cat]</div>158 159  <!-- Title and subtitle -->160  <div class="title-wrap">161    <div class="clouds">162      <svg class="icon" width="70" height="44" viewBox="0 0 24 14" fill="none">163        <path d="M3 12h14a3 3 0 0 0 0-6h-.8A5.2 5.2 0 0 0 6.2 3.2 4.8 4.8 0 0 0 3 8v4z" fill="#ffffff"/>164      </svg>165      <svg class="icon" width="50" height="34" viewBox="0 0 24 14" fill="none">166        <path d="M2 11h12a2.6 2.6 0 0 0 0-5.2h-.7A4.8 4.8 0 0 0 6 3.4 4.2 4.2 0 0 0 2 7.6V11z" fill="#ffffff"/>167      </svg>168    </div>169    <div class="title">Your first meditation</div>170    <div class="subtitle">Step to mindfulness world</div>171  </div>172 173  <!-- Bottom card -->174  <div class="card">175    <div class="meta">176      <svg class="icon" width="38" height="38" viewBox="0 0 24 24" fill="none">177        <circle cx="12" cy="12" r="9" stroke="#b0b0b0" stroke-width="2"/>178        <path d="M12 6v6l4 2" stroke="#b0b0b0" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>179      </svg>180      <span>2 min</span>181    </div>182 183    <div class="question">How can you get a good night's sleep?</div>184 185    <div class="cta">186      <span>Start now</span>187      <svg class="icon" width="34" height="34" viewBox="0 0 24 24" fill="none">188        <path d="M8 6l10 6-10 6V6z" fill="#ffffff"/>189      </svg>190    </div>191  </div>192 193  <!-- Home indicator -->194  <div class="home-indicator"></div>195</div>196</body>197</html>