Skip to content

Commit 0a7b40c

Browse files
CexyNatureCexyNature
committed
💄 Update UI and style files
1 parent 3863187 commit 0a7b40c

3 files changed

Lines changed: 110 additions & 19 deletions

File tree

‎apps/web/crabspy_web/static/css/app.css‎

Lines changed: 46 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -70,8 +70,53 @@ body {
7070
padding: 1rem 0;
7171
}
7272

73+
.panel + .panel {
74+
border-top: 1px solid var(--border);
75+
}
76+
7377
.lead {
74-
font-size: 1.05rem;
78+
font-size: 1.1rem;
79+
max-width: 44rem;
80+
}
81+
82+
.h3 {
83+
font-size: 1.15rem;
84+
margin-top: 0.75rem;
85+
}
86+
87+
.landing-hero {
88+
padding: 1.5rem 0 1rem;
89+
}
90+
91+
.landing-hero h1 {
92+
font-size: 2rem;
93+
margin: 0 0 0.5rem;
94+
}
95+
96+
.landing-links {
97+
padding-left: 1.25rem;
98+
line-height: 1.8;
99+
}
100+
101+
.landing-quote {
102+
margin: 1rem 0 0.5rem 0;
103+
padding: 0.75rem 1rem;
104+
border-left: 3px solid var(--accent);
105+
font-style: italic;
106+
color: var(--muted);
107+
}
108+
109+
.landing-quote p {
110+
margin: 0 0 0.4rem;
111+
}
112+
113+
.landing-quote footer {
114+
font-style: normal;
115+
font-size: 0.85rem;
116+
}
117+
118+
.small-print {
119+
font-size: 0.9rem;
75120
}
76121

77122
.btn {

‎apps/web/crabspy_web/templates/layouts/base.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@
2020
{% block content %}{% endblock %}
2121
</main>
2222
<footer class="site-footer">
23-
<p class="muted">Local FastAPI + Jinja2 + HTMX scaffold — see <code>docs/crabspy-rebuild-plan.md</code>.</p>
23+
<p class="muted">CrabSpy &mdash; built with FastAPI, Jinja2 &amp; HTMX · <a href="https://github.com/CexyNature/Crabspy" target="_blank" rel="noopener">Source on GitHub</a></p>
2424
</footer>
2525
<script src="{{ url_for('static', path='js/app.js') }}" defer></script>
2626
</body>

‎apps/web/crabspy_web/templates/pages/index.html‎

Lines changed: 63 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,72 @@
11
{% extends "layouts/base.html" %}
22
{% block title %}{{ title }} — Crabspy{% endblock %}
33
{% block content %}
4-
<section class="panel">
5-
<h1>Crabspy web</h1>
4+
<section class="panel landing-hero">
5+
<h1>CrabSpy</h1>
66
<p class="lead">
7-
Register media drafts, switch project databases, and export media or annotations CSV — see <a href="/media/">Media</a> and
8-
<a href="/settings/database">Database settings</a>.
7+
A heuristic toolbox for spying on intertidal crabs in their environment — collecting information about species identity, movement patterns, coloration, feeding rates, bioturbation, and more.
8+
</p>
9+
</section>
10+
11+
<section class="panel">
12+
<h2 class="h3">Quick start</h2>
13+
<ul class="landing-links">
14+
<li><a href="/media/">Media library</a> — register images and videos, annotate organisms, and export data.</li>
15+
<li><a href="/media/import">Import media from CSV</a> — bulk-import study metadata.</li>
16+
<li><a href="/settings/database">Database settings</a> — switch project databases.</li>
17+
</ul>
18+
</section>
19+
20+
<section class="panel">
21+
<h2 class="h3">About</h2>
22+
<p>
23+
CrabSpy proposes an alternative workflow to collect biological and ecological data from intertidal crabs using computer vision. It aims to accelerate and improve information collection, enabling rapid and actionable scientific and policy response.
24+
</p>
25+
<p>
26+
Traditional methods to study crab ecology are often time consuming, invasive, and can alter the natural habitat. CrabSpy incorporates automation — from quadrat-calibrated measurement to polyline annotations — to help researchers scale up data collection at broader spatial and temporal scales.
927
</p>
28+
<blockquote class="landing-quote">
29+
<p>
30+
&ldquo;Until comparatively recently, ecologists were content to describe how nature &lsquo;looks&rsquo; &hellip; Now, an equal emphasis is being placed on what nature &lsquo;does&rsquo;, and rightly so, because the changing face of nature can never be understood unless her metabolism is also studied.&rdquo;
31+
</p>
32+
<footer class="muted">— Eugene P. Odum, <cite>Fundamentals of Ecology</cite>, 1957</footer>
33+
</blockquote>
34+
</section>
35+
36+
<section class="panel">
37+
<h2 class="h3">Author</h2>
1038
<p>
11-
<strong>HTMX example:</strong>
12-
<button
13-
type="button"
14-
class="btn"
15-
hx-get="/fragments/status"
16-
hx-target="#status-panel"
17-
hx-swap="innerHTML"
18-
>
19-
Load status fragment
20-
</button>
39+
<strong>Cesar Herrera</strong>
40+
· <a href="https://twitter.com/CexyNature" target="_blank" rel="noopener">@CexyNature</a>
41+
· <a href="https://github.com/CexyNature" target="_blank" rel="noopener">GitHub</a>
42+
</p>
43+
<p class="muted small-print">
44+
CrabSpy was originally developed at James Cook University to track intertidal crabs in soft sediments. Functions now include counting feeding events, extracting colour data, measuring and counting burrows, calibrated carapace measurement, and more.
45+
</p>
46+
</section>
47+
48+
<section class="panel">
49+
<h2 class="h3">Acknowledgements</h2>
50+
<p class="muted small-print">
51+
Funded or supported by
52+
<a href="https://www.jcu.edu.au/" target="_blank" rel="noopener">James Cook University</a>,
53+
<a href="https://www.jcu.edu.au/sicem" target="_blank" rel="noopener">SICEM</a>,
54+
<a href="https://www.ecolsoc.org.au/awards-and-prizes/holsworth-wildlife-research-endowment" target="_blank" rel="noopener">Holsworth Wildlife Research Endowment (ESA)</a>,
55+
<a href="https://nectar.org.au/" target="_blank" rel="noopener">NeCTAR</a>,
56+
<a href="https://www.qcif.edu.au/" target="_blank" rel="noopener">QCIF</a>,
57+
<a href="https://www.mdatatechjcu.com/" target="_blank" rel="noopener">Marine Data Technology Hub</a>,
58+
<a href="https://www.tropwater.com/" target="_blank" rel="noopener">TropWATER</a>,
59+
and <a href="https://scipy-school.org/" target="_blank" rel="noopener">ASPP-APAC 2019</a>.
60+
</p>
61+
</section>
62+
63+
<section class="panel">
64+
<h2 class="h3">License &amp; citation</h2>
65+
<p class="muted small-print">
66+
CrabSpy is released under the
67+
<a href="https://www.gnu.org/licenses/gpl-3.0" target="_blank" rel="noopener">GNU GPL v3</a> license.
68+
If you use CrabSpy in your research, please cite:
69+
<a href="https://doi.org/10.5281/zenodo.3820270" target="_blank" rel="noopener">DOI 10.5281/zenodo.3820270</a>.
2170
</p>
22-
<div id="status-panel" class="status-panel muted" aria-live="polite">
23-
(status will appear here)
24-
</div>
2571
</section>
2672
{% endblock %}

0 commit comments

Comments
 (0)