This commit is contained in:
amy 2024-06-26 14:55:12 +03:30
parent 023379feda
commit 75b90c579a
4 changed files with 199 additions and 12 deletions

View file

@ -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 { .actualreviewdiv {
overflow-y: scroll; overflow-y: scroll;
height: 18em; height: 18em;
} }
.cardchild:hover + .actualreviewdiv { .cardchild:hover+.actualreviewdiv {
transition: 1s; transition: 1s;
transform: rotateY(100); transform: rotateY(100);
} }
@ -46,6 +124,7 @@
.cardchild p { .cardchild p {
margin-bottom: -1.5em; margin-bottom: -1.5em;
} }
.cardchild a { .cardchild a {
font-size: 1.5em; font-size: 1.5em;
text-align: center; text-align: center;
@ -54,6 +133,7 @@
margin-bottom: 0%; margin-bottom: 0%;
animation: spawntop 1s; animation: spawntop 1s;
} }
.cardchild span { .cardchild span {
font-size: 1.5em; font-size: 1.5em;
} }
@ -144,6 +224,34 @@
align-items: flex-start; 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 { .reviewinfo {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -239,6 +347,7 @@
opacity: 0%; opacity: 0%;
transform: translateY(100em); transform: translateY(100em);
} }
100% { 100% {
opacity: 100%; opacity: 100%;
transform: translateY(0); transform: translateY(0);

View file

@ -1,9 +1,11 @@
import './App.css' import './App.css'
import HoverComponent from './components/name.tsx' import HoverComponent from './components/name.tsx'
import AdvancedBr from './components/comps.tsx' import AdvancedBr from './components/comps.tsx'
import { createSignal } from 'solid-js'; import { createSignal, onMount } from 'solid-js';
import Reviews from './components/api.tsx'; 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 App() {
function remov() { function remov() {
for (let i = 0; i < document.styleSheets.length; i++) { 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 [isAnimating, setIsAnimating] = createSignal(false);
const [animatedwoem, setanimatedwoem] = 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={() => { let gitgay = <img onClick={() => {
setIsAnimating(true) setIsAnimating(true)
setTimeout(() => { setTimeout(() => {
@ -28,7 +42,6 @@ function App() {
gitgay.src = "/gaybackground.png" 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 }} classList={{ 'gitgayimg': true, 'animate': isAnimating(), 'gaybackground': isAnimating() }} src="https://git.gay/assets/img/logo.png" alt="LMAO IMAGINE BEING BLIND" /> as HTMLImageElement
return ( return (
<> <>
<div class='header'> <div class='header'>
<img onmouseenter={remov} src="https://dp.nea.moe/avatar/712639419785412668.png" class="logo-pfp" alt="LMAO IMAGINE BEING BLIND" /> <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>
<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 /> <Reviews />
</div> </div>
</div> </div>
<AdvancedBr count={2}/> <AdvancedBr count={2} />
<div class='easteregg'> <div class='easteregg'>
<input type="text" name="bals?" class='theeaster'/> <input type="button" onclick={() => { setpopup(!shouldpopup()) }} class="musicbutton" value="say gex" />
</div> </div>
<AdvancedBr count={3} /> <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>
</> </>
) )
} }

42
src/components/music.tsx Normal file
View file

@ -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>
)}</>
)
}

View file

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