Update index.html

jsikken · Jun 20, 2024 · dd2c1b6 · dd2c1b6
1 parent bbc81f0
commit dd2c1b6
Showing 1 changed file with 11 additions and 2 deletions.
diff --git 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>