Image Tool About Page

function processImage(originalImg, title = "À propos de notre outil", description = "Bienvenue sur notre utilitaire de traitement d'images. Cet outil gratuit en ligne vous permet de manipuler, analyser et transformer vos images facilement et en toute sécurité directement dans votre navigateur.") {
    // Create the main container
    const container = document.createElement('div');
    container.style.fontFamily = "'Segoe UI', Roboto, Helvetica, Arial, sans-serif";
    container.style.maxWidth = "600px";
    container.style.margin = "20px auto";
    container.style.padding = "25px";
    container.style.backgroundColor = "#ffffff";
    container.style.borderRadius = "10px";
    container.style.boxShadow = "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)";
    container.style.color = "#374151";
    container.style.lineHeight = "1.6";
    container.style.borderTop = "5px solid #3b82f6";

    // Title
    const heading = document.createElement('h1');
    heading.innerText = title;
    heading.style.fontSize = "24px";
    heading.style.fontWeight = "bold";
    heading.style.color = "#1f2937";
    heading.style.marginBottom = "15px";
    heading.style.marginTop = "0";

    // Description
    const pDesc = document.createElement('p');
    pDesc.innerText = description;
    pDesc.style.fontSize = "16px";
    pDesc.style.marginBottom = "25px";

    // Image details section (using the provided originalImg)
    const detailsContainer = document.createElement('div');
    detailsContainer.style.padding = "15px";
    detailsContainer.style.backgroundColor = "#f3f4f6";
    detailsContainer.style.borderRadius = "8px";
    detailsContainer.style.border = "1px solid #e5e7eb";

    const detailsHeading = document.createElement('h2');
    detailsHeading.innerText = "À propos de l'image chargée";
    detailsHeading.style.fontSize = "18px";
    detailsHeading.style.color = "#111827";
    detailsHeading.style.marginTop = "0";
    detailsHeading.style.marginBottom = "10px";

    const imgWidth = originalImg.naturalWidth || originalImg.width;
    const imgHeight = originalImg.naturalHeight || originalImg.height;

    const pDetails = document.createElement('p');
    pDetails.style.margin = "0 0 15px 0";
    pDetails.style.fontSize = "14px";
    pDetails.innerHTML = `
        <strong>Dimensions:</strong> ${imgWidth}px × ${imgHeight}px <br>
        <strong>Format d'affichage:</strong> ${(imgWidth / imgHeight).toFixed(2)}:1
    `;

    // Image preview
    const imgPreview = document.createElement('img');
    imgPreview.src = originalImg.src;
    imgPreview.style.maxWidth = "100%";
    imgPreview.style.maxHeight = "250px";
    imgPreview.style.objectFit = "scale-down";
    imgPreview.style.borderRadius = "6px";
    imgPreview.style.display = "block";
    imgPreview.style.margin = "0 auto";
    imgPreview.style.boxShadow = "0 1px 3px rgba(0,0,0,0.2)";

    // Assemble elements
    detailsContainer.appendChild(detailsHeading);
    detailsContainer.appendChild(pDetails);
    detailsContainer.appendChild(imgPreview);

    container.appendChild(heading);
    container.appendChild(pDesc);
    container.appendChild(detailsContainer);

    // Return the DOM element
    return container;
}