From 68c568670ce2608153e0d5709b0a08b2418431b4 Mon Sep 17 00:00:00 2001
From: Yigit Sever
Date: Thu, 15 Apr 2021 05:30:53 +0300
Subject: Start frontend

---
 site/public/index.html | 134 ++++++++++++++++++++++++++++++++++++++++++-------
 1 file changed, 115 insertions(+), 19 deletions(-)

(limited to 'site/public/index.html')

diff --git a/site/public/index.html b/site/public/index.html
index 0177355..05a37a0 100644
--- a/site/public/index.html
+++ b/site/public/index.html
@@ -71,31 +71,34 @@
         <b style="color: deepskyblue">Gradecoin</b> is the latest cutting edge blockchain technology agile grading framework that drives organic engagement and other buzzwords, with big data mining search engine optimization
     </h3>
     <div>
-        <!-- <a class="github-button" href="https://github.com/huhu/juice" data-size="large" data-show-count="true" -->
-        <!--                                                                                 aria-label="Star huhu/juice on GitHub">Star</a> -->
-        <!-- <a class="github-button" href="https://github.com/huhu/juice/fork" data-size="large" -->
-        <!--                                                                    data-show-count="true" aria-label="Fork huhu/juice on GitHub">Fork</a> -->
     </div>
 </section>
-<img class="hero-image" style="width: 50%" src="http:&#x2F;&#x2F;localhost:8080&#x2F;gradecoin.png">
+<img class="hero-image" style="width: 45%" src="http:&#x2F;&#x2F;localhost:8080&#x2F;gradecoin.png">
 
 <div class="explore-more text"
      onclick="document.getElementById('features').scrollIntoView({behavior: 'smooth'})">
     ⇩ Learn How ⇩
 </div>
 <style>
+
 .hero section {
     padding: 0 5rem;
 }
-                    @media screen and (max-width: 768px) {
-                        .hero section {
-                            padding: 0 2rem;
-                        }
-
-                    .hero-image {
-                        display: none
-                    }
-                }
+
+@media screen and (max-width: 768px) {
+    .hero section {
+        padding: 0 2rem;
+    }
+
+    .hero-image {
+        display: none
+    }
+
+}
+footer {
+    color: #8b8b8b;
+}
+
 </style>
 
     </div>
@@ -111,6 +114,21 @@
         <div class="toc">
             <div class="toc-sticky">
                 
+                <div class="toc-item">
+                    <a class="subtext" href="http://localhost:8080/#welcome-to-gradecoin">Welcome to Gradecoin!</a>
+                </div>
+                
+                
+                <div class="toc-item">
+                    <a class="subtext" href="http://localhost:8080/#coinbase">Coinbase</a>
+                </div>
+                
+                
+                <div class="toc-item">
+                    <a class="subtext" href="http://localhost:8080/#public-key-signatures">Public Key Signatures</a>
+                </div>
+                
+                
                 <div class="toc-item">
                     <a class="subtext" href="http://localhost:8080/#services">Services</a>
                 </div>
@@ -130,6 +148,37 @@
                 
                 
                 
+                <div class="toc-item">
+                    <a class="subtext" href="http://localhost:8080/#questions">Questions</a>
+                </div>
+                
+                
+                <div class="toc-item-child">
+                    <a class="subtext" href="http://localhost:8080/#this-all-sound-complicated"><small>- This all sound complicated!</small></a>
+                </div>
+                
+                <div class="toc-item-child">
+                    <a class="subtext" href="http://localhost:8080/#i-found-a-bug"><small>- I found a bug!</small></a>
+                </div>
+                
+                <div class="toc-item-child">
+                    <a class="subtext" href="http://localhost:8080/#i-hacked-the-server"><small>- I hacked the server!</small></a>
+                </div>
+                
+                <div class="toc-item-child">
+                    <a class="subtext" href="http://localhost:8080/#submission"><small>- Submission?</small></a>
+                </div>
+                
+                <div class="toc-item-child">
+                    <a class="subtext" href="http://localhost:8080/#can-my-friends-play"><small>- Can my friends play?</small></a>
+                </div>
+                
+                <div class="toc-item-child">
+                    <a class="subtext" href="http://localhost:8080/#how-and-or-why"><small>- How and or Why?</small></a>
+                </div>
+                
+                
+                
             </div>
         </div>
         
@@ -138,10 +187,28 @@
         <div class="content text">
             
             <div id="features" class="heading-text">Overview</div>
