index.html 13.9 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>
Daniel Teixeira's avatar
Daniel Teixeira committed
53
            <h4>The mobile game to discover your genes !</h4>
Daniel Teixeira's avatar
Daniel Teixeira committed
54 55
            <h2>COMING VERY SOON</h2>
            <form action="register.php" class="form-inline">
Daniel Teixeira's avatar
Daniel Teixeira committed
56
                    <p style="font-size: 12px">Enter your email below to be the first to play!</p>
Daniel Teixeira's avatar
Daniel Teixeira committed
57
                    <div class="input-group" id="mail-form">
Daniel Teixeira's avatar
Daniel Teixeira committed
58 59 60 61 62
                      <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
63
                        <button id="registerButton" type="submit" class="btn btn-danger">Register</button>
Daniel Teixeira's avatar
Daniel Teixeira committed
64 65
                    </div>
            </form>
Sebastien Pinterac's avatar
Sebastien Pinterac committed
66 67
        </div>
    </div>
68 69
    <div class="row mlmr-none mt-30">
        <div class="col col-lg-12 text-center stores">
Daniel Teixeira's avatar
Daniel Teixeira committed
70 71
            <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>
Sebastien Pinterac's avatar
Sebastien Pinterac committed
72
        </div>
73

Sebastien Pinterac's avatar
Sebastien Pinterac committed
74
    </div>
75

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

<div class="section pt-40 pb-50">
    <div class="container">
        <div class="row">
Yohan Bouché's avatar
Yohan Bouché committed
98
            <div class="col-lg-12 text-center">
Daniel Teixeira's avatar
Daniel Teixeira committed
99
                <h2>How do I play?</h2>
Daniel Teixeira's avatar
Daniel Teixeira committed
100 101
                <p>Run along the genomic 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.
Daniel Teixeira's avatar
Daniel Teixeira committed
102
                </p>
Yohan Bouché's avatar
Yohan Bouché committed
103 104
                <div class="row mt-50">
                    <div class="col-lg-4 text-center mt-10">
Daniel Teixeira's avatar
Daniel Teixeira committed
105 106
                            <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
107 108
                    </div>
                    <div class="col-lg-4 text-center mt-10">
Daniel Teixeira's avatar
Daniel Teixeira committed
109 110
                            <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>
Yohan Bouché's avatar
Yohan Bouché committed
111 112
                    </div>
                    <div class="col-lg-4 text-center mt-10">
Daniel Teixeira's avatar
Daniel Teixeira committed
113
                        <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
114
                        <br><i>Avoid secondary structures and don't fall in the introns!</i>
Yohan Bouché's avatar
Yohan Bouché committed
115 116
                    </div>
                </div>
Daniel Teixeira's avatar
Daniel Teixeira committed
117 118 119 120 121 122 123 124
                <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
125
                                <br><i>Barbara</i>
Daniel Teixeira's avatar
Daniel Teixeira committed
126 127 128
                        </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"/>
Daniel Teixeira's avatar
Daniel Teixeira committed
129
                                <br><i><b>Susumu</b></i>
Daniel Teixeira's avatar
Daniel Teixeira committed
130 131 132 133 134 135 136 137 138 139 140 141 142 143 144
                        </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>

145
            </div>
Sebastien Pinterac's avatar
Sebastien Pinterac committed
146 147 148 149 150 151
        </div>
    </div>
</div>


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

        <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
160
                        <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
161 162 163
                                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
164
                </div>
165
            </div>
Daniel Teixeira's avatar
Daniel Teixeira committed
166
        
Sebastien Pinterac's avatar
Sebastien Pinterac committed
167 168 169 170 171
</div>

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

Daniel Teixeira's avatar
Daniel Teixeira committed
191

192
<div id="footer" class="section-black pb-20">
Sebastien Pinterac's avatar
Sebastien Pinterac committed
193 194
    <div class="container">
        <div class="row">
Daniel Teixeira's avatar
Daniel Teixeira committed
195
            <div class="col-md-6 pt-20 text-center">
196 197 198 199 200 201 202 203
                <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
204
            </div>
Daniel Teixeira's avatar
Daniel Teixeira committed
205
            <div class="col-md-6 pt-20 text-center">
206 207 208
                <h5>Developed by
                    <a href="https://pinterac.net" target="_blank">Pinterac</a>
                </h5>
Sebastien Pinterac's avatar
Sebastien Pinterac committed
209 210 211 212 213 214 215
            </div>
        </div>
    </div>
</div>
<script>
    new WOW().init();
</script>
Daniel Teixeira's avatar
Daniel Teixeira committed
216 217 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

<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
243 244 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
    <!-- 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
287 288
</body>
</html>