index.html 14.3 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
            <h3>The mobile game to discover your genes !</h3>
Daniel Teixeira's avatar
Daniel Teixeira committed
54
            <p id="beta-note">If you find a bug or typo, don’t hesitate to let us know (communication@sib.swiss).</p>
SIB Web Team LSF User's avatar
SIB Web Team LSF User committed
55 56
            <h4>Download links for Android and iOS</h4>
            <!-- <h2>COMING VERY SOON</h2>
Daniel Teixeira's avatar
Daniel Teixeira committed
57
            <form action="register.php" class="form-inline">
Daniel Teixeira's avatar
Daniel Teixeira committed
58
                    <p style="font-size: 12px">Enter your email below to be the first to play!</p>
Daniel Teixeira's avatar
Daniel Teixeira committed
59
                    <div class="input-group" id="mail-form">
Daniel Teixeira's avatar
Daniel Teixeira committed
60 61 62 63 64
                      <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
65
                        <button id="registerButton" type="submit" class="btn btn-danger">Register</button>
Daniel Teixeira's avatar
Daniel Teixeira committed
66 67
                    </div>
            </form>
SIB Web Team LSF User's avatar
SIB Web Team LSF User committed
68
            -->
Sebastien Pinterac's avatar
Sebastien Pinterac committed
69 70
        </div>
    </div>
71 72
    <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
73 74
            <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
75
        </div>
76

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

Sebastien Pinterac's avatar
Sebastien Pinterac committed
79 80 81 82
</div>
<div class="section sectionBg pt-40 pb-50">
    <div class="container">
        <div class="row mt-20">
83
            <div class="col-lg-4 col-md-4 text-center">
Daniel Teixeira's avatar
Daniel Teixeira committed
84
                <video width="320" height="auto" poster="assets/images/avatars/avatar3.jpg" controls>
Daniel Teixeira's avatar
Daniel Teixeira committed
85 86 87
                        <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
88
            </div>
89
            <div class="col-lg-8 col-md-8 text-left">
Daniel Teixeira's avatar
Daniel Teixeira committed
90
                <h2>The human genome... at the tip of your thumbs</h2>
Franziska Gruhl's avatar
Franziska Gruhl committed
91 92 93
                <p>Genome Jumper, a mobile game powered by the SIB Swiss Institute of Bioinformatics, invites you to explore the human genome and its variations.
                From skin and eye color to food preference or disease predisposition - countless  features (phenotypes) can be influenced by small changes (variants) in our DNA.
                Play the game to discover the effects of such changes  on your avatar...
Daniel Teixeira's avatar
Daniel Teixeira committed
94
                </p>
Sebastien Pinterac's avatar
Sebastien Pinterac committed
95 96 97 98 99 100 101 102
            </div>
        </div>
    </div>
</div>

<div class="section pt-40 pb-50">
    <div class="container">
        <div class="row">
Yohan Bouché's avatar
Yohan Bouché committed
103
            <div class="col-lg-12 text-center">
Daniel Teixeira's avatar
Daniel Teixeira committed
104
                <h2>How do I play?</h2>
Franziska Gruhl's avatar
Franziska Gruhl committed
105 106
                <p>Run along the 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
107
                </p>
Yohan Bouché's avatar
Yohan Bouché committed
108 109
                <div class="row mt-50">
                    <div class="col-lg-4 text-center mt-10">
Daniel Teixeira's avatar
Daniel Teixeira committed
110 111
                            <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
112 113
                    </div>
                    <div class="col-lg-4 text-center mt-10">
Daniel Teixeira's avatar
Daniel Teixeira committed
114
                            <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
115
                            <br><i>Reveal the phenotype of your character by collecting its variant.</i>
Yohan Bouché's avatar
Yohan Bouché committed
116 117
                    </div>
                    <div class="col-lg-4 text-center mt-10">
Daniel Teixeira's avatar
Daniel Teixeira committed
118
                        <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
119
                        <br><i>Avoid secondary structures and don't fall in the introns!</i>
Yohan Bouché's avatar
Yohan Bouché committed
120 121
                    </div>
                </div>
Daniel Teixeira's avatar
Daniel Teixeira committed
122 123
                <div class="row mt-50">
                        <h2>Meet some of the characters</h2>
Franziska Gruhl's avatar
Franziska Gruhl committed
124
                        <p>You will discover 25 characters representing different human populations all around the globe.</p>
