<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ClickPic - Create Clickable Images with Hidden Links</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
:root {
--primary: #4361ee;
--secondary: #3a0ca3;
--accent: #f72585;
--light: #f8f9fa;
--dark: #212529;
--gray: #6c757d;
--success: #4cc9f0;
}
body {
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
color: var(--dark);
line-height: 1.6;
min-height: 100vh;
padding: 20px;
}
.container {
max-width: 1000px;
margin: 0 auto;
background: white;
border-radius: 15px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
overflow: hidden;
}
header {
background: linear-gradient(135deg, var(--primary), var(--secondary));
color: white;
padding: 30px;
text-align: center;
}
.logo {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
margin-bottom: 15px;
}
.logo-icon {
background: white;
width: 50px;
height: 50px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
color: var(--primary);
font-size: 24px;
}
h1 {
font-size: 2.5rem;
margin-bottom: 10px;
}
.tagline {
font-size: 1.2rem;
opacity: 0.9;
max-width: 600px;
margin: 0 auto;
}
.main-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 30px;
padding: 30px;
}
@media (max-width: 768px) {
.main-content {
grid-template-columns: 1fr;
}
}
.upload-section, .preview-section {
background: var(--light);
border-radius: 10px;
padding: 25px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}
h2 {
font-size: 1.8rem;
margin-bottom: 20px;
color: var(--primary);
display: flex;
align-items: center;
gap: 10px;
}
h2 i {
background: linear-gradient(135deg, var(--primary), var(--secondary));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.upload-area {
border: 3px dashed var(--gray);
border-radius: 10px;
padding: 40px 20px;
text-align: center;
margin-bottom: 20px;
transition: all 0.3s ease;
cursor: pointer;
position: relative;
}
.upload-area:hover {
border-color: var(--primary);
box-shadow: 0 0 15px rgba(67, 97, 238, 0.2);
}
.upload-area i {
font-size: 50px;
color: var(--primary);
margin-bottom: 15px;
}
.upload-text h3 {
font-size: 1.5rem;
margin-bottom: 10px;
}
.upload-text p {
color: var(--gray);
}
#file-input {
display: none;
}
.form-group {
margin-bottom: 20px;
}
label {
display: block;
margin-bottom: 8px;
font-weight: 600;
color: var(--dark);
}
input[type="url"] {
width: 100%;
padding: 15px;
border: 2px solid #e2e8f0;
border-radius: 8px;
font-size: 16px;
transition: border-color 0.3s;
}
input[type="url"]:focus {
border-color: var(--primary);
outline: none;
box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.2);
}
.generate-btn {
width: 100%;
padding: 16px;
background: linear-gradient(135deg, var(--primary), var(--secondary));
color: white;
border: none;
border-radius: 8px;
font-size: 18px;
font-weight: 600;
cursor: pointer;
transition: transform 0.3s, box-shadow 0.3s;
margin-top: 10px;
}
.generate-btn:hover {
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(67, 97, 238, 0.3);
}
.preview-container {
width: 100%;
height: 300px;
border: 2px solid #e2e8f0;
border-radius: 10px;
overflow: hidden;
margin-bottom: 20px;
display: flex;
align-items: center;
justify-content: center;
background: #f8fafc;
}
.preview-container img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
.preview-placeholder {
color: var(--gray);
text-align: center;
padding: 20px;
}
.preview-placeholder i {
font-size: 50px;
margin-bottom: 15px;
color: #cbd5e0;
}
.download-section {
text-align: center;
padding: 20px;
background: var(--light);
border-radius: 10px;
margin-top: 20px;
}
.download-btn {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 15px 30px;
background: linear-gradient(135deg, var(--success), #3a86ff);
color: white;
text-decoration: none;
border-radius: 8px;
font-weight: 600;
transition: transform 0.3s, box-shadow 0.3s;
}
.download-btn:hover {
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(76, 201, 240, 0.3);
}
.instructions {
background: white;
padding: 30px;
border-top: 1px solid #e2e8f0;
}
.instructions h2 {
text-align: center;
margin-bottom: 30px;
}
.steps {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 25px;
}
.step {
text-align: center;
padding: 20px;
border-radius: 10px;
background: var(--light);
transition: transform 0.3s;
}
.step:hover {
transform: translateY(-5px);
}
.step i {
font-size: 40px;
color: var(--primary);
margin-bottom: 15px;
}
.step h3 {
font-size: 1.3rem;
margin-bottom: 10px;
color: var(--dark);
}
.step p {
color: var(--gray);
}
footer {
text-align: center;
padding: 20px;
color: var(--gray);
margin-top: 30px;
}
.hidden {
display: none;
}
#result {
margin-top: 20px;
padding: 15px;
border-radius: 8px;
background: #f0f9ff;
border-left: 4px solid var(--success);
}
</style>
</head>
<body>
<div class="container">
<header>
<div class="logo">
<div class="logo-icon">
<i class="fas fa-camera"></i>
</div>
<h1>ClickPic</h1>
</div>
<p class="tagline">Transform your images into interactive gateways with hidden links</p>
</header>
<div class="main-content">
<div class="upload-section">
<h2><i class="fas fa-upload"></i> Upload & Customize</h2>
<div class="upload-area" id="upload-area">
<i class="fas fa-cloud-upload-alt"></i>
<div class="upload-text">
<h3>Drag & Drop</h3>
<p>Your image here or click to browse</p>
</div>
<input type="file" id="file-input" accept="image/*">
</div>
<div class="form-group">
<label for="link-input"><i class="fas fa-link"></i> Enter your link:</label>
<input type="url" id="link-input" placeholder="https://example.com" required>
</div>
<button class="generate-btn" id="generate-btn">
<i class="fas fa-magic"></i> Generate Clickable Image
</button>
<div id="result" class="hidden">
<p><i class="fas fa-check-circle"></i> Your image is ready! Preview it on the right.</p>
</div>
</div>
<div class="preview-section">
<h2><i class="fas fa-eye"></i> Preview</h2>
<div class="preview-container" id="preview-container">
<div class="preview-placeholder">
<i class="fas fa-image"></i>
<p>Your image will appear here</p>
</div>
</div>
<div class="download-section hidden" id="download-section">
<p>Your image with hidden link is ready!</p>
<a href="#" class="download-btn" id="download-btn">
<i class="fas fa-download"></i> Download Image
</a>
</div>
</div>
</div>
<div class="instructions">
<h2><i class="fas fa-info-circle"></i> How It Works</h2>
<div class="steps">
<div class="step">
<i class="fas fa-upload"></i>
<h3>Upload Your Image</h3>
<p>Select any image from your device</p>
</div>
<div class="step">
<i class="fas fa-link"></i>
<h3>Add Your Link</h3>
<p>Paste any URL - website, YouTube, social media</p>
</div>
<div class="step">
<i class="fas fa-magic"></i>
<h3>Generate</h3>
<p>Create your clickable image</p>
</div>
<div class="step">
<i class="fas fa-share-alt"></i>
<h3>Share</h3>
<p>Use your image anywhere</p>
</div>
</div>
</div>
<footer>
<p>© 2023 ClickPic - Create interactive images with hidden links</p>
</footer>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const uploadArea = document.getElementById('upload-area');
const fileInput = document.getElementById('file-input');
const linkInput = document.getElementById('link-input');
const generateBtn = document.getElementById('generate-btn');
const previewContainer = document.getElementById('preview-container');
const downloadSection = document.getElementById('download-section');
const downloadBtn = document.getElementById('download-btn');
const resultDiv = document.getElementById('result');
let uploadedImage = null;
// Upload area functionality
uploadArea.addEventListener('click', () => {
fileInput.click();
});
uploadArea.addEventListener('dragover', (e) => {
e.preventDefault();
uploadArea.style.borderColor = '#4361ee';
uploadArea.style.backgroundColor = 'rgba(67, 97, 238, 0.05)';
});
uploadArea.addEventListener('dragleave', () => {
uploadArea.style.borderColor = '#6c757d';
uploadArea.style.backgroundColor = 'transparent';
});
uploadArea.addEventListener('drop', (e) => {
e.preventDefault();
uploadArea.style.borderColor = '#6c757d';
uploadArea.style.backgroundColor = 'transparent';
if (e.dataTransfer.files.length > 0) {
fileInput.files = e.dataTransfer.files;
handleImageUpload(e.dataTransfer.files[0]);
}
});
fileInput.addEventListener('change', () => {
if (fileInput.files.length > 0) {
handleImageUpload(fileInput.files[0]);
}
});
// Handle image upload
function handleImageUpload(file) {
if (!file.type.match('image.*')) {
alert('Please upload an image file');
return;
}
const reader = new FileReader();
reader.onload = function(e) {
uploadedImage = e.target.result;
previewContainer.innerHTML = `<img src="${uploadedImage}" alt="Uploaded Image">`;
};
reader.readAsDataURL(file);
}
// Generate clickable image
generateBtn.addEventListener('click', () => {
if (!uploadedImage) {
alert('Please upload an image first');
return;
}
if (!linkInput.value) {
alert('Please enter a link');
return;
}
// Create the HTML page with the clickable image
const htmlContent = `
<!DOCTYPE html>
<html>
<head>
<title>Clickable Image</title>
<style>
body, html {
margin: 0;
padding: 0;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background: #f0f2f5;
}
.image-container {
max-width: 100%;
max-height: 100%;
}
.image-container img {
max-width: 100%;
max-height: 100vh;
display: block;
}
</style>
</head>
<body>
<div class="image-container">
<a href="${linkInput.value}" target="_blank">
<img src="${uploadedImage}" alt="Clickable Image">
</a>
</div>
</body>
</html>
`;
// Create a Blob with the HTML content
const blob = new Blob([htmlContent], { type: 'text/html' });
const url = URL.createObjectURL(blob);
// Update download link
downloadBtn.href = url;
downloadBtn.download = 'clickable-image.html';
// Show download section and result
downloadSection.classList.remove('hidden');
resultDiv.classList.remove('hidden');
// Update preview to show it's clickable
previewContainer.innerHTML = `
<a href="${url}" target="_blank" style="display: block; width: 100%; height: 100%;">
<img src="${uploadedImage}" alt="Clickable Image" style="max-width: 100%; max-height: 100%;">
</a>
<p style="position: absolute; bottom: 10px; background: rgba(0,0,0,0.7); color: white; padding: 5px 10px; border-radius: 5px;">
Click to test the image (opens in new tab)
</p>
`;
});
});
</script>
</body>
</html>
0 टिप्पणियाँ