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

Update file layout.html

parent 88bada52
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 97 additions and 105 deletions
wiki/layout.html
+ 97
− 105
View file @ d0e4cfc4
......@@ -4,7 +4,7 @@
<!-- 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="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 -->
......@@ -24,19 +24,18 @@
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);
}
}
.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;
......@@ -50,31 +49,18 @@
align-items: center;
justify-content: center;
}
.floral-border {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: url('https://static.igem.wiki/teams/5187/art/flower.jpg');
background-size: cover;
border: 40px solid transparent;
border-image: url('https://static.igem.wiki/teams/5187/art/flower.jpg') 60 round;
border-radius: 50px;
pointer-events: none;
}
.floral-border::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 50px;
background-color: #fa8072;
opacity: 0.3; /* 控制颜色覆盖层的透明度 */
}
.sidebar {
position: fixed;
left: 5px;
......@@ -87,17 +73,14 @@
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;
......@@ -106,7 +89,6 @@
transition: all 0.3s ease;
border-radius: 20px;
}
.sidebar ul li a:hover {
background-color: #fa8072;
color: #ffffff;
......@@ -183,13 +165,11 @@
overflow: hidden;
z-index: 10;
}
.team-logo img {
width: 100%;
height: 100%;
object-fit: cover;
}
.text-size-toggle {
position: fixed;
right: 10px;
......@@ -212,27 +192,26 @@
.large-text {
font-size: 140%;
}
.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;
}
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;
}
.font-toggle {
.loader-gif {
width: 150px;
height: 150px;
}
.font-toggle {
position: fixed;
right: 70px;
bottom: 30px;
......@@ -258,13 +237,16 @@
</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>
</div>
<!-- Navigation -->
{% include 'menu.html' %}
<!-- Header -->
<header class="bg-hero py-2 mb-4">
<div class="floral-border"></div>
......@@ -284,7 +266,6 @@
<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>
......@@ -316,6 +297,7 @@
var scrolled = (winScroll / height) * 100;
setProgress(scrolled);
// Show or hide the back to top button
if (winScroll > 300) {
backToTopButton.classList.add('show');
} else {
......@@ -325,6 +307,7 @@
window.addEventListener('scroll', handleScroll);
// Back to top functionality
backToTopButton.addEventListener('click', function() {
window.scrollTo({
top: 0,
......@@ -332,64 +315,73 @@
});
});
});
// 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);
});
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 {
// Check localStorage on page load
if (localStorage.getItem('largeTextEnabled') === 'true') {
body.classList.add('large-text');
textSizeToggle.textContent = 'S';
isLarge = true;
}
isLarge = !isLarge;
localStorage.setItem('largeTextEnabled', isLarge);
});
if (localStorage.getItem('largeTextEnabled') === 'true') {
body.classList.add('large-text');
textSizeToggle.textContent = 'S';
isLarge = true;
}
});
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);
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;
localStorage.setItem('dyslexiaFontEnabled', isDyslexiaFont);
});
if (localStorage.getItem('dyslexiaFontEnabled') === 'true') {
body.classList.add('dyslexia-font');
fontToggle.textContent = 'O';
isDyslexiaFont = true;
}
});
</script>
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>
\ No newline at end of file
</html>
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