Commit 4dc92598 authored by SIB Web Team LSF User's avatar SIB Web Team LSF User
Browse files

adding de and fr version

parent 8fc8d073
<!DOCTYPE html>
<html lang='en_US'>
<head>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-117491928-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-117491928-1');
</script>
<meta charset="utf-8">
<title>Genome Jumper | SIB Game | 20 years</title>
<meta name="description" content="SIB GENOME JUMPER META">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSS -->
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/animate.css">
<link rel="stylesheet" href="assets/css/font-awesome.min.css">
<link rel="stylesheet" href="assets/css/main.css">
<link rel="stylesheet" href="assets/css/margin_padding.css">
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/wow.min.js"></script>
</head>
<body>
<div class="section sectionBg" style="height: 50px;">
<div>
</div>
<div id="twentyyearsribbon" style="display: inline-block">
<a target="_blank" href="https://www.sib.swiss/20years">
<img id="twentyyearsimg" src="assets/images/SIB_logo_20ans.png"></a>
</div>
<div class="pull-right pt-20 pb-10" style="padding-right: 20px;">
<a href="https://www.sib.swiss/about-us/media-homepage" target="_blank">Press</a> |
<a href="mailto:communication@sib.swiss">Contact</a>
</div>
</div>
<div id="header">
<div class="row mlmr-none mt-20">
<div class="text-center">
<h1>GENOME JUMPER</h1>
<h4>The mobile game to discover your genes !</h4>
<h2>COMING VERY SOON</h2>
<form action="register.php" class="form-inline">
<p style="font-size: 12px">Enter your email below to be the first to play!</p>
<div class="input-group" id="mail-form">
<div class="input-group-addon"></div>
<input type="email" class="form-control" id="email" placeholder="E-mail address">
<div class="input-group-addon"></div>
</div>
<div class="row" style="margin: 10px;">
<button id="registerButton" type="submit" class="btn btn-danger">Register</button>
</div>
</form>
</div>
</div>
<div class="row mlmr-none mt-30">
<div class="col col-lg-12 text-center stores">
<a href="#" onclick="alert('The Android version will be released in a few days.\nRegister your email to be notified when released.')"><img src="assets/images/googleplay.png"></a>
<a href="#" onclick="alert('The iOS version will be released in a few days.\nRegister your email to be notified when released.')"><img src="assets/images/appStore.png"></a>
</div>
</div>
</div>
<div class="section sectionBg pt-40 pb-50">
<div class="container">
<div class="row mt-20">
<div class="col-lg-4 col-md-4 text-center">
<video width="320" height="240" poster="assets/images/avatars/avatar3.jpg" controls>
<source src="assets/movies/game-intro.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
<div class="col-lg-8 col-md-8 text-left">
<h2>The human genome... at the tip of your thumbs</h2>
<p>Genome Jumper, a mobile platform game powered by the SIB Swiss Institute of Bioinformatics, takes you on a journey to explore our genome and its variations. As far as scientists know today, humans are thought to share up to 99.9% of their genetic information. What varies from one human to another therefore often comes down to a very little amount of differences. These genetic differences are called variants.
</p>
</div>
</div>
</div>
</div>
<div class="section pt-40 pb-50">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2>How do I play?</h2>
<p>Run along the RNA sequence of over 30 genes to collect unique variants and watch your character change accordingly… often with surprising results!
The levels of increasing difficulty will require all your dexterity to avoid dangerous falls into non-coding regions and to jump over secondary structures, while collecting as many points as possible.
</p>
<div class="row mt-50">
<div class="col-lg-4 text-center mt-10">
<img id="img-game-1" src="assets/images/avatars/avatar1.jpg" class="img-circle img-game" style="max-width: 300px"/>
<br><i>Start with an unkown character.</i>
</div>
<div class="col-lg-4 text-center mt-10">
<img id="img-game-2" src="assets/images/avatars/avatar2.jpg" class="img-circle img-game" style="max-width: 300px"/>
<br><i><b>Reveal the phenotype of your character by collecting its variant.</b></i>
</div>
<div class="col-lg-4 text-center mt-10">
<img id="img-game-3" src="assets/images/avatars/avatar3.jpg" class="img-circle img-game" style="max-width: 300px"/>
<br><i>Avoid secondary structures and don't fall in the introns!</i>
</div>
</div>
<div class="row mt-50">
<h2>Meet some of the characters</h2>
<p>You will discover 25 characters, each of which represents a different population around the globe.</p>
<div class="col-lg-2 text-center">
<b style="font-size: 100px">...</b>
</div>
<div class="col-lg-2 text-center mt-10">
<img id="img-game-1" src="assets/images/avatars/a4.png" class="img-circle img-game" style="max-width: 300px"/>
<br><i>Barbara</i>
</div>
<div class="col-lg-2 text-center mt-10">
<img id="img-game-2" src="assets/images/avatars/a2.png" class="img-circle img-game" style="max-width: 300px"/>
<br><i><b>Susumu</b></i>
</div>
<div class="col-lg-2 text-center mt-10">
<img id="img-game-3" src="assets/images/avatars/a5.png" class="img-circle img-game" style="max-width: 300px"/>
<br><i>Yohan</i>
</div>
<div class="col-lg-2 text-center mt-10">
<img id="img-game-3" src="assets/images/avatars/a3.png" class="img-circle img-game" style="max-width: 300px"/>
<br><i>Dorothy</i>
</div>
<div class="col-lg-2 text-center">
<b style="font-size: 100px">...</b>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="section sectionBg pt-40 pb-50">
<div class="container">
<div class="row mt-20">
<div class="col-lg-4 col-md-4 text-center">
<img src="assets/images/bubbles.png" class="w100"/>
</div>
<div class="col-lg-8 col-md-8 text-left">
<h2>Genes are only a part of the story</h2>
<p>The variants illustrated in this game highlight some of the best-known cases associating them with a particular phenotype. However, such a link is extremely complicated to establish because there are millions of human variants, often interacting with each other, and the environment and other external factors also play a key role.
It is precisely the purpose of bioinformatics and of life scientists to study and to better understand such links.
</p>
</div>
</div>
</div>
</div>
<div class="section pt-20 pb-50">
<div class="container">
<div class="row mt-20">
<h2 class="text-center">About the SIB Swiss Institute of Bioinformatics</h2><br>
<div class="col-md-4 pt-80 text-center">
<iframe width="350" height="315" src="https://www.youtube.com/embed/182AzhLiwxc" frameborder="0" allowfullscreen></iframe>
</div>
<div class="col-md-8">
<p>The <a target="_blank" href="https://www.sib.swiss/">SIB Swiss Institute of Bioinformatics</a> is a non-profit organization federating about 800 scientists in Switzerland.</p>
<p>Its missions are:
<ol type="1">
<li>To provide a complete research infrastructure for the life sciences and medicine - ranging from database and software provision, to tailor-made expertise in data analysis and high-performance computing </li>
<li>To represent the Swiss bioinformatics community and its numerous research projects, and offer training to both the academic and private world. </li>
</ol>
The <a target="_blank" href="https://www.sib.swiss/about-us/news/1154-sib-the-movie-swiss-bioinformatics-in-action"> SIB video </a> will give you an overview of our activities in only 2 minutes.
</p>
<p>To celebrate its <a href="https://www.sib.swiss/20years/" target="_blank">20 years</a> of existence in 2018, the Institute has launched projects promoting bioinformatics to a large and non-specialist public. Hence this game on human genetic variants but also other projects you can discover on our website or <a href="https://www.facebook.com/SIBbioinformatics/">our Facebook account</a>.</p>
</div>
</div>
</div>
</div>
<div id="footer" class="section-black pb-20">
<div class="container">
<div class="row">
<div class="col-md-6 pt-20 text-center">
<a href="https://www.facebook.com/SIBbioinformatics" target="_blank" class="social facebook">
<i class="fa fa-facebook fa-3x"></i></a>
<a href="https://www.youtube.com/c/SIBSwissInstituteofBioinformatics" target="_blank" class="social youtube">
<i class="fa fa-youtube fa-3x"></i></a>
<a href="https://twitter.com/ISBSIB" target="_blank" class="social twitter">
<i class="fa fa-twitter fa-3x"></i></a>
<a href="https://www.linkedin.com/company/sib-swiss-institute-of-bioinformatics/" target="_blank" class="social twitter">
<i class="fa fa-linkedin fa-3x"></i></a>
</div>
<div class="col-md-6 pt-20 text-center">
<h5>Developed by
<a href="https://pinterac.net" target="_blank">Pinterac</a>
</h5>
</div>
</div>
</div>
</div>
<script>
new WOW().init();
</script>
<script type="text/javascript">
$(function () {
$("#registerButton").click(function () {
var email = $("#email").val();
var data = 'EMAIL=' + email;
$.ajax({
type: "POST",
url: "register.php",
data: data,
success: function () {
alert("Thank you, you will be notified when the game is out!")
},
error: function (e) {
if(e.status == 400){
alert("Ups your email does not seem valid!")
}else {
alert("Ups something wrong occured...")
}
}
});
return false;
});
});
</script>
<!-- The Modal -->
<div id="myModal" class="modal">
<span class="close">&times;</span>
<img class="modal-content" id="img01">
<div id="caption"></div>
</div>
<script>
// Get the modal
var modal = document.getElementById('myModal');
// Get the image and insert it inside the modal - use its "alt" text as a caption
var img1 = document.getElementById('img-game-1');
var img2 = document.getElementById('img-game-2');
var img3 = document.getElementById('img-game-3');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
img1.onclick = function(){
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
img2.onclick = function(){
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
img3.onclick = function(){
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang='en_US'>
<head>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-117491928-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-117491928-1');
</script>
<meta charset="utf-8">
<title>Genome Jumper | SIB Game | 20 years</title>
<meta name="description" content="SIB GENOME JUMPER META">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSS -->
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/animate.css">
<link rel="stylesheet" href="assets/css/font-awesome.min.css">
<link rel="stylesheet" href="assets/css/main.css">
<link rel="stylesheet" href="assets/css/margin_padding.css">
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/wow.min.js"></script>
</head>
<body>
<div class="section sectionBg" style="height: 50px;">
<div>
</div>
<div id="twentyyearsribbon" style="display: inline-block">
<a target="_blank" href="https://www.sib.swiss/20years">
<img id="twentyyearsimg" src="assets/images/SIB_logo_20ans.png"></a>
</div>
<div class="pull-right pt-20 pb-10" style="padding-right: 20px;">
<a href="https://www.sib.swiss/about-us/media-homepage" target="_blank">Press</a> |
<a href="mailto:communication@sib.swiss">Contact</a>
</div>
</div>
<div id="header">
<div class="row mlmr-none mt-20">
<div class="text-center">
<h1>GENOME JUMPER</h1>
<h4>The mobile game to discover your genes !</h4>
<h2>COMING VERY SOON</h2>
<form action="register.php" class="form-inline">
<p style="font-size: 12px">Enter your email below to be the first to play!</p>
<div class="input-group" id="mail-form">
<div class="input-group-addon"></div>
<input type="email" class="form-control" id="email" placeholder="E-mail address">
<div class="input-group-addon"></div>
</div>
<div class="row" style="margin: 10px;">
<button id="registerButton" type="submit" class="btn btn-danger">Register</button>
</div>
</form>
</div>
</div>
<div class="row mlmr-none mt-30">
<div class="col col-lg-12 text-center stores">
<a href="#" onclick="alert('The Android version will be released in a few days.\nRegister your email to be notified when released.')"><img src="assets/images/googleplay.png"></a>
<a href="#" onclick="alert('The iOS version will be released in a few days.\nRegister your email to be notified when released.')"><img src="assets/images/appStore.png"></a>
</div>
</div>
</div>
<div class="section sectionBg pt-40 pb-50">
<div class="container">
<div class="row mt-20">
<div class="col-lg-4 col-md-4 text-center">
<video width="320" height="240" poster="assets/images/avatars/avatar3.jpg" controls>
<source src="assets/movies/game-intro.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
<div class="col-lg-8 col-md-8 text-left">
<h2>The human genome... at the tip of your thumbs</h2>
<p>Genome Jumper, a mobile platform game powered by the SIB Swiss Institute of Bioinformatics, takes you on a journey to explore our genome and its variations. As far as scientists know today, humans are thought to share up to 99.9% of their genetic information. What varies from one human to another therefore often comes down to a very little amount of differences. These genetic differences are called variants.
</p>
</div>
</div>
</div>
</div>
<div class="section pt-40 pb-50">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2>How do I play?</h2>
<p>Run along the RNA sequence of over 30 genes to collect unique variants and watch your character change accordingly… often with surprising results!
The levels of increasing difficulty will require all your dexterity to avoid dangerous falls into non-coding regions and to jump over secondary structures, while collecting as many points as possible.
</p>
<div class="row mt-50">
<div class="col-lg-4 text-center mt-10">
<img id="img-game-1" src="assets/images/avatars/avatar1.jpg" class="img-circle img-game" style="max-width: 300px"/>
<br><i>Start with an unkown character.</i>
</div>
<div class="col-lg-4 text-center mt-10">
<img id="img-game-2" src="assets/images/avatars/avatar2.jpg" class="img-circle img-game" style="max-width: 300px"/>
<br><i><b>Reveal the phenotype of your character by collecting its variant.</b></i>
</div>
<div class="col-lg-4 text-center mt-10">
<img id="img-game-3" src="assets/images/avatars/avatar3.jpg" class="img-circle img-game" style="max-width: 300px"/>
<br><i>Avoid secondary structures and don't fall in the introns!</i>
</div>
</div>
<div class="row mt-50">
<h2>Meet some of the characters</h2>
<p>You will discover 25 characters, each of which represents a different population around the globe.</p>
<div class="col-lg-2 text-center">
<b style="font-size: 100px">...</b>
</div>
<div class="col-lg-2 text-center mt-10">
<img id="img-game-1" src="assets/images/avatars/a4.png" class="img-circle img-game" style="max-width: 300px"/>
<br><i>Barbara</i>
</div>
<div class="col-lg-2 text-center mt-10">
<img id="img-game-2" src="assets/images/avatars/a2.png" class="img-circle img-game" style="max-width: 300px"/>
<br><i><b>Susumu</b></i>
</div>
<div class="col-lg-2 text-center mt-10">
<img id="img-game-3" src="assets/images/avatars/a5.png" class="img-circle img-game" style="max-width: 300px"/>
<br><i>Yohan</i>
</div>
<div class="col-lg-2 text-center mt-10">
<img id="img-game-3" src="assets/images/avatars/a3.png" class="img-circle img-game" style="max-width: 300px"/>
<br><i>Dorothy</i>
</div>
<div class="col-lg-2 text-center">
<b style="font-size: 100px">...</b>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="section sectionBg pt-40 pb-50">
<div class="container">
<div class="row mt-20">
<div class="col-lg-4 col-md-4 text-center">
<img src="assets/images/bubbles.png" class="w100"/>
</div>
<div class="col-lg-8 col-md-8 text-left">
<h2>Les gènes ne sont qu’une petite partie de notre histoire</h2>
<p>
Les variations génétiques qui sont décrites dans ce jeu font partie des variations les plus populaires: leur association avec un phénotype donné a été bien étudiée. Le lien entre variation et phénotype est toutefois très difficile à établir : chaque être humain est unique et possède des millions de variations. Il est très rare qu’une seule variation soit responsable d’un phénotype. L’environnement et d’autres facteurs encore mal connus jouent un rôle majeur sur l’effet de ces variations. L’un des buts de la recherche biomédicale, avec l’aide de la bioinformatique, est justement d’étudier et de mieux comprendre le lien entre variations génétiques et phénotypes.
</p>
</div>
</div>
</div>
</div>
<div class="section pt-20 pb-50">
<div class="container">
<div class="row mt-20">
<h2 class="text-center">About the SIB Swiss Institute of Bioinformatics</h2><br>
<div class="col-md-4 pt-80 text-center">
<iframe width="350" height="315" src="https://www.youtube.com/embed/182AzhLiwxc" frameborder="0" allowfullscreen></iframe>
</div>
<div class="col-md-8">
<p>
Le <a target="_blank" href="https://www.sib.swiss/">SIB Institut Suisse de Bioinformatique</a> est une organisation à but non lucratif fédérant environ 800 scientifiques en Suisse. </p>
<p>Ces missions sont:
<ol type="1">
<li>De fournir une infrastructure de recherche complète pour les sciences de la vie et la médecine - allant de la mise à disposition de bases de données et de logiciels, à des expertises sur-mesure en analyse de données et calcul de haute performance </li>
<li>De représenter la communauté bioinformatique suisse et ses nombreux projets de recherche, et proposer des formations tant au monde académique que privé. </li>
</ol>
Notre <a target="_blank" href="https://www.sib.swiss/about-us/news/1154-sib-the-movie-swiss-bioinformatics-in-action"> SIB vidéo </a> vous donnera un aperçu des activités du SIB en seulement 2 minutes.
</p>
<p>To celebrate its <a href="https://www.sib.swiss/20years/" target="_blank">20 years</a> of existence in 2018, the Institute has launched projects promoting bioinformatics to a large and non-specialist public. Hence this game on human genetic variants but also other projects you can discover on our website or <a href="https://www.facebook.com/SIBbioinformatics/">our Facebook account</a>.</p>
</div>
</div>
</div>
</div>
<div id="footer" class="section-black pb-20">
<div class="container">
<div class="row">
<div class="col-md-6 pt-20 text-center">
<a href="https://www.facebook.com/SIBbioinformatics" target="_blank" class="social facebook">
<i class="fa fa-facebook fa-3x"></i></a>
<a href="https://www.youtube.com/c/SIBSwissInstituteofBioinformatics" target="_blank" class="social youtube">
<i class="fa fa-youtube fa-3x"></i></a>
<a href="https://twitter.com/ISBSIB" target="_blank" class="social twitter">
<i class="fa fa-twitter fa-3x"></i></a>
<a href="https://www.linkedin.com/company/sib-swiss-institute-of-bioinformatics/" target="_blank" class="social twitter">
<i class="fa fa-linkedin fa-3x"></i></a>
</div>
<div class="col-md-6 pt-20 text-center">
<h5>Developed by
<a href="https://pinterac.net" target="_blank">Pinterac</a>
</h5>
</div>
</div>
</div>
</div>
<script>
new WOW().init();
</script>
<script type="text/javascript">
$(function () {
$("#registerButton").click(function () {
var email = $("#email").val();
var data = 'EMAIL=' + email;
$.ajax({
type: "POST",
url: "register.php",
data: data,
success: function () {
alert("Thank you, you will be notified when the game is out!")
},
error: function (e) {
if(e.status == 400){
alert("Ups your email does not seem valid!")
}else {
alert("Ups something wrong occured...")
}
}
});
return false;
});
});
</script>
<!-- The Modal -->
<div id="myModal" class="modal">
<span class="close">&times;</span>
<img class="modal-content" id="img01">
<div id="caption"></div>
</div>
<script>
// Get the modal
var modal = document.getElementById('myModal');
// Get the image and insert it inside the modal - use its "alt" text as a caption
var img1 = document.getElementById('img-game-1');
var img2 = document.getElementById('img-game-2');
var img3 = document.getElementById('img-game-3');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
img1.onclick = function(){
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
img2.onclick = function(){
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
img3.onclick = function(){
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
</script>
</body>
</html>
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment