index.html 20.1 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

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

30 31 32
    <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
33

Daniel Teixeira's avatar
Daniel Teixeira committed
34 35 36 37 38 39 40
    <script type="application/ld+json">
        {
          "@context": "http://schema.org",
          "@type": "VideoGame",
          "name": "Genome Jumper",
          "url": "https://genome-jumper.sib.swiss",
          "image": "/assets/images/avatars/avatar3.jpg",
Daniel Teixeira's avatar
Daniel Teixeira committed
41
          "description": "The mobile game to discover your genes !",
Daniel Teixeira's avatar
Daniel Teixeira committed
42 43 44
          "inLanguage":["English","French", "German"],
          "aggregateRating":{
            "@type":"AggregateRating",
Daniel Teixeira's avatar
Daniel Teixeira committed
45 46
            "ratingValue":"5",
            "ratingCount" : "20"
Daniel Teixeira's avatar
Daniel Teixeira committed
47 48 49 50 51 52 53 54
          },
          "author":{
            "@type":"Organization",
            "name":"SIB Swiss Institute of Bioinformatics",
            "url":"https://www.sib.swiss/"
          },
          "genre":["2D","Platform Game","Serious game","Gene game"],
          "gamePlatform":["iOS ", "Android"],
Daniel Teixeira's avatar
Daniel Teixeira committed
55
          "applicationCategory": "Game",
Daniel Teixeira's avatar
Daniel Teixeira committed
56
          "operatingSystem" : "iOS, Android",
Daniel Teixeira's avatar
Daniel Teixeira committed
57 58
          "associatedMedia":{
            "@type":"VideoObject",
Daniel Teixeira's avatar
Daniel Teixeira committed
59
            "contentUrl" : "https://www.youtube.com/watch?v=5eot0gmx3XI",
Daniel Teixeira's avatar
Daniel Teixeira committed
60 61
            "name":"Genome Jumper teaser",
            "duration":"PT36S",
Daniel Teixeira's avatar
Daniel Teixeira committed
62 63 64
            "description":"Genome Jumper, a mobile game to explore human diversity",
            "thumbnailUrl":"https://genome-jumper.sib.swiss/assets/images/avatars/avatar3.jpg",
            "uploadDate": "2018-05-31"
Daniel Teixeira's avatar
Daniel Teixeira committed
65 66 67
          }
    }</script>

Daniel Teixeira's avatar
Daniel Teixeira committed
68

Sebastien Pinterac's avatar
Sebastien Pinterac committed
69 70
</head>
<body>
Daniel Teixeira's avatar
Daniel Teixeira committed
71 72 73
<div class="section sectionBg" style="height: 50px;">
    <div>
    </div>
Daniel Teixeira's avatar
Daniel Teixeira committed
74
        <div id="twentyyearsribbon" style="display: inline-block">
Daniel Teixeira's avatar
Daniel Teixeira committed
75 76 77
            <a target="_blank" href="https://www.sib.swiss/20years">
            <img id="twentyyearsimg" src="assets/images/SIB_logo_20ans.png"></a>
        </div>
SIB Web Team LSF User's avatar
SIB Web Team LSF User committed
78 79 80 81

       <div id="langsribbon" style="display: inline-block;">
            <a title="English version" href="/en"><img alt="english version" class="lang-ico" src="assets/images/en.png"/></a>
            <a title="French version" href="/fr"><img alt="french version" class="lang-ico non-lang" src="assets/images/fr.png"/></a>
Daniel Teixeira's avatar
Daniel Teixeira committed
82
            <a title="German version" href="/de"><img alt="german version" class="lang-ico non-lang" src="assets/images/de.png"/></a>
SIB Web Team LSF User's avatar
SIB Web Team LSF User committed
83 84
        </div>

Daniel Teixeira's avatar
Daniel Teixeira committed
85
       <div class="pull-right pt-20 pb-10" style="padding-right: 20px;">
Daniel Teixeira's avatar
Daniel Teixeira committed
86 87
            <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
88
        </div>
SIB Web Team LSF User's avatar
SIB Web Team LSF User committed
89 90


