diff options
Diffstat (limited to 'site/public/index.html')
| -rw-r--r-- | site/public/index.html | 223 |
1 files changed, 223 insertions, 0 deletions
diff --git a/site/public/index.html b/site/public/index.html new file mode 100644 index 0000000..0177355 --- /dev/null +++ b/site/public/index.html | |||
| @@ -0,0 +1,223 @@ | |||
| 1 | <!DOCTYPE html> | ||
| 2 | <html lang="en"> | ||
| 3 | |||
| 4 | <head> | ||
| 5 | <meta charset="UTF-8"> | ||
| 6 | <title></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="http://localhost:8080/juice.css"> | ||
| 28 | |||
| 29 | |||
| 30 | </head> | ||
| 31 | |||
| 32 | <body> | ||
| 33 | |||
| 34 | |||
| 35 | <header class="pos-absolute" style="background-color: transparent"> | ||
| 36 | |||
| 37 | |||
| 38 | <a href="http://localhost:8080/"> | ||
| 39 | <div class="logo"> | ||
| 40 | <img src="http://localhost:8080/gradecoin.png" alt="logo"> | ||
| 41 | Gradecoin | ||
| 42 | </div> | ||
| 43 | </a> | ||
| 44 | |||
| 45 | <nav> | ||
| 46 | |||
| 47 | <a class="nav-item subtitle-text" href="http://localhost:8080/block-docs/">Blocks</a> | ||
| 48 | |||
| 49 | <a class="nav-item subtitle-text" href="http://localhost:8080/transaction-docs/">Transactions</a> | ||
| 50 | |||
| 51 | <a class="nav-item subtitle-text" href="http://localhost:8080/register-docs/">Register</a> | ||
| 52 | |||
| 53 | <a class="nav-item subtitle-text" href="http://localhost:8080/jwt/">JWT</a> | ||
| 54 | |||
| 55 | |||
| 56 | |||
| 57 | <a class="nav-item subtitle-text" href="https://github.com/zhuowei/nft_ptr#why">why?</a> | ||
| 58 | |||
| 59 | |||
| 60 | </nav> | ||
| 61 | |||
| 62 | </header> | ||
| 63 | |||
| 64 | <div class="hero"> | ||
| 65 | |||
| 66 | <section class="text-center"> | ||
| 67 | <h1 class="heading-text" style="font-size: 50px"> | ||
| 68 | Mine your own grades | ||
| 69 | </h1> | ||
| 70 | <h3 class="title-text"> | ||
| 71 | <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 | ||
| 72 | </h3> | ||
| 73 | <div> | ||
| 74 | <!-- <a class="github-button" href="https://github.com/huhu/juice" data-size="large" data-show-count="true" --> | ||
| 75 | <!-- aria-label="Star huhu/juice on GitHub">Star</a> --> | ||
| 76 | <!-- <a class="github-button" href="https://github.com/huhu/juice/fork" data-size="large" --> | ||
| 77 | <!-- data-show-count="true" aria-label="Fork huhu/juice on GitHub">Fork</a> --> | ||
| 78 | </div> | ||
| 79 | </section> | ||
| 80 | <img class="hero-image" style="width: 50%" src="http://localhost:8080/gradecoin.png"> | ||
| 81 | |||
| 82 | <div class="explore-more text" | ||
| 83 | onclick="document.getElementById('features').scrollIntoView({behavior: 'smooth'})"> | ||
| 84 | ⇩ Learn How ⇩ | ||
| 85 | </div> | ||
| 86 | <style> | ||
| 87 | .hero section { | ||
| 88 | padding: 0 5rem; | ||
| 89 | } | ||
| 90 | @media screen and (max-width: 768px) { | ||
| 91 | .hero section { | ||
| 92 | padding: 0 2rem; | ||
| 93 | } | ||
| 94 | |||
| 95 | .hero-image { | ||
| 96 | display: none | ||
| 97 | } | ||
| 98 | } | ||
| 99 | </style> | ||
| 100 | |||
| 101 | </div> | ||
| 102 | |||
| 103 | |||
| 104 | |||
| 105 | <main> | ||
| 106 | |||
| 107 | |||
| 108 | |||
| 109 | |||
| 110 | |||
| 111 | <div class="toc"> | ||
| 112 | <div class="toc-sticky"> | ||
| 113 | |||
| 114 | <div class="toc-item"> | ||
| 115 | <a class="subtext" href="http://localhost:8080/#services">Services</a> | ||
| 116 | </div> | ||
| 117 | |||
| 118 | |||
| 119 | <div class="toc-item-child"> | ||
| 120 | <a class="subtext" href="http://localhost:8080/#register"><small>- /register</small></a> | ||
| 121 | </div> | ||
| 122 | |||
| 123 | <div class="toc-item-child"> | ||
| 124 | <a class="subtext" href="http://localhost:8080/#transaction"><small>- /transaction</small></a> | ||
| 125 | </div> | ||
| 126 | |||
| 127 | <div class="toc-item-child"> | ||
| 128 | <a class="subtext" href="http://localhost:8080/#block"><small>- /block</small></a> | ||
| 129 | </div> | ||
| 130 | |||
| 131 | |||
| 132 | |||
| 133 | </div> | ||
| 134 | </div> | ||
| 135 | |||
| 136 | |||
| 137 | |||
| 138 | <div class="content text"> | ||
| 139 | |||
| 140 | <div id="features" class="heading-text">Overview</div> | ||
| 141 | <ul> | ||
| 142 | <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> | ||
| 143 | <li><a href="https://jwt.io">JWT Debugger</a> and the corresponding <a href="https://tools.ietf.org/html/rfc7519">RFC</a></li> | ||
| 144 | </ul> | ||
| 145 | <h1 id="services">Services</h1> | ||
| 146 | <h2 id="register">/register</h2> | ||
| 147 | <ul> | ||
| 148 | <li>Student creates their own 2048 bit RSA <code>keypair</code></li> | ||
| 149 | <li>Downloads <code>Gradecoin</code>'s Public Key from <a href="https://odtuclass.metu.edu.tr/my/">Moodle</a></li> | ||
| 150 | <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> | ||
| 151 | <li>Their public key is now in our database and can be used to sign their JWT's during requests</li> | ||
| 152 | </ul> | ||
| 153 | <h2 id="transaction">/transaction</h2> | ||
| 154 | <ul> | ||
| 155 | <li>You can offer a <a href="/transaction">Transaction</a> - POST request | ||
| 156 | <ul> | ||
| 157 | <li>The request should have <code>Authorization</code></li> | ||
| 158 | <li>The request header should be signed by the Public Key of the <code>by</code> field in the transaction</li> | ||
| 159 | </ul> | ||
| 160 | </li> | ||
| 161 | <li>fetch the list of <code>Transaction</code>s - GET request</li> | ||
| 162 | </ul> | ||
| 163 | <h2 id="block">/block</h2> | ||
| 164 | <ul> | ||
| 165 | <li>offer a [<code>schema::Block</code>] - POST request | ||
| 166 | <ul> | ||
| 167 | <li>The request should have <code>Authorization</code></li> | ||
| 168 | <li>The [<code>schema::Block::transaction_list</code>] of the block should be a subset of [<code>schema::Db::pending_transactions</code>]</li> | ||
| 169 | </ul> | ||
| 170 | </li> | ||
| 171 | <li>fetch the last accepted [<code>schema::Block</code>] - GET request</li> | ||
| 172 | </ul> | ||
| 173 | <p><code>Authorization</code>: The request header should have Bearer JWT.Token signed with Student Public Key</p> | ||
| 174 | |||
| 175 | |||
| 176 | </div> | ||
| 177 | |||
| 178 | |||
| 179 | |||
| 180 | </main> | ||
| 181 | |||
| 182 | |||
| 183 | <footer> | ||
| 184 | ⁂ | ||
| 185 | </footer> | ||
| 186 | |||
| 187 | </body> | ||
| 188 | <script> | ||
| 189 | function highlightNav(heading) { | ||
| 190 | let pathname = location.pathname; | ||
| 191 | document.querySelectorAll(".toc a").forEach((item) => { | ||
| 192 | item.classList.remove("active"); | ||
| 193 | }); | ||
| 194 | document.querySelector(".toc a[href$='" + pathname + "#" + heading + "']").classList.add("active"); | ||
| 195 | } | ||
| 196 | |||
| 197 | let currentHeading = ""; | ||
| 198 | window.onscroll = function () { | ||
| 199 | let h = document.querySelectorAll("h1,h2,h3,h4,h5,h6"); | ||
| 200 | let elementArr = []; | ||
| 201 | |||
| 202 | h.forEach(item => { | ||
| 203 | if (item.id !== "") { | ||
| 204 | elementArr[item.id] = item.getBoundingClientRect().top; | ||
| 205 | } | ||
| 206 | }); | ||
| 207 | elementArr.sort(); | ||
| 208 | for (let key in elementArr) { | ||
| 209 | if (!elementArr.hasOwnProperty(key)) { | ||
| 210 | continue; | ||
| 211 | } | ||
| 212 | if (elementArr[key] > 0 && elementArr[key] < 300) { | ||
| 213 | if (currentHeading !== key) { | ||
| 214 | highlightNav(key); | ||
| 215 | currentHeading = key; | ||
| 216 | } | ||
| 217 | break; | ||
| 218 | } | ||
| 219 | } | ||
| 220 | } | ||
| 221 | </script> | ||
| 222 | |||
| 223 | </html> | ||
