completed page v1

author: Pinapelz <yukais@pinapelz.com> 2024-10-16 01:15:07 -0700
committer: Pinapelz <yukais@pinapelz.com> 2024-10-16 01:15:07 -0700
commit: fe3343e6ca93246b34204b3403fb4c96b87b815c (patch)
tree: 4bfe04073132cfac3fc9d11500c32e97a5ef54e9
parent: b220190474cf073f0938c3be0d95b3a4a70a1e7f (diff)
18 files changed, 804 insertions, 319 deletions
diff --git a/about.html b/about.html
index 23e00e7..ca46165 100644
--- a/about.html
+++ b/about.html
@@ -8,10 +8,13 @@
     <link rel="icon" href="assets/pfp.webp" />
     <link rel="stylesheet" type="text/css" href="styles/styles.css" />
     <script src="scripts/index.js"></script>
+    <style>
+    </style>
   </head>
   <body>
-    <div class="container">
+    <div class="container">     
       <div class="header">
+        
         <marquee behavior="alternate" direction="left">
           About Me
         </marquee>
@@ -20,8 +23,9 @@
       <div class="sidebar">
         <h3>Navigation</h3>
         <ul>
-          <li><a href="/">Home</a></li>
-          <li><a href="/about.html">About Me</a></li>
+          <li><a href="/">home</a></li>
+          <li><a href="/about.html">webmaster</a></li>
+          <li><a href="/projects.html">projects</a></li>
           <li><a href="https://moekyun.me">moeify my link</a></li>
         </ul>
         <img
@@ -54,7 +58,7 @@
             src="https://assets-global.website-files.com/6257adef93867e50d84d30e2/636e0a6ca814282eca7172c6_icon_clyde_white_RGB.svg"
             alt="Discord Avatar"
           />
-          <script>fetchDiscordStatus("246787839570739211");</script>
+          
         <div class="status-container">
             <h2><span class="status-text"></span></h2>
         </div>
@@ -63,42 +67,52 @@
       </div>
 
       <div class="content">
-        <div class="projects-section">
+        <div class="general-section center">
             <h3>info</h3>
+            <ul style="list-style-type: none;">
+                <li>Student at UC Irvine studying Software Engineering</li>
+                <li>Daily drives Arch Linux</li>
+                <li>Mainly on Hyprland and KDE Plasma</li>
+                <li>Watches anime and reads manga</li>
+                <li>Accumulates brainrot from watching Twitch streams and VTubers</li>
+            </ul>
+            <h3>games</h3>
+            <ul style="list-style-type: none;">
+                <li>MMOs - FFXIV, PSO2, OSRS</li>
+                <li>(J)RPGs - Persona, Xenoblade </li>
+                <li>Visual Novel/Adventure - Danganronpa, AI The Sommnium, 999</li>
+            </ul>
             <p>
-            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)<br/>
+              basically stuff that is heavy on the story
             </p>
-            <h3>games</h3>
+            <h3>anime/manga</h3>
+            <p>
+              I pretty much only watch/read slice of life... yuru camp, k-on, nichijou that sorta thing
+            </p>
+            <h3>vtubers</h3>
             <p>
-            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)
             </p>
             <h3>stack</h3>
             <p>
-            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)
             </p>
             <p>
-                Not much else to really say... if you want some random technical rambling go to <a href="https://blog.pinapelz.com">my blog</a>
+                Not much else to say... if you want some random technical rambling go to <a href="https://blog.pinapelz.com">my blog</a>
             </p>
