Difference between revisions of "Team:Greece/Team"

(Prototype team page)
 
Line 1: Line 1:
−
{{Greece}}
 
−
 
 
<html>
 
<html>
 +
<head>
 +
    <!--<link type='text/css' rel='stylesheet' href='parallels.css' />
 +
    <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>
 +
          window.onload = function (){   
 +
                void(window.document.title = 'TEAM');
 +
                //HIDE
 +
                void(document.getElementById('loading-background').style.display = 'none');
 +
                void(document.getElementById('loading-gif').style.display = 'none');
  
−
<div class="column full_size" >
+
                //SHOW
 +
                void(document.getElementById('main-wraper').style.display = 'block');               
 +
                // Change color of current link
 +
                $('a[href*="' +window.location.href+'"]').each(function() { $(this).css('color', '#000000'); });
  
−
<h1>Team</h1>
+
          }
−
<p>In this page you can introduce your team members, instructors, and advisors. </p>
+
</script>
−
</div>
+
<script>
 +
function onHoverChanges(idz){
 +
$('.circlez').removeClass('opace');
 +
$('#'+idz).addClass('opace');
 +
 +
var stateMsg;
 +
switch(idz){
 +
case 'c_t1': stateMsg = 'O.S.I.R.I.S._OVERVIEW';
 +
break;
 +
case 'c_t2': stateMsg = 'RISK_ASSESSEMENT_ANALYSIS';
 +
break;
 +
case 'c_t3': stateMsg = 'INTEGRATED_HUMAN_PRACTICES';
 +
break;
 +
case 'c_t4': stateMsg = 'PUBLIC_ENGAGEMENT';
 +
break;
 +
}
 +
window.history.replaceState(null, null, stateMsg);
 +
}
  
−
<div class="clear"></div>
+
function whenAllOver(){ $('.circlez').removeClass('opace'); }
  
−
<div class="column half_size" >
+
function displayMe(idz){
−
<h5>Inspiration</h5>
+
    $('#display_box').css('display', 'block');
−
<p>You can look at what other teams did to get some inspiration! <br />
+
    scrollTillBottom();
−
Here are a few examples:</p>
+
}
−
<ul>
+
</script>
−
<li><a href="https://2014.igem.org/Team:METU_Turkey_team">METU Turkey </a></li>
+
<script>
−
<li><a href="https://2014.igem.org/Team:Colombia/Members">Colombia</a></li>
+
−
<li><a href="https://2014.igem.org/Team:Stony_Brook/Team">Stony Brook</a></li>
+
−
<li><a href="https://2014.igem.org/Team:OUC-China/Team">OUC-China</a></li>
+
−
</ul>
+
  
−
</div>
+
var myVar;
 +
function scrollTillBottom() {
 +
    var i=0;
 +
    myVar = setInterval(function(){ i += 1; scrollBy(0,10); console.log(i); if(i == 150) myStopFunction(); }, 2);
 +
}
  
−
<div class="column half_size" >
+
function scrollTillTop(){
−
<h5>What should this page contain?</h5>
+
    var j=0;
−
<ul>
+
    myVar = setInterval(function(){ j += 1; scrollBy(0,-10); console.log(j); if(j == 150) myStopFunction(); }, 2);
−
<li> Include pictures of your teammates, don’t forget instructors and advisors! </li>
+
}
−
<li>You can add a small biography or a few words from each team member, to tell us what you like, and what motivated you to participate in iGEM.</li>
+
−
<li>Take team pictures! Show us your school, your lab and little bit of your city.</li>
+
−
<li>Remember that image galleries can help you showcase many pictures while saving space.</li>
+
−
</ul>
+
−
</div>
+
  
 +
function myStopFunction() {
 +
    clearInterval(myVar);
 +
}
  
 +
$('#toTop').click( function(e) {
 +
  e.preventDefault();
 +
  scrollTillTop();
 +
});
  
 +
</script>
 +
</head>
 +
<body>
 +
<div id='loading-background'></div>
 +
<img id='loading-gif' src='https://cldup.com/pIBaUjU48W.gif'/>
 +
<!-- Navigation Bar -->
 +
            <div style='display: none;' id='main-wraper'>
 +
                    <!--<div style='position:absolute;z-index:-1000;border:1px solid black;height:500px;width:100px;background:#e8e4f5;'>.</div>-->
 +
    <div class='menu_wrap'></div>
 +
<nav class='menu'>
 +
<ul class='clearfix' id='list'>
 +
<li><a target='_self' href='https://2017.igem.org/Team:Greece/home'>
 +
<img class='logo' id='logo' src='https://cldup.com/0IRxBwvTKJ.png' /></a></li>
 +
<!--<li class='li_indiv'><a target='_self' href='https://2017.igem.org/Team:Greece/home'>HOME</a></li>-->
 +
