DNAnalyzer/templates/index.html at 7bf9de4ffff1b820fbe1c3c3ec4dbdcb1d3e64c4 · StreetScienceCommunity/DNAnalyzer · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
{% extends 'base.html' %}
{% block head%}
<title>DNAnalyzer</title>
{% endblock %}

{% block body%}
<!-- style="background-color: blue;" -->
  <div class="container content">
        <!-- section1 START-->
        <div class="columns section1 has-text-centered-mobile is-vcentered is-flex" >
            <div class="column section1_text">
                <h1 class="is-size-3-mobile welcome_text">Welcome to our online & interactive game
                    on DNA data analysis</h1>
                <p class="come_join_text">Learn Bioinformatics online through interesting games! Come join us now!</p>
                <a href="/level/1/intro" class="button is-large is-fullwidth start_tbn">Get Started</a>
            </div>
            <div class="column section1_img is-hidden-mobile">
                <figure>
                    <img src="/static/images/hero_img.png" alt="">
                    <figcaption class="caption"> designed by <a href="https://www.freepik.com/free-vector/science-concept-with-microscope-people-working_7952246.htm">freepik</a></figcaption>
                </figure>
            </div>
        </div>
        <!-- section1 END-->

        <!-- section2 START-->
        <div class="section2 has-text-centered-mobile">
            <div class="section2_text">
                <p class="is-size-3-mobile">Four exciting levels help you to learn!</p>
                <p>Rocket your bioinformatics knowledge. Learn, play, enjoy, All at the same time.</p>
            </div>
            <ul class="columns section2_cards is-multiline">
                <!-- card 1 -->
                <li class="column">
                    <div class="card  is-fullheight">
                        <div class="card-image">
                            <figure class="image is-4by3">
                                <img src="/static/images/undraw_alien_science.svg" alt="Sam, the alien">
                            </figure>
                        </div>
                        <div class="card-content">
                            <p class="title is-4">Sam, the alien.</p>
                            <div class="content">
                                Meet Sam and help him to understand life on earth. Together you will find out what every organism on earth has in common and other fascinating biological facts you need to know before performing data analysis.
                            </div>
                        </div>
                        <footer class="card-footer">
                            <a href="/level/1/intro" class="button is-info is-medium is-fullwidth">Learn more</a>
                        </footer>
                    </div>
                </li>
                 <!-- card 2 -->
                 <li class="column">
                    <div class="card is-fullheight">
                        <div class="card-image">
                            <figure class="image is-4by3">
                                <img src="/static/images/undraw_beer.svg" alt="Sam, the alien">
                            </figure>
                        </div>
                        <div class="card-content">
                            <p class="title is-4">BeerDEcoded</p>
                            <div class="content">
                                Did you ever wonder what is inside your beer and why beer is alive? Sam and you will learn how to analyze beer sequencing data using the user-friendly data analysis platform Galaxy. In no time you will become a professional data analyst.
                            </div>
                        </div>
                        <footer class="card-footer">
                            <a href="/level/2/intro" class="button is-info is-medium is-fullwidth">Learn more</a>
                        </footer>
                    </div>
                </li>
                <!-- card 3 -->
                <li class="column">
                    <div class="card is-fullheight">
                        <div class="card-image">
                            <figure class="image is-4by3">
                                <img src="/static/images/undraw_researching_re_fuod.svg" alt="Sam, the alien">
                            </figure>
                        </div>
                        <div class="card-content">
                            <p class="title is-4">Becoming a researcher</p>
                            <div class="content">
                                Feel like you're on board with data analysis? There's more for you to
                                explore! Reanalyze data and learn about scientific methods and knowledge sharing.
                            </div>
                        </div>
                        <footer class="card-footer">
                            <a href="/level/3/intro" class="button is-info is-medium is-fullwidth">Learn more</a>
                        </footer>
                    </div>
                </li>
                <!-- card 4 -->
                <li class="column">
                    <div class="card is-fullheight">
                        <div class="card-image">
                            <figure class="image is-4by3">
                                <img src="/static/images/undraw_reviewed_docs.svg" alt="Sam, the alien">
                            </figure>
                        </div>
                        <div class="card-content">
                            <p class="title is-4">Create and review new knowledge</p>
                            <div class="content">
                                You master data analysis? Change your dataset,
                                optimize your workflow, and review data analysis from your peers!
                            </div>
                        </div>
                        <footer class="card-footer">
                            <a href="/coming_soon" class="button is-info is-medium is-fullwidth">Learn more</a>
                        </footer>
                    </div>
                </li>
            </ul>
        </div>
        <!-- section2 END-->
  </div>

{% endblock %}