From fe3343e6ca93246b34204b3403fb4c96b87b815c Mon Sep 17 00:00:00 2001 From: Pinapelz Date: Wed, 16 Oct 2024 01:15:07 -0700 Subject: completed page v1 --- about.html | 74 ++++--- assets/603.webp | Bin 0 -> 13325 bytes assets/aiba.webp | Bin 0 -> 373230 bytes assets/eri.jpg | Bin 0 -> 9401 bytes assets/gc.jpg | Bin 0 -> 9501 bytes assets/growing.gif | Bin 0 -> 2163778 bytes assets/rappy.webp | Bin 0 -> 35516 bytes assets/reine.jpg | Bin 0 -> 9657 bytes assets/skill-issue.gif | Bin 0 -> 5164000 bytes assets/usami.webp | Bin 0 -> 72126 bytes assets/vuln.jpg | Bin 0 -> 7688 bytes index.html | 189 +++++++++--------- projects.html | 190 ++++++++++++++++++ scripts/index.js | 101 +++++++++- styles/border.webp | Bin 0 -> 534 bytes styles/clock.css | 43 +++++ styles/projects.css | 17 ++ styles/styles.css | 509 +++++++++++++++++++++++++++++-------------------- 18 files changed, 804 insertions(+), 319 deletions(-) create mode 100644 assets/603.webp create mode 100644 assets/aiba.webp create mode 100644 assets/eri.jpg create mode 100644 assets/gc.jpg create mode 100644 assets/growing.gif create mode 100644 assets/rappy.webp create mode 100644 assets/reine.jpg create mode 100644 assets/skill-issue.gif create mode 100644 assets/usami.webp create mode 100644 assets/vuln.jpg create mode 100644 projects.html create mode 100644 styles/border.webp create mode 100644 styles/clock.css create mode 100644 styles/projects.css diff --git a/about.html b/about.html index 23e00e7..ca46165 100644 --- a/about.html +++ b/about.html @@ -8,10 +8,13 @@ + -
+
+ About Me @@ -20,8 +23,9 @@

Navigation

Discord Avatar - +

@@ -63,42 +67,52 @@
-
+

info

+
    +
  • Student at UC Irvine studying Software Engineering
    • +
  • Daily drives Arch Linux
    • +
  • Mainly on Hyprland and KDE Plasma
    • +
  • Watches anime and reads manga
    • +
  • Accumulates brainrot from watching Twitch streams and VTubers
    • +
+

games

+
    +
  • MMOs - FFXIV, PSO2, OSRS
    • +
  • (J)RPGs - Persona, Xenoblade
    • +
  • Visual Novel/Adventure - Danganronpa, AI The Sommnium, 999
    • +

- I'm a student at UC Irvine studying Software Engineering. I daily drive Arch Linux but my WM/DE changes depending on - what I feel like, I mainly use Hyprland and KDE Plasma though. In case you couldn't tell, I watch anime + read manga + - (although these days i mainly just accumulated brainrot from watching twitch streams + vtubers)
+ basically stuff that is heavy on the story

-

games

+

anime/manga

+

+ I pretty much only watch/read slice of life... yuru camp, k-on, nichijou that sorta thing +

+

vtubers

- I mostly play MMOs (FFXIV, PSO2, OSRS), RPGs (Persona, Xenoblade), and [sorta] Visual Novels (AI The Sommnium, Danganronpa, 999). Its basically - mostly story heavy stuff. + mostly watch erina makina (pc), rosemi lovelock (niji), and pavolia reine (holo)

stack

- idk, it changes a lot. i feel like its been mostly Next JS + React + Tailwind CSS serverless lately. but tbh i hop around a lot. whatever seems fun + whatever seems fun (but usually next js + tailwind + flask)

- Not much else to really say... if you want some random technical rambling go to my blog + Not much else to say... if you want some random technical rambling go to my blog

