-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
173 lines (168 loc) · 8.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
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="static/bootswatch/bootstrap.min.css">
<link rel="stylesheet" href="static/css/index.css">
<title>Corchea</title>
</head>
<body>
<!-- Header -->
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<a class="navbar-brand" href="#">Corchea</a>
</nav>
<!-- Title -->
<div class="jumbotron" style="margin: 0px; padding:0px;">
<center><h1>Corchea</h1></center>
<img src="static/img/corchea_logo.png" style="width:150px;height:150px;" class="center">
<br>
<center><h4>Paper-fluidic open science hardware for research, teaching and more</h4></center>
<br>
</div>
<!-- Content -->
<!-- Tabs -->
<div class="container">
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#intro">Introduction</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#preview">Preview</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#research">Research</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#description">Description</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#education">Education</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#biosensing">Biosensing</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#work">Let's work together!</a>
</li>
</ul>
<!-- Actual content -->
<div id="myTabContent" class="tab-content">
<!-- Intro -->
<div class="tab-pane fade show active" id="intro">
<p>Welcome to the Corchea website! The name of this project comes from the musical note quaver or eighth note, in spanish corchea. The first version of the device on 2017 used two petri dishes connected with a U shaped strip of paper look very similar to corchea, more specificaly to the unicode symbol U+266B for corchea. A musician friend makes me note that in fact that shape is a double corchea, but is too long and I have too many files with this name so it will remains as Corchea.</p>
<div class="col-md-6" style="float:left;">
<img src="static/img/corchea_note1.png" style="width:325px;height:370px;">
</div>
<div class="col-md-6" style="float:left;">
<img src="static/img/corchea_note2.png" style="width:325px;height:350px;">
</div>
</div>
<!-- Preview -->
<div class="tab-pane fade" id="preview">
<br>
<h3>Corchea's design v3</h3>
<img src="static/img/corchea_design.png" style="width:600px;height:400px;" class="center">
<br>
<h3>In the lab</h3>
<img src="static/img/corchea_lab.jpg" style="width:600px;height:400px;" class="center">
<br>
<h3>Results</h3>
<img src="static/img/corchea_results.gif" style="width:600px;height:400px;" class="center">
</div>
<!-- Research -->
<div class="tab-pane fade" id="research">
<h3>Poster</h3>
<a href="https://www.researchgate.net/publication/334523532_Open-Source_Paper-Fluidic_Device_for_Bacterial_Culture_Communication_and_Biocomputing">
<img src="static/img/research_gate.png" style="width:200px;height:200px;" class="center">
</a>
<h3>Protocol</h3>
<a href="https://www.protocols.io/view/corchea-paper-based-microfluidic-device-vtwe6pe">
<img src="static/img/protocols.png" style="width:200px;height:200px;" class="center">
</a>
</div>
<!-- Description -->
<div class="tab-pane fade" id="description">
<p>Corchea use paper capilarity to move fluids across the paper, like candles or plants. There are two regimes,
<a class="navbar-brand" href="https://en.wikipedia.org/wiki/Capillary_action">capilarity</a> when paper is dry
and wet-flow when paper is fully wet by the <a class="navbar-brand" href="https://en.wikipedia.org/wiki/Darcy%27s_law">Darcy Law</a>.
</p>
<img src="static/img/desc1.png" style="width:600px;height:400px;" class="center">
<p>In Corchea one end of the paper is submerged in liquid (dye, media), the rest of the paper is covered with
acrylic to avoid evaporation except for the opposite end. This create a pressure difference that makes liquid
flow towards the evaporating end.
</p>
<img src="static/img/desc2.png" style="width:600px;height:400px;" class="center">
<p>
In our design both ends of the paper are at the same side making it easy to plug into a transilluminator or
imaging station like <a class="navbar-brand" href="https://github.com/SynBioUC/FluoPi">FluoPi</a>,
to transport and to use.
</p>
<img src="static/img/desc3.png" style="width:600px;height:400px;" class="center">
</div>
<!-- Education -->
<div class="tab-pane fade" id="education">
<p>Education content</p>
</div>
<!-- Biosensing -->
<div class="tab-pane fade" id="biosensing">
<p>
Corchea works as a hardware platform to pass a sample through a biosensor. It can sample continuously and
detect changes on the environment. You can analyze the response or output usig Corchea_DiscAnalyze_Pulse
</p>
</div>
<!-- Work together -->
<div class="tab-pane fade" id="work">
<p>
Here is a list of possible tasks you can help with. Remember that you can help in things that are not
in this list, just contact us and tell us how you want to cooperate or what do you want to do.
</p>
<h5>Hardware</h5>
<ul>
<li>Designing/optimizing the paper-fluidic setup</li>
<li>Customizing the design to your needs</li>
<li>Testing the setup</li>
</ul>
<h5>Software</h5>
<ul>
<li>Creating/optimizing analysis code</li>
<li>Recognition and segmentation of objects</li>
<li>Deep learning CNN, LSTM, RNN</li>
<li>Tensorflow implementations</li>
</ul>
<h5>Biology</h5>
<ul>
<li>Microbiology</li>
<li>Environmental microbiology</li>
<li>Creating/testing biosensors</li>
<li>Creating/modifying/testing genetic constructions</li>
<li>Implementing new reporters (fluorescent, colorimetric, enzimatic, etc)</li>
<li>Biomaterials</li>
</ul>
<h5>Content</h5>
<ul>
<li>Creating new educational content using Corchea</li>
<li>Creating new experiments using Corchea</li>
<li></li>
</ul>
<h5>Using the device and give us feedback, we will apreciate it!</h5>
<br>
<br>
<h5>Why should we work together?</h5>
<p>
If you like to learn doing projects, you are a maker or you just want to contribute this is a fun open-source
interdisciplinary project to be part of. It uses, 3D printing, laser cut, paper-based microfluics, microbiology,
synthetic biology, data science. Did I mention that is also low-cost so it is not expensive to replicate, and
you can do it in the comfort of your home or lab (with apropiate sterility protocols if necessary). So yeah,
what are you waiting for? an invitational letter? (This message count as invitational letter)
Also is highly probable that the results will be published in an Open Acces peer-reviewed scientific journal
or at least a BioRxiv preprint and you can be a co-author!
</p>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>