index.html 13.8 KB
Newer Older
Sebastien Pinterac's avatar
Sebastien Pinterac committed
1 2 3
<!DOCTYPE html>
<html lang='en_US'>
<head>
Daniel Teixeira's avatar
Daniel Teixeira committed
4 5 6 7 8 9 10 11 12 13 14
    <!-- 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>


15
    <meta charset="utf-8">
Daniel Teixeira's avatar
Daniel Teixeira committed
16
    <title>Genome Jumper | SIB Game | 20 years</title>
17 18
    <meta name="description" content="SIB GENOME JUMPER META">
    <meta name="viewport" content="width=device-width, initial-scale=1">
Sebastien Pinterac's avatar
Sebastien Pinterac committed
19

20 21 22 23 24 25
    <!-- 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">
Sebastien Pinterac's avatar
Sebastien Pinterac committed
26

Daniel Teixeira's avatar
Daniel Teixeira committed
27

28
    <!-- Fonts -->
Sebastien Pinterac's avatar
Sebastien Pinterac committed
29 30
    <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">

31 32 33
    <script src="assets/js/jquery.min.js"></script>
    <script src="assets/js/bootstrap.min.js"></script>
    <script src="assets/js/wow.min.js"></script>
Sebastien Pinterac's avatar
Sebastien Pinterac committed
34 35 36

</head>
<body>
Daniel Teixeira's avatar
Daniel Teixeira committed
37 38 39
<div class="section sectionBg" style="height: 50px;">
    <div>
    </div>
Daniel Teixeira's avatar
Daniel Teixeira committed
40
        <div id="twentyyearsribbon" style="display: inline-block">
Daniel Teixeira's avatar
Daniel Teixeira committed
41 42 43
            <a target="_blank" href="https://www.sib.swiss/20years">
            <img id="twentyyearsimg" src="assets/images/SIB_logo_20ans.png"></a>
        </div>
Daniel Teixeira's avatar
Daniel Teixeira committed
44
       <div class="pull-right pt-20 pb-10" style="padding-right: 20px;">
Daniel Teixeira's avatar
Daniel Teixeira committed
45 46
            <a href="https://www.sib.swiss/about-us/media-homepage" target="_blank">Press</a> |
            <a href="mailto:communication@sib.swiss">Contact</a>
Daniel Teixeira's avatar
Daniel Teixeira committed
47
        </div>
Daniel Teixeira's avatar
Daniel Teixeira committed
48
    </div>
Daniel Teixeira's avatar
Daniel Teixeira committed
49
<div id="header">
Daniel Teixeira's avatar
Daniel Teixeira committed
50
    <div class="row mlmr-none mt-20">
Daniel Teixeira's avatar
Daniel Teixeira committed
51
        <div class="text-center">
Sebastien Pinterac's avatar
Sebastien Pinterac committed
52
            <h1>GENOME JUMPER</h1>
SIB Web Team LSF User's avatar
SIB Web Team LSF User committed
53 54 55
            <h3>The mobile game to discover your genes !</h3>
            <h4>Download links for Android and iOS</h4>
            <!-- <h2>COMING VERY SOON</h2>
Daniel Teixeira's avatar
Daniel Teixeira committed
56
            <form action="register.php" class="form-inline">
Daniel Teixeira's avatar
Daniel Teixeira committed
57
                    <p style="font-size: 12px">Enter your email below to be the first to play!</p>
Daniel Teixeira's avatar
Daniel Teixeira committed
58
                    <div class="input-group" id="mail-form">
Daniel Teixeira's avatar
Daniel Teixeira committed
59 60 61 62 63
                      <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;">
Daniel Teixeira's avatar
Daniel Teixeira committed
64
                        <button id="registerButton" type="submit" class="btn btn-danger">Register</button>
Daniel Teixeira's avatar
Daniel Teixeira committed
65 66
                    </div>
            </form>
SIB Web Team LSF User's avatar
SIB Web Team LSF User committed
67
            -->
Sebastien Pinterac's avatar
Sebastien Pinterac committed
68 69
        </div>
    </div>
70 71
    <div class="row mlmr-none mt-30">
        <div class="col col-lg-12 text-center stores">
SIB Web Team LSF User's avatar
SIB Web Team LSF User committed
72 73
            <a target="_blank" href="https://play.google.com/store/apps/details?id=ch.sib.genomejumperfinal"><img src="assets/images/googleplay.png"></a>
            <a target="_blank" href="https://itunes.apple.com/us/app/genome-jumper/id1358313036"><img src="assets/images/appStore.png"></a>
Sebastien Pinterac's avatar
Sebastien Pinterac committed
74
        </div>
75

Sebastien Pinterac's avatar
Sebastien Pinterac committed
76
    </div>
77

Sebastien Pinterac's avatar
Sebastien Pinterac committed
78 79 80 81
</div>
<div class="section sectionBg pt-40 pb-50">
    <div class="container">
        <div class="row mt-20">
82
            <div class="col-lg-4 col-md-4 text-center">
Daniel Teixeira's avatar
Daniel Teixeira committed
83 84 85 86
                <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>
Sebastien Pinterac's avatar
Sebastien Pinterac committed
87
            </div>
88
            <div class="col-lg-8 col-md-8 text-left">
Daniel Teixeira's avatar
Daniel Teixeira committed
89
                <h2>The human genome... at the tip of your thumbs</h2>
Daniel Teixeira's avatar
Daniel Teixeira committed
90
                <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.
Daniel Teixeira's avatar
Daniel Teixeira committed
91
                </p>
