i miss otachan
This commit is contained in:
parent
21ffad6026
commit
fa8f60dcdd
7 changed files with 375 additions and 277 deletions
471
src/App.css
471
src/App.css
|
|
@ -1,403 +1,406 @@
|
||||||
:root {
|
:root {
|
||||||
-webkit-touch-callout: none;
|
-webkit-touch-callout: none;
|
||||||
-webkit-user-select: none;
|
-webkit-user-select: none;
|
||||||
-khtml-user-select: none;
|
-khtml-user-select: none;
|
||||||
-moz-user-select: none;
|
-moz-user-select: none;
|
||||||
-ms-user-select: none;
|
-ms-user-select: none;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
/* browsers agreeing on stuff challenge (impossible) */
|
/* browsers agreeing on stuff challenge (impossible) */
|
||||||
background-color: #121212;
|
background-color: #121212;
|
||||||
font-family: monospace;
|
font-family: monospace;
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
color: #ffc8dd;
|
color: #ffc8dd;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.footer a {
|
.footer a {
|
||||||
color: #cdb4db;
|
color: #cdb4db;
|
||||||
}
|
}
|
||||||
|
|
||||||
.footer {
|
.footer {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
margin: 10px;
|
margin: 10px;
|
||||||
z-index: 1000;
|
z-index: 1000;
|
||||||
}
|
}
|
||||||
|
|
||||||
.musicartist {
|
.musicartist {
|
||||||
font-weight: bolder;
|
font-weight: bolder;
|
||||||
margin-bottom: .5em;
|
margin-bottom: .5em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.musicbutton {
|
.musicbutton {
|
||||||
background-color: #272525;
|
background-color: #272525;
|
||||||
color: pink;
|
color: pink;
|
||||||
font-family: Roboto, sans-serif;
|
font-family: Roboto, sans-serif;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
padding: 10px 30px;
|
padding: 10px 30px;
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
transition: 639ms;
|
transition: 639ms;
|
||||||
transform: translateY(0);
|
transform: translateY(0);
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
border: none;
|
border: none;
|
||||||
margin: 1em;
|
margin: 1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.musicdiv {
|
.musicdiv {
|
||||||
background-color: rgba(0, 0, 0, 0.731);
|
background-color: rgba(0, 0, 0, 0.731);
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
z-index: 1500;
|
z-index: 1500;
|
||||||
}
|
}
|
||||||
|
|
||||||
.music-close-button-div {
|
.music-close-button-div {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: end;
|
justify-content: end;
|
||||||
}
|
}
|
||||||
|
|
||||||
.close-button {
|
.close-button {
|
||||||
padding: 2;
|
padding: 2;
|
||||||
border: none;
|
border: none;
|
||||||
background: none;
|
background: none;
|
||||||
border-radius: 2px;
|
border-radius: 2px;
|
||||||
background-color: #5e5a5a;
|
background-color: #5e5a5a;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
color: pink;
|
color: pink;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
margin: 1em;
|
margin: 1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.musiclist {
|
.musiclist {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-around;
|
justify-content: space-around;
|
||||||
font-size: larger;
|
font-size: larger;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
height: 80%;
|
height: 80%;
|
||||||
overflow-x: scroll;
|
overflow-x: scroll;
|
||||||
}
|
}
|
||||||
|
|
||||||
.innermusic {
|
.innermusic {
|
||||||
width: 50%;
|
width: 50%;
|
||||||
height: 50%;
|
height: 50%;
|
||||||
border-radius: 2%;
|
border-radius: 2%;
|
||||||
background: #121212;
|
background: #121212;
|
||||||
z-index: 1000;
|
z-index: 1000;
|
||||||
}
|
}
|
||||||
|
|
||||||
.musicbutton:hover {
|
.musicbutton:hover {
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
transition: 639ms;
|
transition: 639ms;
|
||||||
padding: 10px 30px;
|
padding: 10px 30px;
|
||||||
transform: translateY(-1px);
|
transform: translateY(-1px);
|
||||||
border: none;
|
border: none;
|
||||||
box-shadow: 0 0 534px -3px rgba(250, 236, 236, 0.4);
|
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);
|
-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);
|
-moz-box-shadow: 0 0 534px -3px rgba(250, 236, 236, 0.4);
|
||||||
background-color: #5e5a5a;
|
background-color: #5e5a5a;
|
||||||
animation: big 500ms infinite;
|
animation: big 500ms infinite;
|
||||||
transform: translateY(-0.3em);
|
transform: translateY(-0.3em);
|
||||||
transition: background-color 1s, transform .5s, box-shadow .5s, -webkit-box-shadow .5s, -moz-box-shadow 0.5s;
|
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);
|
||||||
}
|
}
|
||||||
|
|
||||||
.header {
|
.header {
|
||||||
margin-top: 6em;
|
margin-top: 6em;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.cardchild h1 {
|
.cardchild h1:not(:has(.listeningto)) {
|
||||||
font-size: 3em;
|
font-size: 3em;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.reviewheadertext {
|
.reviewheadertext {
|
||||||
margin-bottom: -.2em;
|
margin-bottom: -.2em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.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;
|
||||||
color: pink;
|
color: pink;
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
margin-bottom: 0%;
|
margin-bottom: 0%;
|
||||||
animation: spawntop 1s;
|
.fadein {
|
||||||
|
animation: spawntop 1s;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.cardchild span {
|
.cardchild span {
|
||||||
font-size: 1.5em;
|
font-size: 1.5em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.cardchild img {
|
.cardchild img {
|
||||||
max-width: 5em;
|
max-width: 5em;
|
||||||
margin: 0.5em;
|
margin: 0.5em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.cardchild:hover::-webkit-scrollbar {
|
.cardchild:hover::-webkit-scrollbar {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* CAN BROWSERS JUST AGREE ON ONE FUCKING THING */
|
/* CAN BROWSERS JUST AGREE ON ONE FUCKING THING */
|
||||||
|
|
||||||
.cardchild {
|
.cardchild {
|
||||||
-ms-overflow-style: none;
|
-ms-overflow-style: none;
|
||||||
scrollbar-width: none;
|
scrollbar-width: none;
|
||||||
cursor: default;
|
cursor: default;
|
||||||
background-color: #272525;
|
background-color: #272525;
|
||||||
border-radius: 5%;
|
border-radius: 5%;
|
||||||
width: 25em;
|
width: 25em;
|
||||||
height: 25em;
|
height: 25em;
|
||||||
margin-top: 1em;
|
margin-top: 1em;
|
||||||
padding: 0.5em 5em 2em 5em;
|
padding: 0.5em 5em 2em 5em;
|
||||||
transform: translateY(-0em);
|
transform: translateY(-0em);
|
||||||
transition: background-color 1s, transform .5s, box-shadow .5s, -webkit-box-shadow .5s, -moz-box-shadow 0.5s;
|
transition: background-color 1s, transform .5s, box-shadow .5s, -webkit-box-shadow .5s, -moz-box-shadow 0.5s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.theeaster {
|
.theeaster {
|
||||||
color: pink;
|
color: pink;
|
||||||
padding: 8px;
|
padding: 8px;
|
||||||
font-size: 21px;
|
font-size: 21px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
border-width: 0;
|
border-width: 0;
|
||||||
background-color: #5555557a;
|
background-color: #5555557a;
|
||||||
border-style: solid;
|
border-style: solid;
|
||||||
border-radius: 11px;
|
border-radius: 11px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.theeaster:focus {
|
.theeaster:focus {
|
||||||
border-color: pink;
|
border-color: pink;
|
||||||
box-shadow: 0 0 534px -3px rgba(250, 236, 236, 0.4);
|
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);
|
-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);
|
-moz-box-shadow: 0 0 534px -3px rgba(250, 236, 236, 0.4);
|
||||||
transition: .5s;
|
transition: .5s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.easteregg {
|
.easteregg {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.easteregginner {
|
.easteregginner {
|
||||||
width: 70%;
|
width: 70%;
|
||||||
background-color: #272525;
|
background-color: #272525;
|
||||||
height: 10em;
|
height: 10em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.cardchild:hover {
|
.cardchild:hover {
|
||||||
box-shadow: 0 0 534px -3px rgba(250, 236, 236, 0.4);
|
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);
|
-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);
|
-moz-box-shadow: 0 0 534px -3px rgba(250, 236, 236, 0.4);
|
||||||
background-color: #5e5a5a;
|
background-color: #5e5a5a;
|
||||||
animation: big 500ms infinite;
|
animation: big 500ms infinite;
|
||||||
transform: translateY(-0.3em);
|
transform: translateY(-0.3em);
|
||||||
transition: background-color 1s, transform .5s, box-shadow .5s, -webkit-box-shadow .5s, -moz-box-shadow 0.5s;
|
transition: background-color 1s, transform .5s, box-shadow .5s, -webkit-box-shadow .5s, -moz-box-shadow 0.5s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.linktree {
|
.linktree {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-around;
|
justify-content: space-around;
|
||||||
}
|
}
|
||||||
|
|
||||||
.linktree img {
|
.linktree img {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.singlereview img {
|
.singlereview img {
|
||||||
border-radius: 12%;
|
border-radius: 12%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.singlereview {
|
.singlereview {
|
||||||
margin: 1em;
|
margin: 1em;
|
||||||
border-radius: 3%;
|
border-radius: 3%;
|
||||||
background-color: #00000040;
|
background-color: #00000040;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
}
|
}
|
||||||
|
|
||||||
.cssishard {
|
.cssishard {
|
||||||
background-color: #121212;
|
background-color: #121212;
|
||||||
}
|
}
|
||||||
|
|
||||||
.singlemusic {
|
.singlemusic {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
min-width: 15em;
|
min-width: 15em;
|
||||||
max-width: 15em;
|
max-width: 15em;
|
||||||
margin: 1em;
|
word-wrap: anywhere;
|
||||||
padding: 1em;
|
margin: 1em;
|
||||||
border-radius: 3%;
|
padding: 1em;
|
||||||
background-color: #272525;
|
border-radius: 3%;
|
||||||
display: flex;
|
background-color: #272525;
|
||||||
align-items: flex-start;
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
}
|
}
|
||||||
|
|
||||||
.singlemusic img {
|
.singlemusic img {
|
||||||
max-width: 5em;
|
max-width: 5em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.innermusic {
|
.innermusic {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
|
|
||||||
.reviewname {
|
.reviewname {
|
||||||
margin-bottom: 0.1em;
|
margin-bottom: 0.1em;
|
||||||
font-weight: bolder;
|
font-weight: bolder;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.reviewinfo {
|
.reviewinfo {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
|
|
||||||
.reviewname {
|
.reviewname {
|
||||||
margin-bottom: 0.1em;
|
margin-bottom: 0.1em;
|
||||||
font-weight: bolder;
|
font-weight: bolder;
|
||||||
}
|
}
|
||||||
|
|
||||||
.parent {
|
.parent {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
justify-content: space-evenly;
|
justify-content: space-evenly;
|
||||||
}
|
}
|
||||||
|
|
||||||
.header h1 {
|
.header h1 {
|
||||||
font-size: 3.6em;
|
font-size: 3.6em;
|
||||||
color: blanchedalmond;
|
color: blanchedalmond;
|
||||||
display: inline-table;
|
display: inline-table;
|
||||||
}
|
}
|
||||||
|
|
||||||
.cardchild h2 {
|
.cardchild h2 {
|
||||||
display: inline-table;
|
display: inline-table;
|
||||||
vertical-align: text-bottom;
|
vertical-align: text-bottom;
|
||||||
}
|
}
|
||||||
|
|
||||||
.header h1:not(:active) {
|
.header h1:not(:active) {
|
||||||
animation: slide-right 1.5s;
|
animation: slide-right 1.5s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.header h1:hover {
|
.header h1:hover {
|
||||||
animation: shake 10ms infinite;
|
animation: shake 10ms infinite;
|
||||||
}
|
}
|
||||||
|
|
||||||
.header img {
|
.header img {
|
||||||
border-radius: 25%;
|
border-radius: 25%;
|
||||||
margin-right: 1em;
|
margin-right: 1em;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
}
|
}
|
||||||
|
|
||||||
.initialanim {
|
.initialanim {
|
||||||
animation: slide-left 1.5s;
|
animation: slide-left 1.5s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.gaybackground {
|
.gaybackground {
|
||||||
background-image: url("/gaybackground.png");
|
background-image: url("/gaybackground.png");
|
||||||
}
|
}
|
||||||
|
|
||||||
.animate {
|
.animate {
|
||||||
z-index: 10000000;
|
z-index: 10000000;
|
||||||
transform: scale(10000);
|
transform: scale(10000);
|
||||||
transition: 20s;
|
transition: 20s;
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes slide-left {
|
@keyframes slide-left {
|
||||||
from {
|
from {
|
||||||
transform: translateX(-10000em);
|
transform: translateX(-10000em);
|
||||||
}
|
}
|
||||||
|
|
||||||
to {
|
to {
|
||||||
transform: translateX(0);
|
transform: translateX(0);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes slide-right {
|
@keyframes slide-right {
|
||||||
from {
|
from {
|
||||||
transform: translateX(10000em);
|
transform: translateX(10000em);
|
||||||
}
|
}
|
||||||
|
|
||||||
to {
|
to {
|
||||||
transform: translateX(0);
|
transform: translateX(0);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes bigsmall {
|
@keyframes bigsmall {
|
||||||
0% {
|
0% {
|
||||||
max-width: 10em;
|
max-width: 10em;
|
||||||
}
|
}
|
||||||
|
|
||||||
50% {
|
50% {
|
||||||
width: 10.5em;
|
width: 10.5em;
|
||||||
max-width: 10.5em;
|
max-width: 10.5em;
|
||||||
}
|
}
|
||||||
|
|
||||||
100% {
|
100% {
|
||||||
max-width: 10em;
|
max-width: 10em;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes spawntop {
|
@keyframes spawntop {
|
||||||
0% {
|
0% {
|
||||||
opacity: 0%;
|
opacity: 0%;
|
||||||
transform: translateY(100em);
|
transform: translateY(1em);
|
||||||
}
|
}
|
||||||
|
|
||||||
100% {
|
100% {
|
||||||
opacity: 100%;
|
opacity: 100%;
|
||||||
transform: translateY(0);
|
transform: translateY(0);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes shake {
|
@keyframes shake {
|
||||||
0% {
|
0% {
|
||||||
transform: translate(0, 0) rotate(0deg);
|
transform: translate(0, 0) rotate(0deg);
|
||||||
}
|
}
|
||||||
|
|
||||||
25% {
|
25% {
|
||||||
transform: translate(5px, 5px) rotate(5deg);
|
transform: translate(5px, 5px) rotate(5deg);
|
||||||
}
|
}
|
||||||
|
|
||||||
50% {
|
50% {
|
||||||
transform: translate(0, 0) rotate(0eg);
|
transform: translate(0, 0) rotate(0eg);
|
||||||
}
|
}
|
||||||
|
|
||||||
75% {
|
75% {
|
||||||
transform: translate(-5px, 5px) rotate(-5deg);
|
transform: translate(-5px, 5px) rotate(-5deg);
|
||||||
}
|
}
|
||||||
|
|
||||||
100% {
|
100% {
|
||||||
transform: translate(0, 0) rotate(0deg);
|
transform: translate(0, 0) rotate(0deg);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -121,7 +121,7 @@ function App() {
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<AdvancedBr count={2} />
|
<AdvancedBr count={2} />
|
||||||
<div class='easteregg'>
|
<div class='easteregg' style={{opacity: isAnimating() || animatedwoem() ? "0%" : "100%"}}>
|
||||||
<div class="musicbutton" onclick={() => { setpopup(!shouldpopup()) }}>
|
<div class="musicbutton" onclick={() => { setpopup(!shouldpopup()) }}>
|
||||||
<p>typa shit ive been on</p><img style={{
|
<p>typa shit ive been on</p><img style={{
|
||||||
"margin-left": "0.3em",
|
"margin-left": "0.3em",
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
import { createSignal, onMount } from "solid-js"
|
import {createSignal, onMount} from "solid-js"
|
||||||
import { ishover } from "../App";
|
import {ishover} from "../App";
|
||||||
|
|
||||||
interface Review {
|
interface Review {
|
||||||
reviewID: number;
|
reviewID: number;
|
||||||
|
|
@ -44,8 +44,9 @@ export default function Reviews() {
|
||||||
<>
|
<>
|
||||||
<a style={{
|
<a style={{
|
||||||
display: ishover() ? "inline" : "none"
|
display: ishover() ? "inline" : "none"
|
||||||
}} href="https://discord.com/oauth2/authorize?client_id=1208380910525743134&response_type=token&redirect_uri=https%3A%2F%2Fexhq.dev%2Freview%2F&scope=identify">
|
}}
|
||||||
<p>add your reviews here</p>
|
href="https://discord.com/oauth2/authorize?client_id=1208380910525743134&response_type=token&redirect_uri=https%3A%2F%2Fexhq.dev%2Freview%2F&scope=identify">
|
||||||
|
<p class="fadein">add your reviews here</p>
|
||||||
</a>
|
</a>
|
||||||
<h1 class="reviewheadertext">Reviews</h1>
|
<h1 class="reviewheadertext">Reviews</h1>
|
||||||
<div
|
<div
|
||||||
|
|
@ -69,30 +70,31 @@ export default function Reviews() {
|
||||||
export const theImager = async (id: string): Promise<string> => (await fetch(`https://dc-lookup.mono.exhq.dev/v1/user/${id}`)
|
export const theImager = async (id: string): Promise<string> => (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"));
|
.then(res => res.json()).then(data => data.avatar.link).catch(() => "https://http.cat/status/100"));
|
||||||
|
|
||||||
function SingleReview(props: NeoReview) {
|
function SingleReview(props: NeoReview) {
|
||||||
const [imageSrc, setImageSrc] = createSignal("");
|
const [imageSrc, setImageSrc] = createSignal("");
|
||||||
|
|
||||||
onMount(async () => {
|
onMount(async () => {
|
||||||
const url = await theImager(props.discordID);
|
const url = await theImager(props.discordID);
|
||||||
setImageSrc(url);
|
setImageSrc(url);
|
||||||
});
|
});
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div class="singlereview">
|
<div class="singlereview">
|
||||||
<img
|
<img
|
||||||
src={imageSrc()}
|
src={imageSrc()}
|
||||||
alt="User Avatar"
|
alt="User Avatar"
|
||||||
style={{ "max-width": "3em", "border-radius": "30%" }}
|
style={{"max-width": "3em", "border-radius": "30%"}}
|
||||||
/>
|
/>
|
||||||
<div class="reviewinfo">
|
<div class="reviewinfo">
|
||||||
<div class="reviewname">
|
<div class="reviewname">
|
||||||
{props.global_name === null ? props.username : props.global_name}
|
{props.global_name === null ? props.username : props.global_name}
|
||||||
</div>
|
|
||||||
<div class="reviewtext">{props.reviewText}</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
<div class="reviewtext">{props.reviewText}</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
</div>
|
||||||
}
|
);
|
||||||
|
}
|
||||||
|
|
||||||
export async function sendReview(review: string, token: string): Promise<boolean> {
|
export async function sendReview(review: string, token: string): Promise<boolean> {
|
||||||
try {
|
try {
|
||||||
const response = await fetch(`https://backendreview.mono.exhq.dev/sendreview?review=${review}`, {
|
const response = await fetch(`https://backendreview.mono.exhq.dev/sendreview?review=${review}`, {
|
||||||
|
|
|
||||||
6
src/components/cumbrainz.css
Normal file
6
src/components/cumbrainz.css
Normal file
|
|
@ -0,0 +1,6 @@
|
||||||
|
.listeningto {
|
||||||
|
font-size: smaller;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
65
src/components/cumbrainz.tsx
Normal file
65
src/components/cumbrainz.tsx
Normal file
|
|
@ -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 <div class="listeningto">
|
||||||
|
<h2 >Listening to</h2>
|
||||||
|
<Show when={isLoading()} fallback={
|
||||||
|
<Show when={musicInfo().payload.listens.length > 0} fallback={<span>nothing</span>}>
|
||||||
|
<Thesong song={musicInfo()} />
|
||||||
|
</Show>
|
||||||
|
}>
|
||||||
|
<span>loading</span>
|
||||||
|
</Show>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
|
||||||
|
function Thesong({song}: { song: ListenPayload }) {
|
||||||
|
return <a
|
||||||
|
href={song.payload.listens[0].track_metadata.additional_info.origin_url.replace(/\?.*/, m => `?v=${new URLSearchParams(m).get('v') ?? ''}`).replace(/(\?v=)$/, '')}>
|
||||||
|
<div> {song.payload.listens[0].track_metadata.artist_name} - {song.payload.listens[0].track_metadata.track_name} </div>
|
||||||
|
</a>
|
||||||
|
}
|
||||||
11
src/components/middlecard.css
Normal file
11
src/components/middlecard.css
Normal file
|
|
@ -0,0 +1,11 @@
|
||||||
|
.middleparent {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-evenly;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.middlechild {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
@ -1,22 +1,33 @@
|
||||||
|
import { Cumbrainz } from "./cumbrainz"
|
||||||
|
import "./middlecard.css"
|
||||||
export interface InfoCardProps {
|
export interface InfoCardProps {
|
||||||
bd: boolean
|
bd: boolean
|
||||||
}
|
}
|
||||||
|
|
||||||
export function InfoCard(props: InfoCardProps) {
|
export function InfoCard(props: InfoCardProps) {
|
||||||
return props.bd ? <>
|
|
||||||
<h1>hi :3</h1>
|
return <div class="middleparent">
|
||||||
<span>its my birthday
|
<div class="middlechild">{
|
||||||
<br />
|
props.bd ?
|
||||||
please buy me stuff
|
<>
|
||||||
</span>
|
<span>
|
||||||
</> :
|
its my birthday
|
||||||
<>
|
<br />
|
||||||
<h1>hi :3</h1>
|
please buy me stuff
|
||||||
<span>silly goober who does silly stuff
|
</span>
|
||||||
<br />
|
</> : <>
|
||||||
self proclaimed programmer and progamer
|
<span>silly goober who does silly stuff
|
||||||
<br />
|
<br />
|
||||||
shitposts for fun
|
self proclaimed programmer and progamer
|
||||||
</span>
|
<br />
|
||||||
</>
|
shitposts for fun
|
||||||
|
</span>
|
||||||
|
</>}</div>
|
||||||
|
<div style={{"background-color": "gray", height: "1px"}}>
|
||||||
|
<br/>
|
||||||
|
</div>
|
||||||
|
<div class="middlechild">
|
||||||
|
<Cumbrainz></Cumbrainz>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
}
|
}
|
||||||
Loading…
Reference in a new issue