Daniel Teixeira's avatar
Daniel Teixeira committed
125 126 127 128 129
                        <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
130
                                <br><i>Barbara</i>
Daniel Teixeira's avatar
Daniel Teixeira committed
131 132 133
                        </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
134
                                <br><i>Susumu</i>
Daniel Teixeira's avatar
Daniel Teixeira committed
135 136 137 138 139 140 141 142 143 144 145 146 147 148 149
                        </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>

150
            </div>
Sebastien Pinterac's avatar
Sebastien Pinterac committed
151 152 153 154 155 156
        </div>
    </div>
</div>


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

        <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>
Franziska Gruhl's avatar
Franziska Gruhl committed
165 166 167 168
                        <p>The variants illustrated in this game highlight some of the best-known cases associated with a particular phenotypes.
                        Such a link is extremely complicated to establish because there are million of human variants, which, together with environmental
                        and other external factors, establish a unique phenotype. It is the purpose of bioinformaticians and of life scientists to study
                        and to better understand the interaction between all these elements.
Daniel Teixeira's avatar
Daniel Teixeira committed
169 170
                        </p>
                    </div>
Daniel Teixeira's avatar
Daniel Teixeira committed
171
                </div>
172
            </div>
Daniel Teixeira's avatar
Daniel Teixeira committed
173
        
Sebastien Pinterac's avatar
Sebastien Pinterac committed
174 175 176 177 178
</div>

<div class="section pt-20 pb-50">
    <div class="container">
        <div class="row mt-20">
Daniel Teixeira's avatar
Daniel Teixeira committed
179
            <h2 class="text-center">About the SIB Swiss Institute of Bioinformatics</h2><br>
Daniel Teixeira's avatar
Daniel Teixeira committed
180
            <div class="col-md-4 text-center">
Daniel Teixeira's avatar
Daniel Teixeira committed
181
                <iframe width="350" height="315" src="https://www.youtube.com/embed/182AzhLiwxc" frameborder="0" allowfullscreen></iframe>
Sebastien Pinterac's avatar
Sebastien Pinterac committed
182
            </div>
183
            <div class="col-md-8">
Franziska Gruhl's avatar
Franziska Gruhl committed
184 185 186 187 188
                <p>The <a target="_blank" href="https://www.sib.swiss/">SIB Swiss Institute of Bioinformatics</a> is a non-profit organization federating 70 Swiss research
                and service groups of experts in bioinformatics. SIB’s 800 scientists join forces to advance research by providing life scientists and clinicians with a
                state-of-the-art bioinformatics infrastructure, as well as with services, resources, expertise and training.
                </p>
                <!-- <p>Its missions are: 
Daniel Teixeira's avatar
Daniel Teixeira committed
189 190 191 192 193 194
                    <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>
Franziska Gruhl's avatar
Franziska Gruhl committed
195 196 197 198 199
                -->
                <p>To celebrate its <a href="https://www.sib.swiss/20years/" target="_blank">20 years</a> of existence in 2018,
                SIB has launched several original projects, including this game, to promote and explain bioinformatics to the public.
                Discover all the projects on our website or on <a href="https://www.facebook.com/SIBbioinformatics/">our Facebook account</a>.
                </p>
Sebastien Pinterac's avatar
Sebastien Pinterac committed
200 201 202 203 204
            </div>
        </div>
    </div>
</div>

Daniel Teixeira's avatar
Daniel Teixeira committed
205

206
<div id="footer" class="section-black pb-20">
Sebastien Pinterac's avatar
Sebastien Pinterac committed
207 208
    <div class="container">
        <div class="row">
Daniel Teixeira's avatar
Daniel Teixeira committed
209
            <div class="col-md-6 pt-20 text-center">
210 211 212 213 214 215 216 217
                <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
218
            </div>
Daniel Teixeira's avatar
Daniel Teixeira committed
219
            <div class="col-md-6 pt-20 text-center">
220 221 222
                <h5>Developed by
                    <a href="https://pinterac.net" target="_blank">Pinterac</a>
                </h5>
Sebastien Pinterac's avatar
Sebastien Pinterac committed
223 224 225 226 227 228 229
            </div>
        </div>
    </div>
</div>
<script>
    new WOW().init();
</script>
Daniel Teixeira's avatar
Daniel Teixeira committed
230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256

<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
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 289 290 291 292 293 294 295 296 297 298 299 300
    <!-- 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
301
</body>
Daniel Teixeira's avatar
Daniel Teixeira committed
302
</html>