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 @@ + + + + + Ustreamer Webcam + + + + + +
+ Webcam - ustreamer +
+ +
+
+
Stream
+ +
+ +
+
Snapshot + + + + + + +
+ +
+
+ + + + + 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