initial commit

2022-07-31 18:18:40 +00:00
commit d68c7ee3b9
17 changed files with 627 additions and 0 deletions
--- a/interdimensionalcable/idc/templates/index.html
+++ b/interdimensionalcable/idc/templates/index.html
@ -0,0 +1,187 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>InterdimensionalCable</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+    <script
+      src="https://code.jquery.com/jquery-2.2.4.min.js"
+      integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
+      crossorigin="anonymous"></script>
+    <link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}">
+    <style type="text/css">
+body, html
+  {
+  margin: 0; padding: 0; height: 100%; overflow: hidden;
+}
+
+#content
+  {
+  position:absolute; left: 0; right: 0; bottom: 0; top: 0px; 
+}
+
+#player
+  {
+  width: 100%;
+  height: 100%;
+}
+
+.hidden {
+  display: none;
+}
+
+.btn{
+  border-radius: 10px;
+  margin:1em;
+  padding:1em 2em;
+  transition:all 125ms ease;
+  text-transform:uppercase;
+  color:#fff;
+  font-weight:500;
+  border:1px solid #d1d1d1
+}
+.btn:active{ transform:scale(.9) }
+.btn:focus{ outline:none }
+.btn:active,
+.btn:hover,
+.btn:focus{ color:#fff }
+.btn:active:focus,
+.btn:active:hover{ outline:none }
+.btn:active,
+.btn:active:hover,
+.btn:active:focus{ transform:scale(.9) }
+.btn:focus{ transform:scale(1) }
+
+.btn-danger {
+  background-color:#FF0000;
+  border:1px solid #FF0000;
+  box-shadow:0 2px 20px rgba(246,77,76,0.57)
+}
+.btn-danger:active{
+  box-shadow:0 2px 20px rgba(246,77,76,0.57)
+}
+.btn-danger:hover{
+  background-color:#ff2e2e;
+  border:1px solid #ff2e2e;
+  box-shadow:0 2px 20px rgba(246,77,76,0.67)
+}
+.btn-danger:active,
+.btn-danger:focus,
+.btn-danger:active:hover,
+.btn-danger:active:focus{
+  border:1px solid #ff2e2e;
+  background-color:#ff2e2e
+}
+
+
+#buttonl {
+  z-index: 101;
+  position: absolute;
+  width: 50px;
+  height: 50px;
+  left: 3%;
+  top: 50%;
+}
+#buttonr {
+  z-index: 101;
+  position: absolute;
+  width: 50px;
+  height: 50px;
+  right: 3%;
+  top: 50%;
+}
+    </style>
+  </head>
+  <body>
+    <script type="text/javascript">
+      var tag = document.createElement('script');
+
+tag.src = "https://www.youtube.com/iframe_api";
+var firstScriptTag = document.getElementsByTagName('script')[0];
+firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
+
+var idx=0;
+
+var justHidden = false;
+
+var videos = {{vids|safe}};
+
+var player;
+function onYouTubeIframeAPIReady() {
+  player = new YT.Player('player', {
+    events: {
+      'onReady': function(){},
+      'onStateChange': onPlayerStateChange
+    }
+  });
+}
+
+function onPlayerStateChange(event) {
+  if (event.data == YT.PlayerState.ENDED) {
+    idx = idx + 1;
+    if (idx == videos.length) {
+      idx = 0;
+    }
+    $('#player').attr('src', videos[idx]);
+    player = new YT.Player('player', {
+      events: {
+        'onReady': function(){},
+        'onStateChange': onPlayerStateChange
+      }
+    });
+  }
+}
+
+$(document).ready(function() {
+  var j;
+
+  $('#player').attr('src', videos[idx]);
+  $(document).mousemove(function() {
+    if (!justHidden) {
+      justHidden = false;
+      clearTimeout(j);
+      $('.btn').removeClass('hidden');
+      j = setTimeout('hide();', 1000);
+    }
+  });
+  $('#buttonl').click(function(){
+    idx = idx - 1;
+    if (idx < 0) {
+      idx = videos.length - 1;
+    }
+            $('#player').attr('src', videos[idx]);
+            player = new YT.Player('player', {
+            events: {
+            'onReady': function(){},
+            'onStateChange': onPlayerStateChange
+            }
+            });
+            });
+            $('#buttonr').click(function(){
+            idx = idx + 1;
+            if (idx == videos.length) {
+            idx = 0;
+            }
+            $('#player').attr('src', videos[idx]);
+            player = new YT.Player('player', {
+            events: {
+            'onReady': function(){},
+            'onStateChange': onPlayerStateChange
+            }
+            });
+            });
+            });
+
+            function hide() {
+            $('.btn').addClass('hidden');
+            }
+    </script>
+    <div id="content">
+      <iframe
+        id="player"
+        src="https://www.youtube.com/embed/tgbNymZ7vqY?autoplay=1" frameborder="0" allow="autoplay">
+      </iframe>
+      <button id="buttonl" class="btn btn-danger hidden"><i class="fa fa-angle-left"></i></button>
+      <button id="buttonr" class="btn btn-danger hidden"><i class="fa fa-angle-right"></i></button>
+    </div>
+  </body>
+</html>