index.html 11 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 34 35

</head>
<body>
Daniel Teixeira's avatar
Daniel Teixeira committed
36 37 38 39 40 41 42 43 44 45 46 47
<div class="section sectionBg" style="height: 50px;">
    <div>
    </div>
        <div id="twentyyearsribbon" class="col-md-2 text-center">
            <a target="_blank" href="https://www.sib.swiss/20years">
            <img id="twentyyearsimg" src="assets/images/SIB_logo_20ans.png"></a>
        </div>
        <div class="col-md-8 text-center"></div>
       <div class="col-md-2 text-center pt-10 pb-10">
            <a href="https://pinterac.net" target="_blank">Press</a> |
            <a href="https://pinterac.net" target="_blank">Contact</a>
        </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">
Sebastien Pinterac's avatar
Sebastien Pinterac committed
51 52
        <div class="col text-center">
            <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 58 59 60 61 62
                    <div class="input-group">
                      <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 86 87
                <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.
                        All humans share 99.9% of their genetic information. The things that vary from one human to another, such as the colour of our skin or of our eyes, or our ability to tolerate dairy products, therefore lie in the 0.1% of differences in our respective genomes! These are called variants.
                </p>
Sebastien Pinterac's avatar
Sebastien Pinterac committed
88 89 90 91 92 93 94 95
            </div>
        </div>
    </div>
</div>

<div class="section pt-40 pb-50">
    <div class="container">
        <div class="row">
Yohan Bouché's avatar
Yohan Bouché committed
96
            <div class="col-lg-12 text-center">
Daniel Teixeira's avatar
Daniel Teixeira committed
97 98 99 100
                <h2>How do I play?</h2>
                <p>Start with an unkown character from a list of 25 avatars 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! 
                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
101 102
                <div class="row mt-50">
                    <div class="col-lg-4 text-center mt-10">
Daniel Teixeira's avatar
Daniel Teixeira committed
103 104
                        <img src="assets/images/avatars/avatar1.jpg" class="img-circle" style="max-width: 300px"/>
                        <br><i>Start with an unkown character.</i>
Yohan Bouché's avatar
Yohan Bouché committed
105 106
                    </div>
                    <div class="col-lg-4 text-center mt-10">
Daniel Teixeira's avatar
Daniel Teixeira committed
107 108
                        <img src="assets/images/avatars/avatar2.jpg" class="img-circle" 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
109 110
                    </div>
                    <div class="col-lg-4 text-center mt-10">
Daniel Teixeira's avatar
Daniel Teixeira committed
111 112
                        <img src="assets/images/avatars/avatar3.jpg" class="img-circle" style="max-width: 300px"/>
                        <br><i>Avoid secondary structures and don't fall in the introns!</i>
Yohan Bouché's avatar
Yohan Bouché committed
113 114
                    </div>
                </div>
115
            </div>
Sebastien Pinterac's avatar
Sebastien Pinterac committed
116 117 118 119 120 121 122 123
        </div>
    </div>
</div>


<div class="section sectionBg pt-40 pb-50">
    <div class="container">
        <div class="row">
124
            <div class="col text-center">
Daniel Teixeira's avatar
Daniel Teixeira committed
125
                <h2>Meet some of the characters</h2>
126 127
            </div>
        </div>
Yohan Bouché's avatar
Yohan Bouché committed
128
        <div class="row mt-50">
Daniel Teixeira's avatar
Daniel Teixeira committed
129 130
            <div class="col-lg-2 text-center">
                    <b style="font-size: 100px">...</b>
131
            </div>
Daniel Teixeira's avatar
Daniel Teixeira committed
132 133 134 135 136
            <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
137 138
                <img src="assets/images/avatars/a2.png" class=" img-circle"/>
                <br><i>Susumu</i>
139
            </div>
Daniel Teixeira's avatar
Daniel Teixeira committed
140 141 142 143 144
            <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
145 146
                <img src="assets/images/avatars/a3.png" class=" img-circle"/>
                <br><i>Dorothy</i>
147
            </div>
Daniel Teixeira's avatar
Daniel Teixeira committed
148 149
            <div class="col-lg-2 text-center">
                    <b style="font-size: 100px">...</b>
Sebastien Pinterac's avatar
Sebastien Pinterac committed
150 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">
            <div class="col-md-4 text-center">
Daniel Teixeira's avatar
Daniel Teixeira committed
159
                <a target="_blank" href="https://www.sib.swiss/"><img src="assets/images/SIB_logo.jpg" class="mt-80"/></a>
Sebastien Pinterac's avatar
Sebastien Pinterac committed
160
            </div>
161
            <div class="col-md-8">
Daniel Teixeira's avatar
Daniel Teixeira committed
162
                <h2 class="text-center">About the SIB Swiss Institute of Bioinformatics</h2><br>
Daniel Teixeira's avatar
Daniel Teixeira committed
163 164 165 166 167 168 169 170 171
                <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
172 173 174 175 176
            </div>
        </div>
    </div>
</div>

177
<div id="footer" class="section-black pb-20">
Sebastien Pinterac's avatar
Sebastien Pinterac committed
178 179
    <div class="container">
        <div class="row">
180 181 182 183 184 185 186 187 188 189 190 191 192
            <div class="col-md-6 text-center">
                <h3>Genome Jumper</h3>
                <h5><img id="sibLogo" src="assets/images/sib.png">
                    <a href="https://www.sib.swiss/" target="_blank">Swiss Institute of Bioinformatics</a>
                </h5>
                <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
193
            </div>
194 195 196 197 198 199 200 201
            <div class="col-md-6 text-center">
                <h3>Information</h3>
                <h5>
                    <a href="TODO" class="terms">Terms of service</a>
                </h5>
                <h5>Developed by
                    <a href="https://pinterac.net" target="_blank">Pinterac</a>
                </h5>
Sebastien Pinterac's avatar
Sebastien Pinterac committed
202 203 204 205 206 207 208
            </div>
        </div>
    </div>
</div>
<script>
    new WOW().init();
</script>
Daniel Teixeira's avatar
Daniel Teixeira committed
209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235

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


Sebastien Pinterac's avatar
Sebastien Pinterac committed
236 237
</body>
</html>