FOBLAND

Градиентный генератор

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Генератор градиентов для Minecraft</title>
<style>
:root {
--primary: #667eea;
--primary-dark: #5a6fd8;
--secondary: #764ba2;
--light: #f8f9fa;
--dark: #343a40;
--success: #28a745;
--border: #dee2e6;
}

* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

body {
background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
min-height: 100vh;
padding: 20px;
color: var(--dark);
}

.container {
max-width: 1200px;
margin: 0 auto;
}

.header {
text-align: center;
margin-bottom: 30px;
color: white;
text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.header h1 {
font-size: 2.5rem;
margin-bottom: 10px;
}

.header p {
font-size: 1.1rem;
opacity: 0.9;
}

.card {
background: white;
border-radius: 15px;
box-shadow: 0 10px 30px rgba(0,0,0,0.2);
overflow: hidden;
margin-bottom: 20px;
}

.card-header {
padding: 20px;
border-bottom: 1px solid var(--border);
background: var(--light);
}

.card-body {
padding: 25px;
}

.main-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 25px;
margin-bottom: 25px;
}

@media (max-width: 768px) {
.main-content {
grid-template-columns: 1fr;
}
}

.control-group {
margin-bottom: 20px;
}

.control-group label {
display: block;
margin-bottom: 8px;
font-weight: 600;
color: #555;
}

.color-pickers {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 15px;
margin-bottom: 20px;
}

.color-input {
width: 100%;
height: 50px;
border: none;
border-radius: 8px;
cursor: pointer;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.slider-container {
background: var(--light);
padding: 15px;
border-radius: 8px;
}

input[type="range"] {
width: 100%;
margin: 10px 0;
}

.value-display {
display: flex;
justify-content: space-between;
margin-top: 5px;
font-size: 14px;
color: #666;
}

.text-input {
width: 100%;
padding: 12px 15px;
border: 1px solid var(--border);
border-radius: 8px;
font-size: 16px;
margin-bottom: 15px;
}

.preview-box {
min-height: 150px;
border-radius: 10px;
margin-bottom: 20px;
border: 2px solid var(--border);
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
font-size: 24px;
font-weight: bold;
text-align: center;
background: var(--light);
}

.code-output {
background: #2d3748;
color: #e2e8f0;
padding: 20px;
border-radius: 8px;
font-family: 'Courier New', monospace;
font-size: 16px;
line-height: 1.5;
margin-bottom: 15px;
white-space: pre-wrap;
word-break: break-all;
}

.buttons {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 15px;
margin-top: 20px;
}

button {
padding: 12px 20px;
border: none;
border-radius: 8px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}

.copy-btn {
background: var(--success);
color: white;
}

.copy-btn:hover {
background: #218838;
}

.random-btn {
background: var(--primary);
color: white;
}

.random-btn:hover {
background: var(--primary-dark);
}

.presets {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 15px;
margin-top: 20px;
}

.preset-item {
height: 80px;
border-radius: 8px;
cursor: pointer;
transition: transform 0.3s ease;
border: 2px solid transparent;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
color: white;
text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

.preset-item:hover {
transform: scale(1.05);
}

.preset-item.active {
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.3);
}

.info-box {
background: #e7f3ff;
border-left: 4px solid var(--primary);
padding: 15px;
border-radius: 4px;
margin-top: 20px;
font-size: 14px;
}

.info-box h3 {
margin-bottom: 8px;
color: var(--primary);
}

.tabs {
display: flex;
border-bottom: 1px solid var(--border);
margin-bottom: 20px;
}

.tab {
padding: 12px 20px;
cursor: pointer;
border-bottom: 3px solid transparent;
font-weight: 600;
}

.tab.active {
border-bottom-color: var(--primary);
color: var(--primary);
}

.tab-content {
display: none;
}

.tab-content.active {
display: block;
}

.format-option {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 15px;
}

.format-option input {
width: 20px;
height: 20px;
}

.minecraft-colors {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
gap: 10px;
margin-top: 15px;
}

.minecraft-color {
height: 40px;
border-radius: 5px;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: bold;
cursor: pointer;
color: white;
text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>🎨 Генератор градиентов для Minecraft</h1>
<p>Создавайте красивые цветные тексты для вашего сервера Minecraft</p>
</div>

<div class="main-content">
<div class="card">
<div class="card-header">
<h2>Настройки градиента</h2>
</div>
<div class="card-body">
<div class="control-group">
<label>Введите текст:</label>
<input type="text" class="text-input" id="textInput" value="Ваш текст здесь" placeholder="Введите текст для форматирования">
</div>

<div class="color-pickers">
<div class="control-group">
<label for="color1">Цвет 1</label>
<input type="color" id="color1" class="color-input" value="#ff6b6b">
</div>
<div class="control-group">
<label for="color2">Цвет 2</label>
<input type="color" id="color2" class="color-input" value="#4ecdc4">
</div>
</div>

<div class="control-group">
<label for="angle">Интенсивность градиента: <span id="angleValue">5</span></label>
<div class="slider-container">
<input type="range" id="angle" min="1" max="10" value="5">
<div class="value-display">
<span>Мягкий</span>
<span>Яркий</span>
</div>
</div>
</div>

<div class="buttons">
<button class="copy-btn" onclick="copyCode()">
<span>📋</span> Копировать код
</button>
<button class="random-btn" onclick="generateRandom()">
<span>🎲</span> Случайный градиент
</button>
</div>
</div>
</div>

<div class="card">
<div class="card-header">
<h2>Результат</h2>
</div>
<div class="card-body">
<div class="preview-box" id="preview">
Ваш текст здесь
</div>

<div class="tabs">
<div class="tab active" data-tab="minecraft">Код для Minecraft</div>
<div class="tab" data-tab="css">CSS градиент</div>
</div>

<div class="tab-content active" id="minecraft-tab">
<div class="code-output" id="minecraftCode">

</div>
</div>

<div class="tab-content" id="css-tab">
<div class="code-output" id="cssCode">

</div>
</div>

<div class="info-box">
<h3>Как использовать:</h3>
<p>1. Настройте цвета и интенсивность градиента</p>
<p>2. Скопируйте сгенерированный код</p>
<p>3. Вставьте код в чат Minecraft или в конфигурационные файлы плагинов</p>
</div>
</div>
</div>
</div>

<div class="card">
<div class="card-header">
<h2>Популярные градиенты</h2>
</div>
<div class="card-body">
<div class="presets" id="presetGrid">

</div>

<div class="info-box">
<h3>Цветовые коды Minecraft</h3>
<div class="minecraft-colors" id="minecraftColors">

</div>
</div>
</div>
</div>
</div>

<script>
// Элементы DOM
const color1 = document.getElementById('color1');
const color2 = document.getElementById('color2');
const angle = document.getElementById('angle');
const angleValue = document.getElementById('angleValue');
const textInput = document.getElementById('textInput');
const preview = document.getElementById('preview');
const minecraftCode = document.getElementById('minecraftCode');
const cssCode = document.getElementById('cssCode');
const presetGrid = document.getElementById('presetGrid');
const minecraftColors = document.getElementById('minecraftColors');

// Цветовые коды Minecraft (формат BirdFlop)
const minecraftColorCodes = [
{ code: '§0', name: 'Черный', hex: '#000000' },
{ code: '§1', name: 'Темно-синий', hex: '#0000AA' },
{ code: '§2', name: 'Темно-зеленый', hex: '#00AA00' },
{ code: '§3', name: 'Темно-бирюзовый', hex: '#00AAAA' },
{ code: '§4', name: 'Темно-красный', hex: '#AA0000' },
{ code: '§5', name: 'Фиолетовый', hex: '#AA00AA' },
{ code: '§6', name: 'Золотой', hex: '#FFAA00' },
{ code: '§7', name: 'Серый', hex: '#AAAAAA' },
{ code: '§8', name: 'Темно-серый', hex: '#555555' },
{ code: '§9', name: 'Синий', hex: '#5555FF' },
{ code: '§a', name: 'Зеленый', hex: '#55FF55' },
{ code: '§b', name: 'Бирюзовый', hex: '#55FFFF' },
{ code: '§c', name: 'Красный', hex: '#FF5555' },
{ code: '§d', name: 'Розовый', hex: '#FF55FF' },
{ code: '§e', name: 'Желтый', hex: '#FFFF55' },
{ code: '§f', name: 'Белый', hex: '#FFFFFF' }
];

// Предустановленные градиенты
const presets = [
{ colors: ['#ff6b6b', '#4ecdc4'], intensity: 5, name: 'Коралловый циан' },
{ colors: ['#667eea', '#764ba2'], intensity: 5, name: 'Фиолетовая мечта' },
{ colors: ['#f093fb', '#f5576c'], intensity: 6, name: 'Розовый закат' },
{ colors: ['#4facfe', '#00f2fe'], intensity: 5, name: 'Синий океан' },
{ colors: ['#43e97b', '#38f9d7'], intensity: 5, name: 'Зеленая свежесть' },
{ colors: ['#fa709a', '#fee140'], intensity: 7, name: 'Золотой рассвет' }
];

// Инициализация
function init() {
updateGradient();
generatePresets();
generateMinecraftColors();
setupTabs();

// Слушатели событий
color1.addEventListener('input', updateGradient);
color2.addEventListener('input', updateGradient);
angle.addEventListener('input', updateGradient);
textInput.addEventListener('input', updateGradient);

angle.addEventListener('input', function() {
angleValue.textContent = this.value;
});
}

// Настройка вкладок
function setupTabs() {
const tabs = document.querySelectorAll('.tab');
tabs.forEach(tab => {
tab.addEventListener('click', () => {
// Убираем активный класс у всех вкладок
tabs.forEach(t => t.classList.remove('active'));
// Добавляем активный класс к текущей вкладке
tab.classList.add('active');

// Скрываем все содержимое вкладок
document.querySelectorAll('.tab-content').forEach(content => {
content.classList.remove('active');
});

// Показываем содержимое активной вкладки
const tabId = tab.getAttribute('data-tab') + '-tab';
document.getElementById(tabId).classList.add('active');
});
});
}

// Обновление градиента
function updateGradient() {
const color1Value = color1.value;
const color2Value = color2.value;
const intensity = angle.value;
const text = textInput.value || 'Ваш текст здесь';

// Обновляем предпросмотр
preview.innerHTML = text;
preview.style.background = `linear-gradient(135deg, ${color1Value}, ${color2Value})`;
preview.style.webkitBackgroundClip = 'text';
preview.style.backgroundClip = 'text';
preview.style.webkitTextFillColor = 'transparent';

// Генерируем CSS код
const gradientCSS = `background: linear-gradient(135deg, ${color1Value}, ${color2Value});
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;`;

cssCode.textContent = gradientCSS;

// Генерируем код для Minecraft
generateMinecraftCode(text, color1Value, color2Value, intensity);
}

// Генерация кода для Minecraft
function generateMinecraftCode(text, color1, color2, intensity) {
// Конвертируем цвета в RGB
const rgb1 = hexToRgb(color1);
const rgb2 = hexToRgb(color2);

let minecraftText = '';

// Создаем градиент, добавляя цветовые коды для каждого символа
for (let i = 0; i < text.length; i++) {
const ratio = i / (text.length - 1);
const r = Math.round(rgb1.r + (rgb2.r - rgb1.r) * ratio);
const g = Math.round(rgb1.g + (rgb2.g - rgb1.g) * ratio);
const b = Math.round(rgb1.b + (rgb2.b - rgb1.b) * ratio);

// Находим ближайший цвет Minecraft
const minecraftColor = findClosestMinecraftColor(r, g, b);

minecraftText += minecraftColor + text[i];
}

minecraftCode.textContent = minecraftText;
}

// Поиск ближайшего цвета Minecraft
function findClosestMinecraftColor(r, g, b) {
let minDistance = Infinity;
let closestColor = '§f'; // Белый по умолчанию

for (const color of minecraftColorCodes) {
const colorRgb = hexToRgb(color.hex);
const distance = colorDistance(r, g, b, colorRgb.r, colorRgb.g, colorRgb.b);

if (distance < minDistance) {
minDistance = distance;
closestColor = color.code;
}
}

return closestColor;
}

// Расчет расстояния между цветами
function colorDistance(r1, g1, b1, r2, g2, b2) {
return Math.sqrt(
Math.pow(r2 - r1, 2) +
Math.pow(g2 - g1, 2) +
Math.pow(b2 - b1, 2)
);
}

// Конвертация HEX в RGB
function hexToRgb(hex) {
const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
return result ? {
r: parseInt(result[1], 16),
g: parseInt(result[2], 16),
b: parseInt(result[3], 16)
} : { r: 0, g: 0, b: 0 };
}

// Генерация случайного градиента
function generateRandom() {
const randomColor1 = '#' + Math.floor(Math.random()*16777215).toString(16);
const randomColor2 = '#' + Math.floor(Math.random()*16777215).toString(16);
const randomIntensity = Math.floor(Math.random() * 10) + 1;

color1.value = randomColor1;
color2.value = randomColor2;
angle.value = randomIntensity;
angleValue.textContent = randomIntensity;

updateGradient();
}

// Копирование кода
function copyCode() {
const activeTab = document.querySelector('.tab.active').getAttribute('data-tab');
let codeToCopy = '';

if (activeTab === 'minecraft') {
codeToCopy = minecraftCode.textContent;
} else {
codeToCopy = cssCode.textContent;
}

navigator.clipboard.writeText(codeToCopy).then(() => {
const btn = document.querySelector('.copy-btn');
const originalText = btn.innerHTML;
btn.innerHTML = '<span>✅</span> Скопировано!';
setTimeout(() => {
btn.innerHTML = originalText;
}, 2000);
});
}

// Генерация пресетов
function generatePresets() {
presetGrid.innerHTML = '';
presets.forEach((preset, index) => {
const presetElement = document.createElement('div');
presetElement.className = 'preset-item';
presetElement.style.background = `linear-gradient(135deg, ${preset.colors[0]}, ${preset.colors[1]})`;
presetElement.textContent = preset.name;

presetElement.addEventListener('click', () => {
applyPreset(preset);

document.querySelectorAll('.preset-item').forEach(item => {
item.classList.remove('active');
});

presetElement.classList.add('active');
});

presetGrid.appendChild(presetElement);
});
}

// Генерация цветов Minecraft
function generateMinecraftColors() {
minecraftColors.innerHTML = '';
minecraftColorCodes.forEach(color => {
const colorElement = document.createElement('div');
colorElement.className = 'minecraft-color';
colorElement.style.background = color.hex;
colorElement.textContent = color.name;
colorElement.title = `${color.name} (${color.code})`;

colorElement.addEventListener('click', () => {
// Устанавливаем первый цвет выбранным
color1.value = color.hex;
updateGradient();
});

minecraftColors.appendChild(colorElement);
});
}

// Применение пресета
function applyPreset(preset) {
color1.value = preset.colors[0];
color2.value = preset.colors[1];
angle.value = preset.intensity;
angleValue.textContent = preset.intensity;

updateGradient();
}

// Запуск при загрузке
document.addEventListener('DOMContentLoaded', init);
</script>
</body>
</html>