From fa8f60dcdd787365850ed19ecde4a83ce4f34714 Mon Sep 17 00:00:00 2001 From: amy Date: Fri, 25 Oct 2024 19:23:34 +0330 Subject: [PATCH] i miss otachan --- src/App.css | 471 +++++++++++++++++----------------- src/App.tsx | 2 +- src/components/api.tsx | 54 ++-- src/components/cumbrainz.css | 6 + src/components/cumbrainz.tsx | 65 +++++ src/components/middlecard.css | 11 + src/components/middlecard.tsx | 43 ++-- 7 files changed, 375 insertions(+), 277 deletions(-) create mode 100644 src/components/cumbrainz.css create mode 100644 src/components/cumbrainz.tsx create mode 100644 src/components/middlecard.css diff --git a/src/App.css b/src/App.css index 0a01657..91eaac4 100644 --- a/src/App.css +++ b/src/App.css @@ -1,403 +1,406 @@ :root { - -webkit-touch-callout: none; - -webkit-user-select: none; - -khtml-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - /* browsers agreeing on stuff challenge (impossible) */ - background-color: #121212; - font-family: monospace; - overflow-x: hidden; - color: #ffc8dd; + -webkit-touch-callout: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + /* browsers agreeing on stuff challenge (impossible) */ + background-color: #121212; + font-family: monospace; + overflow-x: hidden; + color: #ffc8dd; } .footer a { - color: #cdb4db; + color: #cdb4db; } .footer { - position: fixed; - bottom: 0; - left: 0; - margin: 10px; - z-index: 1000; + position: fixed; + bottom: 0; + left: 0; + margin: 10px; + z-index: 1000; } .musicartist { - font-weight: bolder; - margin-bottom: .5em; + 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-wrap: wrap; - flex-direction: row; - align-items: center; - cursor: pointer; - border: none; - margin: 1em; + 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-wrap: wrap; + flex-direction: row; + align-items: center; + cursor: pointer; + border: none; + margin: 1em; } .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; + 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; + display: flex; + justify-content: end; } .close-button { - padding: 2; - border: none; - background: none; - border-radius: 2px; - background-color: #5e5a5a; - text-decoration: none; - color: pink; - cursor: pointer; - margin: 1em; + padding: 2; + border: none; + background: none; + border-radius: 2px; + background-color: #5e5a5a; + text-decoration: none; + color: pink; + cursor: pointer; + margin: 1em; } .musiclist { - display: flex; - justify-content: space-around; - font-size: larger; - flex-wrap: wrap; - height: 80%; - overflow-x: scroll; + 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: #121212; - z-index: 1000; + width: 50%; + height: 50%; + border-radius: 2%; + background: #121212; + 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; + 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; + overflow-y: scroll; + height: 18em; } -.cardchild:hover+.actualreviewdiv { - transition: 1s; - transform: rotateY(100); +.cardchild:hover + .actualreviewdiv { + transition: 1s; + transform: rotateY(100); } .header { - margin-top: 6em; - display: flex; - align-items: center; - justify-content: center; + margin-top: 6em; + display: flex; + align-items: center; + justify-content: center; } -.cardchild h1 { - font-size: 3em; - text-align: center; +.cardchild h1:not(:has(.listeningto)) { + font-size: 3em; + text-align: center; } .reviewheadertext { - margin-bottom: -.2em; + margin-bottom: -.2em; } .cardchild p { - margin-bottom: -1.5em; + margin-bottom: -1.5em; } .cardchild a { - font-size: 1.5em; - text-align: center; - color: pink; - text-decoration: underline; - margin-bottom: 0%; - animation: spawntop 1s; + font-size: 1.5em; + text-align: center; + color: pink; + text-decoration: underline; + margin-bottom: 0%; + .fadein { + animation: spawntop 1s; + } } .cardchild span { - font-size: 1.5em; + font-size: 1.5em; } .cardchild img { - max-width: 5em; - margin: 0.5em; + max-width: 5em; + margin: 0.5em; } .cardchild:hover::-webkit-scrollbar { - display: none; + display: none; } /* CAN BROWSERS JUST AGREE ON ONE FUCKING THING */ .cardchild { - -ms-overflow-style: none; - scrollbar-width: none; - cursor: default; - background-color: #272525; - border-radius: 5%; - width: 25em; - height: 25em; - margin-top: 1em; - padding: 0.5em 5em 2em 5em; - transform: translateY(-0em); - transition: background-color 1s, transform .5s, box-shadow .5s, -webkit-box-shadow .5s, -moz-box-shadow 0.5s; + -ms-overflow-style: none; + scrollbar-width: none; + cursor: default; + background-color: #272525; + border-radius: 5%; + width: 25em; + height: 25em; + margin-top: 1em; + padding: 0.5em 5em 2em 5em; + transform: translateY(-0em); + transition: background-color 1s, transform .5s, box-shadow .5s, -webkit-box-shadow .5s, -moz-box-shadow 0.5s; } .theeaster { - color: pink; - padding: 8px; - font-size: 21px; - text-align: center; - border-width: 0; - background-color: #5555557a; - border-style: solid; - border-radius: 11px; + color: pink; + padding: 8px; + font-size: 21px; + text-align: center; + border-width: 0; + background-color: #5555557a; + border-style: solid; + border-radius: 11px; } .theeaster:focus { - border-color: pink; - 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); - transition: .5s; + border-color: pink; + 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); + transition: .5s; } .easteregg { - display: flex; - flex-wrap: wrap; - justify-content: center; + display: flex; + flex-wrap: wrap; + justify-content: center; } .easteregginner { - width: 70%; - background-color: #272525; - height: 10em; + width: 70%; + background-color: #272525; + height: 10em; } .cardchild:hover { - 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; + 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; } .linktree { - display: flex; - justify-content: space-around; + display: flex; + justify-content: space-around; } .linktree img { - cursor: pointer; + cursor: pointer; } .singlereview img { - border-radius: 12%; + border-radius: 12%; } .singlereview { - margin: 1em; - border-radius: 3%; - background-color: #00000040; - display: flex; - align-items: flex-start; + margin: 1em; + border-radius: 3%; + background-color: #00000040; + display: flex; + align-items: flex-start; } .cssishard { - background-color: #121212; + background-color: #121212; } .singlemusic { - cursor: pointer; - min-width: 15em; - max-width: 15em; - margin: 1em; - padding: 1em; - border-radius: 3%; - background-color: #272525; - display: flex; - align-items: flex-start; + cursor: pointer; + min-width: 15em; + max-width: 15em; + word-wrap: anywhere; + margin: 1em; + padding: 1em; + border-radius: 3%; + background-color: #272525; + display: flex; + align-items: flex-start; } .singlemusic img { - max-width: 5em; + max-width: 5em; } .innermusic { - display: flex; - flex-direction: column; + display: flex; + flex-direction: column; } .reviewname { - margin-bottom: 0.1em; - font-weight: bolder; + margin-bottom: 0.1em; + font-weight: bolder; } .reviewinfo { - display: flex; - flex-direction: column; + display: flex; + flex-direction: column; } .reviewname { - margin-bottom: 0.1em; - font-weight: bolder; + margin-bottom: 0.1em; + font-weight: bolder; } .parent { - width: 100%; - height: 100%; - display: flex; - flex-wrap: wrap; - justify-content: space-evenly; + width: 100%; + height: 100%; + display: flex; + flex-wrap: wrap; + justify-content: space-evenly; } .header h1 { - font-size: 3.6em; - color: blanchedalmond; - display: inline-table; + font-size: 3.6em; + color: blanchedalmond; + display: inline-table; } .cardchild h2 { - display: inline-table; - vertical-align: text-bottom; + display: inline-table; + vertical-align: text-bottom; } .header h1:not(:active) { - animation: slide-right 1.5s; + animation: slide-right 1.5s; } .header h1:hover { - animation: shake 10ms infinite; + animation: shake 10ms infinite; } .header img { - border-radius: 25%; - margin-right: 1em; - vertical-align: middle; + border-radius: 25%; + margin-right: 1em; + vertical-align: middle; } .initialanim { - animation: slide-left 1.5s; + animation: slide-left 1.5s; } .gaybackground { - background-image: url("/gaybackground.png"); + background-image: url("/gaybackground.png"); } .animate { - z-index: 10000000; - transform: scale(10000); - transition: 20s; + z-index: 10000000; + transform: scale(10000); + transition: 20s; } @keyframes slide-left { - from { - transform: translateX(-10000em); - } + from { + transform: translateX(-10000em); + } - to { - transform: translateX(0); - } + to { + transform: translateX(0); + } } @keyframes slide-right { - from { - transform: translateX(10000em); - } + from { + transform: translateX(10000em); + } - to { - transform: translateX(0); - } + to { + transform: translateX(0); + } } @keyframes bigsmall { - 0% { - max-width: 10em; - } + 0% { + max-width: 10em; + } - 50% { - width: 10.5em; - max-width: 10.5em; - } + 50% { + width: 10.5em; + max-width: 10.5em; + } - 100% { - max-width: 10em; - } + 100% { + max-width: 10em; + } } @keyframes spawntop { - 0% { - opacity: 0%; - transform: translateY(100em); - } + 0% { + opacity: 0%; + transform: translateY(1em); + } - 100% { - opacity: 100%; - transform: translateY(0); - } + 100% { + opacity: 100%; + transform: translateY(0); + } } @keyframes shake { - 0% { - transform: translate(0, 0) rotate(0deg); - } + 0% { + transform: translate(0, 0) rotate(0deg); + } - 25% { - transform: translate(5px, 5px) rotate(5deg); - } + 25% { + transform: translate(5px, 5px) rotate(5deg); + } - 50% { - transform: translate(0, 0) rotate(0eg); - } + 50% { + transform: translate(0, 0) rotate(0eg); + } - 75% { - transform: translate(-5px, 5px) rotate(-5deg); - } + 75% { + transform: translate(-5px, 5px) rotate(-5deg); + } - 100% { - transform: translate(0, 0) rotate(0deg); - } + 100% { + transform: translate(0, 0) rotate(0deg); + } } \ No newline at end of file diff --git a/src/App.tsx b/src/App.tsx index f82885b..da388f9 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -121,7 +121,7 @@ function App() { -
+
{ setpopup(!shouldpopup()) }}>

