|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Create Behance Portfolio</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<style> |
|
|
.dropzone { |
|
|
border: 2px dashed #ccc; |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
.dropzone.active { |
|
|
border-color: #6366f1; |
|
|
background-color: rgba(99, 102, 241, 0.1); |
|
|
} |
|
|
.portfolio-item { |
|
|
transition: all 0.3s ease; |
|
|
position: relative; |
|
|
overflow: hidden; |
|
|
} |
|
|
.portfolio-item:hover { |
|
|
transform: translateY(-5px); |
|
|
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); |
|
|
} |
|
|
.portfolio-item .overlay { |
|
|
position: absolute; |
|
|
top: 0; |
|
|
left: 0; |
|
|
right: 0; |
|
|
bottom: 0; |
|
|
background: rgba(0, 0, 0, 0.6); |
|
|
opacity: 0; |
|
|
transition: opacity 0.3s ease; |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
justify-content: center; |
|
|
align-items: center; |
|
|
color: white; |
|
|
} |
|
|
.portfolio-item:hover .overlay { |
|
|
opacity: 1; |
|
|
} |
|
|
.grid-layout { |
|
|
display: grid; |
|
|
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); |
|
|
grid-auto-rows: 250px; |
|
|
grid-gap: 20px; |
|
|
grid-auto-flow: dense; |
|
|
} |
|
|
.grid-layout .wide { |
|
|
grid-column: span 2; |
|
|
} |
|
|
.grid-layout .tall { |
|
|
grid-row: span 2; |
|
|
} |
|
|
.grid-layout .big { |
|
|
grid-column: span 2; |
|
|
grid-row: span 2; |
|
|
} |
|
|
@media (max-width: 768px) { |
|
|
.grid-layout { |
|
|
grid-template-columns: 1fr; |
|
|
} |
|
|
.grid-layout .wide, |
|
|
.grid-layout .tall, |
|
|
.grid-layout .big { |
|
|
grid-column: span 1; |
|
|
grid-row: span 1; |
|
|
} |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-50 min-h-screen"> |
|
|
<div class="container mx-auto px-4 py-8"> |
|
|
<header class="mb-12 text-center"> |
|
|
<h1 class="text-4xl font-bold text-gray-800 mb-2">Create Your Behance Portfolio</h1> |
|
|
<p class="text-gray-600 max-w-2xl mx-auto">Upload your images and we'll automatically generate a beautiful portfolio layout for you.</p> |
|
|
</header> |
|
|
|
|
|
<div class="max-w-4xl mx-auto mb-12"> |
|
|
<div id="dropzone" class="dropzone rounded-xl p-12 text-center cursor-pointer"> |
|
|
<div class="flex flex-col items-center justify-center"> |
|
|
<i class="fas fa-cloud-upload-alt text-5xl text-indigo-500 mb-4"></i> |
|
|
<h3 class="text-xl font-semibold text-gray-700 mb-2">Drag & Drop your images here</h3> |
|
|
<p class="text-gray-500 mb-4">or click to browse your files</p> |
|
|
<input type="file" id="fileInput" class="hidden" accept="image/*" multiple> |
|
|
<button id="uploadBtn" class="bg-indigo-600 hover:bg-indigo-700 text-white font-medium py-2 px-6 rounded-lg transition duration-300"> |
|
|
Select Images |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mb-8 flex justify-between items-center"> |
|
|
<h2 class="text-2xl font-bold text-gray-800">Your Portfolio Preview</h2> |
|
|
<div class="flex space-x-2"> |
|
|
<button id="randomizeBtn" class="bg-gray-200 hover:bg-gray-300 text-gray-800 font-medium py-2 px-4 rounded-lg transition duration-300"> |
|
|
<i class="fas fa-random mr-2"></i>Randomize Layout |
|
|
</button> |
|
|
<button id="downloadBtn" class="bg-indigo-600 hover:bg-indigo-700 text-white font-medium py-2 px-4 rounded-lg transition duration-300"> |
|
|
<i class="fas fa-download mr-2"></i>Download Portfolio |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div id="portfolioContainer" class="grid-layout mb-12"> |
|
|
<div class="text-center py-20 text-gray-400"> |
|
|
<i class="fas fa-images text-5xl mb-4"></i> |
|
|
<p>Your portfolio images will appear here</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div id="portfolioSettings" class="bg-white rounded-xl shadow-md p-6 mb-12 hidden"> |
|
|
<h3 class="text-xl font-semibold text-gray-800 mb-4">Portfolio Settings</h3> |
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6"> |
|
|
<div> |
|
|
<label class="block text-gray-700 mb-2">Project Title</label> |
|
|
<input type="text" id="projectTitle" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-indigo-500 focus:border-indigo-500" placeholder="My Creative Project"> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-gray-700 mb-2">Project Description</label> |
|
|
<textarea id="projectDescription" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-indigo-500 focus:border-indigo-500" rows="2" placeholder="A brief description of your project"></textarea> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-gray-700 mb-2">Layout Style</label> |
|
|
<select id="layoutStyle" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-indigo-500 focus:border-indigo-500"> |
|
|
<option value="grid">Grid</option> |
|
|
<option value="masonry">Masonry</option> |
|
|
<option value="carousel">Carousel</option> |
|
|
</select> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-gray-700 mb-2">Color Theme</label> |
|
|
<select id="colorTheme" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-indigo-500 focus:border-indigo-500"> |
|
|
<option value="light">Light</option> |
|
|
<option value="dark">Dark</option> |
|
|
<option value="minimal">Minimal</option> |
|
|
</select> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-6 flex justify-end"> |
|
|
<button id="saveSettingsBtn" class="bg-indigo-600 hover:bg-indigo-700 text-white font-medium py-2 px-6 rounded-lg transition duration-300"> |
|
|
Save Settings |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
const dropzone = document.getElementById('dropzone'); |
|
|
const fileInput = document.getElementById('fileInput'); |
|
|
const uploadBtn = document.getElementById('uploadBtn'); |
|
|
const portfolioContainer = document.getElementById('portfolioContainer'); |
|
|
const randomizeBtn = document.getElementById('randomizeBtn'); |
|
|
const downloadBtn = document.getElementById('downloadBtn'); |
|
|
const portfolioSettings = document.getElementById('portfolioSettings'); |
|
|
const saveSettingsBtn = document.getElementById('saveSettingsBtn'); |
|
|
|
|
|
let uploadedImages = []; |
|
|
|
|
|
|
|
|
['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => { |
|
|
dropzone.addEventListener(eventName, preventDefaults, false); |
|
|
}); |
|
|
|
|
|
function preventDefaults(e) { |
|
|
e.preventDefault(); |
|
|
e.stopPropagation(); |
|
|
} |
|
|
|
|
|
['dragenter', 'dragover'].forEach(eventName => { |
|
|
dropzone.addEventListener(eventName, highlight, false); |
|
|
}); |
|
|
|
|
|
['dragleave', 'drop'].forEach(eventName => { |
|
|
dropzone.addEventListener(eventName, unhighlight, false); |
|
|
}); |
|
|
|
|
|
function highlight() { |
|
|
dropzone.classList.add('active'); |
|
|
} |
|
|
|
|
|
function unhighlight() { |
|
|
dropzone.classList.remove('active'); |
|
|
} |
|
|
|
|
|
|
|
|
dropzone.addEventListener('drop', handleDrop, false); |
|
|
|
|
|
function handleDrop(e) { |
|
|
const dt = e.dataTransfer; |
|
|
const files = dt.files; |
|
|
handleFiles(files); |
|
|
} |
|
|
|
|
|
|
|
|
uploadBtn.addEventListener('click', () => { |
|
|
fileInput.click(); |
|
|
}); |
|
|
|
|
|
|
|
|
fileInput.addEventListener('change', function() { |
|
|
handleFiles(this.files); |
|
|
}); |
|
|
|
|
|
|
|
|
function handleFiles(files) { |
|
|
[...files].forEach(file => { |
|
|
if (!file.type.match('image.*')) return; |
|
|
|
|
|
const reader = new FileReader(); |
|
|
reader.onload = function(e) { |
|
|
const imageData = { |
|
|
url: e.target.result, |
|
|
name: file.name, |
|
|
size: file.size, |
|
|
type: file.type |
|
|
}; |
|
|
uploadedImages.push(imageData); |
|
|
updatePortfolio(); |
|
|
} |
|
|
reader.readAsDataURL(file); |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
function updatePortfolio() { |
|
|
if (uploadedImages.length === 0) { |
|
|
portfolioContainer.innerHTML = ` |
|
|
<div class="text-center py-20 text-gray-400"> |
|
|
<i class="fas fa-images text-5xl mb-4"></i> |
|
|
<p>Your portfolio images will appear here</p> |
|
|
</div> |
|
|
`; |
|
|
portfolioSettings.classList.add('hidden'); |
|
|
return; |
|
|
} |
|
|
|
|
|
portfolioContainer.innerHTML = ''; |
|
|
portfolioSettings.classList.remove('hidden'); |
|
|
|
|
|
|
|
|
uploadedImages.forEach((image, index) => { |
|
|
const item = document.createElement('div'); |
|
|
item.className = 'portfolio-item bg-white rounded-xl shadow-sm overflow-hidden'; |
|
|
|
|
|
|
|
|
const sizeClasses = ['', 'wide', 'tall', 'big']; |
|
|
const randomSize = sizeClasses[Math.floor(Math.random() * sizeClasses.length)]; |
|
|
if (randomSize) item.classList.add(randomSize); |
|
|
|
|
|
item.innerHTML = ` |
|
|
<img src="${image.url}" alt="${image.name}" class="w-full h-full object-cover"> |
|
|
<div class="overlay"> |
|
|
<h4 class="font-bold text-lg mb-2">${image.name.split('.')[0]}</h4> |
|
|
<button class="delete-btn bg-red-500 hover:bg-red-600 text-white py-1 px-3 rounded-full text-sm mt-2" data-index="${index}"> |
|
|
<i class="fas fa-trash mr-1"></i> Remove |
|
|
</button> |
|
|
</div> |
|
|
`; |
|
|
|
|
|
portfolioContainer.appendChild(item); |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelectorAll('.delete-btn').forEach(btn => { |
|
|
btn.addEventListener('click', function(e) { |
|
|
e.stopPropagation(); |
|
|
const index = parseInt(this.getAttribute('data-index')); |
|
|
uploadedImages.splice(index, 1); |
|
|
updatePortfolio(); |
|
|
}); |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
randomizeBtn.addEventListener('click', function() { |
|
|
if (uploadedImages.length === 0) return; |
|
|
|
|
|
const items = document.querySelectorAll('.portfolio-item'); |
|
|
items.forEach(item => { |
|
|
|
|
|
item.classList.remove('wide', 'tall', 'big'); |
|
|
|
|
|
|
|
|
const sizeClasses = ['', 'wide', 'tall', 'big']; |
|
|
const randomSize = sizeClasses[Math.floor(Math.random() * sizeClasses.length)]; |
|
|
if (randomSize) item.classList.add(randomSize); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
saveSettingsBtn.addEventListener('click', function() { |
|
|
const title = document.getElementById('projectTitle').value; |
|
|
const description = document.getElementById('projectDescription').value; |
|
|
const layout = document.getElementById('layoutStyle').value; |
|
|
const theme = document.getElementById('colorTheme').value; |
|
|
|
|
|
|
|
|
alert(`Settings saved!\nTitle: ${title}\nDescription: ${description}\nLayout: ${layout}\nTheme: ${theme}`); |
|
|
}); |
|
|
|
|
|
|
|
|
downloadBtn.addEventListener('click', function() { |
|
|
if (uploadedImages.length === 0) { |
|
|
alert('Please upload some images first!'); |
|
|
return; |
|
|
} |
|
|
|
|
|
|
|
|
alert('Portfolio download would be generated here. In a real implementation, this would create a ZIP file with all images and an HTML portfolio page.'); |
|
|
}); |
|
|
}); |
|
|
</script> |
|
|
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=sajjadmamun/sajjadmamun-behance-portfolio" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
