plantenClass OOP V1.0
This commit is contained in:
Renzo
@@ -9,6 +9,22 @@ p, td {
|
||||
font-family: "Afacad", sans-serif;
|
||||
}
|
||||
|
||||
.containers-articles, body .mainContainer .mainBorder .content .kant-rechts #sensor-2, body .mainContainer .mainBorder .content .kant-links #sensor-1, body .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);
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
body {
|
||||
background-image: url("../images/achtergrond.png");
|
||||
background-repeat: no-repeat;
|
||||
@@ -117,20 +133,6 @@ body .mainContainer .mainBorder .content .kant-links #planten {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
body .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);
|
||||
}
|
||||
body .mainContainer .mainBorder .content .kant-links #planten td article #toevoegen {
|
||||
height: 5rem;
|
||||
width: 5rem;
|
||||
@@ -141,6 +143,12 @@ body .mainContainer .mainBorder .content .kant-links #planten td article h2 {
|
||||
body .mainContainer .mainBorder .content .kant-links #planten td article:hover {
|
||||
background-color: lightgray;
|
||||
}
|
||||
body .mainContainer .mainBorder .content .kant-links #sensor-1 {
|
||||
border: none;
|
||||
border-radius: 40px 0px 0px 40px;
|
||||
width: 30vw;
|
||||
margin-top: 10vh;
|
||||
}
|
||||
body .mainContainer .mainBorder .content .kant-rechts {
|
||||
grid-column: 3;
|
||||
margin-right: 2rem;
|
||||
@@ -161,6 +169,11 @@ body .mainContainer .mainBorder .content .kant-rechts #metingen #main-waardes ta
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
}
|
||||
body .mainContainer .mainBorder .content .kant-rechts #sensor-2 {
|
||||
border-radius: 0px 40px 40px 0px;
|
||||
width: 30vw;
|
||||
margin-top: 10vh;
|
||||
}
|
||||
body .mainContainer .mainBorder .grid-column-2 {
|
||||
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
|
||||
border-radius: 40px;
|
||||
|
||||
@@ -1 +1 @@
|
||||
{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"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","file":"style.css"}
|
||||
{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"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","file":"style.css"}
|
||||
@@ -45,6 +45,23 @@ p, td
|
||||
font-family: $font-text;
|
||||
}
|
||||
|
||||
.containers-articles
|
||||
{
|
||||
height: 7rem;
|
||||
width: 10rem;
|
||||
padding: .6rem;
|
||||
margin: 0.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);
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
body
|
||||
{
|
||||
background-image: url("../images/achtergrond.png");
|
||||
@@ -162,7 +179,7 @@ body
|
||||
|
||||
canvas
|
||||
{
|
||||
// Zorgt ervoor dat de grafiek precies in eht midden komt
|
||||
// Zorgt ervoor dat de grafiek precies in het midden komt
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
@@ -193,18 +210,7 @@ body
|
||||
{
|
||||
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);
|
||||
@extend .containers-articles;
|
||||
|
||||
#toevoegen
|
||||
{
|
||||
@@ -226,6 +232,18 @@ body
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#sensor
|
||||
{
|
||||
&-1
|
||||
{
|
||||
@extend .containers-articles;
|
||||
border: none;
|
||||
border-radius: 40px 0px 0px 40px;
|
||||
width: 30vw;
|
||||
margin-top: 10vh;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-rechts
|
||||
@@ -255,6 +273,17 @@ body
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#sensor
|
||||
{
|
||||
&-2
|
||||
{
|
||||
@extend .containers-articles;
|
||||
border-radius: 0px 40px 40px 0px;
|
||||
width: 30vw;
|
||||
margin-top: 10vh;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
<title>Homepage</title>
|
||||
<link rel="stylesheet" href="../src/css/style.css">
|
||||
<script src="../src/js/main.js" defer></script>
|
||||
<script src="../src/js/planten.class.js"></script>
|
||||
@@ -64,6 +64,7 @@
|
||||
<tr class="tr-informatie-kas">
|
||||
<td>Dagen tot Oogst</td>
|
||||
<td>12</td>
|
||||
<a href="sensoren.html">sensoren</a>
|
||||
</tr>
|
||||
<tr class="tr-informatie-kas">
|
||||
<td>Dagen in Kas</td>
|
||||
|
||||
@@ -60,7 +60,7 @@ class PlantGrid {
|
||||
"id": 7,
|
||||
"plantNaam": "Groene",
|
||||
"plantensoort": "Groente",
|
||||
"plantGeteelt": 0
|
||||
"plantGeteelt": 1
|
||||
},
|
||||
{
|
||||
"id": 8,
|
||||
@@ -72,7 +72,7 @@ class PlantGrid {
|
||||
"id": 9,
|
||||
"plantNaam": "yippie",
|
||||
"plantensoort": "Groente",
|
||||
"plantGeteelt": 0
|
||||
"plantGeteelt": 1
|
||||
}
|
||||
];
|
||||
|
||||
|
||||
54
src/sensoren.html
Normal file
54
src/sensoren.html
Normal file
@@ -0,0 +1,54 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Sensoren</title>
|
||||
<link rel="stylesheet" href="../src/css/style.css">
|
||||
<script src="../src/js/main.js" defer></script>
|
||||
<script src="../src/js/planten.class.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<section class="mainContainer">
|
||||
<article>
|
||||
<img src="../src/images/logo.png" class="goodgarden-logo">
|
||||
</article>
|
||||
<section class="mainBorder">
|
||||
<section class="content">
|
||||
<section class="kant-links">
|
||||
<section class="border-sensor">
|
||||
<article id="sensor-1">
|
||||
<table>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>2</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<td>4</td>
|
||||
</tr>
|
||||
</table>
|
||||
</article>
|
||||
</section>
|
||||
<section>
|
||||
<article id="grafiek-1">
|
||||
|
||||
</article>
|
||||
</section>
|
||||
</section>
|
||||
<section>
|
||||
|
||||
</section>
|
||||
<section class="kant-rechts">
|
||||
<article id="sensor-2">
|
||||
|
||||
</article>
|
||||
<article id="grafiek-2">
|
||||
|
||||
</article>
|
||||
</section>
|
||||
</section>
|
||||
</section>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user