Packet-Fence/admin/trash/test.css

.paper-cut-background {
  width: 100%;
  height: 500px; /* Adjust height as needed */
  background: linear-gradient(to right, #006400, #228B22); /* Base gradient background */
  position: relative;
  overflow: hidden;
  border-radius: 10px; /* Optional rounded corners */
}

.paper-cut-background::before
{
  content: '';
  position: absolute;
  width: 200%;
  height: 150%;
  background: radial-gradient(circle, rgba(50,205,50,0.6), rgba(0,100,0,0.6));
  border-radius: 55%;
  z-index: 1;
  opacity: 0.6;
}

.paper-cut-background::before {
  top: -60%;
  left: -10%;
  clip-path: ellipse(50% 70% at 20% 60%);
  background: radial-gradient(circle, rgba(144,238,144,0.7), rgba(0,100,0,0.7));
}

/*----------    js for adding and removing     -----------

// Function to add dynamic dropdown behavior
function addDropdownBehavior(section) {
    const accessDropdown = section.querySelector('[id="access"]');
    const portInputDiv = section.querySelector('#portInputDiv');
    const dynamicDropdownDiv = section.querySelector('#dynamicDropdownDiv');
    const dynamicDropdown = section.querySelector('#dynamicDropdown');

    accessDropdown.addEventListener('change', function () {
        const selectedValue = this.value;

        // Show or hide input fields based on selection
        if (selectedValue === 'Port') {
            portInputDiv.classList.remove('hidden');
            dynamicDropdownDiv.classList.add('hidden');
        } else if (selectedValue !== '') {
            portInputDiv.classList.add('hidden');
            dynamicDropdownDiv.classList.remove('hidden');
            let options = '';
            if (selectedValue === 'Connectiontype') {
                options = `<option value="wifi">WiFi</option><option value="ethernet">Ethernet</option>`;
            } else if (selectedValue === 'Subtype') {
                options = `<option value="fiber">Fiber</option><option value="dsl">DSL</option>`;
            } else if (selectedValue === 'Switch') {
                options = `<option value="switchA">Switch A</option><option value="switchB">Switch B</option>`;
            }
            dynamicDropdown.innerHTML = options;
        } else {
            portInputDiv.classList.add('hidden');
            dynamicDropdownDiv.classList.add('hidden');
        }
    });
}

// Function to add event listeners for plus and minus icons in the dynamic section

// Function to add dynamic dropdown behavior
function addDropdownBehavior(section) {
    const accessDropdown = section.querySelector('[id="access"]');
    const portInputDiv = section.querySelector('#portInputDiv');
    const dynamicDropdownDiv = section.querySelector('#dynamicDropdownDiv');
    const dynamicDropdown = section.querySelector('#dynamicDropdown');

    // Remove previous event listeners by cloning the dropdown element and replacing it
    const newAccessDropdown = accessDropdown.cloneNode(true);
    accessDropdown.replaceWith(newAccessDropdown); // Replace old element to remove old listeners

    // Event listener for the 'Filter' dropdown
    newAccessDropdown.addEventListener('change', function () {
        const selectedValue = this.value;

        // Reset dropdown visibility and values
        portInputDiv.classList.add('hidden');
        dynamicDropdownDiv.classList.add('hidden');
        dynamicDropdown.innerHTML = ''; // Clear previous options

        if (selectedValue === 'Port') {
            portInputDiv.classList.remove('hidden'); // Show port input
        } else if (selectedValue !== '') {
            dynamicDropdownDiv.classList.remove('hidden'); // Show dynamic dropdown

            let options = '';
            if (selectedValue === 'Connectiontype') {
                options = `<option value="wifi">WiFi</option><option value="ethernet">Ethernet</option>`;
            } else if (selectedValue === 'Subtype') {
                options = `<option value="fiber">Fiber</option><option value="dsl">DSL</option>`;
            } else if (selectedValue === 'Switch') {
                options = `<option value="switchA">Switch A</option><option value="switchB">Switch B</option>`;
            }
            dynamicDropdown.innerHTML = options;
        }
    });
}

// Function to add event listeners for plus and minus icons in the dynamic section
function addDynamicSectionListeners(section) {
    const plusIcon = section.querySelector('.plus');
    const minusIcon = section.querySelector('.minus');

    // Remove any existing event listeners before adding new ones
    const newPlusIcon = plusIcon.cloneNode(true);
    const newMinusIcon = minusIcon.cloneNode(true);
    plusIcon.replaceWith(newPlusIcon);
    minusIcon.replaceWith(newMinusIcon);

    // Plus functionality: clone the dynamic section
    newPlusIcon.addEventListener('click', function () {
        const newDynamicClone = section.cloneNode(true); // Clone the dynamic section

        // Reset inputs and dropdowns in the cloned section
        resetInputs(newDynamicClone);

        // Add listeners to the cloned section
        addDynamicSectionListeners(newDynamicClone); 
        section.parentNode.appendChild(newDynamicClone); // Append the clone
    });

    // Minus functionality: remove the dynamic section
    newMinusIcon.addEventListener('click', function () {
        if (section.parentNode.childElementCount > 1) { // Ensure at least one section remains
            section.remove();
        }
    });

    addDropdownBehavior(section); // Initialize dropdown behavior for this section
}

// Function to reset inputs and dropdowns
function resetInputs(section) {
    const inputs = section.querySelectorAll('input, select');
    inputs.forEach(input => {
        if (input.type !== 'checkbox') {
            input.value = ''; // Clear input fields
        } else {
            input.checked = false; // Uncheck checkboxes
        }
    });
    section.querySelector('#access').selectedIndex = 0; // Reset dropdown to default
}

// Function to add event listeners for the entire form
function addFormEventListeners(form) {
    const plusIcon = form.querySelector('.add_sec .plus');
    const minusIcon = form.querySelector('.add_sec .minus');

    // Remove any existing event listeners before adding new ones
    const newPlusIcon = plusIcon.cloneNode(true);
    const newMinusIcon = minusIcon.cloneNode(true);
    plusIcon.replaceWith(newPlusIcon);
    minusIcon.replaceWith(newMinusIcon);

    // Plus functionality: clone the entire form
    newPlusIcon.addEventListener('click', function () {
        const newFormClone = form.cloneNode(true); // Clone the entire form
        resetInputs(newFormClone); // Reset inputs in the cloned form

        // Add event listeners to the new cloned form
        addFormEventListeners(newFormClone);

        // Add dynamic section listeners for the cloned form
        const dynamicSections = newFormClone.querySelectorAll('.dynamic');
        dynamicSections.forEach(section => {
            addDynamicSectionListeners(section);
        });

        form.parentNode.appendChild(newFormClone); // Append the new cloned form
    });

    // Minus functionality: remove the cloned form
    newMinusIcon.addEventListener('click', function () {
        const allForms = document.querySelectorAll('.userdetails form');
        if (allForms.length > 1) { // Ensure at least one form remains
            form.remove();
        }
    });

    // Initialize dropdown behavior for the original form
    addDropdownBehavior(form);
    
    // Add dynamic section listeners for the original form
    const dynamicSections = form.querySelectorAll('.dynamic');
    dynamicSections.forEach(section => {
        addDynamicSectionListeners(section);
    });
}

// Initialize event listeners for the original form
const originalForm = document.querySelector('.userdetails form');
addFormEventListeners(originalForm);




*-------------------------------/