本文使用创作助手。
这一个网站不仅介绍了bicart，而且具有一个彩蛋页面。并且具有登录和注册界面。并且它具有背景颜色，背景图片和背景音乐。而且具有图片轮换功能。并且还具有菜单导航功能。
index.html 文件：
<!DOCTYPE html>
<html>
<head>
<title>Bicart介绍</title>
<style>
body {
background-color: #f5f5f5;
background-image: url("/static/background_image.jpg");
background-size: cover;
background-position: center;
}
.nav {
background-color: #333;
overflow: hidden;
}
.nav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.nav a:hover {
background-color: #ddd;
color: black;
}
.slideshow-container {
position: relative;
max-width: 800px;
margin: 0 auto;
}
.mySlides {
display: none;
}
.mySlides img {
width: 100%;
height: auto;
}
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
.prev:hover, .next:hover {
background-color: rgba(0, 0, 0, 0.8);
}
.dot-container {
text-align: center;
}
.dot {
height: 10px;
width: 10px;
margin: 0 4px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active {
background-color: #717171;
}
</style>
<script>
var slideIndex = 0;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
function showSlides() {
var i;
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex > slides.length) {
slideIndex = 1;
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex - 1].style.display = "block";
dots[slideIndex - 1].className += " active";
setTimeout(showSlides, 3000);
}
function currentSlide(n) {
slideIndex = n;
showSlides();
}
</script>
</head>
<body onload="showSlides()">
<div class="nav">
<a href="/">Home</a>
<a href="/login">Login</a>
<a href="/register">Register</a>
</div>
<h1>Welcome to Bicart</h1>
<div class="slideshow-container">
<div class="mySlides">
<img src="/static/image1.jpg">
</div>
<div class="mySlides">
<img src="/static/image2.jpg">
</div>
<div class="mySlides">
<img src="/static/image3.jpg">
</div>
<a class="prev" onclick="currentSlide(slideIndex - 1)">❮</a>
<a class="next" onclick="currentSlide(slideIndex + 1)">❯</a>
</div>
<div class="dot-container">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
</div>
<a href="/easter_egg">Easter Egg</a>
</body>
</html>
easter_egg.html 文件：
<!DOCTYPE html>
<html>
<head>
<title>Bicart - 漂流瓶</title>
<style>
body {
background-color: #f5f5f5;
background-image: url("/static/easter_egg_background.jpg");
background-size: cover;
background-position: center;
}
.easter-egg-container {
text-align: center;
margin-top: 100px;
}
.easter-egg-container h2 {
color: white;
font-size: 36px;
font-weight: bold;
}
.easter-egg-container p {
color: white;
font-size: 18px;
}
</style>
</head>
<body>
<div class="easter-egg-container">
<h2>漂流瓶</h2>
<p>这是一个彩蛋界面。</p>
</div>
</body>
</html>
这样，当您在主页点击 "Easter Egg" 按钮时，将跳转到 /easter_egg 路由，并显示漂流瓶的界面。
register.html文件：
<!DOCTYPE html>
<html>
<head>
<title>Register</title>
</head>
<body>
<h3>Register</h3>
<form action="/register" method="POST">
<label for="username">Username:</label>
<input type="text" id="username" name="username" required><br><br>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
login.html文件：
<!DOCTYPE html>
<html>
<head>
<title>Login</title>
</head>
<body>
<h3>Login</h3>
<form action="/login" method="POST">
<label for="username">Username:</label>
<input type="text" id="username" name="username" required><br><br>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>