From 90ca8ee2dd0650283bbaf9b4c7db46f4821c70f1 Mon Sep 17 00:00:00 2001
From: T <154358121+TMHSDigital@users.noreply.github.com>
Date: Mon, 8 Jul 2024 21:14:07 -0400
Subject: [PATCH] Create image-resizer.html

---
 pages/image-resizer.html | 78 ++++++++++++++++++++++++++++++++++++++++
 1 file changed, 78 insertions(+)
 create mode 100644 pages/image-resizer.html
diff --git a/pages/image-resizer.html b/pages/image-resizer.html
new file mode 100644
index 0000000..67d0eb2
--- /dev/null
+++ b/pages/image-resizer.html
@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Futuristic Image Resizer</title>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.12/cropper.min.js"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.12/cropper.min.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&family=Roboto:wght@300;400;700&display=swap" rel="stylesheet">
+    <style>
+        body {
+            font-family: 'Roboto', sans-serif;
+            background-color: #000;
+            color: #fff;
+        }
+        h1, h2, .tech-button {
+            font-family: 'Orbitron', sans-serif;
+        }
+        .neon-border {
+            box-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #0ff, 0 0 35px #0ff, 0 0 40px #0ff, 0 0 50px #0ff, 0 0 75px #0ff;
+        }
+        .neon-text {
+            text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #0ff, 0 0 35px #0ff, 0 0 40px #0ff;
+        }
+        .tech-button {
+            background: linear-gradient(45deg, #00a3ff, #00fff2);
+            color: #000;
+            border: none;
+            padding: 10px 20px;
+            font-size: 16px;
+            font-weight: bold;
+            text-transform: uppercase;
+            border-radius: 5px;
+            transition: all 0.3s ease;
+            cursor: pointer;
+        }
+        .tech-button:hover {
+            background: linear-gradient(45deg, #00fff2, #00a3ff);
+            box-shadow: 0 0 10px #00fff2;
+        }
+    </style>
+</head>
+<body class="min-h-screen flex items-center justify-center p-4">
+    <div class="bg-gray-900 p-8 rounded-lg neon-border max-w-4xl w-full">
+        <h1 class="text-4xl font-bold mb-8 text-center neon-text">Futuristic Image Resizer</h1>
+        
+        <div class="mb-8">
+            <label for="file-input" class="block mb-2 text-xl font-medium text-blue-300">Choose an image:</label>
+            <input type="file" id="file-input" accept="image/*" class="block w-full text-lg text-gray-300 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-lg file:font-semibold file:bg-blue-900 file:text-blue-300 hover:file:bg-blue-800 transition duration-300 ease-in-out cursor-pointer">
+        </div>
+        
+        <div id="image-container" class="mb-8 max-h-96 overflow-hidden rounded-lg"></div>
+        
+        <div class="grid grid-cols-2 gap-6 mb-8">
+            <div>
+                <label for="width" class="block mb-2 text-xl font-medium text-blue-300">Width:</label>
+                <input type="number" id="width" min="1" max="2000" value="300" class="mt-1 block w-full rounded-md bg-gray-800 border-gray-700 text-white text-lg p-2 focus:border-blue-500 focus:ring focus:ring-blue-500 focus:ring-opacity-50 transition duration-300 ease-in-out">
+            </div>
+            <div>
+                <label for="height" class="block mb-2 text-xl font-medium text-blue-300">Height:</label>
+                <input type="number" id="height" min="1" max="2000" value="200" class="mt-1 block w-full rounded-md bg-gray-800 border-gray-700 text-white text-lg p-2 focus:border-blue-500 focus:ring focus:ring-blue-500 focus:ring-opacity-50 transition duration-300 ease-in-out">
+            </div>
+        </div>
+        
+        <div class="flex justify-between items-center">
+            <button id="resize-button" class="tech-button">Resize Image</button>
+            <a id="download-link" class="hidden tech-button">Download</a>
+        </div>
+
+        <p class="text-lg text-gray-300 mt-6 text-center">Click 'Resize Image' to process, then 'Download' to save your image.</p>
+    </div>
+
+    <script>
+        // ... (Same JavaScript code as before) ...
+    </script>
+</body>
+</html>
