tuaaaaa
This commit is contained in:
parent
023379feda
commit
75b90c579a
4 changed files with 199 additions and 12 deletions
111
src/App.css
111
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);
|
||||
|
|
|
|||
52
src/App.tsx
52
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)}}
|
||||
onmouseleave={() => {setishover(false)}}
|
||||
style={{
|
||||
opacity: isAnimating() || animatedwoem() ? "0%" : "100%"
|
||||
}} class='cardchild'>
|
||||
onMouseEnter={() => { setishover(true) }}
|
||||
onmouseleave={() => { setishover(false) }}
|
||||
style={{
|
||||
opacity: isAnimating() || animatedwoem() ? "0%" : "100%"
|
||||
}} 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>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
42
src/components/music.tsx
Normal file
42
src/components/music.tsx
Normal 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>
|
||||
)}</>
|
||||
)
|
||||
}
|
||||
|
|
@ -11,6 +11,12 @@ export function removethething() {
|
|||
}
|
||||
}
|
||||
|
||||
// export interface song {
|
||||
// entitiesByUniqueId: {
|
||||
|
||||
// }
|
||||
// }
|
||||
|
||||
export async function getLatestItems(apiUrl: string) {
|
||||
try {
|
||||
const response = await fetch(apiUrl);
|
||||
|
|
|
|||
Loading…
Reference in a new issue