Compare commits

...

22 Commits

Author SHA1 Message Date
cottongin
992c704be2
version bump - 0.3.0 - mobile layout 2026-01-18 20:23:25 -05:00
cottongin
ef9bb85d65
initial mobile layouts 2026-01-18 20:20:11 -05:00
cottongin
539f55b6e9
version bump 2026-01-18 19:27:55 -05:00
cottongin
aae0af7c19
change background from png to webp for performance/size 2026-01-18 19:27:15 -05:00
cottongin
e6b0db7227
version bump 2026-01-18 18:59:05 -05:00
cottongin
7ef59a57ab
performance tweaks 2026-01-18 18:51:11 -05:00
cottongin
373fe8b835
cleanup project, branding 2026-01-18 18:27:35 -05:00
cottongin
2a839de999
add favicon 2026-01-18 07:01:56 -05:00
cottongin
bbf4d88f61
fix initial page load for track duration 2026-01-17 21:13:58 -05:00
cottongin
ffc8f2a558
add version info 2026-01-17 19:09:53 -05:00
cottongin
5223c9697f
tweak README 2026-01-17 18:45:02 -05:00
cottongin
fdc96965f3
add README 2026-01-17 18:42:03 -05:00
cottongin
c24e6f1344
code refactor, cleanup 2026-01-17 18:26:36 -05:00
cottongin
3aa5c6ad44
add cursor folder to .gitignore 2026-01-17 17:42:56 -05:00
cottongin
ce98b75c54
tweak reel sizes, fix end-of-tape procedure 2026-01-17 17:36:51 -05:00
cottongin
62eba51514
added display FX, moved IDEAS for future reference 2026-01-17 15:12:54 -05:00
cottongin
c10cd26e1d
initial ideas 2026-01-17 14:18:25 -05:00
cottongin
38b94bde04
fix for Safari - boo Safari 2026-01-17 14:09:42 -05:00
cottongin
27b1f0213e
stop button bug fix 2026-01-17 13:59:33 -05:00
cottongin
f3399a87b4
cleanup 2026-01-17 13:39:10 -05:00
cottongin
8a0e586ec1
background tweaks, CPU spike fix 2026-01-17 13:37:46 -05:00
cottongin
d30d6f28d7
remove cache system, tweak background 2026-01-17 13:15:21 -05:00
16 changed files with 3647 additions and 2565 deletions

4
.gitignore vendored
View File

@ -1,2 +1,4 @@
.DS_Store
.old/
.old/
.cursor/
tag-release.sh

89
CORS.md
View File

