From 47ab5e85fee6e7da1a26134623833453cc2f11e0 Mon Sep 17 00:00:00 2001 From: Stitsyuk Kirill Date: Sun, 26 Oct 2025 08:50:32 +0400 Subject: [PATCH 1/8] =?UTF-8?q?6212=20=D0=A1=D1=82=D0=B8=D1=86=D1=8E=D0=BA?= =?UTF-8?q?=D0=9A=D0=AE=20=D0=9B=D0=B0=D0=B1.=201,=202?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- lab1/index.html | 66 +++++++++++++++++++++++++++++++++ lab1/vneshka.css | 88 ++++++++++++++++++++++++++++++++++++++++++++ lab2/index.html | 95 ++++++++++++++++++++++++++++++++++++++++++++++++ lab2/vneshka.css | 90 +++++++++++++++++++++++++++++++++++++++++++++ 4 files changed, 339 insertions(+) create mode 100644 lab1/index.html create mode 100644 lab1/vneshka.css create mode 100644 lab2/index.html create mode 100644 lab2/vneshka.css diff --git a/lab1/index.html b/lab1/index.html new file mode 100644 index 00000000..e4bd93ff --- /dev/null +++ b/lab1/index.html @@ -0,0 +1,66 @@ + + + + + Лабораторная работа 1 + + + + + +

Лабораторная работа №1 — Основы HTML и CSS

+ +
+

1. Текст с форматированием

+
+

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

+

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

+
+
+ + +
+

2. Картинки с позиционированием

+
+ + +
+
+ + +
+

3. Светофор

+
+
+
+
+
+
+ + +
+

4. Лабиринт 3×3

