<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Photo Resizer Tool</title>
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
body {
background-color: #f5f5f5;
color: #333;
line-height: 1.6;
padding: 20px;
max-width: 800px;
margin: 0 auto;
}
header {
text-align: center;
margin-bottom: 20px;
}
h1 {
color: #2c3e50;
margin-bottom: 10px;
}
.container {
background-color: white;
border-radius: 8px;
padding: 20px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.upload-area {
border: 2px dashed #3498db;
border-radius: 5px;
padding: 30px;
text-align: center;
margin-bottom: 20px;
cursor: pointer;
transition: all 0.3s;
}
.upload-area:hover {
background-color: #f0f8ff;
}
#fileInput {
display: none;
}
.controls {
margin: 20px 0;
}
.control-group {
margin-bottom: 15px;
}
label {
display: block;
margin-bottom: 5px;
font-weight: bold;
}
input[type="range"] {
width: 100%;
}
.dimension-inputs {
display: flex;
gap: 10px;
margin-top: 10px;
}
.dimension-input {
flex: 1;
}
input[type="number"] {
width: 100%;
padding: 8px;
border: 1px solid #ddd;
border-radius: 4px;
}
button {
background-color: #3498db;
color: white;
border: none;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
transition: background-color 0.3s;
width: 100%;
margin-top: 10px;
}
button:hover {
background-color: #2980b9;
}
.result {
margin-top: 20px;
text-align: center;
}
#preview {
max-width: 100%;
height: auto;
margin-top: 15px;
display: none;
}
.download-btn {
background-color: #2ecc71;
margin-top: 15px;
display: none;
}
.download-btn:hover {
background-color: #27ae60;
}
.ad-container {
margin: 20px 0;
padding: 10px;
background-color: #eee;
border-radius: 5px;
text-align: center;
min-height: 100px;
display: flex;
align-items: center;
justify-content: center;
}
.ad-label {
font-size: 12px;
color: #777;
text-align: center;
margin-bottom: 5px;
}
footer {
text-align: center;
margin-top: 30px;
color: #7f8c8d;
font-size: 14px;
}
@media (max-width: 600px) {
body {
padding: 10px;
}
.container {
padding: 15px;
}
.upload-area {
padding: 20px;
}
}
</style>
</head>
<body>
<header>
<h1>Photo Resizer Tool</h1>
<p>Upload your photo and resize it easily</p>
</header>
<div class="container">
<!-- AdMob Banner Ad Placeholder -->
<div class="ad-label">Advertisement</div>
<div class="ad-container" id="ad-banner-top">
<!-- AdMob code will go here -->
Ad will be displayed here
</div>
<div class="upload-area" id="uploadArea">
<p>Click to upload an image</p>
<p><small>Supports JPG, PNG, WEBP</small></p>
<input type="file" id="fileInput" accept="image/*">
</div>
<div class="controls">
<div class="control-group">
<label for="resizeMethod">Resize Method:</label>
<select id="resizeMethod" class="form-control">
<option value="percentage">By Percentage</option>
<option value="pixels">By Pixels</option>
</select>
</div>
<div class="control-group" id="percentageControl">
<label for="resizePercentage">Resize Percentage: <span id="percentageValue">100</span>%</label>
<input type="range" id="resizePercentage" min="1" max="500" value="100">
</div>
<div class="control-group" id="pixelsControl" style="display: none;">
<label>New Dimensions:</label>
<div class="dimension-inputs">
<div class="dimension-input">
<label for="newWidth">Width (px)</label>
<input type="number" id="newWidth" min="1">
</div>
<div class="dimension-input">
<label for="newHeight">Height (px)</label>
<input type="number" id="newHeight" min="1">
</div>
</div>
<label>
<input type="checkbox" id="maintainRatio" checked> Maintain aspect ratio
</label>
</div>
<button id="resizeBtn">Resize Image</button>
</div>
<div class="result">
<div id="originalInfo"></div>
<div id="newInfo"></div>
<img id="preview" alt="Resized preview">
<a id="downloadBtn" class="download-btn" download="resized-image.png">Download Resized Image</a>
</div>
<!-- AdMob Banner Ad Placeholder -->
<div class="ad-label">Advertisement</div>
<div class="ad-container" id="ad-banner-bottom">
<!-- AdMob code will go here -->
Ad will be displayed here
</div>
</div>
<footer>
<p>© 2023 Photo Resizer Tool. All rights reserved.</p>
</footer>
<script>
// DOM elements
const uploadArea = document.getElementById('uploadArea');
const fileInput = document.getElementById('fileInput');
const resizeMethod = document.getElementById('resizeMethod');
const percentageControl = document.getElementById('percentageControl');
const pixelsControl = document.getElementById('pixelsControl');
const resizePercentage = document.getElementById('resizePercentage');
const percentageValue = document.getElementById('percentageValue');
const newWidth = document.getElementById('newWidth');
const newHeight = document.getElementById('newHeight');
const maintainRatio = document.getElementById('maintainRatio');
const resizeBtn = document.getElementById('resizeBtn');
const originalInfo = document.getElementById('originalInfo');
const newInfo = document.getElementById('newInfo');
const preview = document.getElementById('preview');
const downloadBtn = document.getElementById('downloadBtn');
let originalImage = null;
let originalWidth = 0;
let originalHeight = 0;
// Event listeners
uploadArea.addEventListener('click', () => fileInput.click());
fileInput.addEventListener('change', function(e) {
if (e.target.files.length > 0) {
const file = e.target.files[0];
if (file.type.match('image.*')) {
const reader = new FileReader();
reader.onload = function(event) {
originalImage = new Image();
originalImage.onload = function() {
originalWidth = this.width;
originalHeight = this.height;
originalInfo.innerHTML = `
<strong>Original Image:</strong> ${originalWidth} × ${originalHeight} pixels
(${(file.size / 1024).toFixed(2)} KB)
`;
// Set initial pixel values
newWidth.value = originalWidth;
newHeight.value = originalHeight;
// Show preview
preview.src = event.target.result;
preview.style.display = 'block';
};
originalImage.src = event.target.result;
};
reader.readAsDataURL(file);
} else {
alert('Please select an image file.');
}
}
});
resizeMethod.addEventListener('change', function() {
if (this.value === 'percentage') {
percentageControl.style.display = 'block';
pixelsControl.style.display = 'none';
} else {
percentageControl.style.display = 'none';
pixelsControl.style.display = 'block';
}
});
resizePercentage.addEventListener('input', function() {
percentageValue.textContent = this.value;
});
// Maintain aspect ratio when changing width
newWidth.addEventListener('input', function() {
if (maintainRatio.checked && originalWidth > 0) {
const ratio = originalHeight / originalWidth;
newHeight.value = Math.round(this.value * ratio);
}
});
// Maintain aspect ratio when changing height
newHeight.addEventListener('input', function() {
if (maintainRatio.checked && originalHeight > 0) {
const ratio = originalWidth / originalHeight;
newWidth.value = Math.round(this.value * ratio);
}
});
resizeBtn.addEventListener('click', function() {
if (!originalImage) {
alert('Please upload an image first.');
return;
}
let width, height;
if (resizeMethod.value === 'percentage') {
const percentage = parseInt(resizePercentage.value) / 100;
width = Math.round(originalWidth * percentage);
height = Math.round(originalHeight * percentage);
} else {
width = parseInt(newWidth.value);
height = parseInt(newHeight.value);
if (isNaN(width) || isNaN(height) || width <= 0 || height <= 0) {
alert('Please enter valid dimensions.');
return;
}
}
// Resize the image
const canvas = document.createElement('canvas');
canvas.width = width;
canvas.height = height;
const ctx = canvas.getContext('2d');
ctx.drawImage(originalImage, 0, 0, width, height);
// Update preview
preview.src = canvas.toDataURL('image/png');
// Update info
newInfo.innerHTML = `<strong>Resized Image:</strong> ${width} × ${height} pixels`;
// Set up download
const dataUrl = canvas.toDataURL('image/png');
downloadBtn.href = dataUrl;
downloadBtn.style.display = 'inline-block';
downloadBtn.download = `resized-image-${width}x${height}.png`;
});
// AdMob implementation would go here
// This is just a placeholder - you would need to add the actual AdMob code
document.addEventListener('DOMContentLoaded', function() {
// Initialize ads here
// Example (pseudo-code):
// admob.init({
// appId: 'YOUR_APP_ID',
// banners: [
// { id: 'ad-banner-top', size: 'SMART_BANNER' },
// { id: 'ad-banner-bottom', size: 'SMART_BANNER' }
// ]
// });
// admob.loadBanners();
});
</script>
</body>
</html>
टिप्पणियाँ