diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 00000000..ef786de8 Binary files /dev/null and b/.DS_Store differ diff --git "a/\320\233\320\260\320\261\320\276\321\200\320\260\321\202\320\276\321\200\320\275\320\260\321\217 \321\200\320\260\320\261\320\276\321\202\320\260 1/.gitkeep" "b/\320\233\320\260\320\261\320\276\321\200\320\260\321\202\320\276\321\200\320\275\320\260\321\217 \321\200\320\260\320\261\320\276\321\202\320\260 1/.gitkeep" new file mode 100644 index 00000000..8b137891 --- /dev/null +++ "b/\320\233\320\260\320\261\320\276\321\200\320\260\321\202\320\276\321\200\320\275\320\260\321\217 \321\200\320\260\320\261\320\276\321\202\320\260 1/.gitkeep" @@ -0,0 +1 @@ + diff --git "a/\320\233\320\260\320\261\320\276\321\200\320\260\321\202\320\276\321\200\320\275\320\260\321\217 \321\200\320\260\320\261\320\276\321\202\320\260 1/laba1.html" "b/\320\233\320\260\320\261\320\276\321\200\320\260\321\202\320\276\321\200\320\275\320\260\321\217 \321\200\320\260\320\261\320\276\321\202\320\260 1/laba1.html" new file mode 100644 index 00000000..16c0e7c2 --- /dev/null +++ "b/\320\233\320\260\320\261\320\276\321\200\320\260\321\202\320\276\321\200\320\275\320\260\321\217 \321\200\320\260\320\261\320\276\321\202\320\260 1/laba1.html" @@ -0,0 +1,60 @@ + + + + + + Лабораторная работа 1 - Вариант 24 + + + +

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

+

Вариант 24

+

Выполнил: Тягун Андрей

+ + +
+

Задание 1: Текст с форматированием

+
+

JavaScript (аббр. JS) — мультипарадигменный язык программирования. Поддерживает объектно-ориентированный, императивный и функциональный стили. Является реализацией спецификации ECMAScript (стандарт ECMA-262).

+

JavaScript обычно используется как встраиваемый язык для программного доступа к объектам приложений. Наиболее широкое применение находит в браузерах как язык сценариев для придания интерактивности веб-страницам.

+
+
+ + +
+

Задание 2: Наложение изображений

+
+ Изображение 1 + Изображение 2 +
+
+ + +
+

Задание 3: Светофор

+
+
+
+
+
+
+ + +
+

Задание 4: Лабиринт

