Difference between revisions of "Team:AUC-EGYPT"

 
(123 intermediate revisions by 2 users not shown)
Line 1: Line 1:
−
{{IGEM_TopBar}}
+
{{AUC-EGYPT/Wiki_Stripdown}}{{AUC-EGYPT/script}}{{AUC-EGYPT/navigationbar}}{{AUC-EGYPT/style.nav}}
−
{{AUC-EGYPT}}
+
<!--{{IGEM_TopBar}}{{AUC-EGYPT}} -->
 +
<html>
 +
<head>
 +
<meta name="viewport" content="width=device-width, initial-scale=1">
 +
<link href="اhttps://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
 +
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
 +
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
 +
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.2.5/css/swiper.min.css">
  
−
<head>
+
<style>
−
<style>  
+
.swiper-container {
−
@import url('https://fonts.googleapis.com/css?family=Amatic+SC&display=swap');
+
  width: 100%;
 +
  height: 100%;
 +
}
  
−
* {
+
html{
−
margin: 0;
+
background-color: #080727;
−
padding: 0;
+
 
}
 
}
−
body {
+
#content {
−
  /*background-image: linear-gradient(to bottom right, #436B95, #001F46);*/
+
background-color: #080727;
−
  background-color: #080727;
+
 
}
 
}
−
html {
+
 
−
    height: 100%;
+
.swiper-slide {
 +
  text-align: center;
 +
  font-size: 18px;
 +
  background: #080727;
 +
  /* Center slide text vertically */
 +
 +
  display: -webkit-box;
 +
  display: -ms-flexbox;
 +
  display: -webkit-flex;
 +
  display: flex;
 +
  -webkit-box-pack: center;
 +
  -ms-flex-pack: center;
 +
  -webkit-justify-content: center;
 +
  justify-content: center;
 +
  -webkit-box-align: center;
 +
  -ms-flex-align: center;
 +
  -webkit-align-items: center;
 +
  align-items: center;
 
}
 
}
−
body {
+
 
−
    height: 100%;
+
/* Text Overlay */
−
    margin: 0;
+
#lab_video_text_overlay h2 {
−
    background-repeat: no-repeat;
+
   font-size:4em
−
    background-attachment: fixed;
+
−
}
+
−
#gif {
+
−
   width: 80%;
+
 
}
 
}
  
−
.page {
+
#lab_video_text_overlay .btn {
−
margin: 0;
+
  border-radius:0;
−
padding:50px;
+
  text-transform:uppercase;
−
text-align: center;
+
  font-weight:200;
−
+
}
 +
#lab_video_text_overlay .btn-warning {
 +
  background-color:#F5D328;
 
}
 
}
  
 +
#lab_video_text_overlay {
 +
  position: absolute;
 +
  color: #FFF;
 +
  width: 100%;
 +
  top: 25%;
 +
}
  
−
.title {
+
#lab_video_text_overlay .container {
−
margin: 12px;
+
  text-align: center;
−
font-size: 1.5em;
+
  margin: 0px auto;
−
font-family: 'Amatic SC', cursive;
+
//  background-color: #669900;
−
  color: white;  
+
 
}
 
}
  
−
.slideshow-container {
+
@media screen and (max-width:991px) {
−
/*max-width: 645px;
+
  #lab_video_text_wrap {
−
max-height: 380px;*/
+
    height: 300px;
−
 
+
  }
−
position:relative;
+
−
margin: auto;
+
−
/*border: 5px solid #001f3f;
+
−
box-shadow: 0 0 10px #001f3f;
+
−
border-radius: 10px;*/
+
 
}
 
}
  
−
.slide-container {
+
@media screen and (max-width:650px) {
−
display: none;
+
  #lab_video_text_wrap {
 +
    height: 250px;
 +
  }
 +
  #lab_video_text_overlay h2 {
 +
    font-size: 2em;
 +
  }
 +
  #lab_video_text_overlay p {
 +
    font-size: .9em;
 +
  }
 
}
 
}
  
