Генератор диплома участника

CSS-код для сохранения в файл style.css Этот код отвечает за внешний вид. Сохраните его в той же папке, что и HTML-файл. /* Общие стили страницы */ body { font-family: 'Arial', sans-serif; background-color: #f0f2f5; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; } .container { background: white; padding: 2rem; border-radius: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); width: 100%; max-width: 600px; text-align: center; } h1 { color: #333; margin-bottom: 1.5rem; } /* Стили формы */ #diploma-form { display: inline-grid; gap: 1rem; width: 100%; } #diploma-form label { font-weight: bold; color: #555; } #diploma-form input { width: 100%; padding: 0.7rem; border: 1px solid #ccc; border-radius: 4px; font-size: 1rem; } #diploma-form button { background-color: #007bff; 17:31 color: white !important; padding: 0.8rem 1.5rem; border: none; border-radius: 4px; cursor: pointer; font-size: 1rem; transition: background-color 0.3s; } #diploma-form button:hover { background-color: #0056b3; } /* Стили диплома */ .diploma { position: relative; margin-top: 2rem; width: 800px; /* Размер итогового изображения */ height: auto; overflow: hidden; display: none; /* По умолчанию скрыт */ } .hidden { display: none; } .diploma-image { width: 100%; display: block; } .content { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; color: white; z-index: 1; } .award-text { font-size: 2.5em; letter-spacing: 0.1em; margin: 0; } .event-name { font-size: 1.2em; margin: 0.5em 0 1em 0; font-style: italic; } .name-line { font-size: 1.5em; margin: 1em 0 0.5em 0; } .full-name { font-size: 2.2em; font-weight: bold; margin: 0; } .statement-text { font-size: 1.1em; margin: 1.5em 0 0 0; } .signature-block { margin-top: 2em; } .role { font-size: 0.9em; opacity: 0.8; margin: 0; } .line { width: 50%; height: 2px; background-color: white; margin: 0.5em auto; } .name { font-size: 1.1em; margin: 0.2em 0 0 0; } JavaScript-код для сохранения в файл script.js Этот код реализует логику. Сохраните его в той же папке. document.addEventListener('DOMContentLoaded', () => { const form = document.getElementById('diploma-form'); const diplomaTemplate = document.getElementById('diploma-template'); // Элементы внутри шаблона const templateEventName = document.getElementById('template-event-name'); const templateFullName = document.getElementById('template-full-name'); // Элементы из формы const eventNameInput = document.getElementById('event-name'); const participantNameInput = document.getElementById('participant-name'); const participantSurnameInput = document.getElementById('participant-surname'); form.addEventListener('submit', function(event) { event.preventDefault(); // Предотвращаем перезагрузку страницы // 1. Получаем данные от пользователя const eventName = eventNameInput.value.trim(); const name = participantNameInput.value.trim(); const surname = participantSurnameInput.value.trim(); if (!name || !surname) { alert('Пожалуйста, укажите имя и фамилию.'); return; } // 2. Заполняем шаблон данными templateEventName.textContent = eventName; templateFullName.textContent = `${name} ${surname}`; // Показываем заполненный диплом на экране (необязательно) diplomaTemplate.classList.remove('hidden'); // 3. Конвертируем диплом в изображение и скачиваем domtoimage.toPng(diplomaTemplate, { quality: 1 }) .then(function(dataUrl) { // Создаем временную ссылку для скачивания const link = document.createElement('a'); link.download = `diploma_${name}_${surname}.png`; link.href = dataUrl; document.body.appendChild(link); // Добавляем в DOM link.click(); // Имитируем клик document.body.removeChild(link); // Удаляем после использования }) .catch(function(error) { console.error('Ошибка при генерации изображения:', error); alert('К сожалению, произошла ошибка. Попробуйте еще раз.'); }); }); });