Final Commit Before Release

Author: hasnocool

assets/optimized/Screenshot 2024-09-02 094644.png

@@ -1,10 +1,9 @@
 from PIL import Image
 import os
-import subprocess
 
 def compress_image(image_path, output_path, quality=85):
     """
-    Compress JPEG and PNG images using Pillow and optipng for PNG.
+    Compress JPEG and PNG images using Pillow.
     :param image_path: Input path of the image.
     :param output_path: Output path where compressed image will be saved.
     :param quality: Compression quality for JPEG (1-100). Default is 85.
@@ -18,20 +17,16 @@ def compress_image(image_path, output_path, quality=85):
                 img.save(output_path, 'JPEG', optimize=True, quality=quality)
                 print(f"JPEG image compressed and saved to {output_path}")
             elif img.format == 'PNG':
-                # Save PNG image (use Pillow's save method)
+                # Save PNG image with Pillow's built-in optimization
                 img.save(output_path, 'PNG', optimize=True)
-                print(f"PNG image saved to {output_path}")
-
-                # Further compress PNG using optipng for better optimization
-                subprocess.run(['optipng', '-o2', output_path], check=True)
-                print(f"PNG optimized with optipng and saved to {output_path}")
+                print(f"PNG image compressed and saved to {output_path}")
             else:
                 print(f"Unsupported image format: {img.format}")
-                
+
             # Remove the original file after compression
             os.remove(image_path)
             print(f"Original file {image_path} deleted.")
-            
+
     except Exception as e:
         print(f"Error compressing image: {e}")
 
@@ -46,13 +41,19 @@ def optimize_images_in_directory(input_directory, output_directory):
 
     # Iterate over all files in the input directory
     for filename in os.listdir(input_directory):
-        if filename.endswith('.jpg') or filename.endswith('.jpeg') or filename.endswith('.png'):
+        if filename.lower().endswith(('.jpg', '.jpeg', '.png')):
             input_path = os.path.join(input_directory, filename)
             output_path = os.path.join(output_directory, filename)
 
+            # Ensure proper path handling for different operating systems
+            input_path = os.path.normpath(input_path)
+            output_path = os.path.normpath(output_path)
+
             compress_image(input_path, output_path)
 
 # Example usage
-input_dir = './assets'  # Folder with original images
-output_dir = './assets/optimized'  # Folder to store optimized images
-optimize_images_in_directory(input_dir, output_dir)
+if __name__ == "__main__":
+    input_dir = os.path.normpath('./assets')  # Folder with original images
+    output_dir = os.path.normpath('./assets/optimized')  # Folder to store optimized images
+    
+    optimize_images_in_directory(input_dir, output_dir)

assets/optimized/Screenshot 2024-09-02 111713.png

@@ -83,7 +83,6 @@ <h1 class="text-2xl font-bold neon-text">War Thunder Camouflage Installer</h1>
                     <a href="#features" class="text-lg hover:text-blue-300">Features</a>
                     <a href="#download" class="text-lg hover:text-blue-300">Download</a>
                     <a href="#about" class="text-lg hover:text-blue-300">About</a>
-                    <a href="registration.html" class="text-lg hover:text-blue-300">Register</a>
                 </nav>
             </div>
         </header>
@@ -97,7 +96,6 @@ <h2 class="text-6xl md:text-7xl lg:text-8xl font-extrabold neon-text mb-6">War T
                 <div class="highlight-box">
                     <h3 class="text-2xl md:text-3xl text-yellow-300 font-bold mb-4">🚀 Open Source Project 🚀</h3>
                     <p class="text-lg md:text-xl text-white mb-4">Join our community and contribute to this exciting project!</p>
-                    <a href="registration.html" class="inline-block bg-yellow-600 hover:bg-yellow-700 text-white font-semibold py-4 px-8 rounded-lg shadow-lg text-xl transition duration-300 ease-in-out transform hover:scale-105 mt-6">Learn More and Register</a>
                 </div>
 
                 <p class="text-xl md:text-2xl text-gray-400 max-w-3xl mx-auto my-8">Transform your vehicles with ease. Browse, manage, and apply custom skins in just a few clicks.</p>
@@ -106,55 +104,100 @@ <h3 class="text-2xl md:text-3xl text-yellow-300 font-bold mb-4">🚀 Open Source
             </div>
         </section>
 
-        <!-- Features Section -->
-        <section id="features" class="bg-black bg-opacity-75 py-16">
-            <div class="container mx-auto px-4">
-                <h3 class="text-3xl md:text-4xl font-bold mb-8 neon-text text-center">Key Features</h3>
-                <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
-                    <div class="bg-gray-800 p-6 rounded shadow-md transform transition duration-500 hover:scale-105">
-                        <h4 class="text-2xl font-bold mb-4">Extensive Database</h4>
-                        <ul class="list-disc list-inside text-gray-400">
-                            <li>Browse through a vast collection of custom camouflages</li>
-                            <li>Supports various War Thunder vehicles</li>
-                            <li>Regularly updated with new skins</li>
-                        </ul>
-                    </div>
-                    <div class="bg-gray-800 p-6 rounded shadow-md transform transition duration-500 hover:scale-105">
-                        <h4 class="text-2xl font-bold mb-4">Advanced Search</h4>
-                        <ul class="list-disc list-inside text-gray-400">
-                            <li>Powerful search functionality</li>
-                            <li>Filter by tags and custom tags</li>
-                            <li>Sort and organize camouflages easily</li>
-                        </ul>
-                    </div>
-                    <div class="bg-gray-800 p-6 rounded shadow-md transform transition duration-500 hover:scale-105">
-                        <h4 class="text-2xl font-bold mb-4">Easy Installation</h4>
-                        <ul class="list-disc list-inside text-gray-400">
-                            <li>One-click installation process</li>
-                            <li>Customizable directory structure</li>
-                            <li>Import local skins with ease</li>
-                        </ul>
-                    </div>
+    <!-- Features Section -->
+    <section id="features" class="bg-black bg-opacity-75 py-16">
+        <div class="container mx-auto px-4">
+            <h3 class="text-3xl md:text-4xl font-bold mb-8 neon-text text-center">Key Features</h3>
+
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
+                <!-- Card 1: Camouflage Database Management -->
+                <div class="bg-gray-800 p-6 rounded shadow-md">
+                    <h4 class="text-2xl font-bold mb-4">Camouflage Database Management</h4>
+                    <ul class="list-disc list-inside text-gray-400">
+                        <li>Browse and search through a database of War Thunder camouflages</li>
+                        <li>View detailed information about each camouflage, including descriptions, and file size</li>
+                        <li>Display camouflage images in a grid layout</li>
+                    </ul>
+                </div>
+
+                <!-- Card 2: Advanced Search & Filtering -->
+                <div class="bg-gray-800 p-6 rounded shadow-md">
+                    <h4 class="text-2xl font-bold mb-4">Advanced Search & Filtering</h4>
+                    <ul class="list-disc list-inside text-gray-400">
+                        <li>Search camouflages by name or description</li>
+                        <li>Filter camouflages using tags and hashtags</li>
+                        <li>Customizable tag system with the ability to add custom tags</li>
+                    </ul>
+                </div>
+
+                <!-- Card 3: User-Friendly Interface -->
+                <div class="bg-gray-800 p-6 rounded shadow-md">
+                    <h4 class="text-2xl font-bold mb-4">User-Friendly Interface</h4>
+                    <ul class="list-disc list-inside text-gray-400">
+                        <li>Intuitive navigation between camouflages</li>
+                        <li>Detailed view and main view options for browsing camouflages</li>
+                        <li>Pagination for easy navigation through large sets of results</li>
+                    </ul>
+                </div>
+
+                <!-- Card 4: Skin Installation & Management -->
+                <div class="bg-gray-800 p-6 rounded shadow-md">
+                    <h4 class="text-2xl font-bold mb-4">Skin Installation & Management</h4>
+                    <ul class="list-disc list-inside text-gray-400">
+                        <li>One-click installation of selected camouflages</li>
+                        <li>Custom directory structure support for organized skin management</li>
+                        <li>Option to import local skin files</li>
+                    </ul>
+                </div>
+
+                <!-- Card 5: Performance & Customization Options -->
+                <div class="bg-gray-800 p-6 rounded shadow-md">
+                    <h4 class="text-2xl font-bold mb-4">Performance & Customization Options</h4>
+                    <ul class="list-disc list-inside text-gray-400">
+                        <li>Multithreaded image loading for smooth performance</li>
+                        <li>Ability to set and change the War Thunder skins directory</li>
+                        <li>Customizable file structure for installed skins</li>
+                    </ul>
+                </div>
+
+                <!-- Card 6: Error Handling & Utilities -->
+                <div class="bg-gray-800 p-6 rounded shadow-md">
+                    <h4 class="text-2xl font-bold mb-4">Error Handling & Utilities</h4>
+                    <ul class="list-disc list-inside text-gray-400">
+                        <li>Clear error messages and status updates</li>
+                        <li>Export and import tag collections for backup or sharing</li>
+                        <li>About section with version information</li>
+                    </ul>
                 </div>
             </div>
-        </section>
+        </div>
+    </section>
 
-        <!-- Screenshots Section -->
-        <section class="py-16 bg-black bg-opacity-75">
-            <div class="container mx-auto px-4 text-center">
-                <h3 class="text-3xl md:text-4xl font-bold mb-8 neon-text">User Interface</h3>
-                <div class="grid-container">
-                    <div class="grid-item">
-                        <img src="../screenshots/screenshot1-main.png" alt="Main Interface" class="rounded shadow-lg">
-                        <p class="mt-2 text-gray-400">Main application interface</p>
-                    </div>
-                    <div class="grid-item">
-                        <img src="../screenshots/screenshot2-about.png" alt="About Section" class="rounded shadow-lg">
-                        <p class="mt-2 text-gray-400">About section with developer information</p>
-                    </div>
+    <!-- Screenshots Section -->
+    <section class="py-16 bg-black bg-opacity-75">
+        <div class="container mx-auto text-center">
+            <h3 class="text-3xl md:text-4xl font-bold mb-8 neon-text">User Interface</h3>
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-8 justify-center items-center">
+                <!-- Image 1: The window on initial load -->
+                <div class="grid-item">
+                    <img src="../assets/optimized/main-window-0.png" alt="Window on initial load" class="rounded shadow-lg mx-auto">
+                    <p class="mt-4 text-lg md:text-xl text-gray-400">The window on initial load</p>
+                </div>
+                
+                <!-- Image 2: Main Window -->
+                <div class="grid-item">
+                    <img src="../assets/optimized/main-window-1.png" alt="Main Window" class="rounded shadow-lg mx-auto">
+                    <p class="mt-4 text-lg md:text-xl text-gray-400">Main window</p>
+                </div>
+                
+                <!-- Image 3: Detailed View -->
+                <div class="grid-item">
+                    <img src="../assets/optimized/main-window-2.png" alt="Detailed View" class="rounded shadow-lg mx-auto">
+                    <p class="mt-4 text-lg md:text-xl text-gray-400">Detailed view with sidebar, tagging, and search</p>
                 </div>
             </div>
-        </section>
+        </div>
+    </section>
 
         <!-- Download Section -->
         <section id="download" class="py-16">
@@ -167,6 +210,22 @@ <h3 class="text-3xl md:text-4xl font-bold mb-8 neon-text">Get Started</h3>
             </div>
         </section>
 
+        <!-- Installation Instructions Section -->
+        <section id="installation" class="bg-black bg-opacity-75 py-16">
+            <div class="container mx-auto px-4 text-center">
+                <h3 class="text-3xl md:text-4xl font-bold mb-8 neon-text">How to Install</h3>
+                <p class="text-xl mb-4 text-gray-400">To install the War Thunder Camouflage Installer, follow these steps:</p>
+                <div class="highlight-box bg-gray-800 p-6 rounded shadow-md mx-auto text-left">
+                    <ul class="list-disc list-inside text-gray-300">
+                        <li>Download the latest <strong>.exe</strong> and <strong>.db</strong> files from the <a href="#download" class="text-blue-400 underline hover:text-blue-600">Download</a> section.</li>
+                        <li>Ensure both files are in the **same directory**.</li>
+                        <li>Navigate to the folder and run the <strong>.exe</strong> file to start the application.</li>
+                        <li>If you're using the source code, you'll need to <strong>compile the project</strong> manually. Instructions are provided on the <a href="https://github.com/hasnocool/war_thunder_camouflage_installer" class="text-blue-400 underline hover:text-blue-600">GitHub page</a>.</li>
+                    </ul>
+                </div>
+            </div>
+        </section>
+
         <!-- About Section -->
         <section id="about" class="bg-black bg-opacity-75 py-16">
             <div class="container mx-auto px-4 text-center">