flip

aws-deepracer-community · Sep 3, 2019 · f55eb72 · f55eb72
1 parent 0e53704
commit f55eb72
Show file tree

Hide file tree

Showing 9 changed files with 60 additions and 12 deletions.
diff --git a/static/flip.js b/static/flip.js
@@ -0,0 +1,12 @@
+// $(function () {
+//     setInterval(function () {
+//         flip();
+//     }, 5000);
+// });
+
+function flip() {
+    document.querySelector('.flip-body').classList.add('flipped');
+    setTimeout(function () {
+        document.querySelector('.flip-body').classList.remove('flipped');
+    }, 1000);
+}
diff --git a/static/index.css b/static/index.css
@@ -25,6 +25,10 @@ div {
     display: block;
 }
 
+a {
+    text-decoration: none;
+}
+
 .lb-logo {
     display: block;
     height: 300px;
@@ -34,6 +38,10 @@ div {
     text-align: center;
 }
 
+.lb-logo-img {
+    height: 100%;
+}
+
 .lb-title {
     height: 30px;
     margin-bottom: 15px;

diff --git a/static/league.css b/static/league.css
@@ -25,6 +25,10 @@ div {
     display: block;
 }
 
+a {
+    text-decoration: none;
+}
+
 .lb-logo {
     display: block;
     height: 100px;
@@ -34,7 +38,7 @@ div {
     text-align: center;
 }
 
-.lb-logo img {
+.lb-logo-img {
     height: 100%;
 }
 

diff --git a/static/league.js b/static/league.js
@@ -97,7 +97,7 @@ function sec(t) {
 
 function clear(logo, title) {
     if (logo && logo !== '') {
-        lb_logo.innerHTML = `<img src="${logo}">`;
+        lb_logo.innerHTML = `<img src="${logo}" class="lb-logo-img">`;
     }
 
     lb_title.innerText = title;

diff --git a/static/submit.css b/static/submit.css
@@ -21,6 +21,10 @@ footer {
     height: 100px;
 }
 
+div {
+    display: block;
+}
+
 a {
     text-decoration: none;
 }
@@ -34,7 +38,7 @@ a {
     text-align: center;
 }
 
-.lb-logo img {
+.lb-logo-img {
     height: 100%;
 }
 

diff --git a/static/submit.js b/static/submit.js
@@ -44,7 +44,7 @@ let lb_time_valid = false;
 
 function clear(logo, title) {
     if (logo && logo !== '') {
-        lb_logo.innerHTML = `<img src="${logo}">`;
+        lb_logo.innerHTML = `<img src="${logo}" class="lb-logo-img">`;
     }
 
     lb_title.innerText = title;

diff --git a/views/index.ejs b/views/index.ejs
@@ -13,10 +13,10 @@
         <div class="flip-container">
             <div class="flip-body">
                 <div class="face front">
-                    <img src="/icon-trophy.png" height="100%">
+                    <img src="/icon-trophy.png" class="lb-logo-img">
                 </div>
                 <div class="face back">
-                    <img src="/icon-trophy.png" height="100%">
+                    <img src="/icon-trophy.png" class="lb-logo-img">
                 </div>
             </div>
         </div>
@@ -30,13 +30,11 @@
 </html>
 
 <script src="/jquery-3.3.1.min.js"></script>
+<script src="/flip.js"></script>
 <script>
     $(function () {
         setInterval(function () {
-            document.querySelector('.flip-body').classList.add('flipped');
-            setTimeout(function () {
-                document.querySelector('.flip-body').classList.remove('flipped');
-            }, 1000);
+            flip();
         }, 5000);
     });
 </script>
diff --git a/views/league.ejs b/views/league.ejs
@@ -5,12 +5,22 @@
     <meta charset="utf-8">
     <title>league</title>
     <link rel="stylesheet" href="/league.css">
+    <link rel="stylesheet" href="/flip.css">
     <link rel="stylesheet" href="/pop.css">
 </head>
 
 <body>
     <figure class="lb-logo">
-        <img src="/icon-trophy.png">
+        <div class="flip-container">
+            <div class="flip-body">
+                <div class="face front">
+                    <img src="/icon-trophy.png" class="lb-logo-img">
+                </div>
+                <div class="face back">
+                    <img src="/icon-trophy.png" class="lb-logo-img">
+                </div>
+            </div>
+        </div>
     </figure>
 
     <h1 class="lb-title"></h1>
@@ -41,6 +51,7 @@
 
 <script src="/socket.io/socket.io.js"></script>
 <script src="/jquery-3.3.1.min.js"></script>
+<script src="/flip.js"></script>
 
 <script>
     let league = '<%= league %>';

diff --git a/views/submit.ejs b/views/submit.ejs
@@ -5,12 +5,22 @@
     <meta charset="utf-8">
     <title>submit</title>
     <link rel="stylesheet" href="/submit.css">
+    <link rel="stylesheet" href="/flip.css">
     <link rel="stylesheet" href="/pop.css">
 </head>
 
 <body>
     <figure class="lb-logo">
-        <img src="/icon-trophy.png">
+        <div class="flip-container">
+            <div class="flip-body">
+                <div class="face front">
+                    <img src="/icon-trophy.png" class="lb-logo-img">
+                </div>
+                <div class="face back">
+                    <img src="/icon-trophy.png" class="lb-logo-img">
+                </div>
+            </div>
+        </div>
     </figure>
 
     <h1 class="lb-title"></h1>
@@ -53,6 +63,7 @@
 
 <script src="/socket.io/socket.io.js"></script>
 <script src="/jquery-3.3.1.min.js"></script>
+<script src="/flip.js"></script>
 
 <script>
     let league = '<%= league %>';