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>Rain Screen</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #FFFFFF;15    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;16    color: #111;17  }18  /* Top controls */19  .top-actions {20    position: absolute;21    top: 80px;22    left: 0;23    right: 0;24    height: 120px;25    pointer-events: none;26  }27  .icon-btn {28    position: absolute;29    width: 72px;30    height: 72px;31    display: flex;32    align-items: center;33    justify-content: center;34    pointer-events: auto;35  }36  .icon-left { left: 48px; }37  .icon-right { right: 48px; }38  .icon-stroke { stroke: #111; fill: none; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }39 40  /* Illustration placeholder */41  .illustration {42    position: absolute;43    top: 360px;44    left: 90px;45    width: 900px;46    height: 620px;47    background: #E0E0E0;48    border: 1px solid #BDBDBD;49    border-radius: 16px;50    display: flex;51    align-items: center;52    justify-content: center;53    color: #757575;54    font-size: 36px;55    text-align: center;56  }57 58  /* Title and description */59  .title {60    position: absolute;61    top: 1080px;62    width: 100%;63    text-align: center;64    font-weight: 800;65    font-size: 112px;66    letter-spacing: 0.5px;67  }68  .subtitle {69    position: absolute;70    top: 1200px;71    width: 100%;72    text-align: center;73    color: #5F6B73;74    font-size: 44px;75    line-height: 1.5;76    padding: 0 120px;77  }78 79  /* Timer section */80  .timer-section {81    position: absolute;82    top: 1460px;83    width: 100%;84    text-align: center;85  }86  .timer-bubble {87    width: 220px;88    height: 220px;89    margin: 0 auto 24px;90    background: #FBE9D8;91    border-radius: 50%;92    display: flex;93    align-items: center;94    justify-content: center;95  }96  .timer-label {97    font-size: 46px;98    color: #111;99    display: inline-flex;100    align-items: center;101    gap: 14px;102  }103  .caret-down {104    width: 26px;105    height: 26px;106  }107 108  /* Begin button */109  .cta {110    position: absolute;111    left: 60px;112    right: 60px;113    bottom: 240px;114    height: 140px;115    background: #25C7C9;116    border-radius: 24px;117    display: flex;118    align-items: center;119    justify-content: center;120    color: #fff;121    font-size: 56px;122    font-weight: 700;123    letter-spacing: 0.4px;124    box-shadow: 0 6px 14px rgba(0,0,0,0.08);125  }126</style>127</head>128<body>129<div id="render-target">130  <!-- Top actions -->131  <div class="top-actions">132    <div class="icon-btn icon-left" aria-label="Close">133      <svg viewBox="0 0 24 24" width="64" height="64">134        <path class="icon-stroke" d="M4 4 L20 20 M20 4 L4 20"></path>135      </svg>136    </div>137    <div class="icon-btn icon-right" aria-label="Favorite">138      <svg viewBox="0 0 24 24" width="64" height="64">139        <path class="icon-stroke" d="M12 21s-6.5-4.2-8.4-7.2C1.2 10.3 2.2 7 5 6c1.7-.6 3.4.1 4.3 1.4L12 9.5l2.7-2.1C15.6 6.1 17.3 5.4 19 6c2.8 1 3.8 4.3 1.4 7.8C18.5 16.8 12 21 12 21z"></path>140      </svg>141    </div>142  </div>143 144  <!-- Illustration placeholder -->145  <div class="illustration">[IMG: Umbrella & raindrops illustration]</div>146 147  <!-- Title and description -->148  <div class="title">Rain</div>149  <div class="subtitle">150    Tune out the world around you with the soft<br>151    patter of raindrops.152  </div>153 154  <!-- Timer -->155  <div class="timer-section">156    <div class="timer-bubble">157      <svg viewBox="0 0 48 48" width="96" height="96">158        <circle cx="24" cy="26" r="14" class="icon-stroke"></circle>159        <path d="M24 18v8l5 3" class="icon-stroke"></path>160        <path d="M19 10h10" class="icon-stroke"></path>161      </svg>162    </div>163    <div class="timer-label">164      10 hr165      <svg class="caret-down" viewBox="0 0 24 24">166        <path d="M6 9l6 6 6-6" fill="none" stroke="#111" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"></path>167      </svg>168    </div>169  </div>170 171  <!-- CTA -->172  <div class="cta">Begin</div>173</div>174</body>175</html>