Zigapusnik (Talk | contribs) |
|||
Line 1: | Line 1: | ||
− | |||
<html> | <html> | ||
− | + | <head> | |
+ | <title>Home page</title> | ||
+ | <script src="https://code.jquery.com/jquery-1.11.1.min.js" | ||
+ | integrity="sha256-VAvG3sHdS5LqTT+5A/aeq/bZGa/Uj04xKxY8KM/w9EE=" | ||
+ | crossorigin="anonymous"></script> | ||
+ | <link rel="stylesheet" | ||
+ | href="https://igem2016.fri.uni-lj.si/index.php?title=Template:Slovenia/semantic.min.css&action=raw&ctype=text/css"> | ||
+ | <script type="text/javascript" | ||
+ | src="https://igem2016.fri.uni-lj.si/index.php?title=Template:Slovenia/semantic.min.js&action=raw&ctype=text/javascript"></script> | ||
+ | <link rel="stylesheet" type="text/css" href="//igem2016.fri.uni-lj.si/index.php?title=Custom.css&action=raw&ctype=text/css"> | ||
+ | <script type="text/javascript" src="https://igem2016.fri.uni-lj.si/index.php?title=Custom.js&action=raw&ctype=text/javascript"></script> | ||
+ | <script type="text/javascript" | ||
+ | src="https://igem2016.fri.uni-lj.si/index.php?title=Zitator.js&action=raw&ctype=text/javascript"></script> | ||
+ | <!-- MathJax (LaTeX for the web) --> | ||
+ | <script type="text/x-mathjax-config"> | ||
+ | MathJax.Hub.Config({ | ||
+ | tex2jax: { | ||
+ | inlineMath: [['$', '$'], ['\\(', '\\)']] | ||
+ | }, | ||
+ | jax: ["input/TeX","output/SVG"], | ||
+ | TeX: { | ||
+ | extensions: ["mhchem.js"], | ||
+ | equationNumbers: {autoNumber: "all" }, | ||
+ | Macros: { | ||
+ | goodbreak: '\\mmlToken{mo}[linebreak="goodbreak"]{}', | ||
+ | badbreak: ['\\mmlToken{mo}[linebreak="badbreak"]{#1}',1], | ||
+ | nobreak: ['\\mmlToken{mo}[linebreak="nobreak"]{#1}',1], | ||
+ | invisibletimes: ['\\mmlToken{mo}{\u2062}'] | ||
+ | } | ||
+ | }, | ||
+ | CommonHTML: { linebreaks: { automatic: true, width: "75% container" } }, | ||
+ | "HTML-CSS": { linebreaks: { automatic: true, width: "68% container" }}, | ||
+ | SVG: { linebreaks: { automatic: true, width: "200% container" }} | ||
+ | }); | ||
+ | </script> | ||
+ | <script type="text/javascript" async | ||
+ | src="//2016.igem.org/common/MathJax-2.5-latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"> | ||
+ | </script> | ||
+ | </head> | ||
<body> | <body> | ||
− | < | + | <style> |
− | + | .container { | |
− | + | position: relative; | |
− | + | } | |
− | + | .bottomLeft { | |
− | + | position: absolute; | |
− | + | bottom: 100px; | |
− | + | left: 16px; | |
− | + | } | |
− | + | ||
− | + | /* Popup container - can be anything you want */ | |
− | + | .popup { | |
− | + | display: inline-block; | |
− | + | cursor: pointer; | |
− | + | -webkit-user-select: none; | |
− | + | -moz-user-select: none; | |
− | + | -ms-user-select: none; | |
− | + | user-select: none; | |
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | /* The actual popup */ | |
− | + | .popup .popuptext { | |
− | + | visibility: hidden; | |
+ | width: 220px; | ||
+ | background-color: #555; | ||
+ | color: #fff; | ||
+ | text-align: center; | ||
+ | border-radius: 6px; | ||
+ | padding: 8px 0; | ||
+ | position: absolute; | ||
+ | z-index: 100; | ||
+ | } | ||
− | + | /* Toggle this class - hide and show the popup */ | |
+ | .popup .show { | ||
+ | visibility: visible; | ||
+ | -webkit-animation: fadeIn 1s; | ||
+ | animation: fadeIn 1s; | ||
+ | } | ||
+ | /* Add animation (fade in the popup) */ | ||
+ | @-webkit-keyframes fadeIn { | ||
+ | from {opacity: 0;} | ||
+ | to {opacity: 1;} | ||
+ | } | ||
− | --> | + | @keyframes fadeIn { |
− | < | + | from {opacity: 0;} |
− | < | + | to {opacity:1 ;} |
− | + | } | |
− | + | .container img{ | |
− | + | display: block; | |
− | + | margin-left: auto; | |
− | </ | + | margin-right: auto; |
− | < | + | } |
− | < | + | |
− | + | </style> | |
− | </ | + | <script> |
+ | $( document ).ready( | ||
+ | function() { | ||
+ | var getImgs = function() { | ||
+ | var imgs = []; | ||
+ | $('img').each(function() { | ||
+ | console.log("image detected"); | ||
+ | var data = $(this).data('alt'); | ||
+ | imgs.push(data); | ||
+ | }); | ||
+ | return imgs; | ||
+ | } | ||
+ | var imgs = getImgs(); | ||
+ | //preload images | ||
+ | var image = []; | ||
+ | $.each(imgs, function(index) { | ||
+ | console.log("loading resource"); | ||
+ | image[index] = new Image(); | ||
+ | image[index].src = imgs[index]; | ||
+ | }); | ||
+ | } | ||
+ | ); | ||
+ | function loadImage(sourceImage, popupname) { | ||
+ | console.log(sourceImage); | ||
+ | var image = document.getElementById("projectScheme"); | ||
+ | image.src = sourceImage; | ||
+ | |||
+ | //var rect = image.getBoundingClientRect(); | ||
+ | //console.log(rect.top, rect.right, rect.bottom, rect.left); | ||
+ | |||
+ | var popup = document.getElementById(popupname); | ||
+ | //popup.style.top = ((rect.bottom - rect.top)/2).toString().concat("px"); | ||
+ | //popup.style.left = ((rect.right - rect.left)/2).toString().concat("px"); | ||
+ | //console.log((rect.right - rect.left)/2, (rect.bottom - rect.top)/2); | ||
+ | popup.classList.toggle('show'); | ||
+ | } | ||
+ | </script> | ||
+ | |||
+ | <div id="example"> | ||
+ | <div class="pusher"> | ||
+ | <div class="full height"> | ||
+ | <div class="banana"> | ||
+ | <a href = "//igem2016.fri.uni-lj.si/index.php/Team:Slovenia"> | ||
+ | <img class="ui medium sticky image" src="//igem2016.fri.uni-lj.si/img_auth.php/5/58/Slog%26logo.png"> | ||
+ | </a> | ||
+ | <div class="ui vertical sticky text menu" style="background-color: transparent; padding-top: 80px; margin-left: 10px"> | ||
+ | <a class="item" href=""> | ||
+ | <i class="chevron circle left icon"></i> | ||
+ | <b>Human practices</b> | ||
+ | </a> | ||
+ | <a class="item" href="" style="margin-left: 10%"> | ||
+ | <i class="selected radio icon"></i> | ||
+ | <b>Safety</b> | ||
+ | </a> | ||
+ | <a class="item" href=""> | ||
+ | <i class="chevron circle right icon"></i> | ||
+ | <b>Sponsors</b> | ||
+ | </a> | ||
+ | </div> | ||
+ | </div> | ||
+ | <div class="article" id="context"> | ||
+ | <!-- menu goes here --> | ||
+ | <!-- content goes here --> | ||
+ | <div class="main ui citing justified container"> | ||
+ | <!-- <div class="ui two column grid"> | ||
+ | <div class="ui eight wide column"> | ||
+ | <img class="ui centered image" | ||
+ | src="https://igem2016.fri.uni-lj.si/img_auth.php/2/21/13521771_1756491854619523_237846538_n.jpg"> | ||
+ | </div> | ||
+ | <div class="ui eight wide column"> | ||
+ | <h1 class="ui centered dividing header"><span> </span>Project description</h1> | ||
+ | <p class="ui fluid segment text container"> | ||
+ | In the past years of iGEM and synthetic biology a lot of projects have been devoted to the development of | ||
+ | synthetic genetic circuits and logic gates. Most of those were based on transcription regulation, however | ||
+ | this mechanism is relatively slow and the final output can be detected only after several hours or days.<br> | ||
+ | This year team Slovenia has decided to tackle the problem of the design of fast logic circuits. We plan to | ||
+ | introduce new protein-based sensors that will allow cells to quickly respond to input signals such as light | ||
+ | stimulation or chemical dimerizers and produce outputs that could potentially be used for therapeutic | ||
+ | treatment. | ||
+ | </p> | ||
+ | </div> | ||
+ | </div> --> | ||
+ | <h1 class="ui centered dividing header"><span id="intro" class = "section"> </span>Project</h1> | ||
+ | <div class = "container"> | ||
+ | <img width = "800px" style = "border-radius: 15px;" src="//igem2016.fri.uni-lj.si/img_auth.php/d/da/Main-scheme0.png" alt="project scheme" usemap="#projectmap" id = "projectScheme"></img> | ||
+ | <map name="projectmap"> | ||
+ | <area class="popup" shape="poly" coords="74, 132, 136, 217, 241, 225, 319, 175, 365, 89, 298, 42, 152, 62" alt="module1" onmouseover="loadImage('//igem2016.fri.uni-lj.si/img_auth.php/9/92/Main-scheme1.png', 'module1')" onmouseout="loadImage('//igem2016.fri.uni-lj.si/img_auth.php/d/da/Main-scheme0.png', 'module1')" href="resultsModule1.html"></area> | ||
+ | <area class="popup" shape="poly" coords="387, 125, 393, 283, 423, 316, 518, 190, 486, 120" alt="module1" onmouseover="loadImage('//igem2016.fri.uni-lj.si/img_auth.php/2/2a/Main-scheme3.png', 'module2')" onmouseout="loadImage('//igem2016.fri.uni-lj.si/img_auth.php/d/da/Main-scheme0.png', 'module2')" href="resultsModule2.html"></area> | ||
+ | <area class="popup" shape="poly" coords="528, 77, 497, 134, 537, 173, 672, 185, 739, 145, 733, 94, 694, 71" alt="module1" onmouseover="loadImage('//igem2016.fri.uni-lj.si/img_auth.php/2/2e/Main-scheme2.png', 'module3')" onmouseout="loadImage('//igem2016.fri.uni-lj.si/img_auth.php/d/da/Main-scheme0.png', 'module3')" href="resultsModule3.html"></area> | ||
+ | <area class="popup" shape="poly" coords="393, 283, 423, 316, 454, 300, 474, 260, 537, 273, 494, 305, 678, 285, 697, 243, 788, 239, 788, 330, 383, 374, 343, 319" alt="module1" onmouseover="loadImage('//igem2016.fri.uni-lj.si/img_auth.php/3/39/Main-scheme4.png', 'module4')" onmouseout="loadImage('//igem2016.fri.uni-lj.si/img_auth.php/d/da/Main-scheme0.png', 'module4')" href="resultsModule4.html"></area> | ||
+ | </map> | ||
+ | <div class="popup bottomLeft"> | ||
+ | <span class="popuptext" id="module1">Module 1 some text <br/> some other text</span> | ||
+ | </div> | ||
+ | <div class="popup bottomLeft"> | ||
+ | <span class="popuptext" id="module2">Module 2 some text <br/> some other text</span> | ||
+ | </div> | ||
+ | <div class="popup bottomLeft"> | ||
+ | <span class="popuptext" id="module3">Module 3 some text <br/> some other text</span> | ||
+ | </div> | ||
+ | <div class="popup bottomLeft"> | ||
+ | <span class="popuptext" id="module4">Module 4 some text <br/> some other text</span> | ||
+ | </div> | ||
+ | </div> | ||
+ | |||
+ | <h1 class="ui centered dividing header"><span id="achievements" class = "section"> </span>Achievements</h1> | ||
+ | <h1 class="ui centered dividing header"><span id="requirements" class = "section"> </span>Medal requirements</h1> | ||
+ | |||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
</body> | </body> | ||
</html> | </html> |
Revision as of 08:14, 14 October 2016