tuaaaaa

src/App.css

@@ -13,12 +13,90 @@
 
 }
 
+.musicartist {
+  font-weight: bolder;
+  margin-bottom: .5em;
+}
+
+.musicbutton {
+  background-color: #272525;
+  color: pink;
+  font-family: Roboto, sans-serif;
+  font-weight: 500;
+  font-size: 14px;
+  padding: 10px 30px;
+  box-shadow: none;
+  border-radius: 5px;
+  transition: 639ms;
+  transform: translateY(0);
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  cursor: pointer;
+  border: none;
+}
+
+.musicdiv {
+  background-color: rgba(0, 0, 0, 0.731);
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1500;
+}
+
+.music-close-button-div {
+  display: flex;
+  justify-content: end;
+}
+
+.close-button {
+  margin: 1em;
+}
+
+.musiclist {
+  display: flex;
+  justify-content: space-around;
+  font-size: larger;
+  flex-wrap: wrap;
+  height: 80%;
+  overflow-x: scroll;
+}
+
+.innermusic {
+  width: 50%;
+  height: 50%;
+  border-radius: 2%;
+  background: rgb(100, 98, 98);
+  z-index: 1000;
+}
+
+.musicbutton:hover {
+  border-radius: 5px;
+  transition: 639ms;
+  padding: 10px 30px;
+  transform: translateY(-1px);
+  border: none;
+  box-shadow: 0 0 534px -3px rgba(250, 236, 236, 0.4);
+  -webkit-box-shadow: 0 0 534px -3px rgba(250, 236, 236, 0.4);
+  -moz-box-shadow: 0 0 534px -3px rgba(250, 236, 236, 0.4);
+  background-color: #5e5a5a;
+  animation: big 500ms infinite;
+  transform: translateY(-0.3em);
+  transition: background-color 1s, transform .5s, box-shadow .5s, -webkit-box-shadow .5s, -moz-box-shadow 0.5s;
+}
+
+
 .actualreviewdiv {
   overflow-y: scroll;
   height: 18em;
 }
 
-.cardchild:hover + .actualreviewdiv {
+.cardchild:hover+.actualreviewdiv {
   transition: 1s;
   transform: rotateY(100);
 }
@@ -46,6 +124,7 @@
 .cardchild p {
   margin-bottom: -1.5em;
 }
+
 .cardchild a {
   font-size: 1.5em;
   text-align: center;
@@ -54,6 +133,7 @@
   margin-bottom: 0%;
   animation: spawntop 1s;
 }
+
 .cardchild span {
   font-size: 1.5em;
 }
@@ -144,6 +224,34 @@
   align-items: flex-start;
 }
 
+.cssishard {
+  background-color: #121212;
+}
+
+.singlemusic {
+  max-width: 15em;
+  margin: 1em;
+  border-radius: 3%;
+  background-color: #5e5a5a ;
+  display: flex;
+  align-items: flex-start;
+}
+
+.singlemusic img {
+  max-width: 5em;
+}
+
+.innermusic {
+  display: flex;
+  flex-direction: column;
+}
+
+.reviewname {
+  margin-bottom: 0.1em;
+  font-weight: bolder;
+}
+
+
 .reviewinfo {
   display: flex;
   flex-direction: column;
@@ -239,6 +347,7 @@
     opacity: 0%;
     transform: translateY(100em);
   }
