Skip to content
Snippets Groups Projects
Commit 7361a62e authored by HouTeng Chan's avatar HouTeng Chan
Browse files

Update file home.html

parent 0bee77c2
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 43 additions and 98 deletions
wiki/pages/home.html
+ 43
− 98
View file @ 7361a62e
......@@ -2,10 +2,9 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tsinghua - IGEM 2024</title>
<link rel="icon" type="image/x-icon" href="https://static.igem.wiki/teams/5187/art/icon.png">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="https://static.igem.wiki/teams/5187/art/icon.png">
<title>Tsinghua - IGEM 2024</title>
<style>
body, html {
scroll-behavior: smooth;
......@@ -34,10 +33,9 @@
.content-wrapper {
padding-top: 60px;
position: relative;
z-index: 2; /* 确保内容在曲线之上 */
}
.content-block {
background-color: rgba(255, 255, 255, 0.7);
background-color: rgba(255, 255, 255, 0.7); /* 将背景颜色设置为有透明度 */
border-radius: 20px;
padding: 20px;
margin: 40px auto;
......@@ -45,10 +43,11 @@
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
transition: all 0.3s ease;
}
.content-block:hover {
background-color: rgba(255, 255, 255, 0.95);
box-shadow: 0 8px 16px rgba(0,0,0,0.2);
transform: scale(1.02);
background-color: rgba(255, 255, 255, 0.95); /* 鼠标悬停时稍微提高透明度 */
box-shadow: 0 8px 16px rgba(0,0,0,0.2);
transform: scale(1.02);
}
.content {
display: flex;
......@@ -59,11 +58,13 @@
width: 100%;
margin: 10px 0;
}
/* 修改 .image 类，使图片容器居中 */
.image {
display: flex;
justify-content: center;
margin: 10px 0;
}
/* 修改 img 标签，限制最大宽度并居中 */
img {
max-width: 100%;
height: auto;
......@@ -149,64 +150,36 @@
}
}
.loader-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #ffffff;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
z-index: 9999;
}
.loader-gif {
width: 150px;
height: 150px;
}
/* 曲线样式 */
.curve-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 1; /* 在内容之下，菜单之下 */
/* 添加背景颜色以测试 */
/* background-color: rgba(255, 0, 0, 0.1); */
}
.sachet {
position: fixed;
bottom: 20px;
right: 20px;
width: 100px;
z-index: 3; /* 在曲线之上 */
}
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #ffffff; /* Solid white background */
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
z-index: 9999;
}
.loader-gif {
width: 150px;
height: 150px;
}
</style>
</head>
<body>
<div class="loader-container">
<img src="https://static.igem.wiki/teams/5187/art/loading.gif" alt="Loading" class="loader-gif">
</div>
<div class="curve-container">
<svg width="100%" height="100%" viewBox="0 0 1920 1080" preserveAspectRatio="xMidYMid slice">
<!-- 定义三条曲线 -->
<path id="curve1" d="M100,200 C500,100 800,300 1200,200" stroke="pink" stroke-width="4" fill="none"/>
<path id="curve2" d="M100,400 C600,300 900,500 1400,400" stroke="pink" stroke-width="4" fill="none"/>
<path id="curve3" d="M100,600 C700,500 1000,700 1600,600" stroke="pink" stroke-width="4" fill="none"/>
</svg>
</div>
<img src="https://static.igem.wiki/teams/5187/art/icon.png" alt="香囊" class="sachet">
</div>
<div id="menu">
{% include 'menu.html' %}
</div>
<div class="content-wrapper">
<!-- 内容块 1 -->
<div class="content-block" id="block1">
......@@ -350,47 +323,19 @@
<p><small>The repository used to create this website is available at <a href="https://gitlab.igem.org/2024/tsinghua" style="color: black;">gitlab.igem.org/2024/tsinghua</a>.</small></p>
</div>
</footer>
</body>
<script>
window.addEventListener('load', function() {
const loaderContainer = document.querySelector('.loader-container');
setTimeout(function() {
loaderContainer.style.opacity = '0';
loaderContainer.style.transition = 'opacity 0.5s ease';
setTimeout(() => {
loaderContainer.style.display = 'none';
}, 500);
}, 2000); // Hide after 2 seconds (adjust as needed)
// 曲线动画
var curve1 = document.getElementById('curve1');
var curve2 = document.getElementById('curve2');
var curve3 = document.getElementById('curve3');
var length1 = curve1.getTotalLength();
var length2 = curve2.getTotalLength();
var length3 = curve3.getTotalLength();
curve1.style.strokeDasharray = length1;
curve1.style.strokeDashoffset = length1;
curve2.style.strokeDasharray = length2;
curve2.style.strokeDashoffset = length2;
curve3.style.strokeDasharray = length3;
curve3.style.strokeDashoffset = length3;
window.addEventListener('scroll', function() {
var scrollPercentage = (document.documentElement.scrollTop + document.body.scrollTop) / (document.documentElement.scrollHeight - document.documentElement.clientHeight);
var drawLength1 = length1 * scrollPercentage;
var drawLength2 = length2 * scrollPercentage;
var drawLength3 = length3 * scrollPercentage;
<script>
window.addEventListener('load', function() {
const loaderContainer = document.querySelector('.loader-container');
setTimeout(function() {
loaderContainer.style.opacity = '0';
loaderContainer.style.transition = 'opacity 0.5s ease';
setTimeout(() => {
loaderContainer.style.display = 'none';
}, 500);
}, 2000); // Hide after 2 seconds (adjust as needed)
});
</script>
</html>
curve1.style.strokeDashoffset = length1 - drawLength1;
curve2.style.strokeDashoffset = length2 - drawLength2;
curve3.style.strokeDashoffset = length3 - drawLength3;
});
});
</script>
</body>
</html>
\ No newline at end of file
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment