terra-analytics/index.html at main · arborworkflows/terra-analytics · 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
<!DOCTYPE html>
<html>

<head>
  <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
  <title>Terra Analytics</title>
</head>

<body>
  <div id="app">
    <v-app>

      <v-app-bar app>
        Terra Analytics
      </v-app-bar>

      <v-main>
        <v-container>
          <v-row>
            <v-hover v-slot="{ hover }" v-for="(app, i) in apps" :key="i">
              <v-col cols="4">
                <v-card class="mx-auto" height="500" :elevation="hover ? 16 : 2" @click="navigate(app.url)">
                  <v-img :src="app.image" height="300px"></v-img>
                  <v-card-title>{{ app.name }}</v-card-title>
                  <v-card-subtitle>{{ app.description }}</v-card-subtitle>
                </v-card>
              </v-col>
            </v-hover>
          </v-row>
        </v-container>
      </v-main>

      <v-footer app>
        Source on&nbsp;<a href="https://github.com/arborworkflows/terra-analytics">Github</a>. Made by&nbsp;<a href="http://knowledgevis.com">KnowledgeVis</a>&nbsp;and&nbsp;<a href="https://kitware.com">Kitware</a>.
      </v-footer>
    </v-app>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.20/lodash.min.js"></script>
  <script>
    new Vue({
      el: '#app',
      vuetify: new Vuetify(),
      data: () => {
        return {
          apps: [
            {
              name: 'Explore Season4 Sensor Collected Traits',
              description: 'Provide a day-by-day exploration of trait values across all cultivars',
              url: '/trait_explorer',
              image: '/static/trait_explorer.png',
            },
          ],
        };
      },
      methods: {
        navigate(url) {
          window.location.href = url;
        },
      },
    });
  </script>
</body>

</html>