From 1c477314f390dfdae7acd26d7f6c7525e3135e71 Mon Sep 17 00:00:00 2001
From: Ferry Ayunda <135429317+kisahklasik@users.noreply.github.com>
Date: Sat, 3 Aug 2024 10:16:23 +0700
Subject: [PATCH] Update index.html

---
 index.html | 41 +++++++++++++++++++++++++++++++++++++++++
 1 file changed, 41 insertions(+)

diff --git a/index.html b/index.html
index 055abe7..0eec612 100644
--- a/index.html
+++ b/index.html
@@ -41,5 +41,46 @@ <h1>Example Domain</h1>
 domain in literature without prior coordination or asking for permission.</p>
 <p><a href="https://www.iana.org/domains/example">More information...</a></p>
 </main>
+<script>
+const slider = document.getElementById('slider');
+const baseImageInput = document.getElementById('base-image-input');
+const overlayImageInput = document.getElementById('overlay-image-input');
+const baseImage = document.querySelector('.base-image');
+const overlayImage = document.querySelector('.overlay-image');
+const baseImageButton = document.getElementById('base-image-button');
+const overlayImageButton = document.getElementById('overlay-image-button');
+
+function loadImage(input, imgElement) {
+if (input.files && input.files[0]) {
+const reader = new FileReader();
+reader.onload = (e) => {
+imgElement.src = e.target.result;
+};
+reader.readAsDataURL(input.files[0]);
+}
+}
+
+slider.addEventListener('input', () => {
+let opacity = slider.value / 100;
+overlayImage.style.opacity = opacity;
+});
+
+baseImageInput.addEventListener('change', () => {
+loadImage(baseImageInput, baseImage);
+});
+
+overlayImageInput.addEventListener('change', () => {
+loadImage(overlayImageInput, overlayImage);
+});
+
+baseImageButton.addEventListener('click', () => {
+baseImageInput.click();
+});
+
+overlayImageButton.addEventListener('click', () => {
+overlayImageInput.click();
+});
+
+</script>
 </body>
 </html>