Animated DP Creator

<!DOCTYPE html>

<head>

<title>GlowDP - Animated Profile Picture Creator</title>

<style>

* {

margin: 0;

padding: 0;

box-sizing: border-box;

font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

}

:root {

--primary: #8a2be2;

--primary-light: #9370db;

--accent: #00ffff;

--accent-pink: #ff00ff;

--dark: #121212;

--light: #ffffff;

--gray: #f5f5f5;

--text: #333333;

}

body {

background: linear-gradient(135deg, #0f0c29, #302b63, #24243e);

color: var(--light);

line-height: 1.6;

min-height: 100vh;

padding: 20px;

display: flex;

flex-direction: column;

align-items: center;

}

.container {

width: 100%;

max-width: 900px;

background: rgba(18, 18, 18, 0.8);

border-radius: 20px;

box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);

overflow: hidden;

backdrop-filter: blur(10px);

border: 1px solid rgba(255, 255, 255, 0.1);

}

header {

background: linear-gradient(135deg, var(--primary), var(--primary-light));

color: white;

padding: 25px;

text-align: center;

position: relative;

overflow: hidden;

}

.logo {

display: flex;

align-items: center;

justify-content: center;

gap: 15px;

margin-bottom: 15px;

z-index: 2;

position: relative;

}

.logo-icon {

background: white;

width: 50px;

height: 50px;

border-radius: 50%;

display: flex;

align-items: center;

justify-content: center;

color: var(--primary);

font-size: 24px;

animation: pulse 2s infinite;

}

@keyframes pulse {

0% { transform: scale(1); }

50% { transform: scale(1.1); }

100% { transform: scale(1); }

}

h1 {

font-size: 2.5rem;

margin-bottom: 10px;

text-shadow: 0 0 10px rgba(138, 43, 226, 0.7);

}

.tagline {

font-size: 1.1rem;

opacity: 0.9;

}

.particles {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

pointer-events: none;

}

.particle {

position: absolute;

width: 4px;

height: 4px;

background: rgba(255, 255, 255, 0.7);

border-radius: 50%;

animation: float 6s infinite;

}

@keyframes float {

0% { transform: translateY(0) translateX(0); opacity: 0; }

50% { opacity: 1; }

100% { transform: translateY(-100px) translateX(20px); opacity: 0; }

}

.main-content {

padding: 30px;

display: grid;

grid-template-columns: 1fr 1fr;

gap: 30px;

}

@media (max-width: 768px) {

.main-content {

grid-template-columns: 1fr;

}

.upload-section {

background: rgba(255, 255, 255, 0.05);

border-radius: 15px;

padding: 25px;

text-align: center;

}

h2 {

font-size: 1.5rem;

margin-bottom: 20px;

color: var(--accent);

display: flex;

align-items: center;

gap: 10px;

justify-content: center;

}

.upload-area {

border: 3px dashed rgba(255, 255, 255, 0.3);

border-radius: 15px;

padding: 40px 20px;

text-align: center;

margin-bottom: 20px;

transition: all 0.3s ease;

cursor: pointer;

position: relative;

}

.upload-area:hover {

border-color: var(--accent);

box-shadow: 0 0 20px rgba(0, 255, 255, 0.3);

}

.upload-icon {

font-size: 50px;

color: var(--accent);

margin-bottom: 15px;

text-shadow: 0 0 10px rgba(0, 255, 255, 0.5);

}

.upload-text h3 {

font-size: 1.5rem;

margin-bottom: 10px;

}

.upload-text p {

color: rgba(255, 255, 255, 0.7);

}

#file-input {

display: none;

}

.preview-section {

background: rgba(255, 255, 255, 0.05);

border-radius: 15px;

padding: 25px;

text-align: center;

display: flex;

flex-direction: column;

align-items: center;

}

.preview-container {

width: 250px;

height: 250px;

border-radius: 50%;

margin: 20px auto;

position: relative;

overflow: hidden;

box-shadow: 0 0 30px rgba(138, 43, 226, 0.5);

animation: glow 3s infinite alternate;

}