-
- - -
- probably not up to date so click on it and go to lodestone - - -
- -
i miss erinya uuuuuuuuu!!!
-
- - +
+ +
+ +
i miss erinya uuuuuuuuu!!!
+
+ +
+
+
- - -
+ - + + \ No newline at end of file diff --git a/assets/603.webp b/assets/603.webp new file mode 100644 index 0000000..1296b09 Binary files /dev/null and b/assets/603.webp differ diff --git a/assets/aiba.webp b/assets/aiba.webp new file mode 100644 index 0000000..86049ee Binary files /dev/null and b/assets/aiba.webp differ diff --git a/assets/eri.jpg b/assets/eri.jpg new file mode 100644 index 0000000..0993c28 Binary files /dev/null and b/assets/eri.jpg differ diff --git a/assets/gc.jpg b/assets/gc.jpg new file mode 100644 index 0000000..08ed48f Binary files /dev/null and b/assets/gc.jpg differ diff --git a/assets/growing.gif b/assets/growing.gif new file mode 100644 index 0000000..09d0ae2 Binary files /dev/null and b/assets/growing.gif differ diff --git a/assets/rappy.webp b/assets/rappy.webp new file mode 100644 index 0000000..714de31 Binary files /dev/null and b/assets/rappy.webp differ diff --git a/assets/reine.jpg b/assets/reine.jpg new file mode 100644 index 0000000..a9466ba Binary files /dev/null and b/assets/reine.jpg differ diff --git a/assets/skill-issue.gif b/assets/skill-issue.gif new file mode 100644 index 0000000..7ce8fa3 Binary files /dev/null and b/assets/skill-issue.gif differ diff --git a/assets/usami.webp b/assets/usami.webp new file mode 100644 index 0000000..6e1a34e Binary files /dev/null and b/assets/usami.webp differ diff --git a/assets/vuln.jpg b/assets/vuln.jpg new file mode 100644 index 0000000..1cbb192 Binary files /dev/null and b/assets/vuln.jpg differ diff --git a/index.html b/index.html index a9bd853..f197fdd 100644 --- a/index.html +++ b/index.html @@ -7,20 +7,42 @@ + + + +
- - Welcome to pinapelz.moe - +
+
+ welcome to pinapelz.moe +
+
+ rosemi + erina + reine + usami + vuln + gnomechild + rappy + aiba +
+

Navigation

-

-

- +

-

Welcome!

-

- Ahoy! Thanks for visiting! I thought the old Linktree - like site was pretty boring for a - .moe domain, so I took matters into my - own hands and "moeifyed" it! -

-

- Hope you enjoy your stay! - -

+
+

Welcome!

+

+ Ahoy! Thanks for visiting! I thought the old Linktree + like site was pretty boring for a + .moe domain, so I took matters into my + own hands and "moeifyed" it! +

+

+ Hope you enjoy your stay! + +

+
-
-

cool and interesting stuff

-

or at least i think they're pretty cool :( go check them out!

-
    -
  • -

    - Patchwork Archive -

    - A running archive of VTuber music. Trying to archive every - music/cover created by the VTuber community. Over 15K songs/covers - and counting! -
    • -
  • -

    PhaseTracker

    - The UNOFFICIAL Phase Connect subscriber tracker. I know some - people don't like number sites, but I still thought that it would - be awesome to track the growth of one of my favorite VTuber - groups. -
    • -
  • -

    - Malmstone Calculator -

    - A FFXIV Dalamud plugin that helps with calculating how much more - pvp you got left to play before hitting the next level in the - battlepass system. Made it cause I was tired of always having to - use an online calculator and plugging in the numbers manually. -
    • -
  • -

    - DiscordToXIV -

    - A crazy FFXIV plugin that uses BetterDiscord and websockets to - bring Discord messages into your FFXIV game. Now you can feel less - lonely in game. -
    • -
    -

    - wow i'm definetly not seeing a trend with these... the rest of the - stuff is over on my - GitHub! -

    -
+
+
+

Patchwork Radio

+ +
+

Now Playing:

+

Loading... 123

+

plz be patient. radio might be down

+ Powered by Patchwork Archive + +
+
+ Patchwork Archive + Patchwork Archive +
+
+
+
+

GitHub

+

nerdge programming
+ open source stuff 🤓

