Compare commits
22 Commits
full-tape-
...
master
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
992c704be2 | ||
|
|
ef9bb85d65 | ||
|
|
539f55b6e9 | ||
|
|
aae0af7c19 | ||
|
|
e6b0db7227 | ||
|
|
7ef59a57ab | ||
|
|
373fe8b835 | ||
|
|
2a839de999 | ||
|
|
bbf4d88f61 | ||
|
|
ffc8f2a558 | ||
|
|
5223c9697f | ||
|
|
fdc96965f3 | ||
|
|
c24e6f1344 | ||
|
|
3aa5c6ad44 | ||
|
|
ce98b75c54 | ||
|
|
62eba51514 | ||
|
|
c10cd26e1d | ||
|
|
38b94bde04 | ||
|
|
27b1f0213e | ||
|
|
f3399a87b4 | ||
|
|
8a0e586ec1 | ||
|
|
d30d6f28d7 |
4
.gitignore
vendored
@ -1,2 +1,4 @@
|
||||
.DS_Store
|
||||
.old/
|
||||
.old/
|
||||
.cursor/
|
||||
tag-release.sh
|
||||
89
CORS.md
@ -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
@ -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
@ -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
|
After Width: | Height: | Size: 42 KiB |
BIN
assets/background.png
Normal file
|
After Width: | Height: | Size: 1.9 MiB |
BIN
assets/background.webp
Normal file
|
After Width: | Height: | Size: 322 KiB |
BIN
assets/favicon-96x96.png
Normal file
|
After Width: | Height: | Size: 16 KiB |
BIN
assets/favicon.ico
Normal file
|
After Width: | Height: | Size: 15 KiB |
3
assets/favicon.svg
Normal file
|
After Width: | Height: | Size: 206 KiB |
21
assets/site.webmanifest
Normal 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
BIN
assets/web-app-manifest-192x192.png
Normal file
|
After Width: | Height: | Size: 46 KiB |
BIN
assets/web-app-manifest-512x512.png
Normal file
|
After Width: | Height: | Size: 215 KiB |