@keyframes glow {

0% { box-shadow: 0 0 20px rgba(138, 43, 226, 0.5); }

100% { box-shadow: 0 0 40px rgba(0, 255, 255, 0.7), 0 0 60px rgba(138, 43, 226, 0.7); }

}

.preview-image {

width: 100%;

height: 100%;

object-fit: cover;

border-radius: 50%;

}

.default-avatar {

width: 100%;

height: 100%;

background: linear-gradient(135deg, var(--primary), var(--primary-light));

border-radius: 50%;

display: flex;

align-items: center;

justify-content: center;

color: white;

font-size: 80px;

}

.frame {

position: absolute;

top: -10px;

left: -10px;

right: -10px;

bottom: -10px;

border: 3px solid var(--accent);

border-radius: 50%;

pointer-events: none;

animation: rotate 10s infinite linear;

}

@keyframes rotate {

0% { transform: rotate(0deg); }

100% { transform: rotate(360deg); }

}

.frame::before {

content: '';

position: absolute;

top: -5px;

left: -5px;

right: -5px;

bottom: -5px;

border: 3px solid var(--accent-pink);

border-radius: 50%;

opacity: 0.7;

animation: rotateReverse 8s infinite linear;

}

@keyframes rotateReverse {

0% { transform: rotate(0deg); }

100% { transform: rotate(-360deg); }

}

.options-section {

grid-column: 1 / -1;

background: rgba(255, 255, 255, 0.05);

border-radius: 15px;

padding: 25px;

margin-top: 20px;

}

.options-grid {

display: grid;

grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

gap: 20px;

}

.option {

background: rgba(255, 255, 255, 0.1);

padding: 20px;

border-radius: 10px;

text-align: center;

transition: all 0.3s;

cursor: pointer;

}

.option:hover {

background: rgba(255, 255, 255, 0.15);

transform: translateY(-5px);

box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);

}

.option.active {

background: rgba(138, 43, 226, 0.3);

border: 2px solid var(--accent);

}

.option-icon {

font-size: 30px;

margin-bottom: 15px;

color: var(--accent);

}

.option-name {

font-weight: 600;

margin-bottom: 10px;

}

.option-desc {

font-size: 14px;

opacity: 0.8;

}

.action-buttons {

display: flex;

gap: 15px;

justify-content: center;

margin-top: 30px;

}

.action-btn {

padding: 15px 30px;

border: none;

border-radius: 50px;

background: linear-gradient(135deg, var(--primary), var(--primary-light));

color: white;

font-weight: 600;

cursor: pointer;

transition: all 0.3s;

display: flex;

align-items: center;

gap: 8px;

box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);

}

.action-btn:hover {

transform: translateY(-3px);

box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);

}

.action-btn:active {

transform: translateY(0);

}

