diff --git a/lab4.html b/lab4.html new file mode 100644 index 00000000..760811f2 --- /dev/null +++ b/lab4.html @@ -0,0 +1,55 @@ + + + + + + калькулятор + + + + +
+

calculator

+ +
+ + +
+
+ +
+ + +
+
+ +
+ + +
+ + + +
+
Result:
+
—
+
+ +
+
Operation history:
+
+
+ +
+ + + + \ No newline at end of file diff --git a/labweb3/index.html b/labweb3/index.html new file mode 100644 index 00000000..b542ba50 --- /dev/null +++ b/labweb3/index.html @@ -0,0 +1,137 @@ + + + + + + Резюме + + + +
+
+
+ Фото +
+
+

Щукин Ярослав Владимирович

+

Студент Самарского Университета

+
+
+ +
+

Основная информация

+
+
+ Дата рождения: + 23.01.2007 +
+
+ Направление: + Информационная безопасность автоматизированных систем +
+
+
+ +
+

Увлечения

+ +
+ +
+

+ + Hard Skills +

+
+ Пушка Роналду + Высшая математика + Штрафные месси + Обход утильсбор +
+
+ +
+

+ + Soft Skills +

+
+ Роналду + Хорошая память + Трэп + Лихач + месси + Хорошая память +
+
+ +
+

GitHub

+
+ + + YaroslavBonzo + +
+
+ +
+

О себе

+
+

Студент направления ИБАС

+

Работайте братья!

+
+
+ + +
+ + + +
+

+ + Мои проекты +

+
+ +
+
🔐
+
+

Лабораторная работа 1

+

Основы web-base

+ https://github.com/itsecd/web-base/pull/33 +
+
+ + +
+
📱
+
+

Лабораторная работа 4

+

Калькулятор

