Personalized photo lamp
€30.00
Upload your photo here
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Modern File Upload</title>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Roboto', 'Source Sans Pro', sans-serif;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #f0f2f5;
}
.upload-container {
background: white;
padding: 2rem;
border-radius: 12px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
width: 90%;
max-width: 500px;
}
.custom-upload {
position: relative;
text-align: center;
}
.file-input {
opacity: 0;
position: absolute;
width: 100%;
height: 100%;
cursor: pointer;
}
.upload-btn {
background: linear-gradient(135deg, #6366f1, #8b5cf6);
color: white;
padding: 1rem 2rem;
border: none;
border-radius: 8px;
font-size: 1.1rem;
font-weight: 500;
cursor: pointer;
transition: transform 0.2s, box-shadow 0.2s;
display: inline-flex;
align-items: center;
gap: 8px;
}
.upload-btn:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}
.file-list {
margin-top: 1.5rem;
border-top: 1px solid #e5e7eb;
padding-top: 1rem;
}
.file-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.75rem;
background: #f8fafc;
border-radius: 6px;
margin-bottom: 0.5rem;
}
.submit-btn {
width: 100%;
margin-top: 1.5rem;
padding: 1rem;
background: #10b981;
color: white;
border: none;
border-radius: 8px;
font-size: 1.1rem;
cursor: pointer;
transition: background 0.2s;
}
.submit-btn:hover {
background: #059669;
}
</style>
</head>
<body>
<div class="upload-container">
<form id="uploadForm" enctype="multipart/form-data" method="post">
<div class="custom-upload">
<input type="file" id="fileUpload" class="file-input" multiple>
<label for="fileUpload" class="upload-btn">
📁 Choose Files
</label>
<div class="file-list" id="fileList"></div>
</div>
<button type="submit" class="submit-btn">Upload Files</button>
</form>
</div>
<script>
const fileInput = document.getElementById('fileUpload');
const fileList = document.getElementById('fileList');
fileInput.addEventListener('change', () => {
fileList.innerHTML = '';
Array.from(fileInput.files).forEach((file, index) => {
const fileItem = document.createElement('div');
fileItem.className = 'file-item';
fileItem.innerHTML = `
<span>${file.name}</span>
<span>${formatFileSize(file.size)}</span>
`;
fileList.appendChild(fileItem);
});
});
function formatFileSize(bytes) {
if (bytes === 0) return '0 B';
const k = 1024;
const sizes = ['B', 'KB', 'MB', 'GB'];
const i = Math.floor(Math.log(bytes) / Math.log(k));
return ${(bytes / Math.pow(k, i)).toFixed(1)} ${sizes[i]};
}
document.getElementById('uploadForm').addEventListener('submit', async (e) => {
e.preventDefault();
// Add your upload logic here
alert('Upload functionality needs backend implementation');
});
</script>
</body>
</html>
