5 files changed, 76 insertions, 0 deletions
diff --git a/lambda-calcul/haskell/public/index.html b/lambda-calcul/haskell/public/index.html
index c893865..3329442 100644
--- a/lambda-calcul/haskell/public/index.html
+++ b/lambda-calcul/haskell/public/index.html
@@ -3,6 +3,7 @@
   <head>
     <meta charset="UTF-8">
     <title>Minilang</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="/minilang.css" >
     <link rel="icon"
           type="image/png"
diff --git a/lambda-calcul/haskell/public/leaderboard.html b/lambda-calcul/haskell/public/leaderboard.html
new file mode 100644
index 0000000..6f7ef91
--- /dev/null
+++ b/lambda-calcul/haskell/public/leaderboard.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+
+  <head>
+    <meta charset="utf-8">
+    <title>Leaderboard</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="/minilang.css" >
+    <link rel="icon"
+          type="image/png"
+          href="/pi.png">
+    <link href="https://fonts.googleapis.com/css?family=Inconsolata&display=swap" rel="stylesheet">
+  </head>
+  <body>
+    <h1>Leaderboard</h1>
+    <div class="leaderboard choice">
+      <table id="leaderboard">
+        <thead>
+          <tr><th>Name</th><th>Grade</th><th>Last test</th></tr>
+        </thead>
+        <tbody>
+          <tr><td>Foo</td><td class="score">12</td><td></td></tr>
+        </tbody>
+      </table>
+    </div>
+    <script src="leaderboard.js"></script>
+  </body>
+</html>
diff --git a/lambda-calcul/haskell/public/leaderboard.js b/lambda-calcul/haskell/public/leaderboard.js
new file mode 100644
index 0000000..b8c1a9a
--- /dev/null
+++ b/lambda-calcul/haskell/public/leaderboard.js
@@ -0,0 +1,13 @@
+const updateLeaderboard = () => {
+  const rows = document.querySelectorAll('table#leaderboard > tbody > tr');
+
+  rows.forEach(row => {
+    const scoreCell = row.querySelector('td.score');
+    const randomScore = Math.floor(Math.random() * 1000);
+    scoreCell.textContent = randomScore;
+  });
+};
+
+document.addEventListener('DOMContentLoaded', () => {
+  setInterval(updateLeaderboard, 5000);
+});
diff --git a/lambda-calcul/haskell/public/minilang.css b/lambda-calcul/haskell/public/minilang.css
index 2c9e6a1..546eb69 100644
--- a/lambda-calcul/haskell/public/minilang.css
+++ b/lambda-calcul/haskell/public/minilang.css
@@ -79,6 +79,8 @@ button#send {
 
 h1 {
     text-align: center;
+    width: 100%;
+    display: block;
 }
 
 div.choice {
@@ -101,3 +103,34 @@ div.choice a {
     border-radius: 10px;
     flex: 2 1  250px;;
 }
+
+table {
+     align-self: stretch;
+     width: 100%;
+     border-collapse: collapse;
+}
+
+table, th, td {
+    border: 1px solid black;
+}
+
+th, td {
+    padding: 15px;
+    text-align: left;
+}
+
+th {
+    background-color: #f2f2f2;
+}
+
+tr:nth-child(even) {
+    background-color: #f2f2f2;
+}
+
+.success {
+    background-color: green;
+}
+
+.fail {
+    background-color: red;
+}
diff --git a/lambda-calcul/haskell/public/repl.html b/lambda-calcul/haskell/public/repl.html
index 85801d7..ee24236 100644
--- a/lambda-calcul/haskell/public/repl.html
+++ b/lambda-calcul/haskell/public/repl.html
@@ -3,6 +3,7 @@
   <head>
     <meta charset="UTF-8">
     <title>Minilang</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="/minilang.css" >
     <link rel="icon"
           type="image/png"