diff --git a/.gitignore b/.gitignore
index 32e01620452213ff45f0bbcf431e6a367642f7c7..ae176591e95853f4c78a512c806ecbcd692e081a 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,4 +1,4 @@
node_modules/
yarn.lock
-
+dummyKaras\.json
*.log
diff --git a/client/main.js b/client/main.js
index f3fc6a7e29d490a77cf0d40456a1e1d229b807de..faf61ffa63306a6804903882eadb801b738bf185 100644
--- a/client/main.js
+++ b/client/main.js
@@ -10,6 +10,11 @@ console.log('Express started');
var publicRouter = require('./routes/public.js');
+app.set('views', __dirname + '/views');
+app.set('view engine', 'ejs');
+
+app.use(express.static(__dirname + '/../style'));
+
app.use('/', publicRouter);
diff --git a/client/routes/public.js b/client/routes/public.js
index ed2f5b7679fd6f6c1772548a63d03727fb3b5b82..a410380db81282d7671e543b8cd74ef177ddf6c6 100644
--- a/client/routes/public.js
+++ b/client/routes/public.js
@@ -1,9 +1,14 @@
var express = require('express');
var router = express.Router();
+
+// Simulate karaoke data
+dummyKaras = require('./../../dummyKaras.json');
+
+
/* GET on root. */
router.get('/', function(req, res, next) {
- res.send('This is the public client interface !');
+ res.render('public', { karas: dummyKaras });
});
module.exports = router;
\ No newline at end of file
diff --git a/client/views/public.ejs b/client/views/public.ejs
new file mode 100644
index 0000000000000000000000000000000000000000..ea706fedc8d12352eda019c5352709f92c0292aa
--- /dev/null
+++ b/client/views/public.ejs
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="UTF-8">
+ <title>Lektor App</title>
+ <link rel="stylesheet" href="/bootstrap-4.5.2-dist/css/bootstrap.min.css" type="text/css">
+ </head>
+ <body>
+ <div class="container-fluid">
+ <div class="card text-center">
+ <h2>
+ Public interface
+ </h2>
+ <% karas.forEach(function(kara){ %>
+ <div class="card border border-primary rounded" style="border-width: 5px; margin-bottom: 10px; margin-top: 10px;">
+ <div class="card-header">
+ <h3>
+ <%- kara.source_name + " - " + kara.song_type + " - " + kara.song_name %>
+ </h3>
+
+ </div>
+ <div class="card-body">
+ <h3>
+ <%- kara.author_name %><br/>
+ <%- kara.language %><br/>
+ <%- kara.category %><br/>
+ </h3>
+
+ </div>
+ </div>
+ <% }); %>
+ </div>
+ </div>
+ </body>
+</html>
\ No newline at end of file
diff --git a/package.json b/package.json
index ff13b29cd5863818ecda05be3aa9af32dc02ec8d..1c878c229805690a5e5a57a1463c5972c0194849 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
"start": "electron ."
},
"dependencies": {
+ "ejs": "^3.1.5",
"electron": "^10.1.1",
"express": "^4.17.1"
},