<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Thugil Creation - Premium Silk Saree Designs for Every Occasion</title>
  <!-- Bootstrap CSS (via CDN) -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Montserrat+Alternates&family=Montserrat:ital,wght@0,100..900;1,100..900&family=PT+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Righteous&display=swap" rel="stylesheet">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Atomic+Age&family=Silkscreen:wght@400;700&display=swap" rel="stylesheet">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <meta name="theme-color" content="#561C24">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Andika:ital,wght@0,400;0,700;1,400;1,700&family=Atomic+Age&family=Encode+Sans+SC:wght@100..900&family=Outfit:wght@100..900&family=Silkscreen:wght@400;700&display=swap" rel="stylesheet">
  <meta name="description" content="Thugil Creation offers a stunning collection of premium silk sarees. From luxurious wedding sarees to festive designs, explore handcrafted silk sarees that combine tradition with modern elegance.">
  <meta name="keywords" content="silk sarees, wedding sarees, festival sarees, bridal sarees, luxury silk sarees, handcrafted sarees, Indian sarees, designer sarees, Thugil Creation, sarees online, traditional silk sarees, premium sarees">
  <meta property="og:title" content="Thugil Creation - Premium Silk Sarees">
  <meta property="og:description" content="Explore Thugil Creation's exquisite collection of premium silk sarees. Perfect for weddings, festivals, and special occasions. Handcrafted to bring elegance to every moment.">
  <meta property="og:image" content="https://thugil-creation-video.b-cdn.net/logo.png"> <!-- Add the URL of an image representing the brand or product -->
  <meta property="og:url" content="https://www.thugilcreation.com">
  <meta property="og:type" content="website">
   <!-- JSON-LD structured data for Organization -->
   <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "Organization",
      "name": "Thugil Creation",
      "url": "https://www.thugilcreation.com",
      "logo": "https://thugil-creation-video.b-cdn.net/logo.png",  <!-- Replace with your actual logo URL -->
      "contactPoint": {
        "@type": "ContactPoint",
        "telephone": "+91 8838008499",  <!-- Replace with your actual contact number -->
        "contactType": "Customer Service"
      },
      "sameAs": [
        "https://www.facebook.com/thugilcreation29", 
        "https://www.instagram.com/thugil_creation29/?next=%2F"
      ]
    }
    </script>
  <link rel="stylesheet" href="style.css">
   <!-- Favicon -->
   <link rel="icon" href="icons/logo.png" type="image/x-icon">
   <style>
    /* Form Container */
.form-container {
    max-width: 1200px !important;
    margin: auto !important;
    padding: 40px !important;
    background-color: #E8D8C4 !important;
    border-radius: 8px !important;
}

h2 {
    margin-bottom: 30px !important;
    font-weight: bold !important;
}

/* Input Fields and Labels */
.form-label {
    font-size: 1rem !important;
    font-weight: bold !important;
    margin-bottom: 8px !important;
    color: #495057 !important;
}

.form-control {
    height: 40px !important;
    border-radius: 8px !important;
    font-size: 1rem !important;
    padding: 10px !important;
    border: 1px solid #ced4da !important;
}

.form-control:focus {
    border-color: #561C24 !important;
    box-shadow: #ff0c2c !important;
}

.description {
    font-size: 14px !important;
    color: #561C24 !important;
    text-align: center !important;
    margin-top: 10px !important;
}

.btn {
    background-color: #561C24 !important;
    color: #E8D8C4 !important;
}

.btn:hover {
    background-color: #000000 !important;
    transform: translateY(-2px) !important;
    color: wheat !important;
}

.btn:focus {
    outline: none !important;
}

/* Responsive Form Styling */
@media (max-width: 767px) {
    .form-label {
        display: block !important;
        text-align: left !important;
    }

    .form-control {
        display: block !important;
        width: 100% !important;
    }

    /* Form Container */
    .form-container {
        max-width: 1000px !important;
        margin: auto !important;
        padding: 20px !important;
        background-color: #E8D8C4 !important;
        border-radius: 8px !important;
    }
}