Daniel Teixeira's avatar
Daniel Teixeira committed
91
    </div>
Daniel Teixeira's avatar
Daniel Teixeira committed
92
<div id="header">
Daniel Teixeira's avatar
Daniel Teixeira committed
93
    <div class="row mlmr-none mt-20">
Daniel Teixeira's avatar
Daniel Teixeira committed
94
        <div class="text-center">
Sebastien Pinterac's avatar
Sebastien Pinterac committed
95
            <h1>GENOME JUMPER</h1>
SIB Web Team LSF User's avatar
SIB Web Team LSF User committed
96 97 98
            <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
99
            <form action="register.php" class="form-inline">
Daniel Teixeira's avatar
Daniel Teixeira committed
100
                    <p style="font-size: 12px">Enter your email below to be the first to play!</p>
Daniel Teixeira's avatar
Daniel Teixeira committed
101
                    <div class="input-group" id="mail-form">
Daniel Teixeira's avatar
Daniel Teixeira committed
102 103 104 105 106
                      <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
107
                        <button id="registerButton" type="submit" class="btn btn-danger">Register</button>
Daniel Teixeira's avatar
Daniel Teixeira committed
108 109
                    </div>
            </form>
SIB Web Team LSF User's avatar
SIB Web Team LSF User committed
110
            -->
Sebastien Pinterac's avatar
Sebastien Pinterac committed
111 112
        </div>
    </div>
113 114
    <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
115 116
            <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
117
        </div>
118

Sebastien Pinterac's avatar
Sebastien Pinterac committed
119
    </div>
120

Sebastien Pinterac's avatar
Sebastien Pinterac committed
121
</div>
Daniel Teixeira's avatar
Daniel Teixeira committed
122 123


Daniel Teixeira's avatar
Daniel Teixeira committed
124
<!-- Media / News Section-->
Daniel Teixeira's avatar
Daniel Teixeira committed
125
<div class="section pt-30 pb-20">
Daniel Teixeira's avatar
Daniel Teixeira committed
126 127 128 129 130 131 132 133 134 135 136 137
        <div class="container">
            <div class="row">
                <div class="col-lg-12 text-center">
                    <div class="row">
                        <div class="news-logo">
                                <a target="_blank" href="https://lecourrier.ch/2018/07/04/explorer-la-diversite-humaine/" title="LE COURRIER: Explorer la diversité humaine (04.07.2018)" >
                                    <img src="assets/images/media/lecourrier.png" alt="LE COURRIER: Explorer la diversité humaine (04.07.2018)"/>
                                </a>
                        </div>
                        <div class="news-logo">
                            <a target="_blank" href="https://www.laliberte.ch/news/magazine/multimedia/explorer-la-diversite-humaine-445654" title="LA LIBERTÉ: Explorer la diversité humaine (02.07.2018)">
                                <img src="assets/images/media/laliberte.jpg" alt="LA LIBERTÉ: Explorer la diversité humaine (02.07.2018)"/>
Daniel Teixeira's avatar
Daniel Teixeira committed
138
                            </a>
Daniel Teixeira's avatar
Daniel Teixeira committed
139 140 141 142
                        </div>
                        <div class="news-logo" >
                            <a target="_blank" href="https://www.letemps.ch/sciences/un-jeu-lausannois-decouvrir-genetique" title="LE TEMPS: Un jeu lausannois pour découvrir la génétique (11.06.2018)">
                                <img src="assets/images/media/letemps.svg" alt="LE TEMPS: Un jeu lausannois pour découvrir la génétique (11.06.2018)"/>
Daniel Teixeira's avatar
Daniel Teixeira committed
143
                            </a>