+ + GitHub Logo + github.com/pinapelz + +
+ +
+

Blog

+

random rambling
+ (sometimes technical stuff)

+ + blog.pinapelz.com + +
+
+

Super Secret Link

+

mystery link for true vtuber degens
+ I'll change it from time to time

+ + 🔒 https://moekyun.me/V8wPmz + +
+
+
+ - what this do again? + pinapelz.moe/ pinapelz.com / phase-tracker.com / + imisserinya.phase-tracker.com / patchwork.moekyun.me / + blog.pinapelz.com / signpost.pinapelz.com / mojibaka.pinapelz.com / + moekyun.me / vtuber-captcha.moekyun.me / + + + + hit counter + +
- + \ No newline at end of file diff --git a/projects.html b/projects.html new file mode 100644 index 0000000..0cb7fd7 --- /dev/null +++ b/projects.html @@ -0,0 +1,190 @@ + + + + + + projects - very cool stuff yep + + + + + + + + +
+
+ + fun stuff (maybe) + +
+
+

Navigation

+ + +
+ Cute Anime GIF +
+ +
+

Contact Me

+

idk maybe you need to reach me for some reason

+ +
+
+ Discord Avatar +
+

+
+ +
+

+
+ +
+
+

cool and interesting stuff

+

or at least i think they're pretty cool :( go check them out!

+
    +
  • +

    + Patchwork Archive +

    +

    + A running archive of VTuber music. Trying to archive every + music/cover created by the VTuber community. Over 15K songs/covers + and counting! +

    +
    + Patchwork Archive 1 + Patchwork Archive 2 +
    +
    • +
  • +

    PhaseTracker

    +
    + PhaseTracker 1 + PhaseTracker 2 +
    +

    + The UNOFFICIAL Phase Connect subscriber tracker. I know some + people don't like number sites, but I still thought that it would + be awesome to track the growth of one of my favorite VTuber + groups. +

    +
    • +
  • +

    + Malmstone Calculator +

    +

    + A FFXIV Dalamud plugin that helps with calculating how much more + pvp you got left to play before hitting the next level in the + battlepass system. Made it cause I was tired of always having to + use an online calculator and plugging in the numbers manually. +

    +
    • +
  • +

    + JHolodex +

    +

    + Its a wrapper for the Holodex API for Java. Uhhh, maybe this will be useful for the 2 people out there + who need VTuber data in their application and are for some forbidden reason choosing Java as the language + to do that in. (i really love jvm) +

    +
    • +
    +

    + yep not seeing a trend here at all... if you like this sorta thing, the rest of it + is over on my + GitHub +

    +