@ -1,89 +0,0 @@
For DreamHost hosting, the owner of `feed.falsefinish.club` can configure CORS headers using an `.htaccess` file in the root directory of the site (or in the specific directory serving the audio files).
## Setting CORS Headers on DreamHost
Create or edit the `.htaccess` file in the web root (typically `~/falsefinish.club/feed/` or wherever the audio files are served from) and add:
```apache
# Enable CORS for echo-reality.com
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "https://echo-reality.com"
Header set Access-Control-Allow-Methods "GET, HEAD, OPTIONS"
Header set Access-Control-Expose-Headers "ETag, Last-Modified, Content-Length"
</IfModule>
# Handle preflight OPTIONS requests
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{REQUEST_METHOD} OPTIONS
RewriteRule ^(.*)$ $1 [R=200,L]
</IfModule>
```
### If targeting specific file types only (recommended)
To apply CORS headers only to audio files:
```apache
<IfModule mod_headers.c>
<FilesMatch "\.(mp3|mp4|wav|ogg|m4a)$">
Header set Access-Control-Allow-Origin "https://echo-reality.com"
Header set Access-Control-Allow-Methods "GET, HEAD, OPTIONS"
Header set Access-Control-Expose-Headers "ETag, Last-Modified, Content-Length"
</FilesMatch>
</IfModule>
```
### For multiple origins (if needed during development)
If you need to allow both the production domain and a local development server:
```apache
<IfModule mod_headers.c>
SetEnvIf Origin "^https://(echo-reality\.com|localhost:3000)$" CORS_ORIGIN=$0
Header set Access-Control-Allow-Origin "%{CORS_ORIGIN}e" env=CORS_ORIGIN
Header set Access-Control-Allow-Methods "GET, HEAD, OPTIONS"
Header set Access-Control-Expose-Headers "ETag, Last-Modified, Content-Length"
</IfModule>
```
### How to add the .htaccess file on DreamHost
1. **Via SFTP/FTP**: Connect to the server using an FTP client (like FileZilla) and upload/edit the `.htaccess` file in the appropriate directory
2. **Via DreamHost Panel File Manager**: Log into the DreamHost panel → Manage Websites → Files → navigate to the directory and create/edit `.htaccess`
3. **Via SSH** (if enabled): SSH into the server and use a text editor like `nano` or `vim`
### Important notes for DreamHost
- DreamHost's shared hosting uses Apache, so `.htaccess` files work out of the box
- The `mod_headers` module is enabled by default on DreamHost
- Make sure the `.htaccess` file has proper permissions (644)
- Changes take effect immediately—no server restart needed
### Testing the configuration
After adding the `.htaccess` file, the owner can verify it's working by checking the response headers:
```bash
curl -I -X OPTIONS -H "Origin: https://echo-reality.com" \
"https://feed.falsefinish.club/Echo%20Reality/PINK%20FLIGHT/MP3%20BOUNCE/01.%20PINK%20FLIGHT%20ATTENDANT.mp3"
```
The response should include the `Access-Control-Allow-Origin: https://echo-reality.com` header.
### Quick test `.htaccess` for DreamHost
```apache
# TEMPORARY - Allow all origins for testing
<IfModule mod_headers.c>
<FilesMatch "\.(mp3|mp4|wav|ogg|m4a)$">
Header set Access-Control-Allow-Origin "*"
Header set Access-Control-Allow-Methods "GET, HEAD, OPTIONS"
Header set Access-Control-Expose-Headers "ETag, Last-Modified, Content-Length"
</FilesMatch>
</IfModule>
```
This limits the wildcard CORS to just media files, which is a reasonable middle ground—your audio files are publicly accessible but you're not opening up everything on the domain.

20
README.md Normal file
View File

@ -0,0 +1,20 @@
# Cassette Player
Simple HTML/JS/CSS Cassette Player
## Instructions for hosting
1. Clone or download this repository.
- if downloading as a zip file, extract to a temporary folder
2. Copy or move the relevant files to the location you want to host them from. **Keep all files together in the same location/folder**.
- `index.html` - main HTML file
- `app.js` - main app JavaScript file
- `styles.css` - app styling CSS file
- `background.png` - image for player background
3. Navigate to `http://<yourhost.com>/path/to/where/you/saved/index.html` in your browser.
### Alternatively, if just previewing
1. Unzip to a temporary folder.
2. Open `index.html` in your browser. (`ctrl/cmd+o`, drag and drop, etc.)
a. or navigate to the file manually in your address bar (e.g. `file:///Users/username/tempfolder/cassette-player/index.html`)

94
archive/IDEAS.md Normal file
View File

