amy 2024-09-10 02:13:23 +03:30
parent 9c12845306
commit b2e6ac610f
6 changed files with 72 additions and 16 deletions

View file

@ -307,6 +307,8 @@
border-radius: 25%; border-radius: 25%;
margin-right: 1em; margin-right: 1em;
vertical-align: middle; vertical-align: middle;
}
.initialanim {
animation: slide-left 1.5s; animation: slide-left 1.5s;
} }

View file

@ -1,5 +1,5 @@
import './App.css' import './App.css'
import AdvancedBr from './components/comps.tsx' import { AdvancedBr, SingularOomfie } from './components/comps.tsx'
import { createSignal, onMount } from 'solid-js'; import { createSignal, onMount } from 'solid-js';
import Reviews from './components/api.tsx'; import Reviews from './components/api.tsx';
import Music, { MusicEntry } from './components/music.tsx'; import Music, { MusicEntry } from './components/music.tsx';
@ -41,8 +41,8 @@ function nyaboom() {
(node as Element).textContent = '' (node as Element).textContent = ''
node.parentElement?.appendChild(<img style={{ node.parentElement?.appendChild(<img style={{
width: "1.5em" width: "1.5em"
}} src="./explod.gif"/> as Element) }} src="./explod.gif" /> as Element)
} else if (node instanceof HTMLImageElement){ } else if (node instanceof HTMLImageElement) {
node.src = "./explod.gif" node.src = "./explod.gif"
} }
else { else {
@ -56,6 +56,7 @@ function App() {
const [musicList, setMusicList] = createSignal<string[]>([]); const [musicList, setMusicList] = createSignal<string[]>([]);
const [isLoading, setIsLoading] = createSignal(true); const [isLoading, setIsLoading] = createSignal(true);
const [oomfies, setoomfies] = createSignal(<>oomfies</>)
const [isAnimating, setIsAnimating] = createSignal(false); const [isAnimating, setIsAnimating] = createSignal(false);
const [animatedwoem, setanimatedwoem] = createSignal(false); const [animatedwoem, setanimatedwoem] = createSignal(false);
onMount(async () => { onMount(async () => {
@ -78,12 +79,6 @@ function App() {
}} classList={{ 'gitgayimg': true, 'animate': isAnimating(), 'gaybackground': isAnimating() }} src="https://git.lgbt/assets/img/logo.png" alt="LMAO IMAGINE BEING BLIND" /> as HTMLImageElement }} classList={{ 'gitgayimg': true, 'animate': isAnimating(), 'gaybackground': isAnimating() }} src="https://git.lgbt/assets/img/logo.png" alt="LMAO IMAGINE BEING BLIND" /> as HTMLImageElement
return ( return (
<> <>
{/* <div onmouseenter={remov} class='header'>
<div>
<Normalpfp />
</div>
<HoverComponent />
</div> */}
{isitmybd() ? <Bdpfp /> : <Normalpfp />} {isitmybd() ? <Bdpfp /> : <Normalpfp />}
<p style={{ display: "none" }}>AdvancedBr my beloved</p> <p style={{ display: "none" }}>AdvancedBr my beloved</p>
@ -133,13 +128,25 @@ function App() {
"max-width": "1.5em" "max-width": "1.5em"
}} src="https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/72x72/1f525.png" /> }} src="https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/72x72/1f525.png" />
</div> </div>
<div class="musicbutton" onclick={(e) => {
setoomfies(
<>
<SingularOomfie name='nea' discordid='310702108997320705' url='https://nea.moe'></SingularOomfie>
<SingularOomfie name='vozy' discordid='359175647257690113' url='https://vozy.exhq.dev'></SingularOomfie>
<SingularOomfie name='ushie' discordid='399862294143696897' url='https://ushie.dev/'></SingularOomfie>
<SingularOomfie name='hazel' discordid='435026627907420161' url='https://yellows.ink/'></SingularOomfie>
<SingularOomfie name='mugman' discordid='601836455006044163' url='https://mugman.tech'></SingularOomfie>
<SingularOomfie name='llsc' discordid='381538809180848128' url='https://llsc12.me/'></SingularOomfie>
</>
)
}}> {oomfies()}</div>
<div class="musicbutton" onclick={vivsiepop}> <div class="musicbutton" onclick={vivsiepop}>
<p>echo if it was written by vivsiepop</p> <p>echo if it was written by vivsiepop</p>
</div> </div>
<div class="musicbutton" onclick={() => { <div class="musicbutton" onclick={() => {
if (explodcount > 5) { if (explodcount > 5) {
document.body.innerHTML = "" document.body.innerHTML = ""
setTimeout(() => {alert("sorry bud, you exploded so much that my document.body is gon")}, 500) setTimeout(() => { alert("sorry bud, you exploded so much that my document.body is gon") }, 500)
} else { } else {
new Audio("./explod.mp3").play() new Audio("./explod.mp3").play()
nyaboom() nyaboom()

9
src/components/comps.css Normal file
View file

@ -0,0 +1,9 @@
.tooltip:hover {
max-width: 4em !important;
}
.tooltip {
animation: ease-in-out 2s infinite;
padding: 1em;
}

View file

@ -1,6 +1,14 @@
import "./comps.css"
// warning: this IS horrible code. its a joke. DO NOT try this at home because // warning: this IS horrible code. its a joke. DO NOT try this at home because
// your local senior programmer CAN and WILL hunt you down // your local senior programmer CAN and WILL hunt you down
// you have been warned. // you have been warned.
export default function AdvancedBr({count}:{count:number}) { export function AdvancedBr({ count }: { count: number }) {
return new Array(count).fill(null).map(_=>(<br/>)) return new Array(count).fill(null).map(_ => (<br />))
}
export function SingularOomfie({ name, url, discordid }: { name: string, url: string, discordid: string }) {
return <a href={url}><img class="tooltip" style={{
"max-width": "3em",
"border-radius": "30%"
}} src={`https://dp.nea.moe/avatar/${discordid}.png`} alt="LMAO IMAGINE BEING BLIND" /> </a>
} }

View file

@ -2,6 +2,19 @@
position: relative; position: relative;
} }
@keyframes rotateAnimation {
from {
transform: rotateY(0deg);
}
to {
transform: rotateY(360deg);
}
}
.rotate {
animation: rotateAnimation 0.5s ease-in-out forwards;
}
.header .bd { .header .bd {
flex-direction: column; flex-direction: column;
margin-left: 10em; margin-left: 10em;

View file

@ -27,7 +27,24 @@ export function Bdpfp() {
export function Normalpfp() { export function Normalpfp() {
return <div class="birthdayparent header normal"> return <div class="birthdayparent header normal">
<img src="https://dp.nea.moe/avatar/712639419785412668.png" alt="LMAO IMAGINE BEING BLIND" /> <img class="initialanim" src="https://dp.nea.moe/avatar/712639419785412668.png" alt="LMAO IMAGINE BEING BLIND" onMouseEnter={(e) => {
(e.target as HTMLImageElement).animate([
{ transform: "rotateZ(0deg)" },
{ transform: "rotateZ(360deg)" },
], {
duration: 400,
iterations: 1,
})
}} onClick={(e) => {
(e.target as HTMLImageElement).animate([
{ transform: "rotateY(0deg)" },
{ transform: "rotateY(360deg)" },
], {
duration: 150,
iterations: 1,
})
console.log("balls");
}} />
<HoverComponent /> <HoverComponent />
</div> </div>