davidjenner/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Logo Converter</title>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
<style>
    body {
        font-family: 'Poppins', sans-serif;
    }

    #drop-area {
        border: 2px dashed #4F46E5;
        padding: 40px;
        transition: background-color 0.3s ease;
    }

    #drop-area.dragover {
        background-color: rgba(79, 70, 229, 0.1);
        animation: celebrate 2s infinite;
    }

    @keyframes celebrate {
        0% { transform: scale(1); background-color: rgba(79, 70, 229, 0.1); }
        25% { transform: scale(1.1); background-color: rgba(79, 70, 229, 0.2); }
        50% { transform: scale(1.2); background-color: rgba(79, 70, 229, 0.3); }
        75% { transform: scale(1.1); background-color: rgba(79, 70, 229, 0.2); }
        100% { transform: scale(1); background-color: rgba(79, 70, 229, 0.1); }
    }
</style>
</head>
<body class="bg-gray-100">
<div class="container mx-auto py-8">
    <h1 class="text-3xl font-bold text-center text-gray-800 mb-4">Logo Converter</h1>
    <p class="text-center text-gray-600 mb-4">Looking for logos? Check out <a href="https://seeklogo.com/" target="_blank" class="underline">SeekLogo</a>!</p>
    <div id="drop-area" class="border border-gray-300 rounded-lg mb-4 p-8 text-center">
        <p class="text-gray-500">Drag and drop images here, or click to select files</p>
    </div>
    <div id="results" class="mt-8"></div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.7.1/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script>
<script>
const dropArea = document.getElementById('drop-area');

dropArea.addEventListener('dragover', function(event) {
    event.preventDefault();
    dropArea.classList.add('dragover');
});

dropArea.addEventListener('dragleave', function(event) {
    dropArea.classList.remove('dragover');
});

dropArea.addEventListener('drop', function(event) {
    event.preventDefault(); // Prevent the default behavior of opening the dropped image in a new tab
    dropArea.classList.remove('dragover');

    const files = event.dataTransfer.files;
    handleFiles(files);
});

dropArea.addEventListener('click', function() {
    document.getElementById('logo-input').click();
});

document.getElementById('logo-input').addEventListener('change', function() {
    const files = this.files;
    handleFiles(files);
});

function handleFiles(files) {
    const resultsContainer = document.getElementById('results');
    resultsContainer.innerHTML = '';

    Array.from(files).forEach((file, index) => {
        const reader = new FileReader();
        reader.onload = function() {
            const image = new Image();
            image.src = reader.result;

            image.onload = function() {
                const canvas512 = document.createElement('canvas');
                canvas512.width = 512;
                canvas512.height = 512;
                const context512 = canvas512.getContext('2d');
                context512.fillStyle = '#ffffff'; // Set background color to white
                context512.fillRect(0, 0, canvas512.width, canvas512.height);
                context512.drawImage(image, 0, 0, 512, 512);

                const icon512 = canvas512.toDataURL('image/png');
                const icon256 = resizeImage(canvas512, 256).toDataURL('image/png');

                const resultElement = document.createElement('div');
                resultElement.classList.add('flex', 'items-center', 'space-x-4', 'mb-4');
                resultElement.innerHTML = `
                    <img src="${icon512}" alt="512x512 Logo" class="w-24 h-24 cursor-pointer" onclick="downloadImage('${icon512}', 'logo_${index + 1}_512x512.png')">
                    <img src="${icon256}" alt="256x256 Logo" class="w-16 h-16 cursor-pointer" onclick="downloadImage('${icon256}', 'logo_${index + 1}_256x256.png')">
                `;
                resultsContainer.appendChild(resultElement);
            };
        };

        reader.readAsDataURL(file);
    });
}

function resizeImage(image, size) {
    const canvas = document.createElement('canvas');
    canvas.width = size;
    canvas.height = size;
    const context = canvas.getContext('2d');
    context.fillStyle = '#ffffff'; // Set background color to white
    context.fillRect(0, 0, canvas.width, canvas.height);
    context.drawImage(image, 0, 0, size, size);
    return canvas;
}

function downloadImage(dataUrl, filename) {
    const link = document.createElement('a');
    link.href = dataUrl;
    link.download = filename;
    link.click();
}
</script>
</body>
</html>

## logo-converter-to-512-and-256-pixels-png.markdown

      
    Raw
  

              logo-converter-to-512-and-256-pixels-png.markdown
            
          
    Logo Converter to 512 and 256 pixels png

