Difference between revisions of "Team:Greece/Team"

@@ Line 1: / Line 1: @@
 <html>
 <head>
-    <!--<link type='text/css' rel='stylesheet' href='parallels.css' />
+<!-- >>>>> Meta <<<<< -->
-    <link type='text/css' rel='stylesheet' href='navigation_bar.css' />
-    <script type='text/javascript' src='https://cldup.com/HJtlSwy2qT.js'></script>-->
-    <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
-<script>
+<!-- >>>>> Link References <<<<< -->
-          $( document ).ready(function() {
-                 void(window.document.title = 'TEAM');
-                 //HIDE
-                 void(document.getElementById('loading-background').style.display = 'none');
-                 //SHOW
+    <link rel="stylesheet" type="text/css" href="https://2017.igem.org/Template:Greece/CSS?action=raw&ctype=text/css" />
-                 void(document.getElementById('main-wraper').style.display = 'block');
-                 void(document.getElementById('svg_graphics_box').style.display = 'block');
-                 void(document.getElementById('video').style.display = 'block');
-                 // Change color of current link
-                 $('a[href*="' +window.location.href+'"]').each(function() { $(this).css('color', '#000000'); });
-          });
+<!-- >>>>> Scripts <<<<< -->
-</script>
-<script>
+    <!-- Call Jquery -->
+    <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
+    <!-- Call Template Scrips -->
+    <script type="text/javascript" src="https://2017.igem.org/Template:Greece/Javascript?
+action=raw&ctype=text/javascript"></script>
+    <!-- Change document title -->
+    <script>$( document ).ready(function(){void(window.document.title = 'PROJECT');});</script>
+    <!-- Subsection onHover Functionality -->
+    <script>
 	function onHoverChanges(idz){
 		$('.circlez').removeClass('opace');
@@ Line 41: / Line 40: @@
 		window.history.replaceState(null, null, stateMsg);
 	}
+    </script>
-function whenAllOver(){ $('.circlez').removeClass('opace'); }
+     <!-- Display Subsection Functionality -->
+     <script>
-function displayMe(idz){
+     function displayMe(idz){ $('#display_box').css('display', 'block'); scrollTillBottom(); }
-    $('#display_box').css('display', 'block');
+     </script>
-    scrollTillBottom();
-}
+     <!-- Smooth Scrolling (Top to Bottom and vice versa) -->
-</script>
+     <script>
-<script>
 var myVar;
@@ Line 105: / Line 104: @@
 	<circle class='circlez' cx="-230" cy="365" r="135" stroke='#ffffff' stroke-width="0" fill="white" id='c_t1' class='svgGraphic' onclick="displayMe(this.id)" onmouseover="onHoverChanges(this.id)" />
 	<text class='animate_text' id='t1' x='0' y='275' text-anchor='middle' fill='#000000'>
-		<tspan x="-230" dy="2.5em">OVERVIEW:</tspan>
+		<tspan x="-230" dy="2.5em" onclick="displayMe('c_t1')">OVERVIEW:</tspan>
-		<tspan x="-230" dy="1.5em">UNITS/DISCIPLINES/</tspan>
+		<tspan x="-230" dy="1.5em" onclick="displayMe('c_t1')">UNITS/DISCIPLINES/</tspan>
-                 <tspan x="-230" dy="1.5em">TRAINING</tspan>
+                 <tspan x="-230" dy="1.5em" onclick="displayMe('c_t1')">TRAINING</tspan>
 	</text>
 	<circle class='circlez' cx="190" cy="365" r="135" stroke='#ffffff' stroke-width="0" fill="white" id='c_t2' class='svgGraphic' onclick="displayMe(this.id)" onmouseover="onHoverChanges(this.id)" />
 	<text class='animate_text' id='t2' x='0' y='335' text-anchor='middle' fill='#000000'>
-		<tspan x="195" dy="1.5em">MEMBERS</tspan>
+		<tspan x="195" dy="1.5em" onclick="displayMe('c_t2')">MEMBERS</tspan>
 	</text>
 	<circle class='circlez' cx="610" cy="365" r="135" stroke='#ffffff' stroke-width="0" fill="white" id='c_t3' class='svgGraphic' onclick="displayMe(this.id)" onmouseover="onHoverChanges(this.id)" />
 	<text class='animate_text' id='t3' x='0' y='335' text-anchor='middle' fill='#000000'>
