Custom Login Screen

ricklincs · Unread post by **ricklincs** » Fri Nov 22, 2024 2:18 pm

I have playing with the a Login screen by altering $nuWelcomeBodyInnerHTML within nuconfig.php. As its the coming up to Christmas I tried messing around with adding css and javascript snowflakes I tried various css styles and javascript scripts. Best result I had was one snow flake dropping from top to bottom.

Added to nuconfig.php

$nuConfigIncludeCSS .= "
<style>
.snowflakes {
position: fixed; /* Fixes the container in place */
top: 0;
left: 0;
width: 100%; /* Full width of the viewport */
height: 100vh; /* Full height of the viewport */
overflow: hidden;
pointer-events: none; /* Prevent interaction with snowflakes */
z-index: 9999; /* Ensure snowflakes appear on top */
}

.snowflake {
position: absolute;
color: #ffffff;
font-size: 1.5em;
opacity: 0.8;
user-select: none;
animation: snow 5s linear infinite;
background-color: red; /* Temporary color to debug */
}

@keyframes snow {
0% {
transform: translateY(0) translateX(0);
}
100% {
transform: translateY(100vh) translateX(100vw); /* Moves snowflakes down and across the screen */
}
}

</style>
";

$nuConfigIncludeJS .= "
<script>
document.addEventListener('DOMContentLoaded', function() {
let snowflakesContainer = document.createElement('div');
snowflakesContainer.classList.add('snowflakes');
document.body.appendChild(snowflakesContainer); // Append snowflakes container to the body

// Create snowflakes dynamically
for (let i = 0; i < 50; i++) { // Change the number as needed
let snowflake = document.createElement('div');
snowflake.classList.add('snowflake');
snowflakesContainer.appendChild(snowflake);

// Randomize horizontal and vertical starting positions
snowflake.style.left = Math.random() * 100 + 'vw'; // Random horizontal position
snowflake.style.top = Math.random() * 100 + 'vh'; // Random vertical position

// Randomize animation delay and duration
snowflake.style.animationDelay = Math.random() * 5 + 's'; // Random delay between 0 and 5 seconds
snowflake.style.animationDuration = (Math.random() * 5 + 5) + 's'; // Random duration between 5 and 10 seconds
}
});

</script>
";
That didn't do anything apart from show 6 snow flakes on the left hand side of the screen and static, so then I played around and added
to the bottom of index.php the following:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login</title>



<style>
/* Basic snowflake styles */
.snowflake {
position: absolute;
top: -10px;
color: #fff;
font-size: 24px;
z-index: 9999;
pointer-events: none;
user-select: none;
animation: snow 10s linear infinite;
}

@keyframes snow {
to {
transform: translateY(100vh);
}
}
</style>
</head>
<body>


<div id="loginForm">

</div>


<script>
// Number of snowflakes
var snowflakeCount = 50;

// Function to create snowflakes
function createSnowflakes() {
for (var i = 0; i < snowflakeCount; i++) {
var snowflake = document.createElement('div');
snowflake.classList.add('snowflake');
snowflake.innerHTML = '❄'; // Unicode snowflake symbol
snowflake.style.left = Math.random() * 100 + '%';
snowflake.style.animationDuration = Math.random() * 5 + 5 + 's'; // Snowflakes falling speed
snowflake.style.animationDelay = Math.random() * 5 + 's'; // Random delay
document.body.appendChild(snowflake);
}
}

// Create snowflakes when the page is loaded
window.onload = function() {
createSnowflakes();
};
</script>
</body>
</html>

I now see 1 white snowflake falling from the top left to the bottom left. As this is just a little temporary alteration I dont want to mess around to much with nubuilders core files and just wondered if anybody else had tried doing anything like this?

Unread post by **kev1n** » Sat Nov 23, 2024 7:13 am

Hi,

Should it only snow on the login screen or also everywhere after logging into the nuBuilder?

steven · Unread post by **steven** » Sat Nov 23, 2024 9:29 pm

Hi ricklincs,

You could do this...

Create a file like this called bob.js (in the same directory as nuconfig.php) ...

Code: Select all



