index.html 11.2 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 36 37


</head>
<body>
<div id="header">
Daniel Teixeira's avatar
Daniel Teixeira committed
38 39 40
    <div id="twentyyearsribbon">
        <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
41
    <div class="row mlmr-none mt-20">
Sebastien Pinterac's avatar
Sebastien Pinterac committed
42 43
        <div class="col text-center">
            <h1>GENOME JUMPER</h1>
Daniel Teixeira's avatar
Daniel Teixeira committed
44 45
            <h2>COMING VERY SOON</h2>
            <form action="register.php" class="form-inline">
Daniel Teixeira's avatar
Daniel Teixeira committed
46
                    <p>Enter your email below to be the first to play!</p>
Daniel Teixeira's avatar
Daniel Teixeira committed
47 48 49 50 51 52
                    <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
53
                        <button id="registerButton" type="submit" class="btn btn-danger">Register</button>
Daniel Teixeira's avatar
Daniel Teixeira committed
54 55
                    </div>
            </form>
Sebastien Pinterac's avatar
Sebastien Pinterac committed
56 57
        </div>
    </div>
58 59
    <div class="row mlmr-none mt-30">
        <div class="col col-lg-12 text-center stores">
Daniel Teixeira's avatar
Daniel Teixeira committed
60 61
            <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
62
        </div>
63

Sebastien Pinterac's avatar
Sebastien Pinterac committed
64
    </div>
65

Sebastien Pinterac's avatar
Sebastien Pinterac committed
66 67 68 69
</div>
<div class="section sectionBg pt-40 pb-50">
    <div class="container">
        <div class="row mt-20">
70
            <div class="col-lg-4 col-md-4 text-center">
Sebastien Pinterac's avatar
Sebastien Pinterac committed
71 72
                <img src="assets/images/bubbles.png" class="w100"/>
            </div>
73 74
            <div class="col-lg-8 col-md-8 text-left">
                <h2>Discover the human genome</h2>
Daniel Teixeira's avatar
Daniel Teixeira committed
75 76
                <p>Genome Jumper takes you into the world of <b>the human genome</b> and its variants! You will have to complete several genes to reveal the different avatars! In each level (gene) you will have to collect the "start codon", the "stop codon" and the "variant" to complete your avatar. You will quickly understand that it will be enough for you a small variation in the gene of your avatar to generate several characteristic features (phenotypes).
                <br><br>Whether it is the skin tone, the color of the eyes, a predisposition for a disease, or even "super powers", everything is in your genes!</p>
Sebastien Pinterac's avatar
Sebastien Pinterac committed
77 78 79 80 81 82 83 84
            </div>
        </div>
    </div>
</div>

<div class="section pt-40 pb-50">
    <div class="container">
        <div class="row">
Yohan Bouché's avatar
Yohan Bouché committed
85
            <div class="col-lg-12 text-center">
Daniel Teixeira's avatar
Daniel Teixeira committed
86 87 88
                <h2>Explore more than 35 genes and their variants</h2>
                <p>The SIB Swiss Institute of Bioinformatics offers you to discover more than 35 genes at their RNA level, each containing an associated variant.<br>In real life, you should know that each of us has more than 20,000 genes with millions of variants, so we are all so different from each other!</p>
                <p>Beware of the secondary structure of RNA, try to avoid them as much as possible.</p>
Yohan Bouché's avatar
Yohan Bouché committed
89 90
                <div class="row mt-50">
                    <div class="col-lg-4 text-center mt-10">
Daniel Teixeira's avatar
Daniel Teixeira committed
91 92
                            <img src="assets/images/genes/aldh2.png" class="img-circle" style="max-width: 300px"/>
                            <br><i>ALDH2 contains a variant present in asian population that affects alcohol methabolization.</i>
Yohan Bouché's avatar
Yohan Bouché committed
93 94
                    </div>
                    <div class="col-lg-4 text-center mt-10">
