Веб-редактор — HTML / CSS / JS

HTML

CSS

JavaScript

Зображення

/* Основні стилі сторінки */
body {
    font-family: 'Arial', sans-serif;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    margin: 0;
    padding: 20px;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.container {
    background: rgba(255,255,255,0.1);
    padding: 40px;
    border-radius: 15px;
    backdrop-filter: blur(15px);
    max-width: 800px;
    width: 100%;
    text-align: center;
}

h1 {
    margin-bottom: 25px;
    cursor: pointer;
    transition: color 0.3s ease;
}

.highlight {
    background: linear-gradient(120deg, #a8edea 0%, #fed6e3 100%);
    padding: 12px;
    border-radius: 10px;
    color: #333;
    margin-bottom: 20px;
    display: inline-block;
}

.special-text {
    font-size: 1.2em;
    font-weight: bold;
}

button {
    background: #ff6b6b;
    color: white;
    border: none;
    padding: 12px 24px;
    margin: 10px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 16px;
    transition: all 0.3s ease;
}

button:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

.image-preview {
    margin-top: 25px;
}

.uploaded-image {
    border: 3px solid #fff;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.4);
    transition: transform 0.3s ease;
}

.uploaded-image:hover {
    transform: scale(1.05);
}

#message div {
    background: rgba(255,255,255,0.2);
    padding: 15px;
    border-radius: 8px;
    margin-top: 15px;
    font-weight: bold;
}

@media (max-width: 600px) {
    body {
        padding: 10px;
    }
    .container {
        padding: 20px;
    }
    h1 {
        font-size: 1.5em;
    }
}

console.log('JavaScript редактор завантажений!');

// Функція для анімації кнопки
function animateElement(element) {
    element.style.transform = 'scale(1.1)';
    setTimeout(() => {
        element.style.transform = 'scale(1)';
    }, 300);
}

// Показати випадкове повідомлення
function showMessage() {
    const messages = [
        "Чудова робота! 🚀",
        "JavaScript працює! 💫",
        "Ви зробили це! 🎯",
        "Код виконується! ⚡"
    ];
    const randomMessage = messages[Math.floor(Math.random() * messages.length)];
    const messageElement = document.getElementById('message');
    if (messageElement) {
        messageElement.innerHTML = `
            <div>${randomMessage}</div>
        `;
    }
}

// Зміна кольору заголовка при кліку
document.addEventListener('DOMContentLoaded', function() {
    const h1 = document.querySelector('h1');
    if (h1) {
        h1.addEventListener('click', function() {
            this.style.color = this.style.color === 'yellow' ? 'white' : 'yellow';
        });
    }
});

// Функція для відображення завантажених зображень
function displayUploadedImages() {
    const container = document.querySelector('.image-preview');
    if (container) {
        const images = container.querySelectorAll('img');
        images.forEach(img => img.remove());
        console.log('Функція відображення зображень готова!');
    }
}

// Глобальні слухачі для кнопок
document.addEventListener('click', function(e) {
    if (e.target.tagName === 'BUTTON') {
        animateElement(e.target);
    }
});

Попередній перегляд Готовий

Створити новий проект?