Difference between revisions of "Team:Greece/Model"

Line 1: Line 1:
 
<html>
 
<html>
 
<head>
 
<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">
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  
−
<script>
+
<!-- >>>>> Link References <<<<< -->
−
          $( document ).ready(function() {
+
−
                void(window.document.title = 'MODEL');
+
−
                //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('background_box').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 = 'MODEL');});</script>
 +
 
 +
    <!-- Subsection onHover Functionality -->
 +
    <script>
 
function onHoverChanges(idz){
 
function onHoverChanges(idz){
 
$('.circlez').removeClass('opace');
 
$('.circlez').removeClass('opace');
Line 42: Line 41:
 
}
 
}
  
−
function whenAllOver(){ $('.circlez').removeClass('opace'); }
+
    <!-- Display Subsection Functionality -->
  
−
function displayMe(idz){
+
    <script>
−
    $('#display_box').css('display', 'block');
+
    function displayMe(idz){ $('#display_box').css('display', 'block'); scrollTillBottom(); }
−
    scrollTillBottom();
+
    </script>
−
}
+
   
−
</script>
+
    <!-- Smooth Scrolling (Top to Bottom and vice versa) -->
 
<script>
 
<script>
  
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)" />
 
<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='295' text-anchor='middle' fill='#000000'>
 
<text class='animate_text' id='t1' x='0' y='295' text-anchor='middle' fill='#000000'>
−
<tspan x="-230" dy="2.5em">A</tspan>
+
<tspan x="-230" dy="2.5em" onclick="displayMe('c_t1')">A</tspan>
−
<tspan x="-230" dy="1.5em">a</tspan>
+
<tspan x="-230" dy="1.5em" onclick="displayMe('c_t1')">a</tspan>
 
</text>
 
</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)" />
 
<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='300' text-anchor='middle' fill='#000000'>
 
<text class='animate_text' id='t2' x='0' y='300' text-anchor='middle' fill='#000000'>
−
<tspan x="195" dy="1.5em">B</tspan>
+
<tspan x="195" dy="1.5em" onclick="displayMe('c_t2')">B</tspan>
−
<tspan x="195" dy="1.5em">b</tspan>
+
<tspan x="195" dy="1.5em" onclick="displayMe('c_t2')">b</tspan>
−
<tspan x="193" dy="1.5em">_b_</tspan>
+
<tspan x="193" dy="1.5em" onclick="displayMe('c_t2')">_b_</tspan>
 
</text>
 
</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)" />
 
<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='300' text-anchor='middle' fill='#000000'>
 
<text class='animate_text' id='t3' x='0' y='300' text-anchor='middle' fill='#000000'>
−
<tspan x="615" dy="1.6em">C</tspan>
+
<tspan x="615" dy="1.6em" onclick="displayMe('c_t3')">C</tspan>
−
<tspan x="610" dy="1.5em">c</tspan>
+
<tspan x="610" dy="1.5em" onclick="displayMe('c_t3')">c</tspan>
−
<tspan x="610" dy="1.5em">_c_</tspan>
+
<tspan x="610" dy="1.5em" onclick="displayMe('c_t3')">_c_</tspan>
 
</text>
 
</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)" />
 
<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='300' text-anchor='middle' fill='#000000'>
 
<text class='animate_text' id='t4' x='0' y='300' text-anchor='middle' fill='#000000'>
−
<tspan x="1025" dy="2.3em">D</tspan>
+
<tspan x="1025" dy="2.3em" onclick="displayMe('c_t4')">D</tspan>
−
<tspan x="1023" dy="1.5em">d</tspan>
+
<tspan x="1023" dy="1.5em" onclick="displayMe('c_t4')">d</tspan>
 
</text>
 
</text>
−
 
−
 
 
</svg>
 
</svg>
  
Line 133: Line 130:
 
<img src='https://static.igem.org/mediawiki/2017/6/6f/GreeKom_desert_hd.jpeg' style='width:100%; height:100%;' />
 
<img src='https://static.igem.org/mediawiki/2017/6/6f/GreeKom_desert_hd.jpeg' style='width:100%; height:100%;' />
 
</div>
 
</div>
 +
 +
<!-- Subsection Box -->
 
<div id='display_box'></div>
 
<div id='display_box'></div>
  
−
<!-- Display_Box (the b@st@rd) -->
 
 
<style>
 
<style>
−
#display_box{
 
−
        display: none;
 
−
        position: absolute;
 
−
        background-color: #ffffff;
 
−
        margin: 800px 0px 0px 0px;
 
−
        z-index: 1000;
 
−
        width: 100%;
 
−
        height: 800px;
 
−
}
 
−
</style>
 
−
 
−
 
−
<!-- The Navigation Menu -->
 
−
<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{
 
.circlez{
Line 291: Line 145:
  
 
.opace{ opacity: 0.8; }
 
.opace{ opacity: 0.8; }
−
</style>
 
−
 
−
<!--Responsive stylesheets-->
 
−
<!--DEFAULT PROPERTIES ARE INHERITED FROM 1920px - 1080px RESOLUTION-->
 
−
 
−
<style>
 
−
 
−
/* DEFAULT PROPERTIES ARE INHERITED FROM 1535px WIDTH*/
 
−
 
−
/* < 1024px Resolution Desktop Screen */
 
−
 
−
/* < 1366px Resolution Desktop Screen*/
 
−
 
−
@media screen and (min-width: 1025px) and (max-width: 1367px) {
 
−
 
−
.menu_wrap{
 
−
position:relative;
 
−
                margin:-10px 0px 0px 0px;
 
−
                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>
 
</style>
  
Line 416: Line 168:
 
delete element;
 
delete element;
  
−
// Change color of current link
 
−
$('a[href*="' +window.location.href+'"]').each(function() { $(this).css('color', '#000000'); });
 
 
</script>
 
</script>
  
 
</body>
 
</body>
 
</html>
 
</html>

Revision as of 21:07, 28 August 2017

Loading...