+
+
+
+
+ +
+
+
+ +
+
+
+
+
+ + diff --git "a/\320\233\320\260\320\261\320\276\321\200\320\260\321\202\320\276\321\200\320\275\320\260\321\217 \321\200\320\260\320\261\320\276\321\202\320\260 1/style.css" "b/\320\233\320\260\320\261\320\276\321\200\320\260\321\202\320\276\321\200\320\275\320\260\321\217 \321\200\320\260\320\261\320\276\321\202\320\260 1/style.css" new file mode 100644 index 00000000..a03cf363 --- /dev/null +++ "b/\320\233\320\260\320\261\320\276\321\200\320\260\321\202\320\276\321\200\320\275\320\260\321\217 \321\200\320\260\320\261\320\276\321\202\320\260 1/style.css" @@ -0,0 +1,117 @@ +body { + font-family: 'Times New Roman', Times, serif; + line-height: 1.6; + margin: 0; + padding: 20px; + background-color: #f5f5f5; +} + +h1 { + text-align: center; + color: #333; + margin-bottom: 10px; +} + +h2 { + color: #444; + border-bottom: 2px solid #ddd; + padding-bottom: 10px; +} + +.task { + background-color: white; + border-radius: 8px; + padding: 20px; + margin-bottom: 30px; + box-shadow: 0 2px 5px rgba(0,0,0,0.1); +} + +.text-block { + background-color: #0259F2; + color: #274A78; + text-align: justify; + padding: 20px; + border: 2px solid #274A78; + border-radius: 5px; + line-height: 1.8; +} + +.image-container { + position: relative; + width: 300px; + height: 300px; + margin: 20px auto; +} + +.image-container__image { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + object-fit: cover; +} + +.image-container__image_type_overlay { + opacity: 0.7; +} + +.traffic-light { + width: 120px; + background-color: #333; + border-radius: 10px; + padding: 20px; + margin: 20px auto; +} + +.traffic-light__light { + width: 80px; + height: 80px; + border-radius: 50%; + margin: 10px auto; +} + +.traffic-light__light_color_red { + background-color: #ff3333; +} + +.traffic-light__light_color_yellow { + background-color: #ffff33; +} + +.traffic-light__light_color_green { + background-color: #33cc33; +} + +.maze { + display: grid; + grid-template-columns: repeat(3, 100px); + grid-template-rows: repeat(3, 100px); + gap: 0; + margin: 20px auto; + width: 300px; +} + +.maze__cell { + display: flex; + align-items: center; + justify-content: center; + font-size: 24px; + background-color: #f0f0f0; +} + +.maze__cell--border_top { + border-top: 3px solid #333; +} + +.maze__cell--border_right { + border-right: 3px solid #333; +} + +.maze__cell--border_bottom { + border-bottom: 3px solid #333; +} + +.maze__cell--border_left { + border-left: 3px solid #333; +} diff --git "a/\320\233\320\260\320\261\320\276\321\200\320\260\321\202\320\276\321\200\320\275\320\260\321\217 \321\200\320\260\320\261\320\276\321\202\320\260 2/.gitkeep" "b/\320\233\320\260\320\261\320\276\321\200\320\260\321\202\320\276\321\200\320\275\320\260\321\217 \321\200\320\260\320\261\320\276\321\202\320\260 2/.gitkeep" new file mode 100644 index 00000000..8b137891 --- /dev/null +++ "b/\320\233\320\260\320\261\320\276\321\200\320\260\321\202\320\276\321\200\320\275\320\260\321\217 \321\200\320\260\320\261\320\276\321\202\320\260 2/.gitkeep" @@ -0,0 +1 @@ + diff --git "a/\320\233\320\260\320\261\320\276\321\200\320\260\321\202\320\276\321\200\320\275\320\260\321\217 \321\200\320\260\320\261\320\276\321\202\320\260 2/laba2.html" "b/\320\233\320\260\320\261\320\276\321\200\320\260\321\202\320\276\321\200\320\275\320\260\321\217 \321\200\320\260\320\261\320\276\321\202\320\260 2/laba2.html" new file mode 100644 index 00000000..0c8d6b18 --- /dev/null +++ "b/\320\233\320\260\320\261\320\276\321\200\320\260\321\202\320\276\321\200\320\275\320\260\321\217 \321\200\320\260\320\261\320\276\321\202\320\260 2/laba2.html" @@ -0,0 +1,96 @@ + + + + + + Лабораторная работа 2 + + + +

Лабораторная работа 2: Вариант 2

+

Выполнил: Тягун Андрей

+ + +
+

Задание 1

+ +
+ + +
+

Задание 2

+
+
+ Родитель 1 +
Ребенок 1
+
Ребенок 2
+
Ребенок 3
+
+ +
+ Родитель 2 +
Ребенок 4
+
Ребенок 5
+
Ребенок 6
+
+ +
+ Родитель 3 +
Ребенок 7
+
Ребенок 8
+
Ребенок 9
+
Ребенок 10
+
+
+
+ + +
+

Задание 3

+
+

Языки программирования — это инструменты, с помощью которых разработчики создают программное обеспечение, веб-приложения, игры, алгоритмы и многое другое. Каждый язык имеет свои особенности, синтаксис и сферу применения. Ниже представлены некоторые из наиболее известных языков:

+ + + +

Это лишь малая часть из множества существующих языков, и выбор зависит от задач, которые нужно решить.

+
+
+ + diff --git "a/\320\233\320\260\320\261\320\276\321\200\320\260\321\202\320\276\321\200\320\275\320\260\321\217 \321\200\320\260\320\261\320\276\321\202\320\260 2/styles.css" "b/\320\233\320\260\320\261\320\276\321\200\320\260\321\202\320\276\321\200\320\275\320\260\321\217 \321\200\320\260\320\261\320\276\321\202\320\260 2/styles.css" new file mode 100644 index 00000000..0c8d6b18 --- /dev/null +++ "b/\320\233\320\260\320\261\320\276\321\200\320\260\321\202\320\276\321\200\320\275\320\260\321\217 \321\200\320\260\320\261\320\276\321\202\320\260 2/styles.css" @@ -0,0 +1,96 @@ + + + + + + Лабораторная работа 2 + + + +

Лабораторная работа 2: Вариант 2

+

Выполнил: Тягун Андрей

+ + +
+

Задание 1

+ +
+ + +
+

Задание 2

+
+
+ Родитель 1 +
Ребенок 1
+
Ребенок 2
+
Ребенок 3
+
+ +
+ Родитель 2 +
Ребенок 4
+
Ребенок 5
+
Ребенок 6
+
+ +
+ Родитель 3 +
Ребенок 7
+
Ребенок 8
+
Ребенок 9
+
Ребенок 10
+
+
+
+ + +
+

Задание 3

+
+

Языки программирования — это инструменты, с помощью которых разработчики создают программное обеспечение, веб-приложения, игры, алгоритмы и многое другое. Каждый язык имеет свои особенности, синтаксис и сферу применения. Ниже представлены некоторые из наиболее известных языков:

+ + + +

Это лишь малая часть из множества существующих языков, и выбор зависит от задач, которые нужно решить.

+
+
+ + diff --git "a/\320\273\320\260\320\261\320\260 4/.DS_Store" "b/\320\273\320\260\320\261\320\260 4/.DS_Store" new file mode 100644 index 00000000..8ff53b45 Binary files /dev/null and "b/\320\273\320\260\320\261\320\260 4/.DS_Store" differ diff --git "a/\320\273\320\260\320\261\320\260 4/lab1/.DS_Store" "b/\320\273\320\260\320\261\320\260 4/lab1/.DS_Store" new file mode 100644 index 00000000..f7af76d1 Binary files /dev/null and "b/\320\273\320\260\320\261\320\260 4/lab1/.DS_Store" differ diff --git "a/\320\273\320\260\320\261\320\260 4/lab1/laba1.html" "b/\320\273\320\260\320\261\320\260 4/lab1/laba1.html" new file mode 100644 index 00000000..3b816b17 --- /dev/null +++ "b/\320\273\320\260\320\261\320\260 4/lab1/laba1.html" @@ -0,0 +1,64 @@ + + + + + + Лабораторная работа 1 - Вариант 24 + + + +

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

+

Вариант 24

+

Выполнил: Тягун Андрей

+ + +
+

Задание 1: Текст с форматированием

+
+

JavaScript (аббр. JS) — мультипарадигменный язык программирования. Поддерживает объектно-ориентированный, императивный и функциональный стили. Является реализацией спецификации ECMAScript (стандарт ECMA-262).

+

JavaScript обычно используется как встраиваемый язык для программного доступа к объектам приложений. Наиболее широкое применение находит в браузерах как язык сценариев для придания интерактивности веб-страницам.

+
+
+ + +
+

Задание 2: Наложение изображений

+
+ Изображение 1 + Изображение 2 +
+
+ + +
+

Задание 3: Светофор

+
+
+
+
+
+
+ + +
+

Задание 4: Лабиринт

+
+
+
+
+ +
+
+
+ +
+
+
+
+
+
+ На главную + Лабораторная работа 2 +
+ + \ No newline at end of file diff --git "a/\320\273\320\260\320\261\320\260 4/lab1/style.css" "b/\320\273\320\260\320\261\320\260 4/lab1/style.css" new file mode 100644 index 00000000..966d18e2 --- /dev/null +++ "b/\320\273\320\260\320\261\320\260 4/lab1/style.css" @@ -0,0 +1,143 @@ +body { + font-family: 'Times New Roman', Times, serif; + line-height: 1.6; + margin: 0; + padding: 20px; + background-color: #f5f5f5; +} + +h1 { + text-align: center; + color: #333; + margin-bottom: 10px; +} + +h2 { + color: #444; + border-bottom: 2px solid #ddd; + padding-bottom: 10px; +} + +.task { + background-color: white; + border-radius: 8px; + padding: 20px; + margin-bottom: 30px; + box-shadow: 0 2px 5px rgba(0,0,0,0.1); +} + +.text-block { + background-color: #0259F2; + color: #274A78; + text-align: justify; + padding: 20px; + border: 2px solid #274A78; + border-radius: 5px; + line-height: 1.8; +} + +.image-container { + position: relative; + width: 300px; + height: 300px; + margin: 20px auto; +} + +.image-container__image { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + object-fit: cover; +} + +.image-container__image_type_overlay { + opacity: 0.7; +} + +.traffic-light { + width: 120px; + background-color: #333; + border-radius: 10px; + padding: 20px; + margin: 20px auto; +} + +.traffic-light__light { + width: 80px; + height: 80px; + border-radius: 50%; + margin: 10px auto; +} + +.traffic-light__light_color_red { + background-color: #ff3333; +} + +.traffic-light__light_color_yellow { + background-color: #ffff33; +} + +.traffic-light__light_color_green { + background-color: #33cc33; +} + +.maze { + display: grid; + grid-template-columns: repeat(3, 100px); + grid-template-rows: repeat(3, 100px); + gap: 0; + margin: 20px auto; + width: 300px; +} + +.maze__cell { + display: flex; + align-items: center; + justify-content: center; + font-size: 24px; + background-color: #f0f0f0; +} + +.maze__cell--border_top { + border-top: 3px solid #333; +} + +.maze__cell--border_right { + border-right: 3px solid #333; +} + +.maze__cell--border_bottom { + border-bottom: 3px solid #333; +} + +.maze__cell--border_left { + border-left: 3px solid #333; +} +.nav-links { + display: flex; + justify-content: center; + gap: 15px; + margin-top: 20px; + flex-wrap: wrap; +} + +.nav-link { + display: inline-block; + padding: 10px 20px; + background: linear-gradient(135deg, #5a000f 0%, #6a0015 100%); + color: #b6ae7f; + text-decoration: none; + border-radius: 5px; + font-family: 'Courier New', monospace; + font-weight: bold; + transition: all 0.3s; + border: 1px solid rgba(182, 174, 127, 0.15); +} + +.nav-link:hover { + background: linear-gradient(135deg, #6a0015 0%, #7a001b 100%); + transform: translateY(-2px); + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); +} \ No newline at end of file diff --git "a/\320\273\320\260\320\261\320\260 4/lab2/laba2.html" "b/\320\273\320\260\320\261\320\260 4/lab2/laba2.html" new file mode 100644 index 00000000..c24878f0 --- /dev/null +++ "b/\320\273\320\260\320\261\320\260 4/lab2/laba2.html" @@ -0,0 +1,102 @@ + + + + + + Лабораторная работа 2 + + + +

Лабораторная работа 2: Вариант 2

+

Выполнил: Тягун Андрей

+ + +
+

Задание 1

+ +
+ + +
+

Задание 2

+
+
+ Родитель 1 +
Ребенок 1
+
Ребенок 2
+
Ребенок 3
+
+ +
+ Родитель 2 +
Ребенок 4
+
Ребенок 5
+
Ребенок 6
+
+ +
+ Родитель 3 +
Ребенок 7
+
Ребенок 8
+
Ребенок 9
+
Ребенок 10
+
+
+
+ + +
+

Задание 3

+
+

Языки программирования — это инструменты, с помощью которых разработчики создают программное обеспечение, веб-приложения, игры, алгоритмы и многое другое. Каждый язык имеет свои особенности, синтаксис и сферу применения. Ниже представлены некоторые из наиболее известных языков:

+ + + +

Это лишь малая часть из множества существующих языков, и выбор зависит от задач, которые нужно решить.

+
+
+ +
+ На главную + Лабораторная работа 1 + Калькулятор (ЛР 4) +
+ + \ No newline at end of file diff --git "a/\320\273\320\260\320\261\320\260 4/lab2/styles.css" "b/\320\273\320\260\320\261\320\260 4/lab2/styles.css" new file mode 100644 index 00000000..a1c78146 --- /dev/null +++ "b/\320\273\320\260\320\261\320\260 4/lab2/styles.css" @@ -0,0 +1,186 @@ +/* Общие стили */ +body { + font-family: 'Times New Roman', Times, serif, sans-serif; + line-height: 1.6; + margin: 0; + padding: 20px; + background-color: #f5f5f5; +} + +h1 { + text-align: center; + color: #333; + margin-bottom: 30px; +} + +h2 { + color: #444; + border-bottom: 2px solid #ddd; + padding-bottom: 10px; +} + +.task { + background-color: white; + border-radius: 8px; + padding: 20px; + margin-bottom: 30px; + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); +} + +/* Задание 1: Анимированный список */ +.animated-list { + list-style-type: none; + padding: 0; +} + +.animated-list__item { + padding: 15px; + margin: 10px 0; + background-color: #e3f2fd; + border-radius: 5px; + border-left: 4px solid #2196f3; + transition: all 0.3s ease; + cursor: pointer; +} + +.animated-list__item:hover { + color: #ff4081; + background-color: #fce4ec; + border-left-color: #ff4081; + transform: translateX(10px); +} + +/* Задание 2: Дети и родители */ +.parents { + display: flex; + gap: 20px; + justify-content: space-between; +} + +.parent { + flex: 1; + padding: 20px; + border: 2px solid #ccc; + border-radius: 8px; + background-color: #f9f9f9; +} + +.parent__child { + padding: 10px; + margin: 5px 0; + border: 1px solid transparent; + border-radius: 4px; + background-color: #fff; +} + +/* Все дети первого родителя - красные */ +.parent__child_origin_parent-1 { + color: red; + background-color: #ffebee; +} + +/* Второй родитель оранжевый */ +.parent_type_2 { + color: orange; + background-color: #fff3e0 !important; +} + +/* Все дети второго родителя - цвета #b4005a с пунктирными границами */ +.parent__child_origin_parent-2 { + color: #b4005a; + border: 2px dashed orange; + background-color: #fce4ec; +} + +/* Третий родитель и его дети зеленые */ +.parent_type_3, +.parent__child_origin_parent-3 { + color: green; + background-color: #e8f5e8; +} + +/* Дети третьего родителя, которые идут после вторых - стандартный цвет */ +.parent_type_2 ~ .parent_type_3 .parent__child_origin_parent-3 { + color: inherit; + background-color: #fff; +} + +/* Дети второго приходят в гости к третьему - фиолетовые без границ */ +.parent_type_3 .parent__child_origin_parent-2 { + color: purple; + border: none; + background-color: #f3e5f5; +} + +/* Задание 3: Языки программирования */ +.programming-text { + line-height: 1.8; +} + +.programming-languages { + list-style-type: none; + padding: 0; +} + +.programming-languages__item { + margin-bottom: 15px; + padding: 10px; + background-color: #f8f9fa; + border-radius: 5px; + position: relative; +} + +/* Ссылки на языки программирования - жирные */ +.programming-languages__link { + font-weight: bold; + color: #1976d2; + text-decoration: none; + transition: color 0.3s ease; +} + +.programming-languages__link:hover { + color: #ff4081; +} + +/* Псевдоэлемент для ссылок - символ 🌐 */ +.programming-languages__link::after { + content: " 🌐"; + font-weight: normal; + font-size: 0.9em; +} + +.programming-languages::after { + content: ""; + display: block; + width: 200px; + height: 60px; + background-image: url("https://ssau.ru/i/logo/logo-white-ru.svg"); + background-size: contain; + background-color: black; +} +.nav-links { + display: flex; + justify-content: center; + gap: 15px; + margin-top: 20px; + flex-wrap: wrap; +} + +.nav-link { + display: inline-block; + padding: 10px 20px; + background: linear-gradient(135deg, #5a000f 0%, #6a0015 100%); + color: #b6ae7f; + text-decoration: none; + border-radius: 5px; + font-family: 'Courier New', monospace; + font-weight: bold; + transition: all 0.3s; + border: 1px solid rgba(182, 174, 127, 0.15); +} + +.nav-link:hover { + background: linear-gradient(135deg, #6a0015 0%, #7a001b 100%); + transform: translateY(-2px); + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); +} \ No newline at end of file diff --git "a/\320\273\320\260\320\261\320\260 4/lab4/calculator.html" "b/\320\273\320\260\320\261\320\260 4/lab4/calculator.html" new file mode 100644 index 00000000..033891fc --- /dev/null +++ "b/\320\273\320\260\320\261\320\260 4/lab4/calculator.html" @@ -0,0 +1,51 @@ + + + + + + Калькулятор - Лабораторная работа 4 + + + +
+

🧮 Калькулятор

+ +
+ + +
+ +
+ + +
+ +
+ + +
+ + + +
+ Результат появится здесь +
+ +
+

Примечание: Калькулятор обрабатывает ошибки деления на ноль и некорректный ввод данных.

+
+ + ← Вернуться на главную страницу +
+ + + + + diff --git "a/\320\273\320\260\320\261\320\260 4/lab4/calculator.js" "b/\320\273\320\260\320\261\320\260 4/lab4/calculator.js" new file mode 100644 index 00000000..786b5ed7 --- /dev/null +++ "b/\320\273\320\260\320\261\320\260 4/lab4/calculator.js" @@ -0,0 +1,64 @@ +// Функция для вычисления результата математической операции +function performCalculation(num1, num2, operation) { + let result; + let operationSymbol; + + // Выполняем выбранную операцию + switch(operation) { + case 'add': + result = num1 + num2; + operationSymbol = '+'; + break; + case 'subtract': + result = num1 - num2; + operationSymbol = '-'; + break; + case 'multiply': + result = num1 * num2; + operationSymbol = '×'; + break; + case 'divide': + if (num2 === 0) { + return { + success: false, + message: "Ошибка: деление на ноль!", + operation: 'divide' + }; + } + result = num1 / num2; + operationSymbol = '÷'; + break; + case 'power': + result = Math.pow(num1, num2); + operationSymbol = '^'; + break; + case 'modulo': + if (num2 === 0) { + return { + success: false, + message: "Ошибка: деление на ноль!", + operation: 'modulo' + }; + } + result = num1 % num2; + operationSymbol = '%'; + break; + default: + return { + success: false, + message: "Неизвестная операция", + operation: 'unknown' + }; + } + + // Округляем результат до 4 знаков после запятой + result = Math.round(result * 10000) / 10000; + + return { + success: true, + result: result, + operationSymbol: operationSymbol, + num1: num1, + num2: num2 + }; +} \ No newline at end of file diff --git "a/\320\273\320\260\320\261\320\260 4/lab4/main.js" "b/\320\273\320\260\320\261\320\260 4/lab4/main.js" new file mode 100644 index 00000000..bc1c5899 --- /dev/null +++ "b/\320\273\320\260\320\261\320\260 4/lab4/main.js" @@ -0,0 +1,67 @@ +document.addEventListener('DOMContentLoaded', function() { + // Получаем элементы DOM + const num1Input = document.getElementById('num1'); + const num2Input = document.getElementById('num2'); + const operationSelect = document.getElementById('operation'); + const calculateBtn = document.getElementById('calculate'); + const resultDiv = document.getElementById('result'); + + // Функция для отображения ошибки + function showError(message) { + resultDiv.innerHTML = `${message}`; + resultDiv.className = "result error"; + } + + // Функция для отображения результата + function showResult(num1, num2, operationSymbol, result) { + const formattedResult = `${num1} ${operationSymbol} ${num2} = ${result}`; + resultDiv.innerHTML = formattedResult; + resultDiv.className = "result success"; + } + + // Функция для выполнения всех вычислений + function calculate() { + // Получаем значения из полей ввода + const num1 = parseFloat(num1Input.value); + const num2 = parseFloat(num2Input.value); + const operation = operationSelect.value; + + // Проверяем, что оба числа являются валидными числами + if (isNaN(num1) || isNaN(num2)) { + showError("Пожалуйста, введите оба числа"); + return; + } + + // Выполняем вычисление через отдельную функцию + const calculation = performCalculation(num1, num2, operation); + + // Обрабатываем результат + if (calculation.success) { + showResult(calculation.num1, calculation.num2, + calculation.operationSymbol, calculation.result); + } else { + showError(calculation.message); + } + } + + // Обработчик события для кнопки "Вычислить" + calculateBtn.addEventListener('click', calculate); + + // Обработчики событий для клавиши Enter + num1Input.addEventListener('keypress', function(e) { + if (e.key === 'Enter') calculate(); + }); + + num2Input.addEventListener('keypress', function(e) { + if (e.key === 'Enter') calculate(); + }); + + // Автозаполнение примерами для демонстрации + window.addEventListener('load', function() { + num1Input.value = "12"; + num2Input.value = "4"; + + // Выполнить автоматический расчет при загрузке + setTimeout(calculate, 100); + }); +}); \ No newline at end of file diff --git "a/\320\273\320\260\320\261\320\260 4/lab4/styles.css" "b/\320\273\320\260\320\261\320\260 4/lab4/styles.css" new file mode 100644 index 00000000..6b31390f --- /dev/null +++ "b/\320\273\320\260\320\261\320\260 4/lab4/styles.css" @@ -0,0 +1,136 @@ +/* ===== СТИЛИ ДЛЯ КАЛЬКУЛЯТОРА (ЛР 4) ===== */ +.calculator { + max-width: 500px; + margin: 40px auto; + padding: 30px; + background: linear-gradient(135deg, #8a0017 0%, #5a000f 100%); + border-radius: 14px; + box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); + color: #b6ae7f; + border: 1px solid rgba(182, 174, 127, 0.15); +} + +.calculator h2 { + text-align: center; + margin-bottom: 30px; + font-size: 2em; + text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); + color: #b6ae7f; +} + +.input-group { + margin-bottom: 20px; +} + +.input-group label { + display: block; + margin-bottom: 8px; + font-weight: bold; + font-size: 1.1em; + color: #b6ae7f; +} + +.input-group input, +.input-group select { + width: 100%; + padding: 12px 15px; + border: 1px solid rgba(182, 174, 127, 0.3); + border-radius: 10px; + font-size: 1.1em; + background-color: rgba(90, 0, 15, 0.7); + color: #b6ae7f; + font-family: 'Courier New', monospace; + box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.2); +} + +.calculate-btn { + width: 100%; + padding: 15px; + background: linear-gradient(135deg, #5a000f 0%, #6a0015 100%); + color: #b6ae7f; + border: 1px solid rgba(182, 174, 127, 0.15); + border-radius: 10px; + font-size: 1.3em; + font-family: 'Courier New', monospace; + font-weight: bold; + cursor: pointer; + margin: 20px 0; + transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35); + text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3); +} + +.calculate-btn:hover { + transform: translateY(-3px); + box-shadow: 0 8px 16px rgba(0, 0, 0, 0.45); + background: linear-gradient(135deg, #6a0015 0%, #7a001b 100%); +} + +.calculate-btn:active { + transform: translateY(-1px); + box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3); +} + +.result { + padding: 20px; + background-color: rgba(90, 0, 15, 0.7); + border-radius: 10px; + margin-top: 20px; + text-align: center; + font-size: 1.2em; + color: #b6ae7f; + min-height: 60px; + display: flex; + align-items: center; + justify-content: center; + box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.2); + border: 1px solid rgba(182, 174, 127, 0.2); + font-family: 'Courier New', monospace; +} + +.error { + background-color: rgba(139, 0, 0, 0.8); + color: #ff9999; +} + +.success { + background-color: rgba(0, 100, 0, 0.7); + color: #99ff99; +} + +.calculator-info { + margin-top: 25px; + padding: 15px; + background-color: rgba(90, 0, 15, 0.5); + border-radius: 10px; + font-size: 0.9em; + border: 1px solid rgba(182, 174, 127, 0.1); +} + +.calculator-info p { + margin: 0; + padding: 0; + font-size: 0.9em; +} + +.back-link { + display: block; + text-align: center; + margin-top: 30px; + color: #b6ae7f; + text-decoration: none; + font-weight: bold; + font-size: 1.1em; + transition: color 0.3s; + text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3); +} + +.back-link:hover { + color: #d4cc9f; + text-decoration: underline; +} + +option { + background-color: #5a000f; + color: #b6ae7f; +} \ No newline at end of file diff --git "a/\320\273\320\260\320\261\320\260 4/main.html" "b/\320\273\320\260\320\261\320\260 4/main.html" new file mode 100644 index 00000000..3975d6b7 --- /dev/null +++ "b/\320\273\320\260\320\261\320\260 4/main.html" @@ -0,0 +1,208 @@ + + + + + + Визитка - Тягун Андрей + + + + +
+
+

Визитка

+

Данная визитка создана студентом Самарского Университета гр. 6211-100503D

+
+ +
+

Вводная информация:

+
+ Мое фото +
+

Тягун Андрей Романович

+

Дата рождения: 30.07.2006

+

Любимые увлечения: автомобили, программирование

+

Ссылка на github:

+ github +
+
+
+ +
+

О себе

+

Меня зовут Андрей, я являюсь студентом группы 6211 прекрасного направления ИБАС. В данной лабораторной работе я реализовал большую часть навыков, полученных в результате изучения предмета "Web".

+
+ +
+

Скиллы

+
+
+

Hard-скиллы

+
    +
  • C++ - Junior
    • +
  • Python - Junior
    • +
  • Web - Junior
    • +
  • C - Junior
    • +
+
+
+

Soft-скиллы

+
    +
  • Коммуникативность
    • +
  • Умение работать в команде
    • +
  • Умение исправлять ошибки
    • +
  • Адекватная реакция на критику
    • +
+
+
+
+ + +
+

Мои проекты

+

Ниже представлены ссылки на лабораторные работы, выполненные в рамках курса "Web":

+ +
+
+

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

+

HTML и CSS: форматирование текста, наложение изображений, создание светофора и лабиринта.

+ Перейти к проекту → +
+ +
+

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

+

CSS анимации, работа с позиционированием, стилизация текста и списков.

+ Перейти к проекту → +
+ +
+

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

+

Создание визитки с использованием HTML и CSS (текущая страница).

+ Перейти к проекту → +
+ +
+

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

+

JavaScript калькулятор с обработкой ошибок и красивым интерфейсом.

+ Открыть калькулятор → +
+
+
+
+ + \ No newline at end of file diff --git "a/\320\273\320\260\320\261\320\260 4/mypic.jpg" "b/\320\273\320\260\320\261\320\260 4/mypic.jpg" new file mode 100644 index 00000000..b45d65a6 Binary files /dev/null and "b/\320\273\320\260\320\261\320\260 4/mypic.jpg" differ diff --git "a/\320\273\320\260\320\261\320\260 4/styles.css" "b/\320\273\320\260\320\261\320\260 4/styles.css" new file mode 100644 index 00000000..d9906e31 --- /dev/null +++ "b/\320\273\320\260\320\261\320\260 4/styles.css" @@ -0,0 +1,311 @@ +/* ===== ОБЩИЕ СТИЛИ ДЛЯ ВСЕХ СТРАНИЦ ===== */ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +html { + box-sizing: border-box; + font-size: 16px; +} + +*, *::before, *::after { + box-sizing: inherit; +} + +body { + background-color: #943e4d; + background-attachment: fixed; + max-width: 1200px; + width: 100%; + margin: 0 auto; + padding: 0 16px 32px; + min-height: 100vh; + font-family: 'Courier New', monospace; + overflow-y: auto; + overflow-x: hidden; +} + +/* ===== ТИПОГРАФИЯ ===== */ +h1, h2 { + text-align: center; + color: #b6ae7f; + text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); + letter-spacing: 1px; + margin: 0 0 1rem 0; +} + +h1 { + font-size: 2.5em; +} + +h2 { + font-size: 1.8em; + border-bottom: 2px solid rgba(182, 174, 127, 0.3); + padding-bottom: 10px; +} + +h3 { + color: #b6ae7f; + text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3); + font-size: 1.1rem; + margin: 0.5rem 0; + padding: 0 1.25rem; +} + +p { + color: #b6ae7f; + font-size: clamp(1rem, 1.2vw + 0.8rem, 1.6rem); + padding: 1.25rem; + margin: 0; + line-height: 1.6; + text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3); +} + +ul { + color: #b6ae7f; + font-size: clamp(0.95rem, 1.1vw + 0.75rem, 1.5rem); + padding: 0 1.25rem 1.25rem 2.75rem; + margin: 0; + line-height: 1.8; + text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3); + list-style: disc; +} + +ul li { + margin-bottom: 0.4rem; +} + +/* ===== СТИЛИ ДЛЯ ВИЗИТКИ (ЛР 3) ===== */ +.name, .block { + background: #8a0017; + border-radius: 14px; + width: 100%; + margin: 28px 0; + padding: 1rem; + box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); + transition: transform 0.3s ease, box-shadow 0.3s ease; + border: 1px solid rgba(255,255,255,0.03); +} + +.block:hover { + transform: translateY(-5px); + box-shadow: 0 12px 24px rgba(0, 0, 0, 0.4); +} + +.header-block { + text-align: center; + background: linear-gradient(135deg, #8a0017 0%, #5a000f 100%); +} + +.content { + display: flex; + align-items: center; + gap: 28px; + padding: 1.25rem; + flex-wrap: wrap; +} + +@media (max-width: 768px) { + .content { + flex-direction: column; + gap: 20px; + } +} + +.content img { + width: 280px; + height: 280px; + border-radius: 12px; + object-fit: cover; + flex-shrink: 0; + box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45); + border: 2px solid #b6ae7f; + transition: transform 0.3s ease; +} + +.content img:hover { + transform: scale(1.02); +} + +.content p { + padding: 0; + margin: 0; + flex: 1; + min-width: 250px; +} + +.button { + background: linear-gradient(135deg, #5a000f 0%, #6a0015 100%); + padding: 12px 28px; + margin: 12px auto; + border-radius: 14px; + color: #b6ae7f; + text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3); + border: 1px solid rgba(182, 174, 127, 0.15); + cursor: pointer; + font-family: 'Courier New', monospace; + font-size: 1.75rem; + font-weight: bold; + transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35); + display: block; + text-decoration: none; + text-align: center; +} + +.button:hover { + transform: translateY(-3px); + box-shadow: 0 8px 16px rgba(0, 0, 0, 0.45); + background: linear-gradient(135deg, #6a0015 0%, #7a001b 100%); +} + +.button:active { + transform: translateY(-1px); + box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3); +} + +/* ===== СТИЛИ ДЛЯ РАЗДЕЛА "МОИ ПРОЕКТЫ" ===== */ +.projects-section { + background: linear-gradient(135deg, #8a0017 0%, #6a0015 100%); + padding: 30px; + border-radius: 14px; + margin-top: 20px; + box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); + border: 1px solid rgba(182, 174, 127, 0.15); +} + +.projects-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); + gap: 20px; + margin-top: 20px; +} + +.project-card { + background-color: rgba(90, 0, 15, 0.8); + border-radius: 10px; + padding: 20px; + box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); + transition: transform 0.3s, box-shadow 0.3s; + border: 1px solid rgba(182, 174, 127, 0.2); + height: 100%; + display: flex; + flex-direction: column; +} + +.project-card:hover { + transform: translateY(-5px); + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3); + background-color: rgba(106, 0, 21, 0.9); +} + +.project-card h3 { + margin-top: 0; + color: #b6ae7f; + border-bottom: 2px solid rgba(182, 174, 127, 0.3); + padding-bottom: 10px; + text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3); +} + +.project-card p { + color: #d4cc9f; + line-height: 1.5; + flex-grow: 1; + margin: 0 0 15px 0; + padding: 0; + font-size: 1rem; +} + +.project-link { + display: inline-block; + margin-top: auto; + padding: 10px 15px; + background: linear-gradient(135deg, #5a000f 0%, #6a0015 100%); + color: #b6ae7f; + text-decoration: none; + border-radius: 5px; + font-family: 'Courier New', monospace; + font-weight: bold; + transition: all 0.3s; + border: 1px solid rgba(182, 174, 127, 0.15); + text-align: center; + text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3); +} + +.project-link:hover { + background: linear-gradient(135deg, #6a0015 0%, #7a001b 100%); + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); + transform: translateY(-2px); + color: #d4cc9f; +} + +.calculator-card { + border-left: 5px solid rgba(0, 150, 255, 0.7); +} + +.container { + max-width: 1200px; + margin: 0 auto; + padding: 0 16px; +} + +.skills-container { + display: flex; + flex-wrap: wrap; + gap: 30px; + justify-content: space-between; +} + +.skills-section { + flex: 1; + min-width: 300px; +} + +.skills-section ul { + list-style-type: none; + padding-left: 20px; +} + +.skills-section li { + padding: 8px 0; + border-bottom: 1px dashed rgba(182, 174, 127, 0.3); + position: relative; +} + +.skills-section li:before { + content: "✓"; + color: #b6ae7f; + font-weight: bold; + position: absolute; + left: -20px; +} + +/* ===== НАВИГАЦИОННЫЕ ССЫЛКИ ===== */ +.nav-links { + display: flex; + justify-content: center; + gap: 15px; + margin-top: 20px; + flex-wrap: wrap; +} + +.nav-link { + display: inline-block; + padding: 10px 20px; + background: linear-gradient(135deg, #5a000f 0%, #6a0015 100%); + color: #b6ae7f; + text-decoration: none; + border-radius: 5px; + font-family: 'Courier New', monospace; + font-weight: bold; + transition: all 0.3s; + border: 1px solid rgba(182, 174, 127, 0.15); +} + +.nav-link:hover { + background: linear-gradient(135deg, #6a0015 0%, #7a001b 100%); + transform: translateY(-2px); + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); +} \ No newline at end of file diff --git "a/\320\273\320\265\320\272\321\206\320\270\320\270/.DS_Store" "b/\320\273\320\265\320\272\321\206\320\270\320\270/.DS_Store" new file mode 100644 index 00000000..8b183696 Binary files /dev/null and "b/\320\273\320\265\320\272\321\206\320\270\320\270/.DS_Store" differ