Add a updated file

ShadBalti · Oct 26, 2023 · 0c9fc6a · 0c9fc6a
1 parent 5771e74
commit 0c9fc6a
Show file tree

Hide file tree

Showing 3 changed files with 238 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -0,0 +1,72 @@
+
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Simple Image Editor</title>
+
+    <!-- Add Bootstrap CSS via CDN -->
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
+
+    <!-- Link your custom style.css for additional styling -->
+    <link rel="stylesheet" type="text/css" href="style.css">
+
+    <!-- Allow users to select a theme -->
+    <select id="theme-selector" class="form-control">
+        <option value="theme-light">Light Theme</option>
+        <option value="theme-dark">Dark Theme</option>
+    </select>
+</head>
+<body>
+    <div class="container">
+        <h1 class="mt-4">Simple Image Editor</h1>
+        <div class="row mt-4">
+            <div class="col-md-6">
+                <input type="file" id="image-input" accept="image/*" class="form-control">
+                <input type="text" id="image-url" placeholder="Enter image URL" class="form-control mt-2">
+                <button id="load-image" class="btn btn-primary mt-2">Load Image</button>
+                <div id="image-container" class="mt-4">
+                    <img id="edited-image" src="" alt="Edited Image" class="img-fluid">
+                </div>
+            </div>
+            <div class="col-md-6">
+                <div id="controls">
+                    <label for="brightness">Brightness:</label>
+                    <input type="range" id="brightness" min="0" max="200" value="100" class="form-control">
+                    <br>
+                    <label for="opacity">Opacity:</label>
+                    <input type="range" id="opacity" min="0" max="100" value="100" class="form-control">
+                    <br>
+                    <label for="blur">Blur:</label>
+                    <input type="range" id="blur" min="0" max="10" value="0" class="form-control">
+                    <br>
+                    <label for="contrast">Contrast:</label>
+                    <input type="range" id="contrast" min="0" max="200" value="100" class="form-control">
+                    <br>
+                    <button id="invert" class="btn btn-secondary">Invert Colors</button>
+                    <button id="rotate" class="btn btn-secondary">Rotate 90°</button>
+                    <button id="resize-plus" class="btn btn-secondary">Resize +</button>
+                    <button id="resize-minus" class="btn btn-secondary">Resize -</button>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Add Bootstrap JS via CDN -->
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
+    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
+
+    <!-- Include your JavaScript code here -->
+    <script src= "main.js">
+    </script>
+<script>
+        // Your JavaScript code goes here
+        const themeSelector = document.getElementById("theme-selector");
+        const body = document.body;
+
+        themeSelector.addEventListener("change", () => {
+            const selectedTheme = themeSelector.value;
+            body.className = selectedTheme;
+        });
+    </script>
+</body>
+</html>
diff --git a/main.js b/main.js
@@ -0,0 +1,98 @@
+        const imageInput = document.getElementById("image-input");
+        const imageUrlInput = document.getElementById("image-url");
+        const loadImageBtn = document.getElementById("load-image");
+        const editedImage = document.getElementById("edited-image");
+        const brightnessInput = document.getElementById("brightness");
+        const opacityInput = document.getElementById("opacity");
+        const blurInput = document.getElementById("blur");
+        const contrastInput = document.getElementById("contrast");
+        const invertBtn = document.getElementById("invert");
+        const rotateBtn = document.getElementById("rotate");
+        const resizePlusBtn = document.getElementById("resize-plus");
+        const resizeMinusBtn = document.getElementById("resize-minus");
+
+        let currentImage = new Image();
+
+        imageInput.addEventListener("change", handleImageUpload);
+        loadImageBtn.addEventListener("click", loadExternalImage);
+        brightnessInput.addEventListener("input", updateImage);
+        opacityInput.addEventListener("input", updateImage);
+        blurInput.addEventListener("input", updateImage);
+        contrastInput.addEventListener("input", updateImage);
+        invertBtn.addEventListener("click", invertColors);
+        rotateBtn.addEventListener("click", rotateImage);
+        resizePlusBtn.addEventListener("click", resizeImagePlus);
+        resizeMinusBtn.addEventListener("click", resizeImageMinus);
+
+        function handleImageUpload(e) {
+            const file = e.target.files[0];
+            if (file) {
+                const reader = new FileReader();
+                reader.onload = function (event) {
+                    currentImage.src = event.target.result;
+                    currentImage.onload = updateImage;
+                };
+                reader.readAsDataURL(file);
+            }
+        }
+
+        function loadExternalImage() {
+            const url = imageUrlInput.value;
+            if (url) {
+                currentImage.src = url;
+                currentImage.onload = updateImage;
+            }
+        }
+
+        function updateImage() {
+            const canvas = document.createElement("canvas");
+            canvas.width = currentImage.width;
+            canvas.height = currentImage.height;
+            const ctx = canvas.getContext("2d");
+
+            ctx.filter = `brightness(${brightnessInput.value}%) opacity(${opacityInput.value}%) blur(${blurInput.value}px) contrast(${contrastInput.value}%)`;
+
+            ctx.drawImage(currentImage, 0, 0);
+
+            editedImage.src = canvas.toDataURL();
+        }
+
+        function invertColors() {
+            const canvas = document.createElement("canvas");
+            canvas.width = currentImage.width;
+            canvas.height = currentImage.height;
+            const ctx = canvas.getContext("2d");
+            ctx.filter = "invert(100%)";
+            ctx.drawImage(currentImage, 0, 0);
+            editedImage.src = canvas.toDataURL();
+        }
+
+        function rotateImage() {
+            currentImage = rotateImage90Degrees(currentImage);
+            updateImage();
+        }
+
+        function resizeImagePlus() {
+            currentImage.width *= 1.1;
+            currentImage.height *= 1.1;
+            updateImage();
+        }
+
+        function resizeImageMinus() {
+            currentImage.width *= 0.9;
+            currentImage.height *= 0.9;
+            updateImage();
+        }
+
+        function rotateImage90Degrees(image) {
+            const canvas = document.createElement("canvas");
+            canvas.width = image.height;
+            canvas.height = image.width;
+            const ctx = canvas.getContext("2d");
+
+            ctx.translate(canvas.width / 2, canvas.height / 2);
+            ctx.rotate(Math.PI / 2);
+            ctx.drawImage(image, -image.width / 2, -image.height / 2);
+
+            return canvas;
+        }
diff --git a/style.css b/style.css
@@ -0,0 +1,68 @@
+
+/* style.css */
+#controls {
+    margin-top: 10px;
+}
+
+#edited-image {
+    max-width: 100%;
+    max-height: 100%;
+}
+/* Example background and color styles */
+body {
+    background-color: #f4f4f4;
+}
+
+.btn-primary {
+    background-color: #007bff;
+    color: #fff;
+}
+
+/* Add your custom background and color styles as needed */
+/* Example margin and padding styles */
+#image-container {
+    margin: 10px;
+}
+
+.btn {
+    margin-right: 5px;
+}
+
+/* Add margins and padding as per your layout and spacing preferences */
+/* Example border and box shadow styles */
+#edited-image {
+    border: 1px solid #ddd;
+    box-shadow: 3px 3px 5px #888;
+}
+
+/* Customize borders and shadows as desired */
+/* Example font and typography styles */
+h1 {
+    font-family: 'Arial', sans-serif;
+    font-size: 24px;
+}
+
+input[type="text"] {
+    font-size: 14px;
+}
+
+/* Define your preferred fonts and typography styles */
+/* Example button hover effect */
+.btn {
+    transition: background-color 0.3s;
+}
+
+.btn:hover {
+    background-color: #0056b3;
+}
+/* Example container styles */
+.container {
+    background-color: #fff;
+    padding: 20px;
+    border-radius: 5px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+}
+/* Example media query for responsiveness */
+@media (max-width: 768px) {
+    /* Adjust styles for smaller screens */
+}