From 2f725db96bd60ef16cbc189bb0da77e9977f1397 Mon Sep 17 00:00:00 2001
From: Yigit Sever
Date: Sat, 17 Apr 2021 20:28:25 +0300
Subject: Add news ticker
---
site/public/index.html | 18 +++++++++++++++---
site/public/site.css | 44 ++++++++++++++++++++++++++++++++++++++++++++
site/static/site.css | 44 ++++++++++++++++++++++++++++++++++++++++++++
site/templates/index.html | 17 +++++++++++++++++
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
--
cgit v1.2.3-70-g09d2