diff --git a/index.html b/index.html
index 257a9ce..1c651e6 100644
--- a/index.html
+++ b/index.html
@@ -46,8 +46,8 @@
diff --git a/src/input.css b/src/input.css
index d7456ae..58bd591 100644
--- a/src/input.css
+++ b/src/input.css
@@ -28,4 +28,39 @@ body {
.bio {
font-family: 'Fira Mono', monospace;
+}
+
+#track-name::after {
+ content: '';
+ display: inline-block;
+ margin-left: 4px;
+ width: 8px;
+ height: 24px;
+ background-color: var(--cursor-color, transparent);
+ -webkit-animation: var(--cursor-animation, none) 1s infinite;
+ animation: var(--cursor-animation, none) 1s infinite;
+}
+
+@-webkit-keyframes blink {
+ 0% {
+ opacity: 1;
+ }
+ 50% {
+ opacity: 0;
+ }
+ 100% {
+ opacity: 1;
+ }
+}
+
+@keyframes blink {
+ 0% {
+ opacity: 1;
+ }
+ 50% {
+ opacity: 0;
+ }
+ 100% {
+ opacity: 1;
+ }
}
\ No newline at end of file
diff --git a/static/script.js b/static/script.js
index 4085bad..74077fd 100644
--- a/static/script.js
+++ b/static/script.js
@@ -1,5 +1,60 @@
-function updatePlayingTrack() {
+function sleep(time) {
+ return new Promise((resolve) => setTimeout(resolve, time));
+}
+
+const SYMBOL_DELAY = 150;
+
+function deletePreviousTrack(newTrackName) {
const trackName = document.getElementById("track-name");
+ const prevTrackNameLen = trackName.innerHTML.length;
+ trackName.style.setProperty("--cursor-animation", "none");
+
+ let removed = 0;
+ const interval = setInterval(() => {
+ removed += 1;
+ trackName.innerHTML = trackName.innerHTML.substring(
+ 0,
+ prevTrackNameLen - removed
+ );
+
+ if (removed == prevTrackNameLen - 1) {
+ clearInterval(interval);
+ updateTrack(newTrackName);
+ return true;
+ }
+ }, SYMBOL_DELAY);
+}
+
+function updateTrack(newTrackName) {
+ const trackName = document.getElementById("track-name");
+ const TrackNameLen = newTrackName.length;
+
+ let added = 0;
+ const interval = setInterval(() => {
+ if (added < TrackNameLen) {
+ trackName.innerHTML += newTrackName[added];
+ console.log(added, TrackNameLen, newTrackName[added]);
+ added += 1;
+ }
+
+ if (added == TrackNameLen) {
+ clearInterval(interval);
+ setTimeout(() => {
+ trackName.innerHTML += '"';
+ }, SYMBOL_DELAY);
+ trackName.style.setProperty("--cursor-animation", "blink");
+ setTimeout(() => {
+ trackName.style.setProperty("--cursor-color", "transparent");
+ }, SYMBOL_DELAY * 3);
+ return true;
+ }
+ }, SYMBOL_DELAY);
+}
+
+async function updatePlayingTrack() {
+ const trackName = document.getElementById("track-name");
+ const prevTrackName = trackName.innerHTML;
+ const prevTrackNameLen = trackName.innerHTML.length;
fetch("https://lastfm-last-played.biancarosa.com.br/radiquum/latest-song")
.then((res) => {
@@ -9,54 +64,63 @@ function updatePlayingTrack() {
return res.json();
})
.then((data) => {
- trackName.innerHTML = `"${data.track.artist['#text']} - ${data.track.name}"`;
+ if (
+ prevTrackName != `"${data.track.artist["#text"]} - ${data.track.name}"`
+ ) {
+ trackName.style.setProperty("--cursor-color", "#fff");
+ trackName.style.setProperty("--cursor-animation", "blink");
+
+ setTimeout(() => {
+ deletePreviousTrack(
+ `${data.track.artist["#text"]} - ${data.track.name}`
+ );
+ }, SYMBOL_DELAY * 4);
+ }
})
.catch((err) => {
- trackName.innerHTML = "\"ERROR: last.fm is not reachable\"";
+ deletePreviousTrack("ERROR: last.fm is not reachable");
console.log(err);
});
}
-function getScrollPosition () {
- const height =
- document.documentElement.scrollHeight -
- document.documentElement.clientHeight;
- const windowScroll = document.documentElement.scrollTop;
- const scrolled = (windowScroll / height) * 100;
- return Math.floor(scrolled)
-}
-
window.onload = () => {
updatePlayingTrack();
- setInterval(updatePlayingTrack, 360000);
+ setInterval(updatePlayingTrack, 180000);
+};
+
+function getScrollPosition() {
+ const height =
+ document.documentElement.scrollHeight -
+ document.documentElement.clientHeight;
+ const windowScroll = document.documentElement.scrollTop;
+ const scrolled = (windowScroll / height) * 100;
+ return Math.floor(scrolled);
}
-const header = document.getElementById("header")
-let last_Y_pos = 0
-let header_opacity = 0
+
+const header = document.getElementById("header");
+let last_Y_pos = 0;
+let header_opacity = 0;
window.onscroll = () => {
- let scrollPosition = getScrollPosition()
- console.log(last_Y_pos, window.scrollY, scrollPosition, header_opacity)
+ let scrollPosition = getScrollPosition();
if (scrollPosition < 1) {
- header.style.display = "none"
+ header.style.display = "none";
} else {
- header.style.display = "block"
+ header.style.display = "block";
}
-
- if ((window.scrollY > last_Y_pos) && (scrollPosition > 1)) {
- header_opacity += 0.1
- } else if ((window.scrollY < last_Y_pos) && (scrollPosition < 1)) (
- header_opacity -= 0.1
- )
- last_Y_pos = window.scrollY
+ if (window.scrollY > last_Y_pos && scrollPosition > 1) {
+ header_opacity += 0.1;
+ } else if (window.scrollY < last_Y_pos && scrollPosition < 1)
+ header_opacity -= 0.1;
+ last_Y_pos = window.scrollY;
if (header_opacity > 1) {
- header_opacity = 1
+ header_opacity = 1;
} else if (header_opacity < 0) {
- header_opacity = 0
+ header_opacity = 0;
}
- header.style.setProperty("--header-opacity", `${header_opacity.toFixed(2)}`)
-}
\ No newline at end of file
+ header.style.setProperty("--header-opacity", `${header_opacity.toFixed(2)}`);
+};
diff --git a/static/tailwind.css b/static/tailwind.css
index df40770..6aaa3d2 100644
--- a/static/tailwind.css
+++ b/static/tailwind.css
@@ -600,8 +600,8 @@ video {
position: relative;
}
-.sticky {
- position: sticky;
+.left-0 {
+ left: 0px;
}
.right-0 {
@@ -612,10 +612,6 @@ video {
top: 0px;
}
-.left-0 {
- left: 0px;
-}
-
.-z-10 {
z-index: -10;
}
@@ -634,13 +630,7 @@ video {
margin-bottom: 1rem;
}
-.my-24 {
- margin-top: 6rem;
- margin-bottom: 6rem;
-}
-
-.my-12 {
- margin-top: 3rem;
+.mb-12 {
margin-bottom: 3rem;
}
@@ -656,10 +646,6 @@ video {
margin-left: 2rem;
}
-.mb-12 {
- margin-bottom: 3rem;
-}
-
.mt-16 {
margin-top: 4rem;
}
@@ -712,12 +698,16 @@ video {
width: 320px;
}
+.w-\[64px\] {
+ width: 64px;
+}
+
.w-full {
width: 100%;
}
-.w-\[64px\] {
- width: 64px;
+.max-w-\[1200px\] {
+ max-width: 1200px;
}
.max-w-\[45\%\] {
@@ -732,18 +722,6 @@ video {
max-width: 54.75%;
}
-.max-w-\[1200px\] {
- max-width: 1200px;
-}
-
-.scroll-mt-24 {
- scroll-margin-top: 6rem;
-}
-
-.scroll-mt-1 {
- scroll-margin-top: 0.25rem;
-}
-
.scroll-mt-32 {
scroll-margin-top: 8rem;
}
@@ -796,6 +774,27 @@ video {
scroll-behavior: smooth;
}
+.border-4 {
+ border-width: 4px;
+}
+
+.border-l-8 {
+ border-left-width: 8px;
+}
+
+.border-t-8 {
+ border-top-width: 8px;
+}
+
+.border-solid {
+ border-style: solid;
+}
+
+.border-black {
+ --tw-border-opacity: 1;
+ border-color: rgb(0 0 0 / var(--tw-border-opacity));
+}
+
.bg-bg-black {
--tw-bg-opacity: 1;
background-color: rgb(30 30 30 / var(--tw-bg-opacity));
@@ -872,22 +871,14 @@ video {
line-height: 2.5rem;
}
-.text-xl {
- font-size: 1.25rem;
- line-height: 1.75rem;
-}
-
.text-6xl {
font-size: 3.75rem;
line-height: 1;
}
-.font-medium {
- font-weight: 500;
-}
-
-.font-semibold {
- font-weight: 600;
+.text-xl {
+ font-size: 1.25rem;
+ line-height: 1.75rem;
}
.font-bold {
@@ -898,6 +889,14 @@ video {
font-weight: 300;
}
+.font-medium {
+ font-weight: 500;
+}
+
+.font-semibold {
+ font-weight: 600;
+}
+
.text-bg-pink {
--tw-text-opacity: 1;
color: rgb(255 71 139 / var(--tw-text-opacity));
@@ -908,16 +907,17 @@ video {
color: rgb(255 255 255 / var(--tw-text-opacity));
}
-.opacity-0 {
- opacity: 0;
-}
-
.opacity-\[var\(--header-opacity\2c 0\)\] {
opacity: var(--header-opacity,0);
}
-.transition-colors {
- transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
+.shadow-transparent {
+ --tw-shadow-color: transparent;
+ --tw-shadow: var(--tw-shadow-colored);
+}
+
+.transition-all {
+ transition-property: all;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
@@ -954,14 +954,55 @@ body {
font-family: 'Fira Mono', monospace;
}
-.hover\:bg-opacity-85:hover {
- --tw-bg-opacity: 0.85;
+#track-name::after {
+ content: '';
+ display: inline-block;
+ margin-left: 4px;
+ width: 8px;
+ height: 24px;
+ background-color: var(--cursor-color, transparent);
+ animation: var(--cursor-animation, none) 1s infinite;
+}
+
+@keyframes blink {
+ 0% {
+ opacity: 1;
+ }
+
+ 50% {
+ opacity: 0;
+ }
+
+ 100% {
+ opacity: 1;
+ }
+}
+
+.hover\:-translate-y-2:hover {
+ --tw-translate-y: -0.5rem;
+ transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.hover\:translate-x-2:hover {
+ --tw-translate-x: 0.5rem;
+ transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.hover\:underline:hover {
text-decoration-line: underline;
}
+.hover\:shadow-md:hover {
+ --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+ --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+.hover\:shadow-black:hover {
+ --tw-shadow-color: #000;
+ --tw-shadow: var(--tw-shadow-colored);
+}
+
@media (min-width: 1024px) {
.lg\:w-\[372px\] {
width: 372px;
@@ -971,6 +1012,11 @@ body {
width: 64px;
}
+ .lg\:text-2xl {
+ font-size: 1.5rem;
+ line-height: 2rem;
+ }
+
.lg\:text-3xl {
font-size: 1.875rem;
line-height: 2.25rem;
@@ -980,14 +1026,14 @@ body {
font-size: 2.25rem;
line-height: 2.5rem;
}
-
- .lg\:text-2xl {
- font-size: 1.5rem;
- line-height: 2rem;
- }
}
@media (min-width: 1280px) {
+ .xl\:text-3xl {
+ font-size: 1.875rem;
+ line-height: 2.25rem;
+ }
+
.xl\:text-4xl {
font-size: 2.25rem;
line-height: 2.5rem;
@@ -997,11 +1043,6 @@ body {
font-size: 3.75rem;
line-height: 1;
}
-
- .xl\:text-3xl {
- font-size: 1.875rem;
- line-height: 2.25rem;
- }
}
@media (min-width: 1536px) {
@@ -1013,6 +1054,11 @@ body {
width: 64px;
}
+ .\32xl\:text-4xl {
+ font-size: 2.25rem;
+ line-height: 2.5rem;
+ }
+
.\32xl\:text-5xl {
font-size: 3rem;
line-height: 1;
@@ -1022,9 +1068,4 @@ body {
font-size: 6rem;
line-height: 1;
}
-
- .\32xl\:text-4xl {
- font-size: 2.25rem;
- line-height: 2.5rem;
- }
}
\ No newline at end of file