<!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="shortcut icon" href="https://static.igem.wiki/common/icons/favicons/igem-2022.svg"/>
<link rel="license" href="https://creativecommons.org/licenses/by/4.0/"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
<!-- 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">-->
<!-- Navbar CSS-->
<link href="{{ url_for('static', filename = 'nav.css') }}" rel="stylesheet">
<title>{% block title %}{% endblock %} | AshesiGhana - iGEM 2023</title>
</head>
<body>
<!-- Navigation -->
{% include 'menu.html' %}
<!-- Header
<header class="bg-hero py-5 mb-5">
<div class="container h-100">
<div class="row h-100 align-items-center">
<div class="col-lg-12">
<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>
<p>hello elmir edited here</>
</div>
</div>
</div>
</header>
-->
<!-- Page Content
<div class="container">
{% block page_content %}{% endblock %}
</div>
-->
<!-- 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>
const menuBtn = document.querySelector(' .menu-btn');
const menuItems = document.querySelector(' .menu-items');
const expandBtn = document.querySelectorAll('.expand-btn');
// hamburger toggle
menuBtn.addEventListener("click", () =>{
menuBtn.classList.toggle("open");
menuItems.classList.toggle("open");
});
// mobile menu expand
expandBtn.forEach((btn) =>{
btn.addEventListener("click", () => {
btn.classList.toggle("open");
});
});
</script>
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<script>
AOS.init();
</script>
<script>
let active = false;
let scrollerMiddle = document.querySelector('.scroller-middle');
let scrollerTop = document.querySelector('.scroller-top');
scrollerMiddle.addEventListener('mousedown',function(){
active = "middle";
scrollerMiddle.classList.add('scrolling');
});
document.body.addEventListener('mouseup',function(){
active = false;
scrollerMiddle.classList.remove('scrolling');
});
document.body.addEventListener('mouseleave',function(){
active = false;
scrollerMiddle.classList.remove('scrolling');
});
scrollerTop.addEventListener('mousedown',function(){
active = "top";
scrollerTop.classList.add('scrolling');
});
document.body.addEventListener('mouseup',function(){
active = false;
scrollerTop.classList.remove('scrolling');
});
document.body.addEventListener('mouseleave',function(){
active = false;
scrollerTop.classList.remove('scrolling');
});
document.body.addEventListener('mousemove',function(e){
if (!active) return;
let x = e.pageX;
x -= document.querySelector('.wrapper').getBoundingClientRect().left;
scrollIt(x);
});
function scrollIt(x){
let transform = Math.max(0,(Math.min(x,document.querySelector('.wrapper').offsetWidth)));
if (active==="middle"){
document.querySelector('.middle').style.width = transform+"px";
scrollerMiddle.style.left = transform-25+"px";
if (scrollerTop.getBoundingClientRect().left>scrollerMiddle.getBoundingClientRect().left-5){
document.querySelector('.top').style.width = transform-5+"px";
scrollerTop.style.left = transform-30+"px";
}
}
if (active==="top"){
document.querySelector('.top').style.width = transform+"px";
scrollerTop.style.left = transform-25+"px";
if (scrollerTop.getBoundingClientRect().left>scrollerMiddle.getBoundingClientRect().left-5){
document.querySelector('.middle').style.width = transform+5+"px";
scrollerMiddle.style.left = transform-20+"px";
}
}
}
active = "middle";
scrollIt(460);
active = "top";
scrollIt(230);
active = false;
scrollerMiddle.addEventListener('touchstart',function(){
active = "middle";
scrollerMiddle.classList.add('scrolling');
});
document.body.addEventListener('touchend',function(){
active = false;
scrollerMiddle.classList.remove('scrolling');
});
document.body.addEventListener('touchcancel',function(){
active = false;
scrollerMiddle.classList.remove('scrolling');
});
scrollerTop.addEventListener('touchstart',function(){
active = "top";
scrollerTop.classList.add('scrolling');
});
document.body.addEventListener('touchend',function(){
active = false;
scrollerTop.classList.remove('scrolling');
});
document.body.addEventListener('touchcancel',function(){
active = false;
scrollerTop.classList.remove('scrolling');
});
document.querySelector('.wrapper').addEventListener('touchmove',function(e){
if (!active) return;
e.preventDefault();
let x = e.touches[0].pageX;
x -= document.querySelector('.wrapper').getBoundingClientRect().left;
scrollIt(x);
});
</script>
</body>
</html>