New website branch

previous was doomed, that is why I made a new brench that was updated with the main.
2023-12-11 13:20:19 +01:00
parent c4b21ee3b3
commit ec09cb9625
23 changed files with 252532 additions and 42896 deletions
--- a/llfs-data/index.html
+++ b/llfs-data/index.html
@@ -0,0 +1,133 @@
+<!doctype html>
+<html>
+<head>
+	<meta charset="utf-8" />
+	<title>Webservices & Applications</title>	
+    <link href="reset.css" rel="stylesheet" />
+    <link href="index.css" rel="stylesheet" />
+</head>
+	
+<body>
+<div>
+	<header>
+        <img class="logo" src="st.bmp" alt="STM"/>
+		<p class="title">
+			Webservices & Applications
+		</p>
+	</header>
+
+    <form action="cgi">
+        <div class="content row">
+            <div class="column left">
+                <div class="card">
+                        <h2>Adjustments</h2>
+                        <label for="send_text">Text LCD:</label>
+                        <input type="text" id="send_text" name="vtxt"><br><br>
+                        <label for="send_colorTxt">Select the text color:</label>
+                        <input type="color" id="send_colorTxt" name="vktxt" value="#0000ff"><br><br>
+                        <label for="send_colorBack">Select the background color:</label>
+                        <input type="color" id="send_colorBack" name="vka" value="#0000ff"><br><br>
+                        <!--<span class="sendButton" onClick="start();">
+                            <input type="submit" value="Send">
+                        </span>-->
+                        <input type="submit" value="Send" class="sendButton" onClick="start();">
+                </div>
+            </div>
+            <div class="column right">
+                <div class="card">
+                    <h2 >Images</h2>
+                    <label for="vfo">Choose your photo:</label>
+                    <div class="gallery" id="gallery">
+                        <input type="hidden" id="gallery1" name="vfo" value="">
+                    </div>   
+                    
+                </div>
+            </div>
+        </div>
+	</form>
+    <script> 
+
+        document.getElementById('send_colorBack').addEventListener('input', function() { document.body.style.backgroundColor = this.value; }); 
+        document.getElementById('send_colorTxt').addEventListener('input', function() { document.getElementById('send_text').style.color = this.value; });
+
+        /*--------------------------------------------------------------*/
+
+        // Function to load images from the folder
+        function loadImages() {
+            console.log("loadImages");
+            const xhttp = new XMLHttpRequest();
+              
+                xhttp.onload = function() {
+                    const imageContainer = document.getElementById('gallery');
+                    console.log(this.responseText);
+                    images = this.responseText.split('|');
+                    console.log(images);
+                    for (let i = 0; i < images.length; i++) {
+                        console.log(images[i]);
+                        const img = document.createElement('img');;
+                        img.src= images[i];
+                        img.alt = images[i];
+                        img.className = `image ${i}`;
+                        img.value = images[i];
+                        img.onload = () => {
+                            imageContainer.appendChild(img);
+                        }
+                        img.onclick = () => {
+                            selecteerFoto(img, i, images[i]);
+                        }
+                    }
+                }
+                xhttp.open("GET", "images.info");
+                xhttp.send();
+        }
+
+        function selecteerFoto(image, i, images) {
+            var gallery = document.getElementById('gallery1');
+            var value = gallery.getAttribute('value');
+            var Pictures = document.querySelectorAll('.gallery img');
+            Pictures.forEach(function(image) {
+                image.removeAttribute('id');
+                image.removeAttribute('name');
+            });
+            image.id = "selected";
+            image.name = "vfo";
+            image.value = images[i];
+            gallery.setAttribute('value', images);
+        }
+
+        // Call the function to load the images
+        loadImages();
+        const xhr = new XMLHttpRequest();
+
+        function start() { 
+            var send_text = document.getElementById("send_text").value;
+            var send_colorTxt = document.getElementById("send_colorTxt").value;
+            var send_colorBack = document.getElementById("send_colorBack").value;
+            var sendPicture = document.getElementById("selected").alt;
+            var url = "cgi?";
+
+            var queryString = url + "vtxt=" + send_text + "&vktxt=" + encodeURIComponent(send_colorTxt) + "&vka=" + encodeURIComponent(send_colorBack) + "&vfo=" + sendPicture;
+            console.log(queryString);
+        
+            xhr.onreadystatechange = showAnswer;
+            xhr.open("GET", queryString);
+            xhr.send();
+        }
+
+        function showAnswer() {
+            if (xhr.readyState == 4 && xhr.status == 200) {
+                alert(xhr.responseText);
+            }
+        }
+    </script>
+	<footer>
+		<p class="foot"> 
+			Copyright &copy; Thomas More Mechelen-Antwerpen vzw -
+            Campus De Nayer - Professionele bachelor elektronica-ict –
+			2023
+		</p>
+	</footer>
+</div>
+</body>
+</html>
+