Daniel Teixeira's avatar
Daniel Teixeira committed
144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164
                        </div>
                        <div class="news-logo">
                                <a target="_blank" href="https://news.unil.ch/display?id=1528196178634" title="L'ACTU: Genome jumper, un jeu mobile pour explorer la diversité humaine (05.06.2018)">
                                    <img src="assets/images/media/actu.png" alt="L'ACTU: Genome jumper, un jeu mobile pour explorer la diversité humaine (05.06.2018)"/>
                                </a>
                        </div>
                        <div class="news-logo">
                                <a target="_blank" href="https://santeperso.ch/Vu-ailleurs/SIB-Genome-Jumper-un-jeu-mobile-pour-explorer-la-diversite-humaine" title="Santé personnalisée: Genome Jumper : un jeu mobile pour explorer la diversité humaine (01.06.2018)">
                                    <img src="assets/images/media/santperso.png" alt="Santé personnalisée: Genome Jumper : un jeu mobile pour explorer la diversité humaine (01.06.2018)"/>
                                </a>
                        </div>
                        <div class="news-logo">
                                <a target="_blank" href="https://www.rts.ch/play/radio/cqfd/audio/un-jeu-pour-explorer-le-genome-humain?id=9574590" title="RTS CQFD: Un jeu pour explorer le génome humain (31.05.2018)">
                                    <img src="assets/images/media/rts.jpg" alt="RTS CQFD: Un jeu pour explorer le génome humain (31.05.2018)"/>
                                </a>
                        </div>
                        <div class="news-logo">
                                <a target="_blank" href="https://www.unige.ch/medecine/fr/carrousel/genome-jumper-un-jeu-mobile-pour-explorer-la-diversite-humaine/" title="UNIGE: Genome Jumper, un jeu mobile pour explorer la diversité humaine (31.05.2018)">
                                    <img src="assets/images/media/unige.gif" alt="UNIGE: Genome Jumper, un jeu mobile pour explorer la diversité humaine (31.05.2018)"/>
                                </a>
                        </div>
Daniel Teixeira's avatar
Daniel Teixeira committed
165 166 167 168 169
                    </div>
                </div>
            </div>
        </div>
    </div>
Daniel Teixeira's avatar
Daniel Teixeira committed
170
    
Daniel Teixeira's avatar
Daniel Teixeira committed
171 172


Sebastien Pinterac's avatar
Sebastien Pinterac committed
173 174 175
<div class="section sectionBg pt-40 pb-50">
    <div class="container">
        <div class="row mt-20">
176
            <div class="col-lg-4 col-md-4 text-center">
Daniel Teixeira's avatar
Daniel Teixeira committed
177
                <video width="320" height="auto" poster="assets/images/avatars/avatar3.jpg" controls>
Daniel Teixeira's avatar
Daniel Teixeira committed
178 179 180
                        <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
181
            </div>
182
            <div class="col-lg-8 col-md-8 text-left">
Daniel Teixeira's avatar
Daniel Teixeira committed
183
                <h2>The human genome... at the tip of your thumbs</h2>
Franziska Gruhl's avatar
Franziska Gruhl committed
184 185 186
                <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
187
                </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

Sebastien Pinterac's avatar
Sebastien Pinterac committed
194 195 196
<div class="section pt-40 pb-50">
    <div class="container">
        <div class="row">
Yohan Bouché's avatar
Yohan Bouché committed
197
            <div class="col-lg-12 text-center">
Daniel Teixeira's avatar
Daniel Teixeira committed
198
                <h2>How do I play?</h2>
Franziska Gruhl's avatar
Franziska Gruhl committed
199 200
                <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
201
                </p>
Yohan Bouché's avatar
Yohan Bouché committed
202 203
                <div class="row mt-50">
                    <div class="col-lg-4 text-center mt-10">
Daniel Teixeira's avatar
Daniel Teixeira committed
204 205
                            <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
206 207
                    </div>
                    <div class="col-lg-4 text-center mt-10">
Daniel Teixeira's avatar
Daniel Teixeira committed
208
                            <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
209
                            <br><i>Reveal the phenotype of your character by collecting its variant.</i>
Yohan Bouché's avatar
Yohan Bouché committed
210 211
                    </div>
                    <div class="col-lg-4 text-center mt-10">
Daniel Teixeira's avatar
Daniel Teixeira committed
212
                        <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
213
                        <br><i>Avoid secondary structures and don't fall in the introns!</i>
Yohan Bouché's avatar
Yohan Bouché committed
214 215
                    </div>
                </div>
