It looks like this is a web page, not a feed. I looked for a feed associated with this page, but couldn't find one. Please enter the address of your feed to validate.

Source: https://iformat.io/avif-to-png

  1.  
  2. <!DOCTYPE html>
  3. <html lang="en">
  4. <head>
  5.    <title>Free AVIF to PNG Converter - Quick &amp; Easy Online Tool</title>
  6.    <meta name="description"
  7.          content="Easily convert AVIF to PNG online with our fast, secure, and free tool. No downloads or sign-ups required – perfect for quick conversions on any device!">
  8.    <meta charset="UTF-8">
  9.    <meta http-equiv="X-UA-Compatible" content="IE=edge">
  10.    <link rel="icon" href="/static/logo.png" type="image/png">
  11.  
  12.    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  13.    <link rel="canonical" href="https://iformat.io/avif-to-png"/>
  14.    <meta name="yandex-verification" content="b06651e96519752b" />
  15.  
  16.    <input type="hidden" name="csrfmiddlewaretoken" value="aOiuIGVb0wuVjTvL9rWDuAwO4i57O5jTUjjhYe6H9TyQgnH7kfysna1GZWJQk1iB">
  17.  
  18.    <!-- Google tag (gtag.js) -->
  19.    <script async src="https://www.googletagmanager.com/gtag/js?id=G-K5PN90MCSZ"></script>
  20.    <script>
  21.        window.dataLayer = window.dataLayer || [];
  22.  
  23.        function gtag() {
  24.            dataLayer.push(arguments);
  25.        }
  26.  
  27.        gtag('js', new Date());
  28.  
  29.        gtag('config', 'G-K5PN90MCSZ');
  30.    </script>
  31.    <meta name="msvalidate.01" content="5CAE4943CEBF239CD78C1EE61E777102" />
  32.  
  33.  
  34.  
  35.    <!-- Tailwind CSS -->
  36.    <script src="https://cdn.tailwindcss.com"></script>
  37.  
  38.    
  39.    <link href="/static/styles/other_styles.min.css" rel="stylesheet">
  40.    <link href="https://fonts.googleapis.com/css?family=Inter:400,500,600,700&display=swap" rel="stylesheet">
  41.  
  42.    <style>
  43.        .bg-random {
  44.            background-color: hsl(calc(360 * var(--random)), 70%, 80%);
  45.        }
  46.    </style>
  47. </head>
  48. <body class="antialiased text-gray-800 font-inter">
  49.  
  50. <header class="bg-white shadow sticky top-0 z-50">
  51.    <div class="container mx-auto px-6 py-4 flex items-center justify-between">
  52.        <!-- Logo -->
  53.        <div class="flex items-center">
  54.            <a href="/" class="flex items-center">
  55.                <img src="../static/logo.svg" alt="iformat.io Logo" class="h-8 w-auto mr-2">
  56.                <span class="text-3xl font-medium text-blue-600">iformat.io</span>
  57.            </a>
  58.        </div>
  59.  
  60.        <!-- Mobile Menu Button -->
  61.        <button class="text-gray-800 md:hidden focus:outline-none" id="mobile-menu-button">
  62.            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
  63.                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
  64.                      d="M4 6h16M4 12h16M4 18h16"></path>
  65.            </svg>
  66.        </button>
  67.  
  68.        <!-- Navigation for larger screens -->
  69.        <div class="hidden md:flex font-medium items-center space-x-6" id="navbar">
  70.  
  71.            <div class="container mx-auto flex items-center space-x-6">
  72.  
  73.                <!-- Converter Tools Dropdown -->
  74.                <div class="relative group">
  75.                    <button class="flex items-center text-gray-800 hover:text-blue-600 font-medium focus:outline-none">
  76.                        Converter Tools
  77.                        <!-- Dropdown Icon -->
  78.                        <svg class="ml-1 w-4 h-4" fill="currentColor" viewBox="0 0 20 20"
  79.                             xmlns="http://www.w3.org/2000/svg">
  80.                            <path fill-rule="evenodd"
  81.                                  d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
  82.                                  clip-rule="evenodd"></path>
  83.                        </svg>
  84.                    </button>
  85.                    <!-- Dropdown Content for Converters -->
  86.                    <div class="absolute right-0 mt-0 w-48 bg-white rounded-lg shadow-lg hidden group-hover:block transition-opacity duration-300 ease-in-out opacity-0 group-hover:opacity-100 z-10">
  87.                        <div class="py-2">
  88.                            <a href="/image-converter"
  89.                               class="block px-4 py-2 text-gray-800 hover:bg-gray-100 hover:text-blue-600">Image
  90.                                Converter</a>
  91.                            <a href="/video-converter"
  92.                               class="block px-4 py-2 text-gray-800 hover:bg-gray-100 hover:text-blue-600">Video
  93.                                Converter</a>
  94.                            <a href="/audio-converter"
  95.                               class="block px-4 py-2 text-gray-800 hover:bg-gray-100 hover:text-blue-600">Audio
  96.                                Converter</a>
  97.                            <a href="/document-converter"
  98.                               class="block px-4 py-2 text-gray-800 hover:bg-gray-100 hover:text-blue-600">Document
  99.                                Converter</a>
  100.                        </div>
  101.                    </div>
  102.                </div>
  103.  
  104.                <!-- Compressor Tools Dropdown -->
  105.                <div class="relative group">
  106.                    <button class="flex items-center text-gray-800 hover:text-blue-600 font-medium focus:outline-none">
  107.                        Compressor Tools
  108.                        <!-- Dropdown Icon -->
  109.                        <svg class="ml-1 w-4 h-4" fill="currentColor" viewBox="0 0 20 20"
  110.                             xmlns="http://www.w3.org/2000/svg">
  111.                            <path fill-rule="evenodd"
  112.                                  d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
  113.                                  clip-rule="evenodd"></path>
  114.                        </svg>
  115.                    </button>
  116.                    <!-- Dropdown Content for Compressors -->
  117.                    <div class="absolute right-0 mt-0 w-48 bg-white rounded-lg shadow-lg hidden group-hover:block transition-opacity duration-300 ease-in-out opacity-0 group-hover:opacity-100 z-10">
  118.                        <div class="py-2">
  119.                            <a href="/image-compressor"
  120.                               class="block px-4 py-2 text-gray-800 hover:bg-gray-100 hover:text-blue-600">Image
  121.                                Compressor</a>
  122.                            <a href="/document-compressor"
  123.                               class="block px-4 py-2 text-gray-800 hover:bg-gray-100 hover:text-blue-600">Document
  124.                                Compressor</a>
  125.                        </div>
  126.                    </div>
  127.                </div>
  128.  
  129.                <!-- Image Resizer Link with Icon -->
  130.                <a href="/image-resizer" class="flex items-center text-gray-800 hover:text-blue-600 font-medium">
  131.                    Image Resizer
  132.                </a>
  133.                
  134.                <a href="/time-converter" class="flex items-center text-gray-800 hover:text-blue-600 font-medium">
  135.                    Time Converter
  136.                </a>
  137.                <a href="/blog" class="flex items-center text-gray-800 hover:text-blue-600 font-medium">
  138.                    Blog
  139.                </a>
  140.                
  141.            </div>
  142.  
  143.  
  144.            <!-- Search Box -->
  145.            <div class="relative hidden md:block">
  146.                <input id="search-bar" type="text" placeholder="Search tools..."
  147.                       class="border border-gray-300 rounded-full px-4 py-1 pl-10 focus:outline-none focus:border-blue-500"
  148.                       oninput="searchAppsSubGroups()">
  149.                <svg class="w-4 h-4 absolute left-3 top-2.5 text-gray-500" fill="currentColor" viewBox="0 0 20 20">
  150.                    <path fill-rule="evenodd"
  151.                          d="M12.9 14.32a8 8 0 111.414-1.414l5.387 5.387a1 1 0 01-1.414 1.414l-5.387-5.387zM8 14a6 6 0 100-12 6 6 0 000 12z"
  152.                          clip-rule="evenodd"/>
  153.                </svg>
  154.                <!-- Search Results Container -->
  155.                <div id="search-results"
  156.                     class="absolute left-0 mt-1 bg-white border border-gray-300 rounded-md w-full hidden z-20">
  157.                    <!-- Search results will be populated here -->
  158.                </div>
  159.            </div>
  160.  
  161.            <!-- Language Switcher -->
  162.  
  163.  
  164.  
  165.  
  166.  
  167.  
  168.  
  169.  
  170.  
  171.  
  172.  
  173.  
  174.  
  175.  
  176.  
  177.  
  178.  
  179.  
  180.  
  181.  
  182.  
  183.  
  184.  
  185.  
  186.        </div>
  187.    </div>
  188.  
  189.    <!-- Mobile Navigation Menu -->
  190.    <div class="md:hidden hidden" id="mobile-menu">
  191.        <div class="flex flex-col px-6 pt-4 pb-6 space-y-4"> <!-- Applied flex-col for vertical alignment -->
  192.            <a href="/image-converter" class="text-gray-800 hover:text-blue-600">Image Converter</a>
  193.            <a href="/video-converter" class="text-gray-800 hover:text-blue-600">Video Converter</a>
  194.            <a href="/audio-converter" class="text-gray-800 hover:text-blue-600">Audio Converter</a>
  195.            <a href="/image-compressor" class="text-gray-800 hover:text-blue-600">Image Compressor</a>
  196.            <a href="/document-converter" class="text-gray-800 hover:text-blue-600">Document Converter</a>
  197.            <a href="/document-compressor" class="text-gray-800 hover:text-blue-600">Document Compressor</a>
  198.            <a href="/time-converter" class="text-gray-800 hover:text-blue-600">Time Converter</a>
  199.            <a href="/blog" class="text-gray-800 hover:text-blue-600">Blog</a>
  200.        </div>
  201.    </div>
  202. </header>
  203.  
  204. <script>
  205.    function searchAppsSubGroups() {
  206.        const query = document.getElementById('search-bar').value.trim();
  207.        const resultsContainer = document.getElementById('search-results');
  208.  
  209.        if (query.length > 1) {
  210.            fetch(`/search/?q=${encodeURIComponent(query)}`)
  211.                .then(response => {
  212.                    if (!response.ok) {
  213.                        throw new Error(`Error: ${response.status}`);
  214.                    }
  215.                    return response.json();
  216.                })
  217.                .then(data => {
  218.                    const results = data.results || [];
  219.                    resultsContainer.innerHTML = '';
  220.  
  221.                    if (results.length > 0) {
  222.                        results.forEach(result => {
  223.                            const item = document.createElement('a');
  224.                            item.href = result.url || '#';
  225.                            item.className = 'block px-4 py-2 text-gray-800 hover:bg-blue-100 hover:text-blue-700';
  226.                            item.innerText = result.name || 'No name available';
  227.                            resultsContainer.appendChild(item);
  228.                        });
  229.                        resultsContainer.classList.remove('hidden');
  230.                    } else {
  231.                        resultsContainer.innerHTML = '<p class="px-4 py-2 text-gray-800">No results found.</p>';
  232.                        resultsContainer.classList.remove('hidden');
  233.                    }
  234.                })
  235.                .catch(error => {
  236.                    console.error('Error fetching search results:', error);
  237.                    resultsContainer.innerHTML = '<p class="px-4 py-2 text-red-600">An error occurred. Please try again.</p>';
  238.                    resultsContainer.classList.remove('hidden');
  239.                });
  240.        } else {
  241.            resultsContainer.classList.add('hidden');
  242.        }
  243.    }
  244.  
  245.    document.addEventListener('click', function (event) {
  246.        const searchBar = document.getElementById('search-bar');
  247.        const searchResults = document.getElementById('search-results');
  248.        if (searchBar && searchResults && !searchBar.contains(event.target) && !searchResults.contains(event.target)) {
  249.            searchResults.classList.add('hidden');
  250.        }
  251.    });
  252.  
  253.    // Toggle the mobile menu visibility
  254.    const mobileMenuButton = document.getElementById('mobile-menu-button');
  255.    const mobileMenu = document.getElementById('mobile-menu');
  256.  
  257.    mobileMenuButton.addEventListener('click', () => {
  258.        mobileMenu.classList.toggle('hidden'); // Show or hide the mobile menu
  259.    });
  260.  
  261.    // Close the mobile menu when clicking outside
  262.    document.addEventListener('click', function (event) {
  263.        if (!mobileMenu.contains(event.target) && !mobileMenuButton.contains(event.target)) {
  264.            mobileMenu.classList.add('hidden');
  265.        }
  266.    });
  267.    /*
  268.    // Language Switcher functionality
  269.    const langButton = document.getElementById('lang-button');
  270.    const langMenu = document.getElementById('lang-menu');
  271.  
  272.    langButton.addEventListener('click', (e) => {
  273.        e.stopPropagation();
  274.        langMenu.classList.toggle('hidden');
  275.        langButton.setAttribute('aria-expanded', !langMenu.classList.contains('hidden'));
  276.    });
  277.  
  278.    // Close the language dropdown when clicking outside
  279.    window.addEventListener('click', () => {
  280.        langMenu.classList.add('hidden');
  281.        langButton.setAttribute('aria-expanded', 'false');
  282.    });
  283.  
  284.    // Handle language selection
  285.    const langLinks = document.querySelectorAll('#lang-menu a');
  286.    langLinks.forEach(link => {
  287.        link.addEventListener('click', function (e) {
  288.            e.preventDefault();
  289.            const selectedLanguage = this.getAttribute('data-lang');
  290.            const currentPath = window.location.pathname;
  291.            let newUrl = `/${selectedLanguage}${currentPath}`;
  292.  
  293.            // Remove leading language code if exists
  294.            const pathSegments = currentPath.split('/');
  295.            if (pathSegments[1] && pathSegments[1].length === 2) {
  296.                pathSegments.splice(1, 1);
  297.                newUrl = `/${selectedLanguage}/${pathSegments.slice(1).join('/')}`;
  298.            }
  299.  
  300.            // Redirect to the new URL
  301.            window.location.href = newUrl;
  302.        });
  303.    }); */
  304. </script>
  305.  
  306.  
  307.  
  308.  
  309.    
  310.  
  311.    <div class="container mx-auto py-2 px-6">
  312.        <nav>
  313.            <ol class="list-reset flex items-center space-x-2 text-sm md:text-base text-gray-600">
  314.                
  315.                    <!-- Check if it's the last breadcrumb item to apply different styling -->
  316.                    
  317.                        <li>
  318.                            <a href="/"
  319.                               class="text-blue-600 hover:text-blue-800 font-medium">Home</a>
  320.                        </li>
  321.                        <li>
  322.                            <span class="text-gray-500">›</span>
  323.                        </li>
  324.                    
  325.                
  326.                    <!-- Check if it's the last breadcrumb item to apply different styling -->
  327.                    
  328.                        <li>
  329.                            <a href="image-converter"
  330.                               class="text-blue-600 hover:text-blue-800 font-medium">Image Converter</a>
  331.                        </li>
  332.                        <li>
  333.                            <span class="text-gray-500">›</span>
  334.                        </li>
  335.                    
  336.                
  337.                    <!-- Check if it's the last breadcrumb item to apply different styling -->
  338.                    
  339.                        <li>
  340.                            <a href="avif-converter"
  341.                               class="text-blue-600 hover:text-blue-800 font-medium">AVIF Converter</a>
  342.                        </li>
  343.                        <li>
  344.                            <span class="text-gray-500">›</span>
  345.                        </li>
  346.                    
  347.                
  348.                    <!-- Check if it's the last breadcrumb item to apply different styling -->
  349.                    
  350.                        <li class="text-gray-700 font-medium">
  351.                            AVIF to PNG Converter
  352.                        </li>
  353.                    
  354.                
  355.            </ol>
  356.        </nav>
  357.    </div>
  358. <main class="py-10 bg-gradient-to-r from-blue-100 to-blue-200">
  359.    <div class="container mx-auto px-6">
  360.        <h1 class="text-3xl sm:text-4xl lg:text-5xl font-bold text-center mb-4 sm:mb-6 lg:mb-8 text-gray-800">AVIF to PNG Converter</h1>
  361.        <p class="text-center text-base sm:text-lg lg:text-xl mb-8 sm:mb-12 text-gray-700 max-w-3xl mx-auto">Convert AVIF to PNG with our free online tool. It’s fast, secure, and simple to use – ideal for converting AVIF files to PNG format with no software needed.</p>
  362.        <div class="bg-white rounded-2xl shadow-md p-6 sm:p-8 max-w-full lg:max-w-4xl mx-auto">
  363.            <div id="drop-area" class="rounded-xl p-12 sm:p-16 lg:p-20 text-center border-2 border-dashed border-gray-300 hover:border-blue-500 transition-colors">
  364.                <button id="browse-btn" class="bg-blue-500 text-white font-semibold text-lg px-8 py-3 rounded-xl hover:bg-blue-600 transition duration-300">
  365.                    Browse Files
  366.                </button>
  367.                <input id="file-upload" type="file" class="hidden" multiple/>
  368.            </div>
  369.  
  370.            <div id="file-list" class="mt-6 sm:mt-8 hidden">
  371.                <h3 class="font-semibold text-lg mb-4">Selected Files:</h3>
  372.                <div class="overflow-x-auto">
  373.                    <table class="min-w-full divide-y divide-gray-300">
  374.                        <thead class="bg-gray-100">
  375.                        <tr>
  376.                            <th scope="col" class="px-6 py-3 text-left text-sm font-semibold text-gray-600 uppercase tracking-wider">
  377.                                File Name
  378.                            </th>
  379.                            <th scope="col" class="px-6 py-3 text-left text-sm font-semibold text-gray-600 uppercase tracking-wider">
  380.                                Size
  381.                            </th>
  382.                            <th scope="col" class="px-6 py-3 text-left text-sm font-semibold text-gray-600 uppercase tracking-wider">
  383.                                Convert To
  384.                            </th>
  385.                        </tr>
  386.                        </thead>
  387.                        <tbody id="file-table-body" class="bg-white divide-y divide-gray-300">
  388.                        <!-- File rows will be inserted here -->
  389.                        </tbody>
  390.                    </table>
  391.                </div>
  392.                <div class="flex flex-col sm:flex-row justify-between items-center mt-6">
  393.                    <button id="add-more-files-btn" class="bg-gray-200 text-gray-900 px-4 py-2 rounded-full hover:bg-gray-500 hover:text-white transition duration-300 mb-2 sm:mb-0">
  394.                        Add More Files
  395.                    </button>
  396.                    <div class="flex items-center space-x-2 sm:space-x-4 mt-4 sm:mt-0">
  397.                        <label for="convert-all-format" class="text-sm font-medium">Convert all to:</label>
  398.                        <div id="convert-all-format">
  399.                            <!-- Dropdown content -->
  400.                        </div>
  401.                    </div>
  402.                    <button id="convert-all-btn" class="w-full sm:w-auto bg-blue-500 text-white py-2 px-6 rounded-lg hover:bg-blue-600 transition duration-300 font-semibold text-lg">
  403.                        Convert All Files
  404.                    </button>
  405.                </div>
  406.            </div>
  407.  
  408.            <div id="conversion-results" class="mt-6 sm:mt-8 hidden">
  409.                <h3 class="font-semibold text-lg mb-4">Converted Files:</h3>
  410.                <div class="overflow-x-auto">
  411.                    <table class="min-w-full divide-y divide-gray-300">
  412.                        <thead class="bg-gray-100">
  413.                        <tr>
  414.                            <th scope="col" class="px-6 py-3 text-left text-sm font-semibold text-gray-600 uppercase tracking-wider">
  415.                                File Name
  416.                            </th>
  417.                            <th scope="col"
  418.                                class="px-6 py-3 text-left text-sm font-semibold text-gray-600 uppercase tracking-wider">
  419.                                File Size
  420.                            </th>
  421.                            <th scope="col" class="px-6 py-3 text-left text-sm font-semibold text-gray-600 uppercase tracking-wider">
  422.                                Download
  423.                            </th>
  424.                        </tr>
  425.                        </thead>
  426.                        <tbody id="converted-files-list" class="bg-white divide-y divide-gray-300">
  427.                        <!-- Converted file links will be inserted here -->
  428.                        </tbody>
  429.                    </table>
  430.                </div>
  431.                <div class="flex flex-col sm:flex-row justify-between mt-6">
  432.                    <a id="convert-again-btn" href="/" class="bg-blue-500 text-white px-6 py-2 rounded-lg hover:bg-blue-600 transition duration-300 text-center mb-2 sm:mb-0">
  433.                        Convert Again
  434.                    </a>
  435.                    <a id="zip-download" href="#" class="bg-green-500 text-white px-6 py-2 rounded-lg hover:bg-green-600 transition duration-300 text-center">
  436.                        Download All (ZIP)
  437.                    </a>
  438.                </div>
  439.            </div>
  440.            <div id="share-and-support" class="mt-6 sm:mt-8 hidden bg-white p-4 sm:p-6 rounded-lg">
  441.                <div class="flex justify-center mb-4">
  442.                    <p class="font-semibold text-lg">Share your results:</p>
  443.                </div>
  444.                <div class="flex justify-center space-x-2 sm:space-x-4">
  445.                    <a href="https://www.facebook.com/sharer/sharer.php?u=https://iformat.io" class="bg-blue-500 text-white px-4 py-2 rounded-full hover:bg-blue-600 transition duration-300" target="_blank">
  446.                        Share on Facebook
  447.                    </a>
  448.                    <a href="https://twitter.com/intent/tweet?url=https://iformat.io&text=Check%20out%20this%20website!" class="bg-blue-400 text-white px-4 py-2 rounded-full hover:bg-blue-500 transition duration-300" target="_blank">
  449.                        Share on Twitter
  450.                    </a>
  451.                    <a href="https://buymeacoffee.com/iformat" target="_blank" class="bg-yellow-500 text-white px-4 py-2 rounded-full hover:bg-yellow-600 transition duration-300">
  452.                        Buy Me a Coffee
  453.                    </a>
  454.                </div>
  455.            </div>
  456.        </div>
  457.    </div>
  458. </main>
  459. <script src="/static/CACHE/js/output.58ea25e804e9.js"></script>
  460. <script>
  461.    document.addEventListener('DOMContentLoaded', function () {
  462.        const dropArea = document.getElementById('drop-area');
  463.        const fileInput = document.getElementById('file-upload');
  464.        const browseBtn = document.getElementById('browse-btn');
  465.        const fileList = document.getElementById('file-list');
  466.        const fileTableBody = document.getElementById('file-table-body');
  467.        const convertAllBtn = document.getElementById('convert-all-btn');
  468.        const conversionResults = document.getElementById('conversion-results');
  469.        const convertedFilesList = document.getElementById('converted-files-list');
  470.        const zipDownload = document.getElementById('zip-download');
  471.        // Parse the formats JSON from Django
  472.        const conversionFormats = JSON.parse('{\u0022Audio\u0022: [\u0022flac\u0022, \u0022m4a\u0022, \u0022m4r\u0022, \u0022mp3\u0022, \u0022ogg\u0022, \u0022wav\u0022, \u0022wma\u0022], \u0022Document\u0022: [\u0022pdf\u0022], \u0022Image\u0022: [\u0022avif\u0022, \u0022bmp\u0022, \u0022heic\u0022, \u0022heif\u0022, \u0022jfif\u0022, \u0022jpeg\u0022, \u0022jpg\u0022, \u0022png\u0022, \u0022svg\u0022, \u0022tif\u0022, \u0022tiff\u0022, \u0022webp\u0022], \u0022Video\u0022: [\u0022avi\u0022, \u0022mkv\u0022, \u0022mov\u0022, \u0022mp4\u0022, \u0022webm\u0022]}');
  473.  
  474.  
  475.        function changeAll(format, category) {
  476.            if (format && category) {
  477.                const allConvertedFiles = fileTableBody.querySelectorAll('tr');
  478.                allConvertedFiles.forEach((fileRow, index) => {
  479.                    const convertToSelect = dds[index];
  480.                    convertToSelect.setValue(format, category); // Set the selected format for each file
  481.                });
  482.            }
  483.        }
  484.  
  485.        const convertAllFormatSelect = new FormatDropdown('convert-all-format', conversionFormats, (format, category) => {
  486.            console.log('selected: ' + format);
  487.            changeAll(format, category);
  488.        });
  489.        // document.getElementById('convert-all-format');
  490.        
  491.        let filesArray = [];
  492.        let dds = [];
  493.  
  494.        const addMoreFilesBtn = document.getElementById('add-more-files-btn');
  495.  
  496.        addMoreFilesBtn.addEventListener('click', () => {
  497.            fileInput.click();  // Trigger the file input click event
  498.        });
  499.        // Set the default value for the "Convert all to" dropdown
  500.        /*
  501.        if (endExtn) {
  502.            convertAllFormatSelect.setValue(endExtn);
  503.        }
  504.         */
  505.  
  506.        browseBtn.addEventListener('click', () => fileInput.click());
  507.  
  508.        ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
  509.            dropArea.addEventListener(eventName, preventDefaults, false);
  510.        });
  511.  
  512.        function preventDefaults(e) {
  513.            e.preventDefault();
  514.            e.stopPropagation();
  515.        }
  516.  
  517.        ['dragenter', 'dragover'].forEach(eventName => {
  518.            dropArea.addEventListener(eventName, highlight, false);
  519.        });
  520.  
  521.        ['dragleave', 'drop'].forEach(eventName => {
  522.            dropArea.addEventListener(eventName, unhighlight, false);
  523.        });
  524.  
  525.        function highlight() {
  526.            dropArea.classList.add('bg-blue-100');
  527.        }
  528.  
  529.        function unhighlight() {
  530.            dropArea.classList.remove('bg-blue-100');
  531.        }
  532.  
  533.        dropArea.addEventListener('drop', handleDrop, false);
  534.  
  535.        function handleDrop(e) {
  536.            const dt = e.dataTransfer;
  537.            const files = dt.files;
  538.            handleFiles(files);
  539.        }
  540.  
  541.        fileInput.addEventListener('change', function () {
  542.            handleFiles(this.files);
  543.        });
  544.  
  545.        function handleFiles(files) {
  546.            if (files.length > 0) {
  547.                fileList.classList.remove('hidden');
  548.                convertAllBtn.classList.remove('hidden');
  549.                dropArea.classList.add('hidden');
  550.  
  551.                const currentIndex = filesArray.length; // Get the current length of the filesArray
  552.  
  553.                Array.from(files).forEach((file, index) => {
  554.                    const actualIndex = currentIndex + index; // Calculate the actual index for each file
  555.                    filesArray.push(file);
  556.                    appendFileRow(file, actualIndex);
  557.                });
  558.            }
  559.            updateFileListVisibility();
  560.        }
  561.  
  562.        function appendFileRow(file, index) {
  563.            const row = document.createElement('tr');
  564.            // Parse the formats JSON from Django
  565.            const conversionFormats = JSON.parse('{\u0022Audio\u0022: [\u0022flac\u0022, \u0022m4a\u0022, \u0022m4r\u0022, \u0022mp3\u0022, \u0022ogg\u0022, \u0022wav\u0022, \u0022wma\u0022], \u0022Document\u0022: [\u0022pdf\u0022], \u0022Image\u0022: [\u0022avif\u0022, \u0022bmp\u0022, \u0022heic\u0022, \u0022heif\u0022, \u0022jfif\u0022, \u0022jpeg\u0022, \u0022jpg\u0022, \u0022png\u0022, \u0022svg\u0022, \u0022tif\u0022, \u0022tiff\u0022, \u0022webp\u0022], \u0022Video\u0022: [\u0022avi\u0022, \u0022mkv\u0022, \u0022mov\u0022, \u0022mp4\u0022, \u0022webm\u0022]}');
  566.  
  567.            // Build option groups for the select element
  568.  
  569.            let optionGroupsHTML = '<option value="">Select</option>';
  570.            Object.keys(conversionFormats).forEach(category => {
  571.                optionGroupsHTML += `<optgroup label="${category}">`;
  572.                conversionFormats[category].forEach(format => {
  573.                    optionGroupsHTML += `<option value="${format}">${format.toUpperCase()}</option>`;
  574.                });
  575.                optionGroupsHTML += '</optgroup>';
  576.            });
  577.  
  578.            // Get the select element and populate it
  579.            //const selectElement = document.getElementById('convert-all-format');
  580.  
  581.            //selectElement.innerHTML = optionGroupsHTML;
  582.  
  583.            // Construct the row HTML
  584.            row.innerHTML = `
  585.        <td class="px-6 py-4 whitespace-nowrap">
  586.            <div class="text-sm font-medium text-gray-900">${file.name}</div>
  587.        </td>
  588.        <td class="px-6 py-4 whitespace-nowrap">
  589.            <div class="text-sm text-gray-500">${formatFileSize(file.size)}</div>
  590.        </td>
  591.        <td class="px-6 py-4 whitespace-nowrap">
  592.            <div id="dd-${index}"></div>
  593. <input id="input-${index}" type="hidden" class=".convert-to'" />
  594.        </td>
  595.        <td class="px-6 py-4 whitespace-nowrap">
  596.            <button class="remove-file-btn text-gray-500 hover:text-red-600 transition duration-300">
  597.                &times;
  598.            </button>
  599.        </td>
  600.    `;
  601.  
  602.            fileTableBody.appendChild(row);
  603.  
  604.            // Set the default value for the file row dropdown if applicable
  605.            /*
  606.            if (endExtn) {
  607.                convertToSelect.value = endExtn;
  608.            }
  609. */
  610.            const input_index = row.querySelector(`#input-${index}`);
  611.            const dd_index = new FormatDropdown(`dd-${index}`, conversionFormats, (format) => {
  612.                input_index.value = format;
  613.            });
  614.            dds.push(dd_index);
  615.            // Attach the remove functionality
  616.            const removeBtn = row.querySelector('.remove-file-btn');
  617.            removeBtn.addEventListener('click', function () {
  618.                removeFileRow(row, file);
  619.                filesArray.splice(index, 1); // Remove the file from the array
  620.  
  621.                dds.splice(index, 1);
  622.                updateIndices(); // Update the indices of remaining rows
  623.  
  624.            });
  625.        }
  626.  
  627.        function updateIndices() {
  628.            // Update the ids and indices for each row after one is removed
  629.            fileTableBody.querySelectorAll('tr').forEach((row, newIndex) => {
  630.                const dropdownId = `dd-${newIndex}`;
  631.                const inputId = `input-${newIndex}`;
  632.  
  633.                // Update the dropdown and input ids
  634.                row.querySelector('[id^="dd-"]').id = dropdownId;
  635.                row.querySelector('[id^="input-"]').id = inputId;
  636.  
  637.                // Update the FormatDropdown instance
  638.                const ddInstance = dds[newIndex];
  639.                ddInstance.updateId(dropdownId); // Assuming the FormatDropdown class has an updateId method
  640.            });
  641.        }
  642.  
  643.        function removeFileRow(row, file) {
  644.            // Remove the file from the array
  645.            filesArray = filesArray.filter(f => f !== file);
  646.  
  647.            // Remove the row from the table
  648.            row.remove();
  649.  
  650.            // Update visibility of file list
  651.            updateFileListVisibility();
  652.        }
  653.  
  654.        function updateFileListVisibility() {
  655.            if (filesArray.length === 0) {
  656.                fileList.classList.add('hidden');
  657.                convertAllBtn.classList.add('hidden');
  658.                dropArea.classList.remove('hidden');
  659.            } else {
  660.                fileList.classList.remove('hidden');
  661.                convertAllBtn.classList.remove('hidden');
  662.                dropArea.classList.add('hidden');
  663.            }
  664.        }
  665.  
  666.        function formatFileSize(bytes) {
  667.            if (bytes === 0) return '0 Bytes';
  668.            const k = 1024;
  669.            const sizes = ['Bytes', 'KB', 'MB', 'GB'];
  670.            const i = Math.floor(Math.log(bytes) / Math.log(k));
  671.            return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
  672.        }
  673.  
  674.        convertAllBtn.addEventListener('click', () => {
  675.            const formData = new FormData();
  676.            const allFiles = fileTableBody.querySelectorAll('tr');
  677.  
  678.            allFiles.forEach((fileRow, index) => {
  679.                const fileName = fileRow.querySelector('.text-sm.font-medium').textContent;
  680.                const convertTo = fileRow.querySelector(`#input-${index}`).value;
  681.  
  682.                if (fileName && convertTo) {
  683.                    formData.append(`file_${index}`, filesArray[index]);
  684.                    formData.append(`format_${index}`, convertTo);
  685.                }
  686.            });
  687.  
  688.            // Show loading indicator
  689.            convertAllBtn.textContent = 'Converting...';
  690.            convertAllBtn.disabled = true;
  691.  
  692.            fetch('/upload_files', {
  693.                method: 'POST',
  694.                body: formData,
  695.            })
  696.                .then(response => {
  697.                    if (!response.ok) {
  698.                        throw new Error('Network response was not ok');
  699.                    }
  700.                    return response.json();
  701.                })
  702.                .then(data => {
  703.                    if (data.error) {
  704.                        alert(data.error);
  705.                    } else {
  706.                        displayConversionResults(data);
  707.                    }
  708.                })
  709.                .catch(error => {
  710.                    console.error('Error:', error);
  711.                    alert('An error occurred during conversion. Please try again.');
  712.                })
  713.                .finally(() => {
  714.                    // Reset button state
  715.                    convertAllBtn.textContent = 'Convert All Files';
  716.                    convertAllBtn.disabled = false;
  717.                });
  718.        });
  719.  
  720.        function displayConversionResults(data) {
  721.            convertedFilesList.innerHTML = '';
  722.            data.uploaded_files.forEach(file => {
  723.                const row = document.createElement('tr');
  724.                row.innerHTML = `
  725.            <td class="px-6 py-4 whitespace-nowrap">
  726.                <div class="text-sm font-medium text-gray-900">${file.input_name}</div>
  727.            </td>
  728.            <td class="px-6 py-4 whitespace-nowrap">
  729.                        <div class="text-sm text-gray-500">${formatFileSize(file.converted_file_size)}</div>
  730.             </td>
  731.            <td class="px-6 py-4 whitespace-nowrap">
  732.                <a href="${file.output_url}" class="text-blue-600 hover:text-blue-800" download>Download</a>
  733.            </td>
  734.        `;
  735.                convertedFilesList.appendChild(row);
  736.            });
  737.  
  738.            zipDownload.href = data.zip_file_url;
  739.            zipDownload.classList.remove('hidden');
  740.            conversionResults.classList.remove('hidden');
  741.  
  742.            // Show the Convert Again button
  743.            const convertAgainBtn = conversionResults.querySelector('a[href="/"]');
  744.            convertAgainBtn.classList.remove('hidden');
  745.  
  746.            // Show the Share and Support section
  747.            const shareAndSupportSection = document.getElementById('share-and-support');
  748.            shareAndSupportSection.classList.remove('hidden');
  749.  
  750.            // Hide the selected files section
  751.            fileList.classList.add('hidden');
  752.  
  753.            // Hide the Convert All Files button
  754.            convertAllBtn.classList.add('hidden');
  755.        }
  756.    });
  757.  
  758. </script>
  759.    <style>
  760.    .star {
  761.        cursor: pointer;
  762.        font-size: 2rem;
  763.        color: #e5e5e5; /* Default star color */
  764.    }
  765.  
  766.    .star:hover, .star.selected {
  767.        color: #ffcc00; /* Yellow color for selected stars */
  768.    }
  769. </style>
  770. <div class="rating-section text-center mt-4 p-6 bg-white shadow-md rounded-lg">
  771.    <div class="rating-form">
  772.        <h2 class="text-2xl font-semibold mb-4">Rate our AVIF to PNG Converter</h2>
  773.        <div class="flex items-center justify-center space-x-4 mt-2" id="rating-value">
  774.            <!-- Star Rating Buttons -->
  775.            <div class="flex space-x-2">
  776.                <button class="star" onclick="rate(1)">★</button>
  777.                <button class="star" onclick="rate(2)">★</button>
  778.                <button class="star" onclick="rate(3)">★</button>
  779.                <button class="star" onclick="rate(4)">★</button>
  780.                <button class="star" onclick="rate(5)">★</button>
  781.            </div>
  782.            <!-- Rating Value and Count -->
  783.            <p class="flex items-center space-x-1 text-lg">
  784.                <span class="text-xl font-bold">0.0</span>
  785.                <span>/ 5</span>
  786.                <span>(0 votes)</span>
  787.            </p>
  788.        </div>
  789.  
  790.        <button id="submit-rating" class="mt-4 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700">Submit
  791.            Rating
  792.        </button>
  793.    </div>
  794. </div>
  795. <script>
  796.    let selectedRating = 0;
  797.    const contentId = 107;  // Injected from Django context
  798.    const contentType = "app";  // Injected from Django context
  799.    const ratingUrl = "/rate-content";  // Injected from Django context
  800.  
  801.    // Get the CSRF token from the cookies
  802.    function getCookie(name) {
  803.        let cookieValue = null;
  804.        if (document.cookie && document.cookie !== '') {
  805.            const cookies = document.cookie.split(';');
  806.            for (let i = 0; i < cookies.length; i++) {
  807.                const cookie = cookies[i].trim();
  808.                if (cookie.substring(0, name.length + 1) === (name + '=')) {
  809.                    cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
  810.                    break;
  811.                }
  812.            }
  813.        }
  814.        return cookieValue;
  815.    }
  816.  
  817.    // CSRF token to include in the request headers
  818.    const csrftoken = getCookie('csrftoken');
  819.    console.log("CSRF Token:", csrftoken);  // Debugging log
  820.  
  821.    // Function to handle star rating selection
  822.    function rate(stars) {
  823.        selectedRating = stars;
  824.        const starButtons = document.querySelectorAll('.star');
  825.        starButtons.forEach((star, index) => {
  826.            star.classList.toggle('selected', index < stars);
  827.        });
  828.        document.getElementById('rating-value').innerText = `Rating: ${stars}/5`;
  829.    }
  830.  
  831.    // Function to handle rating submission
  832.    document.getElementById('submit-rating').addEventListener('click', function () {
  833.        if (selectedRating === 0) {
  834.            alert("Please select a rating before submitting.");
  835.            return;
  836.        }
  837.  
  838.        console.log("Submitting rating...");  // Debugging log
  839.        console.log("Content Type:", contentType);  // Debugging log
  840.        console.log("Content ID:", contentId);  // Debugging log
  841.        console.log("Selected Rating:", selectedRating);  // Debugging log
  842.  
  843.        // Send the rating to the backend using Fetch API
  844.        fetch(ratingUrl, {
  845.            method: 'POST',
  846.            headers: {
  847.                'Content-Type': 'application/json',
  848.                'X-CSRFToken': csrftoken,  // Include the CSRF token
  849.            },
  850.            body: JSON.stringify({
  851.                content_type: contentType,
  852.                content_id: contentId,
  853.                rating: selectedRating
  854.            }),
  855.        })
  856.            .then(response => response.json())
  857.            .then(data => {
  858.                console.log("Response:", data);  // Debugging log
  859.                if (data.success) {
  860.                    // Replace rating form with thank you message
  861.                    const ratingForm = document.querySelector('.rating-form');
  862.                    if (ratingForm) {
  863.                        ratingForm.innerHTML = `
  864.                        <div class="thank-you-message">
  865.                            <h2 class="text-2xl font-semibold text-green-600 mb-4">Thank you for your rating!</h2>
  866.                            <p>We appreciate your feedback.</p>
  867.                        </div>
  868.                    `;
  869.                    }
  870.                } else {
  871.                    alert('There was an issue submitting your rating. Please try again.');
  872.                }
  873.            })
  874.            .catch((error) => {
  875.                console.error('Error:', error);  // Debugging log
  876.                alert('There was an issue submitting your rating. Please try again.');
  877.            });
  878.    });
  879. </script>
  880.  
  881.    <!-- How to Convert Section -->
  882. <section class="bg-white py-12">
  883.    <div class="max-w-4xl mx-auto text-center">
  884.        <h2 class="text-4xl font-bold text-blue-600 mb-6">How to Convert AVIF to PNG?</h2>
  885.        <p class="text-lg text-gray-700 mb-10">Easily convert your AVIF files to PNG format with our simple three-step process.</p>
  886.  
  887.        <!-- Steps Section -->
  888.        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
  889.            <!-- Step 1 -->
  890.            <div class="bg-gray-50 p-6 rounded-lg shadow-sm hover:shadow-md transition duration-200">
  891.                <h3 class="text-xl font-semibold text-blue-600 mb-2">1. Upload Your AVIF Files</h3>
  892.                <p class="text-gray-700">Click the “Browse Files” button and select the AVIF files you want to convert. You can upload multiple files at once for batch conversion, saving you time and effort.</p>
  893.            </div>
  894.  
  895.            <!-- Step 2 -->
  896.            <div class="bg-gray-50 p-6 rounded-lg shadow-sm hover:shadow-md transition duration-200">
  897.                <h3 class="text-xl font-semibold text-blue-600 mb-2">2. Convert to PNG Format</h3>
  898.                <p class="text-gray-700">After uploading, choose the “Convert All” option to start the conversion process. Our tool will quickly process and convert your AVIF files to high-quality PNG format without losing any details.</p>
  899.            </div>
  900.  
  901.            <!-- Step 3 -->
  902.            <div class="bg-gray-50 p-6 rounded-lg shadow-sm hover:shadow-md transition duration-200">
  903.                <h3 class="text-xl font-semibold text-blue-600 mb-2">3. Download Your PNG Files</h3>
  904.                <p class="text-gray-700">Once the conversion is complete, click “Download All” to save your new PNG files to your device. Enjoy seamless file conversion with our user-friendly tool.</p>
  905.            </div>
  906.        </div>
  907.    </div>
  908. </section>
  909.  
  910. <!-- Features Section -->
  911. <section class="bg-gray-50 py-12">
  912.    <div class="max-w-4xl mx-auto text-center">
  913.        <h2 class="text-3xl font-bold text-gray-800 mb-8">Why Choose Our AVIF to PNG Converter?</h2>
  914.        <p class="text-lg text-gray-700 mb-10">Explore the top features that make our AVIF to PNG converter the preferred choice for thousands of users. Enjoy fast, reliable, and secure file conversions every time.</p>
  915.        <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
  916.            <!-- Feature 1: Fast and Easy -->
  917.            <div class="p-6 bg-white rounded-lg shadow-sm hover:shadow-md transition duration-200">
  918.                <div class="text-blue-600 mb-4">
  919.                    <svg class="w-10 h-10 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
  920.                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
  921.                    </svg>
  922.                </div>
  923.                <h3 class="text-lg font-semibold text-gray-800 mb-2">Fast and Easy Conversion</h3>
  924.                <p class="text-gray-700">Our AVIF to PNG converter is designed to simplify the file conversion process. Just drag and drop your files, hit “Convert,” and get your converted files in seconds.</p>
  925.            </div>
  926.  
  927.            <!-- Feature 2: High-Quality Output -->
  928.            <div class="p-6 bg-white rounded-lg shadow-sm hover:shadow-md transition duration-200">
  929.                <div class="text-blue-600 mb-4">
  930.                    <svg class="w-10 h-10 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
  931.                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"></path>
  932.                    </svg>
  933.                </div>
  934.                <h3 class="text-lg font-semibold text-gray-800 mb-2">High-Quality PNG Files</h3>
  935.                <p class="text-gray-700">Enjoy clear, crisp, and sharp converted files every time. Our tool ensures that the quality of your original AVIF files is maintained throughout the conversion process.</p>
  936.            </div>
  937.  
  938.            <!-- Feature 3: Secure and Private -->
  939.            <div class="p-6 bg-white rounded-lg shadow-sm hover:shadow-md transition duration-200">
  940.                <div class="text-blue-600 mb-4">
  941.                    <svg class="w-10 h-10 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
  942.                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9"></path>
  943.                    </svg>
  944.                </div>
  945.                <h3 class="text-lg font-semibold text-gray-800 mb-2">Secure and Private Conversion</h3>
  946.                <p class="text-gray-700">We prioritize your privacy. All files are processed securely, and we automatically delete them from our servers after 2 hours. Compress your files worry-free.</p>
  947.            </div>
  948.        </div>
  949.    </div>
  950. </section>
  951.  
  952.  
  953.    
  954.        <div class="max-w-4xl mx-auto py-6">
  955.    <!-- FAQ Section with Toggle Functionality -->
  956.    <div class="space-y-6">
  957.        <div class="faq-item rounded-lg shadow overflow-hidden">
  958.            <button class="w-full text-left p-6 flex justify-between items-center bg-gray-50 hover:bg-gray-100 transition duration-200 focus:outline-none"
  959.                    onclick="toggleSection(event)">
  960.                <h2 class="text-2xl font-semibold text-blue-600">
  961.                    What is an AVIF file?
  962.                </h2>
  963.                <svg class="w-5 h-5 text-blue-600 transform transition-transform duration-300" fill="none"
  964.                     stroke="currentColor" viewBox="0 0 24 24">
  965.                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
  966.                </svg>
  967.            </button>
  968.            <div class="content max-h-0 overflow-hidden transition-all duration-500 ease-in-out">
  969.                <div class="p-6 text-gray-800">
  970.                    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
  971. <p><span data-preserver-spaces="true">An&nbsp;</span><strong><span data-preserver-spaces="true">AVIF file</span></strong><span data-preserver-spaces="true">&nbsp;is an image file that stands for AV1 Image File Format. It is a relatively new image format that uses the AV1 (AOMedia Video 1) compression algorithm to create high-quality images with smaller file sizes. AVIF files are becoming popular because they can produce images with better quality than JPEG and even smaller sizes than PNG, making them ideal for web use where quality and speed are essential.</span></p>
  972. <h2><span data-preserver-spaces="true">Key Features of AVIF Files&nbsp;</span></h2>
  973. <ul>
  974. <li><strong><span data-preserver-spaces="true">High Compression Efficiency:</span></strong><span data-preserver-spaces="true">&nbsp;AVIF files are known for their excellent compression, which means they can reduce file sizes significantly while maintaining high image quality. This benefits websites that need to load images quickly without sacrificing visual quality.</span></li>
  975. <li><strong><span data-preserver-spaces="true">Support for Advanced Features:</span></strong><span data-preserver-spaces="true">&nbsp;AVIF supports features like high dynamic range (HDR), transparency, and even animations, making it a versatile format for modern web and graphic design needs.</span></li>
  976. <li><strong><span data-preserver-spaces="true">Improved Image Quality:</span></strong><span data-preserver-spaces="true">&nbsp;AVIF images can deliver better image quality than traditional formats like JPEG, especially in color accuracy and detail, even at smaller file sizes.</span></li>
  977. <li><strong><span data-preserver-spaces="true">Growing Compatibility:</span></strong><span data-preserver-spaces="true">&nbsp;Although AVIF is a newer format, it </span><span data-preserver-spaces="true">is increasingly supported</span><span data-preserver-spaces="true"> by modern browsers like Chrome, Firefox, and Edge, as well as some image editing tools. However, some older systems may still require conversions to more widely supported formats.</span></li>
  978. </ul>
  979. <h2><span data-preserver-spaces="true">Why Use AVIF Files?&nbsp;</span></h2>
  980. <p><span data-preserver-spaces="true">AVIF files are a great choice when you need high-quality images with smaller file sizes, particularly for use on the web. They offer advanced features like HDR and transparency, making them suitable for various applications. Suppose you need to convert AVIF files to other formats for compatibility reasons. In that case, you can easily&nbsp;</span><a class="editor-rtfLink" href="../../../../../avif-to-png" target="_blank" rel="noopener"><span data-preserver-spaces="true">convert AVIF to PNG</span></a><span data-preserver-spaces="true">&nbsp;for transparent images or&nbsp;</span><a class="editor-rtfLink" href="../../../../../avif-to-jpg" target="_blank" rel="noopener"><span data-preserver-spaces="true">convert AVIF to JPG</span></a><span data-preserver-spaces="true">&nbsp;for broader compatibility across devices and platforms.</span></p>
  981. </div>
  982.                </div>
  983.            </div>
  984.        </div>
  985.    </div>
  986. </div>
  987.  
  988. <script>
  989.    function toggleSection(event) {
  990.        const button = event.currentTarget;
  991.        const content = button.nextElementSibling;
  992.        const svgIcon = button.querySelector('svg');
  993.  
  994.        // Toggle max-height for smooth opening/closing of the section
  995.        if (content.style.maxHeight && content.style.maxHeight !== '0px') {
  996.            content.style.maxHeight = '0px';
  997.        } else {
  998.            content.style.maxHeight = content.scrollHeight + "px";
  999.        }
  1000.  
  1001.        // Rotate the SVG icon to indicate the expanded state
  1002.        svgIcon.classList.toggle('rotate-180');
  1003.    }
  1004. </script>
  1005.  
  1006.    
  1007.  
  1008.    
  1009.        <div class="max-w-4xl mx-auto py-6">
  1010.    <!-- FAQ Section with Toggle Functionality -->
  1011.    <div class="space-y-6">
  1012.        <div class="faq-item rounded-lg shadow overflow-hidden">
  1013.            <button class="w-full text-left p-6 flex justify-between items-center bg-gray-50 hover:bg-gray-100 transition duration-200 focus:outline-none"
  1014.                    onclick="toggleSection(event)">
  1015.                <h2 class="text-2xl font-semibold text-blue-600">
  1016.                    What is a PNG file?
  1017.                </h2>
  1018.                <svg class="w-5 h-5 text-blue-600 transform transition-transform duration-300" fill="none"
  1019.                     stroke="currentColor" viewBox="0 0 24 24">
  1020.                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
  1021.                </svg>
  1022.            </button>
  1023.            <div class="content max-h-0 overflow-hidden transition-all duration-500 ease-in-out">
  1024.                <div class="p-6 text-gray-800">
  1025.                    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
  1026. <p class="text-gray-600 text-lg leading-relaxed">A <strong>PNG file</strong> is a type of image file. PNG stands for Portable Network Graphics. This format was created to be a better, more modern way to store pictures than older formats like GIFs.&nbsp;<strong>PNG images</strong> are popular because they keep the picture quality high and are easy to use and share. One of the best things about PNG files is that they can handle transparency, which means parts of the image can be see-through.</p>
  1027. <h2 class="text-xl font-semibold mt-6">Key Features of PNG Images&nbsp;</h2>
  1028. <ul class="list-disc list-inside text-gray-600 text-lg leading-relaxed">
  1029. <li><strong>High-Quality Images:</strong> PNG files maintain a very high image quality even after being saved and shared many times. This makes them great for detailed images like logos or graphics.</li>
  1030. <li><strong>Supports Transparency:</strong> One of the unique features of PNG files is that they can have transparent backgrounds. This is helpful when you want to place an image on top of different backgrounds without any edges showing.</li>
  1031. <li><strong>Widely Compatible:</strong> PNG files work on almost all devices and programs. You can open and use PNG images on computers, phones, and the web without problems.</li>
  1032. </ul>
  1033. <h2 class="text-xl font-semibold mt-6">Why Use PNG Images?&nbsp;</h2>
  1034. <p class="text-gray-600 text-lg leading-relaxed">PNG images are a great choice when you need clear, high-quality pictures. They are perfect for images that need to stay sharp and detailed, like logos, icons, or web graphics. PNG files are also ideal if you need a picture with a transparent background. Overall, PNG is a strong and versatile image format that works well for many uses.</p>
  1035. </div>
  1036.                </div>
  1037.            </div>
  1038.        </div>
  1039.    </div>
  1040. </div>
  1041.  
  1042. <script>
  1043.    function toggleSection(event) {
  1044.        const button = event.currentTarget;
  1045.        const content = button.nextElementSibling;
  1046.        const svgIcon = button.querySelector('svg');
  1047.  
  1048.        // Toggle max-height for smooth opening/closing of the section
  1049.        if (content.style.maxHeight && content.style.maxHeight !== '0px') {
  1050.            content.style.maxHeight = '0px';
  1051.        } else {
  1052.            content.style.maxHeight = content.scrollHeight + "px";
  1053.        }
  1054.  
  1055.        // Rotate the SVG icon to indicate the expanded state
  1056.        svgIcon.classList.toggle('rotate-180');
  1057.    }
  1058. </script>
  1059.  
  1060.    
  1061.  
  1062.  
  1063.  
  1064.  
  1065.  
  1066.    <div class="max-w-4xl mx-auto py-6 space-y-6">
  1067.    <div class="conversion-item rounded-lg overflow-hidden shadow">
  1068.        <button class="w-full text-left p-6 flex justify-between items-center bg-gray-50 hover:bg-gray-100 transition duration-200 focus:outline-none"
  1069.                onclick="toggleSection(event)">
  1070.            <h2 class="text-2xl font-semibold text-blue-600">
  1071.                Convert other files to PNG format
  1072.            </h2>
  1073.            <svg class="w-5 h-5 text-gray-500 transform transition-transform duration-300" fill="none"
  1074.                 stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
  1075.                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
  1076.            </svg>
  1077.        </button>
  1078.        <div class="conversion-list max-h-0 overflow-hidden transition-all duration-500 ease-in-out">
  1079.            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 p-6">
  1080.                
  1081.                    <h3>
  1082.                        <a href="avif-to-png"
  1083.                           class="block text-xl text-semibold text-gray-800 hover:underline hover:text-blue-500 transition duration-200">
  1084.                            AVIF to PNG Converter
  1085.                        </a>
  1086.                    </h3>
  1087.                
  1088.                    <h3>
  1089.                        <a href="bmp-to-png"
  1090.                           class="block text-xl text-semibold text-gray-800 hover:underline hover:text-blue-500 transition duration-200">
  1091.                            BMP to PNG Converter
  1092.                        </a>
  1093.                    </h3>
  1094.                
  1095.                    <h3>
  1096.                        <a href="heic-to-png"
  1097.                           class="block text-xl text-semibold text-gray-800 hover:underline hover:text-blue-500 transition duration-200">
  1098.                            HEIC to PNG Converter
  1099.                        </a>
  1100.                    </h3>
  1101.                
  1102.                    <h3>
  1103.                        <a href="heif-to-png"
  1104.                           class="block text-xl text-semibold text-gray-800 hover:underline hover:text-blue-500 transition duration-200">
  1105.                            HEIF to PNG Converter
  1106.                        </a>
  1107.                    </h3>
  1108.                
  1109.                    <h3>
  1110.                        <a href="jfif-to-png"
  1111.                           class="block text-xl text-semibold text-gray-800 hover:underline hover:text-blue-500 transition duration-200">
  1112.                            JFIF to PNG Converter
  1113.                        </a>
  1114.                    </h3>
  1115.                
  1116.                    <h3>
  1117.                        <a href="jpeg-to-png"
  1118.                           class="block text-xl text-semibold text-gray-800 hover:underline hover:text-blue-500 transition duration-200">
  1119.                            JPEG to PNG Converter
  1120.                        </a>
  1121.                    </h3>
  1122.                
  1123.                    <h3>
  1124.                        <a href="jpg-to-png"
  1125.                           class="block text-xl text-semibold text-gray-800 hover:underline hover:text-blue-500 transition duration-200">
  1126.                            JPG to PNG Converter
  1127.                        </a>
  1128.                    </h3>
  1129.                
  1130.                    <h3>
  1131.                        <a href="svg-to-png"
  1132.                           class="block text-xl text-semibold text-gray-800 hover:underline hover:text-blue-500 transition duration-200">
  1133.                            SVG to PNG Converter
  1134.                        </a>
  1135.                    </h3>
  1136.                
  1137.                    <h3>
  1138.                        <a href="tiff-to-png"
  1139.                           class="block text-xl text-semibold text-gray-800 hover:underline hover:text-blue-500 transition duration-200">
  1140.                            TIFF to PNG Converter
  1141.                        </a>
  1142.                    </h3>
  1143.                
  1144.                    <h3>
  1145.                        <a href="tif-to-png"
  1146.                           class="block text-xl text-semibold text-gray-800 hover:underline hover:text-blue-500 transition duration-200">
  1147.                            TIF to PNG Converter
  1148.                        </a>
  1149.                    </h3>
  1150.                
  1151.                    <h3>
  1152.                        <a href="webp-to-png"
  1153.                           class="block text-xl text-semibold text-gray-800 hover:underline hover:text-blue-500 transition duration-200">
  1154.                            WEBP to PNG Converter
  1155.                        </a>
  1156.                    </h3>
  1157.                
  1158.            </div>
  1159.        </div>
  1160.    </div>
  1161. </div>
  1162.  
  1163. <!-- Section for converting a specific file type to other formats -->
  1164. <div class="max-w-4xl mx-auto py-6 space-y-6">
  1165.    <div class="conversion-item rounded-lg overflow-hidden shadow">
  1166.        <button class="w-full text-left p-6 flex justify-between items-center bg-gray-50 hover:bg-gray-100 transition duration-200 focus:outline-none"
  1167.                onclick="toggleSection(event)">
  1168.            <h2 class="text-2xl font-semibold text-blue-600">
  1169.                Convert your AVIF files to other formats
  1170.            </h2>
  1171.            <svg class="w-5 h-5 text-gray-500 transform transition-transform duration-300" fill="none"
  1172.                 stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
  1173.                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
  1174.            </svg>
  1175.        </button>
  1176.        <div class="conversion-list max-h-0 overflow-hidden transition-all duration-500 ease-in-out">
  1177.            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 p-6">
  1178.                
  1179.                    <h3>
  1180.                        <a href="avif-to-bmp"
  1181.                           class="block text-xl text-semibold text-gray-800 hover:underline hover:text-blue-500 transition duration-200">
  1182.                            AVIF to BMP Converter
  1183.                        </a>
  1184.                    </h3>
  1185.                
  1186.                    <h3>
  1187.                        <a href="avif-to-heic"
  1188.                           class="block text-xl text-semibold text-gray-800 hover:underline hover:text-blue-500 transition duration-200">
  1189.                            AVIF to HEIC Converter
  1190.                        </a>
  1191.                    </h3>
  1192.                
  1193.                    <h3>
  1194.                        <a href="avif-to-heif"
  1195.                           class="block text-xl text-semibold text-gray-800 hover:underline hover:text-blue-500 transition duration-200">
  1196.                            AVIF to HEIF Converter
  1197.                        </a>
  1198.                    </h3>
  1199.                
  1200.                    <h3>
  1201.                        <a href="avif-to-jfif"
  1202.                           class="block text-xl text-semibold text-gray-800 hover:underline hover:text-blue-500 transition duration-200">
  1203.                            AVIF to JFIF Converter
  1204.                        </a>
  1205.                    </h3>
  1206.                
  1207.                    <h3>
  1208.                        <a href="avif-to-jpeg"
  1209.                           class="block text-xl text-semibold text-gray-800 hover:underline hover:text-blue-500 transition duration-200">
  1210.                            AVIF to JPEG Converter
  1211.                        </a>
  1212.                    </h3>
  1213.                
  1214.                    <h3>
  1215.                        <a href="avif-to-jpg"
  1216.                           class="block text-xl text-semibold text-gray-800 hover:underline hover:text-blue-500 transition duration-200">
  1217.                            AVIF to JPG Converter
  1218.                        </a>
  1219.                    </h3>
  1220.                
  1221.                    <h3>
  1222.                        <a href="avif-to-pdf"
  1223.                           class="block text-xl text-semibold text-gray-800 hover:underline hover:text-blue-500 transition duration-200">
  1224.                            AVIF to PDF Converter
  1225.                        </a>
  1226.                    </h3>
  1227.                
  1228.                    <h3>
  1229.                        <a href="avif-to-png"
  1230.                           class="block text-xl text-semibold text-gray-800 hover:underline hover:text-blue-500 transition duration-200">
  1231.                            AVIF to PNG Converter
  1232.                        </a>
  1233.                    </h3>
  1234.                
  1235.                    <h3>
  1236.                        <a href="avif-to-svg"
  1237.                           class="block text-xl text-semibold text-gray-800 hover:underline hover:text-blue-500 transition duration-200">
  1238.                            AVIF to SVG Converter
  1239.                        </a>
  1240.                    </h3>
  1241.                
  1242.                    <h3>
  1243.                        <a href="avif-to-tif"
  1244.                           class="block text-xl text-semibold text-gray-800 hover:underline hover:text-blue-500 transition duration-200">
  1245.                            AVIF to TIF Converter
  1246.                        </a>
  1247.                    </h3>
  1248.                
  1249.                    <h3>
  1250.                        <a href="avif-to-tiff"
  1251.                           class="block text-xl text-semibold text-gray-800 hover:underline hover:text-blue-500 transition duration-200">
  1252.                            AVIF to TIFF Converter
  1253.                        </a>
  1254.                    </h3>
  1255.                
  1256.                    <h3>
  1257.                        <a href="avif-to-webp"
  1258.                           class="block text-xl text-semibold text-gray-800 hover:underline hover:text-blue-500 transition duration-200">
  1259.                            AVIF to WEBP Converter
  1260.                        </a>
  1261.                    </h3>
  1262.                
  1263.            </div>
  1264.        </div>
  1265.    </div>
  1266. </div>
  1267.  
  1268. <script>
  1269.    document.querySelectorAll('.conversion-list').forEach(list => {
  1270.        list.style.maxHeight = list.scrollHeight + "px";
  1271.    });
  1272.  
  1273.    function toggleSection(event) {
  1274.        const button = event.currentTarget;
  1275.        const list = button.nextElementSibling;
  1276.        const svgIcon = button.querySelector('svg');
  1277.  
  1278.        if (list.style.maxHeight && list.style.maxHeight !== '0px') {
  1279.            list.style.maxHeight = '0px';
  1280.        } else {
  1281.            list.style.maxHeight = list.scrollHeight + "px";
  1282.        }
  1283.  
  1284.        svgIcon.classList.toggle('rotate-180');
  1285.    }
  1286. </script>
  1287.  
  1288.  
  1289.    
  1290.        <div class="max-w-4xl mx-auto px-6 py-12">
  1291.    <h2 class="text-3xl font-bold text-center text-blue-600 mb-8">
  1292.        Frequently Asked Questions
  1293.    </h2>
  1294.    <div class="divide-y divide-gray-200">
  1295.        
  1296.        <div class="faq-item py-4">
  1297.            <button
  1298.                class="w-full text-left flex justify-between items-center focus:outline-none hover:bg-blue-50 rounded-lg px-5 py-3"
  1299.                onclick="toggleFAQ(event)">
  1300.                <h3 class="text-xl font-medium text-gray-800">
  1301.                    Can I convert AVIF to PNG in web browsers?
  1302.                </h3>
  1303.                <svg
  1304.                    class="w-6 h-6 text-blue-600 transform transition-transform duration-300"
  1305.                    fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
  1306.                    <path
  1307.                        stroke-linecap="round"
  1308.                        stroke-linejoin="round"
  1309.                        stroke-width="2"
  1310.                        d="M19 9l-7 7-7-7">
  1311.                    </path>
  1312.                </svg>
  1313.            </button>
  1314.            <div class="faq-answer max-h-0 overflow-hidden transition-all duration-500 ease-in-out px-5 py-0">
  1315.                <p class="text-lg text-gray-800 py-4 leading-relaxed">
  1316.                    Our software allows you to convert AVIF to PNG directly from web browsers without installing additional software.
  1317.                </p>
  1318.            </div>
  1319.        </div>
  1320.        
  1321.        <div class="faq-item py-4">
  1322.            <button
  1323.                class="w-full text-left flex justify-between items-center focus:outline-none hover:bg-blue-50 rounded-lg px-5 py-3"
  1324.                onclick="toggleFAQ(event)">
  1325.                <h3 class="text-xl font-medium text-gray-800">
  1326.                    Can I convert multiple AVIF images to PNG at once?
  1327.                </h3>
  1328.                <svg
  1329.                    class="w-6 h-6 text-blue-600 transform transition-transform duration-300"
  1330.                    fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
  1331.                    <path
  1332.                        stroke-linecap="round"
  1333.                        stroke-linejoin="round"
  1334.                        stroke-width="2"
  1335.                        d="M19 9l-7 7-7-7">
  1336.                    </path>
  1337.                </svg>
  1338.            </button>
  1339.            <div class="faq-answer max-h-0 overflow-hidden transition-all duration-500 ease-in-out px-5 py-0">
  1340.                <p class="text-lg text-gray-800 py-4 leading-relaxed">
  1341.                    Yes, our converter supports batch processing, so you can upload multiple AVIF files and convert them all to PNG in one go.
  1342.                </p>
  1343.            </div>
  1344.        </div>
  1345.        
  1346.        <div class="faq-item py-4">
  1347.            <button
  1348.                class="w-full text-left flex justify-between items-center focus:outline-none hover:bg-blue-50 rounded-lg px-5 py-3"
  1349.                onclick="toggleFAQ(event)">
  1350.                <h3 class="text-xl font-medium text-gray-800">
  1351.                    Is there an easy way to convert AVIF to PNG online?
  1352.                </h3>
  1353.                <svg
  1354.                    class="w-6 h-6 text-blue-600 transform transition-transform duration-300"
  1355.                    fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
  1356.                    <path
  1357.                        stroke-linecap="round"
  1358.                        stroke-linejoin="round"
  1359.                        stroke-width="2"
  1360.                        d="M19 9l-7 7-7-7">
  1361.                    </path>
  1362.                </svg>
  1363.            </button>
  1364.            <div class="faq-answer max-h-0 overflow-hidden transition-all duration-500 ease-in-out px-5 py-0">
  1365.                <p class="text-lg text-gray-800 py-4 leading-relaxed">
  1366.                    Yes, iformat.io lets you convert AVIF to PNG by uploading your files and downloading the converted PNGs.
  1367.                </p>
  1368.            </div>
  1369.        </div>
  1370.        
  1371.        <div class="faq-item py-4">
  1372.            <button
  1373.                class="w-full text-left flex justify-between items-center focus:outline-none hover:bg-blue-50 rounded-lg px-5 py-3"
  1374.                onclick="toggleFAQ(event)">
  1375.                <h3 class="text-xl font-medium text-gray-800">
  1376.                    Do I need to install any software to convert AVIF to PNG?
  1377.                </h3>
  1378.                <svg
  1379.                    class="w-6 h-6 text-blue-600 transform transition-transform duration-300"
  1380.                    fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
  1381.                    <path
  1382.                        stroke-linecap="round"
  1383.                        stroke-linejoin="round"
  1384.                        stroke-width="2"
  1385.                        d="M19 9l-7 7-7-7">
  1386.                    </path>
  1387.                </svg>
  1388.            </button>
  1389.            <div class="faq-answer max-h-0 overflow-hidden transition-all duration-500 ease-in-out px-5 py-0">
  1390.                <p class="text-lg text-gray-800 py-4 leading-relaxed">
  1391.                    No, our conversion tool is entirely online, you don&#x27;t need to download or install any software. Simply upload your file and download the converted PNG.
  1392.                </p>
  1393.            </div>
  1394.        </div>
  1395.        
  1396.        <div class="faq-item py-4">
  1397.            <button
  1398.                class="w-full text-left flex justify-between items-center focus:outline-none hover:bg-blue-50 rounded-lg px-5 py-3"
  1399.                onclick="toggleFAQ(event)">
  1400.                <h3 class="text-xl font-medium text-gray-800">
  1401.                    Why would I want to convert an AVIF image to PNG?
  1402.                </h3>
  1403.                <svg
  1404.                    class="w-6 h-6 text-blue-600 transform transition-transform duration-300"
  1405.                    fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
  1406.                    <path
  1407.                        stroke-linecap="round"
  1408.                        stroke-linejoin="round"
  1409.                        stroke-width="2"
  1410.                        d="M19 9l-7 7-7-7">
  1411.                    </path>
  1412.                </svg>
  1413.            </button>
  1414.            <div class="faq-answer max-h-0 overflow-hidden transition-all duration-500 ease-in-out px-5 py-0">
  1415.                <p class="text-lg text-gray-800 py-4 leading-relaxed">
  1416.                    PNG is widely supported across all devices, platforms, and applications, making it more accessible for sharing, editing, or uploading than AVIF.
  1417.                </p>
  1418.            </div>
  1419.        </div>
  1420.        
  1421.        <div class="faq-item py-4">
  1422.            <button
  1423.                class="w-full text-left flex justify-between items-center focus:outline-none hover:bg-blue-50 rounded-lg px-5 py-3"
  1424.                onclick="toggleFAQ(event)">
  1425.                <h3 class="text-xl font-medium text-gray-800">
  1426.                    How long does it take to convert an AVIF file to PNG?
  1427.                </h3>
  1428.                <svg
  1429.                    class="w-6 h-6 text-blue-600 transform transition-transform duration-300"
  1430.                    fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
  1431.                    <path
  1432.                        stroke-linecap="round"
  1433.                        stroke-linejoin="round"
  1434.                        stroke-width="2"
  1435.                        d="M19 9l-7 7-7-7">
  1436.                    </path>
  1437.                </svg>
  1438.            </button>
  1439.            <div class="faq-answer max-h-0 overflow-hidden transition-all duration-500 ease-in-out px-5 py-0">
  1440.                <p class="text-lg text-gray-800 py-4 leading-relaxed">
  1441.                    The conversion process is typically quick and takes just a few seconds, depending on the file size and internet speed.
  1442.                </p>
  1443.            </div>
  1444.        </div>
  1445.        
  1446.        <div class="faq-item py-4">
  1447.            <button
  1448.                class="w-full text-left flex justify-between items-center focus:outline-none hover:bg-blue-50 rounded-lg px-5 py-3"
  1449.                onclick="toggleFAQ(event)">
  1450.                <h3 class="text-xl font-medium text-gray-800">
  1451.                    What is the best way to convert AVIF to PNG format?
  1452.                </h3>
  1453.                <svg
  1454.                    class="w-6 h-6 text-blue-600 transform transition-transform duration-300"
  1455.                    fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
  1456.                    <path
  1457.                        stroke-linecap="round"
  1458.                        stroke-linejoin="round"
  1459.                        stroke-width="2"
  1460.                        d="M19 9l-7 7-7-7">
  1461.                    </path>
  1462.                </svg>
  1463.            </button>
  1464.            <div class="faq-answer max-h-0 overflow-hidden transition-all duration-500 ease-in-out px-5 py-0">
  1465.                <p class="text-lg text-gray-800 py-4 leading-relaxed">
  1466.                    You can convert AVIF to PNG format using iformat.io that supports batch conversions, making the process quick and efficient.
  1467.                </p>
  1468.            </div>
  1469.        </div>
  1470.        
  1471.    </div>
  1472. </div>
  1473.  
  1474. <script>
  1475.    function toggleFAQ(event) {
  1476.        const button = event.currentTarget;
  1477.        const answer = button.nextElementSibling;
  1478.        const svgIcon = button.querySelector('svg');
  1479.  
  1480.        // Collapse other open answers
  1481.        document.querySelectorAll('.faq-answer').forEach((el) => {
  1482.            if (el !== answer) el.style.maxHeight = '0px';
  1483.        });
  1484.        document.querySelectorAll('.faq-item svg').forEach((icon) => {
  1485.            if (icon !== svgIcon) icon.classList.remove('rotate-180');
  1486.        });
  1487.  
  1488.        // Toggle current answer
  1489.        if (answer.style.maxHeight && answer.style.maxHeight !== '0px') {
  1490.            answer.style.maxHeight = '0px';
  1491.        } else {
  1492.            answer.style.maxHeight = answer.scrollHeight + "px";
  1493.        }
  1494.  
  1495.        // Rotate the arrow icon
  1496.        svgIcon.classList.toggle('rotate-180');
  1497.    }
  1498. </script>
  1499.  
  1500.    
  1501.  
  1502.  
  1503.  
  1504.  
  1505. <!-- Footer -->
  1506. <footer class="bg-white border-t border-gray-200">
  1507.    <div class="container mx-auto px-6 py-12">
  1508.        <!-- Grid Layout -->
  1509.        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
  1510.            <!-- Brand and Tagline -->
  1511.            <div class="col-span-1">
  1512.                <h3 class="text-2xl font-bold text-gray-800">iformat.io</h3>
  1513.                <p class="mt-4 text-gray-600 text-sm leading-relaxed">
  1514.                    Your ultimate solution for converting, compressing, and managing files—fast, secure, and reliable.
  1515.                </p>
  1516.            </div>
  1517.            <!-- Quick Links -->
  1518.            <div>
  1519.                <h4 class="text-lg font-semibold text-gray-800">Quick Links</h4>
  1520.                <ul class="mt-4 space-y-2">
  1521.                    <li><a href="/about-us" class="text-gray-600 hover:text-gray-900">About Us</a></li>
  1522.                    <li><a href="/all-tools" class="text-gray-600 hover:text-gray-900">All Tools</a></li>
  1523.                    <li><a href="/blog" class="text-gray-600 hover:text-gray-900">Blog</a></li>
  1524.                </ul>
  1525.            </div>
  1526.            <!-- Support -->
  1527.            <div>
  1528.                <h4 class="text-lg font-semibold text-gray-800">Support</h4>
  1529.                <ul class="mt-4 space-y-2">
  1530.                    <li><a href="/contact" class="text-gray-600 hover:text-gray-900">Contact Us</a></li>
  1531.                    <li><a href="/privacy-policy" class="text-gray-600 hover:text-gray-900">Privacy Policy</a></li>
  1532.                    <li><a href="/terms-and-conditions" class="text-gray-600 hover:text-gray-900">Terms of Service</a>
  1533.                    </li>
  1534.                </ul>
  1535.            </div>
  1536.            <!-- Social Media -->
  1537.            
  1538.            
  1539.            
  1540.            
  1541.            
  1542.            
  1543.            
  1544.            
  1545.            
  1546.            
  1547.            
  1548.            
  1549.            
  1550.            
  1551.        </div>
  1552.        <!-- Divider and Footer Note -->
  1553.        <div class="border-t border-gray-300 mt-8 pt-6 text-center">
  1554.            <p class="text-sm text-gray-500">
  1555.                &copy; 2023 - 2024 iformat.io. All rights reserved.
  1556.            </p>
  1557.        </div>
  1558.  
  1559.    </div>
  1560. </footer>
  1561.  
  1562. </body>
  1563. </html>

Home · About · News · Docs · Terms

 
Copyright © 2002-9 Sam Ruby, Mark Pilgrim, Joseph Walton, and Phil Ringnalda