diff --git a/app.js b/app.js
index 8a1a834..6c0eae4 100644
--- a/app.js
+++ b/app.js
@@ -3,7 +3,7 @@ const express = require('express'); /* TYPE IN TERMINAL: "npm install express"
const bodyParser = require('body-parser'); /* TYPE IN TERMINAL: "npm install body-parser" */
const { PythonShell } = require('python-shell'); /* TYPE IN TERMINAL: "npm install python-shell" */
const path = require('path');
-const urlElectron = path.join(__dirname, "src/main.html");
+const urlElectron = path.join(__dirname, "src/index.html");
// Maak een Express-app
const server = express();
@@ -40,8 +40,8 @@ server.listen(PORT, () => {
// Maak de Electron applicatie aan met bijbehorende waardes
function createWindow() {
const mainWindow = new BrowserWindow({
- width: 800,
- height: 600,
+ width: 1280,
+ height: 800,
webPreferences: {
nodeIntegration: true,
contextIsolation: false
diff --git a/src/css/style.css b/src/css/style.css
index 244b0cb..d4e140e 100644
--- a/src/css/style.css
+++ b/src/css/style.css
@@ -1,3 +1,93 @@
+/*default colors*/
+@import url("https://fonts.googleapis.com/css2?family=Akaya+Kanadaka&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Afacad:ital,wght@0,400..700;1,400..700&display=swap");
+/* The Main container and border*/
+body {
+ background-image: url("../images/achtergrond.png");
+ background-repeat: no-repeat;
+ background-size: cover;
+ font-family: "Afacad", sans-serif;
+}
+
+.mainContainer {
+ margin: 2rem;
+ height: 37rem;
+ background-color: rgba(255, 255, 255, 0.95);
+ border-radius: 40px;
+ padding: 2rem;
+}
+.mainContainer .mainBorder {
+ padding: 1rem 0;
+ height: 35rem;
+ border: solid 5px rgb(171, 211, 174);
+ border-radius: 40px;
+}
+.mainContainer .mainBorder .content {
+ display: grid;
+ grid-template-columns: 3fr 1fr 3fr;
+ height: 100%;
+}
+.mainContainer .mainBorder .content .kant-links {
+ grid-column: 1;
+}
+.mainContainer .mainBorder .content .kant-links #planten {
+ width: 100%;
+ border-collapse: collapse;
+}
+.mainContainer .mainBorder .content .kant-links #planten td article {
+ height: 7rem;
+ width: 10rem;
+ padding: 0.6rem;
+ margin: 0.1rem;
+ margin-left: 2rem;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ border: solid 3px rgb(171, 211, 174);
+ border-radius: 40px;
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+}
+.mainContainer .mainBorder .content .kant-links #planten td article #toevoegen {
+ height: 5rem;
+ width: 5rem;
+}
+.mainContainer .mainBorder .content .kant-links #planten td article h2 {
+ color: gray;
+}
+.mainContainer .mainBorder .content .kant-links #planten td article:hover {
+ background-color: lightgray;
+}
+.mainContainer .mainBorder .content .kant-rechts {
+ grid-column: 3;
+ margin-right: 2rem;
+}
+.mainContainer .mainBorder .content .kant-rechts #metingen {
+ border: solid 3px rgb(171, 211, 174);
+ border-radius: 40px;
+}
+.mainContainer .mainBorder .content .kant-rechts #metingen #main-waardes {
+ display: flex;
+ justify-content: space-evenly;
+ padding: 0.5rem;
+ padding-bottom: 0;
+ width: 100%;
+}
+.mainContainer .mainBorder .content .kant-rechts #metingen #main-waardes table {
+ display: flex;
+ justify-content: space-around;
+}
+
+/* Divider */
+.divider {
+ display: flex;
+ justify-content: center;
+ border: solid 1px rgb(171, 211, 174);
+ border-radius: 5px;
+ width: 80%;
+ margin: 0 auto;
+}
+
/* The Modal (background) */
.modal {
display: none;
diff --git a/src/css/style.css.map b/src/css/style.css.map
index 05f19ef..ae223fa 100644
--- a/src/css/style.css.map
+++ b/src/css/style.css.map
@@ -1 +1 @@
-{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"AAAA,2BAAA;AAEA;EAEI,aAAA;EACA,eAAA;EACA,YAAA;EACA,SAAA;EACA,QAAA;EACA,gCAAA;EACA,iBAAA;EACA,aAAA;EACA,wCAAA;EACA,WAAA;EACA,YAAA;EACA,uBAAA;EACA,mBAAA;ACDJ;ADGI;EAEI,WAAA;EACA,YAAA;EACA,eAAA;EACA,iBAAA;ACFR;ADIQ;EAGI,YAAA;EACA,qBAAA;EACA,eAAA;ACJZ","file":"style.css"}
\ No newline at end of file
+{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"AAAA,iBAAA;AAKQ,mFAAA;AACA,2GAAA;AAMR,iCAAA;AACA;EAEI,kDAAA;EACA,4BAAA;EACA,sBAAA;EACA,iCARQ;ACDZ;;ADYA;EAEI,YAAA;EACA,aAAA;EACA,2CAAA;EACA,mBAAA;EACA,aAAA;ACVJ;ADYI;EAEI,eAAA;EACA,aAAA;EACA,oCAAA;EACA,mBAAA;ACXR;ADaQ;EAEI,aAAA;EACA,kCAAA;EACA,YAAA;ACZZ;ADgBgB;EAEI,cAAA;ACfpB;ADiBoB;EAEI,WAAA;EACA,yBAAA;AChBxB;ADoB4B;EAEI,YAAA;EACA,YAAA;EACA,eAAA;EACA,cAAA;EACA,iBAAA;EACA,aAAA;EACA,sBAAA;EACA,uBAAA;EACA,mBAAA;EACA,oCAAA;EACA,mBAAA;EACA,wCAAA;ACnBhC;ADqBgC;EAEI,YAAA;EACA,WAAA;ACpBpC;ADuBgC;EAEI,WAAA;ACtBpC;ADyBgC;EAEI,2BAAA;ACxBpC;ADgCgB;EAEI,cAAA;EACA,kBAAA;AC/BpB;ADiCoB;EAGI,oCAAA;EACA,mBAAA;ACjCxB;ADmCwB;EAEA,aAAA;EACA,6BAAA;EACA,eAAA;EACA,iBAAA;EACA,WAAA;AClCxB;ADoC4B;EAEI,aAAA;EACA,6BAAA;ACnChC;;AD8CA,YAAA;AACA;EACI,aAAA;EACA,uBAAA;EACA,oCAAA;EACA,kBAAA;EACA,UAAA;EACA,cAAA;AC3CJ;;AD8CA,2BAAA;AAEA;EAEI,aAAA;EACA,eAAA;EACA,YAAA;EACA,SAAA;EACA,QAAA;EACA,gCAAA;EACA,iBAAA;EACA,aAAA;EACA,wCAAA;EACA,WAAA;EACA,YAAA;EACA,uBAAA;EACA,mBAAA;AC7CJ;AD+CI;EAEI,WAAA;EACA,YAAA;EACA,eAAA;EACA,iBAAA;AC9CR;ADgDQ;EAGI,YAAA;EACA,qBAAA;EACA,eAAA;AChDZ","file":"style.css"}
\ No newline at end of file
diff --git a/src/css/style.scss b/src/css/style.scss
index 0cf398b..3655136 100644
--- a/src/css/style.scss
+++ b/src/css/style.scss
@@ -1,3 +1,137 @@
+/*default colors*/
+
+$primary-color: rgb(171, 211, 174);
+$secondary-color: rgb(143, 188, 143);
+
+@import url('https://fonts.googleapis.com/css2?family=Akaya+Kanadaka&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Afacad:ital,wght@0,400..700;1,400..700&display=swap');
+
+$font-titels: "Akaya Kanadaka", system-ui;
+;
+$font-text: "Afacad", sans-serif;
+
+/* The Main container and border*/
+body
+{
+ background-image: url("../images/achtergrond.png");
+ background-repeat: no-repeat;
+ background-size: cover;
+ font-family: $font-text;
+}
+
+.mainContainer
+{
+ margin: 2rem;
+ height: 37rem;
+ background-color: rgb(255, 255, 255, 95%);
+ border-radius: 40px;
+ padding: 2rem;
+
+ .mainBorder
+ {
+ padding: 1rem 0;
+ height: 35rem;
+ border: solid 5px $primary-color;
+ border-radius: 40px;
+
+ .content
+ {
+ display: grid;
+ grid-template-columns: 3fr 1fr 3fr;
+ height: 100%;
+
+ .kant
+ {
+ &-links
+ {
+ grid-column: 1;
+
+ #planten
+ {
+ width: 100%;
+ border-collapse: collapse;
+
+ td
+ {
+ article
+ {
+ height: 7rem;
+ width: 10rem;
+ padding: .6rem;
+ margin: .1rem;
+ margin-left: 2rem;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ border: solid 3px $primary-color;
+ border-radius: 40px;
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+
+ #toevoegen
+ {
+ height: 5rem;
+ width: 5rem;
+ }
+
+ h2
+ {
+ color: gray;
+ }
+
+ &:hover
+ {
+ background-color: lightgray;
+ }
+
+
+ }
+ }
+ }
+ }
+ &-rechts
+ {
+ grid-column: 3;
+ margin-right: 2rem;
+
+ #metingen
+ {
+
+ border: solid 3px $primary-color;
+ border-radius: 40px;
+
+ #main-waardes
+ {
+ display: flex;
+ justify-content: space-evenly;
+ padding: .5rem;
+ padding-bottom: 0;
+ width: 100%;
+
+ table
+ {
+ display: flex;
+ justify-content: space-around;
+ // width: 100%;
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+}
+
+/* Divider */
+.divider {
+ display: flex;
+ justify-content: center;
+ border: solid 1px $primary-color;
+ border-radius: 5px;
+ width: 80%;
+ margin: 0 auto;
+}
+
/* The Modal (background) */
.modal
diff --git a/src/images/Icon awesome-apple-alt.png b/src/images/Icon awesome-apple-alt.png
new file mode 100644
index 0000000..6fbb70b
Binary files /dev/null and b/src/images/Icon awesome-apple-alt.png differ
diff --git a/src/images/Toevoegen.png b/src/images/Toevoegen.png
new file mode 100644
index 0000000..3878c7e
Binary files /dev/null and b/src/images/Toevoegen.png differ
diff --git a/src/images/achtergrond.png b/src/images/achtergrond.png
new file mode 100644
index 0000000..aea4958
Binary files /dev/null and b/src/images/achtergrond.png differ
diff --git a/src/index.html b/src/index.html
new file mode 100644
index 0000000..c0b0297
--- /dev/null
+++ b/src/index.html
@@ -0,0 +1,117 @@
+
+
+
+
+
+ Document
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ |
+ Waardes
+ |
+
+ Huidig
+ |
+
+ 24u gemiddelde
+ |
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/main.html b/src/main.html
deleted file mode 100644
index 3a9eb22..0000000
--- a/src/main.html
+++ /dev/null
@@ -1,47 +0,0 @@
-
-
-
-
-
- Document
-
-
-
-
-
-
-
- ![]()
- Tomaat
-
-
-
- ![]()
-
-
-
-
-
- ×
-
-
-
-
-
\ No newline at end of file
+ 
+