-            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 10px; text-align: center; margin-top: 40px;">
-              <a href="https://na.finalfantasyxiv.com/lodestone/character/30300645/"><img src="assets/xiv.webp" style="width: 100%;"/></a>
-              <img src="assets/pso2.webp" style="width: 100%;"/>
-            </div>
-            probably not up to date so click on it and go to lodestone
-
-            <a href="https://imisserinya.phase-tracker.com">
-            <div style="text-align: center; margin-top: 20px;">
-                <img src="https://files.pinapelz.com/1077804029737975879.webp" width="300px" class="crazy-image"/>
-                <div class="fullscreen-text">i miss erinya uuuuuuuuu!!!</div>
-            </div>
-          </a>
-
+            <div class="center">
+              <a href="https://imisserinya.phase-tracker.com">
+                <div class="center">
+                    <img src="https://files.pinapelz.com/1077804029737975879.webp" width="200px" class="crazy-image"/>
+                    <div class="fullscreen-text">i miss erinya uuuuuuuuu!!!</div>
+                  </div>
+                </a>
+          </div>
+        </div>
+        
       </div>
-
-      
-
     </div>
+    
   </body>
-</html>
+  
+</html>
+\ No newline at end of file
diff --git a/assets/603.webp b/assets/603.webp
new file mode 100644
index 0000000..1296b09
--- /dev/null
+++ b/assets/603.webp
diff --git a/assets/aiba.webp b/assets/aiba.webp
new file mode 100644
index 0000000..86049ee
--- /dev/null
+++ b/assets/aiba.webp
diff --git a/assets/eri.jpg b/assets/eri.jpg
new file mode 100644
index 0000000..0993c28
--- /dev/null
+++ b/assets/eri.jpg
diff --git a/assets/gc.jpg b/assets/gc.jpg
new file mode 100644
index 0000000..08ed48f
--- /dev/null
+++ b/assets/gc.jpg
diff --git a/assets/growing.gif b/assets/growing.gif
new file mode 100644
index 0000000..09d0ae2
--- /dev/null
+++ b/assets/growing.gif
diff --git a/assets/rappy.webp b/assets/rappy.webp
new file mode 100644
index 0000000..714de31
--- /dev/null
+++ b/assets/rappy.webp
diff --git a/assets/reine.jpg b/assets/reine.jpg
new file mode 100644
index 0000000..a9466ba
--- /dev/null
+++ b/assets/reine.jpg
diff --git a/assets/skill-issue.gif b/assets/skill-issue.gif
new file mode 100644
index 0000000..7ce8fa3
--- /dev/null
+++ b/assets/skill-issue.gif
diff --git a/assets/usami.webp b/assets/usami.webp
new file mode 100644
index 0000000..6e1a34e
--- /dev/null
+++ b/assets/usami.webp
diff --git a/assets/vuln.jpg b/assets/vuln.jpg
new file mode 100644
index 0000000..1cbb192
--- /dev/null
+++ b/assets/vuln.jpg
diff --git a/index.html b/index.html
index a9bd853..f197fdd 100644
--- a/index.html
+++ b/index.html
@@ -7,20 +7,42 @@
     <meta name="description" content="moe moe wow why did i make this" />
     <link rel="icon" href="assets/pfp.webp" />
     <link rel="stylesheet" type="text/css" href="styles/styles.css" />
+    <link rel="stylesheet" type="text/css" href="styles/clock.css" />
+    <link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">
     <script src="scripts/index.js"></script>
+    <style>
+      .marquee span {
+        font-family: 'Press Start 2P', cursive;
+        font-size: 25px;
+      }
+    </style>
   </head>
   <body>
+    <script src="/scripts/clock.js"></script>
     <div class="container">
       <div class="header">
-        <marquee behavior="alternate" direction="left">
-          Welcome to pinapelz.moe
-        </marquee>
+        <div class="header-content">
+          <div class="marquee">
+            <span>welcome to pinapelz.moe</span>
+          </div>
+          <div class="header-animation">
+            <img src="/assets/603.webp" alt="rosemi" class="random-float" />
+            <img src="/assets/eri.jpg" alt="erina" class=" random-float" />
+            <img src="/assets/reine.jpg" alt="reine" class="random-float" />
+            <img src="/assets/usami.webp" alt="usami" class="random-float" />
+            <img src="/assets/vuln.jpg" alt="vuln" class="random-float" />
+            <img src="/assets/gc.jpg" alt="gnomechild" class="random-float" />
+            <img src="/assets/rappy.webp" alt="rappy" class="random-float" />
+            <img src="/assets/aiba.webp" alt="aiba" class="random-float" />
+          </div>
+        </div>
       </div>
       <div class="sidebar">
         <h3>Navigation</h3>
         <ul>
