changed entire site, updated design to jaxtavi
This commit is contained in:
parent
1937a9ba16
commit
4903df4027
Binary file not shown.
|
After Width: | Height: | Size: 68 KiB |
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 142 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 228 KiB |
|
|
@ -1,72 +0,0 @@
|
||||||
body {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.palette {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
justify-content: center;
|
|
||||||
margin-bottom: 40px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.color {
|
|
||||||
width: 150px;
|
|
||||||
height: 150px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
color: white;
|
|
||||||
border-radius: 10px;
|
|
||||||
margin: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.light {
|
|
||||||
color: black;
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
color: #F5A9B8;
|
|
||||||
text-decoration: none;
|
|
||||||
transition: color 0.3s;
|
|
||||||
}
|
|
||||||
|
|
||||||
a:hover {
|
|
||||||
color: #5BCEFA;
|
|
||||||
}
|
|
||||||
|
|
||||||
a:visited {
|
|
||||||
color: #5BCEFA;
|
|
||||||
}
|
|
||||||
|
|
||||||
.popup {
|
|
||||||
display: none;
|
|
||||||
position: fixed;
|
|
||||||
top: 50%;
|
|
||||||
left: 50%;
|
|
||||||
transform: translate(-50%, -50%);
|
|
||||||
padding: 20px;
|
|
||||||
background-color: #040404;
|
|
||||||
color: white;
|
|
||||||
border-radius: 10px;
|
|
||||||
border-color: #fff;
|
|
||||||
z-index: 1000;
|
|
||||||
}
|
|
||||||
|
|
||||||
.logo {
|
|
||||||
width: 5vw;
|
|
||||||
margin: 0 auto;
|
|
||||||
display: block;
|
|
||||||
margin-top: 3em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.fa-link {
|
|
||||||
color: #545454;
|
|
||||||
}
|
|
||||||
|
|
||||||
.jax {
|
|
||||||
color: #a8c5db;
|
|
||||||
}
|
|
||||||
|
|
||||||
.overlay {
|
|
||||||
color: #6D51E3;
|
|
||||||
}
|
|
||||||
|
|
@ -0,0 +1,274 @@
|
||||||
|
* {
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (prefers-reduced-motion: reduce) {
|
||||||
|
.artist-card,
|
||||||
|
.social-link,
|
||||||
|
.back-button {
|
||||||
|
transition: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.palette {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: center;
|
||||||
|
margin-bottom: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.color {
|
||||||
|
width: 150px;
|
||||||
|
height: 150px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
color: white;
|
||||||
|
border-radius: 10px;
|
||||||
|
margin: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.light {
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
|
||||||
|
.popup {
|
||||||
|
display: none;
|
||||||
|
position: fixed;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
padding: 20px;
|
||||||
|
background-color: #040404;
|
||||||
|
color: white;
|
||||||
|
border-radius: 10px;
|
||||||
|
border-color: #fff;
|
||||||
|
z-index: 1000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.jax {
|
||||||
|
color: #a8c5db;
|
||||||
|
}
|
||||||
|
|
||||||
|
.overlay {
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.outline {
|
||||||
|
outline: 1px solid white;
|
||||||
|
}
|
||||||
BIN
images/logo.png
BIN
images/logo.png
Binary file not shown.
|
Before Width: | Height: | Size: 1.2 MiB |
106
index.html
106
index.html
|
|
@ -1,33 +1,78 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="de">
|
||||||
|
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>Wow, so many pwetty colours owo</title>
|
|
||||||
<link rel="stylesheet" href="https://cdn.simplecss.org/simple.min.css">
|
<link rel="shortcut icon" href="./assets/star_favicon.ico" type="image/webp">
|
||||||
<link rel="stylesheet" href="./css/custom.css">
|
<link rel="apple-touch-icon" sizes="180x180" href="./assets/star_favicon.ico">
|
||||||
<script src="https://kit.fontawesome.com/14a35c233c.js" crossorigin="anonymous"></script>
|
<link rel="icon" href="./assets/star_favicon.ico" type="image/webp">
|
||||||
|
|
||||||
|
|
||||||
|
<title>11twink Colours</title>
|
||||||
|
|
||||||
|
<link rel="preload" as="image" href="./assets/jaxoff_logo.png" />
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="./css/styles.css" />
|
||||||
|
|
||||||
|
<!-- Open Graph / Facebook -->
|
||||||
|
<meta property="og:type" content="website">
|
||||||
|
<meta property="og:url" content="https://c.11tw.ink">
|
||||||
|
<meta property="og:title" content="11twink Colours">
|
||||||
|
<meta property="og:description" content="Ein paar Farben die ich so regelmäßig für Stuff benutze :3">
|
||||||
|
<meta property="og:image" content="https://c.11tw.ink/images/jaxoff_logo.png">
|
||||||
|
<meta property="og:site_name" content="11twink Colours">
|
||||||
|
|
||||||
|
<!-- Twitter -->
|
||||||
|
<meta property="twitter:card" content="summary_large_image">
|
||||||
|
<meta property="twitter:url" content="https://c.11tw.ink">
|
||||||
|
<meta property="twitter:title" content="11twink Colours">
|
||||||
|
<meta property="twitter:description" content="Ein paar Farben die ich so regelmäßig für Stuff benutze :3">
|
||||||
|
<meta property="twitter:image" content="https://c.11tw.ink/images/jaxoff_logo.png">
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<svg style="width:0;height:0;position:absolute;" aria-hidden="true" focusable="false">
|
|
||||||
<linearGradient id="logo-gradient" x2="1" y2="1">
|
<canvas class="background-canvas" id="backgroundCanvas" aria-hidden="true"></canvas>
|
||||||
<stop offset="0%" stop-color="#f5a9b8" />
|
|
||||||
<stop offset="30%" stop-color="#f5a9b8" />
|
<div class="main-container">
|
||||||
<stop offset="100%" stop-color="#5bcffa" />
|
<header class="header">
|
||||||
</linearGradient>
|
<a href="https://11tw.ink/" 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>
|
</svg>
|
||||||
<div class="popup" id="popup"> Copied color: <span id="popupText"></span> </div>
|
Zurück zu 11tw.ink
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="logo" fill="url(#logo-gradient) #ffffff"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M512 256c0 .9 0 1.8 0 2.7c-.4 36.5-33.6 61.3-70.1 61.3L344 320c-26.5 0-48 21.5-48 48c0 3.4 .4 6.7 1 9.9c2.1 10.2 6.5 20 10.8 29.9c6.1 13.8 12.1 27.5 12.1 42c0 31.8-21.6 60.7-53.4 62c-3.5 .1-7 .2-10.6 .2C114.6 512 0 397.4 0 256S114.6 0 256 0S512 114.6 512 256zM128 288a32 32 0 1 0 -64 0 32 32 0 1 0 64 0zm0-96a32 32 0 1 0 0-64 32 32 0 1 0 0 64zM288 96a32 32 0 1 0 -64 0 32 32 0 1 0 64 0zm96 96a32 32 0 1 0 0-64 32 32 0 1 0 0 64z"/></svg>
|
</a>
|
||||||
<p>These are the colours <a href="https://11tw.ink" target="_blank">I</a> use!</p>
|
|
||||||
|
<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">11twink Colours</h1>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<div class="popup" id="popup"> Farbe Kopiert: <span id="popupText"></span> </div>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- BASE COLOURS -->
|
||||||
|
|
||||||
<h2 style="color: #F5A9B8">Base Colours</h2>
|
<h2 style="color: #F5A9B8">Base Colours</h2>
|
||||||
<div class="palette">
|
<div class="palette">
|
||||||
<div class="color light" style="background-color: #f5a9b8;">Trans Pink<br>#F5A9B8</div>
|
<div class="color light" style="background-color: #f5a9b8;">Trans Pink<br>#F5A9B8</div>
|
||||||
<div class="color light" style="background-color: #5bcffa;">Trans Blue<br>#5BCFFA</div>
|
<div class="color light" style="background-color: #5bcffa;">Trans Blue<br>#5BCFFA</div>
|
||||||
<div class="color light" style="background-color: #FFFFFF;">Trans White<br>#FFFFFF</div>
|
<div class="color light" style="background-color: #FFFFFF;">Trans White<br>#FFFFFF</div>
|
||||||
<div class="color light" style="background-color: #F2F5F4;">Text Colour<br>#F2F5F4</div>
|
<div class="color light" style="background-color: #F2F5F4;">Text Colour<br>#F2F5F4</div>
|
||||||
<div class="color" style="background-color: #161618;">Background Colour<br>#161618</div>
|
<div class="color outline" style="background-color: #161618;">Background Colour<br>#161618</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- JAX' COLOURS -->
|
||||||
|
|
||||||
<h2 class="jax">Jax' Colours <a href="https://11tw.ink/ref" target="_blank"><i class="fas fa-link fa-2xs"></i></a></h2>
|
<h2 class="jax">Jax' Colours <a href="https://11tw.ink/ref" target="_blank"><i class="fas fa-link fa-2xs"></i></a></h2>
|
||||||
<div class="palette">
|
<div class="palette">
|
||||||
<div class="color light" style="background-color: #A8C5DB;">Skin<br>#A8C5DB</div>
|
<div class="color light" style="background-color: #A8C5DB;">Skin<br>#A8C5DB</div>
|
||||||
|
|
@ -38,17 +83,20 @@
|
||||||
<div class="color" style="background-color: #12404B;">Freckles<br>#12404B</div>
|
<div class="color" style="background-color: #12404B;">Freckles<br>#12404B</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- OVERLAY COLOURS -->
|
||||||
|
|
||||||
<h2 class="overlay">Overlay Colours</h2>
|
<h2 class="overlay">Overlay Colours</h2>
|
||||||
<div class="palette">
|
<div class="palette">
|
||||||
<div class="color light" style="background-color: #C6F940;">#C6F940</div>
|
<div class="color light" style="background-color: #C6F940;">#C6F940</div>
|
||||||
<div class="color light" style="background-color: #6D51E3;">#6D51E3</div>
|
<div class="color" style="background-color: #6D51E3;">#6D51E3</div>
|
||||||
<div class="color light" style="background-color: #1D1E68;">#1D1E68</div>
|
<div class="color" style="background-color: #1D1E68;">#1D1E68</div>
|
||||||
<div class="color light" style="background-color: #255872;">#255872</div>
|
<div class="color" style="background-color: #255872;">#255872</div>
|
||||||
<div class="color light" style="background-color: #FF5E9E;">#FF5E9E</div>
|
<div class="color light" style="background-color: #FF5E9E;">#FF5E9E</div>
|
||||||
<div class="color light" style="background-color: #FF95DA;">#FF95DA</div>
|
<div class="color light" style="background-color: #FF95DA;">#FF95DA</div>
|
||||||
<div class="color light" style="background-color: #FFF8C8;">#FFF8C8</div>
|
<div class="color light" style="background-color: #FFF8C8;">#FFF8C8</div>
|
||||||
<div class="color light" style="background-color: #FF7B7C;">#FF7B7C</div>
|
<div class="color light" style="background-color: #FF7B7C;">#FF7B7C</div>
|
||||||
<div class="color light" style="background-color: #1D435C;">#1D435C</div>
|
<div class="color" style="background-color: #1D435C;">#1D435C</div>
|
||||||
<div class="color light" style="background-color: #D47FBC;">#D47FBC</div>
|
<div class="color light" style="background-color: #D47FBC;">#D47FBC</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
@ -65,15 +113,15 @@
|
||||||
const b = parseInt(result[3]).toString(16).padStart(2, '0');
|
const b = parseInt(result[3]).toString(16).padStart(2, '0');
|
||||||
return `#${r}${g}${b}`;
|
return `#${r}${g}${b}`;
|
||||||
}
|
}
|
||||||
return rgb; // Falls kein gültiger RGB-Wert gefunden wurde
|
return rgb;
|
||||||
}
|
}
|
||||||
|
|
||||||
colors.forEach(color => {
|
colors.forEach(color => {
|
||||||
color.addEventListener("click", () => {
|
color.addEventListener("click", () => {
|
||||||
const colorValue = color.style.backgroundColor;
|
const colorValue = color.style.backgroundColor;
|
||||||
const hexColor = rgbToHex(colorValue); // Umwandlung in Hex-Code
|
const hexColor = rgbToHex(colorValue);
|
||||||
navigator.clipboard.writeText(hexColor); // Hex-Code in die Zwischenablage kopieren
|
navigator.clipboard.writeText(hexColor);
|
||||||
popupText.innerText = hexColor; // Anzeige des Hex-Codes im Popup
|
popupText.innerText = hexColor;
|
||||||
popup.style.display = "block";
|
popup.style.display = "block";
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
popup.style.display = "none";
|
popup.style.display = "none";
|
||||||
|
|
@ -81,6 +129,14 @@
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
<script src="./js/background.js" defer></script>
|
||||||
|
|
||||||
|
<footer class="footer" aria-label="Footer information">
|
||||||
|
<p class="copyright">© JaxOffTV
|
||||||
|
<script>document.write(new Date().getFullYear())</script> | designed by <a
|
||||||
|
href="https://bsky.app/profile/did:plc:47lclbae3rmsoapqkbvnohg2" target="_blank">SleepyTawi</a> ✨
|
||||||
|
</p>
|
||||||
|
</footer>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</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);
|
||||||
|
});
|
||||||
|
})();
|
||||||
Loading…
Reference in New Issue