v2.exhq.dev/src/App.tsx

118 lines
4.1 KiB
TypeScript
Raw Normal View History

2024-06-23 20:41:02 +02:00
import './App.css'
import HoverComponent from './components/name.tsx'
import AdvancedBr from './components/comps.tsx'
2024-06-26 13:25:12 +02:00
import { createSignal, onMount } from 'solid-js';
import Reviews from './components/api.tsx';
2024-06-26 13:25:12 +02:00
import Music, { MusicEntry } from './components/music.tsx';
export const [shouldpopup, setpopup] = createSignal(false)
export const [ishover, setishover] = createSignal(false)
2024-06-23 20:41:02 +02:00
function App() {
function remov() {
for (let i = 0; i < document.styleSheets.length; i++) {
let styleSheet = document.styleSheets[i];
let rules = styleSheet.cssRules || styleSheet.rules;
for (let j = 0; j < rules.length; j++) {
let rule = rules[j];
if (rule.type === CSSRule.KEYFRAMES_RULE && ((rule as CSSKeyframesRule).name === "slide-left")) {
styleSheet.deleteRule(j);
}
}
}
}
2024-06-26 13:25:12 +02:00
const [musicList, setMusicList] = createSignal<string[]>([]);
const [isLoading, setIsLoading] = createSignal(true);
2024-06-23 20:41:02 +02:00
const [isAnimating, setIsAnimating] = createSignal(false);
const [animatedwoem, setanimatedwoem] = createSignal(false);
2024-06-26 13:25:12 +02:00
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);
}
});
2024-06-23 20:41:02 +02:00
let gitgay = <img onClick={() => {
setIsAnimating(true)
setTimeout(() => {
window.location.href = "https://git.gay/exhq"
}, 200);
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" />
<HoverComponent />
</div>
<p style={{ display: "none" }}>AdvancedBr my beloved</p>
<AdvancedBr count={6} />
<div class='parent'>
<div class='cardchild'>
<h1>link tree</h1>
<div class='linktree'>
{gitgay}
<img onClick={() => {
setanimatedwoem(true)
setTimeout(() => {
window.location.href = "https://woem.men/@exhq"
}, 200);
}} classList={{ 'woemimg': true, 'animate': animatedwoem() }} src="https://woem.men/files/356134d8-df3b-41dc-ac73-c4420442bf3a" alt="LMAO IMAGINE BEING BLIND" />
</div>
<br />
<div class='linktree'>
<span class='gitgaytext' >Git</span>
<span class='woemtext' >Fedi</span>
</div>
</div>
<div style={{
opacity: isAnimating() || animatedwoem() ? "0%" : "100%"
}} class='cardchild'>
<h1>hi :3</h1>
<span>silly goober who does silly stuff <br /> self proclaimed programmer and progamer <br /> shitposts for fun</span>
</div>
2024-06-25 16:14:17 +02:00
<div
2024-06-26 13:25:12 +02:00
onMouseEnter={() => { setishover(true) }}
onmouseleave={() => { setishover(false) }}
style={{
opacity: isAnimating() || animatedwoem() ? "0%" : "100%"
}} class='cardchild'>
2024-06-25 16:14:17 +02:00
<Reviews />
2024-06-23 20:41:02 +02:00
</div>
</div>
2024-06-26 13:25:12 +02:00
<AdvancedBr count={2} />
2024-06-25 16:14:17 +02:00
<div class='easteregg'>
2024-06-26 13:25:12 +02:00
<input type="button" onclick={() => { setpopup(!shouldpopup()) }} class="musicbutton" value="say gex" />
2024-06-25 16:14:17 +02:00
</div>
<AdvancedBr count={3} />
2024-06-26 13:25:12 +02:00
<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>
2024-06-23 20:41:02 +02:00
</>
)
}
export default App