first commit
This commit is contained in:
dalfuss
commit
4afc8f0736
|
|
@ -0,0 +1,71 @@
|
||||||
|
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: 10vw;
|
||||||
|
margin: 0 auto;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fa-link {
|
||||||
|
color: #545454;
|
||||||
|
}
|
||||||
|
|
||||||
|
.jax {
|
||||||
|
color: #a8c5db;
|
||||||
|
}
|
||||||
|
|
||||||
|
.aidan {
|
||||||
|
color: #216240;
|
||||||
|
}
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 1.2 MiB |
|
|
@ -0,0 +1,70 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>colours.dalfuss.link</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>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="popup" id="popup"> Copied color: <span id="popupText"></span> </div>
|
||||||
|
<h1><img class="logo" src="./images/logo.png" alt="Controller Icon with a blue to pink to blue gradient"></h1>
|
||||||
|
<p>These are the colours <a href="https://dalfuss.link">I</a> use!</p>
|
||||||
|
<h2 style="color: #F5A9B8">Dalfuss "Brand" Colours</h2>
|
||||||
|
<div class="palette">
|
||||||
|
<div class="color light" style="background-color: #f5a9b8;">#F5A9B8</div>
|
||||||
|
<div class="color light" style="background-color: #5bcffa;">#5BCFFA</div>
|
||||||
|
<div class="color light" style="background-color: #FFFFFF;">#FFFFFF</div>
|
||||||
|
<div class="color" style="background-color: #161618;">#161618</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h2 class="jax">Jax P. Nolan <a href="https://dalfuss.net/OCs/jax" 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 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>
|
||||||
|
|
||||||
|
<h2 class="aidan">Aidan Leahy <!--<a href="https://dalfuss.net/OCs/aidan" target="_blank"><i class="fas fa-link fa-2xs"></i></a>--></h2>
|
||||||
|
<div class="palette">
|
||||||
|
<div class="color light" style="background-color: #93ABBE;">Skin<br>#93ABBE</div>
|
||||||
|
<div class="color" style="background-color: #216240;">Hair<br>#216240</div>
|
||||||
|
<div class="color" style="background-color: #2BA2E6;">Eyes<br>#2BA2E6</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; // Falls kein gültiger RGB-Wert gefunden wurde
|
||||||
|
}
|
||||||
|
|
||||||
|
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
|
||||||
|
popup.style.display = "block";
|
||||||
|
setTimeout(() => {
|
||||||
|
popup.style.display = "none";
|
||||||
|
}, 2000);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Loading…
Reference in New Issue