-          <li><a href="/">Home</a></li>
-          <li><a href="/about.html">About Me</a></li>
+          <li><a href="/">home</a></li>
+          <li><a href="/about.html">webmaster</a></li>
+          <li><a href="/projects.html">projects</a></li>
           <li><a href="https://moekyun.me">moeify my link</a></li>
         </ul>
         <img
@@ -58,96 +80,93 @@
           </div>
           <script>fetchDiscordStatus("246787839570739211");</script>
         </section>
-        <p id="quote">
-        </p>
-        <script>
-          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 = `<i>${getRandomQuote()}</i>`;
-          });
-        </script>
+        <p id="quote"></p>
       </div>
 
       <div class="content">
-        <h2>Welcome!</h2>
-        <p>
-          <blink>Ahoy!</blink> Thanks for visiting! I thought the old Linktree
-          like site was pretty boring for a
-          <span class="glitter">.moe</span> domain, so I took matters into my
-          own hands and "<span class="glitter">moeifyed</span>" it!
-        </p>
-        <p style="display: flex; align-items: center">
-          Hope you enjoy your stay!
-          <img src="assets/xqcl.webp" width="35px" style="margin-left: 10px" />
-        </p>
+        <div class="welcome-box">
+          <h2>Welcome!</h2>
+          <p>
+            <blink>Ahoy!</blink> Thanks for visiting! I thought the old Linktree
+            like site was pretty boring for a
+            <span class="glitter">.moe</span> domain, so I took matters into my
+            own hands and "<span class="glitter">moeifyed</span>" it!
+          </p>
+          <p style="display: flex; align-items: center">
+            Hope you enjoy your stay!
+            <img
+              src="assets/xqcl.webp"
+              width="35px"
+              style="margin-left: 10px"
+            />
+          </p>
+        </div>
 
-        <div class="projects-section">
-          <h1 style="color: #ff69b4">cool and interesting stuff</h1>
-          <h4>or at least i think they're pretty cool :( go check them out!</h4>
-          <ul>
-            <li>
-              <h2>
-                <a href="https://patchwork.moekyun.me">Patchwork Archive</a>
-              </h2>
-              A running archive of VTuber music. Trying to archive every
-              music/cover created by the VTuber community. Over 15K songs/covers
-              and counting!
-            </li>
-            <li>
-              <h2><a href="https://phase-tracker.com">PhaseTracker</a></h2>
-              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.
-            </li>
-            <li>
-              <h2>
-                <a href="https://github.com/pinapelz/ffxiv-malmstone"
-                  >Malmstone Calculator</a
-                >
-              </h2>
-              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.
-            </li>
-            <li>
-              <h2>
-                <a href="https://github.com/pinapelz/discord-to-xiv"
-                  >DiscordToXIV</a
-                >
-              </h2>
-              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.
-            </li>
-            <br />
-            <p>
-              wow i'm definetly not seeing a trend with these... the rest of the
-              stuff is over on my
-              <a href="https://github.com/pinapelz">GitHub</a>!
-            </p>
-          </ul>
+        <div class="general-section">
+          <div id="music-player" class="music-player">
+            <h3>Patchwork Radio</h3>
+            <audio controls style="width: 100%;">
+              <source src="https://a4.asurahosting.com/listen/patchworkarchive/radio.mp3" type="audio/mpeg" />
+              Your browser does not support the audio element.
+            </audio>
+            <div id="now-playing" class="now-playing">
+              <h4>Now Playing:</h4>
+              <p id="song-title">Loading... 123</p>
+              <p id="song-artist">plz be patient. radio might be down</p>
+              <a href="https://patchwork.moekyun.me/radio">Powered by Patchwork Archive</a>
+
+            </div>
+          </div>
+          <img src="/assets/growing.gif" height=300px alt="Patchwork Archive" class="border-img" />
+          <img src="/assets/skill-issue.gif" height=300px alt="Patchwork Archive" class="border-img" />
+        </div>
+        <div id="clock" class="clock-widget">
         </div>
