completely new site lol
This commit is contained in:
alyx
parent
6374b783ea
commit
765bcec580
Binary file not shown.
|
After Width: | Height: | Size: 68 KiB |
|
Before Width: | Height: | Size: 1.0 MiB After Width: | Height: | Size: 1.0 MiB |
|
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: 154 KiB After Width: | Height: | Size: 154 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: 747 KiB After Width: | Height: | Size: 747 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 |
|
|
@ -1,83 +0,0 @@
|
|||
: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 {
|
||||
color: #f5a9b8;
|
||||
}
|
||||
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: flex;
|
||||
width: auto;
|
||||
height: 3em;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.separator, .source {
|
||||
color: #f2f5f4;
|
||||
text-align: center;
|
||||
margin: 25px auto;
|
||||
margin-top: 20px;
|
||||
width: 90%;
|
||||
max-width: 500px;
|
||||
}
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
.twitch {
|
||||
color: #9146ff;
|
||||
}
|
||||
|
||||
.twitter {
|
||||
color: #1DA1F2;
|
||||
}
|
||||
|
||||
.vgen {
|
||||
color: #B8FF26;
|
||||
}
|
||||
|
||||
.website {
|
||||
color: #f5a9b8;
|
||||
}
|
||||
|
||||
.bsky {
|
||||
color: #1185FE;
|
||||
}
|
||||
|
|
@ -0,0 +1,453 @@
|
|||
* {
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,96 @@
|
|||
[
|
||||
{
|
||||
"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_"
|
||||
}
|
||||
}
|
||||
|
||||
]
|
||||
371
index.html
371
index.html
|
|
@ -1,336 +1,67 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<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">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>JaxOff 🌸💦 Artist Credits</title>
|
||||
|
||||
<!-- 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="preload" as="image" href="./assets/jaxoff_logo.png" />
|
||||
|
||||
<link rel="stylesheet" href="./css/styles.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<canvas class="background-canvas" id="backgroundCanvas" aria-hidden="true"></canvas>
|
||||
|
||||
<div class="container py-5">
|
||||
<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
|
||||
</a>
|
||||
|
||||
<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>
|
||||
<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>
|
||||
|
||||
<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>
|
||||
|
||||
<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>
|
||||
</div>
|
||||
<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>
|
||||
|
||||
<!-- 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 & Sticker Designs</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>
|
||||
|
||||
<!-- Bsky Link -->
|
||||
<a class="svg-link bsky" href="https://bsky.app/profile/yumeshirokuro.bsky.social" target="_blank">
|
||||
<svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--!Font Awesome Free v7.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.--><path d="M439.8 358.7C436.5 358.3 433.1 357.9 429.8 357.4C433.2 357.8 436.5 358.3 439.8 358.7zM320 291.1C293.9 240.4 222.9 145.9 156.9 99.3C93.6 54.6 69.5 62.3 53.6 69.5C35.3 77.8 32 105.9 32 122.4C32 138.9 41.1 258 47 277.9C66.5 343.6 136.1 365.8 200.2 358.6C203.5 358.1 206.8 357.7 210.2 357.2C206.9 357.7 203.6 358.2 200.2 358.6C106.3 372.6 22.9 406.8 132.3 528.5C252.6 653.1 297.1 501.8 320 425.1C342.9 501.8 369.2 647.6 505.6 528.5C608 425.1 533.7 372.5 439.8 358.6C436.5 358.2 433.1 357.8 429.8 357.3C433.2 357.7 436.5 358.2 439.8 358.6C503.9 365.7 573.4 343.5 593 277.9C598.9 258 608 139 608 122.4C608 105.8 604.7 77.7 586.4 69.5C570.6 62.4 546.4 54.6 483.2 99.3C417.1 145.9 346.1 240.4 320 291.1z"/></svg>
|
||||
</a>
|
||||
|
||||
<!-- 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>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 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, Stream Overlay, Schedule, Rigging, Splat Emote & <a href="https://vsona.co/Elftwink" target="_blank">Refsheet</a></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>
|
||||
|
||||
<!-- Bsky Link -->
|
||||
<a class="svg-link bsky" href="https://bsky.app/profile/a3lis.bsky.social" target="_blank">
|
||||
<svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--!Font Awesome Free v7.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.--><path d="M439.8 358.7C436.5 358.3 433.1 357.9 429.8 357.4C433.2 357.8 436.5 358.3 439.8 358.7zM320 291.1C293.9 240.4 222.9 145.9 156.9 99.3C93.6 54.6 69.5 62.3 53.6 69.5C35.3 77.8 32 105.9 32 122.4C32 138.9 41.1 258 47 277.9C66.5 343.6 136.1 365.8 200.2 358.6C203.5 358.1 206.8 357.7 210.2 357.2C206.9 357.7 203.6 358.2 200.2 358.6C106.3 372.6 22.9 406.8 132.3 528.5C252.6 653.1 297.1 501.8 320 425.1C342.9 501.8 369.2 647.6 505.6 528.5C608 425.1 533.7 372.5 439.8 358.6C436.5 358.2 433.1 357.8 429.8 357.3C433.2 357.7 436.5 358.2 439.8 358.6C503.9 365.7 573.4 343.5 593 277.9C598.9 258 608 139 608 122.4C608 105.8 604.7 77.7 586.4 69.5C570.6 62.4 546.4 54.6 483.2 99.3C417.1 145.9 346.1 240.4 320 291.1z"/></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>
|
||||
|
||||
<!-- Sticker Design by Nessai -->
|
||||
|
||||
<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/nessa.png" class="img-fluid rounded" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-8">
|
||||
|
||||
<h2>Sticker Design</h2>
|
||||
|
||||
<p class="fs-4">by Nessai</p></br>
|
||||
|
||||
<div class="d-flex gap-3">
|
||||
|
||||
<!-- Website Link -->
|
||||
<a class="svg-link website" href="https://nessai.carrd.co/" target="_blank">
|
||||
<svg class="svg" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--!Font Awesome Free v7.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.--><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>
|
||||
</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>
|
||||
|
||||
|
||||
<!-- Sweaty 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/sweaty_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>
|
||||
|
||||
<!-- Christmas Postkarte by OriOttero -->
|
||||
|
||||
<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/xmas_postkarte.png" class="img-fluid rounded" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-8">
|
||||
|
||||
<h2>Christmas Jax Postkarte</h2>
|
||||
|
||||
<p class="fs-4">by OriOttero</p></br>
|
||||
|
||||
<div class="d-flex gap-3">
|
||||
|
||||
<!-- Bsky Link -->
|
||||
<a class="svg-link bsky" href="https://bsky.app/profile/oriottero.orifans.com" target="_blank">
|
||||
<svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--!Font Awesome Free v7.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.--><path d="M439.8 358.7C436.5 358.3 433.1 357.9 429.8 357.4C433.2 357.8 436.5 358.3 439.8 358.7zM320 291.1C293.9 240.4 222.9 145.9 156.9 99.3C93.6 54.6 69.5 62.3 53.6 69.5C35.3 77.8 32 105.9 32 122.4C32 138.9 41.1 258 47 277.9C66.5 343.6 136.1 365.8 200.2 358.6C203.5 358.1 206.8 357.7 210.2 357.2C206.9 357.7 203.6 358.2 200.2 358.6C106.3 372.6 22.9 406.8 132.3 528.5C252.6 653.1 297.1 501.8 320 425.1C342.9 501.8 369.2 647.6 505.6 528.5C608 425.1 533.7 372.5 439.8 358.6C436.5 358.2 433.1 357.8 429.8 357.3C433.2 357.7 436.5 358.2 439.8 358.6C503.9 365.7 573.4 343.5 593 277.9C598.9 258 608 139 608 122.4C608 105.8 604.7 77.7 586.4 69.5C570.6 62.4 546.4 54.6 483.2 99.3C417.1 145.9 346.1 240.4 320 291.1z"/></svg>
|
||||
</a>
|
||||
|
||||
<!-- Twitch Link -->
|
||||
<a class="svg-link twitch" href="https://twitch.tv/oriottero" 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>
|
||||
|
||||
<!-- Website Link -->
|
||||
<a class="svg-link website" href="https://orifans.com/" target="_blank">
|
||||
<svg class="svg" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--!Font Awesome Free v7.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.--><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>
|
||||
</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="source" aria-label="Footer information">
|
||||
<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>
|
||||
<script src="./js/background.js" defer></script>
|
||||
<script src="./js/main.js" defer></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,119 @@
|
|||
(() => {
|
||||
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);
|
||||
});
|
||||
})();
|
||||
|
|
@ -0,0 +1,146 @@
|
|||
(() => {
|
||||
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] || "";
|
||||
}
|
||||
})();
|
||||
Loading…
Reference in New Issue