<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Search Animation</title>
<style>
body, html {
margin: 0;
padding: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
height: 100%;
overflow: hidden;
background: linear-gradient(270deg, #ff007f, #7e22ce, #0f4c81, #ff7700); /* Initial gradient */
background-size: 800% 800%; /* Larger background size for animation */
animation: backgroundAnimation 30s ease infinite; /* Slowed down background animation */
color: white;
}
@keyframes backgroundAnimation {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
@keyframes textGradientAnimation {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
#app {
display: flex;
flex-direction: column;
height: 100%;
color: #5b21b6;
padding: 1rem;
box-sizing: border-box;
}
h1 {
font-size: 2.25rem;
font-weight: bold;
margin: 2rem 0 4rem;
background: linear-gradient(270deg, #ff007f, #7e22ce);
background-size: 200% 200%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: textGradientAnimation 10s ease infinite; /* Pink/Purple gradient animation for the heading */
}
.websites {
flex-grow: 1;
}
.website {
font-size: 1.25rem;
margin-bottom: 0.5rem;
transition: color 0.3s ease-in-out;
cursor: pointer;
}
.active {
color: #ffffff;
}
.inactive {
color: #a78bfa;
}
#timer {
font-size: 1.5rem;
font-weight: bold;
margin-top: 1rem;
}
footer {
font-size: 1rem;
color: #a78bfa;
text-align: center;
margin-top: 1rem;
padding: 1rem;
background-color: #333;
}
</style>
</head>
<body>
<div id="app">
<h1>If Result</h1>
<div class="websites">
<p class="website active" data-url="https://perplexity.com">perplexity.com</p>
<p class="website" data-url="https://google.com">google.com</p>
<p class="website" data-url="https://theverge.com">theverge.com</p>
<p class="website" data-url="https://youtube.com">youtube.com</p>
<p class="website" data-url="https://en.wikipedia.org">en.wikipedia.org</p>
<p class="website" data-url="https://reddit.com">reddit.com</p>
<p class="website" data-url="www.chatgpt.com">chatgpt.com</p>
</div>
<div id="timer">Waiting average time: 40s</div>
</div>
<footer>
©️AI News™, All rights reserved
</footer>
<script>
const websites = document.querySelectorAll('.website');
let currentIndex = 0;
let timeLeft = 40;
const timerElement = document.getElementById('timer');
function updateActiveWebsite() {
websites.forEach((site, index) => {
if (index === currentIndex) {
site.classList.add('active');
site.classList.remove('inactive');
} else {
site.classList.add('inactive');
site.classList.remove('active');
}
});
currentIndex = (currentIndex + 1) % websites.length;
}
function updateTimer() {
if (timeLeft <= 0) {
timerElement.textContent = "Inference in process !";
return;
}
timerElement.textContent = `Time Left: ${timeLeft}s`;
timeLeft -= 1;
}
websites.forEach(site => {
site.addEventListener('click', () => {
const url = site.getAttribute('data-url');
window.open(url, '_blank'); // Opens the website URL in a new tab
});
});
setInterval(updateActiveWebsite, 2000);
setInterval(updateTimer, 1000);
</script>
</body>
</html>