Impaczus/motif
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update share page (play.html) with Game Boy aesthetic

Browse Source 
Match the main page redesign with LCD green palette,
Press Start 2P font, scanline overlay, and pixel-style
buttons and progress bar.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
b1rdmania
2025-12-29 10:55:27 +00:00
parent 6e61aef35a
commit 028310ec28
1 changed files with 236 additions and 235 deletions
Download Patch File Download Diff File Expand all files Collapse all files
play.html
+236 -235
View File
@@ -20,239 +20,211 @@
<meta name="twitter:title" content="Check out this Gameboy tune — WARIO SYNTH" /> <meta name="twitter:title" content="Check out this Gameboy tune — WARIO SYNTH" />
<meta name="twitter:description" content="Someone shared a song with you. Press play to hear it through the Wario Synthesis Engine — then generate your own." /> <meta name="twitter:description" content="Someone shared a song with you. Press play to hear it through the Wario Synthesis Engine — then generate your own." />
<meta name="twitter:image" content="https://motif-self.vercel.app/wario.png" /> <meta name="twitter:image" content="https://motif-self.vercel.app/wario.png" />
<!-- Pixel Font -->
<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=Press+Start+2P&display=swap" rel="stylesheet">
<style> <style>
:root { :root {
--color-bg: #0a0a0a; /* Game Boy LCD palette */
--color-surface: #141414; --gb-lightest: #9BBC0F;
--color-surface-elevated: #1a1a1a; --gb-light: #8BAC0F;
--color-border: #2a2a2a; --gb-dark: #306230;
--color-text: #e8e8e8; --gb-darkest: #0F380F;
--color-text-dim: #999;
--color-accent-primary: #00ff88; /* Semantic mapping */
--color-accent-secondary: #ffaa44; --color-bg: var(--gb-darkest);
--color-surface: var(--gb-dark);
--color-border: var(--gb-light);
--color-text: var(--gb-lightest);
--color-text-dim: var(--gb-light);
--spacing-unit: 8px; --spacing-unit: 8px;
--radius: 8px; --pixel-border: 4px;
--shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.5);
--shadow-md: 0 4px 16px rgba(0, 0, 0, 0.6);
--shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.7);
--glow-primary: 0 0 20px rgba(0, 255, 136, 0.3);
--glow-secondary: 0 0 20px rgba(255, 170, 68, 0.3);
} }
* { * {
box-sizing: border-box; box-sizing: border-box;
image-rendering: pixelated;
} }
body { body {
margin: 0; margin: 0;
padding: calc(var(--spacing-unit) * 3); padding: calc(var(--spacing-unit) * 3);
background: background: var(--color-bg);
radial-gradient(1000px 600px at 50% -150px, rgba(0, 255, 136, 0.12), transparent 60%),
radial-gradient(800px 600px at 110% 20%, rgba(255, 170, 68, 0.08), transparent 55%),
var(--color-bg);
color: var(--color-text); color: var(--color-text);
font-family: 'SF Mono', 'Monaco', 'Consolas', monospace; font-family: 'Press Start 2P', monospace;
line-height: 1.6; line-height: 2;
-webkit-font-smoothing: antialiased; font-size: 10px;
-webkit-font-smoothing: none;
-moz-osx-font-smoothing: unset;
}
/* LCD Screen Effect */
body::before {
content: '';
position: fixed;
inset: 0;
background: repeating-linear-gradient(
0deg,
rgba(0, 0, 0, 0.1) 0px,
rgba(0, 0, 0, 0.1) 2px,
transparent 2px,
transparent 4px
);
pointer-events: none;
z-index: 9999;
} }
.container { .container {
max-width: 960px; max-width: 600px;
margin: 0 auto; margin: 0 auto;
} }
h1.page-title { /* Hero header */
color: var(--color-accent-primary); .hero {
text-align: center; text-align: center;
margin: 0 0 calc(var(--spacing-unit) * 3) 0; margin: 0 0 calc(var(--spacing-unit) * 3) 0;
font-size: 2em; padding: calc(var(--spacing-unit) * 2);
font-weight: 700; border: var(--pixel-border) solid var(--gb-light);
letter-spacing: 0.05em; background: var(--gb-dark);
text-shadow: var(--glow-primary);
} }
.tagline { .hero h1 {
text-align: center; color: var(--gb-lightest);
margin: 0 0 calc(var(--spacing-unit) * 3) 0;
color: var(--color-text-dim);
}
.section {
margin-top: calc(var(--spacing-unit) * 5);
}
.section-header {
margin: 0 0 calc(var(--spacing-unit) * 2) 0;
}
.section-title {
margin: 0; margin: 0;
font-size: 13px; font-size: 16px;
font-weight: 600; font-weight: normal;
letter-spacing: 0.08em; letter-spacing: 0.05em;
text-transform: uppercase; text-transform: uppercase;
color: var(--color-text);
} }
.section-subtitle { /* Main card */
margin: calc(var(--spacing-unit) / 2) 0 0 0; .player-card {
font-size: 13px; background: var(--gb-dark);
color: var(--color-text-dim); padding: calc(var(--spacing-unit) * 3);
border: var(--pixel-border) solid var(--gb-light);
} }
.divider { /* Song title */
height: 1px; .song-title {
margin: 0 0 calc(var(--spacing-unit) * 3) 0; margin: 0 0 calc(var(--spacing-unit) * 2) 0;
background: linear-gradient(90deg, transparent, var(--color-border), transparent);
}
/* Share page: no status box */
button {
background: var(--color-surface);
color: var(--color-text);
border: 1px solid var(--color-border);
padding: calc(var(--spacing-unit) * 1.5) calc(var(--spacing-unit) * 3);
border-radius: var(--radius);
cursor: pointer;
font-family: inherit;
font-size: 14px; font-size: 14px;
font-weight: 500; line-height: 1.8;
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); font-weight: normal;
box-shadow: var(--shadow-sm); color: var(--gb-lightest);
word-break: break-word;
}
.song-artist {
display: none;
margin-top: calc(var(--spacing-unit) * -1);
margin-bottom: calc(var(--spacing-unit) * 2);
font-size: 8px;
color: var(--gb-light);
}
/* Transform description */
.transform-line {
margin: 0 0 calc(var(--spacing-unit) * 3) 0;
color: var(--gb-light);
font-size: 8px;
}
/* Buttons */
button {
background: var(--gb-dark);
color: var(--gb-lightest);
border: var(--pixel-border) solid var(--gb-light);
padding: 12px 16px;
border-radius: 0;
cursor: pointer;
font-family: 'Press Start 2P', monospace;
font-size: 8px;
text-transform: uppercase;
box-shadow:
inset -4px -4px 0 var(--gb-darkest),
inset 4px 4px 0 var(--gb-light);
transition: none;
} }
button:hover:not(:disabled) { button:hover:not(:disabled) {
background: var(--color-surface-elevated); background: var(--gb-light);
transform: translateY(-1px); color: var(--gb-darkest);
border-color: #444; box-shadow:
box-shadow: var(--shadow-md); inset 4px 4px 0 var(--gb-darkest),
inset -4px -4px 0 var(--gb-lightest);
} }
button:active:not(:disabled) { button:active:not(:disabled) {
transform: translateY(0); box-shadow: inset 4px 4px 0 var(--gb-darkest);
box-shadow: var(--shadow-sm);
} }
button:disabled { button:disabled {
opacity: 0.4; opacity: 0.5;
cursor: not-allowed; cursor: not-allowed;
} }
button.primary { button.primary {
background: var(--color-accent-primary); background: var(--gb-lightest);
color: #000; color: var(--gb-darkest);
border-color: rgba(0, 255, 136, 0.55); border-color: var(--gb-lightest);
font-weight: 700; box-shadow:
inset -4px -4px 0 var(--gb-light),
inset 4px 4px 0 #c5d82f;
} }
button.primary:hover:not(:disabled) { button.primary:hover:not(:disabled) {
box-shadow: var(--glow-primary), var(--shadow-md); background: var(--gb-light);
color: var(--gb-darkest);
} }
.motif-stage { /* Play button container */
background: var(--color-surface-elevated); .play-container {
padding: calc(var(--spacing-unit) * 3);
border-radius: var(--radius);
border: 1px solid rgba(255, 255, 255, 0.08);
box-shadow: var(--shadow-lg);
}
.motif-grid {
display: flex; display: flex;
flex-direction: column; justify-content: center;
gap: 16px; margin: calc(var(--spacing-unit) * 2) 0;
} }
.motif-header { .play-container button {
margin-bottom: 6px;
}
.motif-title {
margin: 0;
color: var(--color-accent-secondary);
text-shadow: 0 0 18px rgba(255, 170, 68, 0.15);
font-size: 16px;
font-weight: 700;
}
.motif-kicker {
font-size: 0.85em;
color: #b6b6b6;
margin: 6px 0 0 0;
max-width: 70ch;
}
.motif-controls {
display: flex;
gap: 12px;
align-items: center;
flex-wrap: wrap;
}
.motif-controls button.primary {
flex: 1;
min-width: 180px;
padding: 12px 16px;
}
.volume-control {
margin-top: 0;
display: flex;
align-items: center;
gap: 10px;
flex: 1;
min-width: 200px; min-width: 200px;
padding: 14px 20px;
font-size: 10px;
} }
.volume-control label { /* Progress bar */
font-size: 0.85em;
color: #aaa;
min-width: 55px;
}
input[type="range"] {
flex: 1;
margin: 0;
}
/* Share page: single CTA only */
/* Progress (matches main page style) */
.progress-container { .progress-container {
margin-top: 8px; margin-top: calc(var(--spacing-unit) * 2);
padding-top: 16px; padding-top: calc(var(--spacing-unit) * 2);
border-top: 1px solid rgba(255, 255, 255, 0.08); border-top: 2px solid var(--gb-darkest);
display: none;
} }
.progress-time { .progress-time {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
margin-bottom: 8px; margin-bottom: calc(var(--spacing-unit));
font-size: 0.85em; font-size: 8px;
color: rgba(255,255,255,0.22); color: var(--gb-light);
transition: color 120ms ease;
}
.progress-time.active {
color: rgba(255,255,255,0.55);
} }
.progress-bar-wrapper { .progress-bar-wrapper {
position: relative; position: relative;
height: 44px; height: 20px;
display: flex; display: flex;
align-items: center; align-items: center;
padding: calc(var(--spacing-unit) * 2) 0; background: var(--gb-darkest);
border: 2px solid var(--gb-light);
padding: 4px;
} }
.progress-bar { .progress-bar {
width: 100%; width: 100%;
height: 6px; height: 8px;
-webkit-appearance: none; -webkit-appearance: none;
appearance: none; appearance: none;
background: transparent; background: transparent;
border-radius: 3px;
outline: none; outline: none;
cursor: pointer; cursor: pointer;
position: relative; position: relative;
@@ -260,121 +232,150 @@
} }
.progress-bar::-webkit-slider-runnable-track { .progress-bar::-webkit-slider-runnable-track {
height: 6px; height: 8px;
background: rgba(255, 255, 255, 0.1); background: var(--gb-darkest);
border-radius: 3px;
} }
.progress-bar::-webkit-slider-thumb { .progress-bar::-webkit-slider-thumb {
-webkit-appearance: none; -webkit-appearance: none;
appearance: none; appearance: none;
width: 20px; width: 12px;
height: 20px; height: 12px;
border-radius: 50%; background: var(--gb-lightest);
background: var(--color-accent-primary);
cursor: pointer; cursor: pointer;
box-shadow: 0 0 10px rgba(0, 255, 136, 0.28), var(--shadow-sm); border: none;
margin-top: -7px;
transition: transform 100ms ease;
}
.progress-bar:active::-webkit-slider-thumb {
transform: scale(1.15);
} }
.progress-bar::-moz-range-track { .progress-bar::-moz-range-track {
height: 6px; height: 8px;
background: rgba(255, 255, 255, 0.1); background: var(--gb-darkest);
border-radius: 3px;
} }
.progress-bar::-moz-range-thumb { .progress-bar::-moz-range-thumb {
width: 20px; width: 12px;
height: 20px; height: 12px;
border-radius: 50%; background: var(--gb-lightest);
background: var(--color-accent-primary);
cursor: pointer; cursor: pointer;
border: none; border: none;
box-shadow: 0 0 10px rgba(0, 255, 136, 0.28), var(--shadow-sm); border-radius: 0;
} }
.progress-fill { .progress-fill {
position: absolute; position: absolute;
left: 0; left: 4px;
top: 50%; top: 50%;
transform: translateY(-50%); transform: translateY(-50%);
height: 6px; height: 8px;
background: linear-gradient(90deg, rgba(0,255,136,0.95), rgba(0,255,136,0.45)); background: var(--gb-lightest);
border-radius: 3px;
pointer-events: none; pointer-events: none;
z-index: 1; z-index: 1;
width: 0%; width: 0%;
transition: width 0.1s linear;
} }
/* Meta block */
.meta-block { .meta-block {
margin-top: 8px; margin-top: calc(var(--spacing-unit) * 2);
font-size: 13px; padding-top: calc(var(--spacing-unit) * 2);
color: rgba(255,255,255,0.58); border-top: 2px solid var(--gb-darkest);
line-height: 1.45; font-size: 8px;
max-width: 72ch; color: var(--gb-light);
line-height: 2.2;
} }
/* No volume control on share page */ /* CTA link */
.cta-link {
display: block;
margin-top: calc(var(--spacing-unit) * 3);
text-align: center;
}
.cta-link a {
display: inline-block;
color: var(--gb-lightest);
text-decoration: none;
font-size: 10px;
padding: 12px 16px;
border: var(--pixel-border) solid var(--gb-light);
background: var(--gb-dark);
box-shadow:
inset -4px -4px 0 var(--gb-darkest),
inset 4px 4px 0 var(--gb-light);
}
.cta-link a:hover {
background: var(--gb-light);
color: var(--gb-darkest);
box-shadow:
inset 4px 4px 0 var(--gb-darkest),
inset -4px -4px 0 var(--gb-lightest);
}
/* Footer */
.footer {
margin-top: calc(var(--spacing-unit) * 4);
text-align: center;
font-size: 8px;
color: var(--gb-light);
}
.footer a {
color: var(--gb-lightest);
text-decoration: underline;
}
</style> </style>
</head> </head>
<body> <body>
<div class="container"> <div class="container">
<div class="motif-stage"> <div class="hero">
<div class="motif-grid" style="gap: 14px;"> <h1>WARIO SYNTH</h1>
<!-- 1. Source Song Title --> </div>
<h1 id="songTitle" style="margin:0; font-size: 28px; line-height: 1.15; font-weight: 800; color: var(--color-text); letter-spacing: 0.01em;">
Loading…
</h1>
<div id="songArtist" style="display:none; margin-top: -4px; font-size: 14px; color: rgba(255,255,255,0.62);"></div>
<!-- 2. Transformation Description --> <div class="player-card">
<p id="transformLine" style="margin:0; color: rgba(255,255,255,0.72); font-size: 14px;"> <!-- Song Title -->
Reimagined as classic game-console music <h2 id="songTitle" class="song-title">Loading...</h2>
</p> <div id="songArtist" class="song-artist"></div>
<!-- 3. Single Play/Pause Control --> <!-- Transformation Description -->
<div style="display:flex; justify-content:center; margin-top: 16px; margin-bottom: 16px;"> <p id="transformLine" class="transform-line">
<button id="playToggleBtn" class="primary" disabled style="min-width: 240px; padding: 14px 18px; font-size: 15px;"> Reimagined as classic game-console music
Play </p>
</button>
<!-- Play/Pause Control -->
<div class="play-container">
<button id="playToggleBtn" class="primary" disabled>
Play
</button>
</div>
<!-- Progress Bar -->
<div class="progress-container" id="playProgressContainer">
<div class="progress-time" id="playTimeRow">
<span id="playCurrentTime">0:00</span>
<span id="playDuration"></span>
</div> </div>
<div class="progress-bar-wrapper">
<!-- 4. Progress Bar --> <input id="playProgressBar" class="progress-bar" type="range" min="0" max="100" value="0" step="0.1" />
<div class="progress-container" id="playProgressContainer" style="display:block; margin-top: 0; padding-top: 12px;"> <div id="playProgressFill" class="progress-fill"></div>
<div class="progress-time" id="playTimeRow">
<span id="playCurrentTime">0:00</span>
<span id="playDuration"></span>
</div>
<div class="progress-bar-wrapper" style="padding: 10px 0;">
<input id="playProgressBar" class="progress-bar" type="range" min="0" max="100" value="0" step="0.1" />
<div id="playProgressFill" class="progress-fill"></div>
</div>
</div>
<!-- 5/6. Metadata (quiet block) -->
<div class="meta-block" id="metaBlock">
Procedural playback from MIDI structure.<br />
Rendered using the Wario Synthesis Engine.
</div>
<!-- 7. Primary CTA (single) -->
<div style="margin-top: 18px;">
<a id="generateOwn" href="/" style="display:inline-block; color: rgba(0,255,136,0.92); text-decoration:none; font-weight: 650;">
Generate your own →
</a>
</div> </div>
</div> </div>
<!-- Metadata -->
<div class="meta-block" id="metaBlock">
Procedural playback from MIDI structure.<br />
Rendered using the Wario Synthesis Engine.
</div>
</div>
<!-- CTA -->
<div class="cta-link">
<a id="generateOwn" href="/">Generate your own</a>
</div>
<div class="footer">
<a href="/">WARIO SYNTH</a> — Turn any song into retro game console music
</div> </div>
</div> </div>
<script type="module" src="/src/play.ts"></script> <script type="module" src="/src/play.ts"></script>
</body> </body>
</html> </html>