diff options
Diffstat (limited to 'site/public/index.html')
-rw-r--r-- | site/public/index.html | 319 |
1 files changed, 319 insertions, 0 deletions
diff --git a/site/public/index.html b/site/public/index.html new file mode 100644 index 0000000..8986841 --- /dev/null +++ b/site/public/index.html | |||
@@ -0,0 +1,319 @@ | |||
1 | <!DOCTYPE html> | ||
2 | <html lang="en"> | ||
3 | |||
4 | <head> | ||
5 | <meta charset="UTF-8"> | ||
6 | <title>Gradecoin</title> | ||
7 | <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> | ||
8 | <style> | ||
9 | :root { | ||
10 | /* Primary theme color */ | ||
11 | --primary-color: #F8D12F; | ||
12 | /* Primary theme text color */ | ||
13 | --primary-text-color: #1E2329; | ||
14 | /* Primary theme link color */ | ||
15 | --primary-link-color: #2F57F7; | ||
16 | /* Secondary color: the background body color */ | ||
17 | --secondary-color: #FAFAFA; | ||
18 | --secondary-text-color: #303030; | ||
19 | /* Highlight text color of table of content */ | ||
20 | --toc-highlight-text-color: #d46e13; | ||
21 | } | ||
22 | </style> | ||
23 | |||
24 | <link href="https://fonts.googleapis.com/css?family=Alfa+Slab+One&display=swap" rel="stylesheet"> | ||
25 | <link href="https://fonts.googleapis.com/css?family=Fira+Sans:400,500,600&display=swap" rel="stylesheet"> | ||
26 | <link rel="stylesheet" href="/normalize.css"> | ||
27 | <link rel="stylesheet" href="https://gradecoin.xyz/juice.css"> | ||
28 | |||
29 | <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" /> | ||
30 | |||
31 | </head> | ||
32 | |||
33 | <body> | ||
34 | |||
35 | |||
36 | <header class="pos-absolute" style="background-color: transparent"> | ||
37 | |||
38 | |||
39 | <a href="https://gradecoin.xyz/"> | ||
40 | <div class="logo"> | ||
41 | <img src="https://gradecoin.xyz/gradecoin.png" alt="logo"> | ||
42 | Gradecoin | ||
43 | </div> | ||
44 | </a> | ||
45 | |||
46 | <nav> | ||
47 | |||
48 | <a class="nav-item subtitle-text" href="https://gradecoin.xyz/register-docs/">Register</a> | ||
49 | |||
50 | <a class="nav-item subtitle-text" href="https://gradecoin.xyz/jwt/">JWT</a> | ||
51 | |||
52 | <a class="nav-item subtitle-text" href="https://gradecoin.xyz/transaction-docs/">Transactions</a> | ||
53 | |||
54 | <a class="nav-item subtitle-text" href="https://gradecoin.xyz/block-docs/">Blocks</a> | ||
55 | |||
56 | |||
57 | |||
58 | <a class="nav-item subtitle-text" href="https://github.com/zhuowei/nft_ptr#why">why?</a> | ||
59 | |||
60 | |||
61 | </nav> | ||
62 | |||
63 | </header> | ||
64 | |||
65 | <div class="hero"> | ||
66 | |||
67 | <section class="text-center"> | ||
68 | <h1 class="heading-text animate__animated animate__jackInTheBox" style="font-size: 50px"> | ||
69 | Mine your own grades | ||
70 | </h1> | ||
71 | <h3 class="title-text"> | ||
72 | <b>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 | ||
73 | </h3> | ||
74 | <div> | ||
75 | </div> | ||
76 | </section> | ||
77 | <img class="hero-image" style="width: 40%" src="https://gradecoin.xyz/gradecoin.png"> | ||
78 | |||
79 | <div class="explore-more text" | ||
80 | onclick="document.getElementById('features').scrollIntoView({behavior: 'smooth'})"> | ||
81 | ⇩ Learn How ⇩ | ||
82 | </div> | ||
83 | <style> | ||
84 | |||
85 | .hero section { | ||
86 | padding: 0 5rem; | ||
87 | } | ||
88 | |||
89 | @media screen and (max-width: 768px) { | ||
90 | .hero section { | ||
91 | padding: 0 2rem; | ||
92 | } | ||
93 | |||
94 | .hero-image { | ||
95 | display: none | ||
96 | } | ||
97 | |||
98 | } | ||
99 | footer { | ||
100 | color: #8b8b8b; | ||
101 | } | ||
102 | </style> | ||
103 | |||
104 | </div> | ||
105 | |||
106 | |||
107 | |||
108 | <main> | ||
109 | |||
110 | |||
111 | |||
112 | |||
113 | |||
114 | <div class="toc"> | ||
115 | <div class="toc-sticky"> | ||
116 | |||
117 | <div class="toc-item"> | ||
118 | <a class="subtext" href="https://gradecoin.xyz/#welcome-to-gradecoin">Welcome to Gradecoin!</a> | ||
119 | </div> | ||
120 | |||
121 | |||
122 | <div class="toc-item"> | ||
123 | <a class="subtext" href="https://gradecoin.xyz/#coinbase">Coinbase</a> | ||
124 | </div> | ||
125 | |||
126 | |||
127 | <div class="toc-item"> | ||
128 | <a class="subtext" href="https://gradecoin.xyz/#public-key-signatures">Public Key Signatures</a> | ||
129 | </div> | ||
130 | |||
131 | |||
132 | <div class="toc-item"> | ||
133 | <a class="subtext" href="https://gradecoin.xyz/#services">Services</a> | ||
134 | </div> | ||
135 | |||
136 | |||
137 | <div class="toc-item-child"> | ||
138 | <a class="subtext" href="https://gradecoin.xyz/#register"><small>- /register</small></a> | ||
139 | </div> | ||
140 | |||
141 | <div class="toc-item-child"> | ||
142 | <a class="subtext" href="https://gradecoin.xyz/#transaction"><small>- /transaction</small></a> | ||
143 | </div> | ||
144 | |||
145 | <div class="toc-item-child"> | ||
146 | <a class="subtext" href="https://gradecoin.xyz/#block"><small>- /block</small></a> | ||
147 | </div> | ||
148 | |||
149 | |||
150 | |||
151 | <div class="toc-item"> | ||
152 | <a class="subtext" href="https://gradecoin.xyz/#questions">Questions</a> | ||
153 | </div> | ||
154 | |||
155 | |||
156 | <div class="toc-item-child"> | ||
157 | <a class="subtext" href="https://gradecoin.xyz/#this-all-sound-complicated"><small>- This all sound complicated!</small></a> | ||
158 | </div> | ||
159 | |||
160 | <div class="toc-item-child"> | ||
161 | <a class="subtext" href="https://gradecoin.xyz/#i-found-a-bug"><small>- I found a bug!</small></a> | ||
162 | </div> | ||
163 | |||
164 | <div class="toc-item-child"> | ||
165 | <a class="subtext" href="https://gradecoin.xyz/#i-hacked-the-server"><small>- I hacked the server!</small></a> | ||
166 | </div> | ||
167 | |||
168 | <div class="toc-item-child"> | ||
169 | <a class="subtext" href="https://gradecoin.xyz/#submission"><small>- Submission?</small></a> | ||
170 | </div> | ||
171 | |||
172 | <div class="toc-item-child"> | ||
173 | <a class="subtext" href="https://gradecoin.xyz/#can-my-friends-play"><small>- Can my friends play?</small></a> | ||
174 | </div> | ||
175 | |||
176 | <div class="toc-item-child"> | ||
177 | <a class="subtext" href="https://gradecoin.xyz/#how-and-or-why"><small>- How and or Why?</small></a> | ||
178 | </div> | ||
179 | |||
180 | |||
181 | |||
182 | </div> | ||
183 | </div> | ||
184 | |||
185 | |||
186 | |||
187 | <div class="content text"> | ||
188 | |||
189 | <div id="features" class="heading-text">Overview</div> | ||
190 | <h1 id="welcome-to-gradecoin">Welcome to Gradecoin!</h1> | ||
191 | <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> | ||
192 | <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> | ||
193 | <p><strong>A quick summary</strong>: authenticate yourself to the system using public key encryption. | ||
194 | Craft <a href="https://gradecoin.xyz/transaction-docs/">Transaction</a> proposals and tag them using <a href="https://gradecoin.xyz/jwt/">JWTs</a>. | ||
195 | When there are enough transactions then you can propose <a href="https://gradecoin.xyz/block-docs/">Blocks</a> in the same way. | ||
196 | Blocks need to be <em>mined</em> beforehand using Proof-of-work, or brute force.</p> | ||
197 | <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. | ||
198 | 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> | ||
199 | <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> | ||
200 | <blockquote> | ||
201 | <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> | ||
202 | </blockquote> | ||
203 | <p>You might ask,</p> | ||
204 | <blockquote> | ||
205 | <p>But if nobody has any Gradecoin then how do we have transactions?</p> | ||
206 | </blockquote> | ||
207 | <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> | ||
208 | <h1 id="coinbase">Coinbase</h1> | ||
209 | <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> | ||
210 | <h1 id="public-key-signatures">Public Key Signatures</h1> | ||
211 | <p>Gradecoin uses 2048 bit RSA keyspairs.</p> | ||
212 | <h1 id="services">Services</h1> | ||
213 | <h2 id="register">/register</h2> | ||
214 | <ul> | ||
215 | <li>Student creates their own 2048 bit RSA <code>keypair</code></li> | ||
216 | <li>Downloads <code>Gradecoin</code>'s Public Key from <a href="https://odtuclass.metu.edu.tr/my/">Moodle</a></li> | ||
217 | <li>Encrypts their JSON wrapped <code>Public Key</code>, <code>Student ID</code> and one time <code>passwd</code> using Gradecoin's Public Key</li> | ||
218 | <li>Their public key is now in our database and can be used to sign their JWT's during requests</li> | ||
219 | </ul> | ||
220 | <h2 id="transaction">/transaction</h2> | ||
221 | <ul> | ||
222 | <li>You can offer a <a href="/transaction">Transaction</a> - POST request | ||
223 | <ul> | ||
224 | <li>The request should have <code>Authorization</code></li> | ||
225 | <li>The request header should be signed by the Public Key of the <code>by</code> field in the transaction</li> | ||
226 | </ul> | ||
227 | </li> | ||
228 | <li>fetch the list of <code>Transaction</code>s - GET request</li> | ||
229 | </ul> | ||
230 | <h2 id="block">/block</h2> | ||
231 | <ul> | ||
232 | <li>offer a [<code>schema::Block</code>] - POST request | ||
233 | <ul> | ||
234 | <li>The request should have <code>Authorization</code></li> | ||
235 | <li>The [<code>schema::Block::transaction_list</code>] of the block should be a subset of [<code>schema::Db::pending_transactions</code>]</li> | ||
236 | </ul> | ||
237 | </li> | ||
238 | <li>fetch the last accepted [<code>schema::Block</code>] - GET request</li> | ||
239 | </ul> | ||
240 | <p><code>Authorization</code>: The request header should have Bearer JWT.Token signed with Student Public Key</p> | ||
241 | <h1 id="questions">Questions</h1> | ||
242 | <h2 id="this-all-sound-complicated">This all sound complicated!</h2> | ||
243 | <ul> | ||
244 | <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> | ||
245 | <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> | ||
246 | <li><a href="https://jwt.io">JWT Debugger</a> and the corresponding <a href="https://tools.ietf.org/html/rfc7519">RFC</a></li> | ||
247 | <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> | ||
248 | </ul> | ||
249 | <h2 id="i-found-a-bug">I found a bug!</h2> | ||
250 | <p>Thank you! Please <a href="mailto:yigit@ceng.metu.edu.tr">let me know</a> so we can solve it.</p> | ||
251 | <h2 id="i-hacked-the-server">I hacked the server!</h2> | ||
252 | <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> | ||
253 | <h2 id="submission">Submission?</h2> | ||
254 | <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> | ||
255 | <ul> | ||
256 | <li>c</li> | ||
257 | <li>c++</li> | ||
258 | <li>perl</li> | ||
259 | <li>rust</li> | ||
260 | <li>python</li> | ||
261 | <li>random assortment of bash scripts</li> | ||
262 | </ul> | ||
263 | <p>If your favourite programming language is missing please let me know 🤷?</p> | ||
264 | <h2 id="can-my-friends-play">Can my friends play?</h2> | ||
265 | <p>Sadly, no. Student's who are enrolled to the class will receive one-time-passwords for authentication.</p> | ||
266 | <h2 id="how-and-or-why">How and or Why?</h2> | ||
267 | <ul> | ||
268 | <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> | ||
269 | </ul> | ||
270 | |||
271 | |||
272 | </div> | ||
273 | |||
274 | |||
275 | |||
276 | </main> | ||
277 | |||
278 | |||
279 | <footer> | ||
280 | Built For ⁂ CENG489 ⁂ Introduction to Computer Security | ||
281 | </footer> | ||
282 | |||
283 | </body> | ||
284 | <script> | ||
285 | function highlightNav(heading) { | ||
286 | let pathname = location.pathname; | ||
287 | document.querySelectorAll(".toc a").forEach((item) => { | ||
288 | item.classList.remove("active"); | ||
289 | }); | ||
290 | document.querySelector(".toc a[href$='" + pathname + "#" + heading + "']").classList.add("active"); | ||
291 | } | ||
292 | |||
293 | let currentHeading = ""; | ||
294 | window.onscroll = function () { | ||
295 | let h = document.querySelectorAll("h1,h2,h3,h4,h5,h6"); | ||
296 | let elementArr = []; | ||
297 | |||
298 | h.forEach(item => { | ||
299 | if (item.id !== "") { | ||
300 | elementArr[item.id] = item.getBoundingClientRect().top; | ||
301 | } | ||
302 | }); | ||
303 | elementArr.sort(); | ||
304 | for (let key in elementArr) { | ||
305 | if (!elementArr.hasOwnProperty(key)) { | ||
306 | continue; | ||
307 | } | ||
308 | if (elementArr[key] > 0 && elementArr[key] < 300) { | ||
309 | if (currentHeading !== key) { | ||
310 | highlightNav(key); | ||
311 | currentHeading = key; | ||
312 | } | ||
313 | break; | ||
314 | } | ||
315 | } | ||
316 | } | ||
317 | </script> | ||
318 | |||
319 | </html> | ||