changed entire site, updated design to jaxtavi

2026-03-16 15:18:30 +01:00 · 2026-03-16 15:18:30 +01:00 · 4903df4027
parent 1937a9ba16
commit 4903df4027
9 changed files with 534 additions and 157 deletions
--- a/assets/Bongo.gif
+++ b/assets/Bongo.gif
--- a/assets/hoyooooo.wav
+++ b/assets/hoyooooo.wav
--- a/assets/jaxoff_logo.png
+++ b/assets/jaxoff_logo.png
--- a/assets/star_favicon.ico
+++ b/assets/star_favicon.ico
--- a/css/custom.css
+++ b/css/custom.css
@ -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;
-}
--- a/css/styles.css
+++ b/css/styles.css
@ -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;
+}
--- a/images/logo.png
+++ b/images/logo.png
--- a/index.html
+++ b/index.html
@ -1,33 +1,78 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="de">
+
 <head>
-    <meta charset="UTF-8">
-    <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="stylesheet" href="./css/custom.css">
-    <script src="https://kit.fontawesome.com/14a35c233c.js" crossorigin="anonymous"></script>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
+  <link rel="shortcut icon" href="./assets/star_favicon.ico" type="image/webp">
+  <link rel="apple-touch-icon" sizes="180x180" href="./assets/star_favicon.ico">
+  <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>
+
 <body>
-    <svg style="width:0;height:0;position:absolute;" aria-hidden="true" focusable="false">
-  <linearGradient id="logo-gradient" x2="1" y2="1">
-    <stop offset="0%" stop-color="#f5a9b8" />
-    <stop offset="30%" stop-color="#f5a9b8" />
-    <stop offset="100%" stop-color="#5bcffa" />
-  </linearGradient>
+
+  <canvas class="background-canvas" id="backgroundCanvas" aria-hidden="true"></canvas>
+
+  <div class="main-container">
+    <header class="header">
+      <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>
-    <div class="popup" id="popup"> Copied color: <span id="popupText"></span> </div>
-    <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>
-    <p>These are the colours <a href="https://11tw.ink" target="_blank">I</a> use!</p>
+        Zurück zu 11tw.ink
+      </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>
+
+      <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>
    <div class="palette">
      <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: #FFFFFF;">Trans White<br>#FFFFFF</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>

+
+    <!-- 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>
    <div class="palette">
      <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>

+
+    <!-- OVERLAY COLOURS -->
+
    <h2 class="overlay">Overlay Colours</h2>
    <div class="palette">
      <div class="color light" style="background-color: #C6F940;">#C6F940</div>
-        <div class="color light" style="background-color: #6D51E3;">#6D51E3</div>
-        <div class="color light" style="background-color: #1D1E68;">#1D1E68</div>
-        <div class="color light" style="background-color: #255872;">#255872</div>
+      <div class="color" style="background-color: #6D51E3;">#6D51E3</div>
+      <div class="color" style="background-color: #1D1E68;">#1D1E68</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: #FF95DA;">#FF95DA</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: #1D435C;">#1D435C</div>
+      <div class="color" style="background-color: #1D435C;">#1D435C</div>
      <div class="color light" style="background-color: #D47FBC;">#D47FBC</div>
    </div>

@ -65,15 +113,15 @@
          const b = parseInt(result[3]).toString(16).padStart(2, '0');
          return `#${r}${g}${b}`;
        }
-            return rgb; // Falls kein gültiger RGB-Wert gefunden wurde
+        return rgb;
      }

      colors.forEach(color => {
        color.addEventListener("click", () => {
          const colorValue = color.style.backgroundColor;
-                const hexColor = rgbToHex(colorValue); // Umwandlung in Hex-Code
-                navigator.clipboard.writeText(hexColor); // Hex-Code in die Zwischenablage kopieren
-                popupText.innerText = hexColor; // Anzeige des Hex-Codes im Popup
+          const hexColor = rgbToHex(colorValue);
+          navigator.clipboard.writeText(hexColor);
+          popupText.innerText = hexColor;
          popup.style.display = "block";
          setTimeout(() => {
            popup.style.display = "none";
@ -81,6 +129,14 @@
        });
      });
    </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>
+
 </html>
--- a/js/background.js
+++ b/js/background.js
@ -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);
+  });
+})();