<span id='just_to_align'>
 +
  <li style='width:' class='li_indiv'><a target='_self' href='https://2017.igem.org/Team:Greece/Project'>PROJECT</a></li>
 +
  <li style='width:' class='li_indiv'><a target='_self' href='https://2017.igem.org/Team:Greece/Model'>MODELING</a></li>
 +
  <li style='width:' class='li_indiv'><a target='_self' href='https://2017.igem.org/Team:Greece/human_practices'>HUMAN PRACTICES</a></li>
 +
  <li style='width:' class='li_indiv'><a target='_self' href='https://2017.igem.org/Team:Greece/Contribute'>CONTRIBUTION</a></li>
 +
  <li style='width:' class='li_indiv'><a target='_self' href='https://2017.igem.org/Team:Greece/Team'>TEAM</a></li>
 +
</span>
 +
</ul>
 +
</nav>
 +
                </div>
 +
<svg style='display:block; position:absolute; z-index:1000; margin: 0px;' id='svg_graphics_box' class='responsive_box' height="600" width='99%' viewBox="0 0 800 700">
 +
                              <!--min-x, min-y, width, height-->
 +
 +
<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'>
 +
<tspan x="-230" dy="2.5em">A</tspan>
 +
<tspan x="-230" dy="1.5em">a</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='300' text-anchor='middle' fill='#000000'>
 +
<tspan x="195" dy="1.5em">B</tspan>
 +
<tspan x="195" dy="1.5em">b</tspan>
 +
<tspan x="193" dy="1.5em">_b_</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='300' text-anchor='middle' fill='#000000'>
 +
<tspan x="615" dy="1.6em">C</tspan>
 +
<tspan x="610" dy="1.5em">c</tspan>
 +
<tspan x="610" dy="1.5em">_c_</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='300' text-anchor='middle' fill='#000000'>
 +
<tspan x="1025" dy="2.3em">D</tspan>
 +
<tspan x="1023" dy="1.5em">d</tspan>
 +
</text>
 +
 +
 +
</svg>
 +
<div class='background_box' onmouseover='whenAllOver()'>
 +
<img src='https://static.igem.org/mediawiki/2017/6/6f/GreeKom_desert_hd.jpeg' style='width:100%; height:100%;' />
 
</div>
 
</div>
 +
<div id='display_box'></div>
 +
 +
<!-- Display_Box (the b@st@rd) -->
 +
<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;
 +
margin-top: -100px;
 +
width:100%;
 +
height:100%;
 +
        z-index: 100;
 +
}
 +
 +
.circlez{
 +
opacity: 0.6;
 +
}
 +
 +
.animate_text{ font-size: 25px; }
 +
 +
.circlez, .animate_text{cursor: pointer;}
 +
 +
.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%;
 +
    }
 +
}
 +
 +
}
 +
</style>
 +
<style>
 +
    #loading-gif{
 +
        position: fixed;
 +
        z-index: 10000;
 +
        height: 200px;
 +
-webkit-transform: translate(170%, 110%);
 +
        -moz-transform: translate(170%, 110%);
 +
        -ms-transform: translate(170%, 110%);
 +
      -o-transform: translate(170%, 110%);
 +
        transform: translate(170%, 110%);
 +
    }
 +
</style>
 +
 +
<!--Styling script-->
 +
<script>
 +
//Changes shall apply under void()
 +
// Upper black toolbar stays there id = 'top_menu_14'  -> Could be display:block
 +
// Main div wrapper contains code and all other stuff id = 'content' -> Change id to 'content2'
 +
// Reason: iGEM puts everything in document.getElementById('content') - change id - cause element 404
 +
void(document.getElementById('content').id = 'content0')
 +
 +
// Div (placeholder) containing the iGEM logo and some text id = 'top_title' -> Apply display: none
 +
void(document.getElementById('top_title').style.display = 'none');
 +
 +
// Small icon in the top black toolbar id = 'bars_item' -> Apply display: none
 +
void(document.getElementById('bars_item').style.display = 'none');
 +
// Same application for it's side effect (display an ugly div by default)
 +
 +
void(document.getElementById('user_item').style.display = 'none');
 +
void(document.getElementById('sideMenu').style.display = 'none');
 +
var element = document.getElementById('home_logo');
 +
element.outerHTML = '';
 +
delete element;
 +
 +
// Change color of current link
 +
$('a[href*="' +window.location.href+'"]').each(function() { $(this).css('color', '#000000'); });
 +
</script>
 +
<style>
 +
#loading-background{
 +
    position: fixed;
 +
    margin: -17px 0px 0px 0px;
 +
    z-index:10000;
 +
    width:100%;
 +
    height:100%;
 +
    zoom: 35%;
 +
    background: url(https://static.igem.org/mediawiki/2017/f/fc/GreeKom_paper.jpeg);
 +
}
 +
</style>
 +
</body>
 
</html>
 
</html>

Revision as of 11:41, 19 August 2017

A a B b _b_ C c _c_ D d