A Pen by David Jenner on CodePen.
License.
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Logo Converter</title>
	<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap" rel="stylesheet">
	<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
	<style>
	body {
	font-family: 'Poppins', sans-serif;
	}

	#drop-area {
	border: 2px dashed #4F46E5;
	padding: 40px;
	transition: background-color 0.3s ease;
	}

	#drop-area.dragover {
	background-color: rgba(79, 70, 229, 0.1);
	animation: celebrate 2s infinite;
	}

	@keyframes celebrate {
	0% { transform: scale(1); background-color: rgba(79, 70, 229, 0.1); }
	25% { transform: scale(1.1); background-color: rgba(79, 70, 229, 0.2); }
	50% { transform: scale(1.2); background-color: rgba(79, 70, 229, 0.3); }
	75% { transform: scale(1.1); background-color: rgba(79, 70, 229, 0.2); }
	100% { transform: scale(1); background-color: rgba(79, 70, 229, 0.1); }
	}
	</style>
	</head>
	<body class="bg-gray-100">
	<div class="container mx-auto py-8">
	<h1 class="text-3xl font-bold text-center text-gray-800 mb-4">Logo Converter</h1>
	<p class="text-center text-gray-600 mb-4">Looking for logos? Check out <a href="https://seeklogo.com/" target="_blank" class="underline">SeekLogo</a>!</p>
	<div id="drop-area" class="border border-gray-300 rounded-lg mb-4 p-8 text-center">
	<p class="text-gray-500">Drag and drop images here, or click to select files</p>
	</div>
	<div id="results" class="mt-8"></div>
	</div>

	<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.7.1/jszip.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script>
	<script>
	const dropArea = document.getElementById('drop-area');

	dropArea.addEventListener('dragover', function(event) {
	event.preventDefault();
	dropArea.classList.add('dragover');
	});

	dropArea.addEventListener('dragleave', function(event) {
	dropArea.classList.remove('dragover');
	});

	dropArea.addEventListener('drop', function(event) {
	event.preventDefault(); // Prevent the default behavior of opening the dropped image in a new tab
	dropArea.classList.remove('dragover');

	const files = event.dataTransfer.files;
	handleFiles(files);
	});

	dropArea.addEventListener('click', function() {
	document.getElementById('logo-input').click();
	});

	document.getElementById('logo-input').addEventListener('change', function() {
	const files = this.files;
	handleFiles(files);
	});

	function handleFiles(files) {
	const resultsContainer = document.getElementById('results');
	resultsContainer.innerHTML = '';

	Array.from(files).forEach((file, index) => {
	const reader = new FileReader();
	reader.onload = function() {
	const image = new Image();
	image.src = reader.result;

	image.onload = function() {
	const canvas512 = document.createElement('canvas');
	canvas512.width = 512;
	canvas512.height = 512;
	const context512 = canvas512.getContext('2d');
	context512.fillStyle = '#ffffff'; // Set background color to white
	context512.fillRect(0, 0, canvas512.width, canvas512.height);
	context512.drawImage(image, 0, 0, 512, 512);

	const icon512 = canvas512.toDataURL('image/png');
	const icon256 = resizeImage(canvas512, 256).toDataURL('image/png');

	const resultElement = document.createElement('div');
	resultElement.classList.add('flex', 'items-center', 'space-x-4', 'mb-4');
	resultElement.innerHTML = `
	<img src="${icon512}" alt="512x512 Logo" class="w-24 h-24 cursor-pointer" onclick="downloadImage('${icon512}', 'logo_${index + 1}_512x512.png')">
	<img src="${icon256}" alt="256x256 Logo" class="w-16 h-16 cursor-pointer" onclick="downloadImage('${icon256}', 'logo_${index + 1}_256x256.png')">
	`;
	resultsContainer.appendChild(resultElement);
	};
	};

	reader.readAsDataURL(file);
	});
	}

	function resizeImage(image, size) {
	const canvas = document.createElement('canvas');
	canvas.width = size;
	canvas.height = size;
	const context = canvas.getContext('2d');
	context.fillStyle = '#ffffff'; // Set background color to white
	context.fillRect(0, 0, canvas.width, canvas.height);
	context.drawImage(image, 0, 0, size, size);
	return canvas;
	}

	function downloadImage(dataUrl, filename) {
	const link = document.createElement('a');
	link.href = dataUrl;
	link.download = filename;
	link.click();
	}
	</script>
	</body>
	</html>