-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
199 lines (188 loc) · 11.9 KB
/
index.html
File metadata and controls
199 lines (188 loc) · 11.9 KB
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
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Visual Physiology Database</title>
<meta name="description" content="Decoding the Genotype-Phenotype Map of Vision through open-source databases and machine learning.">
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://unpkg.com/lucide@latest"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: {
50: '#f0f9ff',
100: '#e0f2fe',
500: '#0ea5e9',
600: '#0284c7',
900: '#0c4a6e',
},
dark: '#0f172a'
},
fontFamily: {
sans: ['Inter', 'system-ui', 'sans-serif'],
mono: ['Fira Code', 'monospace'],
}
}
}
}
</script>
</head>
<body class="bg-slate-50 text-slate-900 font-sans antialiased selection:bg-primary-500 selection:text-white">
<!-- Navigation -->
<nav class="sticky top-0 z-50 bg-white/80 backdrop-blur-md border-b border-slate-200">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between h-16 items-center">
<div class="flex items-center gap-2">
<i data-lucide="dna" class="text-primary-600 w-8 h-8"></i>
<span class="font-bold text-xl tracking-tight text-slate-900">Visual Physiology DB</span>
</div>
<div class="hidden md:flex gap-8">
<a href="#projects" class="text-sm font-medium text-slate-600 hover:text-primary-600 transition-colors">Projects</a>
<a href="#publications" class="text-sm font-medium text-slate-600 hover:text-primary-600 transition-colors">Publications</a>
<a href="vpod.html" class="text-sm font-medium text-primary-600 hover:text-primary-800 transition-colors">VPOD</a>
<a href="optics.html" class="text-sm font-medium text-primary-600 hover:text-primary-800 transition-colors">OPTICS</a>
</div>
<div class="flex gap-4">
<a href="https://github.com/VisualPhysiologyDB" target="_blank" class="text-slate-500 hover:text-slate-900 transition-colors">
<i data-lucide="github" class="w-6 h-6"></i>
</a>
</div>
</div>
</div>
</nav>
<!-- Hero Section -->
<header class="relative overflow-hidden bg-dark text-white pt-24 pb-32">
<div class="absolute inset-0 overflow-hidden pointer-events-none">
<div class="absolute -top-1/2 -right-1/2 w-full h-full bg-gradient-to-b from-primary-900/40 to-transparent rounded-full blur-3xl transform rotate-12 opacity-60"></div>
<div class="absolute -bottom-1/2 -left-1/2 w-full h-full bg-gradient-to-t from-primary-600/20 to-transparent rounded-full blur-3xl transform -rotate-12 opacity-60"></div>
</div>
<div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
<h1 class="text-4xl md:text-6xl font-extrabold tracking-tight mb-6">
Decoding the Genotype-Phenotype<br>Map of Vision
</h1>
<p class="mt-4 max-w-2xl mx-auto text-xl text-slate-300 mb-10">
An open-source ecosystem curating visual physiology data and pioneering machine learning approaches to predict opsin phenotypes directly from amino-acid sequences.
</p>
<div class="flex flex-col sm:flex-row justify-center gap-4">
<a href="#projects" class="inline-flex items-center justify-center px-8 py-3.5 border border-transparent text-base font-medium rounded-lg text-white bg-primary-600 hover:bg-primary-500 shadow-lg shadow-primary-600/30 transition-all hover:-translate-y-0.5">
Explore Our Tools
</a>
</div>
</div>
</header>
<!-- Projects Section -->
<section id="projects" class="py-24 bg-slate-50">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-16">
<h2 class="text-3xl font-bold text-slate-900 tracking-tight">Our Primary Repositories</h2>
<p class="mt-4 text-lg text-slate-600 max-w-2xl mx-auto">Open-source datasets and computational tools developed by the Visual Physiology DB organization.</p>
</div>
<div class="grid md:grid-cols-2 gap-8 max-w-5xl mx-auto">
<!-- VPOD Card -->
<a href="vpod.html" class="block group">
<div class="bg-white rounded-2xl p-8 shadow-sm border border-slate-200 hover:shadow-xl hover:border-primary-200 transition-all h-full relative overflow-hidden">
<div class="absolute top-0 right-0 w-32 h-32 bg-primary-50 rounded-bl-full -z-10 group-hover:scale-110 transition-transform"></div>
<div class="w-14 h-14 bg-primary-100 text-primary-600 rounded-xl flex items-center justify-center mb-6">
<i data-lucide="database" class="w-7 h-7"></i>
</div>
<h3 class="text-2xl font-bold text-slate-900 mb-3 flex items-center gap-2">
VPOD <span class="text-xs font-medium bg-slate-100 text-slate-600 px-2 py-1 rounded-full">v1.3</span>
</h3>
<p class="text-slate-600 mb-6 leading-relaxed">
The <strong>Visual Physiology Opsin Database</strong> is a newly compiled database containing 1,714 unique opsin genotypes and corresponding λ<sub>max</sub> phenotypes collected across all animals from 120+ publications.
</p>
<div class="flex items-center text-primary-600 font-medium group-hover:translate-x-1 transition-transform">
View Database <i data-lucide="arrow-right" class="w-4 h-4 ml-1"></i>
</div>
</div>
</a>
<!-- OPTICS Card -->
<a href="optics.html" class="block group">
<div class="bg-white rounded-2xl p-8 shadow-sm border border-slate-200 hover:shadow-xl hover:border-primary-200 transition-all h-full relative overflow-hidden">
<div class="absolute top-0 right-0 w-32 h-32 bg-primary-50 rounded-bl-full -z-10 group-hover:scale-110 transition-transform"></div>
<div class="w-14 h-14 bg-primary-100 text-primary-600 rounded-xl flex items-center justify-center mb-6">
<i data-lucide="eye" class="w-7 h-7"></i>
</div>
<h3 class="text-2xl font-bold text-slate-900 mb-3 flex items-center gap-2">
OPTICS <span class="text-xs font-medium bg-slate-100 text-slate-600 px-2 py-1 rounded-full">v1.3</span>
</h3>
<p class="text-slate-600 mb-6 leading-relaxed">
The <strong>Opsin Phenotype Tool for Inference of Color Sensitivity</strong> uses machine learning models trained on VPOD to predict λ<sub>max</sub> from unaligned sequences and map feature importance to 3D structures.
</p>
<div class="flex items-center text-primary-600 font-medium group-hover:translate-x-1 transition-transform">
View Tool <i data-lucide="arrow-right" class="w-4 h-4 ml-1"></i>
</div>
</div>
</a>
</div>
</div>
</section>
<!-- Publications Section -->
<section id="publications" class="py-24 bg-white border-t border-slate-100">
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-16">
<h2 class="text-3xl font-bold text-slate-900 tracking-tight">Recent Publications</h2>
</div>
<div class="space-y-6">
<div class="p-6 bg-slate-50 rounded-xl border border-slate-200 hover:border-primary-300 transition-colors">
<div class="flex items-start gap-4">
<div class="mt-1 bg-white p-2 rounded-lg border border-slate-200 shadow-sm text-primary-600">
<i data-lucide="book-open" class="w-5 h-5"></i>
</div>
<div>
<h4 class="font-bold text-slate-900 mb-2 text-lg">Accessible and Robust Machine Learning Approaches to Improve the Opsin Genotype-Phenotype Map</h4>
<p class="text-slate-600 font-serif leading-relaxed text-sm mb-3">
Seth A. Frazer, Todd H. Oakley. <em>bioRxiv</em>, 2025.08.22.671864.
</p>
<a href="https://doi.org/10.1101/2025.08.22.671864" target="_blank" class="inline-flex items-center text-sm font-medium text-primary-600 hover:text-primary-800">
Read Pre-print <i data-lucide="external-link" class="w-3 h-3 ml-1"></i>
</a>
</div>
</div>
</div>
<div class="p-6 bg-slate-50 rounded-xl border border-slate-200 hover:border-primary-300 transition-colors">
<div class="flex items-start gap-4">
<div class="mt-1 bg-white p-2 rounded-lg border border-slate-200 shadow-sm text-primary-600">
<i data-lucide="book-open" class="w-5 h-5"></i>
</div>
<div>
<h4 class="font-bold text-slate-900 mb-2 text-lg">Discovering genotype-phenotype relationships with machine learning and the Visual Physiology Opsin Database (VPOD)</h4>
<p class="text-slate-600 font-serif leading-relaxed text-sm mb-3">
Seth A. Frazer, Mahdi Baghbanzadeh, Ali Rahnavard, Keith A. Crandall, & Todd H Oakley. <em>GigaScience</em>, 2024.09.01.
</p>
<a href="https://doi.org/10.1093/gigascience/giae073" target="_blank" class="inline-flex items-center text-sm font-medium text-primary-600 hover:text-primary-800">
Read Paper <i data-lucide="external-link" class="w-3 h-3 ml-1"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="bg-dark py-12 border-t border-slate-800">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
<div class="flex items-center justify-center gap-2 mb-6">
<i data-lucide="dna" class="text-primary-500 w-6 h-6"></i>
<span class="font-bold text-xl tracking-tight text-white">Visual Physiology DB</span>
</div>
<p class="text-slate-400 text-sm mb-6 max-w-md mx-auto">
Maintained by Seth A. Frazer & Todd H. Oakley <br>
University of California, Santa Barbara
</p>
<div class="flex justify-center gap-6">
<a href="https://github.com/VisualPhysiologyDB" class="text-slate-400 hover:text-white transition-colors">
<span class="sr-only">GitHub</span>
<i data-lucide="github" class="w-6 h-6"></i>
</a>
</div>
</div>
</footer>
<script>
lucide.createIcons();
</script>
</body>
</html>