+        <div class="general-section" style="font-size: 1.1em;">
+          <div>
+            <h3>GitHub</h3>
+            <p>nerdge programming <br/> + open source stuff 🤓</p>
+            <a href="https://github.com/pinapelz">
+              <img src="https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png" alt="GitHub Logo" width="20" height="20" style="vertical-align: middle; margin-right: 5px;">
+              github.com/pinapelz
+            </a>
+          </div>
+        
+          <div>
+            <h3>Blog</h3>
+            <p>random rambling<br/>
+            (sometimes technical stuff)</p>
+            <a href="https://blog.pinapelz.com">
+              blog.pinapelz.com
+            </a>
+          </div>
+          <div>
+            <h3>Super Secret Link</h3>
+            <p>mystery link for true vtuber degens<br/>
+            I'll change it from time to time</p>
+            <a href="https://moekyun.me/V8wPmz">
+              🔒 https://moekyun.me/V8wPmz
+            </a>
+          </div>
+        </div>
+
       </div>
 
       <div class="footer">
+
         <marquee behavior="scroll" direction="right">
-          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 /
         </marquee>
+        
+        <a href="https://nekoweb.org/"><img src="https://nekoweb.org/assets/buttons/button7.gif"></a>
+        <a href="https://linux.org/"><img src="https://adriansblinkiecollection.neocities.org/buttons/a46.jpg"></a>
+        <a href="https://www.cutercounter.com/" target="_blank"><img src="https://www.cutercounter.com/hits.php?id=huxqxocn&nd=6&style=119" border="0" alt="hit counter"></a>
+      
+      
       </div>
     </div>
   </body>
