<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Upload and Display Images</title>
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">

    <style>
       
.nav-button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: rgb(0, 0, 0);
  border: none;
  font-size: 10px;
  cursor: pointer;
  padding: 10px;
  z-index: 10;
}

.prev {
  left: 10px;
}

.next {
  right: 10px;
}
.navbar .nav-link {
  margin-right: 15px; /* Adjust space between icons */
}

.navbar .nav-link i {
  transition: color 0.3s ease;
}

.navbar .nav-link:hover i {
  color: #000000;  /* Change this to your preferred hover color */
}
/* Default text styling for larger screens */
.upper-nav .text-slider .text-item {
  font-size: 20px; /* Default font size for larger screens */
  white-space: nowrap; /* Prevent text from wrapping by default */
  overflow: hidden; /* Hide text that overflows the container */
  text-overflow: ellipsis; /* Optional: Show ellipsis when text overflows */
}

/* Adjust text size and enable wrapping for mobile view */
@media (max-width: 767px) {
  .upper-nav .text-slider .text-item {
    font-size: 14px; /* Reduce the font size on mobile */
    white-space: normal; /* Allow text to wrap on small screens */
    word-wrap: break-word; /* Ensure words break onto the next line */
    overflow-wrap: break-word; /* Ensure long words break if necessary */
  }
}

/* Custom Navbar Styling */
.navbar {
  background-color: #FFF3E2 !important;
}