−
.prev, .next {
+
/*------------------*/
−
cursor: pointer;
+
* {box-sizing: border-box;}
−
position: absolute;
+
body {font-family: Verdana, sans-serif;}
−
  top: 50%;
+
.mySlides {display: none;}
−
  width: auto;
+
img {vertical-align: middle;}
−
  padding: 16px;
+
 
−
  color: white;
+
/* Slideshow container */
−
  font-weight: bold;
+
.slideshow-container {
−
  font-size: 20px;
+
  max-width: 1000px;
−
  transition: 0.6s ease;
+
  position: relative;
−
  border-radius: 0 3px 3px 0;
+
  margin: auto;
−
  user-select: none;
+
 
}
 
}
  
−
.prev {
+
/* Caption text */
−
   left: 0;
+
.text {
−
   border-radius: 3px 0 0 3px;
+
   color: #f2f2f2;
 +
  font-size: 15px;
 +
  padding: 8px 12px;
 +
  position: absolute;
 +
  bottom: 8px;
 +
  width: 100%;
 +
   text-align: center;
 
}
 
}
  
−
.next {
+
/* Number text (1/3 etc) */
−
   right: 0;
+
.numbertext {
−
   border-radius: 3px 0 0 3px;
+
   color: #f2f2f2;
 +
   font-size: 12px;
 +
  padding: 8px 12px;
 +
  position: absolute;
 +
  top: 0;
 
}
 
}
  
−
.prev:hover, .next:hover {
+
/* The dots/bullets/indicators */
−
   background-color: rgba(0,0,0,0.6);
+
.dot {
 +
  height: 15px;
 +
  width: 15px;
 +
  margin: 0 2px;
 +
   background-color: #bbb;
 +
  border-radius: 50%;
 +
  display: inline-block;
 +
  transition: background-color 0.6s ease;
 
}
 
}
  
−
.slide-number {
+
.active {
−
  color: #f2f2f2;
+
  background-color: #717171;
−
background-color: rgba(0,0,0,0.6);
+
−
  font-size: 12px;
+
−
  padding: 8px 12px;
+
−
  position: absolute;
+
−
top: 0;
+
 
}
 
}
  
−
.slide-img {
+
<!--/* Fading animation */
−
width: 100%;
+
.fade {
 +
  -webkit-animation-name: fade;
 +
  -webkit-animation-duration: 6s;
 +
  animation-name: fade;
 +
  animation-duration: 6s;
 +
}-->
 +
 
 +
@-webkit-keyframes fade {
 +
  from {opacity: .4}
 +
  to {opacity: 1}
 
}
 
}
  
−
.slide-caption {
+
@keyframes fade {
−
color: #f2f2f2;
+
  from {opacity: .4}
−
background-color: #001f3f;
+
  to {opacity: 1}
−
opacity: 0.7;
+
−
border-radius: 0 15px 15px 0;
+
−
  font-size: 15px;
+
−
  padding: 8px 12px;
+
−
  position: absolute;
+
−
  bottom: 8px;
+
−
  width: 90%;
+
−
text-align: left;
+
 
}
 
}
  
−
.slide-selector {
+
/* On smaller screens, decrease text size */
−
padding: 10px;
+
@media only screen and (max-width: 300px) {
 +
  .text {font-size: 11px}
 
}
 
}
 
</style>
 
</style>
 
</head>
 
</head>
−
<html>
+
<body>
  
 +
<section id="lab_video_slider">
 +
  <div class="container-fluid">
 +
    <div class="row">
 +
      <!-- Link Swiper's CSS -->
 +
   
 +
      <!-- Swiper -->
 +
      <div class="swiper-container">
 +
        <div class="swiper-wrapper">
 +
          <div id="slide_one" class="swiper-slide">
 +
          <img src="https://static.igem.org/mediawiki/2020/6/6a/T--AUC-EGYPT--Slide1.png" style="width:900px; height: 507px;">
 +
</div>
 +
<div id="slide_two" class="swiper-slide">
 +
          <video width="900" height="480" autoplay loop>
 +
  <source src="https://static.igem.org/mediawiki/2020/e/e2/T--AUC-EGYPT--Stage_1_VideoV2.mp4" type="video/mp4">
 +
</video>          </div>
 +
<div id="slide_one" class="swiper-slide">
 +
          <img src="https://static.igem.org/mediawiki/2020/d/d3/T--AUC-EGYPT--sol.png" style="width:900px; height: 507px;">
 +