typa shit ive been on

-

add your reviews here

+ }} + href="https://discord.com/oauth2/authorize?client_id=1208380910525743134&response_type=token&redirect_uri=https%3A%2F%2Fexhq.dev%2Freview%2F&scope=identify"> +

add your reviews here

Reviews

=> (await fetch(`https://dc-lookup.mono.exhq.dev/v1/user/${id}`) .then(res => res.json()).then(data => data.avatar.link).catch(() => "https://http.cat/status/100")); - function SingleReview(props: NeoReview) { - const [imageSrc, setImageSrc] = createSignal(""); - - onMount(async () => { - const url = await theImager(props.discordID); - setImageSrc(url); - }); - - return ( -
- User Avatar -
-
- {props.global_name === null ? props.username : props.global_name} -
-
{props.reviewText}
+function SingleReview(props: NeoReview) { + const [imageSrc, setImageSrc] = createSignal(""); + + onMount(async () => { + const url = await theImager(props.discordID); + setImageSrc(url); + }); + + return ( +
+ User Avatar +
+
+ {props.global_name === null ? props.username : props.global_name}
+
{props.reviewText}
- ); - } +
+ ); +} + export async function sendReview(review: string, token: string): Promise { try { const response = await fetch(`https://backendreview.mono.exhq.dev/sendreview?review=${review}`, { diff --git a/src/components/cumbrainz.css b/src/components/cumbrainz.css new file mode 100644 index 0000000..b0fafac --- /dev/null +++ b/src/components/cumbrainz.css @@ -0,0 +1,6 @@ +.listeningto { + font-size: smaller; + display: flex; + justify-content: center; + flex-direction: column; +} \ No newline at end of file diff --git a/src/components/cumbrainz.tsx b/src/components/cumbrainz.tsx new file mode 100644 index 0000000..1a0fd94 --- /dev/null +++ b/src/components/cumbrainz.tsx @@ -0,0 +1,65 @@ +import {createSignal, onMount, Show} from "solid-js"; +import "./cumbrainz.css" + + +interface ListenPayload { + payload: { + count: number; + listens: Listen[]; + playing_now: boolean; + user_id: string; + }; +} + +interface Listen { + playing_now: boolean; + track_metadata: TrackMetadata; +} + +interface TrackMetadata { + additional_info: AdditionalInfo; + artist_name: string; + release_name: string; + track_name: string; +} + +interface AdditionalInfo { + duration: number; + music_service_name: string; + origin_url: string; + submission_client: string; + submission_client_version: string; +} + +export function Cumbrainz() { + const [musicInfo, setMusicInfo] = createSignal({} as ListenPayload); + const [isLoading, setIsLoading] = createSignal(true); + onMount(async () => { + try { + const the = await fetch("https://api.listenbrainz.org/1/user/exhq/playing-now") + const thejson = await the.json() + setMusicInfo(thejson) + } catch (error) { + console.error("Error fetching music data from song.link:", error); + } finally { + setIsLoading(false); + } + }) + return
+

Listening to

+ 0} fallback={nothing}> + + + }> + loading + +
+} + +function Thesong({song}: { song: ListenPayload }) { + return `?v=${new URLSearchParams(m).get('v') ?? ''}`).replace(/(\?v=)$/, '')}> +
{song.payload.listens[0].track_metadata.artist_name} - {song.payload.listens[0].track_metadata.track_name}
+ +} \ No newline at end of file diff --git a/src/components/middlecard.css b/src/components/middlecard.css new file mode 100644 index 0000000..7a5f1fe --- /dev/null +++ b/src/components/middlecard.css @@ -0,0 +1,11 @@ +.middleparent { + display: flex; + flex-direction: column; + justify-content: space-evenly; + width: 100%; + height: 100%; +} + +.middlechild { + text-align: center; +} \ No newline at end of file diff --git a/src/components/middlecard.tsx b/src/components/middlecard.tsx index 1c2ed2e..b872c05 100644 --- a/src/components/middlecard.tsx +++ b/src/components/middlecard.tsx @@ -1,22 +1,33 @@ +import { Cumbrainz } from "./cumbrainz" +import "./middlecard.css" export interface InfoCardProps { bd: boolean } export function InfoCard(props: InfoCardProps) { - return props.bd ? <> -

hi :3

- its my birthday -
- please buy me stuff - - : - <> -

hi :3

- silly goober who does silly stuff -
- self proclaimed programmer and progamer -
- shitposts for fun - - + + return
+
{ + props.bd ? + <> + + its my birthday +
+ please buy me stuff + + : <> + silly goober who does silly stuff +
+ self proclaimed programmer and progamer +
+ shitposts for fun + + }
+
+
+
+
+ +
+
} \ No newline at end of file