| <!DOCTYPE html> |
| <html lang="ru"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Конвертер Юникода в символ</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <style> |
| @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap'); |
| body { |
| font-family: 'Roboto', sans-serif; |
| } |
| .glow { |
| text-shadow: 0 0 10px rgba(59, 130, 246, 0.7); |
| } |
| </style> |
| </head> |
| <body class="bg-gray-100 min-h-screen flex items-center justify-center p-4"> |
| <div class="bg-white rounded-xl shadow-lg p-6 w-full max-w-md"> |
| <h1 class="text-2xl font-bold text-center text-blue-600 mb-6">Конвертер Юникода в символ</h1> |
| |
| <div class="space-y-4"> |
| <div> |
| <label for="unicode-input" class="block text-sm font-medium text-gray-700 mb-1">Код Юникода (например: U+0410)</label> |
| <div class="relative"> |
| <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none"> |
| <span class="text-gray-500">U+</span> |
| </div> |
| <input |
| type="text" |
| id="unicode-input" |
| class="bg-gray-50 border border-gray-300 text-gray-900 text-lg rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full pl-10 p-3" |
| placeholder="0410" |
| maxlength="6" |
| autocomplete="off" |
| autocapitalize="off" |
| spellcheck="false" |
| > |
| </div> |
| </div> |
| |
| <div class="flex justify-center"> |
| <button id="convert-btn" class="px-6 py-2 bg-blue-600 text-white font-medium rounded-lg hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 transition-colors"> |
| Конвертировать |
| </button> |
| </div> |
| |
| <div class="mt-6"> |
| <p class="text-sm text-gray-500 mb-2">Результат:</p> |
| <div id="result-container" class="border-2 border-dashed border-gray-200 rounded-lg p-6 flex flex-col items-center justify-center min-h-32"> |
| <div id="symbol-display" class="text-7xl glow text-blue-600 mb-2"></div> |
| <div id="code-info" class="text-sm text-gray-500"></div> |
| </div> |
| </div> |
| |
| <div class="mt-4 text-xs text-gray-400"> |
| <p>Введите код в формате U+XXXX (например U+0410 для 'А' или U+1F600 для '😀')</p> |
| </div> |
| </div> |
| </div> |
|
|
| <script> |
| document.addEventListener('DOMContentLoaded', function() { |
| const unicodeInput = document.getElementById('unicode-input'); |
| const convertBtn = document.getElementById('convert-btn'); |
| const symbolDisplay = document.getElementById('symbol-display'); |
| const codeInfo = document.getElementById('code-info'); |
| |
| |
| convertBtn.addEventListener('click', convertUnicode); |
| |
| |
| unicodeInput.addEventListener('keypress', function(e) { |
| if (e.key === 'Enter') { |
| convertUnicode(); |
| } |
| }); |
| |
| |
| unicodeInput.addEventListener('input', function() { |
| |
| this.value = this.value.replace(/[^0-9a-fA-F]/g, ''); |
| |
| |
| if (this.value.length === 4) { |
| convertUnicode(); |
| } |
| }); |
| |
| function convertUnicode() { |
| const hexCode = unicodeInput.value.trim(); |
| |
| if (!hexCode) { |
| showError('Введите код Юникода'); |
| return; |
| } |
| |
| try { |
| const codePoint = parseInt(hexCode, 16); |
| |
| if (isNaN(codePoint)) { |
| showError('Некорректный код Юникода'); |
| return; |
| } |
| |
| |
| if (codePoint < 0 || codePoint > 0x10FFFF) { |
| showError('Код вне диапазона Юникода (0-10FFFF)'); |
| return; |
| } |
| |
| const char = String.fromCodePoint(codePoint); |
| |
| |
| symbolDisplay.textContent = char; |
| codeInfo.textContent = `U+${hexCode.toUpperCase()} (${codePoint})`; |
| |
| |
| symbolDisplay.classList.add('glow'); |
| symbolDisplay.classList.remove('text-red-500'); |
| symbolDisplay.classList.add('text-blue-600'); |
| |
| } catch (e) { |
| showError('Ошибка конвертации'); |
| } |
| } |
| |
| function showError(message) { |
| symbolDisplay.textContent = '❌'; |
| codeInfo.textContent = message; |
| |
| |
| symbolDisplay.classList.remove('glow'); |
| symbolDisplay.classList.remove('text-blue-600'); |
| symbolDisplay.classList.add('text-red-500'); |
| } |
| |
| |
| unicodeInput.value = '0410'; |
| convertUnicode(); |
| }); |
| </script> |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=GalaxyTe/unicode" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