+
+
+
+
+ +
+
+
+ +
+
+
+
+
+ + + diff --git a/lab1/vneshka.css b/lab1/vneshka.css new file mode 100644 index 00000000..d64730db --- /dev/null +++ b/lab1/vneshka.css @@ -0,0 +1,88 @@ +body { + font-family: Arial, sans-serif; + background-color: #f7f7f7; + margin: 20px; +} + +h1 { + text-align: center; +} + +.task { + margin-bottom: 40px; +} + +/* --- 1. Текст с форматированием --- */ +.text-block { + background-color: #CF6F21; + border: 2px solid #00838f; + padding: 15px; + text-align: right; + color: #B5FCEE; + border-radius: 10px; +} + +/* --- 2. Картинки с позиционированием --- */ +.image-stack { + position: relative; + width: 1500px; + height: 820px; + margin: 50px; +} + + +.image-stack .big_im { + position: absolute; + width:700px; + height: 400px; + top: 419px; + left: 0px; +} + +.image-stack .small_im { + position: absolute; + width:250; + height:420; + top: 0px; + left: 225px; +} + +/* --- 3. Светофор --- */ +.traffic-light { + width: 100px; + background-color: #333; + padding: 10px; + border-radius: 15px; + margin: 20px auto; +} + +.light { + width: 60px; + height: 60px; + margin: 10px auto; + border-radius: 50%; + border: 2px solid #111; +} + +.red { background-color: red; } +.yellow { background-color: yellow; } +.green { background-color: green; } + +/* --- 4. Лабиринт --- */ +.maze { + display: grid; + grid-template-columns: repeat(3, 80px); + grid-template-rows: repeat(3, 80px); +} + +.cell { + width: 80px; + height: 80px; + box-sizing: border-box; + border: 2px solid transparent; +} + +.top { border-top: 2px solid black; } +.bottom { border-bottom: 2px solid black; } +.left { border-left: 2px solid black; } +.right { border-right: 2px solid black; } diff --git a/lab2/index.html b/lab2/index.html new file mode 100644 index 00000000..2b9b1ed8 --- /dev/null +++ b/lab2/index.html @@ -0,0 +1,95 @@ + + + + + Лабораторная работа 2 + + + + +

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

+ +
+

1. Список

+
+

Популярные видеоигры:

+
    +
  • Minecraft
    • +
  • Fortnite
    • +
  • GTA V
    • +
  • Call of Duty
    • +
  • Among Us
    • +
+
+
+ + +
+

2. Родаки и дети

+
+
+ Parent 1 +
+ child 1 +
child 2 +
child 3 +
child 4 +
+
+ +
+
Parent 3 +
+ child 1 +
child 2
+
+
+ +
+
Parent 2 +
child 1
+
child 2
+
+ +
+
Parent 3 +
+ child 1 +
child 2 +
+
+ child 2 +
+
+ +
+
+ + +
+

3. Список и картинка

+
+

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

+
+
    +
  • Python – высокоуровневый язык с простым синтаксисом, популярный в Data Science, веб-разработке и автоматизации
    • +
  • JavaScript – основной язык для фронтенд-разработки, работает в браузерах и на сервере (Node.js).
    • +
  • Java – объектно-ориентированный язык, широко используется в корпоративных приложениях и Android-разработке.
    • +
  • C++ – мощный язык для системного программирования, игр и высокопроизводительных приложений.
    • +
  • C# – язык от Microsoft, применяется в разработке под Windows, играх (Unity) и веб-приложениях.
    • +
  • Go (Golang) – созданный Google, язык для высоконагруженных сетевых сервисов и облачных технологий.
    • +
  • Ruby – известен благодаря фреймворку Ruby on Rails для веб-разработки.
    • +
  • Swift – язык Apple для разработки под iOS и macOS.
    • +
  • Kotlin – современный язык, официально поддерживаемый для Android-разработки.
    • +
  • Rust – язык системного программирования с акцентом на безопасность и производительность.
    • +
+
+

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

+
+
+ +
+
+ \ No newline at end of file diff --git a/lab2/vneshka.css b/lab2/vneshka.css new file mode 100644 index 00000000..826fe722 --- /dev/null +++ b/lab2/vneshka.css @@ -0,0 +1,90 @@ +body { + font-family: Arial, sans-serif; + background-color: #f7f7f7; + margin: 20px; +} + +h1 { + text-align: center; +} + +h2, h3, h4 { + font-size: 24px; + font-weight: bold; + margin-bottom: 10px; +} + +.task { + margin-bottom: 40px; +} + +.shiny { + transition: color 1.5s ease; +} +.shiny:hover { + color: #00ff59; +} + +a{ + color: inherit; + text-decoration: none; + +} + +a::after{ + content: " 🌐"; +} + +.image { + position: relative; + width: 750px; + height: 375px; + margin: 20px; + overflow: hidden; +} + +.image img { + width: 100%; + height: 100%; + object-fit: cover; + display: block; +} + +.parent1{ + color: inherit; +} + +.parent1 .child { + color: red; +} + +.parent2 { + color: orange; +} +.parent2 .child{ + color: #b4005a; + border: 2px dotted orange; + display: block; + width: fit-content; + border: 2px dotted orange; + margin: 4px 0; + padding: 2px 6px; +} + + +.parent2 + .parent3 { + color: green; +} + +.parent2 + .parent3 .child { + color: green; +} + +.parent1 + .parent3 { + color: black; +} + +.parent3 .child-from-second { + border: none; + color: purple; +} \ No newline at end of file From c23ba90b75ed39a679dbecddbbf0128f3fb8a6b4 Mon Sep 17 00:00:00 2001 From: Stitsyuk Kirill Date: Sun, 26 Oct 2025 20:15:42 +0400 Subject: [PATCH 2/8] =?UTF-8?q?6212=20=D0=A1=D1=82=D0=B8=D1=86=D1=8E=D0=BA?= =?UTF-8?q?=D0=9A=D0=AE=20=D0=9B=D0=B0=D0=B1=20.3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- lab3/index.html | 85 +++++++++++++++++++++++++++++++++++++++ lab3/vneshka.css | 101 +++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 186 insertions(+) create mode 100644 lab3/index.html create mode 100644 lab3/vneshka.css diff --git a/lab3/index.html b/lab3/index.html new file mode 100644 index 00000000..456f9590 --- /dev/null +++ b/lab3/index.html @@ -0,0 +1,85 @@ + + + + + Лабораторная работа 1 + + + + +

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

+ +
+
+ +
+

Ето я, смотрите какой красивый

+
+ +
+
+ Стицюк Кирилл Юрьевич +
+
+ +
+
+ 10.08.2006 +
+
+ +
+
+

Мои увлечения:

+
    +
  • Настолки (особенно ДНД)
    • +
  • Компьютерные игры (особенно игры Bethesda)
    • +
  • Чтение научной фантиастики и фэнтези
    • +
  • Психология
    • +
  • Страйкбол
    • +
  • Стрелковое оружие
    • +
+
+
+ +
+
+

Софт скилы:

+
    +
  • Коммуникабельность
    • +
  • Ответственность
    • +
  • Умение нестандартно взглянуть на ситуацию
    • +
  • Развитый эмоциональный интеллект
    • +
  • Отзывчивость
    • +
+
+
+

Хард скилы:

+
    +
  • C/C++, Python
    • +
  • HTML, CSS, JS
    • +
  • GitHub, Git, Linux
    • +
  • Английский язык(С2)
    • +
  • Авиастроение
    • +
+
+
+ +
+
+ Мой гитхаб: RangerOfNCR +
+
+ +
+
+

+ Учусь в Самарском Университете на информационную безопасность автоматизированных систем. + Увлекаюсь программированием и информационной безопасностью. Имею опыт работы с HTML, CSS и JavaScript, а также C/C++ и Python. + В свободное время занимаюсь разными интресными штуками (настолки, страйкбол, книги читаю), а также учу языки и занимаюсь спортом. +

+
+
+ + + \ No newline at end of file diff --git a/lab3/vneshka.css b/lab3/vneshka.css new file mode 100644 index 00000000..55ec9757 --- /dev/null +++ b/lab3/vneshka.css @@ -0,0 +1,101 @@ +body { + font-family: "Segoe UI", Roboto, Arial, sans-serif; + background: linear-gradient(135deg, #e3f2fd, #f8f9fa); + margin: 0; + padding: 40px 20px; + color: #333; + line-height: 1.6; +} + +h1 { + text-align: center; + color: #1565c0; + font-size: 2.2em; + margin-bottom: 40px; + text-shadow: 1px 1px 2px rgba(0,0,0,0.1); +} + +.task { + background: #ffffff; + border-radius: 16px; + box-shadow: 0 4px 15px rgba(0,0,0,0.08); + padding: 25px 30px; + margin: 30px auto; + max-width: 700px; + transition: transform 0.2s ease, box-shadow 0.2s ease; +} + +.task:hover { + transform: translateY(-3px); + box-shadow: 0 6px 20px rgba(0,0,0,0.12); +} + + +.image { + display: flex; + flex-direction: column; + align-items: center; +} + +.image img { + width: 300px; + height: 300px; + object-fit: cover; + border: 5px solid #2196f3; + box-shadow: 0 4px 12px rgba(0,0,0,0.1); + transition: transform 0.3s ease; +} + +.image img:hover { + transform: scale(1.05); +} + +.image + p { + text-align: center; + margin-top: 10px; + font-weight: 500; +} + +.list p { + font-weight: 600; + color: #0d47a1; + margin-bottom: 8px; +} + +ul { + list-style-type: "✨ "; + padding-left: 20px; +} + +.task .list { + margin-bottom: 20px; +} + +.link { + text-align: center; + font-size: 1.1em; +} + +.link a { + color: #1565c0; + text-decoration: none; + font-weight: 600; + transition: color 0.2s ease; +} + +.link a:hover { + color: #0d47a1; + text-decoration: underline; +} + +.text p { + text-align: justify; + font-size: 1.05em; +} + +.FIO, .Birth_date { + text-align: center; + font-size: 1.2em; + font-weight: 500; + color: #333; +} From c33524908ee9056cc05debdefe8d79b9eda25ee0 Mon Sep 17 00:00:00 2001 From: Stitsyuk Kirill Date: Mon, 27 Oct 2025 13:31:27 +0400 Subject: [PATCH 3/8] =?UTF-8?q?=D0=98=D1=81=D0=BF=D1=80=D0=B0=D0=B2=D0=B8?= =?UTF-8?q?=D0=BB.=20=D0=9D=D0=B0=D0=B4=D0=B5=D1=8E=D1=81=D1=8C.=20=D0=9A?= =?UTF-8?q?=D0=BE=D0=BC=D0=BC=D0=B8=D1=82=20=D0=BD=D0=B5=20=D1=85=D0=BE?= =?UTF-8?q?=D1=87=D0=B5=D1=82=20=D0=BD=D0=B0=20=D0=B3=D0=B8=D1=82=20=D0=BE?= =?UTF-8?q?=D1=82=D0=BF=D1=80=D0=B0=D0=B2=D0=BB=D1=8F=D1=82=D1=8C=D1=81?= =?UTF-8?q?=D1=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- lab1/index.html | 41 +++++++++++++++++++++-------------------- lab1/vneshka.css | 29 ++++++++++++++--------------- 2 files changed, 35 insertions(+), 35 deletions(-) diff --git a/lab1/index.html b/lab1/index.html index e4bd93ff..58580baf 100644 --- a/lab1/index.html +++ b/lab1/index.html @@ -9,7 +9,8 @@

Лабораторная работа №1 — Основы HTML и CSS

- + +

1. Текст с форматированием

@@ -25,40 +26,40 @@

1. Текст с форматированием

- +

2. Картинки с позиционированием

- - + +
- -
+ +

3. Светофор

-
-
-
+
+
+
- -
+ +

4. Лабиринт 3×3

-
-
-
+
+
+
-
-
-
+
+
+
-
-
-
+
+
+
diff --git a/lab1/vneshka.css b/lab1/vneshka.css index d64730db..d04f5f84 100644 --- a/lab1/vneshka.css +++ b/lab1/vneshka.css @@ -30,19 +30,18 @@ h1 { margin: 50px; } - -.image-stack .big_im { +.image-stack__big { position: absolute; - width:700px; + width: 700px; height: 400px; top: 419px; left: 0px; } -.image-stack .small_im { +.image-stack__small { position: absolute; - width:250; - height:420; + width: 250px; + height: 420px; top: 0px; left: 225px; } @@ -56,7 +55,7 @@ h1 { margin: 20px auto; } -.light { +.traffic-light__light { width: 60px; height: 60px; margin: 10px auto; @@ -64,9 +63,9 @@ h1 { border: 2px solid #111; } -.red { background-color: red; } -.yellow { background-color: yellow; } -.green { background-color: green; } +.traffic-light__light_red { background-color: red; } +.traffic-light__light_yellow { background-color: yellow; } +.traffic-light__light_green { background-color: green; } /* --- 4. Лабиринт --- */ .maze { @@ -75,14 +74,14 @@ h1 { grid-template-rows: repeat(3, 80px); } -.cell { +.maze__cell { width: 80px; height: 80px; box-sizing: border-box; border: 2px solid transparent; } -.top { border-top: 2px solid black; } -.bottom { border-bottom: 2px solid black; } -.left { border-left: 2px solid black; } -.right { border-right: 2px solid black; } +.maze__cell_top { border-top: 2px solid black; } +.maze__cell_bottom { border-bottom: 2px solid black; } +.maze__cell_left { border-left: 2px solid black; } +.maze__cell_right { border-right: 2px solid black; } From 291807799060e6ff2ffc59720374cb53f1166eec Mon Sep 17 00:00:00 2001 From: Stitsyuk Kirill Date: Mon, 15 Dec 2025 10:24:16 +0400 Subject: [PATCH 4/8] =?UTF-8?q?=D0=9F=D1=80=D0=B8=D0=BC=D0=B5=D0=BD=D0=B8?= =?UTF-8?q?=D0=BB=20=D0=B2=D1=81=D0=B5=20=D1=82=D1=80=D0=B5=D0=B1=D1=83?= =?UTF-8?q?=D0=B5=D0=BC=D1=8B=D0=B5=20=D0=BF=D1=80=D0=B0=D0=B2=D0=BA=D0=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- lab2/index.html | 53 +++++++++++---------------- lab2/vneshka.css | 95 +++++++++++++++++++++++++++++++----------------- 2 files changed, 84 insertions(+), 64 deletions(-) diff --git a/lab2/index.html b/lab2/index.html index 2b9b1ed8..efa8ee92 100644 --- a/lab2/index.html +++ b/lab2/index.html @@ -26,42 +26,35 @@

1. Список

2. Родаки и дети

-
-
+
+
Parent 1 -
- child 1 -
child 2 -
child 3 -
child 4 -
+
child 1
+
child 2
+
child 3
+
child 4
-
-
Parent 3 -
- child 1 -
child 2
-
+
+ Parent 3 +
child 1
+
child 2
-
-
Parent 2 -
child 1
-
child 2
+
+ Parent 2 +
child 1
+
child 2
-
-
Parent 3 -
- child 1 -
child 2 -
-
+
+ Parent 3 +
child 1
+
child 2
+
child 2
-
@@ -72,7 +65,7 @@

3. Список и картинка

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

-
+
  • Python – высокоуровневый язык с простым синтаксисом, популярный в Data Science, веб-разработке и автоматизации
  • JavaScript – основной язык для фронтенд-разработки, работает в браузерах и на сервере (Node.js).
    • @@ -88,8 +81,6 @@

    3. Список и картинка

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

-
- -
- \ No newline at end of file + + \ No newline at end of file diff --git a/lab2/vneshka.css b/lab2/vneshka.css index 826fe722..f68deb0b 100644 --- a/lab2/vneshka.css +++ b/lab2/vneshka.css @@ -28,63 +28,92 @@ h2, h3, h4 { a{ color: inherit; text-decoration: none; - } a::after{ content: " 🌐"; } -.image { - position: relative; - width: 750px; - height: 375px; - margin: 20px; - overflow: hidden; +/* Задание 2 - Родители и дети */ +.parents-and-kids { + margin: 20px 0; } -.image img { - width: 100%; - height: 100%; - object-fit: cover; - display: block; +.parent { + margin: 15px 0; + padding: 10px; } -.parent1{ - color: inherit; +.parent__child { + margin: 5px 0; + padding: 5px; } -.parent1 .child { - color: red; +/* Родитель 1 */ +.parent_1 { + color: inherit; } -.parent2 { - color: orange; -} -.parent2 .child{ - color: #b4005a; - border: 2px dotted orange; - display: block; - width: fit-content; - border: 2px dotted orange; - margin: 4px 0; - padding: 2px 6px; +.parent__child_origin_parent-1 { + color: red; } +/* Родитель 2 */ +.parent_2 { + color: orange; +} -.parent2 + .parent3 { - color: green; +.parent__child_origin_parent-2 { + color: #b4005a; + border: 2px dotted orange; + display: block; + width: fit-content; + margin: 4px 0; + padding: 2px 6px; } -.parent2 + .parent3 .child { +/* Родитель 3 после второго родителя */ +.parent_3--after-second { color: green; } -.parent1 + .parent3 { - color: black; +.parent_3--after-second .parent__child_origin_parent-3 { + color: green; } -.parent3 .child-from-second { +/* Убираем рамку у child 2 в parent 3 */ +.parent_3 .parent__child_origin_parent-2 { border: none; color: purple; +} + +/* Родитель 3 после первого родителя */ +.parent_1 + .parent_3:not(.parent_3--after-second) { + color: black; +} + +.parent_1 + .parent_3:not(.parent_3--after-second) .parent__child_origin_parent-3 { + color: black; +} + +/* Задание 3 - Список языков */ +.languages-list { + padding-right: 0; +} + + +.text p:last-child::after { + content: ""; + display: block; + width: 400px; + height: 200px; + margin: 30px auto; + background-image: url("https://ssau.ru/i/logo/logo-white-ru.svg"); + background-repeat: no-repeat; + background-size: contain; + background-position: center; + background-color: #0056b3; + border-radius: 8px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); + padding: 30px; } \ No newline at end of file From 49712d77ce6ad8e3d356fd8234c3d8e8fbbd1663 Mon Sep 17 00:00:00 2001 From: Stitsyuk Kirill 6212 <96769183+RangerOfNCR@users.noreply.github.com> Date: Mon, 15 Dec 2025 10:56:41 +0400 Subject: [PATCH 5/8] Delete lab3 directory --- lab3/index.html | 85 --------------------------------------- lab3/vneshka.css | 101 ----------------------------------------------- 2 files changed, 186 deletions(-) delete mode 100644 lab3/index.html delete mode 100644 lab3/vneshka.css diff --git a/lab3/index.html b/lab3/index.html deleted file mode 100644 index 456f9590..00000000 --- a/lab3/index.html +++ /dev/null @@ -1,85 +0,0 @@ - - - - - Лабораторная работа 1 - - - - -

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

- -
-
- -
-

Ето я, смотрите какой красивый

-
- -
-
- Стицюк Кирилл Юрьевич -
-
- -
-
- 10.08.2006 -
-
- -
-
-

Мои увлечения:

-
    -
  • Настолки (особенно ДНД)
    • -
  • Компьютерные игры (особенно игры Bethesda)
    • -
  • Чтение научной фантиастики и фэнтези
    • -
  • Психология
    • -
  • Страйкбол
    • -
  • Стрелковое оружие
    • -
-
-
- -
-
-

Софт скилы:

-
    -
  • Коммуникабельность
    • -
  • Ответственность
    • -
  • Умение нестандартно взглянуть на ситуацию
    • -
  • Развитый эмоциональный интеллект
    • -
  • Отзывчивость
    • -
-
-
-

Хард скилы:

-
    -
  • C/C++, Python
    • -
  • HTML, CSS, JS
    • -
  • GitHub, Git, Linux
    • -
  • Английский язык(С2)
    • -
  • Авиастроение
    • -
-
-
- -
-
- Мой гитхаб: RangerOfNCR -
-
- -
-
-

- Учусь в Самарском Университете на информационную безопасность автоматизированных систем. - Увлекаюсь программированием и информационной безопасностью. Имею опыт работы с HTML, CSS и JavaScript, а также C/C++ и Python. - В свободное время занимаюсь разными интресными штуками (настолки, страйкбол, книги читаю), а также учу языки и занимаюсь спортом. -

-
-
- - - \ No newline at end of file diff --git a/lab3/vneshka.css b/lab3/vneshka.css deleted file mode 100644 index 55ec9757..00000000 --- a/lab3/vneshka.css +++ /dev/null @@ -1,101 +0,0 @@ -body { - font-family: "Segoe UI", Roboto, Arial, sans-serif; - background: linear-gradient(135deg, #e3f2fd, #f8f9fa); - margin: 0; - padding: 40px 20px; - color: #333; - line-height: 1.6; -} - -h1 { - text-align: center; - color: #1565c0; - font-size: 2.2em; - margin-bottom: 40px; - text-shadow: 1px 1px 2px rgba(0,0,0,0.1); -} - -.task { - background: #ffffff; - border-radius: 16px; - box-shadow: 0 4px 15px rgba(0,0,0,0.08); - padding: 25px 30px; - margin: 30px auto; - max-width: 700px; - transition: transform 0.2s ease, box-shadow 0.2s ease; -} - -.task:hover { - transform: translateY(-3px); - box-shadow: 0 6px 20px rgba(0,0,0,0.12); -} - - -.image { - display: flex; - flex-direction: column; - align-items: center; -} - -.image img { - width: 300px; - height: 300px; - object-fit: cover; - border: 5px solid #2196f3; - box-shadow: 0 4px 12px rgba(0,0,0,0.1); - transition: transform 0.3s ease; -} - -.image img:hover { - transform: scale(1.05); -} - -.image + p { - text-align: center; - margin-top: 10px; - font-weight: 500; -} - -.list p { - font-weight: 600; - color: #0d47a1; - margin-bottom: 8px; -} - -ul { - list-style-type: "✨ "; - padding-left: 20px; -} - -.task .list { - margin-bottom: 20px; -} - -.link { - text-align: center; - font-size: 1.1em; -} - -.link a { - color: #1565c0; - text-decoration: none; - font-weight: 600; - transition: color 0.2s ease; -} - -.link a:hover { - color: #0d47a1; - text-decoration: underline; -} - -.text p { - text-align: justify; - font-size: 1.05em; -} - -.FIO, .Birth_date { - text-align: center; - font-size: 1.2em; - font-weight: 500; - color: #333; -} From f1fed78d65345a19176ce105a9939faa8b5d9926 Mon Sep 17 00:00:00 2001 From: Stitsyuk Kirill Date: Mon, 15 Dec 2025 11:06:01 +0400 Subject: [PATCH 6/8] =?UTF-8?q?=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=B8=D0=BB?= =?UTF-8?q?=20=D1=84=D0=B0=D0=B9=D0=BB=D1=8B=20=D0=B4=D0=BB=D1=8F=203?= =?UTF-8?q?=D0=B9=20=D0=BB=D0=B0=D0=B1=D0=BE=D1=80=D0=B0=D1=82=D1=80=D0=BE?= =?UTF-8?q?=D0=BD=D0=BE=D0=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- lab3/index.html | 85 +++++++++++++++++++++++++++++++++++++++ lab3/vneshka.css | 101 +++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 186 insertions(+) create mode 100644 lab3/index.html create mode 100644 lab3/vneshka.css diff --git a/lab3/index.html b/lab3/index.html new file mode 100644 index 00000000..456f9590 --- /dev/null +++ b/lab3/index.html @@ -0,0 +1,85 @@ + + + + + Лабораторная работа 1 + + + + +

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

+ +
+
+ +
+

Ето я, смотрите какой красивый

+
+ +
+
+ Стицюк Кирилл Юрьевич +
+
+ +
+
+ 10.08.2006 +
+
+ +
+
+

Мои увлечения:

+
    +
  • Настолки (особенно ДНД)
    • +
  • Компьютерные игры (особенно игры Bethesda)
    • +
  • Чтение научной фантиастики и фэнтези
    • +
  • Психология
    • +
  • Страйкбол
    • +
  • Стрелковое оружие
    • +
+
+
+ +
+
+

Софт скилы:

+
    +
  • Коммуникабельность
    • +
  • Ответственность
    • +
  • Умение нестандартно взглянуть на ситуацию
    • +
  • Развитый эмоциональный интеллект
    • +
  • Отзывчивость
    • +
+
+
+

Хард скилы:

+
    +
  • C/C++, Python
    • +
  • HTML, CSS, JS
    • +
  • GitHub, Git, Linux
    • +
  • Английский язык(С2)
    • +
  • Авиастроение
    • +
+
+
+ +
+
+ Мой гитхаб: RangerOfNCR +
+
+ +
+
+

+ Учусь в Самарском Университете на информационную безопасность автоматизированных систем. + Увлекаюсь программированием и информационной безопасностью. Имею опыт работы с HTML, CSS и JavaScript, а также C/C++ и Python. + В свободное время занимаюсь разными интресными штуками (настолки, страйкбол, книги читаю), а также учу языки и занимаюсь спортом. +

+
+
+ + + \ No newline at end of file diff --git a/lab3/vneshka.css b/lab3/vneshka.css new file mode 100644 index 00000000..55ec9757 --- /dev/null +++ b/lab3/vneshka.css @@ -0,0 +1,101 @@ +body { + font-family: "Segoe UI", Roboto, Arial, sans-serif; + background: linear-gradient(135deg, #e3f2fd, #f8f9fa); + margin: 0; + padding: 40px 20px; + color: #333; + line-height: 1.6; +} + +h1 { + text-align: center; + color: #1565c0; + font-size: 2.2em; + margin-bottom: 40px; + text-shadow: 1px 1px 2px rgba(0,0,0,0.1); +} + +.task { + background: #ffffff; + border-radius: 16px; + box-shadow: 0 4px 15px rgba(0,0,0,0.08); + padding: 25px 30px; + margin: 30px auto; + max-width: 700px; + transition: transform 0.2s ease, box-shadow 0.2s ease; +} + +.task:hover { + transform: translateY(-3px); + box-shadow: 0 6px 20px rgba(0,0,0,0.12); +} + + +.image { + display: flex; + flex-direction: column; + align-items: center; +} + +.image img { + width: 300px; + height: 300px; + object-fit: cover; + border: 5px solid #2196f3; + box-shadow: 0 4px 12px rgba(0,0,0,0.1); + transition: transform 0.3s ease; +} + +.image img:hover { + transform: scale(1.05); +} + +.image + p { + text-align: center; + margin-top: 10px; + font-weight: 500; +} + +.list p { + font-weight: 600; + color: #0d47a1; + margin-bottom: 8px; +} + +ul { + list-style-type: "✨ "; + padding-left: 20px; +} + +.task .list { + margin-bottom: 20px; +} + +.link { + text-align: center; + font-size: 1.1em; +} + +.link a { + color: #1565c0; + text-decoration: none; + font-weight: 600; + transition: color 0.2s ease; +} + +.link a:hover { + color: #0d47a1; + text-decoration: underline; +} + +.text p { + text-align: justify; + font-size: 1.05em; +} + +.FIO, .Birth_date { + text-align: center; + font-size: 1.2em; + font-weight: 500; + color: #333; +} From c89e54f8a6fdc4a44d293e595db5d36a974eb35d Mon Sep 17 00:00:00 2001 From: Stitsyuk Kirill Date: Wed, 17 Dec 2025 09:25:11 +0400 Subject: [PATCH 7/8] =?UTF-8?q?feat:=20=D0=B4=D0=BE=D0=B1=D0=B0=D0=B2?= =?UTF-8?q?=D0=B8=D0=BB=20=D1=84=D0=B0=D0=B9=D0=BB=D1=8B=204=D0=B9=20?= =?UTF-8?q?=D0=BB=D0=B0=D0=B1=D0=BE=D1=80=D0=B0=D1=82=D0=BE=D1=80=D0=BD?= =?UTF-8?q?=D0=BE=D0=B9=20=D1=80=D0=B0=D0=B1=D0=BE=D1=82=D1=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- lab4/calculator.css | 285 +++++++++++++++++++++++++++++++++++++++++++ lab4/calculator.html | 89 ++++++++++++++ lab4/calculator.js | 193 +++++++++++++++++++++++++++++ lab4/index.html | 142 +++++++++++++++++++++ lab4/lab1.css | 87 +++++++++++++ lab4/lab1.html | 67 ++++++++++ lab4/lab2.css | 118 ++++++++++++++++++ lab4/lab2.html | 86 +++++++++++++ lab4/vneshka.css | 199 ++++++++++++++++++++++++++++++ 9 files changed, 1266 insertions(+) create mode 100644 lab4/calculator.css create mode 100644 lab4/calculator.html create mode 100644 lab4/calculator.js create mode 100644 lab4/index.html create mode 100644 lab4/lab1.css create mode 100644 lab4/lab1.html create mode 100644 lab4/lab2.css create mode 100644 lab4/lab2.html create mode 100644 lab4/vneshka.css diff --git a/lab4/calculator.css b/lab4/calculator.css new file mode 100644 index 00000000..680036c6 --- /dev/null +++ b/lab4/calculator.css @@ -0,0 +1,285 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; + background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%); + min-height: 100vh; + display: flex; + justify-content: center; + align-items: center; + padding: 20px; +} + +.calculator-container { + width: 100%; + max-width: 900px; + background: rgba(255, 255, 255, 0.95); + border-radius: 24px; + box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2); + overflow: hidden; + animation: fadeIn 0.5s ease; +} + +@keyframes fadeIn { + from { opacity: 0; transform: translateY(20px); } + to { opacity: 1; transform: translateY(0); } +} + +.calculator-header { + background: linear-gradient(135deg, #2c3e50, #4a6491); + color: white; + padding: 30px; + text-align: center; + border-bottom: 4px solid #3498db; +} + +.calculator-header h1 { + font-size: 2.5rem; + margin-bottom: 10px; + display: flex; + align-items: center; + justify-content: center; + gap: 15px; +} + +.subtitle { + font-size: 1.1rem; + opacity: 0.9; +} + +.calculator-main { + padding: 30px; + display: grid; + grid-template-columns: 2fr 1fr; + gap: 30px; +} + +.calculator-card { + background: white; + border-radius: 16px; + padding: 30px; + box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); +} + +.input-group { + display: grid; + grid-template-columns: 1fr auto 1fr; + gap: 20px; + margin-bottom: 30px; + align-items: end; +} + +.input-wrapper, .operation-wrapper { + display: flex; + flex-direction: column; + gap: 8px; +} + +label { + font-weight: 600; + color: #2c3e50; + display: flex; + align-items: center; + gap: 8px; +} + +input, select { + padding: 14px; + border: 2px solid #e0e0e0; + border-radius: 10px; + font-size: 1.1rem; + transition: all 0.3s; + background: white; +} + +input:focus, select:focus { + outline: none; + border-color: #3498db; + box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2); +} + +select { + cursor: pointer; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%232c3e50' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E"); + background-repeat: no-repeat; + background-position: right 15px center; + background-size: 12px; + padding-right: 40px; +} + +.button-group { + display: flex; + gap: 15px; + margin-bottom: 30px; +} + +button { + padding: 16px 30px; + border: none; + border-radius: 10px; + font-size: 1.1rem; + font-weight: 600; + cursor: pointer; + transition: all 0.3s; + display: flex; + align-items: center; + justify-content: center; + gap: 10px; + flex: 1; +} + +.btn-calculate { + background: linear-gradient(135deg, #00b09b, #96c93d); + color: white; +} + +.btn-calculate:hover { + transform: translateY(-3px); + box-shadow: 0 7px 14px rgba(0, 176, 155, 0.3); +} + +.btn-reset { + background: linear-gradient(135deg, #ff416c, #ff4b2b); + color: white; +} + +.btn-reset:hover { + transform: translateY(-3px); + box-shadow: 0 7px 14px rgba(255, 65, 108, 0.3); +} + +.result-section, .history-section { + margin-bottom: 30px; +} + +.result-section h3, .history-section h3, .info-card h3 { + color: #2c3e50; + margin-bottom: 15px; + display: flex; + align-items: center; + gap: 10px; + font-size: 1.4rem; +} + +.result-display { + background: #f8f9fa; + border-radius: 10px; + padding: 25px; + min-height: 100px; + border: 2px dashed #dee2e6; + display: flex; + align-items: center; + justify-content: center; +} + +.result-placeholder { + text-align: center; + color: #6c757d; +} + +.result-placeholder i { + font-size: 2rem; + margin-bottom: 10px; + color: #adb5bd; +} + +.history-list { + max-height: 200px; + overflow-y: auto; + padding: 10px; + background: #f8f9fa; + border-radius: 10px; +} + +.history-item { + padding: 12px 15px; + margin-bottom: 8px; + background: white; + border-radius: 8px; + border-left: 4px solid #3498db; + animation: slideIn 0.3s ease; +} + +@keyframes slideIn { + from { opacity: 0; transform: translateX(-10px); } + to { opacity: 1; transform: translateX(0); } +} + +.history-item.success { + border-left-color: #00b09b; +} + +.history-item.error { + border-left-color: #ff416c; +} + +.info-card { + background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); + color: white; + padding: 25px; + border-radius: 16px; + box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); +} + +.info-card h3 { + color: white; +} + +.info-card ul { + list-style: none; +} + +.info-card li { + padding: 10px 0; + display: flex; + align-items: center; + gap: 10px; + border-bottom: 1px solid rgba(255, 255, 255, 0.2); +} + +.info-card li:last-child { + border-bottom: none; +} + +.calculator-footer { + background: #2c3e50; + color: white; + padding: 20px; + text-align: center; + display: flex; + flex-direction: column; + gap: 15px; +} + +.back-link { + color: #3498db; + text-decoration: none; + font-weight: 600; + display: inline-flex; + align-items: center; + gap: 8px; + transition: color 0.3s; +} + +.back-link:hover { + color: #1abc9c; +} + +/* Адаптивность */ +@media (max-width: 768px) { + .calculator-main { + grid-template-columns: 1fr; + } + + .input-group { + grid-template-columns: 1fr; + } + + .calculator-header h1 { + font-size: 2rem; + } +} \ No newline at end of file diff --git a/lab4/calculator.html b/lab4/calculator.html new file mode 100644 index 00000000..4e04ee52 --- /dev/null +++ b/lab4/calculator.html @@ -0,0 +1,89 @@ + + + + + Калькулятор - Лабораторная работа 4 + + + + +
+
+

Калькулятор

+

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

+
+ +
+
+
+
+ + +
+ +
+ + +
+ +
+ + +
+
+ +
+ + +
+ +
+

Результат

+
+
+ +

Здесь появится результат вычислений

+
+
+
+ +
+

История операций

+
+ +
+
+
+ +
+

Информация

+
    +
  • Поддерживаются все основные операции
    • +
  • Деление на ноль невозможно
    • +
  • Возведение в степень включено
    • +
  • История сохраняется до обновления страницы
    • +
+
+
+ + +
+ + + + \ No newline at end of file diff --git a/lab4/calculator.js b/lab4/calculator.js new file mode 100644 index 00000000..5972da75 --- /dev/null +++ b/lab4/calculator.js @@ -0,0 +1,193 @@ +document.addEventListener('DOMContentLoaded', function() { + const num1Input = document.getElementById('num1'); + const num2Input = document.getElementById('num2'); + const operationSelect = document.getElementById('operation'); + const calculateBtn = document.getElementById('calculate'); + const resetBtn = document.getElementById('reset'); + const resultDisplay = document.getElementById('result'); + const historyList = document.getElementById('history'); + + // Функция для вычисления результата + function calculate() { + const num1 = parseFloat(num1Input.value); + const num2 = parseFloat(num2Input.value); + const operation = operationSelect.value; + + // Проверка на валидность ввода + if (isNaN(num1) || isNaN(num2)) { + showError('Пожалуйста, введите оба числа'); + return; + } + + let result; + let expression; + + try { + switch (operation) { + case 'add': + result = num1 + num2; + expression = `${num1} + ${num2}`; + break; + case 'subtract': + result = num1 - num2; + expression = `${num1} - ${num2}`; + break; + case 'multiply': + result = num1 * num2; + expression = `${num1} × ${num2}`; + break; + case 'divide': + if (num2 === 0) { + throw new Error('Деление на ноль невозможно'); + } + result = num1 / num2; + expression = `${num1} ÷ ${num2}`; + break; + case 'power': + result = Math.pow(num1, num2); + expression = `${num1}^${num2}`; + break; + default: + throw new Error('Неизвестная операция'); + } + + // Проверка на бесконечность + if (!isFinite(result)) { + throw new Error('Результат слишком большой'); + } + + showResult(result, expression); + addToHistory(expression, result, 'success'); + + } catch (error) { + showError(error.message); + addToHistory(`${num1} ${getOperationSymbol(operation)} ${num2}`, error.message, 'error'); + } + } + + // Функция для отображения результата + function showResult(result, expression) { + resultDisplay.innerHTML = ` +
+
+ ${expression} = +
+
+ ${result} +
+
+ Успешно вычислено +
+
+ `; + } + + // Функция для отображения ошибки + function showError(message) { + resultDisplay.innerHTML = ` +
+
+ +
+
+ Ошибка! +
+
+ ${message} +
+
+ `; + } + + // Функция для добавления в историю + function addToHistory(expression, result, type) { + const historyItem = document.createElement('div'); + historyItem.className = `history-item ${type}`; + + const now = new Date(); + const time = now.toLocaleTimeString('ru-RU', { + hour: '2-digit', + minute: '2-digit', + second: '2-digit' + }); + + if (type === 'success') { + historyItem.innerHTML = ` +
+
+ ${expression} = ${result} +
+
+ ${time} +
+
+ `; + } else { + historyItem.innerHTML = ` +
+
+ ${expression} - ${result} +
+
+ ${time} +
+
+ `; + } + + historyList.insertBefore(historyItem, historyList.firstChild); + + // Ограничиваем историю 10 записями + if (historyList.children.length > 10) { + historyList.removeChild(historyList.lastChild); + } + } + + // Функция для получения символа операции + function getOperationSymbol(operation) { + switch (operation) { + case 'add': return '+'; + case 'subtract': return '-'; + case 'multiply': return '×'; + case 'divide': return '÷'; + case 'power': return '^'; + default: return '?'; + } + } + + // Функция для сброса + function resetCalculator() { + num1Input.value = ''; + num2Input.value = ''; + operationSelect.value = 'add'; + resultDisplay.innerHTML = ` +
+ +

Здесь появится результат вычислений

+
+ `; + historyList.innerHTML = ''; + num1Input.focus(); + } + + // Обработчики событий + calculateBtn.addEventListener('click', calculate); + resetBtn.addEventListener('click', resetCalculator); + + // Обработка нажатия Enter + [num1Input, num2Input, operationSelect].forEach(input => { + input.addEventListener('keypress', function(e) { + if (e.key === 'Enter') { + calculate(); + } + }); + }); + + // Фокусировка на первом поле при загрузке + num1Input.focus(); + + // Добавляем пример в историю при загрузке + setTimeout(() => { + addToHistory('5 + 3', 8, 'success'); + }, 1000); +}); \ No newline at end of file diff --git a/lab4/index.html b/lab4/index.html new file mode 100644 index 00000000..87179953 --- /dev/null +++ b/lab4/index.html @@ -0,0 +1,142 @@ + + + + + Резюме - Лабораторная работа 3 + + + + +

Лабораторная работа №3 - Резюме

+ + +
+
+ +
+

Ето я, смотрите какой красивый

+
+ + +
+
+ Стицюк Кирилл Юрьевич +
+
+ + +
+
+ 10.08.2006 +
+
+ + +
+
+

Мои увлечения:

+
    +
  • Настолки (особенно ДНД)
    • +
  • Компьютерные игры (особенно игры Bethesda)
    • +
  • Чтение научной фантастики и фэнтези
    • +
  • Психология
    • +
  • Страйкбол
    • +
  • Стрелковое оружие
    • +
+
+
+ + +
+
+
+

Софт скилы:

+
    +
  • Коммуникабельность
    • +
  • Ответственность
    • +
  • Умение нестандартно взглянуть на ситуацию
    • +
  • Развитый эмоциональный интеллект
    • +
  • Отзывчивость
    • +
+
+
+

Хард скилы:

+
    +
  • C/C++, Python
    • +
  • HTML, CSS, JS
    • +
  • GitHub, Git, Linux
    • +
  • Английский язык(С2)
    • +
  • Авиастроение
    • +
+
+
+
+ + +
+
+

Мои проекты

+

В рамках изучения веб-программирования были выполнены следующие лабораторные работы:

+ +
+
+
+ +
+

Калькулятор

+

Интерактивный калькулятор с основными математическими операциями и историей вычислений

+ + Перейти к калькулятору + +
Лабораторная работа 4
+
+ +
+
+ +
+

Основы HTML и CSS

+

Работа с текстом, изображениями, светофором и лабиринтом

+ + Открыть работу + +
Лабораторная работа 1
+
+ +
+
+ +
+

Списки и форматирование

+

Работа со списками, псевдоклассами и CSS-селекторами

+ + Открыть работу + +
Лабораторная работа 2
+
+
+
+
+ + +
+
+ Мой гитхаб: RangerOfNCR +
+
+ + +
+
+

+ Учусь в Самарском Университете на информационную безопасность автоматизированных систем. + Увлекаюсь программированием и информационной безопасностью. Имею опыт работы с HTML, CSS и JavaScript, а также C/C++ и Python. + В свободное время занимаюсь разными интресными штуками (настолки, страйкбол, книги читаю), а также учу языки и занимаюсь спортом. +

+
+
+ + + + + \ No newline at end of file diff --git a/lab4/lab1.css b/lab4/lab1.css new file mode 100644 index 00000000..4aad7956 --- /dev/null +++ b/lab4/lab1.css @@ -0,0 +1,87 @@ +body { + font-family: Arial, sans-serif; + background-color: #f7f7f7; + margin: 20px; +} + +h1 { + text-align: center; +} + +.task { + margin-bottom: 40px; +} + +/* --- 1. Текст с форматированием --- */ +.text-block { + background-color: #CF6F21; + border: 2px solid #00838f; + padding: 15px; + text-align: right; + color: #B5FCEE; + border-radius: 10px; +} + +/* --- 2. Картинки с позиционированием --- */ +.image-stack { + position: relative; + width: 1500px; + height: 820px; + margin: 50px; +} + +.image-stack__big { + position: absolute; + width: 700px; + height: 400px; + top: 419px; + left: 0px; +} + +.image-stack__small { + position: absolute; + width: 250px; + height: 420px; + top: 0px; + left: 225px; +} + +/* --- 3. Светофор --- */ +.traffic-light { + width: 100px; + background-color: #333; + padding: 10px; + border-radius: 15px; + margin: 20px auto; +} + +.traffic-light__light { + width: 60px; + height: 60px; + margin: 10px auto; + border-radius: 50%; + border: 2px solid #111; +} + +.traffic-light__light_red { background-color: red; } +.traffic-light__light_yellow { background-color: yellow; } +.traffic-light__light_green { background-color: green; } + +/* --- 4. Лабиринт --- */ +.maze { + display: grid; + grid-template-columns: repeat(3, 80px); + grid-template-rows: repeat(3, 80px); +} + +.maze__cell { + width: 80px; + height: 80px; + box-sizing: border-box; + border: 2px solid transparent; +} + +.maze__cell_top { border-top: 2px solid black; } +.maze__cell_bottom { border-bottom: 2px solid black; } +.maze__cell_left { border-left: 2px solid black; } +.maze__cell_right { border-right: 2px solid black; } \ No newline at end of file diff --git a/lab4/lab1.html b/lab4/lab1.html new file mode 100644 index 00000000..8c49ec83 --- /dev/null +++ b/lab4/lab1.html @@ -0,0 +1,67 @@ + + + + + Лабораторная работа 1 + + + + + +

Лабораторная работа №1 — Основы HTML и CSS

+ + +
+

1. Текст с форматированием

+
+

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

+

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

+
+
+ + +
+

2. Картинки с позиционированием

+
+ + +
+
+ + +
+

3. Светофор

+
+
+
+
+
+
+ + +
+

4. Лабиринт 3×3

+
+
+
+
+ +
+
+
+ +
+
+
+
+
+ + + diff --git a/lab4/lab2.css b/lab4/lab2.css new file mode 100644 index 00000000..3222a064 --- /dev/null +++ b/lab4/lab2.css @@ -0,0 +1,118 @@ +body { + font-family: Arial, sans-serif; + background-color: #f7f7f7; + margin: 20px; +} + +h1 { + text-align: center; +} + +h2, h3, h4 { + font-size: 24px; + font-weight: bold; + margin-bottom: 10px; +} + +.task { + margin-bottom: 40px; +} + +.shiny { + transition: color 1.5s ease; +} +.shiny:hover { + color: #00ff59; +} + +a{ + color: inherit; + text-decoration: none; +} + +a::after{ + content: " 🌐"; +} + +/* Задание 2 - Родители и дети */ +.parents-and-kids { + margin: 20px 0; +} + +.parent { + margin: 15px 0; + padding: 10px; +} + +.parent__child { + margin: 5px 0; + padding: 5px; +} + +/* Родитель 1 */ +.parent_1 { + color: inherit; +} + +.parent__child_origin_parent-1 { + color: red; +} + +/* Родитель 2 */ +.parent_2 { + color: orange; +} + +.parent__child_origin_parent-2 { + color: #b4005a; + border: 2px dotted orange; + display: block; + width: fit-content; + margin: 4px 0; + padding: 2px 6px; +} + +/* Родитель 3 после второго родителя */ +.parent_3--after-second { + color: green; +} + +.parent_3--after-second .parent__child_origin_parent-3 { + color: green; +} + +/* Убираем рамку у child 2 в parent 3 */ +.parent_3 .parent__child_origin_parent-2 { + border: none; + color: purple; +} + +/* Родитель 3 после первого родителя */ +.parent_1 + .parent_3:not(.parent_3--after-second) { + color: black; +} + +.parent_1 + .parent_3:not(.parent_3--after-second) .parent__child_origin_parent-3 { + color: black; +} + +/* Задание 3 - Список языков */ +.languages-list { + padding-right: 0; +} + +.text p:last-child::after { + content: ""; + display: block; + width: 400px; + height: 200px; + margin: 30px auto; + background-image: url("https://ssau.ru/i/logo/logo-white-ru.svg"); + background-repeat: no-repeat; + background-size: contain; + background-position: center; + background-color: #0056b3; + border-radius: 8px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); + padding: 30px; +} \ No newline at end of file diff --git a/lab4/lab2.html b/lab4/lab2.html new file mode 100644 index 00000000..aa5ff455 --- /dev/null +++ b/lab4/lab2.html @@ -0,0 +1,86 @@ + + + + + Лабораторная работа 2 + + + + +

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

+ +
+

1. Список

+
+

Популярные видеоигры:

+
    +
  • Minecraft
    • +
  • Fortnite
    • +
  • GTA V
    • +
  • Call of Duty
    • +
  • Among Us
    • +
+
+
+ + +
+

2. Родаки и дети

+
+
+ Parent 1 +
child 1
+
child 2
+
child 3
+
child 4
+
+ +
+ Parent 3 +
child 1
+
child 2
+
+ +
+ Parent 2 +
child 1
+
child 2
+
+ +
+ Parent 3 +
child 1
+
child 2
+
+ child 2 +
+
+
+
+ + +
+

3. Список и картинка

+
+

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

+
+
    +
  • Python – высокоуровневый язык с простым синтаксисом, популярный в Data Science, веб-разработке и автоматизации
    • +
  • JavaScript – основной язык для фронтенд-разработки, работает в браузерах и на сервере (Node.js).
    • +
  • Java – объектно-ориентированный язык, широко используется в корпоративных приложениях и Android-разработке.
    • +
  • C++ – мощный язык для системного программирования, игр и высокопроизводительных приложений.
    • +
  • C# – язык от Microsoft, применяется в разработке под Windows, играх (Unity) и веб-приложениях.
    • +
  • Go (Golang) – созданный Google, язык для высоконагруженных сетевых сервисов и облачных технологий.
    • +
  • Ruby – известен благодаря фреймворку Ruby on Rails для веб-разработки.
    • +
  • Swift – язык Apple для разработки под iOS и macOS.
    • +
  • Kotlin – современный язык, официально поддерживаемый для Android-разработки.
    • +
  • Rust – язык системного программирования с акцентом на безопасность и производительность.
    • +
+
+

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

+
+
+ + \ No newline at end of file diff --git a/lab4/vneshka.css b/lab4/vneshka.css new file mode 100644 index 00000000..3df71ee9 --- /dev/null +++ b/lab4/vneshka.css @@ -0,0 +1,199 @@ +body { + font-family: "Segoe UI", Roboto, Arial, sans-serif; + background: linear-gradient(135deg, #e3f2fd, #f8f9fa); + margin: 0; + padding: 40px 20px; + color: #333; + line-height: 1.6; +} + +h1 { + text-align: center; + color: #1565c0; + font-size: 2.2em; + margin-bottom: 40px; + text-shadow: 1px 1px 2px rgba(0,0,0,0.1); +} + +.task { + background: #ffffff; + border-radius: 16px; + box-shadow: 0 4px 15px rgba(0,0,0,0.08); + padding: 25px 30px; + margin: 30px auto; + max-width: 700px; + transition: transform 0.2s ease, box-shadow 0.2s ease; +} + +.task:hover { + transform: translateY(-3px); + box-shadow: 0 6px 20px rgba(0,0,0,0.12); +} + +.image { + display: flex; + flex-direction: column; + align-items: center; +} + +.image img { + width: 300px; + height: 300px; + object-fit: cover; + border: 5px solid #2196f3; + box-shadow: 0 4px 12px rgba(0,0,0,0.1); + transition: transform 0.3s ease; +} + +.image img:hover { + transform: scale(1.05); +} + +.image + p { + text-align: center; + margin-top: 10px; + font-weight: 500; +} + +.list p { + font-weight: 600; + color: #0d47a1; + margin-bottom: 8px; +} + +ul { + list-style-type: "✨ "; + padding-left: 20px; +} + +.task .list { + margin-bottom: 20px; +} + +.link { + text-align: center; + font-size: 1.1em; +} + +.link a { + color: #1565c0; + text-decoration: none; + font-weight: 600; + transition: color 0.2s ease; +} + +.link a:hover { + color: #0d47a1; + text-decoration: underline; +} + +.text p { + text-align: justify; + font-size: 1.05em; +} + +.FIO, .Birth_date { + text-align: center; + font-size: 1.2em; + font-weight: 500; + color: #333; +} + +/* Стили для раздела проектов */ +.projects-section { + background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); + padding: 30px; + border-radius: 15px; + border-left: 5px solid #3498db; +} + +.projects-section h2 { + color: #2c3e50; + margin-bottom: 10px; + display: flex; + align-items: center; + gap: 10px; +} + +.projects-description { + color: #6c757d; + margin-bottom: 25px; + font-size: 1.1rem; +} + +.projects-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + gap: 25px; + margin-top: 20px; +} + +.project-card { + background: white; + border-radius: 12px; + padding: 25px; + box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08); + transition: all 0.3s ease; + position: relative; + border-top: 4px solid #3498db; +} + +.project-card:hover { + transform: translateY(-5px); + box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15); +} + +.project-icon { + font-size: 2.5rem; + color: #3498db; + margin-bottom: 15px; +} + +.project-card h3 { + color: #2c3e50; + margin-bottom: 10px; + font-size: 1.4rem; +} + +.project-description { + color: #6c757d; + margin-bottom: 20px; + line-height: 1.5; +} + +.project-link { + display: inline-flex; + align-items: center; + gap: 8px; + background: #3498db; + color: white; + padding: 10px 20px; + border-radius: 8px; + text-decoration: none; + font-weight: 600; + transition: all 0.3s; +} + +.project-link:hover { + background: #2980b9; + transform: scale(1.05); +} + +.project-badge { + position: absolute; + top: 15px; + right: 15px; + background: #2ecc71; + color: white; + padding: 5px 10px; + border-radius: 20px; + font-size: 0.8rem; + font-weight: 600; +} + +/* Контейнер для навыков */ +.skills-container { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); + gap: 30px; +} \ No newline at end of file From 3eb7299a580eef2182c55f8389787c03d26f21df Mon Sep 17 00:00:00 2001 From: Stitsyuk Kirill Date: Fri, 19 Dec 2025 12:36:07 +0400 Subject: [PATCH 8/8] =?UTF-8?q?=D0=9F=D1=80=D0=BC=D0=B5=D0=BD=D0=B8=D0=BB?= =?UTF-8?q?=20=D1=82=D1=80=D0=B5=D0=B1=D1=83=D0=B5=D0=B8=D1=8B=D0=B5=20?= =?UTF-8?q?=D0=BF=D1=80=D0=B0=D0=B2=D0=BA=D0=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- lab4/calculator.css | 88 +++++++++++++++++-------------- lab4/calculator.html | 102 +++++++++++++++++++++++------------- lab4/calculator.js | 122 ++++++++++++++++++++++++++++++------------- 3 files changed, 201 insertions(+), 111 deletions(-) diff --git a/lab4/calculator.css b/lab4/calculator.css index 680036c6..1c17e466 100644 --- a/lab4/calculator.css +++ b/lab4/calculator.css @@ -14,7 +14,7 @@ body { padding: 20px; } -.calculator-container { +.calculator { width: 100%; max-width: 900px; background: rgba(255, 255, 255, 0.95); @@ -29,7 +29,8 @@ body { to { opacity: 1; transform: translateY(0); } } -.calculator-header { +/* Header */ +.calculator__header { background: linear-gradient(135deg, #2c3e50, #4a6491); color: white; padding: 30px; @@ -37,7 +38,7 @@ body { border-bottom: 4px solid #3498db; } -.calculator-header h1 { +.calculator__title { font-size: 2.5rem; margin-bottom: 10px; display: flex; @@ -46,26 +47,28 @@ body { gap: 15px; } -.subtitle { +.calculator__subtitle { font-size: 1.1rem; opacity: 0.9; } -.calculator-main { +/* Main */ +.calculator__main { padding: 30px; display: grid; grid-template-columns: 2fr 1fr; gap: 30px; } -.calculator-card { +.calculator__card { background: white; border-radius: 16px; padding: 30px; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); } -.input-group { +/* Input Group */ +.calculator__input-group { display: grid; grid-template-columns: 1fr auto 1fr; gap: 20px; @@ -73,13 +76,14 @@ body { align-items: end; } -.input-wrapper, .operation-wrapper { +.calculator__input-wrapper, +.calculator__operation-wrapper { display: flex; flex-direction: column; gap: 8px; } -label { +.calculator__label { font-weight: 600; color: #2c3e50; display: flex; @@ -87,7 +91,8 @@ label { gap: 8px; } -input, select { +.calculator__input, +.calculator__select { padding: 14px; border: 2px solid #e0e0e0; border-radius: 10px; @@ -96,13 +101,14 @@ input, select { background: white; } -input:focus, select:focus { +.calculator__input:focus, +.calculator__select:focus { outline: none; border-color: #3498db; box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2); } -select { +.calculator__select { cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%232c3e50' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E"); background-repeat: no-repeat; @@ -111,13 +117,14 @@ select { padding-right: 40px; } -.button-group { +/* Buttons */ +.calculator__button-group { display: flex; gap: 15px; margin-bottom: 30px; } -button { +.calculator__button { padding: 16px 30px; border: none; border-radius: 10px; @@ -132,31 +139,33 @@ button { flex: 1; } -.btn-calculate { +.calculator__button--calculate { background: linear-gradient(135deg, #00b09b, #96c93d); color: white; } -.btn-calculate:hover { +.calculator__button--calculate:hover { transform: translateY(-3px); box-shadow: 0 7px 14px rgba(0, 176, 155, 0.3); } -.btn-reset { +.calculator__button--reset { background: linear-gradient(135deg, #ff416c, #ff4b2b); color: white; } -.btn-reset:hover { +.calculator__button--reset:hover { transform: translateY(-3px); box-shadow: 0 7px 14px rgba(255, 65, 108, 0.3); } -.result-section, .history-section { +/* Result Section */ +.calculator__result-section, +.calculator__history-section { margin-bottom: 30px; } -.result-section h3, .history-section h3, .info-card h3 { +.calculator__section-title { color: #2c3e50; margin-bottom: 15px; display: flex; @@ -165,7 +174,7 @@ button { font-size: 1.4rem; } -.result-display { +.calculator__result-display { background: #f8f9fa; border-radius: 10px; padding: 25px; @@ -176,18 +185,18 @@ button { justify-content: center; } -.result-placeholder { +.calculator__result-placeholder { text-align: center; color: #6c757d; } -.result-placeholder i { +.calculator__result-placeholder i { font-size: 2rem; margin-bottom: 10px; color: #adb5bd; } -.history-list { +.calculator__history-list { max-height: 200px; overflow-y: auto; padding: 10px; @@ -195,7 +204,7 @@ button { border-radius: 10px; } -.history-item { +.calculator__history-item { padding: 12px 15px; margin-bottom: 8px; background: white; @@ -209,15 +218,16 @@ button { to { opacity: 1; transform: translateX(0); } } -.history-item.success { +.calculator__history-item--success { border-left-color: #00b09b; } -.history-item.error { +.calculator__history-item--error { border-left-color: #ff416c; } -.info-card { + +.calculator__info-card { background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); color: white; padding: 25px; @@ -225,15 +235,15 @@ button { box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); } -.info-card h3 { +.calculator__info-card .calculator__section-title { color: white; } -.info-card ul { +.calculator__info-list { list-style: none; } -.info-card li { +.calculator__info-item { padding: 10px 0; display: flex; align-items: center; @@ -241,11 +251,11 @@ button { border-bottom: 1px solid rgba(255, 255, 255, 0.2); } -.info-card li:last-child { +.calculator__info-item:last-child { border-bottom: none; } -.calculator-footer { +.calculator__footer { background: #2c3e50; color: white; padding: 20px; @@ -255,7 +265,7 @@ button { gap: 15px; } -.back-link { +.calculator__back-link { color: #3498db; text-decoration: none; font-weight: 600; @@ -265,21 +275,21 @@ button { transition: color 0.3s; } -.back-link:hover { +.calculator__back-link:hover { color: #1abc9c; } -/* Адаптивность */ + @media (max-width: 768px) { - .calculator-main { + .calculator__main { grid-template-columns: 1fr; } - .input-group { + .calculator__input-group { grid-template-columns: 1fr; } - .calculator-header h1 { + .calculator__title { font-size: 2rem; } } \ No newline at end of file diff --git a/lab4/calculator.html b/lab4/calculator.html index 4e04ee52..68c3c89e 100644 --- a/lab4/calculator.html +++ b/lab4/calculator.html @@ -7,23 +7,31 @@ -
-
-

Калькулятор

-

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

+
+
+

Калькулятор

+

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

-
-
-
-
- - +
+
+
+
+ +
-
- - @@ -32,55 +40,77 @@

Калькулятор

-
- - +
+ +
-
- -
-
-

Результат

-
-
+
+

+ Результат +

+
+

Здесь появится результат вычислений

-
-

История операций

-
+
+

+ История операций +

+
-
-

Информация

-
    -
  • Поддерживаются все основные операции
    • -
  • Деление на ноль невозможно
    • -
  • Возведение в степень включено
    • -
  • История сохраняется до обновления страницы
    • +
    +

    + Информация +

    +
      +
    • + Поддерживаются все основные операции +
      • +
    • + Деление на ноль невозможно +
      • +
    • + Возведение в степень включено +
      • +
    • + История сохраняется до обновления страницы +
-
- +
+ Вернуться в резюме -

© Лабораторная работа по веб-программированию

+

+ © Лабораторная работа по веб-программированию +

diff --git a/lab4/calculator.js b/lab4/calculator.js index 5972da75..06f34e9f 100644 --- a/lab4/calculator.js +++ b/lab4/calculator.js @@ -1,17 +1,56 @@ document.addEventListener('DOMContentLoaded', function() { - const num1Input = document.getElementById('num1'); - const num2Input = document.getElementById('num2'); - const operationSelect = document.getElementById('operation'); - const calculateBtn = document.getElementById('calculate'); - const resetBtn = document.getElementById('reset'); - const resultDisplay = document.getElementById('result'); - const historyList = document.getElementById('history'); + // Получаем элементы с проверкой + const elements = { + num1: document.getElementById('num1'), + num2: document.getElementById('num2'), + operation: document.getElementById('operation'), + calculateBtn: document.getElementById('calculate'), + resetBtn: document.getElementById('reset'), + resultDisplay: document.getElementById('result'), + historyList: document.getElementById('history') + }; + + // Проверяем, все ли элементы найдены + const missingElements = []; + for (const [key, element] of Object.entries(elements)) { + if (!element) { + missingElements.push(key); + console.error(`Элемент с id="${key}" не найден на странице`); + } + } + + // Если какие-то элементы не найдены, выводим сообщение и останавливаем выполнение + if (missingElements.length > 0) { + const errorMessage = `Не удалось найти элементы: ${missingElements.join(', ')}. + Калькулятор не может работать корректно.`; + + if (elements.resultDisplay) { + elements.resultDisplay.innerHTML = ` +
+
+ +
+
+ Ошибка загрузки! +
+
+ ${errorMessage} +
+
+ `; + } else { + // Если даже resultDisplay не найден, выводим в консоль + console.error(errorMessage); + alert('Ошибка загрузки калькулятора. Проверьте консоль для подробностей.'); + } + return; // Прекращаем выполнение скрипта + } // Функция для вычисления результата function calculate() { - const num1 = parseFloat(num1Input.value); - const num2 = parseFloat(num2Input.value); - const operation = operationSelect.value; + const num1 = parseFloat(elements.num1.value); + const num2 = parseFloat(elements.num2.value); + const operation = elements.operation.value; // Проверка на валидность ввода if (isNaN(num1) || isNaN(num2)) { @@ -67,8 +106,8 @@ document.addEventListener('DOMContentLoaded', function() { // Функция для отображения результата function showResult(result, expression) { - resultDisplay.innerHTML = ` -
+ elements.resultDisplay.innerHTML = ` +
${expression} =
@@ -84,8 +123,8 @@ document.addEventListener('DOMContentLoaded', function() { // Функция для отображения ошибки function showError(message) { - resultDisplay.innerHTML = ` -
+ elements.resultDisplay.innerHTML = ` +
@@ -102,7 +141,7 @@ document.addEventListener('DOMContentLoaded', function() { // Функция для добавления в историю function addToHistory(expression, result, type) { const historyItem = document.createElement('div'); - historyItem.className = `history-item ${type}`; + historyItem.className = `calculator__history-item calculator__history-item--${type}`; const now = new Date(); const time = now.toLocaleTimeString('ru-RU', { @@ -135,11 +174,11 @@ document.addEventListener('DOMContentLoaded', function() { `; } - historyList.insertBefore(historyItem, historyList.firstChild); + elements.historyList.insertBefore(historyItem, elements.historyList.firstChild); // Ограничиваем историю 10 записями - if (historyList.children.length > 10) { - historyList.removeChild(historyList.lastChild); + if (elements.historyList.children.length > 10) { + elements.historyList.removeChild(elements.historyList.lastChild); } } @@ -157,37 +196,48 @@ document.addEventListener('DOMContentLoaded', function() { // Функция для сброса function resetCalculator() { - num1Input.value = ''; - num2Input.value = ''; - operationSelect.value = 'add'; - resultDisplay.innerHTML = ` -
+ elements.num1.value = ''; + elements.num2.value = ''; + elements.operation.value = 'add'; + elements.resultDisplay.innerHTML = ` +

Здесь появится результат вычислений

`; - historyList.innerHTML = ''; - num1Input.focus(); + elements.historyList.innerHTML = ''; + elements.num1.focus(); } - // Обработчики событий - calculateBtn.addEventListener('click', calculate); - resetBtn.addEventListener('click', resetCalculator); + // Обработчики событий (добавляем проверку на существование) + if (elements.calculateBtn) { + elements.calculateBtn.addEventListener('click', calculate); + } + + if (elements.resetBtn) { + elements.resetBtn.addEventListener('click', resetCalculator); + } // Обработка нажатия Enter - [num1Input, num2Input, operationSelect].forEach(input => { - input.addEventListener('keypress', function(e) { - if (e.key === 'Enter') { - calculate(); - } - }); + [elements.num1, elements.num2, elements.operation].forEach(input => { + if (input) { + input.addEventListener('keypress', function(e) { + if (e.key === 'Enter') { + calculate(); + } + }); + } }); // Фокусировка на первом поле при загрузке - num1Input.focus(); + if (elements.num1) { + elements.num1.focus(); + } // Добавляем пример в историю при загрузке setTimeout(() => { - addToHistory('5 + 3', 8, 'success'); + if (elements.historyList) { + addToHistory('5 + 3', 8, 'success'); + } }, 1000); }); \ No newline at end of file