Welcome to the nuBuilder Forums!

Register and log in to access exclusive forums and content available only to registered users.

Custom Login Screen

Questions related to customising nuBuilder Forte with JavaScript or PHP.
Post Reply
ricklincs
Posts: 107
Joined: Mon Aug 01, 2011 5:39 pm
Has thanked: 33 times

Custom Login Screen

Unread post by ricklincs »

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>
<!-- Other head elements -->

<!-- Snowflakes Styles -->
<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>
<!-- Login Form HTML Here -->

<div id="loginForm">
<!-- Actual login form content -->
</div>

<!-- Snowflakes JavaScript -->
<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?
kev1n
nuBuilder Team
Posts: 4292
Joined: Sun Oct 14, 2018 6:43 pm
Has thanked: 71 times
Been thanked: 444 times
Contact:

Re: Custom Login Screen

Unread post by kev1n »

Hi,

Should it only snow on the login screen or also everywhere after logging into the nuBuilder?
steven
Posts: 369
Joined: Mon Jun 15, 2009 10:03 am
Has thanked: 52 times
Been thanked: 52 times

Re: Custom Login Screen

Unread post by steven »

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
You do not have the required permissions to view the files attached to this post.
A short post is a good post.
ricklincs
Posts: 107
Joined: Mon Aug 01, 2011 5:39 pm
Has thanked: 33 times

Re: Custom Login Screen

Unread post by ricklincs »

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
Posts: 107
Joined: Mon Aug 01, 2011 5:39 pm
Has thanked: 33 times

Re: Custom Login Screen

Unread post by ricklincs »

sorry just one question, where should I be putting <?php function nuLoadBody() { echo "<body id='nubody' onLoad='nuLoad();bob()' onesize='nuResize()'>"; }
steven
Posts: 369
Joined: Mon Jun 15, 2009 10:03 am
Has thanked: 52 times
Been thanked: 52 times

Re: Custom Login Screen

Unread post by steven »

In the file nuindexlibs.php...

bob.png

Steven
You do not have the required permissions to view the files attached to this post.
A short post is a good post.
ricklincs
Posts: 107
Joined: Mon Aug 01, 2011 5:39 pm
Has thanked: 33 times

Re: Custom Login Screen

Unread post by ricklincs »

Thanks Steven, that works a treat!
Post Reply