142 lines
5.8 KiB
HTML
142 lines
5.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
|
|
<head>
|
|
<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>
|
|
|
|
<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>
|
|
Zurück zu 11tw.ink
|
|
</a>
|
|
|
|
<div class="logo-wrapper">
|
|
<a href="https://11tw.ink" 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 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>
|
|
<div class="color" style="background-color: #40397B;">Tongue<br>#40397B</div>
|
|
<div class="color light" style="background-color: #F5A9B8;">Dyed Hair<br>#F5A9B8</div>
|
|
<div class="color" style="background-color: #12354B;">Natural Hair<br>#12354B</div>
|
|
<div class="color" style="background-color: #105522;">Eyes<br>#105522</div>
|
|
<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" 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" style="background-color: #1D435C;">#1D435C</div>
|
|
<div class="color light" style="background-color: #D47FBC;">#D47FBC</div>
|
|
</div>
|
|
|
|
<script>
|
|
const colors = document.querySelectorAll(".color");
|
|
const popup = document.getElementById("popup");
|
|
const popupText = document.getElementById("popupText");
|
|
|
|
function rgbToHex(rgb) {
|
|
const result = rgb.match(/^rgb\((\d+), (\d+), (\d+)\)$/);
|
|
if (result) {
|
|
const r = parseInt(result[1]).toString(16).padStart(2, '0');
|
|
const g = parseInt(result[2]).toString(16).padStart(2, '0');
|
|
const b = parseInt(result[3]).toString(16).padStart(2, '0');
|
|
return `#${r}${g}${b}`;
|
|
}
|
|
return rgb;
|
|
}
|
|
|
|
colors.forEach(color => {
|
|
color.addEventListener("click", () => {
|
|
const colorValue = color.style.backgroundColor;
|
|
const hexColor = rgbToHex(colorValue);
|
|
navigator.clipboard.writeText(hexColor);
|
|
popupText.innerText = hexColor;
|
|
popup.style.display = "block";
|
|
setTimeout(() => {
|
|
popup.style.display = "none";
|
|
}, 2000);
|
|
});
|
|
});
|
|
</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> |