body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
line-height: 1.6;
max-width: 800px;
margin: 0 auto;
padding: 20px;
color: #333;
background-color: #f9f9f9;
}
h1 {
color: #2c3e50;
text-align: center;
margin-bottom: 30px;
}
.container {
background-color: #fff;
border-radius: 10px;
padding: 30px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.form-group {
margin-bottom: 25px;
}
label {
display: block;
margin-bottom: 10px;
font-weight: 600;
color: #2c3e50;
}
textarea {
width: 100%;
padding: 15px;
border: 1px solid #ddd;
border-radius: 6px;
box-sizing: border-box;
font-size: 16px;
resize: vertical;
min-height: 150px;
font-family: inherit;
transition: border-color 0.3s;
}
textarea:focus {
border-color: #3498db;
outline: none;
}
.btn {
background-color: #3498db;
color: white;
border: none;
padding: 12px 20px;
border-radius: 6px;
cursor: pointer;
font-size: 16px;
font-weight: 500;
transition: all 0.3s;
margin-right: 10px;
margin-bottom: 10px;
}
.btn:hover {
background-color: #2980b9;
transform: translateY(-2px);
}
.btn-secondary {
background-color: #95a5a6;
}
.btn-secondary:hover {
background-color: #7f8c8d;
}
.btn-success {
background-color: #2ecc71;
}
.btn-success:hover {
background-color: #27ae60;
}
.result-container {
margin-top: 30px;
border-top: 2px solid #eee;
padding-top: 25px;
}
.result-box {
position: relative;
margin-top: 15px;
}
.result-text {
padding: 15px;
border-radius: 6px;
background-color: #f8f9fa;
border: 1px solid #eee;
white-space: pre-wrap;
font-family: 'Courier New', monospace;
min-height: 100px;
}
.copy-btn {
position: absolute;
top: 10px;
right: 10px;
background-color: #34495e;
color: white;
border: none;
padding: 6px 12px;
border-radius: 4px;
cursor: pointer;
font-size: 14px;
transition: all 0.2s;
display: flex;
align-items: center;
}
.copy-btn:hover {
background-color: #2c3e50;
}
.copy-btn svg {
margin-right: 5px;
width: 14px;
height: 14px;
}
.stats {
margin-top: 15px;
font-size: 14px;
color: #7f8c8d;
display: flex;
justify-content: space-between;
}
.options {
background-color: #f8f9fa;
padding: 20px;
border-radius: 6px;
margin-bottom: 20px;
border: 1px solid #eee;
}
.radio-group {
margin: 10px 0;
}
.radio-option {
margin-right: 15px;
}
.radio-option input {
margin-right: 5px;
}
.hint {
font-size: 13px;
color: #95a5a6;
margin-top: 5px;
}
.notification {
position: fixed;
top: 20px;
right: 20px;
background-color: #2ecc71;
color: white;
padding: 12px 20px;
border-radius: 6px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
transform: translateX(100%);
opacity: 0;
transition: all 0.3s ease;
z-index: 1000;
}
.notification.show {
transform: translateX(0);
opacity: 1;
}
Инструмент преобразования регистра символов
Введите текст:
Параметры преобразования:
ВСЕ ЗАГЛАВНЫЕ ВСЕ СТРОЧНЫЕ Первая буква каждого слова заглавная Формат заголовка (первая буква каждого предложения заглавная) Формат предложения (только первая буква первого слова заглавная) Инвертировать регистр
Выберите нужный способ преобразования регистра текста
Преобразовать текст Очистить результат
Результат преобразования:
Копировать
Исходная длина: 0 символов
Длина после преобразования: 0 символов
Время преобразования: 0мс
Текст скопирован в буфер обмена!
document.addEventListener('DOMContentLoaded', function() {
const inputText = document.getElementById('inputText');
const convertBtn = document.getElementById('convertBtn');
const clearBtn = document.getElementById('clearBtn');
const resultDiv = document.getElementById('result');
const copyBtn = document.getElementById('copyBtn');
const originalLengthSpan = document.getElementById('originalLength');
const convertedLengthSpan = document.getElementById('convertedLength');
const processTimeSpan = document.getElementById('processTime');
const convertOptions = document.querySelectorAll('input[name="convertOption"]');
const notification = document.getElementById('notification');
// Преобразование текста
convertBtn.addEventListener('click', function() {
const text = inputText.value.trim();
if (!text) {
alert('Пожалуйста, введите текст для преобразования');
return;
}
const startTime = performance.now();
// Получить выбранный параметр преобразования
let selectedOption = 'uppercase';
for (const option of convertOptions) {
if (option.checked) {
selectedOption = option.value;
break;
}
}
// Выполнить преобразование
let convertedText = text;
switch (selectedOption) {
case 'uppercase':
convertedText = text.toUpperCase();
break;
case 'lowercase':
convertedText = text.toLowerCase();
break;
case 'capitalize':
convertedText = capitalizeWords(text);
break;
case 'titlecase':
convertedText = titleCase(text);
break;
case 'sentencecase':
convertedText = sentenceCase(text);
break;
case 'inverse':
convertedText = inverseCase(text);
break;
default:
convertedText = text.toUpperCase();
}
const endTime = performance.now();
const timeTaken = (endTime - startTime).toFixed(2);
// Показать результат
resultDiv.textContent = convertedText;
originalLengthSpan.textContent = text.length;
convertedLengthSpan.textContent = convertedText.length;
processTimeSpan.textContent = timeTaken;
});
// Очистить результат
clearBtn.addEventListener('click', function() {
inputText.value = '';
resultDiv.textContent = '';
originalLengthSpan.textContent = '0';
convertedLengthSpan.textContent = '0';
processTimeSpan.textContent = '0';
});
// Копировать в буфер обмена
copyBtn.addEventListener('click', function() {
const textToCopy = resultDiv.textContent;
if (!textToCopy) return;
// Использовать современный API буфера обмена
if (navigator.clipboard) {
navigator.clipboard.writeText(textToCopy).then(function() {
showNotification();
}).catch(function(err) {
// Если API не сработал, использовать традиционный метод
fallbackCopyText(textToCopy);
});
} else {
// Традиционный метод копирования
fallbackCopyText(textToCopy);
}
});
// Традиционный метод копирования
function fallbackCopyText(text) {
const textarea = document.createElement('textarea');
textarea.value = text;
textarea.style.position = 'fixed'; // Избежать прокрутки вниз страницы
document.body.appendChild(textarea);
textarea.select();
try {
const successful = document.execCommand('copy');
if (successful) {
showNotification();
} else {
alert('Не удалось скопировать, пожалуйста, выделите текст вручную и нажмите Ctrl+C');
}
} catch (err) {
alert('Не удалось скопировать, пожалуйста, выделите текст вручную и нажмите Ctrl+C');
}
document.body.removeChild(textarea);
}
// Показать уведомление
function showNotification() {
notification.classList.add('show');
setTimeout(function() {
notification.classList.remove('show');
}, 2000);
}
// Различные функции преобразования
function capitalizeWords(text) {
return text.replace(/\b\w+/g, function(word) {
return word.charAt(0).toUpperCase() + word.slice(1).toLowerCase();
});
}
function titleCase(text) {
// Упрощённый формат заголовка — первая буква каждого предложения заглавная
// Более сложная реализация может обрабатывать исключения (например, "a", "an", "the" и т.д.)
return text.replace(/(?:^|\. )\w/g, function(match) {
return match.toUpperCase();
});
}
function sentenceCase(text) {
if (!text) return text;
const trimmed = text.trim();
return trimmed.charAt(0).toUpperCase() + trimmed.slice(1).toLowerCase();
}
function inverseCase(text) {
return text.split('').map(function(char) {
if (char === char.toUpperCase() && char !== char.toLowerCase()) {
return char.toLowerCase();
} else if (char === char.toLowerCase() && char !== char.toUpperCase()) {
return char.toUpperCase();
}
return char;
}).join('');
}
// Подсчёт символов в реальном времени (опционально)
inputText.addEventListener('input', function() {
// При необходимости обработки в реальном времени можно добавить код здесь
});
});