|
<!DOCTYPE html> |
|
<html lang="en"> |
|
|
|
<head> |
|
<meta charset="UTF-8"> |
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
<title>Hermes Chat App</title> |
|
<link href="https://fonts.googleapis.com/css2?family=Comfortaa:wght@400;700&display=swap" rel="stylesheet"> |
|
<style> |
|
body { |
|
font-family: 'Comfortaa', cursive; |
|
background-image: linear-gradient(120deg, #FF6D00, #FFD600, #FF6D00); |
|
background-size: 300% 300%; |
|
animation: gradientAnimation 5s ease infinite; |
|
color: #fff; |
|
display: flex; |
|
flex-direction: column; |
|
align-items: center; |
|
justify-content: center; |
|
height: 100vh; |
|
margin: 0; |
|
padding: 4rem; |
|
} |
|
@keyframes gradientAnimation { |
|
0% { |
|
background-position: 0% 50%; |
|
} |
|
50% { |
|
background-position: 100% 50%; |
|
} |
|
100% { |
|
background-position: 0% 50%; |
|
} |
|
} |
|
h1 { |
|
font-size: 3rem; |
|
text-align: center; |
|
margin-bottom: 2rem; |
|
} |
|
p { |
|
font-size: 1.2rem; |
|
text-align: center; |
|
max-width: 400px; |
|
} |
|
#bottom-text { |
|
position: fixed; |
|
bottom: 2rem; |
|
left: 2rem; |
|
color: rgba(255, 255, 255, 0.5); |
|
} |
|
.chat-button { |
|
display: inline-block; |
|
padding: 1rem 2rem; |
|
background-color: #333; |
|
color: #fff; |
|
font-size: 1rem; |
|
text-decoration: none; |
|
border-radius: 4px; |
|
margin-left: 150px; |
|
transition: background-color 0.3s ease; |
|
} |
|
.chat-button:hover { |
|
background-color: #555; |
|
} |
|
.hidden { |
|
display: none; |
|
} |
|
</style> |
|
</head> |
|
|
|
<body> |
|
<section id="page1"> |
|
<h1>Chat with Hermes</h1> |
|
<p>Hermes can chat about music, images, videos, and the real world</p> |
|
<a href="#page2" class="chat-button">Chat</a> |
|
</section> |
|
|
|
<section id="page2" class="hidden"> |
|
<h1>Hi! This is the 2nd page.</h1> |
|
<p>It's still unimplemented. Wait for it.</p> |
|
<a href="#page1" class="chat-button">Return</a> |
|
</section> |
|
|
|
<div id="bottom-text"> |
|
<p>© 2023 Hermes Chat App. All rights reserved.</p> |
|
</div> |
|
|
|
<script> |
|
document.addEventListener("DOMContentLoaded", function() { |
|
const chatButton = document.querySelector(".chat-button"); |
|
const returnButton = document.querySelector("#page2 .chat-button"); |
|
const page1 = document.querySelector("#page1"); |
|
const page2 = document.querySelector("#page2"); |
|
chatButton.addEventListener("click", function(event) { |
|
event.preventDefault(); |
|
page1.classList.add("hidden"); |
|
page2.classList.remove("hidden"); |
|
}); |
|
returnButton.addEventListener("click", function(event) { |
|
event.preventDefault(); |
|
page2.classList.add("hidden"); |
|
page1.classList.remove("hidden"); |
|
}); |
|
}); |
|
</script> |
|
</body> |
|
|
|
</html> |
