diff --git a/webinterface/WonderType-Regular.otf b/webinterface/WonderType-Regular.otf new file mode 100644 index 0000000..de1e7af Binary files /dev/null and b/webinterface/WonderType-Regular.otf differ diff --git a/webinterface/index.php b/webinterface/index.php new file mode 100644 index 0000000..692d9f6 --- /dev/null +++ b/webinterface/index.php @@ -0,0 +1,58 @@ + + + + + + + Upload to the archive + + + + + +
+ +
+

Signal lost archive unzipped

+

some info on what this even is

+
+
+ + Upload a file instead +
+
+ +
+ +
+ +
+ + + +
+
+ + + + + + + + \ No newline at end of file diff --git a/webinterface/script.js b/webinterface/script.js new file mode 100644 index 0000000..111ec04 --- /dev/null +++ b/webinterface/script.js @@ -0,0 +1,84 @@ +var micEl; +let chunks = []; + +var mediaRecorder = false; + +var sendFile = function (blob) { + const formData = new FormData(); + + formData.append('userfile', blob, new Date() + ".webm"); + + return fetch('upload.php', { + method: 'POST', + body: formData + }); +} + +var initRecording = function (autostart) { + if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) { + console.info("getUserMedia supported."); + + navigator.mediaDevices + .getUserMedia({ audio: true }) + .then((stream) => { + mediaRecorder = new MediaRecorder(stream); + console.log(mediaRecorder.mimeType); + console.log("should i autostarty", autostart); + + mediaRecorder.ondataavailable = (e) => { + chunks.push(e.data); + }; + + mediaRecorder.onstop = (e) => { + console.log("got a call to stop"); + var audioEl = document.querySelectorAll("audio")[0]; + const blob = new Blob(chunks, { + type: mediaRecorder.mimeType + }); + console.log(blob); + chunks = []; + const audioURL = window.URL.createObjectURL(blob); + audioEl.src = audioURL; + console.log(audioEl.src); + sendFile(blob); + } + + if (autostart) { + mediaRecorder.start(); + } + }) + } else { + console.error("not supported"); + } +} + +var startRecording = function (e) { + + if (!mediaRecorder) { + console.log("did not initalise"); + initRecording(true); + e.currentTarget.setAttribute("active", true); + } else { + + if (mediaRecorder.state === "recording") { + console.log("recording was already happening") + mediaRecorder.stop(); + e.currentTarget.setAttribute("active", false); + } else { + console.log("not yet recording, about tos tart"); + mediaRecorder.start(); + e.currentTarget.setAttribute("active", true); + } + } + + +} +window.onload = function () { + console.log("load app"); + + micEl = document.querySelector('.fn-start-recording'); + + micEl.addEventListener('click', startRecording); + + +} \ No newline at end of file diff --git a/webinterface/style.css b/webinterface/style.css new file mode 100644 index 0000000..74fac66 --- /dev/null +++ b/webinterface/style.css @@ -0,0 +1,143 @@ +:root { + --primary: #c5ff27; + --black: black; + --white: white; + --gutter-sm: .5rem; + --gutter-md: 1rem; + --gutter-lg: 3rem; + + --font-size-base: 1rem; +} + +@font-face { + font-family: "WonderType"; + src: + local("WonderType"), + url("WonderType-Regular.otf") format("opentype"), + url("trickster-outline.woff") format("woff"); + } + +html, +body { + width: 100%; + height: 100%; + margin: 0 0; + padding: 0 0; + +} + +* { + box-sizing: border-box; +} + +body { + background-color: var(--primary); + font-family: "WonderType"; +} + +.container { + max-width: 900px; + margin: 0 auto; + padding: var(--gutter-md); + text-align: center; +} + +button, +.button { + width: 100%; + display: inline-flex; + align-items: center; + justify-content: center; + text-transform: uppercase; + background-color: var(--black); + border: none; + padding: var(--gutter-sm) var(--gutter-md); + color: var(--white); + font-weight: bolder; + font-size: var(--font-size-base); + transition: .2s all ease-in-out; + font-family: "WonderType"; +} + +audio { + display: none; +} + +.button__wrapper { + display: flex; + justify-content: flex-center; + flex-direction: column; + width: 100%; + padding: var(--gutter-lg); + gap: var(--gutter-md); + text-align: center; +} + +.button__wrapper a { + color: var(--black); +} + +.button--record { + border-radius: 100%; + flex-grow: 1; + max-width: 500px; + max-height: 500px; + aspect-ratio: 1 / 1; + margin: 0 auto; + position: relative; + background-color: transparent; +} + +@keyframes recording { + from { + transform: rotate(0deg); + } + + to { + transform: rotate(360deg); + } +} + +.button--record:before { + content: ''; + width: 100%; + height: 100%; + position: absolute; + top: 0; + left: 0; + background-color: var(--black); + border-radius: 100%; + z-index: -1; + transform: scale(1); + transition: transform .1s linear; +} + + +.button--record[active="true"]:before { + transform: scale(0); +} + + +.button--record[active="true"] { + color: var(--black); + animation-delay: 1s; + border: none; + border: 1rem dashed black; + border-right-color: transparent; + border-left-color: transparent; + background-color: transparent; + animation: 2s linear recording infinite; +} + +.button--record[active="true"] .button__label { + animation: 2s linear recording infinite; + animation-direction: reverse; +} + +.recorder { + display: flex; + flex-direction: column; + height: 100%; + justify-content: space-between; + align-items: center; +} \ No newline at end of file diff --git a/webinterface/upload.php b/webinterface/upload.php new file mode 100644 index 0000000..9327530 --- /dev/null +++ b/webinterface/upload.php @@ -0,0 +1,15 @@ + + \ No newline at end of file diff --git a/webinterface/uploads/Mon Dec 04 2023 14:28:46 GMT+0100 (Central European Standard Time).webm b/webinterface/uploads/Mon Dec 04 2023 14:28:46 GMT+0100 (Central European Standard Time).webm new file mode 100644 index 0000000..40fddb7 Binary files /dev/null and b/webinterface/uploads/Mon Dec 04 2023 14:28:46 GMT+0100 (Central European Standard Time).webm differ