dalfuss/colours.dalfuss.link
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

first commit

Browse source
This commit is contained in:
Sam Dalfuss 2024-12-23 01:30:27 +01:00
commit 606f8de2ce
3 changed files with 108 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

56
css/custom.css Normal file
View file

@ -0,0 +1,56 @@
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;
}
.white {
color: black;
}
a {
color: #1BEC99;
text-decoration: none;
transition: color 0.3s;
}
a:hover {
color: #FD3656;
}
.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;
}

BIN
images/logo.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.2 MiB

52
index.html Normal file
View file

@ -0,0 +1,52 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://cdn.simplecss.org/simple.min.css">
<link rel="stylesheet" href="./css/custom.css">
</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" style="background-color: #f5a9b8;">#F5A9B8</div>
<div class="color" style="background-color: #5bcffa;">#5BCFFA</div>
<div class="color white" style="background-color: #FFFFFF;">#FFFFFF</div>
<div class="color" style="background-color: #161618;">#161618</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>