/* Company Name with Gradient and Animation */
.navbar-brand {
  font-weight: bold;
  font-size: 1.5rem;
  background: linear-gradient(90deg, #000000, #000000);
  -webkit-background-clip: text;
  color: transparent;
  animation: gradient-animation 3s ease infinite;
}

/* Animation for gradient */
@keyframes gradient-animation {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* Navbar link color */
.navbar-nav .nav-link {
  color: #000000; /* Set the color of the links */
}

.navbar-nav .nav-link:hover {
  color: #E74646; /* Set the hover color of the links */
}

/* Positioning the user and cart icons outside the collapsible navbar */
.navbar-icons {
  display: flex;
  align-items: center;
  position: absolute;
  right: 15px; /* Align the icons to the right */
  top: 50%;  /* Vertically center the icons */
  transform: translateY(-50%);
  z-index: 10; /* Ensure they stay above other content */
}

/* Mobile View Adjustments */
@media (max-width: 991px) {
  .navbar .container-fluid {
    position: relative; /* Required for absolute positioning of the icons */
  }

  .navbar-toggler {
    position: absolute;
    left: 10px; /* Position toggle button to the left */
    z-index: 20; /* Ensure the toggle button is above other elements */
  }

  .navbar-nav {
    margin-left: auto;
  }

  /* Ensure the icons don't move when the menu is toggled */
  .navbar-icons {
    position: absolute;
    right: 15px; /* Keep them aligned to the right */
    top: 50%;
    transform: translateY(-50%);
  }
}

/* Custom CSS for Mobile View */
@media (max-width: 991px) {
  /* Make navbar content take up full space */
  .navbar .container-fluid {
    position: relative; /* Required for absolute positioning */
  }

  /* Make sure the logo and toggle button stay in place */
  .navbar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
  }

  /* Position the toggle button absolutely so it doesn't move */
  .navbar-toggler {
    position: absolute;
    left: 5px; /* Adjust to your desired space from the left */
  }

  .navbar-brand {
    display: flex;
    align-items: center;
    margin-left: 50px; /* Adjust the margin to create space between toggle and logo */
    font-size: 16px;
  }

  .navbar-nav {
    margin-left: auto; /* Align navbar items to the right */
  }

  /* Right Side: User and Cart Icons */
  .d-flex {
    display: flex;
    align-items: center;
    position: absolute;
    right: 15px; /* Adjust to position on the right side */
    top: 50%;
    transform: translateY(-50%);
  }
}

.error-message {
            color: red;
            font-size: 14px;
            background-color: #ffcccb;
            padding: 10px;
            border-radius: 5px;
            display: none;
        }
        .spinner-container {
            display: none;
            text-align: center;
        }

.footer {
    height: auto;  /* Remove fixed height for flexibility */
    background-color: #000000;
    color: #fefefe;
    padding: 60px 0;
    display: flex;
    flex-direction: column;
    align-items: center; /* Center the footer content horizontally */
}

.footer-content {
    display: flex;
    justify-content: space-between;
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    flex-grow: 1;
    gap: 30px;  /* Space between columns */
}

.footer-column {
    flex: 1;
    padding: 0 15px;
    text-align: left;  /* Ensure text aligns left */
}

.footer-column h3 {
    color: #f6ffb6;
    margin-bottom: 20px;
    font-size: 1.4rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.footer-column p, .footer-column ul {
    color: #ffffff;
    font-size: 1rem;  /* Make text size consistent */
    line-height: 1.6;
}

.footer-column ul {
    list-style-type: none;
    padding: 0;
}

.footer-column ul li {
    margin-bottom: 10px;
    position: relative;
    padding-left: 20px;  /* Added padding to align bullets better */
}

.footer-column ul li::before {
    content: '•';
    color: #ffffff;
    position: absolute;
    left: 0;
    font-size: 1.5rem;  /* Adjust bullet size */
}

.social-links {
    display: flex;
    gap: 15px;
    margin-top: 15px;
}

.social-links a {
    color: #a9b7c6;
    font-size: 1.5rem;
    transition: color 0.3s ease;
}

.social-links a:hover {
    color: #4ecdc4;
}

.footer-bottom {
    background-color: #060606;
    color: #a9b7c6;
    text-align: center;
    padding: 15px 0;
    width: 100%;
}

@media (max-width: 768px) {
    .footer-content {
        flex-direction: column;
        text-align: center;
    }

    .footer-column {
        margin-bottom: 30px;
        text-align: center;  /* Center text in columns for mobile */
    }

    .footer-column ul {
        display: flex;  /* Use flexbox to center the list */
        flex-direction: column;
        align-items: center;  /* Center the list items */
        padding: 0;
    }

    .footer-column ul li {
        margin-bottom: 10px;
        padding-left: 0;  /* Remove padding for mobile */
        text-align: center; /* Ensure list items are centered */
    }

    .footer-column ul li::before {
        display: none; /* Remove bullet points on mobile */
    }

    .social-links {
        justify-content: center;
    }

    .footer-column p {
        font-size: 0.9rem;  /* Smaller text for mobile */
    }
}
         /* General Styles */
         h2, h3 {
            color: #333;
            font-weight: 600;
        }

        .btn {
            border-radius: 0;
            font-weight: 500;
        }

        .image-container {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            justify-content: center;
            margin-top: 20px;
        }

        .image-container img {
            max-width: 250px;
            max-height: 250px;
            object-fit: cover;
            cursor: pointer;
            border-radius: 8px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }

        .upload-section {
            background-color: #fff;
            padding: 20px;
            margin-bottom: 30px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            border-radius: 8px;
        }

        .upload-section input[type="file"] {
            padding: 10px;
            border: 1px solid #ddd;
            width: 100%;
            border-radius: 5px;
        }

        .upload-section button {
            margin-top: 15px;
            width: 100%;
            padding: 10px;
            border-radius: 5px;
        }

        .image-wrapper {
            display: inline-block;
            margin: 10px;
            text-align: center;
            border-radius: 8px;
            background-color: #f8f8f8;
            padding: 10px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }

        .image-wrapper img {
            width: 200px; /* Adjusted size */
            height: 200px; /* Adjusted size */
            object-fit: cover;
            margin-bottom: 10px;
            border-radius: 8px;
        }

        .delete-btn {
            background-color: red;
            color: white;
            padding: 10px 20px;
            border: none;
            cursor: pointer;
            font-size: 16px;
            width: 75%;
            margin-top: 10px;
            border-radius: 5px;
        }

        .delete-btn:hover {
            background-color: darkred;
        }

        /* Notification Styles */
        .notification {
            position: fixed;
            top: 10px;
            left: 50%;
            transform: translateX(-50%);
            padding: 10px 20px;
            background-color: #4CAF50;
            color: white;
            border-radius: 5px;
            font-size: 1rem;
            display: none;
            z-index: 999;
        }

        .notification.error {
            background-color: #f44336;
        }

        .spinner-border {
    position: fixed;
    background-color: #333;
    top: 50%;
    left: 50%;
    z-index: 9999; /* Ensures it appears above all content */
    display: none;
}

    </style>
</head>
<body>

  <!-- Navbar -->
  <nav class="navbar navbar-expand-lg bg-body-tertiary">
    <div class="container-fluid">
        <div class="navbar-header">
            <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 fa-fade"></i>
            </button>
            <a class="navbar-brand" href="#">
                <img src="icons/logo.png" alt="Thugil Creation Logo" style="width: 40px; height: auto; margin-right: 10px;">
                Thugil Creation
            </a>
        </div>
        <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">New Designs</a></li>
                <!-- New Design Link -->
          
                <li class="nav-item"><a class="nav-link" href="#">Images</a></li
            </ul>
        </div>
    </div>
  </nav>

  <div class="container mb-2">
    <h2 class="text-center">Upload and Display Images</h2>

    <!-- Notification -->
    <div id="notification" class="notification"></div>

    <div class="row">
        <!-- Upload Single Image -->
        <div class="col-md-6 mb-4">
            <div class="upload-section">
                <h4>Upload Single Image</h4>
                <input type="file" id="singleImage" class="form-control">
                <button id="uploadSingle" class="btn btn-primary w-100 mt-3">Upload Single Image</button>
            </div>
        </div>

        <!-- Upload Multiple Images -->
        <div class="col-md-6 mb-4">
            <div class="upload-section">
                <h4>Upload Multiple Images</h4>
                <input type="file" id="multipleImages" class="form-control" multiple>
                <button id="uploadMultiple" class="btn btn-success w-100 mt-3">Upload Multiple Images</button>
            </div>
        </div>
    </div>

    <h3>Uploaded Images</h3>
    <div class="image-container" id="imageContainer"></div>

    <!-- Spinner (Initially Hidden) -->
    <div id="spinner" class="spinner-border text-primary" role="status" style="display: none;">
        <span class="visually-hidden">Loading...</span>
    </div>
  </div>

 

  <!-- Firebase JS -->
  <script type="module">
    import { initializeApp } from 'https://www.gstatic.com/firebasejs/9.23.0/firebase-app.js';
    import { getDatabase, ref, push, get, remove } from 'https://www.gstatic.com/firebasejs/9.23.0/firebase-database.js';

    const firebaseConfig = {
        apiKey: "AIzaSyAC2Ah9i9_FqZ5PC41uI4WPVupduYkgS4g",
  authDomain: "thugilcreation-256ef.firebaseapp.com",
  databaseURL: "https://thugilcreation-256ef-default-rtdb.firebaseio.com",
  projectId: "thugilcreation-256ef",
  storageBucket: "thugilcreation-256ef.firebasestorage.app",
  messagingSenderId: "107585634231",
  appId: "1:107585634231:web:b00a117b1ec6d9a1833232"
    };

    const app = initializeApp(firebaseConfig);
    const db = getDatabase(app);

    function toBase64(file) {
        return new Promise((resolve, reject) => {
            const reader = new FileReader();
            reader.onloadend = () => resolve(reader.result);
            reader.onerror = reject;
            reader.readAsDataURL(file);
        });
    }

    function showNotification(message, isError = false) {
        const notification = document.getElementById('notification');
        notification.textContent = message;
        notification.classList.toggle('error', isError);
        notification.style.display = 'block';

        setTimeout(() => {
            notification.style.display = 'none';
        }, 2000); // Extended display time to 2 seconds
    }

    function showSpinner() {
        document.getElementById('spinner').style.display = 'inline-block'; // Show spinner
    }

    function hideSpinner() {
        document.getElementById('spinner').style.display = 'none'; // Hide spinner
    }

    document.getElementById('uploadSingle').addEventListener('click', async () => {
        const fileInput = document.getElementById('singleImage');
        if (fileInput.files.length > 0) {
            const file = fileInput.files[0];
            const base64Image = await toBase64(file);

            showSpinner(); // Show the spinner while uploading

            push(ref(db, 'images'), { image: base64Image })
                .then(() => {
                    hideSpinner(); // Hide the spinner after upload
                    showNotification('Image uploaded successfully!');
                    addImageToDOM(base64Image); // Add the image to the DOM without clearing others
                })
                .catch((error) => {
                    hideSpinner(); // Hide the spinner in case of error
                    console.error('Error uploading image:', error);
                    showNotification('Error uploading image!', true);
                });
        } else {
            showNotification('Please select an image to upload.', true);
        }
    });

    document.getElementById('uploadMultiple').addEventListener('click', async () => {
        const fileInput = document.getElementById('multipleImages');
        if (fileInput.files.length > 0) {
            showSpinner(); // Show the spinner while uploading

            const promises = [];
            for (let i = 0; i < fileInput.files.length; i++) {
                const file = fileInput.files[i];
                const base64Image = await toBase64(file);

                // Push image and store the promise in an array
                promises.push(push(ref(db, 'images'), { image: base64Image }));
            }

            // Wait for all images to be uploaded
            Promise.all(promises)
                .then(() => {
                    hideSpinner(); // Hide the spinner after all uploads are done
                    showNotification('Multiple images uploaded successfully!');
                    loadImages(); // Reload images from DB
                })
                .catch((error) => {
                    hideSpinner(); // Hide the spinner in case of error
                    console.error('Error uploading images:', error);
                    showNotification('Error uploading images!', true);
                });
        } else {
            showNotification('Please select images to upload.', true);
        }
    });

    function loadImages() {
        const imageContainer = document.getElementById('imageContainer');

        get(ref(db, 'images')).then((snapshot) => {
            if (snapshot.exists()) {
                snapshot.forEach((childSnapshot) => {
                    const imageData = childSnapshot.val().image;
                    const imageId = childSnapshot.key; // Unique key for each image

                    // Check if the image already exists in the DOM
                    if (!document.getElementById(imageId)) {
                        addImageToDOM(imageData, imageId);
                    }
                });
            } else {
                console.log('No images found in the database.');
            }
        }).catch((error) => {
            console.error('Error loading images:', error);
        });
    }

    function addImageToDOM(imageData, imageId) {
        const imageContainer = document.getElementById('imageContainer');

        // Create new image wrapper only if it does not already exist
        const imgWrapper = document.createElement('div');
        imgWrapper.classList.add('image-wrapper');
        imgWrapper.id = imageId; // Set ID to the image's Firebase key for uniqueness

        const img = document.createElement('img');
        img.src = imageData;
        img.alt = 'Uploaded Image';
        img.addEventListener('click', () => {
            navigator.clipboard.writeText(imageData).then(() => {
                showNotification('Image URL copied to clipboard!');
            }).catch((error) => {
                console.error('Failed to copy image URL:', error);
                showNotification('Failed to copy image URL.', true);
            });
        });

        const deleteButton = document.createElement('button');
        deleteButton.textContent = 'Delete';
        deleteButton.classList.add('delete-btn');
        deleteButton.addEventListener('click', () => {
            deleteImage(imageId); // Delete the image when clicked
        });

        imgWrapper.appendChild(img);
        imgWrapper.appendChild(deleteButton);
        imageContainer.appendChild(imgWrapper);
    }

    function deleteImage(imageId) {
        const imageRef = ref(db, 'images/' + imageId);
        remove(imageRef)
            .then(() => {
                const imageWrapper = document.getElementById(imageId);
                if (imageWrapper) {
                    imageWrapper.remove(); // Remove the specific image element from the DOM
                }
                showNotification('Image deleted successfully!');
            })
            .catch((error) => {
                console.error('Error deleting image:', error);
                showNotification('Error deleting image!', true);
            });
    }

    loadImages(); // Load images when the page loads
  </script>

</body>
</html>