+ https://github.com/itsecd/web-base/pull/391 +
+
+ +
+
\ No newline at end of file diff --git a/labweb3/style/images.jpg b/labweb3/style/images.jpg new file mode 100644 index 00000000..36af53bc Binary files /dev/null and b/labweb3/style/images.jpg differ diff --git a/labweb3/style/style.css b/labweb3/style/style.css new file mode 100644 index 00000000..d816d1b1 --- /dev/null +++ b/labweb3/style/style.css @@ -0,0 +1,488 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +/* Сброс отступов и включение границ в размер элемента */ +body { + font-family: "Inter", sans-serif; + line-height: 1.6; + background: linear-gradient(135deg, #f0f4ff 0%, #e6e9ff 100%); + min-height: 100vh; + padding: 20px; + color: #1e1b4b; +} + +/* Основной контейнер резюме */ +.resume { + max-width: 800px; + margin: 0 auto; + background: rgba(255, 255, 255, 0.95); + border-radius: 24px; + box-shadow: 0 20px 40px rgba(99, 102, 241, 0.15); + overflow: hidden; + backdrop-filter: blur(10px); + border: 1px solid rgba(99, 102, 241, 0.2); +} + +/* Шапка с градиентом и декором */ +.resume__header { + background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%); + color: white; + padding: 50px 40px; + text-align: center; + position: relative; + overflow: hidden; +} + +/* Точки-узор на фоне шапки */ +.resume__header::before { + content: ""; + position: absolute; + top: -50%; + right: -50%; + width: 100%; + height: 200%; + background: radial-gradient( + circle, + rgba(255, 255, 255, 0.2) 1%, + transparent 1% + ); + background-size: 25px 25px; + transform: rotate(25deg); +} + +/* Контейнер для фото с анимированной рамкой */ +.resume__photo-container { + position: relative; + display: inline-block; + margin-bottom: 25px; +} + +/* Само фото - круглое с белой рамкой */ +.resume__photo { + width: 180px; + height: 180px; + border-radius: 50%; + border: 6px solid rgba(255, 255, 255, 0.9); + object-fit: cover; + box-shadow: 0 15px 35px rgba(79, 70, 229, 0.4); + position: relative; + z-index: 2; + transition: all 0.3s ease; +} + +/* Эффект при наведении на фото */ +.resume__photo:hover { + transform: scale(1.05); + box-shadow: 0 20px 45px rgba(79, 70, 229, 0.6); +} + +/* Вращающаяся градиентная рамка вокруг фото */ +.resume__photo-container::after { + content: ""; + position: absolute; + top: -10px; + left: -10px; + right: -10px; + bottom: -10px; + border-radius: 50%; + background: conic-gradient(from 0deg, #4f46e5, #7c3aed, #4f46e5); + animation: rotate 3s linear infinite; + z-index: 1; + opacity: 0.7; +} + +/* Анимация вращения рамки */ +@keyframes rotate { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } +} + +/* Главный заголовок имени */ +.resume__title { + font-family: "Playfair Display", serif; + font-size: 2.8em; + font-weight: 700; + margin-bottom: 12px; + color: white; + text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); +} + +/* Подзаголовок профессии */ +.resume__subtitle { + font-size: 1.3em; + opacity: 0.9; + color: white; + font-weight: 400; + letter-spacing: 0.5px; +} + +/* Карточка секции (каждый блок информации) */ +.resume__section { + padding: 35px 40px; + position: relative; + background: white; + margin: 15px; + border-radius: 16px; + box-shadow: 0 5px 20px rgba(99, 102, 241, 0.08); + transition: all 0.3s ease; +} + +/* Эффект поднятия секции при наведении */ +.resume__section:hover { + transform: translateY(-3px); + box-shadow: 0 8px 25px rgba(99, 102, 241, 0.12); +} + +/* Заголовок секции с цветной полоской слева */ +.resume__section-title { + color: #4f46e5; + margin-bottom: 25px; + font-size: 1.6em; + font-weight: 700; + display: flex; + align-items: center; + gap: 12px; + font-family: "Playfair Display", serif; + position: relative; +} + +/* Цветная полоска слева от заголовка */ +.resume__section-title::before { + content: ""; + width: 4px; + height: 25px; + background: linear-gradient(135deg, #4f46e5, #7c3aed); + border-radius: 2px; + display: inline-block; +} + +/* Сетка для основной информации (дата рождения, направление) */ + +.info-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); + gap: 20px; +} + +.info-grid__item { + display: flex; + align-items: flex-start; /* Изменено с center на flex-start */ + gap: 15px; + padding: 16px 20px; + background: #e0e7ff; + border-radius: 12px; + transition: all 0.3s ease; + border-left: 4px solid #4f46e5; +} + +@media (max-width: 768px) { + .info-grid { + grid-template-columns: 1fr; + gap: 15px; + } + + .info-grid__item { + flex-direction: column; + align-items: flex-start; + gap: 8px; + padding: 20px; + } + + .info-grid__label { + min-width: auto; + font-size: 0.95em; + color: #4f46e5; + font-weight: 600; + } + + .info-grid__value { + font-size: 1em; + line-height: 1.4; + word-wrap: break-word; + overflow-wrap: break-word; + width: 100%; + } +} + +/* Дополнительно для очень маленьких экранов */ +@media (max-width: 480px) { + .info-grid__item { + padding: 18px 16px; + } + + .info-grid__value { + font-size: 0.95em; + text-align: left; + } +} + +/* Сетка для увлечений */ +.hobbies-list { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); + gap: 15px; + list-style: none; +} + +/* Карточка увлечения */ +.hobbies-list__item { + padding: 18px 20px; + background: #e0e7ff; + border-radius: 12px; + transition: all 0.3s ease; + text-align: center; + font-weight: 500; + color: #3730a3; + border: 2px solid transparent; +} + +/* Эффект при наведении на увлечение */ +.hobbies-list__item:hover { + background: #4f46e5; + color: white; + transform: translateY(-3px); + box-shadow: 0 8px 20px rgba(79, 70, 229, 0.3); + border-color: #7c3aed; +} + +.skills { + display: flex; + flex-wrap: wrap; + gap: 12px; + justify-content: center; +} + +.skills__item { + background: linear-gradient(135deg, #4f46e5, #7c3aed); + color: white; + padding: 10px 20px; + border-radius: 25px; + font-size: 0.95em; + font-weight: 600; + box-shadow: 0 4px 15px rgba(79, 70, 229, 0.3); + transition: all 0.3s ease; + border: 2px solid rgba(255, 255, 255, 0.3); + position: relative; + overflow: hidden; +} + +.skills__item::before { + content: ""; + position: absolute; + top: 0; + left: -100%; + width: 100%; + height: 100%; + background: linear-gradient( + 90deg, + transparent, + rgba(255, 255, 255, 0.2), + transparent + ); + transition: left 0.5s ease; +} + +.skills__item:hover::before { + left: 100%; +} + +.skills__item:hover { + transform: translateY(-3px) scale(1.05); + box-shadow: 0 8px 25px rgba(79, 70, 229, 0.4); +} + +/* Ссылка на GitHub */ +.github__link { + display: inline-flex; + align-items: center; + gap: 15px; + text-decoration: none; + color: #3730a3; + font-size: 1.2em; + padding: 18px 30px; + border: 2px solid #4f46e5; + border-radius: 16px; + transition: all 0.3s ease; + background: rgba(224, 231, 255, 0.7); + box-shadow: 0 6px 20px rgba(79, 70, 229, 0.15); + font-weight: 600; +} + +/* Эффект при наведении на GitHub */ +.github__link:hover { + background: #4f46e5; + color: white; + transform: translateY(-3px) scale(1.02); + box-shadow: 0 12px 30px rgba(79, 70, 229, 0.3); +} + +/* Логотип GitHub */ +.github__logo { + width: 32px; + height: 32px; + filter: brightness(0.8); + transition: all 0.3s ease; +} + +.github__link:hover .github__logo { + filter: brightness(1); +} + +/* Текст в разделе "О себе" */ +.about__text { + margin-bottom: 20px; + font-size: 1.1em; + line-height: 1.8; + color: #3730a3; + text-align: justify; + padding: 0 10px; +} + +/* Футер с контактной информацией */ +.resume__footer { + background: linear-gradient(135deg, #4f46e5, #7c3aed); + color: white; + padding: 30px 40px; + text-align: center; + margin-top: 20px; +} + +/* Контактная информация в футере */ +.resume__contact { + margin: 8px 0; + font-weight: 500; + font-size: 1.1em; + letter-spacing: 0.5px; +} + +/* Стили для блока проектов */ +.projects { + display: flex; + flex-direction: column; + gap: 20px; +} + +.project__link { + text-decoration: none; + color: inherit; + display: block; +} + +.project__card { + background: rgba(224, 231, 255, 0.5); + border: 2px solid rgba(79, 70, 229, 0.2); + border-radius: 16px; + padding: 25px; + display: flex; + align-items: flex-start; + gap: 20px; + transition: all 0.3s ease; + position: relative; + overflow: hidden; +} + +.project__card::before { + content: ''; + position: absolute; + left: 0; + top: 0; + height: 100%; + width: 4px; + background: linear-gradient(180deg, #4f46e5, #7c3aed); + transform: scaleY(0); + transition: transform 0.3s ease; +} + +.project__card:hover { + background: rgba(224, 231, 255, 0.8); + border-color: #4f46e5; + transform: translateX(10px); + box-shadow: 0 10px 30px rgba(79, 70, 229, 0.15); +} + +.project__card:hover::before { + transform: scaleY(1); +} + +.project__icon { + font-size: 2.5em; + background: linear-gradient(135deg, #4f46e5, #7c3aed); + color: white; + width: 60px; + height: 60px; + border-radius: 12px; + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + box-shadow: 0 4px 15px rgba(79, 70, 229, 0.3); +} + +.project__content { + flex: 1; +} + +.project__title { + color: #4f46e5; + font-size: 1.3em; + margin-bottom: 8px; + font-weight: 600; + font-family: 'Playfair Display', serif; +} + +.project__description { + color: #3730a3; + line-height: 1.6; + margin-bottom: 12px; + font-size: 0.95em; +} + +.project__tech { + display: inline-block; + background: rgba(79, 70, 229, 0.1); + color: #4f46e5; + padding: 6px 12px; + border-radius: 20px; + font-size: 0.85em; + font-weight: 500; +} + +/* Адаптивность для проектов */ +@media (max-width: 768px) { + .project__card { + flex-direction: column; + padding: 20px; + gap: 15px; + } + + .project__icon { + width: 50px; + height: 50px; + font-size: 2em; + } + + .project__title { + font-size: 1.2em; + } + + .project__description { + font-size: 0.9em; + } +} + +@media (max-width: 480px) { + .project__card { + padding: 18px 16px; + } + + .project__card:hover { + transform: translateX(5px); + } +} \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 00000000..e6f93a2e --- /dev/null +++ b/script.js @@ -0,0 +1,145 @@ +document.addEventListener('DOMContentLoaded', function() { + const number1Input = document.getElementById('number1'); + const number2Input = document.getElementById('number2'); + const operationSelect = document.getElementById('operation'); + const calculateButton = document.getElementById('calculate'); + const resultElement = document.getElementById('result'); + const error1Element = document.getElementById('error1'); + const error2Element = document.getElementById('error2'); + const historyList = document.getElementById('history-list'); + + let operationsHistory = []; + + function updateHistory() { + historyList.innerHTML = ''; + + if (operationsHistory.length === 0) { + historyList.innerHTML = '
Transaction history is empty
'; + return; + } + + const recentHistory = operationsHistory.slice(-5).reverse(); + + recentHistory.forEach(item => { + const historyItem = document.createElement('div'); + historyItem.className = 'history-item'; + historyItem.textContent = item; + historyList.appendChild(historyItem); + }); + } + + function addToHistory(num1, num2, operation, result) { + let operationSymbol; + switch(operation) { + case 'add': operationSymbol = '+'; break; + case 'subtract': operationSymbol = '-'; break; + case 'multiply': operationSymbol = '×'; break; + case 'divide': operationSymbol = '÷'; break; + default: operationSymbol = '?'; + } + + const historyEntry = `${num1} ${operationSymbol} ${num2} = ${result}`; + operationsHistory.push(historyEntry); + updateHistory(); + } + + function validateInput() { + let isValid = true; + + error1Element.textContent = ''; + error2Element.textContent = ''; + + if (number1Input.value === '') { + error1Element.textContent = 'Please enter the first number'; + isValid = false; + } else if (isNaN(parseFloat(number1Input.value))) { + error1Element.textContent = 'Please enter a valid number'; + isValid = false; + } + + if (number2Input.value === '') { + error2Element.textContent = 'Please enter the second number'; + isValid = false; + } else if (isNaN(parseFloat(number2Input.value))) { + error2Element.textContent = 'Please enter a valid number'; + isValid = false; + } + + if (operationSelect.value === 'divide' && parseFloat(number2Input.value) === 0) { + error2Element.textContent = 'Division by zero is impossible'; + isValid = false; + } + + return isValid; + } + + function calculate() { + if (!validateInput()) { + resultElement.textContent = '—'; + resultElement.style.color = '#ff0000ff'; + return; + } + + const num1 = parseFloat(number1Input.value); + const num2 = parseFloat(number2Input.value); + const operation = operationSelect.value; + + let result; + + switch(operation) { + case 'add': + result = num1 + num2; + break; + case 'subtract': + result = num1 - num2; + break; + case 'multiply': + result = num1 * num2; + break; + case 'divide': + result = num1 / num2; + break; + default: + result = NaN; + } + + if (isNaN(result)) { + resultElement.textContent = 'Calculation error'; + resultElement.style.color = '#e74c3c'; + } else if (!isFinite(result)) { + resultElement.textContent = 'Infinity'; + resultElement.style.color = '#e74c3c'; + } else { + const formattedResult = Math.abs(result) > 1e10 || (Math.abs(result) < 1e-10 && result !== 0) + ? result.toExponential(5) + : parseFloat(result.toFixed(10)).toString(); + + resultElement.textContent = formattedResult; + resultElement.style.color = '#ff0000ff'; + + addToHistory(num1, num2, operation, formattedResult); + } + } + + calculateButton.addEventListener('click', calculate); + + number1Input.addEventListener('keypress', function(e) { + if (e.key === 'Enter') calculate(); + }); + + number2Input.addEventListener('keypress', function(e) { + if (e.key === 'Enter') calculate(); + }); + + operationSelect.addEventListener('change', function() { + if (this.value === 'divide' && parseFloat(number2Input.value) === 0) { + error2Element.textContent = 'Деление на ноль невозможно'; + } else { + error2Element.textContent = ''; + } + }); + + updateHistory(); + + number1Input.focus(); +}); \ No newline at end of file diff --git a/style4.css b/style4.css new file mode 100644 index 00000000..b84fe2b8 --- /dev/null +++ b/style4.css @@ -0,0 +1,402 @@ +* { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +body { + display: flex; + justify-content: center; + align-items: center; + min-height: 100vh; + background: linear-gradient(135deg, #ff6b6b 0%, #4ecdc4 100%); + font-family: 'BBH Sans Bartle', 'Segoe UI', sans-serif; + padding: 20px; + color: #333; + line-height: 1.5; +} + +.calculator-container { + background: rgba(255, 255, 255, 0.95); + backdrop-filter: blur(10px); + border-radius: 24px; + box-shadow: + 0 20px 40px rgba(0, 0, 0, 0.15), + 0 0 0 1px rgba(255, 255, 255, 0.1); + padding: 40px 35px; + width: 100%; + max-width: 480px; + transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.1); + border: 1px solid rgba(255, 255, 255, 0.2); +} + +.calculator-container:hover { + transform: translateY(-8px); + box-shadow: + 0 30px 60px rgba(0, 0, 0, 0.2), + 0 0 0 1px rgba(255, 255, 255, 0.2); +} + +h1 { + text-align: center; + color: #2d3436; + margin-bottom: 35px; + font-weight: 700; + font-size: 2.0rem; + position: relative; + padding-bottom: 15px; + letter-spacing: -0.5px; + line-height: 1.2; +} + +h1::after { + content: ''; + position: absolute; + bottom: 0; + left: 50%; + transform: translateX(-50%); + width: 80px; + height: 4px; + background: linear-gradient(90deg, #ff6b6b, #4ecdc4); + border-radius: 2px; +} + +.input-group { + margin-bottom: 28px; +} + +label { + display: block; + margin-bottom: 10px; + font-weight: 600; + color: #2d3436; + font-size: 1.1rem; + letter-spacing: 0.3px; + line-height: 1.4; +} + +input, select { + width: 100%; + padding: 16px 20px; + border: 2px solid #e0e6ed; + border-radius: 12px; + font-size: 1.05rem; + transition: all 0.3s ease; + background: white; + color: #2d3436; + font-family: inherit; + line-height: 1.5; +} + +input::placeholder { + color: #a0aec0; + opacity: 0.7; +} + +input:hover, select:hover { + border-color: #a0aec0; +} + +input:focus, select:focus { + outline: none; + border-color: #4ecdc4; + box-shadow: 0 0 0 3px rgba(78, 205, 196, 0.1); + transform: translateY(-1px); +} + +.operation-selector { + margin-bottom: 35px; +} + +select { + appearance: none; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%232d3436' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10l-5 5z'/%3E%3C/svg%3E"); + background-repeat: no-repeat; + background-position: right 20px center; + background-size: 16px; + padding-right: 50px; + cursor: pointer; +} + +.calculate-btn { + background: linear-gradient(135deg, #2d3436 0%, #4a5568 100%); + color: white; + border: none; + padding: 18px; + width: 100%; + border-radius: 12px; + font-size: 1.2rem; + font-weight: 700; + cursor: pointer; + transition: all 0.3s ease; + margin-bottom: 30px; + letter-spacing: 0.5px; + position: relative; + overflow: hidden; + line-height: 1.5; +} + +.calculate-btn::before { + content: ''; + position: absolute; + top: 0; + left: -100%; + width: 100%; + height: 100%; + background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); + transition: left 0.7s; +} + +.calculate-btn:hover { + background: linear-gradient(135deg, #ff6b6b 0%, #ff8e8e 100%); + transform: translateY(-3px); + box-shadow: 0 10px 25px rgba(255, 107, 107, 0.3); +} + +.calculate-btn:hover::before { + left: 100%; +} + +.calculate-btn:active { + transform: translateY(0); + box-shadow: 0 5px 15px rgba(255, 107, 107, 0.2); +} + +.result-container { + background: #f8fafc; + border-radius: 16px; + padding: 25px; + text-align: center; + border: 2px dashed #e2e8f0; + min-height: 100px; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + transition: border-color 0.3s ease; + margin-bottom: 30px; +} + +.result-container:hover { + border-color: #4ecdc4; +} + +.result-label { + font-size: 0.95rem; + color: #718096; + margin-bottom: 8px; + text-transform: uppercase; + letter-spacing: 1px; + font-weight: 600; + line-height: 1.4; +} + +.result-value { + font-size: 2.4rem; + font-weight: 700; + color: #2d3436; + word-break: break-all; + line-height: 1.2; + min-height: 45px; + display: flex; + align-items: center; + justify-content: center; + text-align: center; + padding: 0 10px; +} + +.error-message { + color: #e53e3e; + font-weight: 600; + margin-top: 8px; + font-size: 0.9rem; + min-height: 20px; + padding-left: 5px; + display: flex; + align-items: center; + gap: 6px; + line-height: 1.4; +} + +.error-message::before { + content: '⚠'; + font-size: 1rem; +} + +.operations-history { + margin-top: 35px; + padding-top: 25px; + border-top: 2px solid #edf2f7; +} + +.history-title { + font-size: 1.1rem; + color: #2d3436; + margin-bottom: 15px; + font-weight: 700; + display: flex; + align-items: center; + gap: 10px; + line-height: 1.4; +} + +.history-title::before { + content: '📋'; + font-size: 1.2rem; +} + +.history-item { + background: white; + padding: 14px 18px; + margin-bottom: 10px; + border-radius: 10px; + font-size: 1rem; + color: #2d3436; + border-left: 4px solid #4ecdc4; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.03); + transition: all 0.3s ease; + display: flex; + justify-content: space-between; + align-items: center; + line-height: 1.5; +} + +.history-item:hover { + transform: translateX(5px); + box-shadow: 0 6px 12px rgba(0, 0, 0, 0.08); +} + +.history-item::after { + content: '→'; + color: #a0aec0; + font-weight: bold; + font-size: 1.2rem; +} + +.history-empty { + color: #a0aec0; + font-style: italic; + text-align: center; + padding: 30px 20px; + background: #f7fafc; + border-radius: 10px; + border: 2px dashed #e2e8f0; + font-size: 1rem; + line-height: 1.5; +} + +/* Анимация для нового элемента истории */ +@keyframes slideIn { + from { + opacity: 0; + transform: translateX(-20px); + } + to { + opacity: 1; + transform: translateX(0); + } +} + +.history-item { + animation: slideIn 0.4s ease-out; +} + +/* Улучшения для выравнивания текста внутри контейнеров */ +.input-group, +.operation-selector, +.result-container, +.operations-history { + text-align: left; +} + +/* Фиксы для центрирования текста */ +.calculate-btn, +.result-label { + text-align: center; +} + +/* Фикс для длинных текстов */ +input, select, button, .history-item, .result-value { + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; +} + +.result-value { + white-space: normal; + word-wrap: break-word; + overflow-wrap: break-word; +} + +/* Адаптивность */ +@media (max-width: 600px) { + .calculator-container { + padding: 30px 25px; + border-radius: 20px; + } + + h1 { + font-size: 2rem; + margin-bottom: 25px; + padding-bottom: 12px; + } + + input, select { + padding: 14px 18px; + font-size: 1rem; + } + + .calculate-btn { + padding: 16px; + font-size: 1.1rem; + } + + .result-value { + font-size: 2rem; + padding: 0 5px; + } + + body { + padding: 15px; + } + + label { + font-size: 1rem; + } +} + +@media (max-width: 400px) { + .calculator-container { + padding: 25px 20px; + } + + h1 { + font-size: 1.8rem; + } + + .result-value { + font-size: 1.8rem; + } + + .history-item { + padding: 12px 15px; + font-size: 0.95rem; + } +} + +/* Фиксы для вертикального выравнивания */ +input, select, button { + vertical-align: middle; +} + +/* Единый отступ для всех элементов формы */ +.input-group, +.operation-selector, +.calculate-btn, +.result-container, +.operations-history { + margin-left: 0; + margin-right: 0; + padding-left: 0; + padding-right: 0; +} \ No newline at end of file