-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Testing page for testing the logic of MusicMixer - I think it is super pretty
- Loading branch information
Showing
4 changed files
with
220 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,2 +1,3 @@ | ||
| *.json | ||
| *.md | ||
| *.html |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,139 @@ | ||
| /* Font Imports */ | ||
| @import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght@0,200..900;1,200..900&display=swap'); | ||
|
|
||
| body { | ||
| font-family: 'Source Code Pro', 'Courier New', Courier, monospace; | ||
| } | ||
|
|
||
| .center { | ||
| width: 80%; | ||
| margin: 0 10%; | ||
| } | ||
|
|
||
| .center-text { | ||
| text-align: center; | ||
| } | ||
|
|
||
| .page-style { | ||
| margin-top: 3rem; | ||
| margin-bottom: 3rem; | ||
| padding: 2rem; | ||
| min-height: calc(100% - 6rem) !important; | ||
| border-width: 1px; | ||
| border-style: solid; | ||
| border-image: linear-gradient( | ||
| to bottom, | ||
| rgba(0, 255, 255, 0) 0%, | ||
| rgba(0, 255, 255, 1) min(7%, 80px), | ||
| rgba(0, 255, 255, 1) calc(100% - min(7%, 80px)), | ||
| rgba(0, 255, 255, 0) 100% | ||
| ) | ||
| 1 100%; | ||
| } | ||
|
|
||
| p { | ||
| font-size: 1rem; | ||
| font-weight: 350; | ||
| } | ||
|
|
||
| h1 { | ||
| font-size: 2.8rem; | ||
| font-weight: 640; | ||
| } | ||
|
|
||
| h2 { | ||
| font-size: 2.2rem; | ||
| font-weight: 600; | ||
| } | ||
|
|
||
| h3 { | ||
| font-size: 1.5rem; | ||
| font-weight: 720; | ||
| } | ||
|
|
||
| div.clickable:hover { | ||
| cursor: pointer; | ||
| } | ||
|
|
||
| a { | ||
| color: #5fccff; | ||
| text-decoration: none; | ||
| transition: color 80ms linear, border-color 80ms linear; | ||
| border-bottom: 1px solid rgba(95, 204, 255, 0); | ||
| } | ||
|
|
||
| a:hover, | ||
| div.clickable:hover a { | ||
| color: #75d3ff; | ||
| border-bottom-color: rgba(117, 211, 255, 1); | ||
| } | ||
|
|
||
| div.grid-box { | ||
| display: grid; | ||
| gap: 32px; | ||
| grid-template-columns: auto auto auto; | ||
| } | ||
|
|
||
| div.grid-box > div { | ||
| padding: 1.8rem; | ||
| } | ||
|
|
||
| div.grid-box h3 { | ||
| margin: 0; | ||
| } | ||
|
|
||
| div.glow-responsive { | ||
| box-shadow: 0 0 0px rgba(0, 255, 255, 0); | ||
| background: radial-gradient(ellipse 29% 100% at left -25% bottom 32%, #00ffff, transparent) padding-box, | ||
| radial-gradient(ellipse 29% 100% at right -25% bottom 32%, #00ffff, transparent) padding-box, | ||
| radial-gradient(ellipse 100% 31% at left 50% bottom -25%, #00ffff, #000000) padding-box; | ||
| background-size: 108% 106%; | ||
| background-position: 50% 0%; | ||
| transition: background-size 80ms ease-out, box-shadow 80ms ease-out; | ||
| } | ||
|
|
||
| div.glow-responsive:hover { | ||
| box-shadow: 0 0 7px rgba(0, 255, 255, 0.25); | ||
| background-size: 100% 100%; | ||
| } | ||
|
|
||
| div.border-responsive { | ||
| --borderResponsiveWidth: 1px; | ||
| position: relative; | ||
| background-clip: padding-box; | ||
| border: solid var(--borderResponsiveWidth) transparent; | ||
| border-radius: 13px; | ||
| } | ||
|
|
||
| div.border-responsive::before { | ||
| content: ''; | ||
| position: absolute; | ||
| left: 0; | ||
| right: 0; | ||
| top: 0; | ||
| bottom: 0; | ||
| z-index: -1; | ||
| margin: calc(0px - var(--borderResponsiveWidth)); | ||
| border-radius: inherit; | ||
| background: linear-gradient( | ||
| to bottom, | ||
| rgba(95, 204, 255, 0.3) 0%, | ||
| rgba(95, 204, 255, 0.3) 39%, | ||
| rgba(95, 204, 255, 1) 50% | ||
| ); | ||
| background-size: 1px 200%; | ||
| transition: background 80ms ease-out; | ||
| } | ||
|
|
||
| div.border-responsive:hover::before { | ||
| background-position-y: 80%; | ||
| } | ||
|
|
||
| .text-glow-responsive { | ||
| text-shadow: 0 0 2px; | ||
| transition: text-shadow 1.5s ease-out; | ||
| } | ||
|
|
||
| .text-glow-responsive:hover { | ||
| text-shadow: 0 0 4px; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,19 @@ | ||
| html, | ||
| body { | ||
| box-sizing: border-box; | ||
| margin: 0; | ||
| padding: 0; | ||
| width: 100%; | ||
| min-height: 100%; | ||
| } | ||
|
|
||
| *, | ||
| *:before, | ||
| *:after { | ||
| box-sizing: inherit; | ||
| } | ||
|
|
||
| .page-box { | ||
| min-height: 100%; | ||
| position: absolute; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,61 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
|
|
||
| <head> | ||
| <style> | ||
| body { | ||
| background: #000; | ||
| color: #f0f8ff; | ||
| } | ||
| </style> | ||
| <link rel="stylesheet" href="css/page.css"> | ||
| <link rel="stylesheet" href="css/main.css"> | ||
| </head> | ||
|
|
||
| <body> | ||
|
|
||
| <div class="center page-box page-style"> | ||
| <h1 class="center-text text-glow-responsive">MusicMixer Test Suite</h1> | ||
| <div class="grid-box"> | ||
| <div onclick="location.assign('basic.html')" class="clickable glow-responsive border-responsive text-glow-responsive"> | ||
| <h3><a>Basic Loading and Playback</a></h3> | ||
| <p> | ||
| Loads an arbitrary sound file and starts playing it at the set volume. | ||
| </p> | ||
| </div> | ||
| <div onclick="location.assign('soundscape.html')" class="clickable glow-responsive border-responsive text-glow-responsive"> | ||
| <h3><a>Soundscapes</a></h3> | ||
| <p> | ||
| Loads multiple sounds into a single track group, then plays them on a loop at the set volume. | ||
| </p> | ||
| </div> | ||
| <div onclick="location.assign('multitrack.html')" class="clickable glow-responsive border-responsive text-glow-responsive"> | ||
| <h3><a>Multitrack Volume Control</a></h3> | ||
| <p> | ||
| Loads arbitrary sounds into groups, with controls for each group and source, and a master volume control. | ||
| </p> | ||
| </div> | ||
| <div onclick="location.assign('dynamic.html')" class="clickable glow-responsive border-responsive text-glow-responsive"> | ||
| <h3><a>Dynamic Music</a></h3> | ||
| <p> | ||
| Create three tracks: drums, bass, synth. Controls to start and stop each track, or to synchronize tracks. | ||
| </p> | ||
| </div> | ||
| <div onclick="location.assign('panning.html')" class="clickable glow-responsive border-responsive text-glow-responsive"> | ||
| <h3><a>Panning Control</a></h3> | ||
| <p> | ||
| Loads an arbitrary sound, or an oscillator, with control for panning a source in 3D space and visualization. | ||
| </p> | ||
| </div> | ||
| <div class="glow-responsive border-responsive text-glow-responsive"> | ||
| <h3><a>More...</a></h3> | ||
| <p> | ||
| That's it for now. | ||
| </p> | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
| </body> | ||
|
|
||
| </html> |