-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
140 lines (129 loc) · 6.6 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="google-site-verification" content="rQEgRDo-jpo34nX1vfHwvHdRfB1tnKWNwOXTroAo6XA" />
<meta name="description" content="LEAVES: A tool for ecoacoustic analysis, allowing efficient large-scale annotation and visualization of natural soundscapes.">
<meta name="keywords" content="LEAVES, ecoacoustics, soundscape analysis, machine learning, annotation, visualization, bioacoustics">
<meta name="author" content="Thomas J. Napier">
<title>LEAVES - Ecoacoustics Tool</title>
<link rel="stylesheet" href="assets/styles.css">
<link rel="icon" href="./src/assets/logos/logo.png" type="image/png">
</head>
<body class="light">
<!-- Top Banner with Logo and Responsive Navigation -->
<div id="top-banner">
<img id="logo" src="./src/assets/logos/logo.png" alt="LEAVES Logo">
<div id="top-banner-title">LEAVES: Large-scale Ecoacoustics Annotation & Visualization</div>
<nav id="navbar">
<a href="#features">Features</a>
<a href="#video-demo">Video Demo</a>
<a href="user_guide.html">User Guide</a>
<a href="https://github.com/thomasnapier/LEAVES/releases">Download</a>
</nav>
</div>
<!-- Main Container -->
<div id="main-container">
<!-- Introduction and Call to Action -->
<div style="margin-left: 20%; margin-right: 20%;">
<section id="header" style="text-align: center; padding: 2rem;">
<h1>LEAVES: Large-scale Ecoacoustics Annotation and Visualization with Efficient Segmentation</h1>
<p>Streamline your ecoacoustic analysis with LEAVES, offering advanced tools for large-scale soundscape annotation and visualization. Join researchers and citizen scientists using LEAVES to analyze complex soundscapes faster and more accurately.</p>
<div style="margin-top: 1rem;">
<a href="https://github.com/thomasnapier/LEAVES/releases" class="cta-button">Download Now</a>
<a href="https://leaves-xuli.onrender.com/" class="cta-button" target="_blank">Try Demo</a>
</div>
</section>
</div>
<!-- Key Features Section with Alternating Backgrounds and Layout -->
<section id="features">
<!-- Feature 1 -->
<div class="feature-section light-bg">
<div class="feature-content">
<div class="feature-text">
<h3>Efficiency-Optimized Labelling</h3>
<p>Significantly reduces the time required to annotate large datasets, making ecoacoustic research faster and less labor-intensive.</p>
</div>
<div class="feature-image">
<img src="./src/assets/images/interface_1.png" alt="Efficiency-Optimized Labeling">
</div>
</div>
</div>
<!-- Feature 2 -->
<div class="feature-section dark-bg">
<div class="feature-content">
<div class="feature-text">
<h3>User-Friendly Interface</h3>
<p>An intuitive interface and straightforward controls make LEAVES accessible to users of all technical levels.</p>
</div>
<div class="feature-image">
<img src="./src/assets/images/interface_2.png" alt="Modular Design">
</div>
</div>
</div>
<!-- Feature 3 -->
<div class="feature-section light-bg">
<div class="feature-content reverse">
<div class="feature-text">
<h3>Modular Design</h3>
<p>LEAVES is adaptable to a range of ecoacoustic research needs with customizable settings to suit various applications and soundscape requirements.</p>
</div>
<div class="feature-image">
<img src="./src/assets/images/interface_3.png" alt="User-Friendly Interface">
</div>
</div>
</div>
<!-- Feature 4 -->
<div class="feature-section dark-bg">
<div class="feature-content reverse">
<div class="feature-text">
<h3>Support for Various Audio Formats</h3>
<p>LEAVES ensures compatibility with multiple recording setups, supporting audio formats like .WAV, .MP3, and .FLAC.</p>
</div>
</div>
</div>
</section>
<!-- Video Demonstration Section -->
<section id="video-demo" style="text-align: center; padding: 2rem;">
<h2>Video Demonstration</h2>
<video width="80%" controls>
<source src="path/to/demo.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</section>
<!-- Download and Installation Instructions -->
<section id="download" style="padding: 2rem;">
<h2>Download and Installation</h2>
<p>To install and use LEAVES, follow these steps:</p>
<ol>
<li>Clone the Repository:
<pre><code>git clone https://github.com/thomasnapier/LEAVES.git</code></pre>
</li>
<li>Install Dependencies:
<pre><code>pip install -r requirements.txt</code></pre>
</li>
<li>Run the Application:
<pre><code>python app.py</code></pre>
</li>
</ol>
<p>Once set up, LEAVES will launch a web-based interface for easy interaction.</p>
</section>
<div style="margin-top: 1rem; text-align: center;">
<a href="https://github.com/thomasnapier/LEAVES/releases" class="cta-button">Download Now</a>
<a href="https://leaves-xuli.onrender.com/" class="cta-button" target="_blank">Try Demo</a>
</div>
</div>
<!-- Full-Width Footer with Icons and Name -->
<footer style="background-color: var(--banner-background-color); color: var(--banner-text-color); text-align: center; width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 1rem 2rem; box-sizing: border-box;">
<div class="footer-icons">
<a href="https://github.com/thomasnapier/LEAVES"><img src="./src/assets/icons/github-icon.png" alt="GitHub" width="24"></a>
<a href="https://scholar.google.com.au/citations?user=0iFYOXoAAAAJ&hl=en"><img src="./src/assets/icons/scholar-icon.png" alt="Google Scholar" width="24"></a>
<a href="mailto:thomas.napier@jcu.edu.au"><img src="./src/assets/icons/email-icon.png" alt="Email" width="24"></a>
</div>
<div style="margin-left: auto;">
<p>LEAVES @ Thomas J. Napier, All rights reserved.</p>
</div>
</footer>
</body>
</html>