-		<tspan x="615" dy="1.5em">SUPERVISORS</tspan>
+		<tspan x="615" dy="1.5em" onclick="displayMe('c_t3')">SUPERVISORS</tspan>
 	</text>
 	<circle class='circlez' cx="1020" cy="365" r="135" stroke='#ffffff' stroke-width="0" fill="white" id='c_t4' class='svgGraphic' onclick="displayMe(this.id)" onmouseover="onHoverChanges(this.id)" />
 	<text class='animate_text' id='t4' x='0' y='335' text-anchor='middle' fill='#000000'>
-		<tspan x="1025" dy="1.5em">ATTRIBUTIONS</tspan>
+		<tspan x="1025" dy="1.5em" onclick="displayMe('c_t4')">ATTRIBUTIONS</tspan>
 	</text>
 </svg>
-<!--
-<div class='background_box' id='background_box'>
-	<img src='https://static.igem.org/mediawiki/2017/6/6f/GreeKom_desert_hd.jpeg' style='width:100%; height:100%;' />
-</div>
--->
+<!-- Video Background -->
 <video id="video" autoplay="autoplay" muted="muted" preload="auto" loop="loop">
 	<!--<source src="https://cldup.com/tPZsN3E3uG.mp4" type="video/mp4">-->
@@ Line 135: / Line 128: @@
 </video>
-<style>
+<!-- Subsection Box -->
-video{
+<div id='display_box'></div>
-    position: fixed;
-    display:none;
-    top: 0%;
-    left: 0%;
-    min-width: 100%;
-    min-height: 100%;
-    width: inherit;
-    height: inherit;
-    z-index: 999;
-    overflow: hidden;
-}
-</style>
-<!-- The Navigation Menu -->
+<!-- Part of template CSS file-->
 <style>
