<div class="calculator">
<div class="input-group">
<input type="number" id="num1" placeholder="Введите число">
<span class="tooltip">Первое число для операции</span>
</div>
<div class="input-group">
<input type="number" id="num2" placeholder="Введите число">
<span class="tooltip">Второе число для операции</span>
</div>
<div class="buttons">
<button title="Сложение">+</button>
<button title="Вычитание">-</button>
<button title="Умножение">×</button>
<button title="Деление">÷</button>
</div>
<button class="equals" title="Вычислить результат">=</button>
<div class="result" id="result">Здесь будет результат</div>
<div class="error-message" id="error"></div>
<noscript>
<div class="error-message">
Для работы калькулятора требуется JavaScript. Пожалуйста, включите его в настройках браузера.
</div>
</noscript>
</div>
<div class="calculator">
<div class="input-group">
<input type="number" id="num1" placeholder="Введите число">
<span class="tooltip">Первое число для операции</span>
</div>
<div class="input-group">
<input type="number" id="num2" placeholder="Введите число">
<span class="tooltip">Второе число для операции</span>
</div>
<div class="buttons">
<button title="Сложение">+</button>
<button title="Вычитание">-</button>
<button title="Умножение">×</button>
<button title="Деление">÷</button>
</div>
<button class="equals" title="Вычислить результат">=</button>
<div class="result" id="result">Здесь будет результат</div>
<div class="error-message" id="error"></div>
<noscript>
<div class="error-message">
Для работы калькулятора требуется JavaScript. Пожалуйста, включите его в настройках браузера.
</div>
</noscript>
</div>
.calculator {
background: white;
border-radius: 20px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
padding: 30px;
width: 320px;
margin: 40px auto;
transition: transform 0.3s ease;
}
.calculator:hover {
transform: translateY(-5px);
}
.input-group {
position: relative;
margin: 15px 0;
}
.input-group input {
width: 100%;
padding: 12px 15px;
border: 2px solid #e0e0e0;
border-radius: 10px;
font-size: 16px;
transition: all 0.3s;
}
.input-group input:focus {
border-color: #6c63ff;
outline: none;
box-shadow: 0 0 0 3px rgba(108, 99, 255, 0.2);
}
.input-group .tooltip {
visibility: hidden;
width: 120px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
transform: translateX(-50%);
opacity: 0;
transition: opacity 0.3s;
}
.input-group:hover .tooltip {
visibility: visible;
opacity: 1;
}
.buttons {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
margin: 20px 0;
}
button {
background: #6c63ff;
color: white;
border: none;
padding: 15px 0;
border-radius: 10px;
font-size: 18px;
cursor: pointer;
transition: all 0.3s;
}
button:hover {
background: #5a52e0;
transform: translateY(-2px);
}
button:active {
transform: translateY(0);
}
.result {
margin-top: 20px;
padding: 15px;
background: #f8f9fa;
border-radius: 10px;
font-size: 18px;
text-align: center;
border: 1px dashed #dee2e6;
min-height: 20px;
}
.error-message {
color: #dc3545;
font-size: 14px;
margin-top: 5px;
display: none;
}
@media (max-width: 400px) {
.calculator {
width: 100%;
padding: 20px;
}
}
.calculator {
background: white;
border-radius: 20px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
padding: 30px;
width: 320px;
margin: 40px auto;
transition: transform 0.3s ease;
}
.calculator:hover {
transform: translateY(-5px);
}
.input-group {
position: relative;
margin: 15px 0;
}
.input-group input {
width: 100%;
padding: 12px 15px;
border: 2px solid #e0e0e0;
border-radius: 10px;
font-size: 16px;
transition: all 0.3s;
}
.input-group input:focus {
border-color: #6c63ff;
outline: none;
box-shadow: 0 0 0 3px rgba(108, 99, 255, 0.2);
}
.input-group .tooltip {
visibility: hidden;
width: 120px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
transform: translateX(-50%);
opacity: 0;
transition: opacity 0.3s;
}
.input-group:hover .tooltip {
visibility: visible;
opacity: 1;
}
.buttons {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
margin: 20px 0;
}
button {
background: #6c63ff;
color: white;
border: none;
padding: 15px 0;
border-radius: 10px;
font-size: 18px;
cursor: pointer;
transition: all 0.3s;
}
button:hover {
background: #5a52e0;
transform: translateY(-2px);
}
button:active {
transform: translateY(0);
}
.result {
margin-top: 20px;
padding: 15px;
background: #f8f9fa;
border-radius: 10px;
font-size: 18px;
text-align: center;
border: 1px dashed #dee2e6;
min-height: 20px;
}
.error-message {
color: #dc3545;
font-size: 14px;
margin-top: 5px;
display: none;
}
@media (max-width: 400px) {
.calculator {
width: 100%;
padding: 20px;
}
}