Sebastien Pinterac's avatar
Sebastien Pinterac committed
92 93 94 95 96 97 98 99
            </div>
        </div>
    </div>
</div>

<div class="section pt-40 pb-50">
    <div class="container">
        <div class="row">
Yohan Bouché's avatar
Yohan Bouché committed
100
            <div class="col-lg-12 text-center">
Daniel Teixeira's avatar
Daniel Teixeira committed
101
                <h2>How do I play?</h2>
Daniel Teixeira's avatar
Daniel Teixeira committed
102
                <p>Run along the RNA sequence of over 30 genes to collect unique variants and watch your character change accordingly… often with surprising results! 
Daniel Teixeira's avatar
Daniel Teixeira committed
103
                   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.
Daniel Teixeira's avatar
Daniel Teixeira committed
104
                </p>
Yohan Bouché's avatar
Yohan Bouché committed
105 106
                <div class="row mt-50">
                    <div class="col-lg-4 text-center mt-10">
Daniel Teixeira's avatar
Daniel Teixeira committed
107 108
                            <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>
Yohan Bouché's avatar
Yohan Bouché committed
109 110
                    </div>
                    <div class="col-lg-4 text-center mt-10">
Daniel Teixeira's avatar
Daniel Teixeira committed
111
                            <img id="img-game-2" src="assets/images/avatars/avatar2.jpg" class="img-circle img-game" style="max-width: 300px"/>
Franziska Gruhl's avatar
Franziska Gruhl committed
112
                            <br><i>Reveal the phenotype of your character by collecting its variant.</i>
Yohan Bouché's avatar
Yohan Bouché committed
113 114
                    </div>
                    <div class="col-lg-4 text-center mt-10">
Daniel Teixeira's avatar
Daniel Teixeira committed
115
                        <img id="img-game-3" src="assets/images/avatars/avatar3.jpg" class="img-circle img-game" style="max-width: 300px"/>
Daniel Teixeira's avatar
Daniel Teixeira committed
116
                        <br><i>Avoid secondary structures and don't fall in the introns!</i>
Yohan Bouché's avatar
Yohan Bouché committed
117 118
                    </div>
                </div>
Daniel Teixeira's avatar
Daniel Teixeira committed
119 120 121 122 123 124 125 126
                <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"/>
Daniel Teixeira's avatar
Daniel Teixeira committed
127
                                <br><i>Barbara</i>
Daniel Teixeira's avatar
Daniel Teixeira committed
128 129 130
                        </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"/>
Franziska Gruhl's avatar
Franziska Gruhl committed
131
                                <br><i>Susumu</i>
Daniel Teixeira's avatar
Daniel Teixeira committed
132 133 134 135 136 137 138 139 140 141 142 143 144 145 146
                        </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>

147
            </div>
Sebastien Pinterac's avatar
Sebastien Pinterac committed
148 149 150 151 152 153
        </div>
    </div>
</div>


<div class="section sectionBg pt-40 pb-50">
Daniel Teixeira's avatar
Daniel Teixeira committed
154 155 156 157 158 159 160 161

        <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>
Daniel Teixeira's avatar
Daniel Teixeira committed
162
                        <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. 
Daniel Teixeira's avatar
Daniel Teixeira committed
163 164 165
                                It is precisely the purpose of bioinformatics and of life scientists to study and to better understand such links.
                        </p>
                    </div>
Daniel Teixeira's avatar
Daniel Teixeira committed
166
                </div>
167
            </div>
Daniel Teixeira's avatar
Daniel Teixeira committed
168
        
Sebastien Pinterac's avatar
Sebastien Pinterac committed
169 170 171 172 173
</div>

<div class="section pt-20 pb-50">
    <div class="container">
        <div class="row mt-20">
Daniel Teixeira's avatar
Daniel Teixeira committed
174
            <h2 class="text-center">About the SIB Swiss Institute of Bioinformatics</h2><br>
Daniel Teixeira's avatar
Daniel Teixeira committed
175 176
            <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>
Sebastien Pinterac's avatar
Sebastien Pinterac committed
177
            </div>
178
            <div class="col-md-8">
Daniel Teixeira's avatar
Daniel Teixeira committed
179 180 181 182 183 184 185 186 187
                <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>
Sebastien Pinterac's avatar
Sebastien Pinterac committed
188 189 190 191 192
            </div>
        </div>
    </div>
</div>

Daniel Teixeira's avatar
Daniel Teixeira committed
193

194
<div id="footer" class="section-black pb-20">
Sebastien Pinterac's avatar
Sebastien Pinterac committed
195 196
    <div class="container">
        <div class="row">
Daniel Teixeira's avatar
Daniel Teixeira committed
197
            <div class="col-md-6 pt-20 text-center">
198 199 200 201 202 203 204 205
                <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>
Sebastien Pinterac's avatar
Sebastien Pinterac committed
206
            </div>
Daniel Teixeira's avatar
Daniel Teixeira committed
207
            <div class="col-md-6 pt-20 text-center">
208 209 210
                <h5>Developed by
                    <a href="https://pinterac.net" target="_blank">Pinterac</a>
                </h5>
Sebastien Pinterac's avatar
Sebastien Pinterac committed
211 212 213 214 215 216 217
            </div>
        </div>
    </div>
</div>
<script>
    new WOW().init();
</script>
Daniel Teixeira's avatar
Daniel Teixeira committed
218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244

<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>


Daniel Teixeira's avatar
Daniel Teixeira committed
245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288
    <!-- 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>      

Sebastien Pinterac's avatar
Sebastien Pinterac committed
289
</body>
Daniel Teixeira's avatar
Daniel Teixeira committed
290
</html>