Basic application

3 years ago · d310a97a7b
parent 8be04950de
commit d310a97a7b
5 changed files with 119 additions and 0 deletions
--- a/9
+++ b/9
@ -0,0 +1,9 @@
+FROM nginx:latest
+
+ADD ./ /frontend
+
+RUN mv ./frontend/Private/nginx.conf /etc/nginx/nginx.conf
+
+RUN mv ./frontend/Public/* /usr/share/nginx/html/
+
+CMD ["nginx"]
--- a/Private/nginx.conf
+++ b/Private/nginx.conf
@ -0,0 +1,19 @@
+worker_processes auto;
+daemon off;
+error_log nginx_error.log;
+events {
+    worker_connections 1024;
+}
+
+http {
+    include    /etc/nginx/mime.types;
+    server {
+
+        location /wave {
+            proxy_pass http://10.0.0.205:5000;
+        }
+        location / {
+            root /usr/share/nginx/html;
+        }
+    }
+}
--- a/Public/index.html
+++ b/Public/index.html
@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Flag Waver</title>
+    <script src="https://cdn.bootcss.com/flv.js/1.5.0/flv.min.js"></script>
+    <link rel="stylesheet" type="text/css" href="style.css">
+    <script type="text/javascript" src="script.js"></script>
+  </head>
+  <body>
+    <div class="video-wrapper">
+      <video id="videoElement" style="text-align: center; width:100%; display:none;" controls></video>
+    </div>
+
+    <div class="button-wrapper">
+      <button id="start-cam" onclick="runVid()">Play</button>
+    </div>
+
+    <div class="button-wrapper">
+      <button onclick="wave()" id="wave">Press!</button>
+    </div>
+  </body>
+</html>
--- a/Public/script.js
+++ b/Public/script.js
@ -0,0 +1,18 @@
+function runVid(){
+  if (flvjs.isSupported()) {
+      var videoElement = document.getElementById('videoElement');
+      var flvPlayer = flvjs.createPlayer({
+          type: 'flv',
+          url: 'https://stream.nannal.com/live/flag.flv'
+      });
+      flvPlayer.attachMediaElement(videoElement);
+      flvPlayer.load();
+      flvPlayer.play();
+      var vid = document.getElementById("videoElement")
+      vid.style.display = "block";
+  }
+}
+
+function wave(){
+  let promise = fetch('/wave')
+}
--- a/Public/style.css
+++ b/Public/style.css
@ -0,0 +1,51 @@
+body {
+  text-align: center;
+}
+
+.button-wrapper{
+  text-align: center;
+  margin: 10px;
+}
+
+#wave {
+  background-color: #f44336;
+  border: none;
+  color: white;
+  padding: 15px 32px;
+  text-align: center;
+  text-decoration: none;
+  display: inline-block;
+  font-size: 16px;
+  cursor: pointer;
+  border: none;
+  border-radius: 15px;
+  box-shadow: 0 9px #999;
+}
+
+#wave:active {
+  background-color: red;
+  box-shadow: 0 5px #666;
+  transform: translateY(4px);
+}
+
+.video-wrapper{
+  margin: auto;
+  padding: 20px;
+  width: 50%;
+}
+
+#videoElement {
+   width:80%;
+   display: block;
+}
+
+#start-cam {
+  background-color: grey;
+    border: none;
+    color: white;
+    padding: 15px 32px;
+    text-align: center;
+    text-decoration: none;
+    display: inline;
+    cursor: pointer;
+}