-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
103 lines (93 loc) · 3.36 KB
/
index.html
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
<!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>Arbor</title>
</head>
<body>
<div id="app">
<v-app>
<v-app-bar app>
Arbor: Analytics Over the Tree of Life
</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 <a href="https://github.com/arborworkflows/terra-analytics">Github</a>. Made by <a href="http://knowledgevis.com">KnowledgeVis</a> and <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: 'Fit Continuous Variable Traits',
description: 'Fit a model to continuous character values',
url: '/fit_continuous',
image: '/static/fitContinuous_app.png',
},
{
name: 'Phylosignal',
description: 'Search for phylogenetic signal, given a tree and a matrix',
url: '/phylosignal',
image: '/static/phylosignal_app.png',
},
{
name: 'Ancestral State Reconstruction',
description: 'Explore the ancestral signal of a particular trait across the tree',
url: '/asr',
image: '/static/asr.png',
},
{
name: 'PIC',
description: 'Phylogenetic Independent Contrasts',
url: '/pic',
image: '/static/pic_app.png',
},
{
name: 'Fit Discrete Variable Traits',
description: 'Fit a model to discrete character values',
url: '/fit_discrete',
image: '/static/fitDiscrete_app.png',
},
{
name: 'Parsimony Tree',
description: 'Use a character matrix to make a maximum parsimony tree',
url: '/parsimony_tree',
image: '/static/parsimonyTree.PNG',
},
],
};
},
methods: {
navigate(url) {
window.location.href = url;
},
},
});
</script>
</body>
</html>