<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>EZConvert - Conversion Made EZ</title>
  <link rel="icon" href="assets/tabimg.png" type="image/png">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <nav>
    <div class="nav-content">
      <div class="logo">
        <a href="index.html"><img src="assets/EZConvert Logo.png" alt="EZConvert"></a>
      </div>
      <div class="nav-links">
        <!-- <a href="index.html" class="active">All Formats</a> -->
        <a href="documents.html">Documents</a>
        <a href="images.html">Images</a>
        <a href="audio.html">Audio</a>
        <a href="video.html">Video</a>
      </div>
    </div>
  </nav>

  <main>
    <div class="hero">
      <h1>Convert Any File to Any Format</h1>
      <div class="slogan">
        <span class="slogan-text">Conversion Made EZ</span>
        <span class="slogan-divider">•</span>
        <span class="slogan-text">300+ Formats</span>
        <span class="slogan-divider">•</span>
        <span class="slogan-text">100% Online</span>
      </div>
    </div>

    <div class="converter-box">
      <div class="upload-zone" id="dropZone">
        <input type="file" id="fileInput" class="hidden" multiple>
        <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>
        <h2>Choose Files</h2>
        <p>or drag & drop your files here</p>
        <div class="file-info" id="fileInfo"></div>
      </div>

      <div id="fileList" class="file-list hidden"></div>

      <button id="convertButton" class="convert-button" disabled>
        Convert Files
        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>
      </button>
    </div>

    <div class="features">
      <div class="feature">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"/></svg>
        <h3>300+ Formats</h3>
        <p>Convert between hundreds of different file formats</p>
      </div>
      <div class="feature">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
        <h3>Secure</h3>
        <p>Your files are automatically deleted after 2 hours</p>
      </div>
      <div class="feature">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
        <h3>Fast</h3>
        <p>Convert your files in seconds</p>
      </div>
    </div>

    <h2 class="text-2xl font-bold text-center mt-12 mb-8">Popular Conversions</h2>

    <div class="features">
      <div class="feature">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/></svg>
        <h3>PDF to DOCX</h3>
        <p>Convert PDF files to editable Word documents</p>
      </div>
      <div class="feature">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"/></svg>
        <h3>JPG to PNG</h3>
        <p>Convert JPG images to transparent PNG format</p>
      </div>
      <div class="feature">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 18V5l12-2v13"/><circle cx="6" cy="18" r="3"/><circle cx="18" cy="16" r="3"/></svg>
        <h3>MP3 to WAV</h3>
        <p>Convert MP3 audio to lossless WAV format</p>
      </div>
    </div>
  </main>

  <footer>
    <div class="footer-content">
      <!-- Logo -->
      <div class="footer-logo">
        <a href="index.html">
          <img src="assets/EZConvert Logo.png" alt="EZConvert" />
        </a>
      </div>
  
      <!-- Footer Links -->
      <div class="footer-links">
        <a href="#">Privacy Policy</a>
        <a href="#">Terms of Service</a>
        <a href="#">Contact</a>
        <a href="#">Donate</a>
        <a href="#">About Us</a>
        <a href="#">FAQ</a>
      </div>
  
      <!-- Social Links -->
      <div class="social-links">
        <a href="https://facebook.com/yourpage" target="_blank">
          <i class="fa-brands fa-facebook"></i>
        </a>
        <a href="https://twitter.com/yourpage" target="_blank">
          <i class="fa-brands fa-twitter"></i>
        </a>
        <a href="https://linkedin.com/yourpage" target="_blank">
          <i class="fa-brands fa-linkedin"></i>
        </a>
      </div>
  
      <!-- Quick Links Section -->
      <div class="footer-quick-links">
        <h4>Quick Links</h4>
        <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">Services</a></li>
          <li><a href="#">Pricing</a></li>
          <li><a href="#">Blog</a></li>
          <li><a href="#">Support</a></li>
        </ul>
      </div>
  
      <!-- Certifications/Trust Badges -->
      <div class="footer-certifications">
        <img src="assets/ssl-secure.png" alt="SSL Secure" />
        <img src="assets/verified-badge.png" alt="Verified by XYZ" />
      </div>
  
      <!-- Language/Region Selector -->
      <div class="footer-language-selector">
        <button id="language-icon" class="language-dropdown-toggle" aria-label="Select language">
          <i class="fa-solid fa-globe"></i>
        </button>
        <ul id="language-options" class="language-dropdown">
          <li><a href="#">English</a></li>
          <li><a href="#">Español</a></li>
          <li><a href="#">Français</a></li>
          <li><a href="#">Deutsch</a></li>
          <li><a href="#">中文</a></li>
        </ul>
      </div>
  
      <!-- Contact -->
      <div class="footer-contact">
        <p>Email us at: <a href="mailto:support@example.com">support@example.com</a></p>
      </div>
  
      <!-- Copyright -->
      <p>© <span id="year"></span> EZConvert. All rights reserved.</p>
    </div>
  
    <!-- Back-to-Top Button -->
    <button id="back-to-top" title="Back to Top" aria-label="Scroll to top">
      <i class="fa-solid fa-arrow-up"></i>
    </button>
  </footer>  

  <!-- <script src="languages.js"></script> -->
  <script src="script.js"></script>
</body>
</html>