.download-btn {

background: linear-gradient(135deg, var(--accent), #00bcd4);

}

.share-btn {

background: linear-gradient(135deg, var(--accent-pink), #e91e63);

}

footer {

text-align: center;

padding: 20px;

color: rgba(255, 255, 255, 0.7);

margin-top: 20px;

}

/* Animation for the demo image */

.demo-image {

animation: floatImage 4s ease-in-out infinite;

}

@keyframes floatImage {

0% { transform: translateY(0); }

50% { transform: translateY(-10px); }

100% { transform: translateY(0); }

}

</style>

</head>

<body>

</div>

<h1>GlowDP Creator</h1>

</div>

<p class="tagline">Create stunning animated profile pictures with glowing effects</p>

</header>

<h2><i class="fas fa-upload"></i> Upload Your Photo</h2>

</div>

<p>Your photo here or click to browse</p>

</div>

</div>

<p>Supported formats: JPG, PNG, GIF</p>

</div>

<h2><i class="fas fa-eye"></i> Preview</h2>

</div>

</div>

<i class="fas fa-download"></i> Download DP

</button>

<i class="fas fa-share-alt"></i> Share

</button>

</div>

<h2><i class="fas fa-magic"></i> Animation Effects</h2>

</div>

<div class="option-desc">Vibrant neon border with pulsating effect</div>

</div>

</div>

<div class="option-name">Particle Fire</div>

<div class="option-desc">Animated particles around your picture</div>

</div>

</div>

<div class="option-name">Sparkle Effect</div>

<div class="option-desc">Shining sparkles around your profile picture</div>

</div>

</div>

<div class="option-name">Color Shift</div>

<div class="option-desc">Gradually changing background colors</div>

</div>

</footer>

</div>

document.addEventListener('DOMContentLoaded', function() {

const fileInput = document.getElementById('file-input');

const uploadArea = document.getElementById('upload-area');

const previewImage = document.getElementById('preview-image');

const defaultAvatar = document.querySelector('.default-avatar');

const downloadBtn = document.getElementById('download-btn');

const shareBtn = document.getElementById('share-btn');

const particlesContainer = document.getElementById('particles');

// Create floating particles

function createParticles() {

for (let i = 0; i < 30; i++) {

const particle = document.createElement('div');

particle.className = 'particle';

particle.style.left = Math.random() * 100 + '%';

particle.style.top = Math.random() * 100 + '%';

particle.style.animationDelay = Math.random() * 5 + 's';

particle.style.background = i % 3 === 0 ? 'rgba(0, 255, 255, 0.7)' :

i % 3 === 1 ? 'rgba(138, 43, 226, 0.7)' :

'rgba(255, 0, 255, 0.7)';

particlesContainer.appendChild(particle);

}

createParticles();

// Upload area functionality

uploadArea.addEventListener('click', function() {

fileInput.click();

});

uploadArea.addEventListener('dragover', function(e) {

e.preventDefault();

uploadArea.style.borderColor = 'var(--accent)';

uploadArea.style.backgroundColor = 'rgba(0, 255, 255, 0.1)';

});

uploadArea.addEventListener('dragleave', function() {

uploadArea.style.borderColor = 'rgba(255, 255, 255, 0.3)';

uploadArea.style.backgroundColor = 'transparent';

});

uploadArea.addEventListener('drop', function(e) {

e.preventDefault();

uploadArea.style.borderColor = 'rgba(255, 255, 255, 0.3)';

uploadArea.style.backgroundColor = 'transparent';

if (e.dataTransfer.files.length > 0) {

fileInput.files = e.dataTransfer.files;

handleImageUpload(e.dataTransfer.files[0]);

}

});

fileInput.addEventListener('change', function() {

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) {

previewImage.src = e.target.result;

previewImage.style.display = 'block';

defaultAvatar.style.display = 'none';

// Enable download button

downloadBtn.disabled = false;

shareBtn.disabled = false;

};

reader.readAsDataURL(file);

}

// Download functionality

downloadBtn.addEventListener('click', function() {

if (!previewImage.src || previewImage.src === window.location.href) {

alert('Please upload an image first');

return;

}

// In a real application, this would use canvas to draw the image with effects

// For this demo, we'll just provide a download link for the original image

const a = document.createElement('a');

a.href = previewImage.src;

a.download = 'glow-dp.png';

document.body.appendChild(a);

a.click();

document.body.removeChild(a);

// Show confirmation

alert('Your glowing DP is downloading! In a real app, it would include all effects.');

});

// Share functionality

shareBtn.addEventListener('click', function() {

if (!previewImage.src || previewImage.src === window.location.href) {

alert('Please upload an image first');

return;

}

alert('Sharing functionality would be implemented in a complete version. This would allow sharing to Instagram, WhatsApp, etc.');

});

// Option selection

const options = document.querySelectorAll('.option');

options.forEach(option => {

option.addEventListener('click', function() {

options.forEach(opt => opt.classList.remove('active'));

this.classList.add('active');

// In a real app, this would change the effect applied to the image

alert('Effect changed to: ' + this.querySelector('.option-name').textContent);

});

</script>

</body>

</html>

Advertisement

Animated DP Creator

प्रस्तुतकर्ता Devansh Verma

एक टिप्पणी भेजें

0 टिप्पणियाँ

Advertisement

Menu Footer Widget

Contact form

Advertisement

Animated DP Creator

प्रस्तुतकर्ता Devansh Verma

आपको ये पोस्ट पसंद आ सकती हैं

एक टिप्पणी भेजें

0 टिप्पणियाँ

Advertisement

Menu Footer Widget

Contact form