Compare commits
1 Commits
01e70d850d
...
ca500023ea
| Author | SHA1 | Date |
|---|---|---|
 Alyx
|
ca500023ea |
BIN
assets/Bongo.gif
BIN
assets/Bongo.gif
Binary file not shown.
|
Before Width: | Height: | Size: 68 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.0 MiB |
BIN
assets/nessa.png
BIN
assets/nessa.png
Binary file not shown.
|
Before Width: | Height: | Size: 154 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 747 KiB |
|
|
@ -0,0 +1,80 @@
|
|||
:root {
|
||||
--parvus-background-color: #161618;
|
||||
--parvus-color: #f2f5f4;
|
||||
--parvus-caption-color: #f2f5f4;
|
||||
--parvus-btn-background-color: #F5A9B8;
|
||||
--parvus-btn-color: #ffffff;
|
||||
--parvus-btn-disabled-background-color: #5BCEFA;
|
||||
--parvus-btn-disabled-color: #161618;
|
||||
--img-height: 12.5em;
|
||||
--max-img-width: 22em; /* So breit wie das breiteste Bild */
|
||||
}
|
||||
|
||||
|
||||
body {
|
||||
background-color: #161618;
|
||||
color: #f2f5f4;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: #f2f5f4;
|
||||
}
|
||||
|
||||
a.lightbox {
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.parvus-trigger:has(img) .parvus-zoom__indicator {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.image-box {
|
||||
height: var(--img-height);
|
||||
width: var(--max-img-width);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: #222222;
|
||||
border: 1px solid #222222;
|
||||
border-radius: 0.5rem;
|
||||
|
||||
}
|
||||
|
||||
.image-box img {
|
||||
max-height: 100%;
|
||||
max-width: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
padding-bottom: 3em;
|
||||
color: #F5A9B8;
|
||||
}
|
||||
|
||||
.logo {
|
||||
height: 8em;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
a.svg-link {
|
||||
display: inline-block;
|
||||
line-height: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
a.svg-link svg {
|
||||
display: block;
|
||||
width: 3em;
|
||||
height: auto;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.footer {
|
||||
color: #f2f5f4;
|
||||
text-align: center;
|
||||
margin: 25px auto;
|
||||
margin-top: 20px;
|
||||
width: 90%;
|
||||
max-width: 500px;
|
||||
}
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
.twitch {
|
||||
color: #9146ff;
|
||||
}
|
||||
|
||||
.twitter {
|
||||
color: #1DA1F2;
|
||||
}
|
||||
|
||||
.vgen {
|
||||
color: #B8FF26;
|
||||
}
|
||||
453
css/styles.css
453
css/styles.css
|
|
@ -1,453 +0,0 @@
|
|||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
:root {
|
||||
--primary-pink: #F5A9B8;
|
||||
--primary-blue: #5BCFFA;
|
||||
--white: #FFFFFF;
|
||||
--dark-bg: #161618;
|
||||
--gray-blue: #A8C5DB;
|
||||
--dark-blue: #12354B;
|
||||
--dark-teal: #12404B;
|
||||
|
||||
--card-bg: rgba(22, 22, 24, 0.85);
|
||||
--card-border: rgba(91, 207, 250, 0.15);
|
||||
--card-hover-border: rgba(245, 169, 184, 0.25);
|
||||
|
||||
--shadow-sm: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
|
||||
--shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
|
||||
--shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, Roboto, Oxygen, Ubuntu, sans-serif;
|
||||
background-color: var(--dark-bg);
|
||||
color: var(--white);
|
||||
min-height: 100vh;
|
||||
line-height: 1.6;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.background-canvas {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: -1;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.main-container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 1rem 1.5rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.header {
|
||||
text-align: center;
|
||||
padding: 4rem 0 2rem;
|
||||
margin-bottom: 3rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.back-button {
|
||||
position: absolute;
|
||||
top: 2rem;
|
||||
left: 0;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.75rem 1.5rem;
|
||||
background: rgba(18, 53, 75, 0.3);
|
||||
border: 1px solid rgba(91, 207, 250, 0.2);
|
||||
border-radius: 12px;
|
||||
color: var(--primary-blue);
|
||||
text-decoration: none;
|
||||
font-weight: 600;
|
||||
transition: border-color 0.2s ease;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.back-button:hover {
|
||||
border-color: var(--primary-blue);
|
||||
}
|
||||
|
||||
.logo-wrapper {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-bottom: 2rem;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.logo {
|
||||
width: 360px;
|
||||
height: auto;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: 3.5rem;
|
||||
font-weight: 800;
|
||||
background: linear-gradient(135deg, #F5A9B8, #5BCFFA);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
margin-bottom: 1rem;
|
||||
letter-spacing: -0.5px;
|
||||
}
|
||||
|
||||
.page-subtitle {
|
||||
font-size: 1.25rem;
|
||||
color: var(--gray-blue);
|
||||
max-width: 700px;
|
||||
margin: 0 auto;
|
||||
opacity: 0.9;
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
.bongo {
|
||||
height: 1.5em;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.loading {
|
||||
text-align: center;
|
||||
padding: 4rem;
|
||||
color: var(--gray-blue);
|
||||
}
|
||||
|
||||
.spinner {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border: 3px solid rgba(91, 207, 250, 0.1);
|
||||
border-top-color: var(--primary-blue);
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
margin: 0 auto 1rem;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
.artist-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
|
||||
gap: 2rem;
|
||||
margin-bottom: 4rem;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.artist-card {
|
||||
background: var(--card-bg);
|
||||
border-radius: 20px;
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--card-border);
|
||||
backdrop-filter: blur(10px);
|
||||
transition: border-color 0.3s ease, box-shadow 0.3s ease;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.artist-card:hover {
|
||||
border-color: var(--card-hover-border);
|
||||
box-shadow: 0 0 0 1px var(--card-hover-border);
|
||||
}
|
||||
|
||||
.image-container {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background: linear-gradient(135deg, var(--dark-blue), var(--dark-teal));
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 30px;
|
||||
min-height: 320px;
|
||||
max-height: 320px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.image-container.horizontal {
|
||||
padding: 40px 20px;
|
||||
}
|
||||
|
||||
.image-container.horizontal .artist-image {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
max-height: 100%;
|
||||
}
|
||||
|
||||
.image-container.vertical {
|
||||
padding: 20px 40px;
|
||||
}
|
||||
|
||||
.image-container.vertical .artist-image {
|
||||
width: 50%;
|
||||
height: auto;
|
||||
max-height: 100%;
|
||||
}
|
||||
|
||||
.artist-image {
|
||||
object-fit: contain;
|
||||
object-position: center;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 1.5rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.artist-name {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 0.5rem;
|
||||
background: linear-gradient(135deg, #F5A9B8, #5BCFFA);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
.artist-role {
|
||||
font-size: 1rem;
|
||||
color: var(--primary-blue);
|
||||
margin-bottom: 1rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.artist-description {
|
||||
color: var(--gray-blue);
|
||||
margin-bottom: 1.5rem;
|
||||
line-height: 1.7;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.social-links {
|
||||
display: flex;
|
||||
gap: 0.75rem;
|
||||
flex-wrap: wrap;
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
.social-link {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
background: rgba(18, 53, 75, 0.4);
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.social-link:hover {
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
.social-link.vgen:hover {
|
||||
background: #B8FF26;
|
||||
color: #0F0F16;
|
||||
}
|
||||
|
||||
.social-link.twitter:hover {
|
||||
background: #1DA1F2;
|
||||
}
|
||||
|
||||
.social-link.bluesky:hover {
|
||||
background: #0085FF;
|
||||
}
|
||||
|
||||
.social-link.youtube:hover {
|
||||
background: #FF0000;
|
||||
}
|
||||
|
||||
.social-link.twitch:hover {
|
||||
background: #9146FF;
|
||||
}
|
||||
|
||||
.social-link.instagram:hover {
|
||||
background: linear-gradient(45deg, #405DE6, #833AB4, #C13584, #E1306C, #FD1D1D);
|
||||
}
|
||||
|
||||
.social-link.pixiv:hover {
|
||||
background: #0096FA;
|
||||
}
|
||||
|
||||
.social-link.website:hover {
|
||||
background: var(--primary-blue);
|
||||
color: #161618;
|
||||
}
|
||||
|
||||
.footer {
|
||||
text-align: center;
|
||||
padding: 3rem 0 1rem;
|
||||
border-top: 1px solid rgba(91, 207, 250, 0.1);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.footer::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -1px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 100px;
|
||||
height: 2px;
|
||||
background: linear-gradient(135deg, #F5A9B8, #5BCFFA);
|
||||
}
|
||||
|
||||
.footer-text {
|
||||
font-size: 1.25rem;
|
||||
color: var(--gray-blue);
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.footer a {
|
||||
color: rgba(168, 197, 219, 0.6);
|
||||
}
|
||||
|
||||
.heart {
|
||||
color: var(--primary-pink);
|
||||
display: inline-block;
|
||||
margin: 0 0.25rem;
|
||||
}
|
||||
|
||||
.copyright {
|
||||
color: rgba(168, 197, 219, 0.6);
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.error {
|
||||
text-align: center;
|
||||
padding: 3rem;
|
||||
color: var(--primary-pink);
|
||||
background: rgba(245, 169, 184, 0.1);
|
||||
border-radius: 12px;
|
||||
border: 1px solid rgba(245, 169, 184, 0.2);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.main-container {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.header {
|
||||
padding: 3rem 0 1.5rem;
|
||||
}
|
||||
|
||||
.back-button {
|
||||
position: relative;
|
||||
top: auto;
|
||||
left: auto;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
.page-subtitle {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.artist-grid {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.image-container {
|
||||
padding: 20px;
|
||||
min-height: 280px;
|
||||
max-height: 280px;
|
||||
}
|
||||
|
||||
.image-container.horizontal {
|
||||
padding: 30px 15px;
|
||||
}
|
||||
|
||||
.image-container.horizontal .artist-image {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.image-container.vertical {
|
||||
padding: 15px 30px;
|
||||
}
|
||||
|
||||
.image-container.vertical .artist-image {
|
||||
width: 60%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.logo {
|
||||
width: 240 px;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.page-title {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.logo {
|
||||
width: 200px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.back-button {
|
||||
padding: 0.5rem 1rem;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.image-container {
|
||||
padding: 15px;
|
||||
min-height: 250px;
|
||||
max-height: 250px;
|
||||
}
|
||||
|
||||
.image-container.horizontal {
|
||||
padding: 20px 10px;
|
||||
}
|
||||
|
||||
.image-container.vertical {
|
||||
padding: 10px 20px;
|
||||
}
|
||||
|
||||
.image-container.vertical .artist-image {
|
||||
width: 70%;
|
||||
}
|
||||
}
|
||||
|
||||
.social-link.bluesky:hover {
|
||||
background: #0085FF;
|
||||
}
|
||||
|
||||
.social-link.fiverr:hover {
|
||||
background: #1DBF73;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.artist-card,
|
||||
.social-link,
|
||||
.back-button {
|
||||
transition: none !important;
|
||||
}
|
||||
|
||||
.spinner {
|
||||
animation: spin 3s linear infinite;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,96 +0,0 @@
|
|||
[
|
||||
{
|
||||
"name": "Yume Shirokuro",
|
||||
"role": "Twitch Emotes",
|
||||
"description": "",
|
||||
"image": "./assets/yume_emotes.jpeg",
|
||||
"orientation": "horizontal",
|
||||
"links": {
|
||||
"vgen": "https://vgen.co/YumeShirokuro",
|
||||
"bluesky": "https://bsky.app/profile/yumeshirokuro.bsky.social",
|
||||
"twitch": "https://twitch.tv/yume_shirokuro"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "A3l_is",
|
||||
"role": "Logo, Background, Stream Overlay, Schedule, Rigging, Splat Emote & Refsheet",
|
||||
"description": "",
|
||||
"image": "./assets/a3l_is.png",
|
||||
"orientation": "horizontal",
|
||||
"links": {
|
||||
"vgen": "https://vgen.co/A3l_is",
|
||||
"bluesky": "https://bsky.app/profile/a3lis.bsky.social",
|
||||
"twitch": "https://twitch.tv/a3l_is"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "Milky Blanc",
|
||||
"role": "Model Art",
|
||||
"description": "",
|
||||
"image": "./assets/model.png",
|
||||
"orientation": "horizontal",
|
||||
"links": {
|
||||
"vgen": "https://vgen.co/m1lkyblanc",
|
||||
"twitter": "https://twitter.com/m1lkyblanc"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "Nessai",
|
||||
"role": "Sticker Design",
|
||||
"description": "",
|
||||
"image": "./assets/nessa.png",
|
||||
"orientation": "horizontal",
|
||||
"links": {
|
||||
"instagram": "https://www.instagram.com/nessaihai/",
|
||||
"twitch": "https://www.twitch.tv/nessai",
|
||||
"website": "https://nessai.carrd.co/"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "lontongs_",
|
||||
"role": "Sweaty Jax Postkarte",
|
||||
"description": "",
|
||||
"image": "./assets/sweaty_postkarte.png",
|
||||
"orientation": "vertical",
|
||||
"links": {
|
||||
"twitter": "https://twitter.com/Lontongs_",
|
||||
"instagram": "https://www.instagram.com/lontongs_"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "OriOttero",
|
||||
"role": "Christmas Jax Postkarte",
|
||||
"description": "",
|
||||
"image": "./assets/xmas_postkarte.png",
|
||||
"orientation": "vertical",
|
||||
"links": {
|
||||
"bluesky": "https://bsky.app/profile/oriottero.orifans.com",
|
||||
"website": "https://orifans.com/links",
|
||||
"twitch": "https://twitch.tv/OriOttero",
|
||||
"instagram": "https://www.instagram.com/oriottero/"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "YanOrion",
|
||||
"role": "PNG Tuber",
|
||||
"description": "",
|
||||
"image": "./assets/yan.png",
|
||||
"orientation": "vertical",
|
||||
"links": {
|
||||
"instagram": "https://www.instagram.com/yanorion/"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "sleepingglitch",
|
||||
"role": "Visitenkarte",
|
||||
"description": "",
|
||||
"image": "./assets/visitenkarte.png",
|
||||
"orientation": "vertical",
|
||||
"links": {
|
||||
"vgen": "https://vgen.co/sleepingglitch",
|
||||
"twitter": "https://twitter.com/sleepingglitch",
|
||||
"twitch": "https://twitch.tv/sleepingglitch_"
|
||||
}
|
||||
}
|
||||
|
||||
]
|
||||
294
index.html
294
index.html
|
|
@ -1,67 +1,269 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>JaxOff 🌸💦 Artist Credits</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>JaxOff 🌸💦 Art Credits</title>
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css" rel="stylesheet"
|
||||
integrity="sha384-LN+7fdVzj6u52u30Kp6M/trliBMCMKTyK833zpbD+pXdCLuTusPj697FH4R/5mcr" crossorigin="anonymous">
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/js/bootstrap.bundle.min.js"
|
||||
integrity="sha384-ndDqU0Gzau9qJ1lfW4pNLlhNTkCfHzAVBReH9diLvGRem5+R9g2FzA8ZGN954O5Q"
|
||||
crossorigin="anonymous"></script>
|
||||
<link href="https://bootswatch.com/5/darkly/bootstrap.min.css" rel="stylesheet" />
|
||||
<link rel="stylesheet" href="./css/sites.css">
|
||||
<link rel="stylesheet" href="./css/custom.css">
|
||||
|
||||
<link rel="preload" as="image" href="./assets/jaxoff_logo.png" />
|
||||
<!-- Open Graph -->
|
||||
<meta property="og:title" content="JaxOff 🌸💦 Art Credits">
|
||||
<meta property="og:description" content="🌸💦">
|
||||
<meta property="og:image" content="https://credit.jaxoff.tv/static/a3l_is.png">
|
||||
<meta property="og:url" content="https://credit.jaxoff.tv/">
|
||||
<meta property="og:type" content="website">
|
||||
|
||||
<!-- Twitter Card -->
|
||||
<meta name="twitter:card" content="summary">
|
||||
<meta name="twitter:title" content="JaxOff 🌸💦 Art Credits">
|
||||
<meta name="twitter:description" content="🌸💦">
|
||||
<meta name="twitter:image" content="https://credit.jaxoff.tv/static/a3l_is.png">
|
||||
|
||||
<link rel="stylesheet" href="./css/styles.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<canvas class="background-canvas" id="backgroundCanvas" aria-hidden="true"></canvas>
|
||||
|
||||
<div class="main-container">
|
||||
<header class="header">
|
||||
<a href="https://link.jaxoff.tv/" class="back-button">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" style="margin-right: 4px;">
|
||||
<path d="M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"/>
|
||||
</svg>
|
||||
Zurück zu JaxOff
|
||||
<div class="container py-5">
|
||||
|
||||
<div class="row text-center page-title">
|
||||
<div class="col align-self-center">
|
||||
<p>
|
||||
<a href="https://link.jaxoff.tv" target="_blank"><img src="./static/jaxoff_logo.png" class="logo" /></a>
|
||||
<h1>Artist Credits</h1>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Twitch Emotes by Yume Shirokuro -->
|
||||
|
||||
<div class="row align-items-center mb-5">
|
||||
|
||||
|
||||
<div class="col-md-4 d-flex justify-content-center">
|
||||
<div class="image-box">
|
||||
<img src="./static/yume_emotes.jpeg" class="img-fluid rounded" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-8">
|
||||
|
||||
<h2>Twitch Emotes</h2>
|
||||
|
||||
<p class="fs-4">by Yume Shirokuro</p></br>
|
||||
|
||||
<div class="d-flex gap-3">
|
||||
|
||||
<!-- VGen Link -->
|
||||
<a class="svg-link vgen" href="https://vgen.co/YumeShirokuro" target="_blank">
|
||||
<svg class="svg" version="1.0" xmlns="http://www.w3.org/2000/svg" fill="currentcolor" viewBox="18.3 34.08 166.6 150"><g transform="translate(0 200) scale(.1 -.1)"><path d="m1151 1644c-184-49-336-213-374-403l-13-64-58 72c-31 39-74 82-94 96-136 88-327 36-396-108-75-157-30-265 222-529 220-230 387-330 572-345 234-18 483 152 731 498 99 138 112 173 107 275-4 75-9 93-52 180-39 78-63 111-129 177-121 121-227 167-382 166-44 0-104-7-134-15zm246-157c73-38 115-77 172-162 51-76 75-151 64-196-15-59-203-303-299-388-229-202-400-212-631-35-86 66-236 220-318 328-50 65-60 85-60 118s7 46 33 69c18 16 44 29 58 29 35 0 78-24 98-55 39-60 199-235 265-290 88-74 176-125 217-125 30 0 91 20 106 35 4 4-29 48-73 98-94 108-119 164-119 267 0 152 92 280 233 326 68 22 191 13 254-19z"></path><path d="m1183 1304c-46-23-73-71-73-129 0-46 3-50 79-128 43-45 83-77 89-73 27 17 132 169 132 192 0 34-22 73-64 113-43 41-111 52-163 25z"></path></g></svg>
|
||||
</a>
|
||||
|
||||
<div class="logo-wrapper">
|
||||
<a href="https://link.jaxoff.tv/" target="_blank" rel="noopener">
|
||||
<img
|
||||
src="./assets/jaxoff_logo.png"
|
||||
alt="JaxOff Logo"
|
||||
class="logo"
|
||||
width="280"
|
||||
height="280"
|
||||
loading="eager"
|
||||
decoding="async"
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
<!-- Twitter Link -->
|
||||
<a class="svg-link twitter" href="https://twitter.com/YShirokuro" target="_blank">
|
||||
<svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0.98 1.48 246.2 200.05"><path d="M221.95 51.29c.15 2.17.15 4.34.15 6.53 0 66.73-50.8 143.69-143.69 143.69v-.04c-27.44.04-54.31-7.82-77.41-22.64 3.99.48 8 .72 12.02.73 22.74.02 44.83-7.61 62.72-21.66-21.61-.41-40.56-14.5-47.18-35.07 7.57 1.46 15.37 1.16 22.8-.87-23.56-4.76-40.51-25.46-40.51-49.5v-.64c7.02 3.91 14.88 6.08 22.92 6.32C11.58 63.31 4.74 33.79 18.14 10.71c25.64 31.55 63.47 50.73 104.08 52.76-4.07-17.54 1.49-35.92 14.61-48.25 20.34-19.12 52.33-18.14 71.45 2.19 11.31-2.23 22.15-6.38 32.07-12.26-3.77 11.69-11.66 21.62-22.2 27.93 10.01-1.18 19.79-3.86 29-7.95-6.78 10.16-15.32 19.01-25.2 26.16z"></path></svg>
|
||||
</a>
|
||||
|
||||
<h1 class="page-title">Artist Credits</h1>
|
||||
<!--<p class="page-subtitle"><span class="heart">♥</span> Ganz lieber text hier <span class="heart">♥</span></p>-->
|
||||
<p class="page-subtitle "><img class="bongo" src="./assets/Bongo.gif"/><a href="https://link.jaxoff.tv/onlyfans" target="_blank"><img class="bongo" src="./assets/Bongo.gif"/></a><img class="bongo" src="./assets/Bongo.gif"/> </p>
|
||||
</header>
|
||||
<!-- Twitch Link -->
|
||||
<a class="svg-link twitch" href="https://twitch.tv/yume_shirokuro" target="_blank">
|
||||
<svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="24.27 0 463.45 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M391.2 103.5H352.5v109.7h38.6zM285 103H246.4V212.8H285zM120.8 0 24.3 91.4V420.6H140.1V512l96.5-91.4h77.3L487.7 256V0zM449.1 237.8l-77.2 73.1H294.6l-67.6 64v-64H140.1V36.6H449.1z"></path></svg>
|
||||
</a>
|
||||
|
||||
<div class="loading" id="loading">
|
||||
<div class="spinner"></div>
|
||||
<p>Lade Künstler-Daten...</p>
|
||||
</div>
|
||||
|
||||
<div class="error" id="error" style="display:none;">
|
||||
<p>❌ Fehler beim Laden der Künstler-Daten.</p>
|
||||
<p style="font-size:0.9rem; margin-top:0.5rem;">Bitte versuche es später erneut.</p>
|
||||
</div>
|
||||
|
||||
<div class="artist-grid" id="artistGrid"></div>
|
||||
|
||||
<footer class="footer">
|
||||
<p class="footer-text">
|
||||
<span class="heart">♥</span> ur Artists :3</span>
|
||||
</p>
|
||||
<p class="copyright">© JaxOffTV <span id="currentYear"></span> | designed by <a href="https://bsky.app/profile/did:plc:47lclbae3rmsoapqkbvnohg2" target="_blank">SleepyTawi</a> ✨</p>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="./js/background.js" defer></script>
|
||||
<script src="./js/main.js" defer></script>
|
||||
<!-- Logo, Background, Rigging & Splat Emote by A3l_is -->
|
||||
|
||||
<div class="row align-items-center mb-5">
|
||||
|
||||
|
||||
<div class="col-md-4 d-flex justify-content-center">
|
||||
<div class="image-box">
|
||||
<img src="./static/a3l_is.png" class="img-fluid rounded" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-8">
|
||||
|
||||
<h2>Logo, Background, Rigging & Splat Emote</h2>
|
||||
|
||||
<p class="fs-4">by A3l_is</p></br>
|
||||
|
||||
<div class="d-flex gap-3">
|
||||
|
||||
<!-- VGen Link -->
|
||||
<a class="svg-link vgen" href="https://vgen.co/A3l_is" target="_blank">
|
||||
<svg class="svg" version="1.0" xmlns="http://www.w3.org/2000/svg" fill="currentcolor" viewBox="18.3 34.08 166.6 150"><g transform="translate(0 200) scale(.1 -.1)"><path d="m1151 1644c-184-49-336-213-374-403l-13-64-58 72c-31 39-74 82-94 96-136 88-327 36-396-108-75-157-30-265 222-529 220-230 387-330 572-345 234-18 483 152 731 498 99 138 112 173 107 275-4 75-9 93-52 180-39 78-63 111-129 177-121 121-227 167-382 166-44 0-104-7-134-15zm246-157c73-38 115-77 172-162 51-76 75-151 64-196-15-59-203-303-299-388-229-202-400-212-631-35-86 66-236 220-318 328-50 65-60 85-60 118s7 46 33 69c18 16 44 29 58 29 35 0 78-24 98-55 39-60 199-235 265-290 88-74 176-125 217-125 30 0 91 20 106 35 4 4-29 48-73 98-94 108-119 164-119 267 0 152 92 280 233 326 68 22 191 13 254-19z"></path><path d="m1183 1304c-46-23-73-71-73-129 0-46 3-50 79-128 43-45 83-77 89-73 27 17 132 169 132 192 0 34-22 73-64 113-43 41-111 52-163 25z"></path></g></svg>
|
||||
</a>
|
||||
|
||||
<!-- Twitter Link -->
|
||||
<a class="svg-link twitter" href="https://twitter.com/A3l_is" target="_blank">
|
||||
<svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0.98 1.48 246.2 200.05"><path d="M221.95 51.29c.15 2.17.15 4.34.15 6.53 0 66.73-50.8 143.69-143.69 143.69v-.04c-27.44.04-54.31-7.82-77.41-22.64 3.99.48 8 .72 12.02.73 22.74.02 44.83-7.61 62.72-21.66-21.61-.41-40.56-14.5-47.18-35.07 7.57 1.46 15.37 1.16 22.8-.87-23.56-4.76-40.51-25.46-40.51-49.5v-.64c7.02 3.91 14.88 6.08 22.92 6.32C11.58 63.31 4.74 33.79 18.14 10.71c25.64 31.55 63.47 50.73 104.08 52.76-4.07-17.54 1.49-35.92 14.61-48.25 20.34-19.12 52.33-18.14 71.45 2.19 11.31-2.23 22.15-6.38 32.07-12.26-3.77 11.69-11.66 21.62-22.2 27.93 10.01-1.18 19.79-3.86 29-7.95-6.78 10.16-15.32 19.01-25.2 26.16z"></path></svg>
|
||||
</a>
|
||||
|
||||
<!-- Twitch Link -->
|
||||
<a class="svg-link twitch" href="https://twitch.tv/a3l_is" target="_blank">
|
||||
<svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="24.27 0 463.45 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M391.2 103.5H352.5v109.7h38.6zM285 103H246.4V212.8H285zM120.8 0 24.3 91.4V420.6H140.1V512l96.5-91.4h77.3L487.7 256V0zM449.1 237.8l-77.2 73.1H294.6l-67.6 64v-64H140.1V36.6H449.1z"></path></svg>
|
||||
</a>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Model Art by Milky Blanc -->
|
||||
|
||||
<div class="row align-items-center mb-5">
|
||||
|
||||
|
||||
<div class="col-md-4 d-flex justify-content-center">
|
||||
<div class="image-box">
|
||||
<img src="./static/model.png" class="img-fluid rounded" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-8">
|
||||
|
||||
<h2>Model Art</h2>
|
||||
|
||||
<p class="fs-4">by Milky Blanc</p></br>
|
||||
|
||||
<div class="d-flex gap-3">
|
||||
|
||||
<!-- VGen Link -->
|
||||
<a class="svg-link vgen" href="https://vgen.co/m1lkyblanc" target="_blank">
|
||||
<svg class="svg" version="1.0" xmlns="http://www.w3.org/2000/svg" fill="currentcolor" viewBox="18.3 34.08 166.6 150"><g transform="translate(0 200) scale(.1 -.1)"><path d="m1151 1644c-184-49-336-213-374-403l-13-64-58 72c-31 39-74 82-94 96-136 88-327 36-396-108-75-157-30-265 222-529 220-230 387-330 572-345 234-18 483 152 731 498 99 138 112 173 107 275-4 75-9 93-52 180-39 78-63 111-129 177-121 121-227 167-382 166-44 0-104-7-134-15zm246-157c73-38 115-77 172-162 51-76 75-151 64-196-15-59-203-303-299-388-229-202-400-212-631-35-86 66-236 220-318 328-50 65-60 85-60 118s7 46 33 69c18 16 44 29 58 29 35 0 78-24 98-55 39-60 199-235 265-290 88-74 176-125 217-125 30 0 91 20 106 35 4 4-29 48-73 98-94 108-119 164-119 267 0 152 92 280 233 326 68 22 191 13 254-19z"></path><path d="m1183 1304c-46-23-73-71-73-129 0-46 3-50 79-128 43-45 83-77 89-73 27 17 132 169 132 192 0 34-22 73-64 113-43 41-111 52-163 25z"></path></g></svg>
|
||||
</a>
|
||||
|
||||
<!-- Twitter Link -->
|
||||
<a class="svg-link twitter" href="https://twitter.com/m1lkyblanc" target="_blank">
|
||||
<svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0.98 1.48 246.2 200.05"><path d="M221.95 51.29c.15 2.17.15 4.34.15 6.53 0 66.73-50.8 143.69-143.69 143.69v-.04c-27.44.04-54.31-7.82-77.41-22.64 3.99.48 8 .72 12.02.73 22.74.02 44.83-7.61 62.72-21.66-21.61-.41-40.56-14.5-47.18-35.07 7.57 1.46 15.37 1.16 22.8-.87-23.56-4.76-40.51-25.46-40.51-49.5v-.64c7.02 3.91 14.88 6.08 22.92 6.32C11.58 63.31 4.74 33.79 18.14 10.71c25.64 31.55 63.47 50.73 104.08 52.76-4.07-17.54 1.49-35.92 14.61-48.25 20.34-19.12 52.33-18.14 71.45 2.19 11.31-2.23 22.15-6.38 32.07-12.26-3.77 11.69-11.66 21.62-22.2 27.93 10.01-1.18 19.79-3.86 29-7.95-6.78 10.16-15.32 19.01-25.2 26.16z"></path></svg>
|
||||
</a>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- PNG Tuber by YanOrion -->
|
||||
|
||||
<div class="row align-items-center mb-5">
|
||||
|
||||
|
||||
<div class="col-md-4 d-flex justify-content-center">
|
||||
<div class="image-box">
|
||||
<img src="./static/yan.png" class="img-fluid rounded" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-8">
|
||||
|
||||
<h2>PNG Tuber</h2>
|
||||
|
||||
<p class="fs-4">by YanOrion</p></br>
|
||||
|
||||
<div class="d-flex gap-3">
|
||||
|
||||
<!-- Instagram Link -->
|
||||
<a class="svg-link" href="https://www.instagram.com/yanorion/" target="_blank">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 132.004 132" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <linearGradient id="b"> <stop offset="0" stop-color="#3771c8"/> <stop stop-color="#3771c8" offset=".128"/> <stop offset="1" stop-color="#60f" stop-opacity="0"/> </linearGradient> <linearGradient id="a"> <stop offset="0" stop-color="#fd5"/> <stop offset=".1" stop-color="#fd5"/> <stop offset=".5" stop-color="#ff543e"/> <stop offset="1" stop-color="#c837ab"/> </linearGradient> <radialGradient id="c" cx="158.429" cy="578.088" r="65" xlink:href="#a" gradientUnits="userSpaceOnUse" gradientTransform="matrix(0 -1.98198 1.8439 0 -1031.402 454.004)" fx="158.429" fy="578.088"/> <radialGradient id="d" cx="147.694" cy="473.455" r="65" xlink:href="#b" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.17394 .86872 -3.5818 .71718 1648.348 -458.493)" fx="147.694" fy="473.455"/> </defs> <path fill="url(#c)" d="M65.03 0C37.888 0 29.95.028 28.407.156c-5.57.463-9.036 1.34-12.812 3.22-2.91 1.445-5.205 3.12-7.47 5.468C4 13.126 1.5 18.394.595 24.656c-.44 3.04-.568 3.66-.594 19.188-.01 5.176 0 11.988 0 21.125 0 27.12.03 35.05.16 36.59.45 5.42 1.3 8.83 3.1 12.56 3.44 7.14 10.01 12.5 17.75 14.5 2.68.69 5.64 1.07 9.44 1.25 1.61.07 18.02.12 34.44.12 16.42 0 32.84-.02 34.41-.1 4.4-.207 6.955-.55 9.78-1.28 7.79-2.01 14.24-7.29 17.75-14.53 1.765-3.64 2.66-7.18 3.065-12.317.088-1.12.125-18.977.125-36.81 0-17.836-.04-35.66-.128-36.78-.41-5.22-1.305-8.73-3.127-12.44-1.495-3.037-3.155-5.305-5.565-7.624C116.9 4 111.64 1.5 105.372.596 102.335.157 101.73.027 86.19 0H65.03z" transform="translate(1.004 1)"/> <path fill="url(#d)" d="M65.03 0C37.888 0 29.95.028 28.407.156c-5.57.463-9.036 1.34-12.812 3.22-2.91 1.445-5.205 3.12-7.47 5.468C4 13.126 1.5 18.394.595 24.656c-.44 3.04-.568 3.66-.594 19.188-.01 5.176 0 11.988 0 21.125 0 27.12.03 35.05.16 36.59.45 5.42 1.3 8.83 3.1 12.56 3.44 7.14 10.01 12.5 17.75 14.5 2.68.69 5.64 1.07 9.44 1.25 1.61.07 18.02.12 34.44.12 16.42 0 32.84-.02 34.41-.1 4.4-.207 6.955-.55 9.78-1.28 7.79-2.01 14.24-7.29 17.75-14.53 1.765-3.64 2.66-7.18 3.065-12.317.088-1.12.125-18.977.125-36.81 0-17.836-.04-35.66-.128-36.78-.41-5.22-1.305-8.73-3.127-12.44-1.495-3.037-3.155-5.305-5.565-7.624C116.9 4 111.64 1.5 105.372.596 102.335.157 101.73.027 86.19 0H65.03z" transform="translate(1.004 1)"/> <path fill="#fff" d="M66.004 18c-13.036 0-14.672.057-19.792.29-5.11.234-8.598 1.043-11.65 2.23-3.157 1.226-5.835 2.866-8.503 5.535-2.67 2.668-4.31 5.346-5.54 8.502-1.19 3.053-2 6.542-2.23 11.65C18.06 51.327 18 52.964 18 66s.058 14.667.29 19.787c.235 5.11 1.044 8.598 2.23 11.65 1.227 3.157 2.867 5.835 5.536 8.503 2.667 2.67 5.345 4.314 8.5 5.54 3.054 1.187 6.543 1.996 11.652 2.23 5.12.233 6.755.29 19.79.29 13.037 0 14.668-.057 19.788-.29 5.11-.234 8.602-1.043 11.656-2.23 3.156-1.226 5.83-2.87 8.497-5.54 2.67-2.668 4.31-5.346 5.54-8.502 1.18-3.053 1.99-6.542 2.23-11.65.23-5.12.29-6.752.29-19.788 0-13.036-.06-14.672-.29-19.792-.24-5.11-1.05-8.598-2.23-11.65-1.23-3.157-2.87-5.835-5.54-8.503-2.67-2.67-5.34-4.31-8.5-5.535-3.06-1.187-6.55-1.996-11.66-2.23-5.12-.233-6.75-.29-19.79-.29zm-4.306 8.65c1.278-.002 2.704 0 4.306 0 12.816 0 14.335.046 19.396.276 4.68.214 7.22.996 8.912 1.653 2.24.87 3.837 1.91 5.516 3.59 1.68 1.68 2.72 3.28 3.592 5.52.657 1.69 1.44 4.23 1.653 8.91.23 5.06.28 6.58.28 19.39s-.05 14.33-.28 19.39c-.214 4.68-.996 7.22-1.653 8.91-.87 2.24-1.912 3.835-3.592 5.514-1.68 1.68-3.275 2.72-5.516 3.59-1.69.66-4.232 1.44-8.912 1.654-5.06.23-6.58.28-19.396.28-12.817 0-14.336-.05-19.396-.28-4.68-.216-7.22-.998-8.913-1.655-2.24-.87-3.84-1.91-5.52-3.59-1.68-1.68-2.72-3.276-3.592-5.517-.657-1.69-1.44-4.23-1.653-8.91-.23-5.06-.276-6.58-.276-19.398s.046-14.33.276-19.39c.214-4.68.996-7.22 1.653-8.912.87-2.24 1.912-3.84 3.592-5.52 1.68-1.68 3.28-2.72 5.52-3.592 1.692-.66 4.233-1.44 8.913-1.655 4.428-.2 6.144-.26 15.09-.27zm29.928 7.97c-3.18 0-5.76 2.577-5.76 5.758 0 3.18 2.58 5.76 5.76 5.76 3.18 0 5.76-2.58 5.76-5.76 0-3.18-2.58-5.76-5.76-5.76zm-25.622 6.73c-13.613 0-24.65 11.037-24.65 24.65 0 13.613 11.037 24.645 24.65 24.645C79.617 90.645 90.65 79.613 90.65 66S79.616 41.35 66.003 41.35zm0 8.65c8.836 0 16 7.163 16 16 0 8.836-7.164 16-16 16-8.837 0-16-7.164-16-16 0-8.837 7.163-16 16-16z"/></svg>
|
||||
</a>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Postkarte by lontongs_ -->
|
||||
|
||||
<div class="row align-items-center mb-5">
|
||||
|
||||
|
||||
<div class="col-md-4 d-flex justify-content-center">
|
||||
<div class="image-box">
|
||||
<img src="./static/postkarte.png" class="img-fluid rounded" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-8">
|
||||
|
||||
<h2>Sweaty Jax Postkarte</h2>
|
||||
|
||||
<p class="fs-4">by lontongs_</p></br>
|
||||
|
||||
<div class="d-flex gap-3">
|
||||
|
||||
<!-- Twitter Link -->
|
||||
<a class="svg-link twitter" href="https://twitter.com/Lontongs_" target="_blank">
|
||||
<svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0.98 1.48 246.2 200.05"><path d="M221.95 51.29c.15 2.17.15 4.34.15 6.53 0 66.73-50.8 143.69-143.69 143.69v-.04c-27.44.04-54.31-7.82-77.41-22.64 3.99.48 8 .72 12.02.73 22.74.02 44.83-7.61 62.72-21.66-21.61-.41-40.56-14.5-47.18-35.07 7.57 1.46 15.37 1.16 22.8-.87-23.56-4.76-40.51-25.46-40.51-49.5v-.64c7.02 3.91 14.88 6.08 22.92 6.32C11.58 63.31 4.74 33.79 18.14 10.71c25.64 31.55 63.47 50.73 104.08 52.76-4.07-17.54 1.49-35.92 14.61-48.25 20.34-19.12 52.33-18.14 71.45 2.19 11.31-2.23 22.15-6.38 32.07-12.26-3.77 11.69-11.66 21.62-22.2 27.93 10.01-1.18 19.79-3.86 29-7.95-6.78 10.16-15.32 19.01-25.2 26.16z"></path></svg>
|
||||
</a>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Visitenkarte by sleepingglitch -->
|
||||
|
||||
<div class="row align-items-center mb-5">
|
||||
|
||||
|
||||
<div class="col-md-4 d-flex justify-content-center">
|
||||
<div class="image-box">
|
||||
<img src="./static/visitenkarte.png" class="img-fluid rounded" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-8">
|
||||
|
||||
<h2>Visitenkarte</h2>
|
||||
|
||||
<p class="fs-4">by sleepingglitch</p></br>
|
||||
|
||||
<div class="d-flex gap-3">
|
||||
|
||||
<!-- VGen Link -->
|
||||
<a class="svg-link vgen" href="https://vgen.co/sleepingglitch" target="_blank">
|
||||
<svg class="svg" version="1.0" xmlns="http://www.w3.org/2000/svg" fill="currentcolor" viewBox="18.3 34.08 166.6 150"><g transform="translate(0 200) scale(.1 -.1)"><path d="m1151 1644c-184-49-336-213-374-403l-13-64-58 72c-31 39-74 82-94 96-136 88-327 36-396-108-75-157-30-265 222-529 220-230 387-330 572-345 234-18 483 152 731 498 99 138 112 173 107 275-4 75-9 93-52 180-39 78-63 111-129 177-121 121-227 167-382 166-44 0-104-7-134-15zm246-157c73-38 115-77 172-162 51-76 75-151 64-196-15-59-203-303-299-388-229-202-400-212-631-35-86 66-236 220-318 328-50 65-60 85-60 118s7 46 33 69c18 16 44 29 58 29 35 0 78-24 98-55 39-60 199-235 265-290 88-74 176-125 217-125 30 0 91 20 106 35 4 4-29 48-73 98-94 108-119 164-119 267 0 152 92 280 233 326 68 22 191 13 254-19z"></path><path d="m1183 1304c-46-23-73-71-73-129 0-46 3-50 79-128 43-45 83-77 89-73 27 17 132 169 132 192 0 34-22 73-64 113-43 41-111 52-163 25z"></path></g></svg>
|
||||
</a>
|
||||
|
||||
<!-- Twitter Link -->
|
||||
<a class="svg-link twitter" href="https://twitter.com/sleepingglitch" target="_blank">
|
||||
<svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0.98 1.48 246.2 200.05"><path d="M221.95 51.29c.15 2.17.15 4.34.15 6.53 0 66.73-50.8 143.69-143.69 143.69v-.04c-27.44.04-54.31-7.82-77.41-22.64 3.99.48 8 .72 12.02.73 22.74.02 44.83-7.61 62.72-21.66-21.61-.41-40.56-14.5-47.18-35.07 7.57 1.46 15.37 1.16 22.8-.87-23.56-4.76-40.51-25.46-40.51-49.5v-.64c7.02 3.91 14.88 6.08 22.92 6.32C11.58 63.31 4.74 33.79 18.14 10.71c25.64 31.55 63.47 50.73 104.08 52.76-4.07-17.54 1.49-35.92 14.61-48.25 20.34-19.12 52.33-18.14 71.45 2.19 11.31-2.23 22.15-6.38 32.07-12.26-3.77 11.69-11.66 21.62-22.2 27.93 10.01-1.18 19.79-3.86 29-7.95-6.78 10.16-15.32 19.01-25.2 26.16z"></path></svg>
|
||||
</a>
|
||||
|
||||
<!-- Twitch Link -->
|
||||
<a class="svg-link twitch" href="https://twitch.tv/sleepingglitch_" target="_blank">
|
||||
<svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="24.27 0 463.45 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M391.2 103.5H352.5v109.7h38.6zM285 103H246.4V212.8H285zM120.8 0 24.3 91.4V420.6H140.1V512l96.5-91.4h77.3L487.7 256V0zM449.1 237.8l-77.2 73.1H294.6l-67.6 64v-64H140.1V36.6H449.1z"></path></svg>
|
||||
</a>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<br>
|
||||
<hr>
|
||||
<footer class="footer">
|
||||
<p>♥ ur artists :3</p>
|
||||
<p>© JaxOffTV
|
||||
<script>document.write(new Date().getFullYear())</script>
|
||||
</p>
|
||||
</footer>
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
119
js/background.js
119
js/background.js
|
|
@ -1,119 +0,0 @@
|
|||
(() => {
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
const canvas = document.getElementById("backgroundCanvas");
|
||||
if (!canvas) return;
|
||||
|
||||
if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
|
||||
|
||||
const ctx = canvas.getContext("2d", { alpha: true, desynchronized: true });
|
||||
|
||||
const isMobile = window.matchMedia("(max-width: 768px)").matches;
|
||||
const DPR_CAP = Math.min(1.5, isMobile ? 1.0 : 1.25);
|
||||
|
||||
const getOrbCount = () => {
|
||||
const baseCount = Math.floor((window.innerWidth * window.innerHeight) / 40000);
|
||||
return Math.min(Math.max(baseCount, isMobile ? 15 : 25), isMobile ? 30 : 50);
|
||||
};
|
||||
|
||||
const R_MIN = isMobile ? 3 : 4;
|
||||
const R_MAX = isMobile ? 8 : 12;
|
||||
const SPEED = isMobile ? 0.08 : 0.12;
|
||||
|
||||
const PINK = [245, 169, 184];
|
||||
const BLUE = [91, 207, 250];
|
||||
|
||||
let w = 0, h = 0, dpr = 1;
|
||||
let orbs = [];
|
||||
let raf = 0;
|
||||
let last = 0;
|
||||
|
||||
function resize() {
|
||||
w = window.innerWidth;
|
||||
h = window.innerHeight;
|
||||
|
||||
dpr = Math.min(DPR_CAP, window.devicePixelRatio || 1);
|
||||
canvas.width = Math.floor(w * dpr);
|
||||
canvas.height = Math.floor(h * dpr);
|
||||
canvas.style.width = w + "px";
|
||||
canvas.style.height = h + "px";
|
||||
|
||||
ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
|
||||
createOrbs();
|
||||
last = 0;
|
||||
}
|
||||
|
||||
function createOrbs() {
|
||||
const count = getOrbCount();
|
||||
orbs = new Array(count);
|
||||
|
||||
for (let i = 0; i < count; i++) {
|
||||
const r = Math.random() * (R_MAX - R_MIN) + R_MIN;
|
||||
const color = Math.random() > 0.5 ? PINK : BLUE;
|
||||
orbs[i] = {
|
||||
x: Math.random() * w,
|
||||
y: Math.random() * h,
|
||||
r,
|
||||
a: Math.random() * 0.15 + 0.4,
|
||||
vx: (Math.random() - 0.5) * SPEED,
|
||||
vy: (Math.random() - 0.5) * SPEED,
|
||||
color: color
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
function step() {
|
||||
ctx.clearRect(0, 0, w, h);
|
||||
|
||||
for (let i = 0; i < orbs.length; i++) {
|
||||
const o = orbs[i];
|
||||
o.x += o.vx;
|
||||
o.y += o.vy;
|
||||
|
||||
const margin = o.r * 3;
|
||||
if (o.x < -margin) o.x = w + margin;
|
||||
else if (o.x > w + margin) o.x = -margin;
|
||||
if (o.y < -margin) o.y = h + margin;
|
||||
else if (o.y > h + margin) o.y = -margin;
|
||||
|
||||
ctx.beginPath();
|
||||
ctx.arc(o.x, o.y, o.r, 0, Math.PI * 2);
|
||||
ctx.fillStyle = `rgba(${o.color[0]}, ${o.color[1]}, ${o.color[2]}, ${o.a})`;
|
||||
ctx.fill();
|
||||
}
|
||||
}
|
||||
|
||||
function tick(now) {
|
||||
if (document.hidden) {
|
||||
raf = 0;
|
||||
return;
|
||||
}
|
||||
|
||||
if (!last) last = now;
|
||||
if (now - last >= 16) {
|
||||
last = now;
|
||||
step();
|
||||
}
|
||||
|
||||
raf = requestAnimationFrame(tick);
|
||||
}
|
||||
|
||||
let resizeTimer;
|
||||
window.addEventListener("resize", () => {
|
||||
clearTimeout(resizeTimer);
|
||||
resizeTimer = setTimeout(resize, 150);
|
||||
}, { passive: true });
|
||||
|
||||
document.addEventListener("visibilitychange", () => {
|
||||
if (document.hidden) {
|
||||
cancelAnimationFrame(raf);
|
||||
raf = 0;
|
||||
} else if (!raf) {
|
||||
last = 0;
|
||||
raf = requestAnimationFrame(tick);
|
||||
}
|
||||
});
|
||||
|
||||
resize();
|
||||
raf = requestAnimationFrame(tick);
|
||||
});
|
||||
})();
|
||||
146
js/main.js
146
js/main.js
|
|
@ -1,146 +0,0 @@
|
|||
(() => {
|
||||
document.addEventListener("DOMContentLoaded", init);
|
||||
|
||||
async function init() {
|
||||
document.getElementById("currentYear").textContent = new Date().getFullYear();
|
||||
await loadArtists();
|
||||
}
|
||||
|
||||
async function loadArtists() {
|
||||
const loadingEl = document.getElementById("loading");
|
||||
const errorEl = document.getElementById("error");
|
||||
const gridEl = document.getElementById("artistGrid");
|
||||
|
||||
errorEl.style.display = "none";
|
||||
loadingEl.style.display = "block";
|
||||
|
||||
try {
|
||||
const url = `./data/artists.json?v=${Date.now()}`;
|
||||
const res = await fetch(url, {
|
||||
cache: "no-store",
|
||||
headers: { "Accept": "application/json" }
|
||||
});
|
||||
|
||||
if (!res.ok) {
|
||||
throw new Error(`artists.json fetch failed: ${res.status} ${res.statusText}`);
|
||||
}
|
||||
|
||||
const artists = await res.json();
|
||||
|
||||
loadingEl.style.display = "none";
|
||||
|
||||
if (!Array.isArray(artists) || artists.length === 0) {
|
||||
gridEl.innerHTML = '<p class="error">Keine Künstler-Daten verfügbar.</p>';
|
||||
return;
|
||||
}
|
||||
|
||||
const frag = document.createDocumentFragment();
|
||||
for (const artist of artists) {
|
||||
frag.appendChild(createArtistCardNode(artist));
|
||||
}
|
||||
|
||||
gridEl.replaceChildren(frag);
|
||||
|
||||
} catch (err) {
|
||||
console.error("Error loading artists:", err);
|
||||
|
||||
loadingEl.style.display = "none";
|
||||
errorEl.style.display = "block";
|
||||
|
||||
gridEl.textContent = "";
|
||||
}
|
||||
}
|
||||
|
||||
function createArtistCardNode(artist) {
|
||||
const article = document.createElement("article");
|
||||
article.className = "artist-card";
|
||||
|
||||
const inner = document.createElement("div");
|
||||
inner.className = "card-inner";
|
||||
|
||||
const imageContainer = document.createElement("div");
|
||||
imageContainer.className = "image-container";
|
||||
if (artist.orientation) {
|
||||
imageContainer.classList.add(artist.orientation);
|
||||
}
|
||||
|
||||
const img = document.createElement("img");
|
||||
img.className = "artist-image";
|
||||
img.src = artist.image;
|
||||
img.alt = `${artist.role} von ${artist.name}`;
|
||||
img.loading = "lazy";
|
||||
img.decoding = "async";
|
||||
img.dataset.orientation = artist.orientation || 'auto';
|
||||
|
||||
imageContainer.appendChild(img);
|
||||
|
||||
const content = document.createElement("div");
|
||||
content.className = "content";
|
||||
|
||||
const name = document.createElement("h2");
|
||||
name.className = "artist-name";
|
||||
name.textContent = artist.name;
|
||||
|
||||
const role = document.createElement("div");
|
||||
role.className = "artist-role";
|
||||
role.textContent = artist.role;
|
||||
|
||||
const desc = document.createElement("p");
|
||||
desc.className = "artist-description";
|
||||
desc.textContent = artist.description ?? "";
|
||||
|
||||
content.appendChild(name);
|
||||
content.appendChild(role);
|
||||
content.appendChild(desc);
|
||||
|
||||
const links = createSocialLinksNode(artist.links);
|
||||
if (links) content.appendChild(links);
|
||||
|
||||
inner.appendChild(imageContainer);
|
||||
inner.appendChild(content);
|
||||
article.appendChild(inner);
|
||||
|
||||
return article;
|
||||
}
|
||||
|
||||
function createSocialLinksNode(links) {
|
||||
if (!links) return null;
|
||||
|
||||
const wrap = document.createElement("div");
|
||||
wrap.className = "social-links";
|
||||
|
||||
const order = ["vgen", "twitter", "bluesky", "youtube", "twitch", "instagram", "fiverr", "website"];
|
||||
for (const platform of order) {
|
||||
if (!links[platform]) continue;
|
||||
wrap.appendChild(createIconLink(platform, links[platform]));
|
||||
}
|
||||
|
||||
return wrap.childElementCount ? wrap : null;
|
||||
}
|
||||
|
||||
function createIconLink(platform, url) {
|
||||
const a = document.createElement("a");
|
||||
a.href = url;
|
||||
a.className = `social-link ${platform}`;
|
||||
a.target = "_blank";
|
||||
a.rel = "noopener";
|
||||
a.ariaLabel = platform;
|
||||
|
||||
a.innerHTML = getPlatformSvg(platform);
|
||||
return a;
|
||||
}
|
||||
|
||||
function getPlatformSvg(platform) {
|
||||
const svgs = {
|
||||
vgen: `<svg width="20" height="20" viewBox="18.3 34.08 166.6 150" fill="currentColor" aria-hidden="true" focusable="false"><g transform="translate(0 200) scale(.1 -.1)"><path d="m1151 1644c-184-49-336-213-374-403l-13-64-58 72c-31 39-74 82-94 96-136 88-327 36-396-108-75-157-30-265 222-529 220-230 387-330 572-345 234-18 483 152 731 498 99 138 112 173 107 275-4 75-9 93-52 180-39 78-63 111-129 177-121 121-227 167-382 166-44 0-104-7-134-15zm246-157c73-38 115-77 172-162 51-76 75-151 64-196-15-59-203-303-299-388-229-202-400-212-631-35-86 66-236 220-318 328-50 65-60 85-60 118s7 46 33 69c18 16 44 29 58 29 35 0 78-24 98-55 39-60 199-235 265-290 88-74 176-125 217-125 30 0 91 20 106 35 4 4-29 48-73 98-94 108-119 164-119 267 0 152 92 280 233 326 68 22 191 13 254-19z"></path><path d="m1183 1304c-46-23-73-71-73-129 0-46 3-50 79-128 43-45 83-77 89-73 27 17 132 169 132 192 0 34-22 73-64 113-43 41-111 52-163 25z"></path></g></svg>`,
|
||||
twitter: `<svg width="20" height="20" viewBox="0.98 1.48 246.2 200.05" fill="currentColor" aria-hidden="true" focusable="false"><path d="M221.95 51.29c.15 2.17.15 4.34.15 6.53 0 66.73-50.8 143.69-143.69 143.69v-.04c-27.44.04-54.31-7.82-77.41-22.64 3.99.48 8 .72 12.02.73 22.74.02 44.83-7.61 62.72-21.66-21.61-.41-40.56-14.5-47.18-35.07 7.57 1.46 15.37 1.16 22.8-.87-23.56-4.76-40.51-25.46-40.51-49.5v-.64c7.02 3.91 14.88 6.08 22.92 6.32C11.58 63.31 4.74 33.79 18.14 10.71c25.64 31.55 63.47 50.73 104.08 52.76-4.07-17.54 1.49-35.92 14.61-48.25 20.34-19.12 52.33-18.14 71.45 2.19 11.31-2.23 22.15-6.38 32.07-12.26-3.77 11.69-11.66 21.62-22.2 27.93 10.01-1.18 19.79-3.86 29-7.95-6.78 10.16-15.32 19.01-25.2 26.16z"></path></svg>`,
|
||||
bluesky: `<svg width="20" height="20" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" focusable="false"><path d="M3.468 1.948C5.303 3.325 7.276 6.118 8 7.616c.725-1.498 2.698-4.29 4.532-5.668C13.855.955 16 .186 16 2.632c0 .489-.28 4.105-.444 4.692-.572 2.04-2.653 2.561-4.504 2.246 3.236.551 4.06 2.375 2.281 4.2-3.376 3.464-4.852-.87-5.23-1.98-.07-.204-.103-.3-.103-.218 0-.081-.033.014-.102.218-.379 1.11-1.855 5.444-5.231 1.98-1.778-1.825-.955-3.65 2.28-4.2-1.85.315-3.932-.205-4.503-2.246C.28 6.737 0 3.12 0 2.632 0 .186 2.145.955 3.468 1.948"/></svg>`,
|
||||
youtube: `<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" focusable="false"><path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"></path></svg>`,
|
||||
twitch: `<svg width="20" height="20" viewBox="24.27 0 463.45 512" fill="currentColor" aria-hidden="true" focusable="false"><path d="M391.2 103.5H352.5v109.7h38.6zM285 103H246.4V212.8H285zM120.8 0 24.3 91.4V420.6H140.1V512l96.5-91.4h77.3L487.7 256V0zM449.1 237.8l-77.2 73.1H294.6l-67.6 64v-64H140.1V36.6H449.1z"></path></svg>`,
|
||||
instagram: `<svg width="20" height="20" viewBox="0 0 448 512" fill="currentColor" aria-hidden="true" focusable="false"><path d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z"></path></svg>`,
|
||||
fiverr: `<svg width="20" height="20" viewBox="-2.5 -2 24 24" fill="currentColor" aria-hidden="true" focusable="false"><path d="M16.25 16.25v-10h-10v-.625c0-1.034.841-1.875 1.875-1.875H10V0H8.125A5.632 5.632 0 0 0 2.5 5.625v.625H0V10h2.5v6.25H0V20h8.75v-3.75h-2.5V10h6.285v6.25H10V20h8.75v-3.75h-2.5z"/><circle cx="14.375" cy="1.875" r="1.875"/></svg>`,
|
||||
website: `<svg width="20" height="20" viewBox="0 0 640 640" fill="currentColor" aria-hidden="true" focusable="false"><path d="M415.9 344L225 344C227.9 408.5 242.2 467.9 262.5 511.4C273.9 535.9 286.2 553.2 297.6 563.8C308.8 574.3 316.5 576 320.5 576C324.5 576 332.2 574.3 343.4 563.8C354.8 553.2 367.1 535.8 378.5 511.4C398.8 467.9 413.1 408.5 416 344zM224.9 296L415.8 296C413 231.5 398.7 172.1 378.4 128.6C367 104.2 354.7 86.8 343.3 76.2C332.1 65.7 324.4 64 320.4 64C316.4 64 308.7 65.7 297.5 76.2C286.1 86.8 273.8 104.2 262.4 128.6C242.1 172.1 227.8 231.5 224.9 296zM176.9 296C180.4 210.4 202.5 130.9 234.8 78.7C142.7 111.3 74.9 195.2 65.5 296L176.9 296zM65.5 344C74.9 444.8 142.7 528.7 234.8 561.3C202.5 509.1 180.4 429.6 176.9 344L65.5 344zM463.9 344C460.4 429.6 438.3 509.1 406 561.3C498.1 528.6 565.9 444.8 575.3 344L463.9 344zM575.3 296C565.9 195.2 498.1 111.3 406 78.7C438.3 130.9 460.4 210.4 463.9 296L575.3 296z"/></svg>`
|
||||
}
|
||||
return svgs[platform] || "";
|
||||
}
|
||||
})();
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 936 KiB |
|
Before Width: | Height: | Size: 142 KiB After Width: | Height: | Size: 142 KiB |
|
Before Width: | Height: | Size: 909 KiB After Width: | Height: | Size: 909 KiB |
|
Before Width: | Height: | Size: 741 KiB After Width: | Height: | Size: 741 KiB |
|
Before Width: | Height: | Size: 119 KiB After Width: | Height: | Size: 119 KiB |
|
Before Width: | Height: | Size: 206 KiB After Width: | Height: | Size: 206 KiB |
|
Before Width: | Height: | Size: 190 KiB After Width: | Height: | Size: 190 KiB |
Loading…
Reference in New Issue