Compare commits
No commits in common. "master" and "v0.2.1-beta" have entirely different histories.
master
...
v0.2.1-bet
@ -1397,595 +1397,3 @@ simple-boost {
|
|||||||
/* ========================================
|
/* ========================================
|
||||||
VERSION BUTTON & MODAL STYLES - END
|
VERSION BUTTON & MODAL STYLES - END
|
||||||
======================================== */
|
======================================== */
|
||||||
|
|
||||||
/* ========================================
|
|
||||||
MOBILE RESPONSIVE STYLES - START
|
|
||||||
Supports portrait (rotated) and landscape modes
|
|
||||||
======================================== */
|
|
||||||
|
|
||||||
/* ----------------------------------------
|
|
||||||
MOBILE LANDSCAPE MODE
|
|
||||||
For phones held sideways (short height, moderate width)
|
|
||||||
Scale player proportionally to fit viewport
|
|
||||||
---------------------------------------- */
|
|
||||||
@media (max-width: 900px) and (max-height: 500px) {
|
|
||||||
body {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
padding: 5px;
|
|
||||||
min-height: 100vh;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.player {
|
|
||||||
/* Scale entire player to fit viewport height */
|
|
||||||
transform: perspective(1000px) rotateX(1deg) scale(0.85);
|
|
||||||
transform-origin: center center;
|
|
||||||
width: calc(100vw - 10px);
|
|
||||||
max-width: 700px; /* Slightly larger since we're scaling down */
|
|
||||||
padding: 50px 20px 20px 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Scale display area */
|
|
||||||
.display {
|
|
||||||
padding: 10px;
|
|
||||||
margin-top: 10px;
|
|
||||||
margin-bottom: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.display-text {
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.time-display {
|
|
||||||
font-size: 18px;
|
|
||||||
letter-spacing: 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Scale cassette */
|
|
||||||
.cassette {
|
|
||||||
padding: 12px;
|
|
||||||
margin-bottom: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cassette-label {
|
|
||||||
padding: 8px;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
font-size: 11px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Scale tape window and reels */
|
|
||||||
.tape-window {
|
|
||||||
width: 280px;
|
|
||||||
height: 60px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.reel {
|
|
||||||
width: 60px;
|
|
||||||
height: 60px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.reel-left {
|
|
||||||
left: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.reel-right {
|
|
||||||
right: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.reel-inner {
|
|
||||||
width: 45px;
|
|
||||||
height: 45px;
|
|
||||||
margin-left: -22.5px;
|
|
||||||
margin-top: -22.5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Scale control buttons - maintain touch-friendly size */
|
|
||||||
.controls {
|
|
||||||
gap: 8px;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn {
|
|
||||||
width: 50px;
|
|
||||||
height: 50px;
|
|
||||||
border-width: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Scale button icons */
|
|
||||||
.btn-prev::before {
|
|
||||||
border-right-width: 10px;
|
|
||||||
border-top-width: 6px;
|
|
||||||
border-bottom-width: 6px;
|
|
||||||
margin-right: 6px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-prev::after {
|
|
||||||
height: 12px;
|
|
||||||
margin-left: -10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-play::before {
|
|
||||||
border-left-width: 16px;
|
|
||||||
border-top-width: 10px;
|
|
||||||
border-bottom-width: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-pause::before {
|
|
||||||
width: 16px;
|
|
||||||
height: 20px;
|
|
||||||
border-left-width: 5px;
|
|
||||||
border-right-width: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-stop::before {
|
|
||||||
width: 16px;
|
|
||||||
height: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-next::before {
|
|
||||||
border-left-width: 10px;
|
|
||||||
border-top-width: 6px;
|
|
||||||
border-bottom-width: 6px;
|
|
||||||
margin-left: -6px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-next::after {
|
|
||||||
height: 12px;
|
|
||||||
margin-left: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Scale volume control */
|
|
||||||
.volume-control {
|
|
||||||
gap: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.volume-label {
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
input[type="range"] {
|
|
||||||
width: 150px;
|
|
||||||
height: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
input[type="range"]::-webkit-slider-thumb {
|
|
||||||
width: 20px;
|
|
||||||
height: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
input[type="range"]::-moz-range-thumb {
|
|
||||||
width: 20px;
|
|
||||||
height: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Scale top buttons */
|
|
||||||
.eject-btn,
|
|
||||||
.lightning-btn {
|
|
||||||
top: 10px;
|
|
||||||
width: 40px;
|
|
||||||
height: 28px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.eject-btn {
|
|
||||||
left: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.lightning-btn {
|
|
||||||
right: 20px;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.eject-btn::before {
|
|
||||||
border-left-width: 6px;
|
|
||||||
border-right-width: 6px;
|
|
||||||
border-bottom-width: 8px;
|
|
||||||
top: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.eject-btn::after {
|
|
||||||
width: 14px;
|
|
||||||
height: 2px;
|
|
||||||
bottom: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Scale version button */
|
|
||||||
.version-btn {
|
|
||||||
bottom: 5px;
|
|
||||||
right: 8px;
|
|
||||||
font-size: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Modals in landscape */
|
|
||||||
.alby-panel {
|
|
||||||
width: 320px;
|
|
||||||
max-height: 85vh;
|
|
||||||
}
|
|
||||||
|
|
||||||
.version-modal {
|
|
||||||
width: 240px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ----------------------------------------
|
|
||||||
MOBILE PORTRAIT MODE
|
|
||||||
For phones held upright (narrow width, tall height)
|
|
||||||
Only the cassette/tape rotates 90 degrees - everything else stays horizontal
|
|
||||||
Layout: [E][L] -> Screen -> ROTATED TAPE -> Controls -> Volume
|
|
||||||
---------------------------------------- */
|
|
||||||
@media (max-width: 500px) and (min-height: 600px) {
|
|
||||||
html, body {
|
|
||||||
overflow-x: hidden;
|
|
||||||
overflow-y: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
padding: 10px;
|
|
||||||
min-height: 100vh;
|
|
||||||
}
|
|
||||||
|
|
||||||
.player {
|
|
||||||
/* Player stays horizontal, just scaled to fit width */
|
|
||||||
width: calc(100vw - 20px);
|
|
||||||
max-width: 390px;
|
|
||||||
/* Increased vertical padding to fill screen better */
|
|
||||||
padding: 55px 15px 25px 15px;
|
|
||||||
/* Remove the 3D perspective tilt on mobile for cleaner look */
|
|
||||||
transform: none;
|
|
||||||
/* Scale down border for mobile */
|
|
||||||
border-width: 6px;
|
|
||||||
/* Contain the ::before pseudo-element */
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Fix background texture scaling */
|
|
||||||
.player::before {
|
|
||||||
background-size: cover;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Scale display for portrait - stays horizontal */
|
|
||||||
.display {
|
|
||||||
padding: 12px;
|
|
||||||
margin-top: 12px;
|
|
||||||
margin-bottom: 45px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.display-text {
|
|
||||||
font-size: 12px;
|
|
||||||
letter-spacing: 1px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.time-display {
|
|
||||||
font-size: 16px;
|
|
||||||
letter-spacing: 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ----------------------------------------
|
|
||||||
CASSETTE - SCALED TO FIT WIDTH
|
|
||||||
Horizontal layout, scaled down for portrait
|
|
||||||
---------------------------------------- */
|
|
||||||
.cassette {
|
|
||||||
padding: 12px;
|
|
||||||
margin-bottom: 45px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cassette-label {
|
|
||||||
padding: 10px;
|
|
||||||
margin-bottom: 12px;
|
|
||||||
font-size: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Tape window scaled to fit portrait width */
|
|
||||||
.tape-window {
|
|
||||||
width: calc(100% - 20px);
|
|
||||||
max-width: 280px;
|
|
||||||
height: 55px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.reel {
|
|
||||||
width: 55px;
|
|
||||||
height: 55px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.reel-left {
|
|
||||||
left: 18px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.reel-right {
|
|
||||||
right: 18px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.reel-inner {
|
|
||||||
width: 42px;
|
|
||||||
height: 42px;
|
|
||||||
margin-left: -21px;
|
|
||||||
margin-top: -21px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Scale the entire reel (including tape-wound set by JS) */
|
|
||||||
.reel {
|
|
||||||
transform: translateY(-50%) scale(0.7);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Control buttons - stays horizontal, scaled for touch */
|
|
||||||
.controls {
|
|
||||||
gap: 10px;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn {
|
|
||||||
width: 52px;
|
|
||||||
height: 52px;
|
|
||||||
border-width: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Scale button icons for portrait */
|
|
||||||
.btn-prev::before {
|
|
||||||
border-right-width: 9px;
|
|
||||||
border-top-width: 6px;
|
|
||||||
border-bottom-width: 6px;
|
|
||||||
margin-right: 6px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-prev::after {
|
|
||||||
height: 12px;
|
|
||||||
margin-left: -9px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-play::before {
|
|
||||||
border-left-width: 14px;
|
|
||||||
border-top-width: 9px;
|
|
||||||
border-bottom-width: 9px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-pause::before {
|
|
||||||
width: 14px;
|
|
||||||
height: 18px;
|
|
||||||
border-left-width: 5px;
|
|
||||||
border-right-width: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-stop::before {
|
|
||||||
width: 14px;
|
|
||||||
height: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-next::before {
|
|
||||||
border-left-width: 9px;
|
|
||||||
border-top-width: 6px;
|
|
||||||
border-bottom-width: 6px;
|
|
||||||
margin-left: -6px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-next::after {
|
|
||||||
height: 12px;
|
|
||||||
margin-left: 9px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Volume control - stays horizontal */
|
|
||||||
.volume-control {
|
|
||||||
margin-top: 30px;
|
|
||||||
gap: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.volume-label {
|
|
||||||
font-size: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
input[type="range"] {
|
|
||||||
width: 120px;
|
|
||||||
height: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
input[type="range"]::-webkit-slider-thumb {
|
|
||||||
width: 24px;
|
|
||||||
height: 24px;
|
|
||||||
}
|
|
||||||
|
|
||||||
input[type="range"]::-moz-range-thumb {
|
|
||||||
width: 24px;
|
|
||||||
height: 24px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Top buttons - scaled */
|
|
||||||
.eject-btn,
|
|
||||||
.lightning-btn {
|
|
||||||
top: 10px;
|
|
||||||
width: 40px;
|
|
||||||
height: 28px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.eject-btn {
|
|
||||||
left: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.lightning-btn {
|
|
||||||
right: 15px;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.eject-btn::before {
|
|
||||||
border-left-width: 6px;
|
|
||||||
border-right-width: 6px;
|
|
||||||
border-bottom-width: 8px;
|
|
||||||
top: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.eject-btn::after {
|
|
||||||
width: 14px;
|
|
||||||
height: 2px;
|
|
||||||
bottom: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Version button */
|
|
||||||
.version-btn {
|
|
||||||
bottom: 4px;
|
|
||||||
right: 6px;
|
|
||||||
font-size: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ----------------------------------------
|
|
||||||
MODALS IN PORTRAIT MODE
|
|
||||||
---------------------------------------- */
|
|
||||||
.alby-panel {
|
|
||||||
width: calc(100vw - 30px);
|
|
||||||
max-width: 360px;
|
|
||||||
max-height: calc(100vh - 40px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.version-modal {
|
|
||||||
width: calc(100vw - 40px);
|
|
||||||
max-width: 280px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.close-video {
|
|
||||||
top: 15px;
|
|
||||||
right: 15px;
|
|
||||||
width: 44px;
|
|
||||||
height: 44px;
|
|
||||||
font-size: 28px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ----------------------------------------
|
|
||||||
VERY SMALL PORTRAIT (iPhone SE, etc.)
|
|
||||||
Additional scaling for smaller devices
|
|
||||||
---------------------------------------- */
|
|
||||||
@media (max-width: 380px) and (min-height: 600px) {
|
|
||||||
.player {
|
|
||||||
width: calc(100vw - 16px);
|
|
||||||
padding: 40px 10px 10px 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Smaller cassette for tiny screens */
|
|
||||||
.cassette {
|
|
||||||
padding: 8px;
|
|
||||||
margin-bottom: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tape-window {
|
|
||||||
width: calc(100% - 16px);
|
|
||||||
max-width: 240px;
|
|
||||||
height: 48px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.reel {
|
|
||||||
width: 48px;
|
|
||||||
height: 48px;
|
|
||||||
transform: translateY(-50%) scale(0.6);
|
|
||||||
}
|
|
||||||
|
|
||||||
.reel-left {
|
|
||||||
left: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.reel-right {
|
|
||||||
right: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.reel-inner {
|
|
||||||
width: 36px;
|
|
||||||
height: 36px;
|
|
||||||
margin-left: -18px;
|
|
||||||
margin-top: -18px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn {
|
|
||||||
width: 44px;
|
|
||||||
height: 44px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.controls {
|
|
||||||
gap: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
input[type="range"] {
|
|
||||||
width: 90px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.eject-btn,
|
|
||||||
.lightning-btn {
|
|
||||||
width: 34px;
|
|
||||||
height: 24px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.eject-btn {
|
|
||||||
left: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.lightning-btn {
|
|
||||||
right: 12px;
|
|
||||||
font-size: 12px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ----------------------------------------
|
|
||||||
TABLET PORTRAIT MODE
|
|
||||||
For tablets held upright - no rotation, just scale
|
|
||||||
---------------------------------------- */
|
|
||||||
@media (min-width: 501px) and (max-width: 768px) {
|
|
||||||
.player {
|
|
||||||
width: calc(100vw - 40px);
|
|
||||||
max-width: 600px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ----------------------------------------
|
|
||||||
TOUCH DEVICE ENHANCEMENTS
|
|
||||||
Better hover states and touch feedback
|
|
||||||
---------------------------------------- */
|
|
||||||
@media (hover: none) and (pointer: coarse) {
|
|
||||||
/* Touch devices don't need hover state changes */
|
|
||||||
.btn:hover,
|
|
||||||
.eject-btn:hover,
|
|
||||||
.lightning-btn:hover,
|
|
||||||
.alby-btn:hover,
|
|
||||||
.alby-boost-btn:hover,
|
|
||||||
.alby-close-btn:hover,
|
|
||||||
.version-btn:hover,
|
|
||||||
.version-close-btn:hover {
|
|
||||||
/* Reset hover-specific box-shadow to default state */
|
|
||||||
box-shadow: inherit;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Larger touch targets for interactive elements */
|
|
||||||
.alby-close-btn,
|
|
||||||
.version-close-btn {
|
|
||||||
min-width: 44px;
|
|
||||||
min-height: 44px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.alby-btn {
|
|
||||||
min-width: 44px;
|
|
||||||
min-height: 44px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Ensure checkbox is easily tappable */
|
|
||||||
.alby-checkbox-label {
|
|
||||||
padding: 10px 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.alby-checkbox-label input[type="checkbox"] {
|
|
||||||
width: 24px;
|
|
||||||
height: 24px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ----------------------------------------
|
|
||||||
PREVENT ZOOM ON INPUT FOCUS (iOS)
|
|
||||||
iOS zooms when focusing inputs with font-size < 16px
|
|
||||||
---------------------------------------- */
|
|
||||||
@media (max-width: 900px) {
|
|
||||||
.alby-input,
|
|
||||||
.alby-textarea {
|
|
||||||
font-size: 16px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ========================================
|
|
||||||
MOBILE RESPONSIVE STYLES - END
|
|
||||||
======================================== */
|
|
||||||
|
|||||||
@ -1,4 +1,4 @@
|
|||||||
const APP_VERSION = '0.3.0';
|
const APP_VERSION = '0.2.1-beta';
|
||||||
const playlist = [
|
const playlist = [
|
||||||
{ url: 'https://feed.falsefinish.club/Echo%20Reality/PINK%20FLIGHT/MP3%20BOUNCE/01.%20PINK%20FLIGHT%20ATTENDANT.mp3', name: 'TRACK 1 - PINK FLIGHT ATTENDANT' },
|
{ url: 'https://feed.falsefinish.club/Echo%20Reality/PINK%20FLIGHT/MP3%20BOUNCE/01.%20PINK%20FLIGHT%20ATTENDANT.mp3', name: 'TRACK 1 - PINK FLIGHT ATTENDANT' },
|
||||||
{ url: 'https://feed.falsefinish.club/Echo%20Reality/PINK%20FLIGHT/MP3%20BOUNCE/02.%20NOW.mp3', name: 'TRACK 2 - NOW' },
|
{ url: 'https://feed.falsefinish.club/Echo%20Reality/PINK%20FLIGHT/MP3%20BOUNCE/02.%20NOW.mp3', name: 'TRACK 2 - NOW' },
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user