rain-view/index.html at main · StewAlexander-com/rain-view · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
  <meta http-equiv="Pragma" content="no-cache">
  <title>Rain View — Ambient Rain Simulator</title>

  <!-- SEO -->
  <meta name="description" content="Ambient rain simulator with 4 cozy cinematic scenes — Tokyo, New York, Autumn Forest, Zen Garden. Real rain audio, gentle piano, and looping video. Free, open source, no ads.">
  <meta name="keywords" content="rain simulator, ambient rain, rain sounds, cozy rain, sleep sounds, focus music, rain ASMR, lo-fi rain, rainy window, rain on glass, meditation rain, study ambience">
  <meta name="author" content="Stewart Alexander">
  <meta name="robots" content="index, follow">
  <link rel="canonical" href="https://stewalexander-com.github.io/rain-view/">

  <!-- PWA -->
  <meta name="theme-color" content="#0a0a0c">
  <meta name="color-scheme" content="dark">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
  <meta name="apple-mobile-web-app-title" content="Rain View">
  <meta name="mobile-web-app-capable" content="yes">
  <meta name="application-name" content="Rain View">
  <meta name="msapplication-TileColor" content="#0a0a0c">
  <meta name="msapplication-TileImage" content="icons/icon-144x144.png">
  <link rel="manifest" href="manifest.json">

  <!-- Favicons -->
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link rel="icon" type="image/png" sizes="32x32" href="icons/favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="16x16" href="icons/favicon-16x16.png">
  <link rel="apple-touch-icon" sizes="180x180" href="icons/apple-touch-icon.png">

  <!-- Open Graph (Facebook, LinkedIn, iMessage, etc.) -->
  <meta property="og:type" content="website">
  <meta property="og:url" content="https://stewalexander-com.github.io/rain-view/">
  <meta property="og:title" content="Rain View — Ambient Rain Simulator">
  <meta property="og:description" content="4 cozy rain scenes with real audio and gentle piano. Tokyo neon, Manhattan skyline, autumn forest, zen garden. Free and open source.">
  <meta property="og:image" content="https://stewalexander-com.github.io/rain-view/icons/og-image.jpg">
  <meta property="og:image:width" content="1200">
  <meta property="og:image:height" content="630">
  <meta property="og:site_name" content="Rain View">

  <!-- Twitter Card -->
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:title" content="Rain View — Ambient Rain Simulator">
  <meta name="twitter:description" content="4 cozy rain scenes with real audio and gentle piano. Free, no ads, open source.">
  <meta name="twitter:image" content="https://stewalexander-com.github.io/rain-view/icons/og-image.jpg">

  <!-- Fonts -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500&family=Cormorant+Garamond:wght@300;400;500&family=Inter:wght@300;400;500&family=EB+Garamond:ital,wght@0,400;0,500;1,400;1,500&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="style.css?v=56">
