104 lines
8.9 KiB
HTML
104 lines
8.9 KiB
HTML
<!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>
|
|
<script src="https://unpkg.com/lucide@latest"></script>
|
|
<link rel="stylesheet" href="../vendor/tailwind.css">
|
|
<link rel="stylesheet" href="style.css">
|
|
</head>
|
|
<body class="bg-gradient-to-br from-blue-50 to-indigo-100 min-h-screen font-sans text-gray-800">
|
|
|
|
<div class="container mx-auto px-4 py-8 max-w-4xl">
|
|
<header class="flex items-center justify-center gap-3 mb-10">
|
|
<div class="bg-indigo-600 p-3 rounded-xl shadow-lg">
|
|
<i data-lucide="calculator" class="w-10 h-10 text-white"></i>
|
|
</div>
|
|
<h1 class="text-4xl font-bold text-indigo-900 tracking-tight">Калькулятор Дробей</h1>
|
|
</header>
|
|
|
|
<div class="bg-white rounded-2xl shadow-xl p-8 border border-gray-100">
|
|
|
|
<div class="flex flex-col md:flex-row items-center justify-center gap-8 mb-10">
|
|
|
|
<div class="fraction-input-group">
|
|
<div class="fraction">
|
|
<input type="number" id="num1" class="fraction-input" placeholder="0">
|
|
<div class="fraction-line"></div>
|
|
<input type="number" id="den1" class="fraction-input" placeholder="1">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="text-2xl text-gray-400 font-bold">и</div>
|
|
|
|
<div class="fraction-input-group">
|
|
<div class="fraction">
|
|
<input type="number" id="num2" class="fraction-input" placeholder="0">
|
|
<div class="fraction-line"></div>
|
|
<input type="number" id="den2" class="fraction-input" placeholder="1">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-10 max-w-2xl mx-auto">
|
|
|
|
<button class="operation-btn" onclick="performOperation('add')" aria-label="Сложить">
|
|
<img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2NCIgaGVpZ2h0PSI2NCIgdmlld0JveD0iMCAwIDY0IDY0Ij48Y2lyY2xlIGN4PSIzMiIgY3k9IjMyIiByPSIzMCIgZmlsbD0iIzRGNDZFNSIvPjxwYXRoIGQ9Ik0zMiAyMHYyNE0yMCAzMmgyNCIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSI0IiBzdHJva2UtbGluZWNhcD0icm91bmQiLz48L3N2Zz4="
|
|
onmouseover="this.src='data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2NCIgaGVpZ2h0PSI2NCIgdmlld0JveD0iMCAwIDY0IDY0Ij48Y2lyY2xlIGN4PSIzMiIgY3k9IjMyIiByPSIzMCIgZmlsbD0iIzEwQjk4MSIvPjxwYXRoIGQ9Ik0zMiAyMHYyNE0yMCAzMmgyNCIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSI0IiBzdHJva2UtbGluZWNhcD0icm91bmQiLz48L3N2Zz4='"
|
|
onmouseout="this.src='data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2NCIgaGVpZ2h0PSI2NCIgdmlld0JveD0iMCAwIDY0IDY0Ij48Y2lyY2xlIGN4PSIzMiIgY3k9IjMyIiByPSIzMCIgZmlsbD0iIzRGNDZFNSIvPjxwYXRoIGQ9Ik0zMiAyMHYyNE0yMCAzMmgyNCIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSI0IiBzdHJva2UtbGluZWNhcD0icm91bmQiLz48L3N2Zz4='"
|
|
class="btn-image" alt="Сложить">
|
|
</button>
|
|
|
|
<button class="operation-btn" onclick="performOperation('subtract')" aria-label="Вычесть">
|
|
<img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2NCIgaGVpZ2h0PSI2NCIgdmlld0JveD0iMCAwIDY0IDY0Ij48Y2lyY2xlIGN4PSIzMiIgY3k9IjMyIiByPSIzMCIgZmlsbD0iIzRGNDZFNSIvPjxwYXRoIGQ9Ik0yMCAzMmgyNCIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSI0IiBzdHJva2UtbGluZWNhcD0icm91bmQiLz48L3N2Zz4="
|
|
onmouseover="this.src='data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2NCIgaGVpZ2h0PSI2NCIgdmlld0JveD0iMCAwIDY0IDY0Ij48Y2lyY2xlIGN4PSIzMiIgY3k9IjMyIiByPSIzMCIgZmlsbD0iIzEwQjk4MSIvPjxwYXRoIGQ9Ik0yMCAzMmgyNCIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSI0IiBzdHJva2UtbGluZWNhcD0icm91bmQiLz48L3N2Zz4='"
|
|
onmouseout="this.src='data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2NCIgaGVpZ2h0PSI2NCIgdmlld0JveD0iMCAwIDY0IDY0Ij48Y2lyY2xlIGN4PSIzMiIgY3k9IjMyIiByPSIzMCIgZmlsbD0iIzRGNDZFNSIvPjxwYXRoIGQ9Ik0yMCAzMmgyNCIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSI0IiBzdHJva2UtbGluZWNhcD0icm91bmQiLz48L3N2Zz4='"
|
|
class="btn-image" alt="Вычесть">
|
|
</button>
|
|
|
|
<button class="operation-btn" onclick="performOperation('multiply')" aria-label="Умножить">
|
|
<img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2NCIgaGVpZ2h0PSI2NCIgdmlld0JveD0iMCAwIDY0IDY0Ij48Y2lyY2xlIGN4PSIzMiIgY3k9IjMyIiByPSIzMCIgZmlsbD0iIzRGNDZFNSIvPjxwYXRoIGQ9Ik0yNCAyNGwxNiAxNk00MCAyNGwtMTYgMTYiIHN0cm9rZT0id2hpdGUiIHN0cm9rZS13aWR0aD0iNCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+PC9zdmc+"
|
|
onmouseover="this.src='data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2NCIgaGVpZ2h0PSI2NCIgdmlld0JveD0iMCAwIDY0IDY0Ij48Y2lyY2xlIGN4PSIzMiIgY3k9IjMyIiByPSIzMCIgZmlsbD0iIzEwQjk4MSIvPjxwYXRoIGQ9Ik0yNCAyNGwxNiAxNk00MCAyNGwtMTYgMTYiIHN0cm9rZT0id2hpdGUiIHN0cm9rZS13aWR0aD0iNCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+PC9zdmc+'"
|
|
onmouseout="this.src='data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2NCIgaGVpZ2h0PSI2NCIgdmlld0JveD0iMCAwIDY0IDY0Ij48Y2lyY2xlIGN4PSIzMiIgY3k9IjMyIiByPSIzMCIgZmlsbD0iIzRGNDZFNSIvPjxwYXRoIGQ9Ik0yNCAyNGwxNiAxNk00MCAyNGwtMTYgMTYiIHN0cm9rZT0id2hpdGUiIHN0cm9rZS13aWR0aD0iNCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+PC9zdmc+'"
|
|
class="btn-image" alt="Умножить">
|
|
</button>
|
|
|
|
<button class="operation-btn" onclick="performOperation('divide')" aria-label="Разделить">
|
|
<img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2NCIgaGVpZ2h0PSI2NCIgdmlld0JveD0iMCAwIDY0IDY0Ij48Y2lyY2xlIGN4PSIzMiIgY3k9IjMyIiByPSIzMCIgZmlsbD0iIzRGNDZFNSIvPjxjaXJjbGUgY3g9IjMyIiBjeT0iMjAiIHI9IjMiIGZpbGw9IndoaXRlIi8+PHBhdGggZD0iTTIwIDMyaDI0IiBzdHJva2U9IndoaXRlIiBzdHJva2Utd2lkdGg9IjQiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPjxjaXJjbGUgY3g9IjMyIiBjeT0iNDQiIHI9IjMiIGZpbGw9IndoaXRlIi8+PC9zdmc+"
|
|
onmouseover="this.src='data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2NCIgaGVpZ2h0PSI2NCIgdmlld0JveD0iMCAwIDY0IDY0Ij48Y2lyY2xlIGN4PSIzMiIgY3k9IjMyIiByPSIzMCIgZmlsbD0iIzEwQjk4MSIvPjxjaXJjbGUgY3g9IjMyIiBjeT0iMjAiIHI9IjMiIGZpbGw9IndoaXRlIi8+PHBhdGggZD0iTTIwIDMyaDI0IiBzdHJva2U9IndoaXRlIiBzdHJva2Utd2lkdGg9IjQiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPjxjaXJjbGUgY3g9IjMyIiBjeT0iNDQiIHI9IjMiIGZpbGw9IndoaXRlIi8+PC9zdmc+'"
|
|
onmouseout="this.src='data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2NCIgaGVpZ2h0PSI2NCIgdmlld0JveD0iMCAwIDY0IDY0Ij48Y2lyY2xlIGN4PSIzMiIgY3k9IjMyIiByPSIzMCIgZmlsbD0iIzRGNDZFNSIvPjxjaXJjbGUgY3g9IjMyIiBjeT0iMjAiIHI9IjMiIGZpbGw9IndoaXRlIi8+PHBhdGggZD0iTTIwIDMyaDI0IiBzdHJva2U9IndoaXRlIiBzdHJva2Utd2lkdGg9IjQiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPjxjaXJjbGUgY3g9IjMyIiBjeT0iNDQiIHI9IjMiIGZpbGw9IndoaXRlIi8+PC9zdmc+'"
|
|
class="btn-image" alt="Разделить">
|
|
</button>
|
|
</div>
|
|
|
|
<div class="result-container bg-gray-50 rounded-xl p-6 text-center border-2 border-dashed border-gray-300">
|
|
<h2 class="text-lg font-semibold text-gray-600 mb-4">Результат:</h2>
|
|
<div id="result-display" class="hidden">
|
|
<div class="fraction-result">
|
|
<span id="result-num" class="fraction-top text-3xl font-bold text-indigo-700">0</span>
|
|
<div class="fraction-line-result"></div>
|
|
<span id="result-den" class="fraction-bottom text-3xl font-bold text-indigo-700">1</span>
|
|
</div>
|
|
</div>
|
|
<p id="result-text" class="text-xl text-gray-700 font-medium hidden"></p>
|
|
<p id="error-message" class="text-red-500 font-semibold hidden"></p>
|
|
<p id="placeholder-text" class="text-gray-400 italic">Нажмите кнопку операции для вычисления</p>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="mt-6 text-center text-sm text-gray-500">
|
|
<p>Введите числители и знаменатели двух дробей и выберите операцию</p>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="script.js"></script>
|
|
<script>
|
|
lucide.createIcons();
|
|
</script>
|
|
<script src="https://deepsite.hf.co/deepsite-badge.js"></script>
|
|
</body>
|
|
</html>
|