@ -0,0 +1,94 @@
Let me take a look at what's currently in the project to understand the existing features and theme better.
[1 tool called]
This is a really well-crafted project with a lot of nice details already. Let me put together some ideas for easter eggs and tweaks that would fit the retro dystopian/broken cassette player theme.
Based on what I see in the code, you already have:
- CRT scanlines and flicker effects
- Cracked display overlay
- Worn/faded button icons
- Damage texture overlay
- Tape wind sound effects
- Bouncing track name marquee
Here are some ideas that would complement the existing aesthetic:
---
## Visual Glitch / Distortion Effects
1. **Random screen glitches** - Occasional RGB channel separation or horizontal displacement that happens randomly or when interacting with controls (like the display is malfunctioning)
2. **Dead pixels** - A few permanently "stuck" green pixels on the CRT display
3. **Screen burn-in** - Faint ghost image of "PLAY" or old track names that lingers on the display
4. **Intermittent display failure** - Rare chance of the display going dark for a split second then flickering back on
5. **VHS tracking lines** - Occasional horizontal noise bars that scroll up the display
---
## Audio Quirks
6. **Tape flutter/wow** - Subtle pitch wobble effect using Web Audio API's `playbackRate` with slight random variations, like a worn tape mechanism
7. **Random audio dropouts** - Very brief moments where audio cuts out or gets muffled (like dirty tape heads)
8. **Static between tracks** - White noise/hiss during track transitions
9. **"Tape eating" event** - Rare chance when pressing play/stop that triggers a tape-eating sound effect and animation where the tape visually tangles
---
## Hidden Interactions
10. **Konami code** - Entering the classic code unlocks a secret mode (different color scheme, hidden track, or "repaired" mode where everything works perfectly)
11. **Thump to fix** - Double-clicking/tapping the cassette housing "thumps" the player, which could temporarily fix glitches or cause new ones
12. **Secret button combo** - Holding certain buttons together reveals hidden content or debug info
13. **Dust accumulation** - Animated dust particles that slowly build up on the display, clickable to "wipe clean"
---
## Dystopian Theme Additions
14. **Redacted track names** - Occasional text that appears with black boxes like "[REDACTED]" or "TRACK ██ - ████████"
15. **Surveillance indicator** - Small red "REC" light in the corner that occasionally blinks, or a subtle camera icon
16. **Propaganda interruptions** - Random brief messages that flash on screen like "COMPLIANCE IS FREEDOM" or "REPORT SUSPICIOUS ACTIVITY"
17. **Emergency broadcast** - Rare event where audio cuts to an emergency alert tone with scrolling text
18. **Signal interference** - Brief moments where the display shows "NO SIGNAL" or "WEAK SIGNAL"
---
## Time-Based Behaviors
19. **Midnight mode** - Different behavior or color scheme between certain hours (dimmer, more glitchy, or eerier)
20. **Battery drain simulation** - After extended use, everything gradually slows down and gets distorted until "recharged" (refreshing the page)
---
## Fun Visual Additions
21. **Tape label graffiti/stickers** - Small worn stickers or handwritten notes on the cassette
22. **Cigarette burn marks** - Subtle burn marks on the player casing
23. **Fingerprint smudges** - Subtle smudges on the tape window or display
24. **"Property of..." label** - A worn/scratched identification label with mysterious text
---
Would you like me to create a plan to implement some of these? If so, which ones appeal to you most? I can group them into:
- **Quick wins** (CSS-only or simple JS)
- **Medium effort** (Web Audio effects, animations)
- **Larger features** (Konami code, emergency broadcast system)

BIN
assets/apple-touch-icon.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 42 KiB

BIN
assets/background.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.9 MiB

BIN
assets/background.webp Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 322 KiB

BIN
assets/favicon-96x96.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 16 KiB

BIN
assets/favicon.ico Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

3
assets/favicon.svg Normal file

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 206 KiB

21
assets/site.webmanifest Normal file
View File

@ -0,0 +1,21 @@
{
"name": "ECHO REALITY",
"short_name": "ECHO REALITY",
"icons": [
{
"src": "/assets/web-app-manifest-192x192.png",
"sizes": "192x192",
"type": "image/png",
"purpose": "maskable"
},
{
"src": "/assets/web-app-manifest-512x512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "maskable"
}
],
"theme_color": "#ffffff",
"background_color": "#ffffff",
"display": "standalone"
}

1991
assets/styles.css Normal file

File diff suppressed because it is too large Load Diff

Binary file not shown.

After

Width:  |  Height:  |  Size: 46 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 215 KiB

2512
index.html

File diff suppressed because it is too large Load Diff

1478
src/app.js Normal file

File diff suppressed because it is too large Load Diff