quack1

Running

App Files Files Community

oldfart commited on Oct 16, 2023

Commit

53f6048

•

1 Parent(s): 7d0ba8e

Update index.html

Browse files

Files changed (1) hide show

index.html +58 -106

index.html CHANGED Viewed

@@ -5,120 +5,72 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Image Format Converter</title>
     <style>
-        /* ... (unchanged styles) */
-    </style>
-</head>
-<body>
-    <h1>Image Format Converter</h1>
-    <form id="imageForm">
-        <label for="imageInput">Select an Image:</label>
-        <input type="file" id="imageInput" accept="image/*" required onchange="detectImageProperties()">
-        <p id="formatInfo">Detected Format: <span id="formatDisplay"></span></p>
-        <p id="sizeInfo">Image Size: <span id="sizeDisplay"></span></p>
-        <label for="targetFormat">Choose Target Format:</label>
-        <select id="targetFormat" required>
-            <option value="image/bmp">BMP</option>
-            <option value="image/eps">EPS</option>
-            <option value="image/gif">GIF</option>
-            <option value="image/ico">ICO</option>
-            <option value="image/jpeg">JPG</option>
-            <option value="image/png">PNG</option>
-            <option value="image/psd">PSD</option>
-            <option value="image/svg+xml">SVG</option>
-            <option value="image/tga">TGA</option>
-            <option value="image/tiff">TIFF</option>
-            <option value="image/webp">WebP</option>
-        </select>
-        <label for="customWidth">Custom Width (leave empty for original):</label>
-        <input type="text" id="customWidth">
-        <label for="customHeight">Custom Height (leave empty for original):</label>
-        <input type="text" id="customHeight">
-        <input type="checkbox" id="keepAspectRatio">
-        <label for="keepAspectRatio">Keep Aspect Ratio</label>
-        <input type="checkbox" id="compressImage">
-        <label for="compressImage">Compress Image</label>
-        <button type="button" onclick="convertImage()">Convert</button>
-        <a id="downloadLink" style="display: none" download="converted_image">Download Converted Image</a>
-    </form>
-    <script>
-        function detectImageProperties() {
-            const input = document.getElementById('imageInput');
-            const formatDisplay = document.getElementById('formatDisplay');
-            const sizeDisplay = document.getElementById('sizeDisplay');
-            if (input.files.length > 0) {
-                const file = input.files[0];
-                formatDisplay.textContent = file.type;
-                sizeDisplay.textContent = `${file.size} bytes`;
-            }
         }
-        function convertImage() {
-            const input = document.getElementById('imageInput');
-            const targetFormat = document.getElementById('targetFormat').value;
-            const customWidth = document.getElementById('customWidth').value;
-            const customHeight = document.getElementById('customHeight').value;
-            const keepAspectRatio = document.getElementById('keepAspectRatio').checked;
-            const compressImage = document.getElementById('compressImage').checked;
-            const formatDisplay = document.getElementById('formatDisplay');
-            const downloadLink = document.getElementById('downloadLink');
-            if (input.files.length > 0) {
-                const file = input.files[0];
-                // Display detected format
-                formatDisplay.textContent = file.type;
-                // Convert and create a download link
-                const img = new Image();
-                img.onload = function () {
-                    const canvas = document.createElement('canvas');
-                    const ctx = canvas.getContext('2d');
-                    // Apply custom dimensions
-                    let newWidth, newHeight;
-                    if (customWidth && customHeight) {
-                        newWidth = parseInt(customWidth, 10);
-                        newHeight = parseInt(customHeight, 10);
-                        if (keepAspectRatio) {
-                            // Calculate new height to maintain aspect ratio
-                            newHeight = (img.height * newWidth) / img.width;
-                        }
-                    } else {
-                        // If custom dimensions are not provided, use original dimensions
-                        newWidth = img.width;
-                        newHeight = img.height;
-                    }
-                    canvas.width = newWidth;
-                    canvas.height = newHeight;
-                    // Draw the image on the canvas
-                    ctx.drawImage(img, 0, 0, newWidth, newHeight);
-                    // Convert and create a download link
-                    canvas.toBlob(function (blob) {
-                        const url = URL.createObjectURL(blob);
-                        downloadLink.href = url;
-                        downloadLink.style.display = 'block';
-                    }, targetFormat, compressImage ? 0.85 : 1.0); // Adjust compression quality if needed
-                };
-                img.src = URL.createObjectURL(file);
-            }
         }
-    </script>
-</body>
-</html>

     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Image Format Converter</title>
     <style>
+        body {
+            font-family: 'Arial', sans-serif;
+            max-width: 600px;
+            margin: 20px auto;
+            padding: 20px;
+            background-color: #f4f4f4;
+            border-radius: 10px;
         }
+        h1 {
+            text-align: center;
+            color: #333;
+        }
+        form {
+            background-color: #fff;
+            padding: 20px;
+            border-radius: 8px;
+            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+        }
+        label, select, button, input {
+            display: block;
+            margin-bottom: 15px;
+        }
+        select, input {
+            width: 100%;
+            padding: 10px;
+            border: 1px solid #ccc;
+            border-radius: 4px;
+        }
+        input[type="checkbox"] {
+            margin-right: 5px;
+        }
+        button {
+            background-color: #4caf50;
+            color: #fff;
+            padding: 10px;
+            border: none;
+            border-radius: 4px;
+            cursor: pointer;
+            transition: background-color 0.3s ease;
+        }
+        button:hover {
+            background-color: #45a049;
+        }
+        a {
+            color: #2196F3;
+            text-decoration: none;
+            display: block;
+            margin-top: 10px;
+        }
+        a:hover {
+            text-decoration: underline;
         }
+    </style>
+</head>
+<body>
+    <h1>Image Format Converter</h1>
+    <form id="imageForm">
+        <label for="imageInput">Select an Image:</label>
+        <input type="file" id="imageInput" accept="image/*"