+
   100% {
     opacity: 100%;
     transform: translateY(0);

src/App.tsx

@@ -1,9 +1,11 @@
 import './App.css'
 import HoverComponent from './components/name.tsx'
 import AdvancedBr from './components/comps.tsx'
-import { createSignal } from 'solid-js';
+import { createSignal, onMount } from 'solid-js';
 import Reviews from './components/api.tsx';
-export const [ishover, setishover]= createSignal(false)
+import Music, { MusicEntry } from './components/music.tsx';
+export const [shouldpopup, setpopup] = createSignal(false)
+export const [ishover, setishover] = createSignal(false)
 function App() {
   function remov() {
     for (let i = 0; i < document.styleSheets.length; i++) {
@@ -17,9 +19,21 @@ function App() {
       }
     }
   }
-
+  const [musicList, setMusicList] = createSignal<string[]>([]);
+  const [isLoading, setIsLoading] = createSignal(true);
   const [isAnimating, setIsAnimating] = createSignal(false);
   const [animatedwoem, setanimatedwoem] = createSignal(false);
+  onMount(async () => {
+    try {
+      const response = await fetch("https://imtoolazytomakeaproperapi.exhq.dev/");
+      const data = await response.json();
+      setMusicList(data);
+    } catch (error) {
+      console.error("Error fetching music data:", error);
+    } finally {
+      setIsLoading(false);
+    }
+  });
   let gitgay = <img onClick={() => {
     setIsAnimating(true)
     setTimeout(() => {
@@ -28,7 +42,6 @@ function App() {
     gitgay.src = "/gaybackground.png"
   }} classList={{ 'gitgayimg': true, 'animate': isAnimating(), 'gaybackground': isAnimating() }} src="https://git.gay/assets/img/logo.png" alt="LMAO IMAGINE BEING BLIND" /> as HTMLImageElement
   return (
-
     <>
       <div class='header'>
         <img onmouseenter={remov} src="https://dp.nea.moe/avatar/712639419785412668.png" class="logo-pfp" alt="LMAO IMAGINE BEING BLIND" />
@@ -67,19 +80,36 @@ function App() {
         </div>
 
         <div
-        onMouseEnter={()=> {setishover(true)}}
+          onMouseEnter={() => { setishover(true) }}
-        onmouseleave={() => {setishover(false)}}
+          onmouseleave={() => { setishover(false) }}
-        style={{
+          style={{
-          opacity: isAnimating() || animatedwoem() ? "0%" : "100%"
+            opacity: isAnimating() || animatedwoem() ? "0%" : "100%"
-        }} class='cardchild'>
+          }} class='cardchild'>
           <Reviews />
         </div>
       </div>
-      <AdvancedBr count={2}/>
+      <AdvancedBr count={2} />
       <div class='easteregg'>
-          <input type="text" name="bals?"  class='theeaster'/>
+        <input type="button" onclick={() => { setpopup(!shouldpopup()) }} class="musicbutton" value="say gex" />
+
       </div>
       <AdvancedBr count={3} />
+      <Music shouldpopup={shouldpopup}>
+        <div class='musicdiv'>
+          <div class='innermusic'>
+            <div class="music-close-button-div">
+              <button class="close-button" onClick={() => { setpopup(false) }}>X</button>
+            </div>
+            <div class='musiclist'>
+              {isLoading() ? (
+                <p>Loading...</p>
+              ) : (
+                musicList().map((link) => <MusicEntry spotifylink={link} />)
+              )}
+            </div>
+          </div>
+        </div>
+      </Music>
     </>
   )
 }

src/components/music.tsx

@@ -0,0 +1,42 @@
+import { createSignal, onMount } from "solid-js";
+
+export default function Music(props: { shouldpopup: () => boolean, children: any }) {
+    return <div style={{
+        position: "absolute",
+        display: props.shouldpopup() ? "block" : "none"
+    }}>
+        {props.children}
+    </div>
+}
+
+export function MusicEntry({ spotifylink }: { spotifylink: string }) {
+    const [musicInfo, setMusicInfo] = createSignal({}) as any;
+    const [isLoading, setIsLoading] = createSignal(true);
+    onMount(async () => {
+        try {
+            const apiresponse = await fetch(`https://api.song.link/v1-alpha.1/links?url=spotify%253Atrack%253A${spotifylink}`)
+            const data = await apiresponse.json()
+            console.log(data)
+            setMusicInfo(data)
+        } catch (error) {
+            console.error("Error fetching music data from song.link:", error);
+        } finally {
+            setIsLoading(false);
+        }
+    })
+    return (
+        <>{isLoading() ? (
+            <p>Loading...</p>
+        ) : (
+            <div class="singlemusic">
+                <a href={musicInfo().pageUrl}><img  style={{
+                    "margin-right": "0.5em"
+                }}  src={musicInfo().entitiesByUniqueId[`SPOTIFY_SONG::${spotifylink}`]?.thumbnailUrl} alt="LMAO IMAGINE BEING BLIND" /></a>
+                <div class="innersinglemusic">
+                    <div class="musicartist" > {musicInfo().entitiesByUniqueId[`SPOTIFY_SONG::${spotifylink}`]?.artistName}</div>
+                    <div class="musictitle"> {musicInfo().entitiesByUniqueId[`SPOTIFY_SONG::${spotifylink}`]?.title} </div>
+                </div>
+            </div>
+        )}</>
+    )
+}

src/components/utils.ts

@@ -11,6 +11,12 @@ export function removethething() {
     }
 }
 
+// export interface song {
+//   entitiesByUniqueId: {
+
+//   }
+// }
+
 export async function getLatestItems(apiUrl: string) {
   try {
     const response = await fetch(apiUrl);