</div>
 +
          <div id="slide_two" class="swiper-slide">
 +
          <video width="900" height="480" autoplay loop>
 +
  <source src="https://static.igem.org/mediawiki/2020/c/c8/T--AUC-EGYPT--Stage_2_Video.mp4" type="video/mp4">
 +
</video>
 +
      </div>
 +
       
  
−
<div class="page">
+
          </div>
−
 
+
  
−
<div class="slideshow-container">
+
        <img style="margin-button:260%;margin-left: 47%;" src="https://img.icons8.com/emoji/100/000000/2nd-place-medal-emoji.png"/>
  
−
<!-- individual slides -->
+
        </div>
−
<div class="slide-container">
+
        <!-- Add Pagination -->
−
<!-- <div class="slide-number">1 / 5</div> -->
+
        <div class="swiper-pagination"></div>
−
+
        <!-- Add Arrows -->
−
      <a href="#"><img id="gif" src="https://img.techpowerup.org/201024/temp.gif "></a>
+
        <div class="swiper-button-next"></div>
−
+
        <div class="swiper-button-prev"></div>
−
</div>
+
      </div>
−
   
+
−
+
−
</div>
+
−
<div class="slide-container">
+
−
<a href="#"><img id="gif" src="https://media.tenor.com/images/0887968881b2ea5483238499c08fe39e/tenor.gif"></a>
+
−
+
−
</div>
+
−
<div class="slide-container">
+
−
<a href="#"><img src="https://thumbs.gfycat.com/FairPastKoi-small.gif"></a>
+
−
+
−
</div>
+
−
<div class="slide-container">
+
−
<a href="#"><img src="https://thumbs.gfycat.com/AcceptableBlackKingbird-size_restricted.gif"></a>
+
−
+
−
</div>
+
−
<div class="slide-container">
+
−
+
−
<a href="#"><img src="https://thumbs.gfycat.com/AccomplishedFearlessAsianpiedstarling-size_restricted.gif"></a>
+
−
+
−
</div>
+
  
−
<!-- Previous and Next Slide Buttons -->
+
      <!-- Swiper JS -->
−
<a class="prev" onclick="plusSlides(-1)">&#10094;</a>
+
      <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.2.5/js/swiper.min.js"></script>
−
<a class="next" onclick="plusSlides(1)">&#10095;</a>
+
−
</div>
+
  
−
<div class="slide-selector">
+
      <!-- Initialize Swiper -->
−
<span class="selector-dot" onclick="currentSlide(1)"></span>
+
      <script>
−
<span class="selector-dot" onclick="currentSlide(2)"></span>
+
        var swiper = new Swiper('.swiper-container', {
−
<span class="selector-dot" onclick="currentSlide(3)"></span>
+
            pagination: '.swiper-pagination',
−
<span class="selector-dot" onclick="currentSlide(4)"></span>
+
            paginationClickable: true,
−
<span class="selector-dot" onclick="currentSlide(5)"></span>
+
            nextButton: '.swiper-button-next',
−
</div>
+
            prevButton: '.swiper-button-prev',
−
</div>
+
            spaceBetween: 30,
 +
           
 +
            autoplayDisableOnInteraction: false
 +
        });
 +
      </script>
 +
    </div>
 +
    <!-- end .row -->
 +
  </div>
 +
  <!-- end .container-->
 +
  </div>
 +
 
 +
 
 +
 
 +
<script>
 +
var slideIndex = 0;
 +
showSlides();
 +
 
 +
function showSlides() {
 +
  var i;
 +
  var slides = document.getElementsByClassName("mySlides");
 +
  var dots = document.getElementsByClassName("dot");
 +
  for (i = 0; i < slides.length; i++) {
 +
    slides[i].style.display = "none"; 
 +
  }
 +
  slideIndex++;
 +
  if (slideIndex > slides.length) {slideIndex = 1}   
 +
  for (i = 0; i < dots.length; i++) {
 +
    dots[i].className = dots[i].className.replace(" active", "");
 +
  }
 +
  slides[slideIndex-1].style.display = "block"; 
 +
  dots[slideIndex-1].className += " active";
 +
  setTimeout(showSlides, 5000); // Change image every 5 seconds
 +
}
 +
</script>
  
 +
</body>
 
</html>
 
</html>

Latest revision as of 01:16, 19 December 2020