Daniel Teixeira's avatar
Daniel Teixeira committed
216 217
                <div class="row mt-50">
                        <h2>Meet some of the characters</h2>
Franziska Gruhl's avatar
Franziska Gruhl committed
218
                        <p>You will discover 25 characters representing different human populations all around the globe.</p>
Daniel Teixeira's avatar
Daniel Teixeira committed
219 220 221 222 223
                        <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
224
                                <br><i>Barbara</i>
Daniel Teixeira's avatar
Daniel Teixeira committed
225 226 227
                        </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
228
                                <br><i>Susumu</i>
Daniel Teixeira's avatar
Daniel Teixeira committed
229 230 231 232 233 234 235 236 237 238 239 240 241 242 243
                        </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>

244
            </div>
Sebastien Pinterac's avatar
Sebastien Pinterac committed
245 246 247 248 249 250
        </div>
    </div>
</div>


<div class="section sectionBg pt-40 pb-50">
Daniel Teixeira's avatar
Daniel Teixeira committed
251 252 253 254 255 256 257 258

        <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
259 260 261 262
                        <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
263 264
                        </p>
                    </div>
Daniel Teixeira's avatar
Daniel Teixeira committed
265
                </div>
266
            </div>
Daniel Teixeira's avatar
Daniel Teixeira committed
267
        
Sebastien Pinterac's avatar
Sebastien Pinterac committed
268 269 270 271 272
</div>

<div class="section pt-20 pb-50">
    <div class="container">
        <div class="row mt-20">
Daniel Teixeira's avatar
Daniel Teixeira committed
273
            <h2 class="text-center">About the SIB Swiss Institute of Bioinformatics</h2><br>
Daniel Teixeira's avatar
Daniel Teixeira committed
274
            <div class="col-md-4 text-center">
Daniel Teixeira's avatar
Daniel Teixeira committed
275
                <iframe width="350" height="315" src="https://www.youtube.com/embed/182AzhLiwxc" frameborder="0" allowfullscreen></iframe>
Sebastien Pinterac's avatar
Sebastien Pinterac committed
276
            </div>
277
            <div class="col-md-8">
Franziska Gruhl's avatar
Franziska Gruhl committed
278 279 280 281 282
                <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
283 284 285 286 287 288
                    <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
289 290 291 292 293
                -->
                <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
294 295 296 297 298
            </div>
        </div>
    </div>
</div>

SIB Web Team LSF User's avatar
SIB Web Team LSF User committed
299 300 301 302 303 304
<div id="bottom-note" class="section pt-20 pb-50">
    <div class="container">
        <p>Note that this game is open source. If you would like to contribute and help with translating in another language, don't hesitate to get in touch with us.
        <br>While playing, if you find a bug or typo, please <a href="&#109;&#97;&#105;&#x6c;&#x74;&#111;&#x3a;%63%6f%6d%6d%75%6e%69%63%61%74%69%6f%6e%40%73%69%62%2e%73%77%69%73%73">let us know</a>.</p>
    </div>
</div>
Daniel Teixeira's avatar
Daniel Teixeira committed
305

306
<div id="footer" class="section-black pb-20">
Sebastien Pinterac's avatar
Sebastien Pinterac committed
307 308
    <div class="container">
        <div class="row">
Daniel Teixeira's avatar
Daniel Teixeira committed
309
            <div class="col-md-6 pt-20 text-center">
310 311 312 313 314 315 316 317
                <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
318
            </div>
Daniel Teixeira's avatar
Daniel Teixeira committed
319
            <div class="col-md-6 pt-20 text-center">
320 321 322
                <h5>Developed by
                    <a href="https://pinterac.net" target="_blank">Pinterac</a>
                </h5>
Sebastien Pinterac's avatar
Sebastien Pinterac committed
323 324 325 326 327 328 329
            </div>
        </div>
    </div>
</div>
<script>
    new WOW().init();
</script>
Daniel Teixeira's avatar
Daniel Teixeira committed
330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356

<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
357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 386 387 388 389 390 391 392 393 394 395 396 397 398 399 400
    <!-- 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
401
</body>
Daniel Teixeira's avatar
Daniel Teixeira committed
402
</html>