-</html>
+</html>
+\ 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 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>projects - very cool stuff yep</title>
+    <meta name="description" content="moe moe wow why did i make this" />
+    <link rel="icon" href="assets/pfp.webp" />
+    <link rel="stylesheet" type="text/css" href="styles/styles.css" />
+    <link rel="stylesheet" type="text/css" href="styles/projects.css" />
+    <script src="scripts/index.js"></script>
+    <style>
+      .image-container {
+        display: flex;
+        gap: 10px;
+      }
+      .image-container img {
+        cursor: pointer;
+        transition: transform 0.2s;
+      }
+      .image-container img:hover {
+        transform: scale(1.05);
+      }
+      .fullscreen-img {
+        display: none;
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background-color: rgba(0, 0, 0, 0.9);
+        justify-content: center;
+        align-items: center;
+        z-index: 1000;
+      }
+      .fullscreen-img img {
+        max-width: 90%;
+        max-height: 90%;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="container">
+      <div class="header">
+        <marquee behavior="alternate" direction="left">
+          fun stuff (maybe)
+        </marquee>
+      </div>
+      <div class="sidebar">
+        <h3>Navigation</h3>
+        <ul>
+          <li><a href="/">home</a></li>
+          <li><a href="/about.html">webmaster</a></li>
+          <li><a href="/about.html">projects</a></li>
+          <li><a href="https://moekyun.me">moeify my link</a></li>
+        </ul>
+
+        <div class="image-section">
+          <img
+            src="assets/pfp.webp"
+            class="border-img crazy-image"
+            width="250px"
+            alt="Cute Anime GIF"
+          />
+        </div>
+
+        <div class="contacts-section">
+          <h3>Contact Me</h3>
+          <p>idk maybe you need to reach me for some reason</p>
+          <ul>
+            <li>
+              Email:
+              <a href="mailto:pinapelz@moekyun.me">pinapelz@moekyun.me</a>
+            </li>
+            <li>X: <a href="https://x.com/pinapelz">@pinapelz</a></li>
+            <li>
+              Misskey:
+              <a href="https://mk.arks.cafe/@pinapelz"
+                >@pinapelz@mk.arks.cafe</a
+              >
+            </li>
+            <li>Discord: @pinapelz</li>
+          </ul>
+        </div>
+        <section id="discord-status" class="discord-status">
+          <img
+            src="https://assets-global.website-files.com/6257adef93867e50d84d30e2/636e0a6ca814282eca7172c6_icon_clyde_white_RGB.svg"
+            alt="Discord Avatar"
+          />
+          <div class="status-container">
+            <h2><span class="status-text"></span></h2>
+          </div>
+          <script>fetchDiscordStatus("246787839570739211");</script>
+        </section>
+        <p id="quote"></p>
+      </div>
+
+      <div class="content">
+        <div class="projects-section">
+          <h1 style="color: #ff69b4">cool and interesting stuff</h1>
+          <h4>or at least i think they're pretty cool :( go check them out!</h4>
+          <ul>
+            <li>
+              <h2>
+                <a href="https://patchwork.moekyun.me">Patchwork Archive</a>
+              </h2>
+              <p>
+                A running archive of VTuber music. Trying to archive every
+                music/cover created by the VTuber community. Over 15K songs/covers
+                and counting!
+              </p>
+              <div class="image-container">
+                <img src="https://i.postimg.cc/J0R5tZ25/image.png" alt="Patchwork Archive 1" width="250px" />
+                <img src="https://i.postimg.cc/jdmv4wwt/output.gif" alt="Patchwork Archive 2" width="300px" />
+              </div>
+            </li>
+            <li>
+              <h2><a href="https://phase-tracker.com">PhaseTracker</a></h2>
+              <div class="image-container">
+                <img src="https://i.postimg.cc/tgyTKkZk/image.png" alt="PhaseTracker 1" width="300px" />
+                <img src="https://i.postimg.cc/L6VSwSSq/image.png" alt="PhaseTracker 2" width="300px" />
+              </div>
+              <p>
+                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.
+              </p>
+            </li>
+            <li>
+              <h2>
+                <a href="https://github.com/pinapelz/ffxiv-malmstone"
+                  >Malmstone Calculator</a
+                >
+              </h2>
+              <p>
+                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.
+              </p>
+            </li>
+            <li>
+              <h2>
+                <a href="https://github.com/pinapelz/JHolodex"
+                  >JHolodex</a
+                >
+              </h2>
+              <p>
+                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)
+              </p>
+            </li>
+            <br />
+            <p>
+            yep not seeing a trend here at all... if you like this sorta thing, the rest of it
+              is over on my
+              <a href="https://github.com/pinapelz">GitHub</a>
+            </p>
+          </ul>
+        </div>
+      </div>
+
+      <div class="footer">
+        <marquee behavior="scroll" direction="right">
+          what this do again?
+        </marquee>
+      </div>
+    </div>
+
+    <div class="fullscreen-img" id="fullscreenImg">
+      <img src="" alt="Fullscreen Image" />
+    </div>
+
+    <script>
+      document.querySelectorAll('.image-container img').forEach(img => {
+        img.addEventListener('click', function() {
+          const fullscreenImg = document.getElementById('fullscreenImg');
+          fullscreenImg.style.display = 'flex';
+          fullscreenImg.querySelector('img').src = this.src;
+        });
+      });
+
+      document.getElementById('fullscreenImg').addEventListener('click', function() {
+        this.style.display = 'none';
+      });
+    </script>
+  </body>
+</html>
+\ 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 = `<i>${getRandomQuote()}</i>`;
+});
+
+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 = `<span>${month}/${day}/${year} ${hours}:${minutes}:${seconds}</span> ` + 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
--- /dev/null
+++ b/styles/border.webp
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
author	Pinapelz <yukais@pinapelz.com>	2024-10-16 01:15:07 -0700
committer	Pinapelz <yukais@pinapelz.com>	2024-10-16 01:15:07 -0700
commit	fe3343e6ca93246b34204b3403fb4c96b87b815c (patch)
tree	4bfe04073132cfac3fc9d11500c32e97a5ef54e9
parent	b220190474cf073f0938c3be0d95b3a4a70a1e7f (diff)