diff --git a/src/sm2k/README.md b/src/sm2k/README.md new file mode 100644 index 0000000..e69de29 diff --git a/src/sm2k/favicon.ico b/src/sm2k/assets/favicon.ico similarity index 100% rename from src/sm2k/favicon.ico rename to src/sm2k/assets/favicon.ico diff --git a/src/sm2k/assets/font.woff2 b/src/sm2k/assets/font.woff2 new file mode 100644 index 0000000..797d4dc Binary files /dev/null and b/src/sm2k/assets/font.woff2 differ diff --git a/src/sm2k/assets/images/background.gif b/src/sm2k/assets/images/background.gif new file mode 100644 index 0000000..a9088a2 Binary files /dev/null and b/src/sm2k/assets/images/background.gif differ diff --git a/src/sm2k/assets/images/cover.png b/src/sm2k/assets/images/cover.png new file mode 100644 index 0000000..aed0ef8 Binary files /dev/null and b/src/sm2k/assets/images/cover.png differ diff --git a/src/sm2k/assets/images/spinner.png b/src/sm2k/assets/images/spinner.png new file mode 100644 index 0000000..1541a8b Binary files /dev/null and b/src/sm2k/assets/images/spinner.png differ diff --git a/src/sm2k/assets/script.js b/src/sm2k/assets/script.js new file mode 100644 index 0000000..22bc578 --- /dev/null +++ b/src/sm2k/assets/script.js @@ -0,0 +1,194 @@ +function calculateFromDate(date) { + date1 = new Date(date) + date2 = new Date() + diffTime = Math.abs(date2 - date1) + diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24)); + return diffDays +} + + +const days = calculateFromDate('8/30/2000') + +document.getElementById('date').innerHTML = days + + +var audioPlayer = document.querySelector('.green-audio-player'); +var playPause = audioPlayer.querySelector('#playPause'); +var playpauseBtn = audioPlayer.querySelector('.play-pause-btn'); +var loading = audioPlayer.querySelector('.loading'); +var progress = audioPlayer.querySelector('.progress'); +var sliders = audioPlayer.querySelectorAll('.slider'); +var volumeBtn = audioPlayer.querySelector('.volume-btn'); +var volumeControls = audioPlayer.querySelector('.volume-controls'); +var volumeProgress = volumeControls.querySelector('.slider .progress'); +var player = audioPlayer.querySelector('audio'); +var currentTime = audioPlayer.querySelector('.current-time'); +var totalTime = audioPlayer.querySelector('.total-time'); +var speaker = audioPlayer.querySelector('#speaker'); + +var draggableClasses = ['pin']; +var currentlyDragged = null; + +window.addEventListener('mousedown', function(event) { + + if(!isDraggable(event.target)) return false; + + currentlyDragged = event.target; + let handleMethod = currentlyDragged.dataset.method; + + this.addEventListener('mousemove', window[handleMethod], false); + + window.addEventListener('mouseup', () => { + currentlyDragged = false; + window.removeEventListener('mousemove', window[handleMethod], false); + }, false); +}); + +playpauseBtn.addEventListener('click', togglePlay); +player.addEventListener('timeupdate', updateProgress); +player.addEventListener('volumechange', updateVolume); +player.addEventListener('loadedmetadata', () => { + totalTime.textContent = formatTime(player.duration); +}); +player.addEventListener('canplay', makePlay); +player.addEventListener('ended', function(){ + playPause.attributes.d.value = "M18 12L0 24V0"; + player.currentTime = 0; +}); + +volumeBtn.addEventListener('click', () => { + volumeBtn.classList.toggle('open'); + volumeControls.classList.toggle('hidden'); +}) + +window.addEventListener('resize', directionAware); + +sliders.forEach(slider => { + let pin = slider.querySelector('.pin'); + slider.addEventListener('click', window[pin.dataset.method]); +}); + +directionAware(); + +function isDraggable(el) { + let canDrag = false; + let classes = Array.from(el.classList); + draggableClasses.forEach(draggable => { + if(classes.indexOf(draggable) !== -1) + canDrag = true; + }) + return canDrag; +} + +function inRange(event) { + let rangeBox = getRangeBox(event); + let rect = rangeBox.getBoundingClientRect(); + let direction = rangeBox.dataset.direction; + if(direction == 'horizontal') { + var min = rangeBox.offsetLeft; + var max = min + rangeBox.offsetWidth; + if(event.clientX < min || event.clientX > max) return false; + } else { + var min = rect.top; + var max = min + rangeBox.offsetHeight; + if(event.clientY < min || event.clientY > max) return false; + } + return true; +} + +function updateProgress() { + var current = player.currentTime; + var percent = (current / player.duration) * 100; + progress.style.width = percent + '%'; + + currentTime.textContent = formatTime(current); +} + +function updateVolume() { + volumeProgress.style.height = player.volume * 100 + '%'; + if(player.volume >= 0.5) { + speaker.attributes.d.value = 'M14.667 0v2.747c3.853 1.146 6.666 4.72 6.666 8.946 0 4.227-2.813 7.787-6.666 8.934v2.76C20 22.173 24 17.4 24 11.693 24 5.987 20 1.213 14.667 0zM18 11.693c0-2.36-1.333-4.386-3.333-5.373v10.707c2-.947 3.333-2.987 3.333-5.334zm-18-4v8h5.333L12 22.36V1.027L5.333 7.693H0z'; + } else if(player.volume < 0.5 && player.volume > 0.05) { + speaker.attributes.d.value = 'M0 7.667v8h5.333L12 22.333V1L5.333 7.667M17.333 11.373C17.333 9.013 16 6.987 14 6v10.707c2-.947 3.333-2.987 3.333-5.334z'; + } else if(player.volume <= 0.05) { + speaker.attributes.d.value = 'M0 7.667v8h5.333L12 22.333V1L5.333 7.667'; + } +} + +function getRangeBox(event) { + let rangeBox = event.target; + let el = currentlyDragged; + if(event.type == 'click' && isDraggable(event.target)) { + rangeBox = event.target.parentElement.parentElement; + } + if(event.type == 'mousemove') { + rangeBox = el.parentElement.parentElement; + } + return rangeBox; +} + +function getCoefficient(event) { + let slider = getRangeBox(event); + let rect = slider.getBoundingClientRect(); + let K = 0; + if(slider.dataset.direction == 'horizontal') { + + let offsetX = event.clientX - slider.offsetLeft; + let width = slider.clientWidth; + K = offsetX / width; + + } else if(slider.dataset.direction == 'vertical') { + + let height = slider.clientHeight; + var offsetY = event.clientY - rect.top; + K = 1 - offsetY / height; + + } + return K; +} + +function rewind(event) { + if(inRange(event)) { + player.currentTime = player.duration * getCoefficient(event); + } +} + +function changeVolume(event) { + if(inRange(event)) { + player.volume = getCoefficient(event); + } +} + +function formatTime(time) { + var min = Math.floor(time / 60); + var sec = Math.floor(time % 60); + return min + ':' + ((sec<10) ? ('0' + sec) : sec); +} + +function togglePlay() { + if(player.paused) { + playPause.attributes.d.value = "M0 0h6v24H0zM12 0h6v24h-6z"; + player.play(); + } else { + playPause.attributes.d.value = "M18 12L0 24V0"; + player.pause(); + } +} + +function makePlay() { + playpauseBtn.style.display = 'block'; + loading.style.display = 'none'; +} + +function directionAware() { + if(window.innerHeight < 250) { + volumeControls.style.bottom = '-54px'; + volumeControls.style.left = '54px'; + } else if(audioPlayer.offsetTop < 154) { + volumeControls.style.bottom = '-164px'; + volumeControls.style.left = '-3px'; + } else { + volumeControls.style.bottom = '52px'; + volumeControls.style.left = '-3px'; + } +} \ No newline at end of file diff --git a/src/sm2k/song.mp3 b/src/sm2k/assets/song.mp3 similarity index 100% rename from src/sm2k/song.mp3 rename to src/sm2k/assets/song.mp3 diff --git a/src/sm2k/assets/style.css b/src/sm2k/assets/style.css new file mode 100644 index 0000000..28b1a19 --- /dev/null +++ b/src/sm2k/assets/style.css @@ -0,0 +1,246 @@ +@font-face { + font-family: Komika; + src: url('./font.woff2'); +} + +* { + font-family: Komika; + margin: 0; + padding: 0; + box-sizing: border-box; + text-decoration: none; + outline: none; + user-select: none; + word-break: break-all; + -moz-box-sizing: border-box; + -moz-user-select: none; + -ms-user-select: none; + -webkit-box-sizing: border-box; + -webkit-user-select: none; + -webkit-user-drag: none; + -webkit-touch-callout: none; +} + +a { + font-size: 18pt; + color: #eee; + transition: all 0.4s; + -webkit-transition: all 0.4s; + -o-transition: all 0.4s; + -moz-transition: all 0.4s; +} + +a:hover { + opacity: 0.5; +} + +img { + height: 100%; + width: 100%; + border-radius: 0.5ch; +} + +svg, img { + display: block; +} + +ul li { + padding: 5px; + display: inline; +} + +li a { + font-size: 14pt; + color: #666; +} + +.container { + width: 100%; + min-height: 100vh; + display: flex; + display: -webkit-box; + display: -webkit-flex; + display: -moz-box; + display: -ms-flexbox; + flex-wrap: wrap; + justify-content: center; + align-items: center; + background-image: url('./images/background.gif'); + background-size: cover; + box-shadow: inset 0 0 0 4000px rgba(0, 0, 0, 0.9); + background-position: center; +} + +.content { + border-radius: 1ch; + width: 500px; + background: #000; + overflow: hidden; + padding: 20px; + display: block; + text-align: center; +} + +.holder { + display: flex; + flex-direction: column; + align-items: center; +} + +.current-time, .total-time { + width: 4ch; +} + +.audio.green-audio-player { + width: 100%; + min-width: 300px; + height: 56px; + display: flex; + justify-content: space-between; + align-items: center; + padding-left: 10px; + padding-right: 10px; + background-color: transparent; + + .play-pause-btn { + display: none; + cursor: pointer; + } + + .spinner { + width: 18px; + height: 18px; + background-image: url('./images/spinner.png'); + background-size: cover; + background-repeat: no-repeat; + animation: spin 0.4s linear infinite; + } + + .slider { + flex-grow: 1; + background-color: #666; + cursor: pointer; + position: relative; + + .progress { + background-color: #3845b0; + border-radius: inherit; + position: absolute; + pointer-events: none; + + .pin { + height: 16px; + width: 16px; + border-radius: 0.5ch; + background-color: #ef4123; + position: absolute; + pointer-events: all; + } + } + } + + .controls { + font-size: 16px; + color: #666; + display: flex; + flex-grow: 1; + justify-content: space-between; + align-items: center; + margin-left: 24px; + margin-right: 24px; + + .slider { + margin-left: 16px; + margin-right: 16px; + border-radius: 0.5ch; + height: 4px; + + .progress { + width: 0; + height: 100%; + + .pin { + right: -8px; + top: -6px; + } + } + } + + span { + cursor: default; + } + } + + .volume { + position: relative; + + .volume-btn { + cursor: pointer; + + &.open path { + fill: #666; + } + } + + .volume-controls { + width: 31px; + height: 135px; + background-color: #000000; + border-radius: 0.5ch; + position: absolute; + left: -3px; + bottom: 52px; + flex-direction: column; + align-items: center; + display: flex; + + &.hidden { + display: none; + } + + .slider { + margin-top: 12px; + margin-bottom: 12px; + width: 6px; + border-radius: 0.5ch; + + .progress { + bottom: 0; + height: 100%; + width: 6px; + + .pin { + left: -5px; + top: -8px; + } + } + } + } + } +} + +#date { + color: #f9cd3f; + text-shadow: #d32126 2px 2px; + -webkit-text-stroke-width: 1px; + -webkit-text-stroke-color: black; +} + +@media (max-width: 576px) { + a { + font-size: 14pt; + } + li a { + font-size: 10pt; + color: #666; + } +} + +@keyframes spin { + from { + transform: rotateZ(0); + } + to { + transform: rotateZ(1turn); + } +} diff --git a/src/sm2k/background.gif b/src/sm2k/background.gif deleted file mode 100644 index 27a2818..0000000 Binary files a/src/sm2k/background.gif and /dev/null differ diff --git a/src/sm2k/cover.jpg b/src/sm2k/cover.jpg deleted file mode 100644 index 23732f5..0000000 Binary files a/src/sm2k/cover.jpg and /dev/null differ diff --git a/src/sm2k/font.ttf b/src/sm2k/font.ttf deleted file mode 100644 index cd2a88b..0000000 Binary files a/src/sm2k/font.ttf and /dev/null differ diff --git a/src/sm2k/index.html b/src/sm2k/index.html index c1ec0cb..9d9f787 100644 --- a/src/sm2k/index.html +++ b/src/sm2k/index.html @@ -1,27 +1,69 @@ - - - SM2K OST - - - - - - - -
-
- - - 0 days without the uncompressed ost - -
-
- - + + + SM2K OST + + + + + + + +
+
+ +
+
+
+ +
+
+ + + +
+ +
+ 0:00 +
+
+
+
+
+ 0:00 +
+ +
+
+ + + +
+ +
+ + +
+
+ 0 days without lossless soundtrack + +
+
+ + diff --git a/src/sm2k/script.js b/src/sm2k/script.js deleted file mode 100644 index bc8bc62..0000000 --- a/src/sm2k/script.js +++ /dev/null @@ -1,9 +0,0 @@ -function calculateFromDate(date) { - date1 = new Date(date) - date2 = new Date() - diffTime = Math.abs(date2 - date1) - diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24)); - return diffDays -} - -document.getElementById('date').innerHTML = '' + calculateFromDate('8/30/2000') + '' diff --git a/src/sm2k/style.css b/src/sm2k/style.css deleted file mode 100644 index 1f80633..0000000 --- a/src/sm2k/style.css +++ /dev/null @@ -1,99 +0,0 @@ -@font-face { - font-family: Komika; - src: url('font.ttf'); -} - -* { - font-family: Komika; - margin: 0; - padding: 0; - box-sizing: border-box; - text-decoration: none; - outline: none; - user-select: none; - word-break: break-all; - -moz-box-sizing: border-box; - -moz-user-select: none; - -ms-user-select: none; - -webkit-box-sizing: border-box; - -webkit-user-select: none; - -webkit-user-drag: none; - -webkit-touch-callout: none; -} - -a { - font-size: 18pt; - color: #eee; - transition: all 0.4s; - -webkit-transition: all 0.4s; - -o-transition: all 0.4s; - -moz-transition: all 0.4s; -} - -a:hover { - opacity: 0.5; -} - -audio { - filter: grayscale(1) contrast(130%) invert(0%); -} - -audio, img { - height: 100%; - width: 100%; -} - -ul li { - padding: 5px; - display: inline; -} - -li a { - font-size: 14pt; - color: #666; -} - -.container { - width: 100%; - min-height: 100vh; - display: flex; - display: -webkit-box; - display: -webkit-flex; - display: -moz-box; - display: -ms-flexbox; - flex-wrap: wrap; - justify-content: center; - align-items: center; - background-image: url('background.gif'); - background-size: cover; - box-shadow: inset 0 0 0 4000px rgba(0, 0, 0, 0.9); - background-position: center; -} - -.content { - width: 500px; - background: #000; - overflow: hidden; - padding: 20px; - display: block; - text-align: center; -} - -@media (max-width: 576px) { - .content { - padding: 40px; - } - - a { - font-size: 14pt; - } - - li a { - font-size: 10pt; - color: #666; - } - -} - - -