From 985146c5a76d3d10610cbc6eef7556cd038fbb68 Mon Sep 17 00:00:00 2001 From: Stephan Wendel <me@stephanwe.de> Date: Wed, 27 Oct 2021 18:33:11 +0200 Subject: [PATCH] Fixed .gitignore * Deleted Line 'ustreamer-www' in gitignore Signed-off-by: Stephan Wendel <me@stephanwe.de> --- .gitignore | 3 -- ustreamer-www/index.html | 37 +++++++++++++++++ ustreamer-www/script.js | 8 ++++ ustreamer-www/style.css | 85 ++++++++++++++++++++++++++++++++++++++++ 4 files changed, 130 insertions(+), 3 deletions(-) create mode 100644 ustreamer-www/index.html create mode 100644 ustreamer-www/script.js create mode 100644 ustreamer-www/style.css diff --git a/.gitignore b/.gitignore index 9ca3541..f6a9c00 100644 --- a/.gitignore +++ b/.gitignore @@ -1,6 +1,3 @@ -# Ignore ustreamer static for now. -ustreamer-www/ - #Ignore ERRORS.txt ERRORS.txt diff --git a/ustreamer-www/index.html b/ustreamer-www/index.html new file mode 100644 index 0000000..9ec5441 --- /dev/null +++ b/ustreamer-www/index.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<html lang="en" > +<head> + <meta charset="UTF-8"> + <title>Ustreamer Webcam</title> + <link rel="stylesheet" href="./style.css"> + +</head> +<body> +<!-- partial:index.partial.html --> +<header> + <span>Webcam - ustreamer</span> +</header> + +<div class="container"> + <div class="panel"> + <div class="title">Stream</div> + <img id="streamImg" src="./stream"> + </div> + + <div class="panel"> + <div class="title"><span>Snapshot</span> + <span class="reload" onclick="reloadSnapshot()"> + <noscript>Please refresh the page, to get an up to date image.</noscript> + <svg id="reloadSVG" viewBox="0 0 512 512" title="redo-alt"> + <path d="M256.455 8c66.269.119 126.437 26.233 170.859 68.685l35.715-35.715C478.149 25.851 504 36.559 504 57.941V192c0 13.255-10.745 24-24 24H345.941c-21.382 0-32.09-25.851-16.971-40.971l41.75-41.75c-30.864-28.899-70.801-44.907-113.23-45.273-92.398-.798-170.283 73.977-169.484 169.442C88.764 348.009 162.184 424 256 424c41.127 0 79.997-14.678 110.629-41.556 4.743-4.161 11.906-3.908 16.368.553l39.662 39.662c4.872 4.872 4.631 12.815-.482 17.433C378.202 479.813 319.926 504 256 504 119.034 504 8.001 392.967 8 256.002 7.999 119.193 119.646 7.755 256.455 8z" /> + </svg> + </span> + </div> + <img id="snapshotImg" src="./snapshot"> + </div> +</div> +<!-- partial --> + <script src="./script.js"></script> + +</body> +</html> diff --git a/ustreamer-www/script.js b/ustreamer-www/script.js new file mode 100644 index 0000000..163057c --- /dev/null +++ b/ustreamer-www/script.js @@ -0,0 +1,8 @@ +document.getElementById("reloadSVG").style.display = "inline"; + +function reloadSnapshot() { + snapshotUrl = + "./snapshot"; + document.getElementById("snapshotImg").src = + snapshotUrl + "?" + new Date().getTime(); +} diff --git a/ustreamer-www/style.css b/ustreamer-www/style.css new file mode 100644 index 0000000..27331e1 --- /dev/null +++ b/ustreamer-www/style.css @@ -0,0 +1,85 @@ +body { + background-color: #121212; + color: #fff; + font-size: 1.5rem; + font-family: Roboto, sans-serif; + margin: 0px; + user-select: none; +} + +a { + text-decoration: none; + color: #bbb; +} + +header { + background-color: #272727; + height: 48px; + line-height: 48px; + box-shadow: 0 0 5px #000; +} + +header a, +header span { + display: inline-block; + height: 100%; + padding: 0 20px; +} + +.container { + padding: 20px; + display: flex; + flex-flow: row wrap; + justify-content: center; + gap: 20px 30px; +} + +.panel { + background-color: #1e1e1e; + border-radius: 4px; + min-width: 350px; + max-width: 500px; + flex-grow: 4; + + box-shadow: 0 10px 20px #000; +} + +.title { + background-color: #272727; + height: 48px; + line-height: 48px; + padding-left: 20px; + border-radius: 4px; + display: flex; + font-size: 1.3rem; +} + +.panel img { + width: 100%; +} + +span:first-of-type { + flex: 1; +} + +.reload svg { + display: none; + fill: #ccc; + height: 16px; + margin: 0 20px; + cursor: pointer; +} + +.reload svg:hover { + fill: #fff; +} + +.reload svg:not(:active) { + transition: transform 0.4s ease-in-out; + transform: rotate(360deg); +} + +.reload noscript { + font-size: 0.6rem; + color: #ccc; +} \ No newline at end of file