// Här nedan finner du den kompletta koden. Jag har inget ansvar över om koden anses vara säker eller inte. Du får själv klura ut det, Men vad jag kan bedöma är den det. Det är exakt den kod som ligger på sidan, Du använder den på egen risk förstås, precis som jag själv gjort. Den är skapad av ChatGTP efter mina instruktioner.
<html>
<head>
<style>
/* This is made by ChatGPT efter instructions by Mathias G L Pettersson, mediaart.se */
/* Set the background to black */
body {
background-color: black;
overflow: hidden; /* Hide the scrollbars */
background-image: url(’Bikeyard.png’);
background-size: cover;
background-repeat: no-repeat;
height: 100%;
width: 100%;
}
/* Style the asterisks */
.asterisk {
position: absolute;
font-size: 20px;
color: #6f6550;
animation: fall 1s ease-in-out infinite;
transition: transform 0.1s linear;
}
/* Style the dark grey asterisks */
.dark-grey-asterisk {
color: #5a4f3c;
}
/* Style the darker grey asterisks */
.darker-grey-asterisk {
color: #3f3422;
}
/* Animate the asterisks to fall */
@keyframes fall {
0% {
top: 0;
}
100% {
top: 100%;
}
}
</style>
<!– Add a content security policy to help protect against certain types of attacks –>
<meta http-equiv=”Content-Security-Policy” content=”default-src ’self’; script-src ’self’ ’unsafe-inline’;”>
</head>
<body>
<!– Create an empty div to hold the asterisks –>
<div id=”asterisks”></div>
<!– Add a script to create the falling asterisks –>
<script>
// Append a new asterisk to the page every half second
setInterval(function() {
// Create a new div for the asterisk
const asteriskElement = document.createElement(’div’);
asteriskElement.classList.add(’asterisk’);
asteriskElement.innerHTML = ’.’;
// Set a random left position for the asterisk
const left = Math.floor(Math.random() * window.innerWidth);
asteriskElement.style.left = left + ’px’;
// Set a random animation duration for the asterisk orginal är 5 – Speed of them falling
const duration = Math.floor(Math.random() * 17) + 17;
asteriskElement.style.animationDuration = duration + ’s’;
// Choose a random color for the asterisk
const colors = [’white’, ’darkgrey’, ’dimgrey’];
const color = colors[Math.floor(Math.random() * colors.length)];
if (color === ’darkgrey’) {
asteriskElement.classList.add(’dark-grey-asterisk’);
} else if (color === ’dimgrey’) {
asteriskElement.classList.add(’darker-grey-asterisk’);
}
// Append the asterisk to the page org: 500 lägre siffra ger fler som startar samtidigt
document.getElementById(’asterisks’).appendChild(asteriskElement);
}, 1);
// Add a mousemove event listener to the body element
document.body.addEventListener(’mousemove’, function(event) {
// Get the mouse pointer position
const mouseX = event.clientX;
const mouseY = event.clientY;
// Get the asterisks elements
const asterisks = document.querySelectorAll(’.asterisk’);
// Iterate over the asterisks
asterisks.forEach(function(asterisk) {
// Get the asterisk position
const rect = asterisk.getBoundingClientRect();
const asteriskX = rect.left + rect.width / 2;
const asteriskY = rect.top + rect.height / 2;
// Calculate the distance between the asterisk and the mouse pointer
const dx = asteriskX – mouseX;
const dy = asteriskY – mouseY;
const distance = Math.sqrt(dx * dx + dy * dy);
// If the distance is within a certain threshold, push the asterisk away
if (distance < 50) {
asterisk.style.transform = `translate(${dx / 1}px, ${dy / 1}px)`;
} else {
asterisk.style.transform = ’none’;
}
});
});
</script>
</body>
</html>