</head>
<body>

  <!-- ═══ SPLASH ═══ -->
  <div id="splash" class="splash">
    <div class="splash-bg">
      <img src="assets/splash-rain-window.jpg" alt="">
      <div class="splash-overlay"></div>
    </div>
    <div class="splash-content">
      <svg class="splash-logo" viewBox="0 0 48 48" width="44" height="44" fill="none" aria-hidden="true">
        <path d="M24 4C24 4 10 20 10 28a14 14 0 0028 0C38 20 24 4 24 4z" stroke="currentColor" stroke-width="1.5" opacity=".6"/>
        <path d="M24 10C24 10 16 22 16 27a8 8 0 0016 0C32 22 24 10 24 10z" stroke="currentColor" stroke-width="1" opacity=".3"/>
      </svg>
      <h1 class="splash-title">Rain View</h1>
      <p class="splash-sub"><span class="splash-accent">Time</span> for stillness in the rain</p>
      <div class="grid">
        <button class="card" data-scene="tokyo">
          <img src="assets/thumb-tokyo.jpg" alt="Tokyo Evening">
          <div class="card-info"><span class="card-name">Tokyo Evening</span><span class="card-desc">Neon-lit streets through rain-kissed glass</span></div>
        </button>
        <button class="card" data-scene="nyc">
          <img src="assets/thumb-nyc.jpg" alt="New York Night">
          <div class="card-info"><span class="card-name">New York Night</span><span class="card-desc">Manhattan skyline, steam, and amber light</span></div>
        </button>
        <button class="card" data-scene="autumn">
          <img src="assets/thumb-autumn.jpg" alt="Autumn Forest">
          <div class="card-info"><span class="card-name">Autumn Forest</span><span class="card-desc">Immersed in fall foliage and mountain mist</span></div>
        </button>
        <button class="card" data-scene="garden">
          <img src="assets/thumb-garden.jpg" alt="Zen Garden">
          <div class="card-info"><span class="card-name">Zen Garden</span><span class="card-desc">Cherry blossoms and rain on still water</span></div>
        </button>
      </div>
      <p class="splash-hint">Tap a scene to begin</p>
    </div>
  </div>

  <!-- ═══ SCENE VIEW ═══ -->
  <div id="scene" class="scene hidden">
    <video id="vid" class="scene-vid" muted loop playsinline preload="auto"></video>
    <video id="vid2" class="scene-vid scene-vid-b" muted loop playsinline preload="auto"></video>
    <div class="vignette"></div>
    <div class="scene-ios-note" id="scene-ios-note" aria-hidden="true" hidden>If silent: fully close + reopen app</div>
    <div id="audio-silent-note" class="audio-silent-note" hidden>
      No sound? On iOS home-screen apps, fully close and reopen Rain View.
    </div>

    <!-- Diagnostic overlay — tap scene title 3x to toggle -->
    <div id="audio-diag" class="audio-diag" hidden></div>

    <!-- Clock toggle — outside ctrl so it stays visible when controls are hidden -->
    <button type="button" id="clock-toggle" class="btn-clock" aria-label="Toggle clock" title="Clock">
      <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
        <circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/>
      </svg>
    </button>

    <!-- Clock overlay -->
    <div id="clock-overlay" class="clock-overlay hidden">
      <div class="clock-dim"></div>
      <div class="clock-container" id="clock-container">
        <div class="clock-face" id="clock-face">
          <span class="clock-time" id="clock-time">12:00</span>
          <span class="clock-ampm" id="clock-ampm">AM</span>
        </div>
        <div class="clock-hint" id="clock-hint">
          <svg width="28" height="28" viewBox="0 0 28 28" fill="none" aria-hidden="true">
            <path d="M8 14L4 10M4 10L8 6M4 10H12" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" opacity=".6"/>
            <path d="M20 14L24 10M24 10L20 6M24 10H16" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" opacity=".6"/>
            <path d="M14 20L10 24M10 24L6 20" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" opacity=".4"/>
            <path d="M14 20L18 24M18 24L22 20" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" opacity=".4"/>
          </svg>
        </div>
      </div>
    </div>

    <!-- Controls -->
    <div id="ctrl" class="ctrl">
      <div class="ctrl-top">
        <button type="button" id="back" class="btn-back" aria-label="Back">
          <svg width="18" height="18" viewBox="0 0 20 20" fill="none"><path d="M13 4L7 10L13 16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
          <span>Back</span>
        </button>
        <span id="title" class="ctrl-title"></span>
        <button type="button" id="fullscreen-toggle" class="btn-fullscreen" hidden aria-label="Enter fullscreen" title="Fullscreen">
          <svg class="fs-icon fs-enter" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
            <path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3"/>
          </svg>
          <svg class="fs-icon fs-exit" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
            <path d="M4 14v6h6M20 10V4h-6M14 10l7-7M10 14l-7 7"/>
          </svg>
        </button>
      </div>
      <div class="ctrl-bottom">
        <div class="ctrl-group">
          <label class="ctrl-label">Rain</label>
          <div class="pills" id="rain-pills">
            <button type="button" class="pill active" data-variant="gentle">Gentle</button>
            <button type="button" class="pill" data-variant="heavy">Heavy</button>
            <button type="button" class="pill" data-variant="window">Window</button>
            <button type="button" class="pill" data-variant="forest">Forest</button>
            <button type="button" class="pill" data-variant="thunder">Thunder</button>
            <button type="button" class="pill" data-variant="leaves">Leaves</button>
            <button type="button" class="pill" data-variant="roof">Roof</button>
          </div>
          <div class="vol-row">
            <button type="button" class="btn-playpause" id="rain-playpause" aria-label="Pause rain" title="Pause">
              <svg class="pp-icon pp-pause" width="16" height="16" viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" d="M6 5h4v14H6V5zm8 0h4v14h-4V5z"/></svg>
              <svg class="pp-icon pp-play" width="16" height="16" viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" d="M8 5v14l11-7-11-7z"/></svg>
            </button>
            <svg class="vol-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2.69l5.66 5.66a8 8 0 1 1-11.31 0z"/></svg>
            <input type="range" id="rain-vol" min="0" max="1" step="0.01" value="0.7">
          </div>
        </div>
        <div class="ctrl-group">
          <label class="ctrl-label">Piano</label>
          <div class="pills" id="piano-pills">
            <button type="button" class="pill active" data-variant="contemplative">Contemplative</button>
            <button type="button" class="pill" data-variant="jazz">Jazz</button>
            <button type="button" class="pill" data-variant="melancholic">Melancholic</button>
            <button type="button" class="pill" data-variant="ethereal">Ethereal</button>
            <button type="button" class="pill" data-variant="pastoral">Pastoral</button>
            <button type="button" class="pill" data-variant="guitar">Guitar</button>
            <button type="button" class="pill" data-variant="cello">Cello</button>
          </div>
          <div class="vol-row">
            <button type="button" class="btn-playpause" id="piano-playpause" aria-label="Pause piano" title="Pause">
              <svg class="pp-icon pp-pause" width="16" height="16" viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" d="M6 5h4v14H6V5zm8 0h4v14h-4V5z"/></svg>
              <svg class="pp-icon pp-play" width="16" height="16" viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" d="M8 5v14l11-7-11-7z"/></svg>
            </button>
            <svg class="vol-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18V5l12-2v13"/><circle cx="6" cy="18" r="3"/><circle cx="18" cy="16" r="3"/></svg>
            <input type="range" id="piano-vol" min="0" max="1" step="0.01" value="0">
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Bump ?v= when changing audio-system.js / mobile.js / app.js so disk cache cannot pin old JS (which pins old MP3 URLs). -->
  <script src="wakelock.js?v=54"></script>
  <script src="audio-system.js?v=57"></script>
  <script src="mobile.js?v=51"></script>
  <script src="app.js?v=59"></script>
  <script src="clock.js?v=59"></script>
  <script src="update-check.js?v=51"></script>
</body>
</html>