function bob(){

  const snowflakesContainer = $('<div>', {
    class: 'snowflakes',
    'aria-hidden': 'true'
  });

  // Create and append the snowflake elements
  for (let i = 0; i < 12; i++) {
    const snowflake = $('<div>', { class: 'snowflake' });
    const inner = $('<div>', { class: 'inner', text: '❅' });
    snowflake.append(inner);
    snowflakesContainer.append(snowflake);
  }

  // Append the entire container to the body (or a specific element)
  $('body').append(snowflakesContainer);

}

And create a file like this called bob.css (in the same directory as nuconfig.php) ... ...

Code: Select all


/* customizable snowflake styling */
.snowflake {
  color: #fff;
  font-size: 1em;
  font-family: Arial, sans-serif;
  text-shadow: 0 0 5px #000;
}
 
.snowflake,.snowflake .inner{
	animation-iteration-count:infinite;
	animation-play-state:running
}
	
.inner {
	color:grey;	
}

@keyframes snowflakes-fall{0%{transform:translateY(0)}100%{transform:translateY(110vh)}}
@keyframes snowflakes-shake{0%,100%{transform:translateX(0)}50%{transform:translateX(80px)}}.snowflake{position:fixed;top:-10%;z-index:9999;-webkit-user-select:none;user-select:none;cursor:default;animation-name:snowflakes-shake;animation-duration:3s;animation-timing-function:ease-in-out}.snowflake .inner{animation-duration:10s;animation-name:snowflakes-fall;animation-timing-function:linear}.snowflake:nth-of-type(0){left:1%;animation-delay:0s}.snowflake:nth-of-type(0) .inner{animation-delay:0s}.snowflake:first-of-type{left:10%;animation-delay:1s}.snowflake:first-of-type .inner,.snowflake:nth-of-type(8) .inner{animation-delay:1s}.snowflake:nth-of-type(2){left:20%;animation-delay:.5s}.snowflake:nth-of-type(2) .inner,.snowflake:nth-of-type(6) .inner{animation-delay:6s}.snowflake:nth-of-type(3){left:30%;animation-delay:2s}.snowflake:nth-of-type(11) .inner,.snowflake:nth-of-type(3) .inner{animation-delay:4s}.snowflake:nth-of-type(4){left:40%;animation-delay:2s}.snowflake:nth-of-type(10) .inner,.snowflake:nth-of-type(4) .inner{animation-delay:2s}.snowflake:nth-of-type(5){left:50%;animation-delay:3s}.snowflake:nth-of-type(5) .inner{animation-delay:8s}.snowflake:nth-of-type(6){left:60%;animation-delay:2s}.snowflake:nth-of-type(7){left:70%;animation-delay:1s}.snowflake:nth-of-type(7) .inner{animation-delay:2.5s}.snowflake:nth-of-type(8){left:80%;animation-delay:0s}.snowflake:nth-of-type(9){left:90%;animation-delay:1.5s}.snowflake:nth-of-type(9) .inner{animation-delay:3s}.snowflake:nth-of-type(10){left:25%;animation-delay:0s}.snowflake:nth-of-type(11){left:65%;animation-delay:2.5s}

Add this to nuconfig.php...

Code: Select all



$nuConfigIncludeCSS = "bob.css";
$nuConfigIncludeJS = "bob.js";

You want to make sure the web page has loaded before running bob.js to create your snowflakes.

Because you can't append snowflakes to a page that doesn't yet exist.

So you could add this to nuBuilder - unless there is a better way...

callbob.png

Steven

ricklincs · Unread post by **ricklincs** » Mon Nov 25, 2024 8:33 am

Was just after it on the login screen for a few weeks with the run up to Christmas. Thanks Steven and Ke1vin for your time. Will give this a try.

ricklincs · Unread post by **ricklincs** » Mon Nov 25, 2024 3:23 pm

sorry just one question, where should I be putting <?php function nuLoadBody() { echo "<body id='nubody' onLoad='nuLoad();bob()' onesize='nuResize()'>"; }

steven · Unread post by **steven** » Mon Nov 25, 2024 7:31 pm

In the file nuindexlibs.php...

bob.png

Steven

ricklincs · Unread post by **ricklincs** » Tue Nov 26, 2024 8:22 am

Thanks Steven, that works a treat!

nuBuilder Forum

Custom Login Screen

Custom Login Screen

Re: Custom Login Screen

Re: Custom Login Screen

Re: Custom Login Screen

Re: Custom Login Screen

Re: Custom Login Screen

Re: Custom Login Screen