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