From dd2c1b6c4484b0ffebf5cf47e940939a5974a64d Mon Sep 17 00:00:00 2001
From: jsikken <130744129+jsikken@users.noreply.github.com>
Date: Thu, 20 Jun 2024 19:22:13 +0200
Subject: [PATCH] Update index.html

---
 index.html | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)
diff --git a/index.html b/index.html
index 1427764..dbfc2c0 100644
--- a/index.html
+++ b/index.html
@@ -18,7 +18,7 @@
             font: normal;
             font-size: 8;
         }
-        #container {
+        #container-plugin {
             display: flex;
             flex-wrap: wrap;
             justify-content: center;
@@ -120,7 +120,7 @@
 </head>
 <body>
     <h1><a href="https://roads-technology.nl/"><img src="./logo-rt.png" width="100" height="32" alt="" url="https://roads-technology.nl"/></a> Kleurenwiel </h1>
-    <div id="container">
+    <div id="container-plugin">
         <canvas id="colorWheel" width="300" height="300"></canvas>
         <div class="color-section">
             <label>Hoofdkleur:<br><input type="text" id="mainColor" class="color-input" placeholder="Kies een kleur!"></label>
@@ -130,6 +130,11 @@ <h1><a href="https://roads-technology.nl/"><img src="./logo-rt.png" width="100"
             <input type="text" id="analogColor2" class="color-input" readonly>
             <input type="text" id="analogColor3" class="color-input" readonly>
             <input type="text" id="analogColor4" class="color-input" readonly><br>
+            <label>Monochromatische kleuren:</label>
+            <input type="text" id="monochromeColor1" class="color-input" readonly>
+            <input type="text" id="monochromeColor2" class="color-input" readonly>
+            <input type="text" id="monochromeColor3" class="color-input" readonly>
+            <input type="text" id="monochromeColor4" class="color-input" readonly><br>
             <label>Kleurenpalet:<br></label>
             <div class="palette">
                 <div id="mainColorBox" class="color-box"></div>
@@ -138,6 +143,10 @@ <h1><a href="https://roads-technology.nl/"><img src="./logo-rt.png" width="100"
                 <div id="analogColorBox2" class="color-box"></div>
                 <div id="analogColorBox3" class="color-box"></div>
                 <div id="analogColorBox4" class="color-box"></div>
+                <div id="monochromeColorBox1" class="color-box"></div>
+                <div id="monochromeColorBox2" class="color-box"></div>
+                <div id="monochromeColorBox3" class="color-box"></div>
+                <div id="monochromeColorBox4" class="color-box"></div>
             </div>
             <br>
             <button id="eyeDropperBtn">Gebruik Pipet</button><br>
