Add news ticker

4 files changed, 120 insertions, 3 deletions

diff --git a/site/public/index.html b/site/public/index.html
index bce3933..26d312b 100644
--- a/site/public/index.html
+++ b/site/public/index.html
@@ -67,6 +67,7 @@
 
     <div class="hero">
         
+
 <section class="text-center">
     <h1 class="heading-text animate__animated animate__jackInTheBox" style="font-size: 50px">
         Mine your own grades
@@ -83,6 +84,7 @@
      onclick="document.getElementById('features').scrollIntoView({behavior: 'smooth'})">
     ⇩ Learn How ⇩
 </div>
+
 <style>
 
 .hero section {
@@ -197,8 +199,18 @@ footer {
 
         <div class="content text">
             
-            <div id="features" class="heading-text">Overview</div>
-            <h1 id="welcome-to-gradecoin">Welcome to Gradecoin!</h1>
+<div class="tcontainer">
+    <div class="ticker-wrap">
+        <div class="ticker-move">
+            <div class="ticker-item"><b>News:</b></div>
+            <div class="ticker-item">Gradecoin is in testnet mode, API is not stable, everything might reset at any time.</div>
+            <div class="ticker-item">Someone managed to authenticate themselves in less than 24 hours!</div>
+            <div class="ticker-item">Transactions now have saner amount limits.</div>
+            <div class="ticker-item">Blocks now properly require 10 transactions in them.</div>
+        </div>
+    </div>
+</div>
+<h1 id="welcome-to-gradecoin">Welcome to Gradecoin!</h1>
 <p>Blockchains are incredibly simple yet can appear very complicated, we will see how they work and practice programming <em>production</em> cryptography code.</p>
 <p>This server is the sandbox for the PA1, it's currently running the Gradecoin application. Gradecoin is the faux currency we will use to simulate a blockchain network. At the end of the simulation, the amount of Gradecoin you hold will be your PA1 grade.</p>
 <p><strong>A quick summary</strong>: authenticate yourself to the system using public key encryption.
@@ -299,7 +311,7 @@ The server is programmed in <a href="https://www.service-architecture.com/articl
 <li><a href="https://xkcd.com/2314/">Built</a>, <a href="https://lofi.cafe/">with</a> <a href="https://xkcd.com/2418/">Rust</a></li>
 </ul>
 
-            
+
         </div>
 
         
diff --git a/site/public/site.css b/site/public/site.css
index 3c9bc03..6c79aa9 100644
--- a/site/public/site.css
+++ b/site/public/site.css
@@ -11,3 +11,47 @@
 li p {
     margin: 2px;
 }
+
+/* OUTER CONTAINER */
+.tcontainer {
+  width: 100%;
+  overflow: hidden; /* Hide scroll bar */
+}
+
+/* MIDDLE CONTAINER */
+.ticker-wrap {
+  width: 100%;
+  padding-left: 100%; /* Push contents to right side of screen */
+  background-color: #eee;
+}
+
+/* INNER CONTAINER */
+@keyframes ticker {
+    0% { transform: translate3d(0, 0, 0); }
+    100% { transform: translate3d(-100%, 0, 0); }
+}
+
+.ticker-move {
+    /* Basically move items from right side of screen to left in infinite loop */
+    display: inline-block;
+    white-space: nowrap;
+    padding-right: 100%;
+    animation-iteration-count: infinite;
+    animation-timing-function: linear;
+    animation-name: ticker;
+    animation-duration: 30s;
+}
+
+.ticker-move:hover{
+    animation-play-state: paused; /* Pause scroll on mouse hover */
+}
+
+/* ITEMS */
+.ticker-item {
+    display: inline-block; /* Lay items in a horizontal line */
+    padding: 0 5px;
+}
+
+.ticker-item::before {
+    content: "  ✑  ";
+}
diff --git a/site/static/site.css b/site/static/site.css
index 3c9bc03..6c79aa9 100644
--- a/site/static/site.css
+++ b/site/static/site.css
@@ -11,3 +11,47 @@
 li p {
     margin: 2px;
 }
+
+/* OUTER CONTAINER */
+.tcontainer {
+  width: 100%;
+  overflow: hidden; /* Hide scroll bar */
+}
+
+/* MIDDLE CONTAINER */
+.ticker-wrap {
+  width: 100%;
+  padding-left: 100%; /* Push contents to right side of screen */
+  background-color: #eee;
+}
+
+/* INNER CONTAINER */
+@keyframes ticker {
+    0% { transform: translate3d(0, 0, 0); }
+    100% { transform: translate3d(-100%, 0, 0); }
+}
+
+.ticker-move {
+    /* Basically move items from right side of screen to left in infinite loop */
+    display: inline-block;
+    white-space: nowrap;
+    padding-right: 100%;
+    animation-iteration-count: infinite;
+    animation-timing-function: linear;
+    animation-name: ticker;
+    animation-duration: 30s;
+}
+
+.ticker-move:hover{
+    animation-play-state: paused; /* Pause scroll on mouse hover */
+}
+
+/* ITEMS */
+.ticker-item {
+    display: inline-block; /* Lay items in a horizontal line */
+    padding: 0 5px;
+}
+
+.ticker-item::before {
+    content: "  ✑  ";
+}
diff --git a/site/templates/index.html b/site/templates/index.html
index 4bd9867..a374d60 100644
--- a/site/templates/index.html
+++ b/site/templates/index.html
@@ -6,6 +6,7 @@
 {% endblock head %}
 
 {% block hero %}
+
 <section class="text-center">
     <h1 class="heading-text animate__animated animate__jackInTheBox" style="font-size: 50px">
         Mine your own grades
@@ -22,6 +23,7 @@
      onclick="document.getElementById('features').scrollIntoView({behavior: 'smooth'})">
     ⇩ Learn How ⇩
 </div>
+
 <style>
 
 .hero section {
@@ -44,6 +46,21 @@ footer {
 </style>
 {% endblock hero %}
 
+{% block content %}
+<div class="tcontainer">
+    <div class="ticker-wrap">
+        <div class="ticker-move">
+            <div class="ticker-item"><b>News:</b></div>
+            <div class="ticker-item">Gradecoin is in testnet mode, API is not stable, everything might reset at any time.</div>
+            <div class="ticker-item">Someone managed to authenticate themselves in less than 24 hours!</div>
+            <div class="ticker-item">Transactions now have saner amount limits.</div>
+            <div class="ticker-item">Blocks now properly require 10 transactions in them.</div>
+        </div>
+    </div>
+</div>
+{{ section.content | safe }}
+{% endblock content %}
+
 {% block footer %}
 <footer>
 Built For ⁂ CENG489 ⁂ Introduction to Computer Security