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


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

Sebastien Pinterac's avatar
Sebastien Pinterac committed
62
    </div>
63

Sebastien Pinterac's avatar
Sebastien Pinterac committed
64 65 66 67
</div>
<div class="section sectionBg pt-40 pb-50">
    <div class="container">
        <div class="row mt-20">
68
            <div class="col-lg-4 col-md-4 text-center">
Sebastien Pinterac's avatar
Sebastien Pinterac committed
69 70
                <img src="assets/images/bubbles.png" class="w100"/>
            </div>
71 72
            <div class="col-lg-8 col-md-8 text-left">
                <h2>Discover the human genome</h2>
Daniel Teixeira's avatar
Daniel Teixeira committed
73 74
                <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
75 76 77 78 79 80 81 82
            </div>
        </div>
    </div>
</div>

<div class="section pt-40 pb-50">
    <div class="container">
        <div class="row">
Yohan Bouché's avatar
Yohan Bouché committed
83
            <div class="col-lg-12 text-center">
Daniel Teixeira's avatar
Daniel Teixeira committed
84 85 86
                <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
87 88
                <div class="row mt-50">
                    <div class="col-lg-4 text-center mt-10">
Daniel Teixeira's avatar
Daniel Teixeira committed
89 90
                            <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
91 92
                    </div>
                    <div class="col-lg-4 text-center mt-10">
Daniel Teixeira's avatar
Daniel Teixeira committed
93
                        <img src="assets/images/genes/serpine1.png" class="img-circle" style="max-width: 300px"/>
Daniel Teixeira's avatar
Daniel Teixeira committed
94
                        <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
95 96
                    </div>
                    <div class="col-lg-4 text-center mt-10">
Daniel Teixeira's avatar
Daniel Teixeira committed
97 98
                            <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
99 100
                    </div>
                </div>
101
            </div>
Sebastien Pinterac's avatar
Sebastien Pinterac committed
102 103 104 105 106 107 108 109
        </div>
    </div>
</div>


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

172
<div id="footer" class="section-black pb-20">
Sebastien Pinterac's avatar
Sebastien Pinterac committed
173 174
    <div class="container">
        <div class="row">
175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193
            <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
194
            </div>
195 196 197 198 199 200 201 202
            <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
203 204 205 206 207 208 209
            </div>
        </div>
    </div>
</div>
<script>
    new WOW().init();
</script>
Daniel Teixeira's avatar
Daniel Teixeira committed
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 236

<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
237 238
</body>
</html>