0.2
This commit is contained in:
Burak
236
src/css/style.css
Normal file
236
src/css/style.css
Normal file
@@ -0,0 +1,236 @@
|
||||
/*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");
|
||||
h1, h2, h3, h4, h5 {
|
||||
font-family: "Akaya Kanadaka", system-ui;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
p, td {
|
||||
font-family: "Afacad", sans-serif;
|
||||
}
|
||||
|
||||
body {
|
||||
background-image: url("../images/achtergrond.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
}
|
||||
body .mainContainer {
|
||||
width: 85vw;
|
||||
height: 38rem;
|
||||
background-color: rgba(255, 255, 255, 0.95);
|
||||
border-radius: 40px;
|
||||
padding: 2rem;
|
||||
}
|
||||
body .mainContainer .goodgarden-logo {
|
||||
position: absolute;
|
||||
width: 10vw;
|
||||
left: 50%;
|
||||
top: 2.5rem;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
body .mainContainer .informatie-kas-main-container {
|
||||
display: grid;
|
||||
grid-template-columns: 5fr 7fr;
|
||||
}
|
||||
body .mainContainer .mainBorder {
|
||||
padding: 1.25rem 1.5rem;
|
||||
height: 35rem;
|
||||
border: solid 5px rgb(171, 211, 174);
|
||||
border-radius: 40px;
|
||||
}
|
||||
body .mainContainer .mainBorder .pagina-titel {
|
||||
font-size: 2rem;
|
||||
margin-left: 1.5rem;
|
||||
}
|
||||
body .mainContainer .mainBorder #sectie-1 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
padding: 0 2.5rem 0 1rem;
|
||||
position: relative;
|
||||
}
|
||||
body .mainContainer .mainBorder #sectie-1 .parent-algemeen-overzicht {
|
||||
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
|
||||
border-radius: 40px;
|
||||
padding: 1rem;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
body .mainContainer .mainBorder #sectie-1 .parent-algemeen-overzicht .algemeen-overzicht {
|
||||
border: solid 2px rgb(171, 211, 174);
|
||||
border-radius: 35px;
|
||||
font-size: 1.25rem;
|
||||
padding: 0.5rem 1rem;
|
||||
}
|
||||
body .mainContainer .mainBorder #sectie-1 .parent-algemeen-overzicht .algemeen-overzicht .table-informatie-kas {
|
||||
width: 100%;
|
||||
}
|
||||
body .mainContainer .mainBorder #sectie-1 .parent-algemeen-overzicht .algemeen-overzicht .table-informatie-kas .tr-informatie-kas {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
text-align: left;
|
||||
}
|
||||
body .mainContainer .mainBorder #sectie-1 .grafiek {
|
||||
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
|
||||
border-radius: 40px;
|
||||
padding: 1rem;
|
||||
position: relative;
|
||||
}
|
||||
body .mainContainer .mainBorder #sectie-1 .grafiek .grafiek-innerbox {
|
||||
border: solid 2px rgb(171, 211, 174);
|
||||
border-radius: 35px;
|
||||
font-size: 1.25rem;
|
||||
padding: 0 1rem 2.5rem;
|
||||
height: 225px;
|
||||
}
|
||||
body .mainContainer .mainBorder #sectie-1 .grafiek .grafiek-innerbox h2 {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
body .mainContainer .mainBorder #sectie-1 .grafiek .grafiek-innerbox canvas {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
body .mainContainer .mainBorder #sectie-1 .content {
|
||||
display: grid;
|
||||
grid-template-columns: 3fr 1fr 3fr;
|
||||
height: 100%;
|
||||
}
|
||||
body .mainContainer .mainBorder #sectie-1 .content .kant-links {
|
||||
grid-column: 1;
|
||||
}
|
||||
body .mainContainer .mainBorder #sectie-1 .content .kant-links #planten {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
body .mainContainer .mainBorder #sectie-1 .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);
|
||||
}
|
||||
body .mainContainer .mainBorder #sectie-1 .content .kant-links #planten td article #toevoegen {
|
||||
height: 5rem;
|
||||
width: 5rem;
|
||||
}
|
||||
body .mainContainer .mainBorder #sectie-1 .content .kant-links #planten td article h2 {
|
||||
color: gray;
|
||||
}
|
||||
body .mainContainer .mainBorder #sectie-1 .content .kant-links #planten td article:hover {
|
||||
background-color: lightgray;
|
||||
}
|
||||
body .mainContainer .mainBorder #sectie-1 .content .kant-rechts {
|
||||
grid-column: 3;
|
||||
}
|
||||
body .mainContainer .mainBorder #sectie-1 .content .kant-rechts #metingen {
|
||||
border: solid 3px rgb(171, 211, 174);
|
||||
border-radius: 40px;
|
||||
}
|
||||
body .mainContainer .mainBorder #sectie-1 .content .kant-rechts #metingen #main-waardes {
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
padding: 0.5rem;
|
||||
padding-bottom: 0;
|
||||
width: 100%;
|
||||
}
|
||||
body .mainContainer .mainBorder #sectie-1 .content .kant-rechts #metingen #main-waardes table {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
}
|
||||
body .mainContainer .mainBorder .grid-column-2 {
|
||||
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
|
||||
border-radius: 40px;
|
||||
padding: 1rem;
|
||||
margin: 3.25rem 1rem 1.25rem 1rem;
|
||||
}
|
||||
body .mainContainer .mainBorder .grid-column-2 .grid-2-child {
|
||||
border: solid 2px rgb(171, 211, 174);
|
||||
border-radius: 35px;
|
||||
height: 100%;
|
||||
}
|
||||
body .mainContainer .mainBorder .grid-column-2 .grid-2-child .parent-table {
|
||||
padding: 1.5rem 2rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
height: 90%;
|
||||
}
|
||||
body .mainContainer .mainBorder .grid-column-2 .grid-2-child .parent-table table tr td {
|
||||
font-size: 1.05rem;
|
||||
}
|
||||
body .mainContainer .mainBorder .grid-column-2 .grid-2-child .parent-table .kas-table-1 tr td {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
body .mainContainer .mainBorder .grid-column-2 .grid-2-child .parent-table .kas-table-2 {
|
||||
position: relative;
|
||||
}
|
||||
body .mainContainer .mainBorder .grid-column-2 .grid-2-child .parent-table .kas-table-2::after, body .mainContainer .mainBorder .grid-column-2 .grid-2-child .parent-table .kas-table-2::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 1px;
|
||||
width: 90%;
|
||||
background: black;
|
||||
}
|
||||
body .mainContainer .mainBorder .grid-column-2 .grid-2-child .parent-table .kas-table-2::after {
|
||||
bottom: -20px;
|
||||
}
|
||||
body .mainContainer .mainBorder .grid-column-2 .grid-2-child .parent-table .kas-table-2::before {
|
||||
top: -20px;
|
||||
}
|
||||
|
||||
/* 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;
|
||||
position: fixed;
|
||||
z-index: 999;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
background: white;
|
||||
padding: 1.25rem;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
||||
width: 30vw;
|
||||
height: auto;
|
||||
border: solid 2px black;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.modal .close {
|
||||
color: #aaa;
|
||||
float: right;
|
||||
font-size: 1.75rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
.modal .close:hover, .modal .close:active {
|
||||
color: black;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
}/*# sourceMappingURL=style.css.map */
|
||||
1
src/css/style.css.map
Normal file
1
src/css/style.css.map
Normal file
@@ -0,0 +1 @@
|
||||
{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"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","file":"style.css"}
|
||||
386
src/css/style.scss
Normal file
386
src/css/style.scss
Normal file
@@ -0,0 +1,386 @@
|
||||
/*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;
|
||||
|
||||
@mixin flexbox
|
||||
{
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
@mixin groene-border
|
||||
{
|
||||
border: solid 2px $primary-color;
|
||||
}
|
||||
|
||||
@mixin box-shadow
|
||||
{
|
||||
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
@mixin border-radius
|
||||
{
|
||||
border-radius: 40px;
|
||||
}
|
||||
|
||||
@mixin inner-border-radius
|
||||
{
|
||||
border-radius: 35px;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5
|
||||
{
|
||||
font-family: $font-titels;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
p, td
|
||||
{
|
||||
font-family: $font-text;
|
||||
}
|
||||
|
||||
body
|
||||
{
|
||||
background-image: url("../images/achtergrond.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
// font-family: $font-text;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
|
||||
.mainContainer
|
||||
{
|
||||
width: 85vw;
|
||||
height: 38rem;
|
||||
background-color: rgb(255, 255, 255, 95%);
|
||||
border-radius: 40px;
|
||||
padding: 2rem;
|
||||
|
||||
.goodgarden-logo
|
||||
{
|
||||
// z-index: inherit;
|
||||
position: absolute;
|
||||
width: 10vw;
|
||||
left: 50%;
|
||||
top: 2.5rem;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.informatie-kas-main-container
|
||||
{
|
||||
display: grid;
|
||||
grid-template-columns: 5fr 7fr;
|
||||
}
|
||||
|
||||
.mainBorder
|
||||
{
|
||||
padding: 1.25rem 1.5rem;
|
||||
height: 35rem;
|
||||
border: solid 5px $primary-color;
|
||||
border-radius: 40px;
|
||||
|
||||
.pagina-titel
|
||||
{
|
||||
font-size: 2rem;
|
||||
margin-left: 1.5rem;
|
||||
}
|
||||
|
||||
#sectie-1
|
||||
{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
padding: 0 2.5rem 0 1rem;
|
||||
position: relative;
|
||||
|
||||
.parent-algemeen-overzicht
|
||||
{
|
||||
@include box-shadow;
|
||||
@include border-radius;
|
||||
padding: 1rem;
|
||||
margin-top: 1rem;
|
||||
|
||||
|
||||
.algemeen-overzicht
|
||||
{
|
||||
@include groene-border;
|
||||
@include inner-border-radius;
|
||||
font-size: 1.25rem;
|
||||
padding: .5rem 1rem;
|
||||
// background-color: red;
|
||||
|
||||
.table-informatie-kas
|
||||
{
|
||||
width: 100%;
|
||||
|
||||
.tr-informatie-kas
|
||||
{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.grafiek
|
||||
{
|
||||
@include box-shadow;
|
||||
@include border-radius;
|
||||
padding: 1rem;
|
||||
position: relative;
|
||||
|
||||
.grafiek-innerbox
|
||||
{
|
||||
@include groene-border;
|
||||
@include inner-border-radius;
|
||||
font-size: 1.25rem;
|
||||
padding: 0 1rem 2.5rem;
|
||||
height: 225px;
|
||||
// position: relative;
|
||||
|
||||
h2
|
||||
{
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
canvas
|
||||
{
|
||||
// Zorgt ervoor dat de grafiek precies in eht midden komt
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.grid-column-2
|
||||
{
|
||||
@include box-shadow;
|
||||
@include border-radius;
|
||||
padding: 1rem;
|
||||
margin: 3.25rem 1rem 1.25rem 1rem;
|
||||
|
||||
.grid-2-child
|
||||
{
|
||||
@include groene-border;
|
||||
@include inner-border-radius;
|
||||
height: 100%;
|
||||
|
||||
|
||||
.parent-table
|
||||
{
|
||||
padding: 1.5rem 2rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
// align-items: stretch;
|
||||
// gap: 2.5rem;
|
||||
justify-content: space-around;
|
||||
height: 90%;
|
||||
|
||||
table
|
||||
{
|
||||
tr
|
||||
{
|
||||
td
|
||||
{
|
||||
font-size: 1.05rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.kas-table-1
|
||||
{
|
||||
tr
|
||||
{
|
||||
td
|
||||
{
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.kas-table-2
|
||||
{
|
||||
position: relative;
|
||||
|
||||
&::after,
|
||||
&::before
|
||||
{
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 1px;
|
||||
width: 90%;
|
||||
background: black;
|
||||
}
|
||||
|
||||
&::after
|
||||
{
|
||||
bottom: -20px;
|
||||
}
|
||||
|
||||
&::before
|
||||
{
|
||||
top: -20px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Divider */
|
||||
.divider {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
border: solid 1px $primary-color;
|
||||
border-radius: 5px;
|
||||
width: 80%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* The Modal (background) */
|
||||
|
||||
.modal
|
||||
{
|
||||
display: none;
|
||||
position: fixed;
|
||||
z-index: 999;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
background: white;
|
||||
padding: 1.25rem;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
||||
width: 30vw;
|
||||
height: auto;
|
||||
border: solid 2px black;
|
||||
border-radius: 10px;
|
||||
|
||||
.close
|
||||
{
|
||||
color: #aaa;
|
||||
float: right;
|
||||
font-size: 1.75rem;
|
||||
font-weight: bold;
|
||||
|
||||
&:hover,
|
||||
&:active
|
||||
{
|
||||
color: black;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
BIN
src/images/Icon awesome-apple-alt.png
Normal file
BIN
src/images/Icon awesome-apple-alt.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
BIN
src/images/Toevoegen.png
Normal file
BIN
src/images/Toevoegen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 107 KiB |
BIN
src/images/achtergrond.png
Normal file
BIN
src/images/achtergrond.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 19 MiB |
BIN
src/images/logo.png
Normal file
BIN
src/images/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
119
src/index.html
Normal file
119
src/index.html
Normal file
@@ -0,0 +1,119 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
<link rel="stylesheet" href="./css/style.css">
|
||||
<script src="../script/main.js" defer></script>
|
||||
<!-- <script src="../script/main.py"></script> -->
|
||||
</head>
|
||||
<body>
|
||||
<section class="mainContainer">
|
||||
<section class="mainBorder">
|
||||
<section class="content">
|
||||
<section class="kant-links">
|
||||
<table id="planten">
|
||||
<tr>
|
||||
<td>
|
||||
<a href="../src/kas_informatie.html">
|
||||
<article class="article-1">
|
||||
<img src="images/Icon awesome-apple-alt.png" alt="">
|
||||
<h2>Tomaat</h2>
|
||||
</article>
|
||||
</a>
|
||||
</td>
|
||||
<td>
|
||||
<article>
|
||||
<img src="images/Icon awesome-apple-alt.png" alt="">
|
||||
<h2>Tomaat</h2>
|
||||
</article>
|
||||
</td>
|
||||
</tr>
|
||||
<!-- Second Row -->
|
||||
<tr>
|
||||
<td>
|
||||
<article>
|
||||
<img src="images/Icon awesome-apple-alt.png" alt="">
|
||||
<h2>Tomaat</h2>
|
||||
</article>
|
||||
</td>
|
||||
<td>
|
||||
<article>
|
||||
<img src="images/Icon awesome-apple-alt.png" alt="">
|
||||
<h2>Tomaat</h2>
|
||||
</article>
|
||||
</td>
|
||||
</tr>
|
||||
<!-- Third Row -->
|
||||
<tr>
|
||||
<td>
|
||||
<article>
|
||||
<img src="images/Icon awesome-apple-alt.png" alt="">
|
||||
<h2>Tomaat</h2>
|
||||
</article>
|
||||
</td>
|
||||
<td>
|
||||
<article>
|
||||
<img src="images/Icon awesome-apple-alt.png" alt="">
|
||||
<h2>Tomaat</h2>
|
||||
</article>
|
||||
</td>
|
||||
</tr>
|
||||
<!-- Fourth Row -->
|
||||
<tr>
|
||||
<td>
|
||||
<article>
|
||||
<img src="images/Icon awesome-apple-alt.png" alt="">
|
||||
<h2>Tomaat</h2>
|
||||
</article>
|
||||
</td>
|
||||
<td>
|
||||
<article id="modalButton" onclick="openModal()">
|
||||
<img id="toevoegen"src="images/Toevoegen.png" alt="">
|
||||
</article>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<div id="myModal" class="modal">
|
||||
<!-- Modal content -->
|
||||
<span class="close">×</span>
|
||||
<form action="http://localhost:3000/submit-form" method="post">
|
||||
<!-- Form content -->
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
<!-- White space -->
|
||||
<section>
|
||||
<p>a</p>
|
||||
</section>
|
||||
<section class="kant-rechts">
|
||||
<section id="metingen">
|
||||
<article id="main-waardes">
|
||||
<table>
|
||||
<tr>
|
||||
<td>
|
||||
<p>Waardes</p>
|
||||
</td>
|
||||
<td>
|
||||
<p>Huidig</p>
|
||||
</td>
|
||||
<td>
|
||||
<p>24u gemiddelde</p>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</article>
|
||||
<div class="divider">
|
||||
</div>
|
||||
<article>
|
||||
|
||||
</article>
|
||||
</section>
|
||||
</section>
|
||||
</section>
|
||||
</section>
|
||||
</section>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
122
src/js/main.js
Normal file
122
src/js/main.js
Normal file
@@ -0,0 +1,122 @@
|
||||
const { ipcRenderer } = require("electron");
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () =>
|
||||
{
|
||||
// Stuur een bericht naar de main process om het Python script uit te voeren
|
||||
// In je renderer.js (geladen met defer in je HTML)
|
||||
ipcRenderer.send('request-update-temp', ['some', 'arguments']);
|
||||
|
||||
ipcRenderer.on('update-temp-result', (event, newTemperature) => {
|
||||
if (newTemperature === 'error') {
|
||||
console.error('Er is een fout opgetreden bij het ophalen van de nieuwe temperatuur');
|
||||
} else {
|
||||
document.getElementById('bodem-temperatuur').textContent = newTemperature;
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
// function dataTablePython()
|
||||
// {
|
||||
// document.getElementById("")
|
||||
// }
|
||||
|
||||
function openModal()
|
||||
{
|
||||
const modal = document.getElementById("myModal");
|
||||
const button = document.getElementById("modalButton");
|
||||
const close = document.getElementsByClassName("close")[0];
|
||||
|
||||
// Toon de modal wanneer op de knop wordt geklikt
|
||||
button.onclick = function()
|
||||
{
|
||||
modal.style.display = "block";
|
||||
}
|
||||
|
||||
// Sluit de modal wanneer op het 'sluiten' icoon wordt geklikt
|
||||
close.onclick = function()
|
||||
{
|
||||
modal.style.display = "none";
|
||||
}
|
||||
|
||||
// Sluit de modal wanneer buiten de modal wordt geklikt
|
||||
window.onclick = function(event)
|
||||
{
|
||||
if (event.target == modal)
|
||||
{
|
||||
modal.style.display = "none";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* --- Functie om de grafiek te tekenen. Enigste belangrijke is de eerste 2 "const" arrays "data" & "xLabels".
|
||||
*/
|
||||
function drawLineChart()
|
||||
{
|
||||
/*Dit is de data die getoond wordt als "punt" op de grafiek. 20 = y20 / x20, 50 = y50 / x50 enzovoort... De array "data" & "xLabels" moeten beide evenveel array items hebben!!*/
|
||||
const data = [20, 50, 60, 45, 50, 100, 70, 60, 65, 0, 85, 0];
|
||||
const xLabels = ["", "", "", "", "", 6, "", "", "", "", "", 12];
|
||||
|
||||
// Define Y-axis labels here. The number of labels should match your scale.
|
||||
const yLabels = ["", 20, "", 40, "", 60, "", 80, "", 100]; /*NIET VERANDEREN!!!*/
|
||||
|
||||
const canvas = document.getElementById("myCanvas");
|
||||
const ctx = canvas.getContext("2d");
|
||||
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height); // Clear the canvas
|
||||
|
||||
const padding = 35; // Increased padding for Y labels
|
||||
const graphWidth = canvas.width - padding * 2;
|
||||
const graphHeight = canvas.height - padding * 2;
|
||||
|
||||
// Draw the axes
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(padding, padding);
|
||||
ctx.lineTo(padding, canvas.height - padding);
|
||||
ctx.lineTo(canvas.width - padding, canvas.height - padding);
|
||||
ctx.stroke();
|
||||
|
||||
// Set the color of the line
|
||||
ctx.strokeStyle = "#008000"; // This sets the line color to green
|
||||
|
||||
const xIncrement = graphWidth / (xLabels.length - 1);
|
||||
const yIncrement = graphHeight / (yLabels.length - 1); // Assuming you have labels for each increment
|
||||
|
||||
// Plot the data
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(padding, canvas.height - padding - (data[0] / 100) * graphHeight);
|
||||
|
||||
for (let i = 1; i < data.length; i++)
|
||||
{
|
||||
const xPos = padding + i * xIncrement;
|
||||
const yPos = canvas.height - padding - (data[i] / 100) * graphHeight;
|
||||
ctx.lineTo(xPos, yPos);
|
||||
}
|
||||
ctx.stroke(); // Apply the stroke to the line
|
||||
|
||||
// Draw Y labels
|
||||
ctx.fillStyle = "black";
|
||||
ctx.textAlign = "right"; // Align text to the right
|
||||
ctx.textBaseline = "middle"; // Center vertically
|
||||
|
||||
for (let i = 0; i < yLabels.length; i++)
|
||||
{
|
||||
if (yLabels[i] !== "")
|
||||
{
|
||||
const yPos = canvas.height - padding - i * yIncrement;
|
||||
ctx.fillText(yLabels[i], padding - 10, yPos);
|
||||
}
|
||||
}
|
||||
|
||||
// Draw X labels
|
||||
ctx.textAlign = "center"; // Center horizontally for X labels
|
||||
for (let i = 0; i < xLabels.length; i++)
|
||||
{
|
||||
if (xLabels[i] !== "")
|
||||
{
|
||||
const xPos = padding + i * xIncrement;
|
||||
ctx.fillText(xLabels[i], xPos, canvas.height - padding + 20);
|
||||
}
|
||||
}
|
||||
}
|
||||
114
src/kas_informatie.html
Normal file
114
src/kas_informatie.html
Normal file
@@ -0,0 +1,114 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link rel="stylesheet" href="../src/css/style.css" />
|
||||
<!-- <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> -->
|
||||
<script src="../src/js/main.js" defer></script>
|
||||
<title>Informatie Kas</title>
|
||||
</head>
|
||||
<body>
|
||||
<section class="mainContainer">
|
||||
<article>
|
||||
<img src="../src/images/logo.png" class="goodgarden-logo">
|
||||
</article>
|
||||
<section class="mainBorder informatie-kas-main-container">
|
||||
<article>
|
||||
<h1 class="pagina-titel">Informatie Kas</h1>
|
||||
<section id="sectie-1">
|
||||
<article class="parent-algemeen-overzicht">
|
||||
<article class="algemeen-overzicht">
|
||||
<table class="table-informatie-kas">
|
||||
<tr class="tr-informatie-kas">
|
||||
<td>Dagen tot Oogst</td>
|
||||
<td>12</td>
|
||||
</tr>
|
||||
<tr class="tr-informatie-kas">
|
||||
<td>Dagen in Kas</td>
|
||||
<td>2</td>
|
||||
</tr>
|
||||
<tr class="tr-informatie-kas">
|
||||
<td>Tevredenheid</td>
|
||||
<td>80%</td>
|
||||
</tr>
|
||||
<tr class="tr-informatie-kas">
|
||||
<td>Aandachtspunten</td>
|
||||
<td>1</td>
|
||||
</tr>
|
||||
</table>
|
||||
</article>
|
||||
</article>
|
||||
<article class="grafiek">
|
||||
<article class="grafiek-innerbox">
|
||||
<h2>Zonlicht</h2>
|
||||
<canvas
|
||||
id="myCanvas" class="canvas-informatie-kas" width="275" height="275"></canvas>
|
||||
</article>
|
||||
</article>
|
||||
</section>
|
||||
<!-- <section id="sectie-2"></section> -->
|
||||
</article>
|
||||
<article class="grid-column-2">
|
||||
<article class="grid-2-child">
|
||||
<section class="parent-table">
|
||||
<table class="kas-table-1">
|
||||
<tr>
|
||||
<td>Aantal geplant:</td>
|
||||
<td id="totale_planten">Loading...</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Succesvolle Oogst:</td>
|
||||
<td>2</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Gefaalde Oogst:</td>
|
||||
<td>2</td>
|
||||
</tr>
|
||||
</table>
|
||||
<table class="kas-table-2">
|
||||
<tr>
|
||||
<td>Warmste Maand:</td>
|
||||
<td>n.v.t.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>koudste Maand:</td>
|
||||
<td>December</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Gemiddelde Bodemtemp.:</td>
|
||||
<td id="bodem-temperatuur">2˚C</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Gemiddelde Uren Zonlicht:</td>
|
||||
<td>2u</td>
|
||||
</tr>
|
||||
</table>
|
||||
<table class="kas-table-3">
|
||||
<tr>
|
||||
<td>Laatste Irrigatie:</td>
|
||||
<td>2u</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Aankomende Irrigatie:</td>
|
||||
<td>2u</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Laatste Bemesting</td>
|
||||
<td>2d</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Aankomende Bemesting:</td>
|
||||
<td>2w</td>
|
||||
</tr>
|
||||
</table>
|
||||
</section>
|
||||
</article>
|
||||
</article>
|
||||
</section>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,11 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
</head>
|
||||
<body>
|
||||
<h1>sdgdfsgjindgfvadsiuuiadsiuhdgnhaewgiadsnugaeuigndfogjdfsgdff</h1>
|
||||
</body>
|
||||
</html>
|
||||
8
src/py/calculate.py
Normal file
8
src/py/calculate.py
Normal file
@@ -0,0 +1,8 @@
|
||||
# In calculate.py
|
||||
|
||||
|
||||
# Doe je berekeningen hier, vervang 42 door je berekende waarde
|
||||
calculated_value = 42
|
||||
|
||||
# Print het resultaat, dat zal worden gelezen door de PythonShell.run callback
|
||||
print(calculated_value)
|
||||
Reference in New Issue
Block a user