+
+
+ +
+ + what this do again? + +
+
+ +
+ Fullscreen Image +
+ + + + \ No newline at end of file diff --git a/scripts/index.js b/scripts/index.js index a9ddf93..f258952 100644 --- a/scripts/index.js +++ b/scripts/index.js @@ -27,4 +27,103 @@ function fetchDiscordStatus(userId) { statusTextElement.textContent = "Currently: " + statusText[discordStatus]; }) .catch(error => console.error("Error fetching Discord status:", error)); - } \ No newline at end of file + } + +document.addEventListener("DOMContentLoaded", () => { + const quotes = [ + "Give a man a fish, learn him how to eat, give a man- learn a man how to - xQc", + "Yeah I'm GAY, Good at Yugioh - Rosemi Lovelock", + "yipee - Erina Makina", + "Your friend doesn't like Vtubers? Tell your friend to get some taste - Pavolia Reine", + ]; + + function getRandomQuote() { + const randomIndex = Math.floor(Math.random() * quotes.length); + return quotes[randomIndex]; + } + + const quoteElement = document.getElementById("quote"); + quoteElement.innerHTML = `${getRandomQuote()}`; +}); + +function updateClock() { + const clockElement = document.getElementById('clock'); + const now = new Date(); + const hours = String(now.getHours()).padStart(2, '0'); + const minutes = String(now.getMinutes()).padStart(2, '0'); + const seconds = String(now.getSeconds()).padStart(2, '0'); + const day = String(now.getDate()).padStart(2, '0'); + const month = String(now.getMonth() + 1).padStart(2, '0'); + const year = now.getFullYear(); + let message = "good day!"; + if (now.getHours() >= 0 && now.getHours() < 7) { + message = "(you should go to bed)"; + } else if (now.getHours() < 12) { + message = "good morning"; + } else if (now.getHours() >= 12 && now.getHours() < 18) { + message = "afternoon to you!"; + } else if (now.getHours() >= 18) { + message = "evening :)"; + } + clockElement.innerHTML = `${month}/${day}/${year} ${hours}:${minutes}:${seconds} ` + message; +} + +document.addEventListener("DOMContentLoaded", () => { + const images = document.querySelectorAll(".random-float"); + const positions = []; + + images.forEach((img) => { + let randomTop, randomLeft; + let overlap; + + do { + overlap = false; + randomTop = Math.random() * 100; + randomLeft = Math.random() * 100; + if (randomTop > 30 && randomTop < 70) { + overlap = true; + } + if (randomLeft > 30 && randomLeft < 70) { + overlap = true; + } + positions.forEach(pos => { + const distance = Math.sqrt(Math.pow(randomTop - pos.top, 2) + Math.pow(randomLeft - pos.left, 2)); + if (distance < 10) { + overlap = true; + } + }); + } while (overlap); + + positions.push({ top: randomTop, left: randomLeft }); + + const randomDuration = Math.random() * 10 + 3; + + img.style.top = `${randomTop}%`; + img.style.left = `${randomLeft}%`; + img.style.animationDuration = `${randomDuration}s`; + }); +}); + +document.addEventListener('DOMContentLoaded', function() { + function fetchNowPlaying() { + fetch('https://a4.asurahosting.com/api/nowplaying_static/patchworkarchive.json') // Replace with the actual API endpoint + .then(response => response.json()) + .then(data => { + const nowPlaying = data.now_playing.song; + document.getElementById('song-title').textContent = nowPlaying.title; + document.getElementById('song-artist').textContent = nowPlaying.artist; + const songArt = document.getElementById('song-art'); + songArt.src = nowPlaying.art; + songArt.style.display = 'block'; + }) + .catch(error => { + console.error('Error fetching now playing data:', error); + }); + } + + fetchNowPlaying(); + setInterval(fetchNowPlaying, 60000); +}); + +setInterval(updateClock, 1000); +updateClock(); \ No newline at end of file diff --git a/styles/border.webp b/styles/border.webp new file mode 100644 index 0000000..14dca4d Binary files /dev/null and b/styles/border.webp differ diff --git a/styles/clock.css b/styles/clock.css new file mode 100644 index 0000000..a69c22c --- /dev/null +++ b/styles/clock.css @@ -0,0 +1,43 @@ +.clock-widget { + font-size: 2em; + color: #ff69b4; + text-align: center; + margin-top: 20px; + padding: 20px; + border: 2px dashed #ff69b4; + background: #ffe4e1; + border-radius: 15px; + box-shadow: 0 0 10px rgba(255, 105, 180, 0.5); + position: relative; + overflow: hidden; + animation: glitter 3s infinite alternate; + border-width:20px; + padding:10px; + border-style:solid; + border-image: url("https://foollovers.com/mat/plate/pl035-plate-j03.gif") 55 fill round; +} + +.clock-widget::before { + content: ''; + position: absolute; + top: -50%; + left: -50%; + width: 200%; + height: 200%; + background: linear-gradient(135deg, rgba(255, 105, 180, 0.2), rgba(255, 228, 225, 0.2)); + animation: rotate 6s linear infinite; +} + +.clock-widget span { + position: relative; + z-index: 1; +} + +@keyframes rotate { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } +} \ No newline at end of file diff --git a/styles/projects.css b/styles/projects.css new file mode 100644 index 0000000..2db3061 --- /dev/null +++ b/styles/projects.css @@ -0,0 +1,17 @@ +.projects-section { + margin-top: 20px; + padding: 10px; + background: #ffebf0; + border: solid #ffb6c1 2px; +} +.projects-section h3 { + color: #ff69b4; + text-shadow: 1px 1px 2px #fff; +} +.projects-section ul { + list-style-type: disc; + padding-left: 20px; +} +.projects-section ul li { + margin-bottom: 10px; +} diff --git a/styles/styles.css b/styles/styles.css index 8c2bf9c..cfb2d34 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -1,292 +1,395 @@ body { - background: url("bg.webp"); - background-size: - 100px 100px, - 100% 100%; - font-family: "Courier New", monospace; - color: #333; - background-color: pink; - cursor: url("cursor.gif"), auto; + background: url("bg.webp"); + background-size: 100px 100px, 100% 100%; + font-family: "Courier New", monospace; + color: #333; + background-color: pink; + cursor: url("cursor.gif"), auto; } .container { - width: 80%; - margin: 0 auto; - border: dashed pink 3px; - background: white; - padding: 20px; - box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.1); -} -.header { - text-align: center; - font-size: 2em; - color: #ff69b4; - text-shadow: - 1px 1px 2px #fff, - 2px 2px 4px #ffa07a; - animation: glitter 3s infinite alternate; + width: 80%; + margin: 0 auto; + padding: 20px; + border-width: 10px; + border-style: solid; + border-image: url("border.webp") 9 fill round; + z-index: -999; } + .sidebar { - float: left; - width: 25%; - padding: 10px; - margin-top: 30px; - border: solid #ffb6c1 2px; - background: #ffe4e1; - text-align: center; + float: left; + width: 25%; + padding: 10px; + margin-top: 30px; + border: solid #ffb6c1 2px; + background: #ffe4e1; + text-align: center; } .sidebar ul { - list-style-type: none; - padding: 0; - margin: 0; - text-align: center; + list-style-type: none; + padding: 0; + margin: 0; + text-align: center; } .sidebar ul li { - margin-bottom: 10px; + margin-bottom: 2px; } .sidebar ul li a { - color: #ff69b4; - text-decoration: none; + color: #ff69b4; + text-decoration: none; } .sidebar ul li a:hover { - text-decoration: underline; + text-decoration: underline; } .content { - float: right; - width: 70%; - padding: 10px; + float: right; + width: 70%; + padding: 10px; } .footer { - clear: both; - text-align: center; - padding-top: 30px; - margin-top: 20px; - font-size: 0.8em; + clear: both; + text-align: center; + padding-top: 30px; + margin-top: 20px; + font-size: 0.8em; } a { - color: #ff69b4; - text-decoration: none; + color: #ff69b4; + text-decoration: none; } a:hover { - text-decoration: underline; + text-decoration: underline; } .glitter { - color: #ff69b4; - font-weight: bold; - animation: glitter 3s infinite alternate; + color: #ff69b4; + font-weight: bold; + animation: glitter 3s infinite alternate; } @keyframes glitter { - 0% { - color: #ff69b4; - } - 25% { - color: #ff1493; - } - 50% { - color: #db7093; - } - 75% { - color: #ff69b4; - } - 100% { - color: #ffa07a; - } + 0% { + color: #ff69b4; + } + 25% { + color: #ff1493; + } + 50% { + color: #db7093; + } + 75% { + color: #ff69b4; + } + 100% { + color: #ffa07a; + } } .border-img { - max-width: 100%; - border: solid #ff69b4 2px; + max-width: 100%; + border: solid #ff69b4 2px; } marquee { - font-size: 1.2em; - color: #ff69b4; - margin-bottom: 10px; + font-size: 1.2em; + color: #ff69b4; + margin-bottom: 10px; } + blink { - color: #ff1493; - animation: blinker 1.5s linear infinite; + color: #ff1493; + animation: blinker 1.5s linear infinite; } @keyframes blinker { - 50% { - opacity: 0; - } + 50% { + opacity: 0; + } } -.projects-section { - margin-top: 20px; - padding: 10px; - background: #ffebf0; - border: solid #ffb6c1 2px; + +.welcome-box { + border-style: dashed; + border: 2px dashed #ff69b4; + padding: 20px; } -.projects-section h3 { - color: #ff69b4; - text-shadow: 1px 1px 2px #fff; + +.general-section { + margin-top: 20px; + padding: 10px; + background: #ffebf0; + border: solid #ffb6c1 2px; + display: flex; + flex-direction: row; + justify-content: space-between; } -.projects-section ul { - list-style-type: disc; - padding-left: 20px; + +.general-section h3 { + color: #ff69b4; + text-shadow: 1px 1px 2px #fff; } -.projects-section ul li { - margin-bottom: 10px; + +.general-section ul { + list-style-type: disc; + padding-left: 20px; + flex: 1; +} + +.general-section ul li { + margin-bottom: 10px; } .contacts-section { - margin-top: 20px; - padding: 10px; - background: #ffe4e1; - border: solid #ffb6c1 2px; + margin-top: 20px; + padding: 10px; + background: #ffe4e1; + border: solid #ffb6c1 2px; } .contacts-section h3 { - color: #ff69b4; - text-shadow: 1px 1px 2px #fff; + color: #ff69b4; + text-shadow: 1px 1px 2px #fff; } .contacts-section ul { - list-style-type: none; - padding: 0; + list-style-type: none; + padding: 0; } .contacts-section ul li { - margin-bottom: 5px; + margin-bottom: 5px; } .discord-status { - display: flex; - align-items: center; - padding: 15px; - border-radius: 10px; - color: white; - transition: background-color 0.3s ease-in-out; - margin-top: 20px; - margin-bottom: 10px; - background: #7289da; + display: flex; + align-items: center; + padding: 15px; + border-radius: 10px; + color: white; + transition: background-color 0.3s ease-in-out; + margin-top: 20px; + margin-bottom: 10px; + background: #7289da; } .discord-status img { - width: 50px; - height: 50px; - border-radius: 50%; - margin-right: 20px; + width: 50px; + height: 50px; + border-radius: 50%; + margin-right: 20px; } .discord-status h2 { - font-size: 1.2rem; + font-size: 1.2rem; } .discord-status p { - font-size: 1rem; - opacity: 0.8; + font-size: 1rem; + opacity: 0.8; } @keyframes crazy-animation { - 0% { - transform: rotate(0deg) scale(1) translateX(0) skew(0deg) rotateY(0deg); - filter: hue-rotate(0deg) blur(0px); - opacity: 1; - } - 10% { - transform: rotate(30deg) scale(1.3) translateX(10px) skew(10deg) - rotateY(90deg); - filter: hue-rotate(50deg) blur(2px); - opacity: 0.8; - } - 25% { - transform: rotate(45deg) scale(1.5) translateX(20px) skew(-10deg) - rotateY(180deg); - filter: hue-rotate(120deg) blur(4px); - opacity: 0.6; - } - 50% { - transform: rotate(-45deg) scale(0.8) translateX(-30px) skew(15deg) - rotateY(270deg); - filter: hue-rotate(200deg) blur(6px); - opacity: 1; - } - 75% { - transform: rotate(90deg) scale(1.8) translateX(15px) skew(-15deg) - rotateY(360deg); - filter: hue-rotate(300deg) blur(3px); - opacity: 0.7; - } - 100% { - transform: rotate(0deg) scale(1) translateX(0) skew(0deg) rotateY(0deg); - filter: hue-rotate(360deg) blur(0px); - opacity: 1; - } + 0% { + transform: rotate(0deg) scale(1) translateX(0) skew(0deg) rotateY(0deg); + filter: hue-rotate(0deg) blur(0px); + opacity: 1; + } + 10% { + transform: rotate(30deg) scale(1.3) translateX(10px) skew(10deg) + rotateY(90deg); + filter: hue-rotate(50deg) blur(2px); + opacity: 0.8; + } + 25% { + transform: rotate(45deg) scale(1.5) translateX(20px) skew(-10deg) + rotateY(180deg); + filter: hue-rotate(120deg) blur(4px); + opacity: 0.6; + } + 50% { + transform: rotate(-45deg) scale(0.8) translateX(-30px) skew(15deg) + rotateY(270deg); + filter: hue-rotate(200deg) blur(6px); + opacity: 1; + } + 75% { + transform: rotate(90deg) scale(1.8) translateX(15px) skew(-15deg) + rotateY(360deg); + filter: hue-rotate(300deg) blur(3px); + opacity: 0.7; + } + 100% { + transform: rotate(0deg) scale(1) translateX(0) skew(0deg) rotateY(0deg); + filter: hue-rotate(360deg) blur(0px); + opacity: 1; + } } .crazy-image:hover { - animation: crazy-animation 3s ease-in-out infinite; + animation: crazy-animation 3s ease-in-out infinite; } .fullscreen-text { - top: 0; - left: 0; - color: black; - display: flex; - justify-content: center; - align-items: center; - font-size: 2em; - opacity: 0; - visibility: hidden; - transition: - opacity 0.5s, - visibility 0.5s; - z-index: 10; + top: 0; + left: 0; + color: black; + display: flex; + justify-content: center; + align-items: center; + font-size: 2em; + opacity: 0; + visibility: hidden; + transition: opacity 0.5s, visibility 0.5s; + z-index: 10; } .crazy-image:hover + .fullscreen-text { - opacity: 1; - visibility: visible; + opacity: 1; + visibility: visible; } @media (max-width: 1024px) { - .container { - width: 90%; - } + .container { + width: 90%; + } - .main-content { - flex-direction: column; - } + .main-content { + flex-direction: column; + } - .sidebar, - .content { - width: 100%; - } + .sidebar, + .content { + width: 100%; + } } /* Media Queries for Mobile Devices */ @media (max-width: 768px) { - .container { - width: 100%; - padding: 10px; - } - .sidebar, - .content { - float: none; - width: 100%; - margin-top: 10px; - } - .header { - font-size: 1.5em; - } - .footer { - font-size: 0.7em; - } - .discord-status { - flex-direction: column; - align-items: flex-start; - } - .discord-status img { - margin-right: 0; - margin-bottom: 10px; + .container { + width: 100%; + padding: 10px; + } + .sidebar, + .content { + float: none; + width: 100%; + margin-top: 10px; + } + .header { + font-size: 1.5em; + } + .footer { + font-size: 0.7em; + } + .discord-status { + flex-direction: column; + align-items: flex-start; + } + .discord-status img { + margin-right: 0; + margin-bottom: 10px; + } + .discord-status h2 { + font-size: 1rem; + } + .discord-status p { + font-size: 0.9rem; + } +} + +.center { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + text-align: center; +} + +.music-player { + + margin-top: 20px; + padding: 10px; + background: #ffebf0; + border: dotted #ffb6c1 2px; + display: inline-block; + vertical-align: top; +} + +.music-player h3 { + color: #ff69b4; + text-shadow: 1px 1px 2px #fff; + margin-bottom: 10px; + text-align: center; +} + +.music-player audio { + width: 100%; +} + +.now-playing { + margin-top: 10px; + padding: 10px; + text-align: center; +} + +.now-playing h4 { + margin: 0; + font-size: 1.2em; +} + +.now-playing p { + margin: 5px 0; +} + + + + +.header { + position: relative; + text-align: center; + font-size: 2em; + color: #ff69b4; + text-shadow: 1px 1px 2px #fff, 2px 2px 4px #ffa07a; + animation: glitter 3s infinite alternate; + overflow: hidden; + } + + .header-content { + position: relative; + z-index: 1; + } + + .header-animation { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + pointer-events: none; + z-index: -997; + } + + .header-animation img { + position: absolute; + width: 50px; + height: 50px; + opacity: 0.8; + animation: float 5s infinite ease-in-out; + } + + + @keyframes float { + 0% { + transform: translateY(0); } - .discord-status h2 { - font-size: 1rem; + 50% { + transform: translateY(-40px); } - .discord-status p { - font-size: 0.9rem; + 100% { + transform: translateY(0); } -} + } + + marquee { + font-size: 1.2em; + color: #ff69b4; + margin-bottom: 10px; + } \ No newline at end of file -- cgit v1.2.3