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

Update file home.html

parent 8a8da049
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 9 additions and 202 deletions
wiki/pages/home.html
+ 9
− 202
View file @ 1319026e
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/png" href="https://static.igem.wiki/teams/5187/art/icon1.png" sizes="364x370">
<link rel="license" href="https://creativecommons.org/licenses/by/4.0/"/>
<link href="{{ url_for('static', filename = 'bootstrap.min.css') }}" rel="stylesheet">
<link href="{{ url_for('static', filename = 'style.css') }}" rel="stylesheet">
<title>Tsinghua - IGEM 2024</title>
<style>
body, html {
......@@ -16,157 +12,6 @@
font-family: 'Times New Roman', Times, serif;
scroll-behavior: smooth;
}
.bg-hero {
height: 200px;
max-width: 700px;
margin: 0 auto;
background-color: #fa8072;
border-radius: 50px;
position: relative;
overflow: hidden;
}
.image-container {
display: flex;
justify-content: center;
padding: 20px;
}
.shadowed-image {
max-width: 100%;
height: auto;
width: 50%;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.content-wrapper {
position: absolute;
top: 40px;
left: 40px;
right: 40px;
bottom: 40px;
background-color: #fa8072;
border-radius: 30px;
display: flex;
align-items: center;
justify-content: center;
}
.floral-border {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border: 40px solid transparent;
border-image: url('https://static.igem.wiki/teams/5187/art/flower.jpg') 60 round;
border-radius: 50px;
pointer-events: none;
}
.sidebar {
position: fixed;
left: 5px;
top: 210px;
width: 160px;
height: 40%;
background-color: #ffffff;
padding: 20px;
box-shadow: 2px 0 5px rgba(0,0,0,0.1);
border-radius: 20px;
}
.sidebar ul {
list-style: none;
padding: 0;
}
.sidebar ul li a {
display: block;
padding: 10px;
color: #fa8072;
text-decoration: none;
transition: all 0.3s ease;
border-radius: 20px; /* Added border-radius here */
}
.sidebar ul li a:hover {
background-color: #fa8072;
color: #ffffff;
transform: translateY(-3px);
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
.progress-container {
position: fixed;
left: 25px;
bottom: 160px;
width: 60px;
height: 60px;
z-index: 1000;
}
.progress-bar-circle {
transform: rotate(-90deg);
}
.progress-circle {
stroke: hsl(17, 100%, 50%);
stroke-linecap: round;
transition: stroke-dashoffset 0.3s;
}
.progress-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 12px;
font-weight: bold;
color: hsl(17, 100%, 50%);
}
.back-to-top {
position: fixed;
left: 95px;
bottom: 170px;
width: 40px;
height: 40px;
background-color: hsl(17, 100%, 50%);
border: none;
border-radius: 50%;
color: white;
font-size: 20px;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
transition: opacity 0.3s, visibility 0.3s;
opacity: 0;
visibility: hidden;
}
.back-to-top.show {
opacity: 1;
visibility: visible;
}
.back-to-top:hover {
background-color: hsl(18, 25%, 8%);
}
.team-logo {
position: fixed;
left: 10px;
top: 130px;
transform: translateY(-50%);
width: 150px;
height: 150px;
border-radius: 75%;
overflow: hidden;
z-index: 10;
}
.team-logo img {
width: 100%;
height: 100%;
object-fit: cover;
}
#menu {
position: fixed;
top: 0;
......@@ -206,6 +51,10 @@
}
/* Footer Styles */
footer {
background-color: #ffe4e1;
padding: 20px 0;
}
.follow-us-wrapper {
display: flex;
justify-content: flex-end;
......@@ -383,14 +232,13 @@
</div>
</div>
</footer>
<script src="{{ url_for('static', filename = 'bootstrap.bundle.min.js') }}"></script>
<script>
const blocks = document.querySelectorAll('.content-block');
const menu = document.getElementById('menu');
const colors = {
background: ['#FF5151', '#FFFFFF'],
text: ['#FF5151', '#FFFFFF']
background: ['#FF5151', '#FFFFFF'], // 粉色和白色
text: ['#FF5151', '#FFFFFF'] // 粉色和白色
};
let lastScrollTop = 0;
......@@ -461,46 +309,5 @@
window.addEventListener('resize', updateColors);
updateColors();
</script>
<script>
document.addEventListener('DOMContentLoaded', function() {
var circle = document.querySelector('.progress-circle');
var radius = circle.r.baseVal.value;
var circumference = radius * 2 * Math.PI;
var backToTopButton = document.getElementById('backToTop');
circle.style.strokeDasharray = `${circumference} ${circumference}`;
circle.style.strokeDashoffset = circumference;
function setProgress(percent) {
const offset = circumference - (percent / 100) * circumference;
circle.style.strokeDashoffset = offset;
document.querySelector('.progress-text').textContent = Math.round(percent) + '%';
}
function handleScroll() {
var winScroll = document.documentElement.scrollTop;
var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
var scrolled = (winScroll / height) * 100;
setProgress(scrolled);
// Show or hide the back to top button
if (winScroll > 300) {
backToTopButton.classList.add('show');
} else {
backToTopButton.classList.remove('show');
}
}
window.addEventListener('scroll', handleScroll);
// Back to top functionality
backToTopButton.addEventListener('click', function() {
window.scrollTo({
top: 0,
behavior: 'smooth'
});
});
});
</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