Fixed .gitignore

* Deleted Line 'ustreamer-www' in gitignore Signed-off-by: Stephan Wendel <me@stephanwe.de>
2021-10-27 18:33:11 +02:00 · 2021-10-27 18:33:11 +02:00 · 985146c5a7
commit 985146c5a7
parent 05e1f9e04d
4 changed files with 130 additions and 3 deletions
--- a/.gitignore
+++ b/.gitignore
@ -1,6 +1,3 @@
-# Ignore ustreamer static for now.
-ustreamer-www/
-
 #Ignore ERRORS.txt
 ERRORS.txt

--- a/ustreamer-www/index.html
+++ 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>
--- a/ustreamer-www/script.js
+++ 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();
+}
--- a/ustreamer-www/style.css
+++ 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;
+}