<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<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">
<link rel="license" href="https://creativecommons.org/licenses/by/4.0/"/>
<!-- Bootstrap CSS -->
<link href="{{ url_for('static', filename = 'bootstrap.min.css') }}" rel="stylesheet">
<!-- Custom CSS -->
<link href="{{ url_for('static', filename = 'style.css') }}" rel="stylesheet">
<title>{% block title %}{% endblock %} | Tsinghua - iGEM 2024</title>
<style>
.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: 50px;
width: 160px;
height: 100vh; /* Set a fixed height using viewport height */
background-color: #ffffff;
padding: 20px;
box-shadow: 2px 0 5px rgba(0,0,0,0.1);
border-radius: 0px;
overflow-y: auto; /* Enable vertical scrolling if content exceeds height */
}
.sidebar ul {
list-style: none;
padding: 0;
margin: 0; /* Remove default margin */
}
.sidebar ul li {
margin-bottom: 10px; /* Add some space between list items */
}
.sidebar ul li a {
display: block;
padding: 10px;
color: #fa8072;
text-decoration: none;
transition: all 0.3s ease;
border-radius: 20px;
}
.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: 40px;
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;
}
.text-size-toggle {
position: fixed;
right: 10px;
bottom: 30px;
width: 50px;
height: 50px;
background-color: #fa8072;
border: none;
border-radius: 50%;
color: white;
font-size: 14px;
font-weight: bold;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
z-index: 1000;
}
/* Add a class for larger text */
.large-text {
font-size: 130%;
}
.loader-container {
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: 200px; /* Adjust size as needed */
height: 200px; /* Adjust size as needed */
}
.font-toggle {
position: fixed;
right: 70px;
bottom: 30px;
width: 50px;
height: 50px;
background-color: #fa8072;
border: none;
border-radius: 50%;
color: white;
font-size: 14px;
font-weight: bold;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
z-index: 1000;
}
/* Dyslexia-friendly font */
.dyslexia-font {
font-family: 'OpenDyslexic', cursive;
}
</style>
</head>
</head>
<body>
<div class="loader-container">
<img src="https://static.igem.wiki/teams/5187/art/loading.gif" alt="Loading" class="loader-gif">
</div>
<!-- Navigation -->
{% include 'menu.html' %}
<!--
<div class="team-logo">
<img src="https://static.igem.wiki/teams/5187/art/logo.png" alt="Team Logo">
</div>
-->
<!-- Header -->
<header class="bg-hero py-2 mb-4">
<div class="floral-border"></div>
<div class="content-wrapper">
<div class="container">
<div class="row align-items-center">
<div class="col-lg-12 text-center">
<h1 class="display-4 text-white mt-5 mb-2">{{ self.title() }}</h1>
<p class="lead mb-5 text-white-50">{% block lead %}{% endblock %}</p>
</div>
</div>
</div>
</div>
</header>
<!-- Page Content -->
<div class="container">
{% block page_content %}{% endblock %}
</div>
<button id="textSizeToggle" class="text-size-toggle">L</button>
<button id="fontToggle" class="font-toggle">D</button>
<!-- Footer: MUST mention license AND have a link to team wiki's repository on gitlab.igem.org -->
{% include 'footer.html' %}
<!-- Bootstrap Bundle with Popper -->
<script src="{{ url_for('static', filename = 'bootstrap.bundle.min.js') }}"></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'
});
});
});
// Existing script content
// Add new script for text size toggle functionality
document.addEventListener('DOMContentLoaded', function() {
var textSizeToggle = document.getElementById('textSizeToggle');
var body = document.body;
var isLarge = false;
textSizeToggle.addEventListener('click', function() {
if (isLarge) {
body.classList.remove('large-text');
textSizeToggle.textContent = 'L';
} else {
body.classList.add('large-text');
textSizeToggle.textContent = 'S';
}
isLarge = !isLarge;
// Store the current state in localStorage
localStorage.setItem('largeTextEnabled', isLarge);
});
// Check localStorage on page load
if (localStorage.getItem('largeTextEnabled') === 'true') {
body.classList.add('large-text');
textSizeToggle.textContent = 'S';
isLarge = true;
}
});
</script>
<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 fontToggle = document.getElementById('fontToggle');
var body = document.body;
var isDyslexiaFont = false;
fontToggle.addEventListener('click', function() {
if (isDyslexiaFont) {
body.classList.remove('dyslexia-font');
fontToggle.textContent = 'D';
} else {
body.classList.add('dyslexia-font');
fontToggle.textContent = 'O';
}
isDyslexiaFont = !isDyslexiaFont;
// Store the current state in localStorage
localStorage.setItem('dyslexiaFontEnabled', isDyslexiaFont);
});
// Check localStorage on page load
if (localStorage.getItem('dyslexiaFontEnabled') === 'true') {
body.classList.add('dyslexia-font');
fontToggle.textContent = 'O';
isDyslexiaFont = true;
}
});
</script>
</body>
</html>