-*{
-   font-family: Century Gothic;
-}
-body{ background: #ffffff }
-a{
-	text-decoration: none;
-	color: #000000;
-}
-a:visited{ text-decoration:none; }
-a:link{ text-decoration:none; }
-a:hover{ text-decoration:none; }
-a:active{ text-decoration:none; }
-.clearfix:after {
-    display:block;
-    clear:both;
-}
-.menu_wrap {
-	position:absolute;
-        margin: 0px;
-	text-align:center;
-	height: 84px;
-        width: 100%;
-        -webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.2);
-        -moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.2);
-        box-shadow: 0px 1px 3px rgba(0,0,0,0.2);
-        background: #ffffff;
-        opacity:0.6;
-	z-index:1000;
-	/*border:1px solid black;*/
-}
-.menu {
-    position:relative;
-    width: 100%;
-    margin: -5px 0px 0px 0px;
-    z-index: 1000;
-    height: 84px;
-    -webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.2);
-    -moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.2);
-    box-shadow: 0px 1px 3px rgba(0,0,0,0.2);
-}
-.menu li {
-	position:relative;
-	padding: 0px;
-        margin-right: 3%;
-        margin-left: 3%;
-        list-style: none;
-	height: 35px;
-	/*border-right: 1px solid #428bca;*/
-	display:inline-block;
-}
-.menu a{
-    transition:all linear 0.25s;
-    color:#868383;
-	font-size:15px;
-	font-family:Century Gothic;
-	font-size: 17px;
-}
-.menu li:hover > a{
-    text-decoration:none;
-    color:#000000;
-}
-.menu > ul > li {
-    float:left;
-	margin-left:8px;
-    display:inline-block;
-    position:relative;
-    font-size:18px;
-	line-height:30px;
-}
-.menu ul li a {
-    padding:4px 25px;
-    display:inline-block;
-    text-shadow:0px 1px 0px rgba(0,0,0,0.3);
-}
-/*	Logo	*/
-.logo{
-	position:absolute;
-	margin: -17px 0px 0px -46px;
-	width: 150px;
-	height: 83px;
-	/*border: 1px solid grey;*/
-	text-align:left;
-	/*box-shadow:0px 1px 3px rgba(0,0,0,0.2);*/
-        z-index:1000;
-}
-#just_to_align{
-	position:absolute;
-	right: 5%;
-	width: 100%;
-	margin: 23px 10px 0px 0px;
-	/*border: 1px solid black;*/
-	text-align:right;
-}
-.li_indiv{
-	position:relative;
-	text-align:center;
-	margin:0px 35px 0px 0px;
-	/*word-wrap: break-word;*/
-	/*border:1px solid black;*/
-}
-.li_indiv a{
-	position:relative;
-	top:5px;
-}
-div #sideMenu a #home_logo img{
-   display:none;
-}
-.background_box{
-	position:fixed;
-        display: none;
-	margin-top: -100px;
-	width:100%;
-	height:100%;
-        z-index: 100;
-}
 .circlez{
@@ Line 293: / Line 143: @@
 .opace{ opacity: 0.8; }
 </style>
-<!--Responsive stylesheets-->
+<!-- Special style -->
-<!--DEFAULT PROPERTIES ARE INHERITED FROM 1920px - 1080px RESOLUTION-->
 <style>
-/*	DEFAULT PROPERTIES ARE INHERITED FROM 1535px WIDTH*/
+video{
+    position: fixed;
-/* < 1024px Resolution Desktop Screen */
+    display:none;
+    top: 0%;
-/* < 1366px Resolution Desktop Screen*/
+    left: 0%;
+    min-width: 100%;
-@media screen and (min-width: 1025px) and (max-width: 1367px) {
+    min-height: 100%;
+    width: inherit;
-	.menu_wrap{
+    height: inherit;
-		position:relative;
+    z-index: 999;
-                margin:-10px 0px 0px 0px;
+    overflow: hidden;
-                width: 1348px;
-		/*No left or right margins - menu wides fullscreen*/
-	}
-	.menu{
-		position:absolute;
-		width: 1348px;
-		margin: -81px 0px 0px 0px;
-	}
-	.menu > ul > li{
-		margin-left:12px;
-	}
-	.menu li{
-		margin-right: 35px;
-		margin-left: 35px;
-	}
-	#just_to_align{
-		right:60px;
-		margin:14px 10px 0px 0px;
-	}
-	.logo{
-		margin: -21px 0px 0px -61px;
-	}
 }
-@media screen and (min-width: 1367px) and (max-width: 1921px){
-        .logo{
-                margin: -18px 0px 0px -48px;
-        }
-        .menu li {
-                margin-right: 4%;
-                margin-left: 4%;
-        }
-@media screen and (min-width: 1367px) and (max-width: 1770px){
-    .menu li{
-          margin-right: 3%;
-          margin-left: 3%;
-    }
-}
-@media screen and (min-width: 1770px) and (max-width: 1921px){
-        .menu_wrap{ margin: -12px 0px 0px 0px; }
-        .menu{ margin: -83px 0px 0px 0px; }
-        #just_to_align{ margin: 13px 10px 0px 0px; }
-}
-}
-</style>
-<!--Loading Div Style-->
-<style>
-     #loading-background{
-        position: fixed;
-        width:100%;
-        height:100%;
-        top: 0;
-        left: 0;
-        display: block;
-        /*margin: -17px 0px 0px 0px;*/
-        z-index: 10000;
-        text-align: center;
-        zoom: 35%;
-        background: url(https://static.igem.org/mediawiki/2017/f/fc/GreeKom_paper.jpeg);
-     }
-     #loading-gif{
-        position: absolute;
-        z-index: 10000;
-        height: 250px;
-	-webkit-transform: translate(-50%, 320%);
-        -moz-transform: translate(-50%, 320%);
-        -ms-transform: translate(-50%, 320%);
-       	-o-transform: translate(-50%, 320%);
-        transform: translate(-50%, 320%);
-     }
 </style>
@@ Line 418: / Line 184: @@
 delete element;
-// Change color of current link
-$('a[href*="' +window.location.href+'"]').each(function() { $(this).css('color', '#000000'); });
 </script>
 </body>
 </html>

Revision as of 21:38, 28 August 2017