summaryrefslogtreecommitdiff
path: root/docs
diff options
context:
space:
mode:
Diffstat (limited to 'docs')
-rw-r--r--docs/img/pause-inv.pngbin1337 -> 3208 bytes
-rw-r--r--docs/index.html138
-rw-r--r--docs/js/player.js71
-rw-r--r--docs/js/shards.js9
-rw-r--r--docs/js/site.js48
-rw-r--r--docs/js/stars.js4
6 files changed, 187 insertions, 83 deletions
diff --git a/docs/img/pause-inv.png b/docs/img/pause-inv.png
index 9bec646..9780255 100644
--- a/docs/img/pause-inv.png
+++ b/docs/img/pause-inv.png
Binary files differ
diff --git a/docs/index.html b/docs/index.html
index 0c5217f..9263023 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -65,6 +65,7 @@ body.fade {
top: 0; left: 0;
width: 100%; height: 100%;
overflow: hidden;
+ pointer-events: none;
}
.bgs {
position: absolute;
@@ -181,7 +182,7 @@ ol li {
line-height: 1.4;
}
.player {
- padding: 10px 20px;
+ padding: 12px 20px;
width: 300px;
display: flex;
flex-direction: row;
@@ -193,25 +194,22 @@ ol li {
.player .icon {
width: 1.2em;
height: 1.2em;
- background-image: url(img/play.png);
+ background-image: url(img/pause-inv.png);
background-size: 100%;
background-position: center;
border: 2px solid rgba(255,255,255,0.3);
- border-radius: 50%;
+ border-radius: 100%;
margin: 0 10px 0 10px;
- transition: all 100ms;
}
-.player:hover .icon {
- background-image: url(img/play-inv.png);
+.player.playing .icon {
+ background-image: url(img/pause-inv.png);
}
.player.paused .icon {
- background-image: url(img/pause.png);
-}
-.player.paused:hover .icon {
- background-image: url(img/pause-inv.png);
+ background-image: url(img/play-inv.png);
}
.player .track {
transition: all 100ms;
+ flex: auto;
}
.player:hover .track {
color: rgba(255,255,255,1.0);
@@ -220,14 +218,46 @@ ol li {
-webkit-overflow-scrolling: touch;
overflow-y: auto;
max-height: calc(100vh - 140px);
- width: 310px;
+ width: 331px;
max-width: calc(100vw - 30px);
background: black;
position: absolute;
bottom: 160px; right: 0;
- margin: 10px 10px;
+ margin: 0px 10px;
+ padding: 0px;
+ height: 0; overflow: hidden;
+ transition: all 0.5s cubic-bezier(0,1,1,1);
+}
+.playlist.visible {
+ height: 180px;
+}
+.playlist ul {
+ margin: 0; padding: 0;
+}
+.playlist li {
+ margin: 0; padding: 10px;
+ cursor: pointer;
+ transition: all 0.2s;
+ background: rgba(20,5,10,0.5);
+}
+.playlist li.active {
+ color: #000;
+ background: rgba(255,255,255,0.9);
+}
+.playlistToggle {
+ align-self: flex-end;
+ width: 15px;
+ height: 15px;
padding: 10px;
- background: rgba(0,0,0,0.5);
+ display: flex;
+ flex-direction: column;
+ justify-content:space-between;
+}
+.playlistToggle div {
+ width: 100%;
+ height: 2px;
+ border-bottom: 1px solid #999;
+ background: white;
}
section {
-webkit-overflow-scrolling: touch;
@@ -239,7 +269,7 @@ section {
bottom: 160px; left: 0;
margin: 10px 10px;
padding: 10px;
- background: rgba(0,0,0,0.5);
+ background: rgba(20,5,10,0.5);
pointer-events: none;
opacity: 0;
transition: opacity 200ms;
@@ -249,6 +279,7 @@ section {
.hardware #hardware,
.contact #contact {
opacity: 1;
+ pointer-events: auto;
}
@keyframes fade {
0% { opacity: 0.6; }
@@ -271,9 +302,14 @@ section {
<a href="#hardware">Equipment</a>
<a href="#contact">Contact</a>
</div>
- <div class="player">
+ <div class="player paused">
<div class="icon"></div>
<div class="track">Dreaming City</div>
+ <div class="playlistToggle">
+ <div></div>
+ <div></div>
+ <div></div>
+ </div>
</div>
</div>
</header>
@@ -292,14 +328,12 @@ section {
<i>As Xena Vectra</i>
</p>
<p>
- <img src="img/escape-from-neukoelln.jpg" class="cover"><br/>
<b>Escape from Neukölln</b> EP (2018)<br>
- 12" / digital on <a href="https://xenavectra.bandcamp.com/albums/escape-from-neukolln/">Bandcamp</a>
+ Digital on <a href="https://xenavectra.bandcamp.com/albums/escape-from-neukolln/">Bandcamp</a>
<br>
<br>
</p>
<p>
- <img src="img/dreaming-city.jpg" class="cover"><br/>
<b>Dreaming City</b> EP (2018)<br>
Cassette / digital on <a href="https://xenavectra.bandcamp.com/albums/escape-from-neukolln/">Bandcamp</a>
</p>
@@ -334,77 +368,25 @@ section {
<h2>Contact</h2>
<p>
Booking:
- <a id='email_addr'></a><br>
+ <a target='_blank' id='email_addr'></a><br>
Twitter:
- @<a id='twitter_addr'></a><br>
+ @<a target='_blank' id='twitter_addr'></a><br>
Soundcloud:
- <a href="https://soundcloud.com/xenavectra/">xenavectra</a>,
- <a href="https://soundcloud.com/magisphere/">magisphere</a>
+ <a target='_blank' href="https://soundcloud.com/xenavectra/">xenavectra</a>,
+ <a target='_blank' href="https://soundcloud.com/magisphere/">magisphere</a>
<br/>
- Bandcamp: <a href="https://xenavectra.bandcamp.com/">xenavectra</a><br/>
+ Bandcamp: <a target='_blank' href="https://xenavectra.bandcamp.com/">xenavectra</a><br/>
</p>
</section>
<div class="playlist">
- <h2>Playlist</h2>
+ <ul></ul>
</div>
<script src="./js/util.js"></script>
<script src="./js/cielab.js"></script>
<script src="./js/sounds.js"></script>
+<script src="./js/player.js"></script>
<script src="./js/stars.js"></script>
<script src="./js/shards.js"></script>
-<script type="text/javascript">
-const site = (function(){
- let section
- let links = toArray(document.querySelectorAll('.menu a'))
- let time = new Date()
- let hour = time.getHours()
- if (hour < 8 || hour > 16) {
- document.body.parentNode.classList.add('night')
- } else {
- document.body.parentNode.classList.add('day')
- }
- setTimeout(() => {
- document.body.classList.remove('loading')
- navigateHash(window.location.hash)
- const email = atob("eGVuYXZlY3RyYTkwOUBnbWFpbC5jb20=")
- const twitter = atob("dmVjdHJheGVuYQ==")
- document.querySelector("#email_addr").href = 'mailto:' + email
- document.querySelector("#email_addr").innerHTML = email
- document.querySelector("#twitter_addr").innerHTML = twitter
- document.querySelector("#twitter_addr").href = 'https://twitter.com/' + email
- }, 0)
- function navigateHash(url){
- let new_section = url.split('#')[1]
- if (section) {
- document.body.classList.remove(section)
- links.forEach(link => link.classList.remove('active'))
- }
- if (new_section && new_section !== section) {
- document.body.classList.add(new_section)
- links.forEach(link => link.getAttribute('href').match(new_section) && link.classList.add('active'))
- section = new_section
- } else {
- section = null
- }
- window.location.hash = section || ""
- }
- toArray(document.querySelectorAll('.menu a')).forEach(a => {
- a.addEventListener("click", e => {
- e.preventDefault()
- sounds.play('click')
- navigateHash(e.target.href)
- })
- })
-})()
-const player = (function(){
- let player = {}
- let tracks = [
- { file: "sounds/dreaming_city_2.mp3", title: "Dreaming City 2" },
- { file: "sounds/dreaming_city_2.mp3", title: "Dreaming City 2" },
- { file: "sounds/dreaming_city_2.mp3", title: "Dreaming City 2" },
- { file: "sounds/dreaming_city_2.mp3", title: "Dreaming City 2" },
- ]
-})
-</script>
+<script src="./js/site.js"></script>
</body>
</html>
diff --git a/docs/js/player.js b/docs/js/player.js
new file mode 100644
index 0000000..f262454
--- /dev/null
+++ b/docs/js/player.js
@@ -0,0 +1,71 @@
+const player = (function(){
+ let player = {}
+ let current_index = -1
+ let audio = document.createElement('audio')
+ let tracks = [
+ { file: "mp3/xena_vectra-cruise.mp3", title: "Cruise" },
+ { file: "mp3/xena_vectra-dreaming_city_2.mp3", title: "Dreaming City 2" },
+ { file: "mp3/xena_vectra-escape_from_nk.mp3", title: "Escape from Neukölln" },
+ ]
+ function init(){
+ bind()
+ build()
+ // play(0)
+ }
+ function bind(){
+ audio.addEventListener('play', handlePlay)
+ audio.addEventListener('pause', handlePause)
+ audio.addEventListener('ended', handleEnded)
+ document.querySelector('.player .icon').addEventListener('click', togglePlaying)
+ document.querySelector('.player .track').addEventListener('click', play)
+ document.querySelector('.player .playlistToggle').addEventListener('click', togglePlaylist)
+ }
+ function build() {
+ tracks.forEach((track, i) => {
+ let el = document.createElement('li')
+ el.innerHTML = track.title
+ el.addEventListener('click', () => {
+ shards.rebuild()
+ play(i)
+ })
+ document.querySelector('.playlist ul').appendChild(el)
+ })
+ document.querySelector('.player .track').innerHTML = tracks[0].title
+ }
+ function play(n){
+ const active = document.querySelector('.playlist ul .active')
+ if (active) active.classList.remove('active')
+ document.querySelector('.playlist ul').children[n].classList.add('active')
+
+ current_index = (n + tracks.length) % tracks.length
+ audio.src = tracks[n].file
+ audio.play()
+ document.querySelector('.player .track').innerHTML = tracks[n].title
+ }
+ function handlePlay(){
+ document.querySelector('.player').classList.add('playing')
+ document.querySelector('.player').classList.remove('paused')
+ shards.step()
+ }
+ function handlePause(){
+ document.querySelector('.player').classList.remove('playing')
+ document.querySelector('.player').classList.add('paused')
+ }
+ function handleEnded(){
+ shards.rebuild()
+ play(current_index+1)
+ }
+ function togglePlaying() {
+ // sounds.play('click')
+ if (current_index == -1) {
+ play(0)
+ } else {
+ if (audio.paused) audio.play()
+ else audio.pause()
+ }
+ }
+ function togglePlaylist() {
+ document.querySelector('.playlist').classList.toggle('visible')
+ }
+ init()
+})() \ No newline at end of file
diff --git a/docs/js/shards.js b/docs/js/shards.js
index 44d2ecd..6512e70 100644
--- a/docs/js/shards.js
+++ b/docs/js/shards.js
@@ -16,7 +16,10 @@ const shards = (function(){
bg_el.classList.remove('fade')
}
function bind(){
- document.querySelector('h1').addEventListener('click', rebuild)
+ document.querySelector('h1').addEventListener('click', () => {
+ sounds.play('click')
+ rebuild()
+ })
}
function build(){
count = choice([5,7,7,11,11,13,13])
@@ -36,7 +39,7 @@ const shards = (function(){
function rebuild(){
if (rebuilding) return
rebuilding = true
- sounds.play('click')
+ // sounds.play('click')
stars.rebuild()
next()
t = 0
@@ -48,7 +51,7 @@ const shards = (function(){
setTimeout(next, 20)
bg_el.classList.remove('fade')
rebuilding = false
- sounds.play('click')
+ // sounds.play('click')
}, 500)
}
function append(i){
diff --git a/docs/js/site.js b/docs/js/site.js
new file mode 100644
index 0000000..59d09f9
--- /dev/null
+++ b/docs/js/site.js
@@ -0,0 +1,48 @@
+const site = (function(){
+ let section
+ let links = toArray(document.querySelectorAll('.menu a'))
+ let time = new Date()
+ let hour = time.getHours()
+ if (hour < 8 || hour > 16) {
+ document.body.parentNode.classList.add('night')
+ } else {
+ document.body.parentNode.classList.add('day')
+ }
+ setTimeout(() => {
+ document.body.classList.remove('loading')
+ navigateHash(window.location.hash)
+ const email = atob("eGVuYXZlY3RyYTkwOUBnbWFpbC5jb20=")
+ const twitter = atob("dmVjdHJheGVuYQ==")
+ document.querySelector("#email_addr").href = 'mailto:' + email
+ document.querySelector("#email_addr").innerHTML = email
+ document.querySelector("#twitter_addr").innerHTML = twitter
+ document.querySelector("#twitter_addr").href = 'https://twitter.com/' + twitter
+ }, 0)
+ function navigateHash(url){
+ let new_section = url.split('#')[1]
+ if (section) {
+ document.body.classList.remove(section)
+ links.forEach(link => link.classList.remove('active'))
+ }
+ if (new_section && new_section !== section) {
+ document.body.classList.add(new_section)
+ links.forEach(link => link.getAttribute('href').match(new_section) && link.classList.add('active'))
+ section = new_section
+ } else {
+ section = null
+ }
+ // window.location.hash = section || ""
+ }
+ toArray(document.querySelectorAll('.menu a')).forEach(a => {
+ a.addEventListener("click", e => {
+ e.preventDefault()
+ sounds.play('click')
+ navigateHash(e.target.href)
+ })
+ })
+ function preload(src) {
+ const img = new Image
+ img.src = src
+ }
+ preload('img/pause-inv.png')
+})()
diff --git a/docs/js/stars.js b/docs/js/stars.js
index f1569eb..0637473 100644
--- a/docs/js/stars.js
+++ b/docs/js/stars.js
@@ -18,8 +18,8 @@ const stars = (function(){
function ri(n){ return Math.random() * n }
function rr(a,b){ return (b-a) * Math.random() + a }
function build(){
- var w = canvas.width = window.innerWidth
- var h = canvas.height = window.innerHeight
+ var w = canvas.width = window.innerWidth * window.devicePixelRatio
+ var h = canvas.height = window.innerHeight * window.devicePixelRatio
ctx.clearRect(0,0,w,h)
var n = Math.sqrt(w*h)|0
while (n--) {
generated by cgit v1.2.3-70-g09d2 (git 2.51.0) at 2025-12-14 17:53:43 +0000