From 86e8ff78091d27e98ee77bcf6e23ca977c2f1b87 Mon Sep 17 00:00:00 2001
From: PRAKHAR871 <earthpbt2003@gmail.com>
Date: Wed, 9 Jul 2025 15:39:26 +0530
Subject: [PATCH] Create Photo editing

---
 Photo editing | 71 +++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 71 insertions(+)
 create mode 100644 Photo editing
diff --git a/Photo editing b/Photo editing
new file mode 100644
index 0000000..37db8c7
--- /dev/null
+++ b/Photo editing	
@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Photo Editor</title>
+  <script src="https://cdn.tailwindcss.com"></script>
+</head>
+<body class="bg-gray-100 text-gray-900 min-h-screen flex flex-col items-center justify-center p-4">
+
+  <div class="bg-white shadow-lg rounded-2xl p-6 w-full max-w-2xl">
+    <h1 class="text-3xl font-bold mb-4 text-center">Simple Photo Editor</h1>
+
+    <input type="file" accept="image/*" id="upload" class="mb-4 w-full" />
+    <div class="flex justify-center mb-4">
+      <canvas id="canvas" class="max-w-full rounded-lg shadow" width="500" height="400"></canvas>
+    </div>
+
+    <div class="grid grid-cols-2 gap-3 mb-4">
+      <button onclick="applyFilter('grayscale(100%)')" class="btn">Grayscale</button>
+      <button onclick="applyFilter('brightness(1.5)')" class="btn">Brighten</button>
+      <button onclick="applyFilter('contrast(200%)')" class="btn">High Contrast</button>
+      <button onclick="resetImage()" class="btn bg-red-500 hover:bg-red-600">Reset</button>
+    </div>
+  </div>
+
+  <style>
+    .btn {
+      @apply px-4 py-2 bg-blue-500 text-white rounded-xl hover:bg-blue-600 transition;
+    }
+  </style>
+
+  <script>
+    const uploadInput = document.getElementById("upload");
+    const canvas = document.getElementById("canvas");
+    const ctx = canvas.getContext("2d");
+    let originalImage = null;
+
+    uploadInput.addEventListener("change", (e) => {
+      const file = e.target.files[0];
+      if (!file) return;
+
+      const reader = new FileReader();
+      reader.onload = function (event) {
+        const img = new Image();
+        img.onload = function () {
+          canvas.width = img.width;
+          canvas.height = img.height;
+          ctx.drawImage(img, 0, 0);
+          originalImage = ctx.getImageData(0, 0, canvas.width, canvas.height);
+        };
+        img.src = event.target.result;
+      };
+      reader.readAsDataURL(file);
+    });
+
+    function applyFilter(filter) {
+      if (!originalImage) return;
+      ctx.putImageData(originalImage, 0, 0);
+      canvas.style.filter = filter;
+    }
+
+    function resetImage() {
+      if (!originalImage) return;
+      ctx.putImageData(originalImage, 0, 0);
+      canvas.style.filter = "none";
+    }
+  </script>
+
+</body>
+</html>