-            <ul>
-<li>Don't know where to start? Gradecoin uses RESTful API, simple <code>curl</code> commands or even your browser will work! <a href="https://curl.trillworks.com/">This website can help as well</a>.</li>
-<li><a href="https://jwt.io">JWT Debugger</a> and the corresponding <a href="https://tools.ietf.org/html/rfc7519">RFC</a></li>
-</ul>
+            <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.
+Craft <a href="http://localhost:8080/transaction-docs/">Transaction</a> proposals and tag them using <a href="http://localhost:8080/jwt/">JWTs</a>.
+When there are enough transactions then you can propose <a href="http://localhost:8080/block-docs/">Blocks</a> in the same way.
+Blocks need to be <em>mined</em> beforehand using Proof-of-work, or brute force.</p>
+<p>Gradecoin offers 3 endpoints at <a href="/register">/register</a>, <a href="/block">/block</a> and <a href="/transaction">/transaction</a>. You can only send GET requests to /block and /transaction without authorization.
+The server is programmed in <a href="https://www.service-architecture.com/articles/web-services/representational_state_transfer_rest.html">RESTful</a> architecture, there are no <code>DELETE</code>, <code>PUT</code> or <code>UPDATE</code> operations, though.</p>
+<p>Gradecoin uses a Proof-of-work block accepting mechanism. It uses single round <a href="https://www.blake2.net/">Blake2s</a> hashing which produces 256-bit (64 hexadecimal characters) output. The <a href="https://wiki.bitcoinsv.io/index.php/Target">target</a> hash is <em>24 bits</em> or <em>6 hexadecimal characters</em> of 0. During testing, I could mine a block on average around 2-7 minutes.</p>
+<blockquote>
+<p>We're expecting you to use existing tools and implementations. Standards are hard. <a href="https://www.reddit.com/r/crypto/comments/2coqsy/dont_roll_your_own/">Don't roll your own crypto</a>. Feel free to ask questions. Collaborate.</p>
+</blockquote>
+<p>You might ask,</p>
+<blockquote>
+<p>But if nobody has any Gradecoin then how do we have transactions?</p>
+</blockquote>
+<p>There is a bank! Their public key is <code>31415926535897932384626433832795028841971693993751058209749445923</code> and they have some amount of Gradecoin preloaded. It's also the only account that you can send transactions requests <em>to</em> yourself.</p>
+<h1 id="coinbase">Coinbase</h1>
+<p>The first transactions of a block is called the <code>coinbase</code>. They are the <strong>author</strong> of the block proposal and if the block is accepted then they get compensated for their efforts with some Gradecoin.</p>
+<h1 id="public-key-signatures">Public Key Signatures</h1>
+<p>Gradecoin uses 2048 bit RSA keyspairs.</p>
 <h1 id="services">Services</h1>
 <h2 id="register">/register</h2>
 <ul>
@@ -171,6 +238,35 @@
 <li>fetch the last accepted [<code>schema::Block</code>] - GET request</li>
 </ul>
 <p><code>Authorization</code>: The request header should have Bearer JWT.Token signed with Student Public Key</p>
+<h1 id="questions">Questions</h1>
+<h2 id="this-all-sound-complicated">This all sound complicated!</h2>
+<ul>
+<li>I've drawn inspiration from <a href="https://explorer.bitcoin.com/btc">actual Bitcoin transactions</a> and <a href="https://github.com/seanmonstar/warp/blob/master/examples/todos.rs">warp</a>. The simplicity of the system is how little interfaces it has.</li>
+<li>Don't know where to start? Gradecoin uses RESTful API; simple <code>curl</code> commands or even your browser will work! <a href="https://curl.trillworks.com/">This website can help as well</a>.</li>
+<li><a href="https://jwt.io">JWT Debugger</a> and the corresponding <a href="https://tools.ietf.org/html/rfc7519">RFC</a></li>
+<li>Remember that you are absolutely encouraged to grab off-the-shelf implementations for every cryptography primitive you will use. You can start by finding a code snippet to generate a RSA keypair?</li>
+</ul>
+<h2 id="i-found-a-bug">I found a bug!</h2>
+<p>Thank you! Please <a href="mailto:yigit@ceng.metu.edu.tr">let me know</a> so we can solve it.</p>
+<h2 id="i-hacked-the-server">I hacked the server!</h2>
+<p>That wasn't supposed to happen :( I did not place any intentional vulnerabilities to the system so if you cracked something, it was not intended. Please don't abuse it and let me know so I can patch it.</p>
+<h2 id="submission">Submission?</h2>
+<p>At the end of the <em>simulation</em>, your Gradecoin balance will be your grade. I will also expect a unique client programmed in either;</p>
+<ul>
+<li>c</li>
+<li>c++</li>
+<li>perl</li>
+<li>rust</li>
+<li>python</li>
+<li>random assortment of bash scripts</li>
+</ul>
+<p>If your favourite programming language is missing please let me know 🤷?</p>
+<h2 id="can-my-friends-play">Can my friends play?</h2>
+<p>Sadly, no. Student's who are enrolled to the class will receive one-time-passwords for authentication.</p>
+<h2 id="how-and-or-why">How and or Why?</h2>
+<ul>
+<li><a href="https://xkcd.com/2314/">Built</a>, with <a href="https://xkcd.com/2418/">Rust</a></li>
+</ul>
 
             
         </div>
@@ -181,7 +277,7 @@
 
     
 <footer>
-    ⁂
+Built For ⁂ CENG489 ⁂ Introduction to Computer Security
 </footer>
 
 </body>
-- 
cgit v1.2.3-70-g09d2