Daniel Teixeira's avatar
Daniel Teixeira committed
95
                        <img src="assets/images/genes/serpine1.png" class="img-circle" style="max-width: 300px"/>
Daniel Teixeira's avatar
Daniel Teixeira committed
96
                        <br><i>SERPINE1 contains a variant common in Amish population that increases the chances to live longer!</i>
Yohan Bouché's avatar
Yohan Bouché committed
97 98
                    </div>
                    <div class="col-lg-4 text-center mt-10">
Daniel Teixeira's avatar
Daniel Teixeira committed
99 100
                            <img src="assets/images/genes/brca1.png" class="img-circle" style="max-width: 300px"/>
                            <br><i><b>BRCA1 contains a variant that can be use to assess the risk of contracting breast cancer.</b></i>
Yohan Bouché's avatar
Yohan Bouché committed
101 102
                    </div>
                </div>
103
            </div>
Sebastien Pinterac's avatar
Sebastien Pinterac committed
104 105 106 107 108 109 110 111
        </div>
    </div>
</div>


<div class="section sectionBg pt-40 pb-50">
    <div class="container">
        <div class="row">
112
            <div class="col text-center">
Daniel Teixeira's avatar
Daniel Teixeira committed
113
                <h2>25 unique avatars worldwide, discover part of their genome!</h2>
114 115
            </div>
        </div>
Yohan Bouché's avatar
Yohan Bouché committed
116 117
        <div class="row mt-50">
            <div class="col-lg-4 text-center">
Daniel Teixeira's avatar
Daniel Teixeira committed
118
                <img src="assets/images/avatars/a1.png" class="img-circle"/>
Yohan Bouché's avatar
Yohan Bouché committed
119
                <br><i>Tomoko</i>
120
            </div>
Yohan Bouché's avatar
Yohan Bouché committed
121 122 123
            <div class="col-lg-4 text-center">
                <img src="assets/images/avatars/a2.png" class=" img-circle"/>
                <br><i>Susumu</i>
124
            </div>
Yohan Bouché's avatar
Yohan Bouché committed
125 126 127
            <div class="col-lg-4 text-center">
                <img src="assets/images/avatars/a3.png" class=" img-circle"/>
                <br><i>Dorothy</i>
128 129 130
            </div>
        </div>
        <div class="row mt-20">
Yohan Bouché's avatar
Yohan Bouché committed
131 132 133
            <div class="col-lg-4 text-center">
                <img src="assets/images/avatars/a4.png" class=" img-circle"/>
                <br><i>Barbara</i>
134
            </div>
Yohan Bouché's avatar
Yohan Bouché committed
135 136 137
            <div class="col-lg-4 text-center">
                <img src="assets/images/avatars/a5.png" class=" img-circle"/>
                <br><i>Yohan</i>
138
            </div>
Yohan Bouché's avatar
Yohan Bouché committed
139 140 141
            <div class="col-lg-4 text-center">
                <img src="assets/images/avatars/a6.png" class=" img-circle"/>
                <br><i>Hild</i>
142
            </div>
Yohan Bouché's avatar
Yohan Bouché committed
143 144 145 146
        </div>
        <div class="row">
            <div class="col-lg-12 text-center">
                <b style="font-size: 100px">...</b>
Sebastien Pinterac's avatar
Sebastien Pinterac committed
147 148 149 150 151 152 153 154 155
            </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
156
                <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
157
            </div>
158
            <div class="col-md-8">
Daniel Teixeira's avatar
Daniel Teixeira committed
159
                <h2 class="text-center">About the SIB Swiss Institute of Bioinformatics</h2><br>
Daniel Teixeira's avatar
Daniel Teixeira committed
160 161 162 163 164 165 166 167 168
                <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
169 170 171 172 173
            </div>
        </div>
    </div>
</div>

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

<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
239 240
</body>
</html>