From b0178be6c400b363f5175c177733804b6835ca70 Mon Sep 17 00:00:00 2001
From: MeetRamatri <84379308+MeetRamatri@users.noreply.github.com>
Date: Fri, 18 Oct 2024 10:50:53 +0530
Subject: [PATCH] Create Improved HTML

Improve the structure of the list items and nested lists.

Ensure accessibility by adding aria-label to buttons.

Add meta description for better SEO.

Optimize CSS for better performance and readability
---
 Improved HTML | 189 ++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 189 insertions(+)
 create mode 100644 Improved HTML
diff --git a/Improved HTML b/Improved HTML
new file mode 100644
index 0000000..faa69f1
--- /dev/null
+++ b/Improved HTML	
@@ -0,0 +1,189 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="Exif Images Edition - Extract and manage EXIF data effortlessly.">
+    <title>Exif Images Edition</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            line-height: 1.6;
+            background-color: #ffffff;
+            margin: 0;
+            padding: 0;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            min-height: 100vh;
+        }
+        .container {
+            max-width: 800px;
+            background: #c7b8b8;
+            padding: 20px;
+            border-radius: 8px;
+            box-shadow: 0 0 15px rgba(255, 0, 0, 0.2);
+            position: relative;
+        }
+        .logo {
+            display: block;
+            margin: 0 auto;
+            max-height: 200px;
+            border-radius: 50%;
+            box-shadow: 0px 0px 15px rgba(60, 198, 129, 0.5);
+        }
+        h2, h3 {
+            text-align: center;
+            color: #446d15;
+            font-weight: bold;
+            margin-bottom: 10px;
+        }
+        hr {
+            border: none;
+            border-top: 2px solid #7e7c7c;
+            margin: 20px 0;
+        }
+        ul, ol {
+            margin-left: 20px;
+            padding-left: 10px;
+        }
+        ul li, ol li {
+            color: white;
+            margin-bottom: 8px;
+        }
+        .code-block {
+            position: relative;
+            background-color: #f8f8f8;
+            padding: 10px;
+            border-radius: 8px;
+            margin-bottom: 20px;
+        }
+        .copy-btn {
+            position: absolute;
+            top: 10px;
+            right: 10px;
+            background-color: #8795a3;
+            color: #000;
+            border: none;
+            padding: 5px 10px;
+            cursor: pointer;
+            border-radius: 5px;
+            transition: background-color 0.3s ease;
+        }
+        .copy-btn.copied {
+            background-color: #c4ccc6;
+        }
+        .copy-btn.copied::after {
+            content: "Copied";
+        }
+        .copy-btn:hover {
+            background-color: #000;
+        }
+        .center {
+            text-align: center;
+            margin-top: 20px;
+        }
+        .animated-text {
+            font-size: 24px;
+            font-weight: bold;
+            animation: color-change 5s infinite alternate;
+            margin-top: 20px;
+            display: block;
+        }
+        @keyframes color-change {
+            0% { color: #007bff; }
+            100% { color: #ff6347; }
+        }
+        .floating-image {
+            position: fixed;
+            bottom: 20px;
+            right: 20px;
+            width: 100px;
+            height: 100px;
+            background-color: #f8f8f8;
+            border-radius: 50%;
+            box-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
+            overflow: hidden;
+        }
+        .floating-image img {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+        }
+        @media (max-width: 600px) {
+            .container {
+                padding: 15px;
+            }
+            .logo {
+                max-height: 150px;
+            }
+            .animated-text {
+                font-size: 20px;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <p class="center">
+            <img class="logo" src="https://github.com/AryanVBW/Exif/releases/download/Exif/ExIF-Logo_BackgroundWhite.png" alt="Exif Logo">
+            <span class="animated-text">Exif-Images Edition</span>
+        </p>
+        <hr>
+        <h2>Features</h2>
+        <hr>
+        <ul>
+            <li>Extract exif data of images (jpg, jpeg, png).</li>
+            <li>Clear exif data from images.</li>
+            <li>Save data in a text file.</li>
+        </ul>
+        <h2>Supported Formats</h2>
+        <hr>
+        <ul>
+            <li>Images: PNG, JPG, JPEG, GIF, BMP, TIFF</li>
+            <li>Videos: MP4, MKV, AVI, MOV</li>
+            <li>Audio: MP3 (limited support, additional library may be required)</li>
+        </ul>
+        <h2>Installation and Usage Instructions</h2>
+        <hr>
+        <ol>
+            <li>Add .jpg to subfolder ./images from where the script is stored.</li>
+            <li>Note: Most social media sites strip exif data from uploaded photos.</li>
+        </ol>
+        <h3>Prerequisites</h3>
+        <hr>
+        <ul>
+            <li>Install Python3
+                <ul>
+                    <li>Debian, Ubuntu, Etc: <code>sudo apt-get install python3</code></li>
+                    <li>Fedora, Oracle, Red Hat, etc: <code>su -c "yum install python"</code></li>
+                    <li>Windows: <a href="https://www.python.org/downloads/windows/">Python for Windows</a></li>
+                </ul>
+            </li>
+            <li>Install Pillow (Pillow will not work if you have PIL installed):
+                <pre><code>python3 -m pip install --upgrade pip
+python3 -m pip install --upgrade Pillow
+pip install Pillow moviepy
+pip install eyed3</code></pre>
+            </li>
+        </ul>
+        <h2>Installation</h2>
+        <hr>
+        <h3>Copy & paste the following commands:</h3>
+        <div class="code-block">
+            <button class="copy-btn" aria-label="Copy installation commands" onclick="copyToClipboard('#install-commands')">Copy</button>
+            <pre id="install-commands"><code>git clone https://github.com/AryanVBW/Exif.git
+cd Exif
+python3 exif-main.py</code></pre>
+        </div>
+        <h3>To remove exif data from images, use the following command:</h3>
+        <div class="code-block">
+            <button class="copy-btn" aria-label="Copy remove exif commands" onclick="copyToClipboard('#remove-exif-commands')">Copy</button>
+            <pre id="remove-exif-commands"><code>python3 remove-exif.py</code></pre>
+        </div>
+        <h2>Direct Use</h2>
+        <hr>
+        <p>Discover the hidden details in your media files effortlessly! Simply run this script and:</p>
+        <ul>
+            <li>Enter the path to your images, videos, or audio files.</li>
+            <li>Choose where
