Basic structure of upload
This commit is contained in:
parent
bbf17dffd4
commit
2e065a5bad
13
INSTALL.md
Normal file
13
INSTALL.md
Normal file
@ -0,0 +1,13 @@
|
|||||||
|
# Install Chiro - Canto
|
||||||
|
|
||||||
|
## Setup Database
|
||||||
|
|
||||||
|
```bash
|
||||||
|
sudo mysql
|
||||||
|
```
|
||||||
|
|
||||||
|
```sql
|
||||||
|
CREATE DATABASE chirocanto;
|
||||||
|
GRANT ALL ON chirocanto.* TO 'chirocanto'@'localhost' IDENTIFIED BY 'strongpassword';
|
||||||
|
FLUSH PRIVILEGES;
|
||||||
|
```
|
||||||
23
chiro-canto.conf
Normal file
23
chiro-canto.conf
Normal file
@ -0,0 +1,23 @@
|
|||||||
|
server {
|
||||||
|
listen 80;
|
||||||
|
server_name chiro-canto;
|
||||||
|
return 302 https://chiro-canto;
|
||||||
|
}
|
||||||
|
|
||||||
|
server {
|
||||||
|
listen 443 ssl;
|
||||||
|
server_name chiro-canto;
|
||||||
|
root /var/www/chiro-canto/public;
|
||||||
|
location / {
|
||||||
|
|
||||||
|
}
|
||||||
|
ssl_certificate /etc/nginx/ssl/cert.pem;
|
||||||
|
ssl_certificate_key /etc/nginx/ssl/privkey.pem;
|
||||||
|
index index.php index.html;
|
||||||
|
location ~ \.php$ {
|
||||||
|
fastcgi_pass unix://var/run/php-fpm/www.sock;
|
||||||
|
fastcgi_index index.php;
|
||||||
|
fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
|
||||||
|
include fastcgi_params;
|
||||||
|
}
|
||||||
|
}
|
||||||
6
public/database/credentials.php
Normal file
6
public/database/credentials.php
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
<?php
|
||||||
|
$database = "chirocanto";
|
||||||
|
$host = "localhost";
|
||||||
|
$user = "chirocanto";
|
||||||
|
$password = "jhw5ky9c21";
|
||||||
|
?>
|
||||||
BIN
public/favicon.ico
Normal file
BIN
public/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
3
public/footer.php
Normal file
3
public/footer.php
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
<footer>
|
||||||
|
© Samuel ORTION | Chiro - Canto <?=2021// - date('Y'); ?>
|
||||||
|
</footer>
|
||||||
9
public/header.php
Normal file
9
public/header.php
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
<header>
|
||||||
|
<div class="container row">
|
||||||
|
<div class="container column">
|
||||||
|
<h1>Chiro - Canto</h1>
|
||||||
|
<h2>Bat sound sharing tools</h2>
|
||||||
|
</div>
|
||||||
|
<?php include("searchbar.php");?>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
25
public/index.php
Normal file
25
public/index.php
Normal file
@ -0,0 +1,25 @@
|
|||||||
|
<?php
|
||||||
|
// ini_set('display_errors', 1);
|
||||||
|
// ini_set('display_startup_errors', 1);
|
||||||
|
// error_reporting(E_ALL);
|
||||||
|
?>
|
||||||
|
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Chiro - Canto</title>
|
||||||
|
<link rel="stylesheet" type="text/css" href="styles/style.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<?php include("menu.php");?>
|
||||||
|
<?php include("header.php");?>
|
||||||
|
<section>
|
||||||
|
<h2>Last uploaded sound</h2>
|
||||||
|
</section>
|
||||||
|
<?php include("footer.php");?>
|
||||||
|
</body>
|
||||||
|
<script src="scripts/script.js"></script>
|
||||||
|
</html>
|
||||||
61
public/media/icons/arrow.svg
Normal file
61
public/media/icons/arrow.svg
Normal file
@ -0,0 +1,61 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||||
|
<svg
|
||||||
|
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||||
|
xmlns:cc="http://creativecommons.org/ns#"
|
||||||
|
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||||
|
xmlns:svg="http://www.w3.org/2000/svg"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||||
|
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||||
|
width="16"
|
||||||
|
height="16"
|
||||||
|
viewBox="0 0 4.2333333 4.2333333"
|
||||||
|
version="1.1"
|
||||||
|
id="svg8"
|
||||||
|
inkscape:version="1.0.2 (e86c870879, 2021-01-15)"
|
||||||
|
sodipodi:docname="arrow.svg">
|
||||||
|
<defs
|
||||||
|
id="defs2" />
|
||||||
|
<sodipodi:namedview
|
||||||
|
id="base"
|
||||||
|
pagecolor="#ffffff"
|
||||||
|
bordercolor="#666666"
|
||||||
|
borderopacity="1.0"
|
||||||
|
inkscape:pageopacity="0.0"
|
||||||
|
inkscape:pageshadow="2"
|
||||||
|
inkscape:zoom="17.599258"
|
||||||
|
inkscape:cx="-3.1566717"
|
||||||
|
inkscape:cy="4.519511"
|
||||||
|
inkscape:document-units="mm"
|
||||||
|
inkscape:current-layer="layer1"
|
||||||
|
inkscape:document-rotation="0"
|
||||||
|
showgrid="false"
|
||||||
|
inkscape:window-width="1920"
|
||||||
|
inkscape:window-height="1011"
|
||||||
|
inkscape:window-x="0"
|
||||||
|
inkscape:window-y="32"
|
||||||
|
inkscape:window-maximized="1"
|
||||||
|
units="px" />
|
||||||
|
<metadata
|
||||||
|
id="metadata5">
|
||||||
|
<rdf:RDF>
|
||||||
|
<cc:Work
|
||||||
|
rdf:about="">
|
||||||
|
<dc:format>image/svg+xml</dc:format>
|
||||||
|
<dc:type
|
||||||
|
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||||
|
<dc:title></dc:title>
|
||||||
|
</cc:Work>
|
||||||
|
</rdf:RDF>
|
||||||
|
</metadata>
|
||||||
|
<g
|
||||||
|
inkscape:label="Layer 1"
|
||||||
|
inkscape:groupmode="layer"
|
||||||
|
id="layer1">
|
||||||
|
<path
|
||||||
|
style="fill:none;stroke:#000000;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||||
|
d="M 1.2945826,1.0266922 2.908231,2.1787997 1.2963016,3.4022286"
|
||||||
|
id="path18"
|
||||||
|
sodipodi:nodetypes="ccc" />
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.8 KiB |
BIN
public/media/pictures/chiro.jpg
Normal file
BIN
public/media/pictures/chiro.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
95
public/media/pictures/chiro.svg
Normal file
95
public/media/pictures/chiro.svg
Normal file
@ -0,0 +1,95 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||||
|
<svg
|
||||||
|
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||||
|
xmlns:cc="http://creativecommons.org/ns#"
|
||||||
|
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||||
|
xmlns:svg="http://www.w3.org/2000/svg"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||||
|
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||||
|
version="1.1"
|
||||||
|
id="svg899"
|
||||||
|
width="750"
|
||||||
|
height="750"
|
||||||
|
viewBox="0 0 750 750"
|
||||||
|
sodipodi:docname="chiro.svg"
|
||||||
|
inkscape:export-filename="/var/www/chiro-canto/public/media/pictures/favicon.png"
|
||||||
|
inkscape:export-xdpi="4.0960002"
|
||||||
|
inkscape:export-ydpi="4.0960002"
|
||||||
|
inkscape:version="1.0.2 (e86c870879, 2021-01-15)">
|
||||||
|
<metadata
|
||||||
|
id="metadata905">
|
||||||
|
<rdf:RDF>
|
||||||
|
<cc:Work
|
||||||
|
rdf:about="">
|
||||||
|
<dc:format>image/svg+xml</dc:format>
|
||||||
|
<dc:type
|
||||||
|
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||||
|
</cc:Work>
|
||||||
|
</rdf:RDF>
|
||||||
|
</metadata>
|
||||||
|
<defs
|
||||||
|
id="defs903" />
|
||||||
|
<sodipodi:namedview
|
||||||
|
pagecolor="#ffffff"
|
||||||
|
bordercolor="#666666"
|
||||||
|
borderopacity="1"
|
||||||
|
objecttolerance="10"
|
||||||
|
gridtolerance="10"
|
||||||
|
guidetolerance="10"
|
||||||
|
inkscape:pageopacity="0"
|
||||||
|
inkscape:pageshadow="2"
|
||||||
|
inkscape:window-width="960"
|
||||||
|
inkscape:window-height="1011"
|
||||||
|
id="namedview901"
|
||||||
|
showgrid="false"
|
||||||
|
inkscape:zoom="0.39372674"
|
||||||
|
inkscape:cx="123.00961"
|
||||||
|
inkscape:cy="873.89687"
|
||||||
|
inkscape:window-x="0"
|
||||||
|
inkscape:window-y="32"
|
||||||
|
inkscape:window-maximized="0"
|
||||||
|
inkscape:current-layer="g907"
|
||||||
|
inkscape:document-rotation="0" />
|
||||||
|
<g
|
||||||
|
inkscape:groupmode="layer"
|
||||||
|
inkscape:label="Image"
|
||||||
|
id="g907">
|
||||||
|
<g
|
||||||
|
id="g1498"
|
||||||
|
style="stroke-width:24.05449623;stroke-miterlimit:4;stroke-dasharray:none"
|
||||||
|
transform="matrix(0.83144539,0,0,0.83144539,56.198257,71.118882)">
|
||||||
|
<path
|
||||||
|
style="fill:none;stroke:#000000;stroke-width:24.05449623;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||||
|
d="M 346.24416,419.63314 Z"
|
||||||
|
id="path1474" />
|
||||||
|
<g
|
||||||
|
id="g1490"
|
||||||
|
style="stroke-width:24.05449623;stroke-miterlimit:4;stroke-dasharray:none">
|
||||||
|
<g
|
||||||
|
id="g1480"
|
||||||
|
style="stroke-width:24.05449623;stroke-miterlimit:4;stroke-dasharray:none">
|
||||||
|
<path
|
||||||
|
style="fill:none;stroke:#000000;stroke-width:24.05449623;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||||
|
d="m 159.63295,267.28786 0.77508,17.69332 c 0,0 -131.17557,86.33815 -137.534827,197.91517 0,0 30.756366,-16.45937 61.444714,-5.33114 0,0 50.106293,-79.56051 149.528043,-53.35992 0,0 58.55793,-86.91501 112.3982,-4.57215"
|
||||||
|
id="path1472" />
|
||||||
|
<path
|
||||||
|
style="fill:none;stroke:#000000;stroke-width:24.05449623;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||||
|
d="m 346.24416,419.63314 c 3.49571,6.13676 6.99143,12.27352 10.48714,18.41028 l 6.71423,2.44884 12.98193,14.05281 10.86304,4.71803 20.92276,-36.83238 h 7.90968 v 8.42161 l 25.089,-26.90816 c 0,0 22.96731,-68.35117 87.18176,8.70945 37.08276,-4.22222 70.86407,-15.31273 141.56565,50.40489 0,0 25.81092,-12.33925 52.54736,7.71285"
|
||||||
|
id="path1476"
|
||||||
|
sodipodi:nodetypes="ccccccccccc" />
|
||||||
|
</g>
|
||||||
|
<path
|
||||||
|
style="fill:none;stroke:#000000;stroke-width:24.05449623;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||||
|
d="m 722.50671,470.77136 c 0,0 32.53113,-79.47854 -133.16812,-211.57159 l -0.0161,-20.27278 -3.34473,17.52649 -1.38182,3.77815 c 0,0 -112.80156,33.46683 -135.59717,17.05829 l -21.12495,-25.79576 c 0,0 2.27859,-34.05125 -4.17896,-28.16934 -6.45755,5.88191 -20.048,13.87989 -20.048,13.87989 0,0 -24.55364,-6.98207 -45.83841,3.94413 -21.28477,10.9262 -11.57512,-15.42279 -16.03801,-4.21283 -4.46288,11.20996 1.68677,33.55364 1.68677,33.55364 0,0 15.94711,-8.29279 0,0 -15.9471,8.2928 -22.46537,19.9203 -22.46537,19.9203 0,0 -141.07804,5.31898 -151.21847,-8.90156 -10.14042,-14.22053 -10.14042,-14.22053 -10.14042,-14.22053"
|
||||||
|
id="path1484" />
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
<circle
|
||||||
|
style="fill:none;stroke:#000000;stroke-width:20;stroke-miterlimit:4;stroke-dasharray:none"
|
||||||
|
id="path1500"
|
||||||
|
cx="377.18402"
|
||||||
|
cy="377.35416"
|
||||||
|
r="367.11084" />
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 4.4 KiB |
BIN
public/media/pictures/favicon.ico
Normal file
BIN
public/media/pictures/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
BIN
public/media/pictures/favicon.png
Normal file
BIN
public/media/pictures/favicon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 888 B |
22
public/menu.php
Normal file
22
public/menu.php
Normal file
@ -0,0 +1,22 @@
|
|||||||
|
<nav>
|
||||||
|
<ul>
|
||||||
|
<a href="/about">
|
||||||
|
<li>about</li>
|
||||||
|
</a>
|
||||||
|
<a href="/explore">
|
||||||
|
<li>explore</li>
|
||||||
|
</a>
|
||||||
|
<a href="/upload">
|
||||||
|
<li>upload</li>
|
||||||
|
</a>
|
||||||
|
<a href="/forum">
|
||||||
|
<li>forum</li>
|
||||||
|
</a>
|
||||||
|
<a href="/mysteries">
|
||||||
|
<li>mysteries</li>
|
||||||
|
</a>
|
||||||
|
<a href="/articles">
|
||||||
|
<li>articles</li>
|
||||||
|
</a>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
2
public/scripts/jquery/script.js
vendored
Normal file
2
public/scripts/jquery/script.js
vendored
Normal file
File diff suppressed because one or more lines are too long
52
public/scripts/script.js
Normal file
52
public/scripts/script.js
Normal file
@ -0,0 +1,52 @@
|
|||||||
|
/* SHOW ELEMENT AFTER PAGE IS SCROLLED 100px */
|
||||||
|
var win = window,
|
||||||
|
docEl = document.documentElement,
|
||||||
|
$nav = document.getElementsByTagName('nav')[0];
|
||||||
|
|
||||||
|
win.onscroll = function() {
|
||||||
|
var sTop = (this.pageYOffset || docEl.scrollTop) - (docEl.clientTop || 0);
|
||||||
|
if (sTop > 100) {
|
||||||
|
$nav.classList.add("dark-theme");
|
||||||
|
} else {
|
||||||
|
$nav.classList.remove("dark-theme");
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Link preview in nav bar
|
||||||
|
*/
|
||||||
|
nav = document.getElementsByTagName('nav')[0];
|
||||||
|
navItems = nav.children[0].children;
|
||||||
|
for (navItem of navItems) {
|
||||||
|
console.log(navItem);
|
||||||
|
navItem.addEventListener('mouseover', function() {
|
||||||
|
displayPreview(this);
|
||||||
|
});
|
||||||
|
navItem.addEventListener('mouseleave', function() {
|
||||||
|
hidePreview();
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
let iframe = document.createElement('iframe');
|
||||||
|
iframe.style.display = "none";
|
||||||
|
nav.appendChild(iframe);
|
||||||
|
|
||||||
|
function displayPreview(navItem) {
|
||||||
|
let url = navItem.href;
|
||||||
|
// console.log(url);
|
||||||
|
iframe.src = url;
|
||||||
|
iframe.id = "previewFrame";
|
||||||
|
iframe.style.width = "600px";
|
||||||
|
iframe.style.height = "600px";
|
||||||
|
iframe.style.display = "block";
|
||||||
|
iframe.style.position = "fixed";
|
||||||
|
var x = event.clientX;
|
||||||
|
// var y = event.clientY;
|
||||||
|
iframe.style.top = 5 + 'em';
|
||||||
|
iframe.style.left = (x - 50) + 'px';
|
||||||
|
}
|
||||||
|
|
||||||
|
function hidePreview() {
|
||||||
|
iframe.style.display = "none";
|
||||||
|
}
|
||||||
4
public/searchbar.php
Normal file
4
public/searchbar.php
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
<form id="searchbar" action="/search">
|
||||||
|
<input type="text" placeholder="Search recordings.." required>
|
||||||
|
<input type="submit" value="Search">
|
||||||
|
</form>
|
||||||
238
public/styles/style.css
Normal file
238
public/styles/style.css
Normal file
@ -0,0 +1,238 @@
|
|||||||
|
* {
|
||||||
|
align-self: baseline;
|
||||||
|
}
|
||||||
|
|
||||||
|
body{
|
||||||
|
margin: 0;
|
||||||
|
background-color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
header {
|
||||||
|
text-align: right;
|
||||||
|
padding: 0;
|
||||||
|
margin-top: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
header .container {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
header h1 {
|
||||||
|
font-size: 4em;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
section{
|
||||||
|
padding: 1em;
|
||||||
|
min-height: 100vh;
|
||||||
|
width: 50vw;
|
||||||
|
text-align: left;
|
||||||
|
margin: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
article {
|
||||||
|
width: 50vw;
|
||||||
|
text-align: left;
|
||||||
|
margin: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
article h1 {
|
||||||
|
font-size: 5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer {
|
||||||
|
color: white;
|
||||||
|
text-align: center;
|
||||||
|
background-color: rgba(0,0,0, 0.8);
|
||||||
|
padding: 0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer a {
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
footer img {
|
||||||
|
height: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
label {
|
||||||
|
width: 40em;
|
||||||
|
display: inline;
|
||||||
|
}
|
||||||
|
label span.info {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
label:hover span.info {
|
||||||
|
display: inline-block;
|
||||||
|
position: relative;
|
||||||
|
background: yellow;
|
||||||
|
padding: 0.5em;
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
input {
|
||||||
|
margin: 0.1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Style inputs with type="text", select elements and textareas */
|
||||||
|
input[type=text], input[type=email], input[type=url], select, textarea {
|
||||||
|
width: 100%; /* Full width */
|
||||||
|
padding: 12px; /* Some padding */
|
||||||
|
border: 1px solid #ccc; /* Gray border */
|
||||||
|
border-radius: 4px; /* Rounded borders */
|
||||||
|
box-sizing: border-box; /* Make sure that padding and width stays in place */
|
||||||
|
margin-top: 6px; /* Add a top margin */
|
||||||
|
margin-bottom: 16px; /* Bottom margin */
|
||||||
|
resize: vertical /* Allow the user to vertically resize the textarea (not horizontally) */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Style the submit button with a specific background color etc */
|
||||||
|
input[type=submit] {
|
||||||
|
background-color: #4CAF50;
|
||||||
|
color: white;
|
||||||
|
padding: 12px 20px;
|
||||||
|
border: none;
|
||||||
|
border-radius: 4px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type=reset] {
|
||||||
|
background-color: #af4c4c;
|
||||||
|
color: white;
|
||||||
|
padding: 12px 20px;
|
||||||
|
border: none;
|
||||||
|
border-radius: 4px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* When moving the mouse over the submit button, add a darker green color */
|
||||||
|
input[type=submit]:hover {
|
||||||
|
background-color: #45a049;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* When moving the mouse over the reset button, add a darker red color */
|
||||||
|
input[type=reset]:hover {
|
||||||
|
background-color: #923737;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* Add a background color and some padding around the form */
|
||||||
|
.container {
|
||||||
|
border-radius: 5px;
|
||||||
|
background-color: #f2f2f2;
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav {
|
||||||
|
border-bottom: 1px solid black;
|
||||||
|
position: flex;
|
||||||
|
display: block;
|
||||||
|
width: 100vw;
|
||||||
|
background-color: white;
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav.dark-theme {
|
||||||
|
background: black;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav.dark-theme ul li {
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav ul {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav ul a {
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav ul li {
|
||||||
|
list-style: none;
|
||||||
|
color: black;
|
||||||
|
margin: 0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
iframe::parent {
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
iframe {
|
||||||
|
width: 100%;
|
||||||
|
height: 750px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#previewFrame {
|
||||||
|
width: 300px;
|
||||||
|
height: 200px;
|
||||||
|
resize: both;
|
||||||
|
zoom: 0.2;
|
||||||
|
-moz-transform: scale(0.5);
|
||||||
|
-moz-transform-origin: 0 0;
|
||||||
|
-o-transform: scale(0.5);
|
||||||
|
-o-transform-origin: 0 0;
|
||||||
|
-webkit-transform: scale(0.5);
|
||||||
|
-webkit-transform-origin: 0 0;
|
||||||
|
}
|
||||||
|
iframe html body {
|
||||||
|
font-size: 0.1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
display: flex;
|
||||||
|
padding-top: 0;
|
||||||
|
padding-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container.row {
|
||||||
|
flex-direction: row;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container.column {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
h3, p{
|
||||||
|
padding: 1em;
|
||||||
|
width: 15em;
|
||||||
|
}
|
||||||
|
|
||||||
|
p.large {
|
||||||
|
width: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
#searchbar {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-self: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul.breadcrumb {
|
||||||
|
display: flex;
|
||||||
|
flex-basis: row;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul.breadcrumb li {
|
||||||
|
list-style: url("/media/icons/arrow.svg");
|
||||||
|
margin-left: 2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul.breadcrumb li.active {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.coordinates {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.coordinates input[type="text"] {
|
||||||
|
width: 25em;
|
||||||
|
}
|
||||||
0
public/upload/characteristics.php
Normal file
0
public/upload/characteristics.php
Normal file
56
public/upload/index.php
Normal file
56
public/upload/index.php
Normal file
@ -0,0 +1,56 @@
|
|||||||
|
<?php
|
||||||
|
ini_set('display_errors', 1);
|
||||||
|
ini_set('display_startup_errors', 1);
|
||||||
|
error_reporting(E_ALL);
|
||||||
|
session_start();
|
||||||
|
|
||||||
|
$root = realpath($_SERVER["DOCUMENT_ROOT"]);
|
||||||
|
?>
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Upload | Chiro - Canto</title>
|
||||||
|
<link rel="stylesheet" type="text/css" href="/styles/style.css">
|
||||||
|
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
|
||||||
|
integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
|
||||||
|
crossorigin=""/>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<?php include("$root/menu.php");?>
|
||||||
|
<?php include("$root/header.php");?>
|
||||||
|
<section>
|
||||||
|
<h2>Upload Your Recording</h2>
|
||||||
|
<?php
|
||||||
|
echo $_SESSION['error_msg'];
|
||||||
|
if (isset($_SESSION['error_msg']))
|
||||||
|
{
|
||||||
|
?>
|
||||||
|
<div class="error">
|
||||||
|
<?=$_SESSION['error_msg']?>
|
||||||
|
</div>
|
||||||
|
<?php
|
||||||
|
}
|
||||||
|
if (isset($_GET['step']))
|
||||||
|
{
|
||||||
|
if ($_GET['step'] == 'location') {
|
||||||
|
include("location.php");
|
||||||
|
} else if ($_GET['step'] == 'metadata') {
|
||||||
|
include("metadata.php");
|
||||||
|
} else if ($_GET['step'] == 'verify') {
|
||||||
|
include("verify.php");
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
include("location.php");
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
include("location.php");
|
||||||
|
}
|
||||||
|
?>
|
||||||
|
</section>
|
||||||
|
<?php include("$root/footer.php");?>
|
||||||
|
</body>
|
||||||
|
<script type='text/javascript' src='/scripts/script.js'></script>
|
||||||
|
</html>
|
||||||
20
public/upload/location.php
Normal file
20
public/upload/location.php
Normal file
@ -0,0 +1,20 @@
|
|||||||
|
<ul class="breadcrumb">
|
||||||
|
<li class="active">Location</li>
|
||||||
|
<li>Metadata</li>
|
||||||
|
<li>Verify</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<div id="map" style="height: 440px; border: 1px solid #AAA;"></div>
|
||||||
|
|
||||||
|
<form action="submitlocation.php" method="post">
|
||||||
|
<label for="latlng">Coordinates</label>
|
||||||
|
<div class="coordinates">
|
||||||
|
<input type="text" id="latlng" name="latlng">
|
||||||
|
<input type="submit" value="Submit">
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
<script type='text/javascript' src='/scripts/jquery/script.js'></script>
|
||||||
|
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
|
||||||
|
integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
|
||||||
|
crossorigin=""></script>
|
||||||
|
<script src="scripts/map.js"></script>
|
||||||
54
public/upload/metadata.php
Normal file
54
public/upload/metadata.php
Normal file
File diff suppressed because one or more lines are too long
28
public/upload/scripts/map.js
Normal file
28
public/upload/scripts/map.js
Normal file
@ -0,0 +1,28 @@
|
|||||||
|
var mymap = L.map('map').setView([51.505, -0.09], 13);
|
||||||
|
L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
|
||||||
|
attribution: 'Map data © <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
|
||||||
|
maxZoom: 18,
|
||||||
|
id: 'mapbox/streets-v11',
|
||||||
|
tileSize: 512,
|
||||||
|
zoomOffset: -1,
|
||||||
|
accessToken: 'pk.eyJ1IjoidW5jbGVzYW11bHVzIiwiYSI6ImNrbXQwNDl5MTBtc2gybm82b3c0M3VoNncifQ.qUqAuCuMDF38NcyrAC1RJQ'
|
||||||
|
}).addTo(mymap);
|
||||||
|
|
||||||
|
var marker = L.marker([0, 0], draggable=true).addTo(mymap);
|
||||||
|
|
||||||
|
var LatLng = marker.getLatLng();
|
||||||
|
|
||||||
|
let coordinates_input = document.getElementById('latlng');
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
function onMapClick(e) {
|
||||||
|
marker.setLatLng(e.latlng);
|
||||||
|
LatLng = marker.getLatLng();
|
||||||
|
// console.log(LatLng);
|
||||||
|
lat = LatLng['lat'];
|
||||||
|
lng = LatLng['lng'];
|
||||||
|
coordinates_input.value = lat + ', ' + lng;
|
||||||
|
}
|
||||||
|
|
||||||
|
mymap.on('click', onMapClick);
|
||||||
15
public/upload/submitlocation.php
Normal file
15
public/upload/submitlocation.php
Normal file
@ -0,0 +1,15 @@
|
|||||||
|
<?php
|
||||||
|
session_start();
|
||||||
|
$_SESSION['error_msg'] = "";
|
||||||
|
|
||||||
|
if (isset($_POST['latlng'])) {
|
||||||
|
$_SESSION['observation']['latlng'] = $_POST['latlng'];
|
||||||
|
} else {
|
||||||
|
$_SESSION['error_msg'].= "Incorrect coordinates, please try again.";
|
||||||
|
}
|
||||||
|
|
||||||
|
if ($_SESSION['error_msg'] == "") {
|
||||||
|
header('Location: '.'index.php?step=metadata');
|
||||||
|
} else {
|
||||||
|
header('Location: '.'index.php?step=location');
|
||||||
|
}
|
||||||
113
public/upload/submitmetadata.php
Normal file
113
public/upload/submitmetadata.php
Normal file
@ -0,0 +1,113 @@
|
|||||||
|
<?php
|
||||||
|
session_start();
|
||||||
|
ini_set('display_errors', 1);
|
||||||
|
ini_set('display_startup_errors', 1);
|
||||||
|
error_reporting(E_ALL);
|
||||||
|
$root = realpath($_SERVER["DOCUMENT_ROOT"]);
|
||||||
|
$target_dir = root."/storage/records";
|
||||||
|
$fileName = $_FILES['file']['name'];
|
||||||
|
$target_file = $target_dir.basename($_FILES['file']['name']);
|
||||||
|
$uploadOk = 1;
|
||||||
|
$fileSize = $_FILES['file']['size'];
|
||||||
|
$fileExtension = strtolower(end(explode('.', $fileName)));
|
||||||
|
$_SESSION['error_msg'] = "Form not submitted.\n";
|
||||||
|
|
||||||
|
if (isset($_POST['submit']))
|
||||||
|
{
|
||||||
|
// /!\ Need to check if it is .wav.
|
||||||
|
$file_extension_allowed = ['wav'];
|
||||||
|
if (! in_array($fileExtension, $file_extension_allowed))
|
||||||
|
{
|
||||||
|
$_SESSION['error_msg'] .= "This file extension is not allowed; please upload a WAV file.\n";
|
||||||
|
}
|
||||||
|
if ($fileSize > 10000000)
|
||||||
|
{
|
||||||
|
$_SESSION['error_msg'] .= "The file size must be below 10MB. \n";
|
||||||
|
}
|
||||||
|
if (move_uploaded_file($_FILES['file']['tmp_name'], $target_file))
|
||||||
|
{
|
||||||
|
echo "The file ". htmlspecialchars(basename($_FILES['file']['name']))." has been uploaded.";
|
||||||
|
} else {
|
||||||
|
echo "Sorry, there was an error uploading your file";
|
||||||
|
}
|
||||||
|
$_SESSION['observation']['file'] = basename($_FILES['file']['name']);
|
||||||
|
|
||||||
|
$_SESSION['error_msg'] = "";
|
||||||
|
|
||||||
|
if (isset($_POST['species']))
|
||||||
|
{
|
||||||
|
$_SESSION['observation']['species'] = $_POST['species'];
|
||||||
|
} else
|
||||||
|
{
|
||||||
|
$_SESSION['error_msg'].= "Error, incorrect species name.\n";
|
||||||
|
}
|
||||||
|
if (isset($_POST['subspecies']))
|
||||||
|
{
|
||||||
|
$_SESSION['observation']['subspecies'] = $_POST['subspecies'];
|
||||||
|
} else
|
||||||
|
{
|
||||||
|
$_SESSION['observation']['subspecies'] = "";
|
||||||
|
}
|
||||||
|
if (isset($_POST['recording-license']))
|
||||||
|
{
|
||||||
|
$_SESSION['observation']['license'] = $_POST['recording-license'];
|
||||||
|
} else
|
||||||
|
{
|
||||||
|
$_SESSION['error_msg'] .= "Incorrect license\n";
|
||||||
|
}
|
||||||
|
if (isset($_POST['name']))
|
||||||
|
{
|
||||||
|
$_SESSION['observation']['name'] = $_POST['name'];
|
||||||
|
} else {
|
||||||
|
$_SESSION['error_msg'] .= "Incorrect Recordist Name.\n";
|
||||||
|
}
|
||||||
|
if (isset($_POST['loc-country']))
|
||||||
|
{
|
||||||
|
$_SESSION['observation']['country'] = $_POST['loc-country'];
|
||||||
|
} else
|
||||||
|
{
|
||||||
|
$_SESSION['error_msg'] .= "Incorrect Country. \n";
|
||||||
|
}
|
||||||
|
if (isset($_POST['recording-date']))
|
||||||
|
{
|
||||||
|
$_SESSION['observation']['date'] = $_POST['recording-date'];
|
||||||
|
} else
|
||||||
|
{
|
||||||
|
$_SESSION['error_msg'] .= "Incorrect date. \n";
|
||||||
|
}
|
||||||
|
if (isset($_POST['recording-time']))
|
||||||
|
{
|
||||||
|
$_SESSION['observation']['time'] = $_POST['recording-time'];
|
||||||
|
} else
|
||||||
|
{
|
||||||
|
$_SESSION['error_msg'] .= "Incorrect time. \n";
|
||||||
|
}
|
||||||
|
if (isset($_POST['sound-type-option']))
|
||||||
|
{
|
||||||
|
$_SESSION['observation']['type'] = $_POST['sound-type-option'];
|
||||||
|
} else
|
||||||
|
{
|
||||||
|
$_SESSION['error_msg'] .= "Incorrect sound type. \n";
|
||||||
|
}
|
||||||
|
if (isset($_POST['quality']))
|
||||||
|
{
|
||||||
|
$_SESSION['observation']['quality'] = $_POST['quality'];
|
||||||
|
} else
|
||||||
|
{
|
||||||
|
$_SESSION['error_msg'] .= "Incorrect quality value.\n";
|
||||||
|
}
|
||||||
|
if (isset($_POST['remarks']))
|
||||||
|
{
|
||||||
|
$_SESSION['observation']['remarks'] = $_POST['remarks'];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
if ($_SESSION['error_msg'] == "")
|
||||||
|
{
|
||||||
|
header('Location: '.'index.php?step=verify');
|
||||||
|
} else{
|
||||||
|
$_SESSION['error_msg'] .= "Please try again.\n";
|
||||||
|
header('Location: '.'index.php?step=metadata');
|
||||||
|
}
|
||||||
|
|
||||||
25
public/upload/submitobservation.php
Normal file
25
public/upload/submitobservation.php
Normal file
@ -0,0 +1,25 @@
|
|||||||
|
<?php
|
||||||
|
session_start();
|
||||||
|
$root = realpath($_SERVER["DOCUMENT_ROOT"]);
|
||||||
|
require($root."/database/credentials.php");
|
||||||
|
|
||||||
|
ini_set('display_errors', 1);
|
||||||
|
ini_set('display_startup_errors', 1);
|
||||||
|
error_reporting(E_ALL);
|
||||||
|
|
||||||
|
// Connect the database
|
||||||
|
try{
|
||||||
|
$db = new PDO("mysql:host=$host;dbname=$database;charset=utf8",
|
||||||
|
$user,
|
||||||
|
$password,
|
||||||
|
array(PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION
|
||||||
|
));
|
||||||
|
}catch (Exception $e){
|
||||||
|
die("Error : ".$e->getMessage());
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Create Table if not exists */
|
||||||
|
$req = $db->prepare('CREATE TABLE IF NOT EXISTS golden_book ( `id` INT NOT NULL AUTO_INCREMENT , `firstname` VARCHAR(25) NOT NULL , `lastname` VARCHAR(25) NOT NULL , `email` VARCHAR(125) NOT NULL, `date` DATE NOT NULL DEFAULT CURRENT_TIMESTAMP , `message` TEXT NOT NULL , `website` VARCHAR(125) NOT NULL , PRIMARY KEY (`id`)) ENGINE = InnoDB;');
|
||||||
|
$req->execute();
|
||||||
|
|
||||||
|
?>
|
||||||
58
public/upload/verify.php
Normal file
58
public/upload/verify.php
Normal file
@ -0,0 +1,58 @@
|
|||||||
|
<ul class="breadcrumb">
|
||||||
|
<li>Location</li>
|
||||||
|
<li>Metadata</li>
|
||||||
|
<li class="active">Verify</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<h2>Recording data</h2>
|
||||||
|
|
||||||
|
<table class="key-value">
|
||||||
|
<tbody><tr>
|
||||||
|
<td>File</td>
|
||||||
|
<td><?=$_SESSION['observation']['file']?></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Species</td>
|
||||||
|
<td><!--<span class="common-name">European Robin</span>--> <span class="sci-name">(<?=$_SESSION['observation']['species']?>)</span> </td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Subspecies</td>
|
||||||
|
<td><?=$_SESSION['observation']['subspecies']?></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>License</td>
|
||||||
|
<td><a href="//creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">Creative Commons Attribution-NonCommercial-ShareAlike 4.0</a></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Recordist</td>
|
||||||
|
<td><?=$_SESSION['observation']['name']?></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Date</td>
|
||||||
|
<td><?=$_SESSION['observation']['date']?></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Time</td>
|
||||||
|
<td><?=$_SESSION['observation']['time']?></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<!-- <td>Elevation</td>
|
||||||
|
<td>50 meters</td>
|
||||||
|
-->
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<!-- <td>Background species</td>
|
||||||
|
<td><ul><li><span class="common-name">Common Chaffinch</span> <span class="sci-name">(Fringilla coelebs)</span></li></ul></td> -->
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<tr>
|
||||||
|
<td>Quality</td>
|
||||||
|
<td><?$_SESSION['observation']['quality']?></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Remarks</td>
|
||||||
|
<td><?=$_SESSION['observation']['remarks'] == "" ? '<span class="unspecified">None given</span>' : $_SESSION['observation']['remarks'] ?></td>
|
||||||
|
</tr>
|
||||||
|
</tbody></table>
|
||||||
|
<h2>Location</h2>
|
||||||
|
|
||||||
Loading…
Reference in New Issue
Block a user