Galaxy clock HTML

COPTYT TEXT BELOW!!!!!!!!!!!!!!!!!!!

<title>Dynamic Island Style Button with Particles</title>

<style>

body {

display: flex;

justify-content: center;

align-items: center;

height: 100vh;

margin: 0;

background-color: transparent;

overflow: hidden;

font-family: 'Lexend', sans-serif;

}

.dynamic-island-button {

position: relative;

display: inline-block;

width: 99.5%; /* Adjusted width for the button */

height: 80px; /* Fixed height for the button */

border-radius: 50px; /* Increased border radius for a rounder button */

border: 2px solid #404040; /* Darker and slightly thinner border */

background-color: rgba(0, 0, 0, 0.70); /* Semi-transparent black background, 5% brighter */

backdrop-filter: blur(10px); /* Apply blur effect */

-webkit-backdrop-filter: blur(10px); /* Apply blur effect for Safari */

text-align: center;

text-decoration: none;

overflow: hidden;

cursor: default; /* Changed cursor to default */

box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

transition: all 0.3s ease;

z-index: 1; /* Ensure button is above particles */

}

.dynamic-island-button:hover {

background-color: rgba(0, 0, 0, 0.75); /* Darker background on hover */

box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);

}

#particles-js {

position: absolute;

width: 100%; /* Full width of the button */

height: calc(100% + 30px); /* Adjusted height to cover extra space */

top: -15px; /* Pushed up to align with button */

left: 0;

z-index: -1; /* Behind the button */

}

.clock {

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

font-size: 18px;

font-weight: 300; /* Slightly bolder weight */

font-family: 'Lexend', sans-serif;

color: #f0f0f0; /* Brighter white color */

}

</style>

</head>

<body>

<div class="clock" id="clock">Saturday, April 19, 2025. 1:15:41 AM</div>

</div>

particlesJS("particles-js", {

"particles": {

"number": {

"value": 122,

"density": {

"enable": true,

"value_area": 805

}

},

"color": {

"value": "#ffffff"

},

"shape": {

"type": "circle",

"stroke": {

"width": 0,

"color": "#000000"

},

"polygon": {

"nb_sides": 5

},

"image": {

"src": "img/github.svg",

"width": 100,

"height": 100

}

},

"opacity": {

"value": 0.45,

"random": false,

"anim": {

"enable": false,

"speed": 1,

"opacity_min": 0.1,

"sync": false

}

},

"size": {

"value": 3,

"random": true,

"anim": {

"enable": false,

"speed": 50,

"size_min": 0.1,

"sync": false

}

},

"line_linked": {

"enable": true,

"distance": 150,

"color": "#ffffff",

"opacity": 0.4,

"width": 1

},

"move": {

"enable": true,

"speed": 4.05,

"direction": "none",

"random": false,

"straight": false,

"out_mode": "out",

"bounce": false,

"attract": {

"enable": false,

"rotateX": 600,

"rotateY": 1200

}

},

"interactivity": {

"detect_on": "canvas",

"events": {

"onhover": {

"enable": false,

"mode": "grab"

},

"onclick": {

"enable": false,

"mode": "push"

},

"resize": true

},

"modes": {

"grab": {

"distance": 140,

"line_linked": {

"opacity": 1

}

},

"bubble": {

"distance": 400,

"size": 40,

"duration": 2,

"opacity": 8,

"speed": 3

},

"repulse": {

"distance": 200,

"duration": 0.4

},

"push": {

"particles_nb": 4

},

"remove": {

"particles_nb": 2

}

},

"retina_detect": true

});

function updateClock() {

var now = new Date();

var days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];

var months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];

var dayOfWeek = days[now.getDay()];

var month = months[now.getMonth()];

var date = now.getDate();

var year = now.getFullYear();

var hour = now.getHours();

var minute = now.getMinutes();

var second = now.getSeconds();

var period = hour >= 12 ? 'PM' : 'AM';

hour = hour % 12;

hour = hour ? hour : 12; // the hour '0' should be '12'

minute = minute < 10 ? '0' + minute : minute;

second = second < 10 ? '0' + second : second;

var time = dayOfWeek + ', ' + month + ' ' + date + ', ' + year + '. ' + hour + ':' + minute + ':' + second + ' ' + period;

document.getElementById('clock').textContent = time;

setTimeout(updateClock, 1000); // Update every second

}

updateClock();

</script>

</body></html>