index.html 12.4 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">
Sebastien Pinterac's avatar
Sebastien Pinterac committed
81 82
                <img src="assets/images/bubbles.png" class="w100"/>
            </div>
83
            <div class="col-lg-8 col-md-8 text-left">
Daniel Teixeira's avatar
Daniel Teixeira committed
84 85
                <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 onto a bouncy journey to explore our genome and its variations.
Daniel Teixeira's avatar
Daniel Teixeira committed
86 87
                        All humans share 99.9% of their genetic information. 
                        What varies from one human to another, such as the colour of our skin, the colour of our eyes, or our ability to tolerate dairy products for example, is found in the other 0.1% of our respective genomes! These differences are called variants.
Daniel Teixeira's avatar
Daniel Teixeira committed
88
                </p>
Sebastien Pinterac's avatar
Sebastien Pinterac committed
89 90 91 92 93 94 95 96
            </div>
        </div>
    </div>
</div>

<div class="section pt-40 pb-50">
    <div class="container">
        <div class="row">
Yohan Bouché's avatar
Yohan Bouché committed
97
            <div class="col-lg-12 text-center">
Daniel Teixeira's avatar
Daniel Teixeira committed
98
                <h2>How do I play?</h2>
Daniel Teixeira's avatar
Daniel Teixeira committed
99
                <p>Start your adventure with an unknown character (from a total of 25) representing various populations around the globe. Run along the genomic sequence of over 30 genes to collect unique variants and watch your characters change accordingly… often with surprising results! 
Daniel Teixeira's avatar
Daniel Teixeira committed
100 101
                The levels of increasing difficulty will require all your dexterity to avoid dangerous falls into non-coding regions and jumping over secondary structures, while of course collecting as many points as possible.
                </p>
Yohan Bouché's avatar
Yohan Bouché committed
102 103
                <div class="row mt-50">
                    <div class="col-lg-4 text-center mt-10">
Daniel Teixeira's avatar
Daniel Teixeira committed
104 105
                            <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
106 107
                    </div>
                    <div class="col-lg-4 text-center mt-10">
Daniel Teixeira's avatar
Daniel Teixeira committed
108 109
                            <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
110 111
                    </div>
                    <div class="col-lg-4 text-center mt-10">
Daniel Teixeira's avatar
Daniel Teixeira committed
112
                        <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
113
                        <br><i>Avoid secondary structures and don't fall in the introns!</i>
Yohan Bouché's avatar
Yohan Bouché committed
114 115
                    </div>
                </div>
116
            </div>
Sebastien Pinterac's avatar
Sebastien Pinterac committed
117 118 119 120 121 122 123 124
        </div>
    </div>
</div>


<div class="section sectionBg pt-40 pb-50">
    <div class="container">
        <div class="row">
125
            <div class="col text-center">
Daniel Teixeira's avatar
Daniel Teixeira committed
126
                <h2>Meet some of the characters</h2>
127 128
            </div>
        </div>
Yohan Bouché's avatar
Yohan Bouché committed
129
        <div class="row mt-50">
Daniel Teixeira's avatar
Daniel Teixeira committed
130 131
            <div class="col-lg-2 text-center">
                    <b style="font-size: 100px">...</b>
132
            </div>
Daniel Teixeira's avatar
Daniel Teixeira committed
133 134 135 136 137
            <div class="col-lg-2 text-center">
                    <img src="assets/images/avatars/a4.png" class=" img-circle"/>
                    <br><i>Barbara</i>
                </div>
            <div class="col-lg-2 text-center">
Yohan Bouché's avatar
Yohan Bouché committed
138 139
                <img src="assets/images/avatars/a2.png" class=" img-circle"/>
                <br><i>Susumu</i>
140
            </div>
Daniel Teixeira's avatar
Daniel Teixeira committed
141 142 143 144 145
            <div class="col-lg-2 text-center">
                    <img src="assets/images/avatars/a5.png" class=" img-circle"/>
                    <br><i>Yohan</i>
                </div>
            <div class="col-lg-2 text-center">
Yohan Bouché's avatar
Yohan Bouché committed
146 147
                <img src="assets/images/avatars/a3.png" class=" img-circle"/>
                <br><i>Dorothy</i>
148
            </div>
Daniel Teixeira's avatar
Daniel Teixeira committed
149 150
            <div class="col-lg-2 text-center">
                    <b style="font-size: 100px">...</b>
Sebastien Pinterac's avatar
Sebastien Pinterac committed
151 152 153 154 155 156 157 158
            </div>
        </div>
    </div>
</div>

<div class="section pt-20 pb-50">
    <div class="container">
        <div class="row mt-20">
Daniel Teixeira's avatar
Daniel Teixeira committed
159 160
            <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
161
            </div>
162
            <div class="col-md-8">
Daniel Teixeira's avatar
Daniel Teixeira committed
163
                <h2 class="text-center">About the SIB Swiss Institute of Bioinformatics</h2><br>
Daniel Teixeira's avatar
Daniel Teixeira committed
164 165 166 167 168 169 170 171 172
                <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
173 174 175 176 177
            </div>
        </div>
    </div>
</div>

178
<div id="footer" class="section-black pb-20">
Sebastien Pinterac's avatar
Sebastien Pinterac committed
179 180
    <div class="container">
        <div class="row">
Daniel Teixeira's avatar
Daniel Teixeira committed
181
            <div class="col-md-6 pt-20 text-center">
182 183 184 185 186 187 188 189
                <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
190
            </div>
Daniel Teixeira's avatar
Daniel Teixeira committed
191
            <div class="col-md-6 pt-20 text-center">
192 193 194
                <h5>Developed by
                    <a href="https://pinterac.net" target="_blank">Pinterac</a>
                </h5>
Sebastien Pinterac's avatar
Sebastien Pinterac committed
195 196 197 198 199 200 201
            </div>
        </div>
    </div>
</div>
<script>
    new WOW().init();
</script>
Daniel Teixeira's avatar
Daniel Teixeira committed
202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228

<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
229 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 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272
    <!-- 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
273 274
</body>
</html>