.custom-padding {
    padding: 50px !important;
}

/* For mobile view (typically 600px and below) */
@media (max-width: 600px) {
    .custom-padding {
        padding: 10px !important;
    }
}

/* For tablet view (between 600px and 1024px) */
@media (min-width: 601px) and (max-width: 1024px) {
    .custom-padding {
        padding: 50px !important;
    }
}

/* For desktop view (1025px and above) */
@media (min-width: 1025px) {
    .custom-padding {
        padding: 50px !important;
    }
}

.upload-container {
    width: 100% !important;
    margin: 20px 0 !important;
}

.upload-zone {
    border: 2px dashed #e2e8f0 !important;
    max-height: max-content !important;
    border-radius: 10px !important;
    padding: 2rem !important;
    text-align: center !important;
    background-color: #f8fafc !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

.upload-zone:hover, .upload-zone.drag-over {
    border-color: #3b82f6 !important;
    background-color: #eff6ff !important;
}

.upload-icon {
    width: 48px !important;
    height: 48px !important;
    margin: 0 auto 1rem !important;
    color: #64748b !important;
}

.upload-text {
    margin-bottom: 0.5rem !important;
    color: #1e293b !important;
    font-size: 1rem !important;
    font-weight: 500 !important;
}

.upload-subtext {
    color: #64748b !important;
    font-size: 0.875rem !important;
}

.file-input {
    display: none !important;
}

.preview-container {
    margin-top: 1rem !important;
    display: none !important;
    padding: 1rem !important;
    background-color: white !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
}

.preview-content {
    display: flex !important;
    align-items: center !important;
    gap: 1rem !important;
}

.preview-image {
    width: 60px !important;
    height: 60px !important;
    border-radius: 6px !important;
    object-fit: cover !important;
}

.preview-info {
    flex: 1 !important;
}

.preview-name {
    font-weight: 500 !important;
    color: #1e293b !important;
    margin-bottom: 0.25rem !important;
}

.preview-size {
    color: #64748b !important;
    font-size: 0.875rem !important;
}

.remove-button {
    padding: 0.5rem !important;
    color: #ef4444 !important;
    border: none !important;
    background: none !important;
    cursor: pointer !important;
    border-radius: 6px !important;
    transition: background-color 0.2s !important;
}

.remove-button:hover {
    background-color: #fee2e2 !important;
}

   </style>
 </head>
 <body>
  <div class="upper-nav">
   <div class="text-slider">
    <div class="text-item" id="text1">Where Silk Meets Style</div>
    <div class="text-item" id="text2">Crafting Silk, Creating Beauty</div>
    <div class="text-item" id="text3">Luxury in Every Thread</div>
   </div>
   <!-- Left and right navigation buttons using Font Awesome icons -->
   <button class="nav-button prev" onclick="moveSlide('prev')">
    <i class="fa fa-chevron-left"></i>
   </button>
   <button class="nav-button next" onclick="moveSlide('next')">
    <i class="fa fa-chevron-right"></i>
   </button>
  </div>
  <nav class="navbar navbar-expand-lg bg-body-tertiary sticky-top">
   <div class="container-fluid">
    <!-- Wrapper for Logo and Toggle Button -->
    <div class="navbar-header">
     <!-- Navbar Toggler for mobile responsiveness -->
     <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation" id="navbar-toggler">
      <i class="fa-solid fa-bars" style="color: #E8D8C4;"></i>
     </button>
     <!-- Company Logo and Name on the left -->
     <a class="navbar-brand" href="index.html">
      <img src="icons/logo.png" alt="Thugil Creation Logo" style="width: 40px; height: auto; margin-right: 10px;"> Thugil Creation </a>
    </div>
    <!-- Navbar Links and Dropdowns -->
    <div class="collapse navbar-collapse" id="navbarNavDropdown">
     <ul class="navbar-nav">
      <li class="nav-item">
       <a class="nav-link active" aria-current="page" href="index.html">Home</a>
      </li>
      <li class="nav-item">
       <a class="nav-link" href="#">Membership</a>
      </li>
      <li class="nav-item">
       <a class="nav-link" href="thugil-creation.html">Purchase</a>
      </li>
      <li class="nav-item">
       <a class="nav-link" href="contact.html">Contact</a>
      </li>
     </ul>
    </div>
  
   </div>
  </nav>
  <div class="banner">
   <div class="banner-content">
    <h1>Heritage</h1>
    <p>Explore handloomed sarees that fuse modern style with timeless craftsmanship, offering luxury and sophistication for the heritage-loving woman. Discover the perfect blend of classic beauty and contemporary design in our premium silk collection.</p>
   </div>
  </div>
  <div class="container text-center mt-5 mb-5">
    <h2 class="mb-4">Contact the Designer</h2>
    <div class="form-container">

      <form id="contact-form">

        <!-- Name and WhatsApp Number in One Row -->
        <div class="row mb-3">
            <div class="col-md-6">
                <label for="name" class="form-label">Name:</label>
                <input type="text" class="form-control" id="name" name="name" placeholder="Enter your name" required>
            </div>
            <div class="col-md-6">
                <label for="whatsapp" class="form-label">WhatsApp Number:</label>
                <input type="text" class="form-control" id="whatsapp" name="whatsapp" placeholder="Enter your WhatsApp number" required>
            </div>
        </div>
    
        <!-- EPI and Body EPI in One Row -->
        <div class="row mb-3">
            <div class="col-md-6">
                <label for="epi" class="form-label">Border EPI:</label>
                <input type="text" class="form-control" id="epi" name="epi" placeholder="Enter EPI (Border)" required>
            </div>
            <div class="col-md-6">
                <label for="body-epi" class="form-label">Body EPI:</label>
                <input type="text" class="form-control" id="body-epi" name="bodyEpi" placeholder="Enter EPI (Body)" required>
            </div>
        </div>
    
        <!-- Jacquard and PPI in One Row -->
        <div class="row mb-3">
            <div class="col-md-6">
                <label for="jacquard" class="form-label">Jacquard:</label>
                <select class="form-control" id="jacquard" name="jacquard" required>
                    <option value="handloom">Handloom</option>
                    <option value="powerloom">Powerloom</option>
                    <option value="rapier">Rapier</option>
                </select>
            </div>
            <div class="col-md-6">
                <label for="ppi" class="form-label">PPI:</label>
                <input type="text" class="form-control" id="ppi" name="ppi" placeholder="Enter PPI" required>
            </div>
        </div>
    
        <!-- Email in One Row -->
        <div class="row mb-3">
            <div class="col-md-6">
                <label for="email" class="form-label">Email:</label>
                <input type="email" class="form-control" id="email" name="email" placeholder="Enter your email" required>
            </div>
       
    
        <!-- Image File Upload in One Row -->
    
            <div class="col-md-6">
                <label for="image-type" class="form-label">Image Type:</label>
                <select class="form-control" id="image-type" name="imageType" required>
                    <option value="jpg">JPG</option>
                    <option value="png">PNG</option>
                    <option value="jpeg">JPEG</option>
                </select>
            </div>
            <div class="upload-container">
              <div class="upload-zone" id="uploadZone">
                  <svg class="upload-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" />
                  </svg>
                  <div class="upload-text">Drop your image here or click to browse</div>
                  <div class="upload-subtext">Supports: JPG, PNG, JPEG</div>
              </div>
              <input type="file" class="file-input" id="imageUpload" accept=".jpg,.png,.jpeg" required>
              <div class="preview-container" id="previewContainer">
                  <div class="preview-content">
                      <img class="preview-image" id="previewImage" src="" alt="Preview">
                      <div class="preview-info">
                          <div class="preview-name" id="fileName">filename.jpg</div>
                          <div class="preview-size" id="fileSize">Size: 0 MB</div>
                      </div>
                      <button class="remove-button" id="removeFile">
                          <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                          </svg>
                      </button>
                  </div>
              </div>
          </div>
        </div>
    
        <!-- Submit Button -->
        <div class="d-grid gap-2">
            <button type="submit" class="btn btn-primary">Submit Request</button>
        </div>
    
    </form>
    
        <p class="description">The designer will contact you within 24 hours after your submission.</p>
    </div>
</div>
  </div>
  <div class="container text-center mt-5 mb-5">
    <div class="tutor mb-5" style="position: relative;">
        <video id="introVideo" width="100%" height="auto" loop muted autoplay>
            <!-- Multiple sources for better browser compatibility -->
            <source src="videos/intro.mp4" type="video/mp4">
            <source src="videos/intro.webm" type="video/webm">
            <source src="videos/intro.ogv" type="video/ogg">
            Your browser does not support the video tag.
        </video>
        
        <!-- Explore Button -->
        <a href="https://thugilcreation.com" target="_blank" 
           style="position: absolute; bottom: 20px; right: 20px; padding: 10px 20px; background-color: #561C24; color: #fff; text-decoration: none; border-radius: 5px;">
           Opening Soon!
        </a>
    </div>
</div> 
  <div class="text" style="position: relative; padding: 20px; background-color: #6D2932; border-radius: 0px">
   <!-- Title at the top left -->
   <h2 style="position: absolute; top: 10px; left: 20px; margin: 0; font-size: 2rem; color: #DAD4B5 !important; font-weight: 600;">Saree Design</h2>
   <!-- Description about the silk saree making process -->
   <p style="text-align: justify; font-size: 1rem; line-height: 1.8; color: #C7B7A3; margin-top: 40px; letter-spacing: 0.5px;"> Silk saree design is a meticulous and intricate process that requires skilled craftsmanship. The design begins with choosing high-quality silk fabric, followed by hand weaving or machine weaving. Artisans carefully create intricate patterns, often using zari threads to add a metallic finish. The sarees are dyed using natural or chemical dyes to achieve vibrant and rich colors. Finally, the saree is hand-embroidered or machine-stitched to enhance the overall design. </p>
   <p style="text-align: justify; font-size: 1rem; line-height: 1.8; color: #C7B7A3; letter-spacing: 0.5px;"> The entire process can take days or even weeks depending on the complexity of the design. Traditional silk sarees are often crafted using age-old techniques passed down through generations. The weaving process involves skilled hands working meticulously to ensure the patterns align perfectly. After the weaving, the saree is checked for any imperfections, ensuring that only the best quality fabric is used. Once complete, the saree is ready to be worn on special occasions, reflecting the rich heritage of Indian craftsmanship. </p>
  </div>
  <div class="payment mt-0 mb-0">
   <div class="payment-marquee">
    <img src="icons/google-pay-icon.png" alt="Google Pay" class="payment-logo">
    <img src="icons/paytm-icon.png" alt="Paytm" class="payment-logo">
    <img src="icons/phonepe-icon.png" alt="PhonePe" class="payment-logo">
    <img src="icons/razorpay-icon.png" alt="Google Pay" class="payment-logo">
   </div>
  </div>
  <footer class="footer">
   <div class="footer-content">
    <div class="footer-column">
     <h3>About Us</h3>
     <p>At Thugil Creations, we specialize in creating exquisite, handwoven silk sarees that blend timeless tradition with modern elegance.</p>
    </div>
    <div class="footer-column">
     <h3>Quick Links</h3>
     <ul>
        <li><a href="index.html" class="nav-link">Home</a></li>
        <li><a href="thugil-creation.html" class="nav-link">Purchases</a></li>
        <li><a href="contact.html" class="nav-link">Contact</a></li>
        <li><a href="privacy-policy.html" class="nav-link">Privacy Policy</a></li> <!-- Added link -->
        <li><a href="thugilcreation-Policy.html" class="nav-link">Terms & Conditions</a></li> <!-- Added link -->
     </ul>
    </div>
    <div class="footer-column mb-2">
      <h3>Contact Information</h3>
      <p>Email: thugilcreation@gmail.com</p>
      <p>Phone: +91 8838008499 <span style="margin-left: 1%;"></span> +91 9994266271 </p>
      <p>Address: Kondalampatty,Salem-TamilNadu</p>
      <div class="social-links">
        <a href="https://www.facebook.com/thugilcreation29" target="_blank">
          <i class="fab fa-facebook-f" style="color: #6D2932;"></i>
        </a>
        <a href="https://www.youtube.com/@THUGILCREATION" target="_blank">
          <i class="fa-brands fa-youtube" style="color: #6D2932;"></i>
        </a>
        <a href="https://www.instagram.com/thugil_creation29/?next=%2F" target="_blank">
          <i class="fab fa-instagram" style="color: #6D2932;"></i>
        </a>
      </div>
      
    </div>
    <div class="footer-column newsletter-column">
     <h3>Newsletter</h3>
     <p>Stay updated with our latest news and offers. Subscribe to our newsletter.</p>
     <form id="newsletter-form" action="#" method="POST">
      <input type="email" id="email" placeholder="Enter your email" required>
      <button type="submit">Subscribe</button>
     </form>
    </div>
   </div>
   <div class="footer-bottom">
    <p>&copy; 2024 Thugil Creation. All Rights Reserved.</p>
   </div>
  </footer>
  <!-- Firebase Script -->
  <script src="https://checkout.razorpay.com/v1/checkout.js"></script>
  <script type="module">
  import {
    initializeApp
} from 'https://www.gstatic.com/firebasejs/9.10.0/firebase-app.js';
import {
    getAuth,
    onAuthStateChanged
} from 'https://www.gstatic.com/firebasejs/9.10.0/firebase-auth.js';
import {
    getDatabase,
    ref,
    push,
    set,
    update,
    get
} from 'https://www.gstatic.com/firebasejs/9.10.0/firebase-database.js';

// Firebase Configuration
const firebaseConfig = {
    apiKey: "AIzaSyBa2JROkkVR6GWboFZJT2G5NMycYa9zRJ8",
    authDomain: "thugilcreations.firebaseapp.com",
    projectId: "thugilcreations",
    storageBucket: "thugilcreations.firebasestorage.app",
    messagingSenderId: "621636941555",
    appId: "1:621636941555:web:9648e3188471af8a2fe986"
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
const database = getDatabase(app);
// Form Submission Handler
const form = document.getElementById("contact-form");
form.addEventListener("submit", function (event) {
    event.preventDefault(); // Prevent page reload on form submission

    // Get form data
    const name = document.getElementById("name").value;
    const whatsapp = document.getElementById("whatsapp").value;
    const epi = document.getElementById("epi").value;
    const ppi = document.getElementById("ppi").value;
    const jacquard = document.getElementById("jacquard").value;
    const email = document.getElementById("email").value;
    
    // Get the selected image file
    const imageUpload = document.getElementById("imageUpload").files[0];
    const imageType = document.getElementById("image-type").value;  // Get selected image type

    // Validate if image is selected
    if (!imageUpload) {
        alert("Please upload an image.");
        return;
    }

    // Convert image to Base64
    const reader = new FileReader();
    reader.onloadend = function () {
        const base64Image = reader.result.split(',')[1]; // Get only the Base64 part

        // Save form data to Firebase
        const formData = {
            name: name,
            whatsapp: whatsapp,
            epi: epi,
            ppi: ppi,
            jacquard: jacquard,  // Include jacquard in the submission
            email: email,
            image: base64Image, // Store image as Base64
            imageType: imageType, // Store image type (MIME type)
            timestamp: new Date().toISOString() // Adding timestamp
        };

        push(ref(database, 'form_submissions'), formData)
            .then(() => {
                alert("Your request has been submitted successfully!");
                form.reset(); // Reset form after submission

                // Send email to the user
                sendEmailToUser(formData.email);

                // Send email to the designer
                sendEmailToDesigner(formData);
            })
            .catch((error) => {
                console.error("Error submitting form: ", error);
                alert("There was an error submitting your form. Please try again.");
            });
    };

    // Read the image as a Base64 string
    reader.readAsDataURL(imageUpload);
});

// Function to send an email to the user using Brevo
function sendEmailToUser(userEmail) {
    const emailData = {
        sender: { email: "ragulvishnukumar@gmail.com" }, // Sender's email
        to: [{ email: userEmail }], // Recipient's email
        subject: "Thank you for your submission!",
        textContent: "Thank you for submitting the form. Our designer will reach out to you soon."
    };

    fetch("https://api.brevo.com/v3/smtp/email", {
        method: "POST",
        headers: {
            "Content-Type": "application/json",
            "api-key": "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" // Replace with your Brevo API key
        },
        body: JSON.stringify(emailData)
    })
    .then((response) => response.json())
    .then((data) => {
        console.log("Email sent to user:", data);
    })
    .catch((error) => {
        console.error("Error sending email to user:", error);
    });
}

// Function to send an email to the designer using Brevo
function sendEmailToDesigner(formData) {
    const emailData = {
        sender: { email: "ragulvishnukumar@gmail.com" }, // Sender's email
        to: [{ email: "ragulvishnukumar@gmail.com" }], // Designer's email
        subject: "New Work Submission",
        textContent: `
            A new form has been submitted with the following details:

            Name: ${formData.name}
            WhatsApp: ${formData.whatsapp}
            EPI: ${formData.epi}
            PPI: ${formData.ppi}
            Jacquard: ${formData.jacquard}
            Email: ${formData.email}
            Image Type: ${formData.imageType}
            Timestamp: ${formData.timestamp}
        `
    };

    fetch("https://api.brevo.com/v3/smtp/email", {
        method: "POST",
        headers: {
            "Content-Type": "application/json",
            "api-key": "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" // Replace with your Brevo API key
        },
        body: JSON.stringify(emailData)
    })
    .then((response) => response.json())
    .then((data) => {
        console.log("Email sent to designer:", data);
    })
    .catch((error) => {
        console.error("Error sending email to designer:", error);
    });
}

// Handle image preview
document.getElementById('imageUpload').addEventListener('change', function (e) {
    const file = e.target.files[0];

    // Check if file is an image
    if (file && file.type.startsWith('image')) {
        const fileName = file.name;
        const fileSize = (file.size / 1024 / 1024).toFixed(2); // Size in MB

        // Update the file name and size
        document.getElementById('fileName').textContent = fileName;
        document.getElementById('fileSize').textContent = `Size: ${fileSize} MB`;

        // Display image preview
        const reader = new FileReader();
        reader.onload = function (e) {
            const imgElement = document.createElement('img');
            imgElement.src = e.target.result;
            document.getElementById('previewImage').src = e.target.result;
        };
        reader.readAsDataURL(file);
    }
});

// Handle remove button for image preview
document.getElementById('removeFile').addEventListener('click', function (e) {
    e.preventDefault();
    // Clear the preview content and reset input field
    document.getElementById('fileName').textContent = 'filename.jpg';
    document.getElementById('fileSize').textContent = 'Size: 0 MB';
    document.getElementById('previewImage').src = '';
    document.getElementById('imageUpload').value = '';
});

// Popup Setup (keep as per your existing format)
const popupContainer = document.createElement('div');
   popupContainer.id = 'popup-newsletter';
   popupContainer.style.cssText = `
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    opacity: 0;
    transition: opacity 0.3s ease;
  `;
   document.body.appendChild(popupContainer);
   // Popup HTML Content (keep as per your existing format)
   popupContainer.innerHTML = `
    
			<style>
      #newsletter-content {
        background-color: #fff;
        max-width: 800px;
        width: 90%;
        max-height: 400px;
        height: 70%;
        display: flex;
        flex-direction: row;
        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        position: relative;
        overflow: hidden;
      }

      @media (max-width: 768px) {
        #newsletter-content {
          flex-direction: column;
          width: 95%;
          max-height: 45vh;
          height: auto;
        }
      }

      #newsletter-image {
        flex: 1;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
      }

      @media (max-width: 768px) {
        #newsletter-image {
          height: 50px !important;
        }
      }

      #newsletter-form-container {
        flex: 1;
        padding: 20px;
        display: flex;
        flex-direction: column;
        justify-content: center;
      }

      #close-popup {
        position: absolute;
        top: 10px;
        right: 10px;
        background: transparent;
        border: none;
        font-size: 24px;
        color: #aaa;
        cursor: pointer;
        transition: color 0.3s ease;
      }

      #close-popup:hover {
        color: #333;
      }
    </style>
      <div id="newsletter-content" class="newsletter-column">
        <img id="newsletter-image" src="https://images.meesho.com/images/products/62188977/cddr5_512.jpg" alt="Newsletter Promo">
          <div id="newsletter-form-container">
            <h2>Subscribe to our Newsletter</h2>
            <p>Get the latest updates and offers from Thugil Creations!</p>
            <form id="popup-newsletter-form">
              <input type="email" id="popup-email" placeholder="Enter your email" required>
                <button type="submit">Subscribe</button>
              </form>
            </div>
            <button id="close-popup">&times;</button>
          </div>
  `;
   // Handle closing the popup
   const closeButton = document.getElementById('close-popup');
   closeButton.addEventListener('click', function() {
    popupContainer.style.opacity = '0';
    setTimeout(() => {
     popupContainer.style.display = 'none';
    }, 300);
   })
   function subscribeNewsletter(email) {
    let userUID = null;
    
    // Check if userUID is in localStorage
    const storedUserUID = localStorage.getItem('userUID');
    
    if (storedUserUID) {
        userUID = storedUserUID;
    } else {
        const user = auth.currentUser;
        if (user) {
            userUID = user.uid;
        } else {
            // Save current page URL
            localStorage.setItem('redirectTo', window.location.href);
            
            // Redirect to signup page
            window.location.href = 'signup.html';
            return;
        }
    }
    
    // Display a loading message or indicator
    const loadingIndicator = document.getElementById('loadingIndicator'); // Assuming you have a div with this ID
    if (loadingIndicator) {
        loadingIndicator.style.display = 'block';  // Show loading indicator
    }

    // Reference to Firebase location
    const newsletterRef = ref(database, 'newsletters');
    push(newsletterRef, {
        email: email,
        userId: userUID,
        subscribedAt: new Date().toISOString()
    }).then(() => {
        // Hide the loading indicator
        if (loadingIndicator) {
            loadingIndicator.style.display = 'none';  // Hide loading indicator
        }
        
        // Close the popup or perform any other necessary actions
        closePopup();
    }).catch((error) => {
        // Hide the loading indicator in case of error
        if (loadingIndicator) {
            loadingIndicator.style.display = 'none';  // Hide loading indicator
        }

        console.error('Newsletter subscription error:', error);
    });
}

   // Function to open the popup
   function showPopup() {
    popupContainer.style.display = 'flex';
    setTimeout(() => {
     popupContainer.style.opacity = '1';
    }, 2000);
   }
   // Close Popup function
   function closePopup() {
    popupContainer.style.opacity = '0';
    setTimeout(() => {
     popupContainer.style.display = 'none';
    }, 300);
   }
   // Setup the popup form submission
   const popupNewsletterForm = document.getElementById('popup-newsletter-form');
   popupNewsletterForm.addEventListener('submit', function(event) {
    event.preventDefault();
    const emailInput = document.getElementById('popup-email');
    const email = emailInput.value.trim();
    if (!email) {
     alert('Please enter a valid email address.');
     return;
    }
    // Save email in Firebase
    subscribeNewsletter(email);
   });
   // Footer form handling
   const footerNewsletterForm = document.getElementById('newsletter-form');
   footerNewsletterForm.addEventListener('submit', function(event) {
    event.preventDefault();
    const emailInput = document.getElementById('email');
    const email = emailInput.value.trim();
    if (!email) {
     alert('Please enter a valid email address.');
     return;
    }
    // Save email in Firebase
    subscribeNewsletter(email);
   });
   // Check authentication and show popup if necessary
   onAuthStateChanged(auth, (user) => {
    if (user) {
     // Check if the user is already subscribed to the newsletter in Firebase
     const userUID = user.uid;
     const userRef = ref(database, 'newsletters');
     // Query Firebase to check if the user has already subscribed
     get(userRef).then((snapshot) => {
      let isSubscribed = false;
      snapshot.forEach((childSnapshot) => {
       if (childSnapshot.val().userId === userUID) {
        isSubscribed = true;
       }
      });
      if (!isSubscribed) {
       // If the user is not subscribed, show the popup
       showPopup();
      }
     }).catch((error) => {
      console.error('Error checking user subscription:', error);
     });
    } else {
     console.log('No user authenticated');
     showPopup(); // Show popup if user is not authenticated
    }
   });
 
  </script>
  <script>
   // Function to apply blur to the entire page
   function applyBlur() {
    document.body.classList.add('blurred');
   }
   // Function to remove the blur from the page
   function removeBlur() {
    document.body.classList.remove('blurred');
   }
   // Listen for the PrintScreen key press and apply blur
   document.addEventListener('keydown', function(event) {
    // Block PrintScreen key
    if (event.key === 'PrintScreen') {
     event.preventDefault(); // Prevent the screenshot action
     applyBlur(); // Apply blur effect to the page
     // Optional: Remove the blur after a short period
     setTimeout(removeBlur, 2000); // Removes blur after 2 seconds
    }
   });
   // Disable right-click (context menu)
   document.addEventListener('contextmenu', function(event) {
    event.preventDefault();
   });
   // Disable Ctrl+S (Save) key
   document.addEventListener('keydown', function(event) {
    if (event.ctrlKey && event.key === 's') {
     event.preventDefault(); // Prevent Save
    }
   });
   // Developer Tools Detection (basic check for changes in window size)
   let isDevToolsOpen = false;
   const threshold = 160;
   setInterval(() => {
    const widthThreshold = window.outerWidth - window.innerWidth > threshold;
    const heightThreshold = window.outerHeight - window.innerHeight > threshold;
    if (widthThreshold || heightThreshold) {
     if (!isDevToolsOpen) {
      isDevToolsOpen = true;
      applyBlur(); // Blur the page when dev tools are detected
     }
    } else {
     if (isDevToolsOpen) {
      isDevToolsOpen = false;
      removeBlur(); // Remove the blur effect when dev tools are closed
     }
    }
   }, 1000);
   const uploadZone = document.getElementById('uploadZone');
        const fileInput = document.getElementById('imageUpload');
        const previewContainer = document.getElementById('previewContainer');
        const previewImage = document.getElementById('previewImage');
        const fileName = document.getElementById('fileName');
        const fileSize = document.getElementById('fileSize');
        const removeButton = document.getElementById('removeFile');

        uploadZone.addEventListener('click', () => fileInput.click());

        uploadZone.addEventListener('dragover', (e) => {
            e.preventDefault();
            uploadZone.classList.add('drag-over');
        });

        uploadZone.addEventListener('dragleave', () => {
            uploadZone.classList.remove('drag-over');
        });

        uploadZone.addEventListener('drop', (e) => {
            e.preventDefault();
            uploadZone.classList.remove('drag-over');
            const files = e.dataTransfer.files;
            if (files.length) {
                handleFile(files[0]);
            }
        });

        fileInput.addEventListener('change', (e) => {
            if (e.target.files.length) {
                handleFile(e.target.files[0]);
            }
        });

        removeButton.addEventListener('click', () => {
            fileInput.value = '';
            previewContainer.style.display = 'none';
            uploadZone.style.display = 'block';
        });

        function handleFile(file) {
            if (file.type.startsWith('image/')) {
                const reader = new FileReader();
                reader.onload = (e) => {
                    previewImage.src = e.target.result;
                    fileName.textContent = file.name;
                    fileSize.textContent = `Size: ${formatFileSize(file.size)}`;
                    previewContainer.style.display = 'block';
                    uploadZone.style.display = 'none';
                };
                reader.readAsDataURL(file);
            }
        }

        function formatFileSize(bytes) {
            if (bytes === 0) return '0 Bytes';
            const k = 1024;
            const sizes = ['Bytes', 'KB', 'MB', 'GB'];
            const i = Math.floor(Math.log(bytes) / Math.log(k));
            return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
        }
  </script>
 </body>
</html>