Skip to content

Commit

Permalink
Update index.html
Browse files Browse the repository at this point in the history
  • Loading branch information
@Weather-Arkansas
Weather-Arkansas authored Sep 8, 2024
1 parent 1d78538 commit ff2c8b1
Showing 1 changed file with 36 additions and 123 deletions.
159 changes: 36 additions & 123 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@
height: 100%;
overflow: hidden;
background: #87CEEB; /* Sky blue background */
transition: background 1s;
}

.background {
Expand All @@ -30,6 +31,7 @@
width: 200px;
height: 60px;
animation: moveClouds 20s linear infinite;
z-index: 2;
}

.cloud::before, .cloud::after {
Expand Down Expand Up @@ -64,6 +66,7 @@
top: 10%;
left: 10%;
z-index: 1;
transition: background 1s;
}

.rain {
Expand Down Expand Up @@ -110,7 +113,7 @@
color: #000; /* Black text color */
font-family: Arial, sans-serif;
padding: 20px;
transition: color 0.5s;
transition: color 1s;
}

h1 {
Expand All @@ -121,41 +124,6 @@
p {
font-size: 1.5em;
}

.login-container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: rgba(255, 255, 255, 0.8);
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.login-container input {
display: block;
width: 100%;
margin: 10px 0;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}

.login-container button {
display: block;
width: 100%;
padding: 10px;
background: #007BFF;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}

.login-container button:hover {
background: #0056b3;
}
</style>
</head>
<body>
Expand All @@ -170,20 +138,6 @@
<h1>Welcome to Weather Arkansas</h1>
<p>Your go-to source for weather updates in Arkansas!</p>
</div>
<div class="login-container">
<h2>Login</h2>
<input type="text" id="username" placeholder="Username">
<input type="password" id="password" placeholder="Password">
<button onclick="login()">Login</button>
<button onclick="showRegister()">Register</button>
</div>
<div class="register-container" style="display:none;">
<h2>Register</h2>
<input type="text" id="new-username" placeholder="Username">
<input type="password" id="new-password" placeholder="Password">
<button onclick="register()">Register</button>
<button onclick="showLogin()">Back to Login</button>
</div>
<script>
document.addEventListener('DOMContentLoaded', () => {
const clouds = document.querySelectorAll('.cloud');
Expand All @@ -197,15 +151,13 @@ <h2>Register</h2>
const sun = document.querySelector('.sun');
const content = document.querySelector('.content');

// Function to set a cookie
function setCookie(name, value, days) {
const date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
const expires = "expires=" + date.toUTCString();
document.cookie = name + "=" + value + ";" + expires + ";path=/";
}

// Function to get a cookie
function getCookie(name) {
const cname = name + "=";
const decodedCookie = decodeURIComponent(document.cookie);
Expand All @@ -222,24 +174,22 @@ <h2>Register</h2>
return "";
}

// Check if it's raining from the cookie
const isRaining = getCookie("isRaining") === "true";

if (isRaining) {
rainContainer.style.display = 'block';
document.body.style.background = '#2F4F4F'; // Dark slate gray background
content.style.color = '#fff'; // White text color
sun.style.display = 'none'; // Hide the sun
clouds.forEach(cloud => {
cloud.style.background = '#A9A9A9'; // Dark grey clouds
});
startRain();
}

setInterval(() => {
startRain();
setTimeout(stopRain, 30000); // Rain for 30 seconds
}, 60000); // Every 1 minute

function startRain() {
rainContainer.style.display = 'block';
document.body.style.background = '#2F4F4F'; // Dark slate gray background
content.style.color = '#fff'; // White text color
sun.style.display = 'none'; // Hide the sun
sun.style.background = '#B8860B'; // Darker gold color for the sun
clouds.forEach(cloud => {
cloud.style.background = '#A9A9A9'; // Dark grey clouds
});
Expand All @@ -251,72 +201,35 @@ <h2>Register</h2>
raindrop.style.animationDuration = `${0.5 + Math.random()}s`;
rainContainer.appendChild(raindrop);
}
setTimeout(() => {
rainContainer.style.display = 'none';
document.body.style.background = '#87CEEB'; // Sky blue background
content.style.color = '#000'; // Black text color
sun.style.display = 'block'; // Show the sun
clouds.forEach(cloud => {
cloud.style.background = '#fff'; // White clouds
});
setCookie("isRaining", "false", 1); // Set cookie to remember it's not raining
while (rainContainer.firstChild) {
rainContainer.removeChild(rainContainer.firstChild);
}
}, 60000); // Rain for 1 minute
}, 30000); // Every 30 seconds
});

function showRegister() {
document.querySelector('.login-container').style.display = 'none';
document.querySelector('.register-container').style.display = 'block';
}

function showLogin() {
document.querySelector('.login-container').style.display = 'block';
document.querySelector('.register-container').style.display = 'none';
}

function register() {
const username = document.getElementById('new-username').value;
const password = document.getElementById('new-password').value;

if (username && password) {
const users = JSON.parse(localStorage.getItem('users')) || [];
const userExists = users.some(user => user.username === username);

if (userExists) {
alert('Username already exists!');
} else {
users.push({ username, password });
localStorage.setItem('users', JSON.stringify(users));
alert('Registration successful!');
showLogin();
}
} else {
alert('Please fill in both fields.');
}
}

function login() {
const username = document.getElementById('username').value;
const password = document.getElementById('password').value;

if (username && password) {
const users = JSON.parse(localStorage.getItem('users')) || [];
const user = users.find(user => user.username === username && user.password === password);

if (user) {
alert('Login successful!');
// Redirect to the main content or perform any other action
} else {
alert('Invalid username or password.');
function stopRain() {
rainContainer.style.display = 'none';
document.body.style.background = '#87CEEB'; // Sky blue background
content.style.color = '#000'; // Black text color
sun.style.background = '#FFD700'; // Gold color for the sun
clouds.forEach(cloud => {
cloud.style.background = '#fff'; // White clouds
});
setCookie("isRaining", "false", 1); // Set cookie to remember it's not raining
while (rainContainer.firstChild) {
rainContainer.removeChild(rainContainer.firstChild);
}
} else {
alert('Please fill in both fields.');
}
}

clouds.forEach(cloud => {
cloud.addEventListener('animationiteration', () => {
if (cloud.getBoundingClientRect().left < sun.getBoundingClientRect().right &&
cloud.getBoundingClientRect().right > sun.getBoundingClientRect().left &&
cloud.getBoundingClientRect().top < sun.getBoundingClientRect().bottom &&
cloud.getBoundingClientRect().bottom > sun.getBoundingClientRect().top) {
sun.style.background = '#B8860B'; // Darker gold color for the sun
} else {
sun.style.background = '#FFD700'; // Gold color for the sun
}
});
});
});
</script>
</body>
</html>

0 comments on commit ff2c8b1

Please sign in to comment.