diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 00000000..b186b3ca Binary files /dev/null and b/.DS_Store differ diff --git a/lab1/assets/.DS_Store b/lab1/assets/.DS_Store new file mode 100644 index 00000000..26bee0ec Binary files /dev/null and b/lab1/assets/.DS_Store differ diff --git a/lab1/assets/images/styles/style.css b/lab1/assets/images/styles/style.css new file mode 100644 index 00000000..d0dfcb99 --- /dev/null +++ b/lab1/assets/images/styles/style.css @@ -0,0 +1,85 @@ +.text-box{ + color: #85a1b7; + background-color: #feb431; + max-width: 700px; +} + +.text-box__text{ + text-align: center; +} + +.image-block{ + position: relative; + width: 600px; + height: 400px; +} + +.image-block__image--back{ + width: 100%; + height: 100%; +} + +.image-block__image--front{ + position: absolute; + width: 100px; + height: 150px; + top: 50%; + left: 50%; + transform: translate(-50%,-50%); +} + +.traffic-light{ + height: 260; + width: 100px; + background-color: black; + border-radius: 5px; + display: flex; + flex-direction: column; + align-items: center; + padding: 5px; +} + +.traffic-light__lamp{ + width: 70px; + height: 70px; + border-radius: 50%; + margin: 5px; +} + +.traffic-light__lamp--red{ + background-color: red; +} + +.traffic-light__lamp--yellow{ + background-color: yellow; +} + +.traffic-light__lamp--green{ + background-color: green; +} + +.maze { + display: inline-grid; + grid-template-columns: repeat(3, 100px); + grid-template-rows: repeat(3, 100px); +} + +.maze__cell { + background-color: rgb(105, 117, 145); +} + +.maze__cell--top { + border-top: 5px solid black; +} + +.maze__cell--bottom { + border-bottom: 5px solid black; +} + +.maze__cell--left { + border-left: 5px solid black; +} + +.maze__cell--right { + border-right: 5px solid black; +} \ No newline at end of file diff --git "a/lab1/assets/images/\320\272\320\260\321\200\321\202\320\270\320\275\320\272\320\260 1.jpg" "b/lab1/assets/images/\320\272\320\260\321\200\321\202\320\270\320\275\320\272\320\260 1.jpg" new file mode 100644 index 00000000..4b67518e Binary files /dev/null and "b/lab1/assets/images/\320\272\320\260\321\200\321\202\320\270\320\275\320\272\320\260 1.jpg" differ diff --git "a/lab1/assets/images/\320\272\320\260\321\200\321\202\320\270\320\275\320\272\320\260 2.jpg" "b/lab1/assets/images/\320\272\320\260\321\200\321\202\320\270\320\275\320\272\320\260 2.jpg" new file mode 100644 index 00000000..07582f61 Binary files /dev/null and "b/lab1/assets/images/\320\272\320\260\321\200\321\202\320\270\320\275\320\272\320\260 2.jpg" differ diff --git a/lab1/assets/styles/style.css b/lab1/assets/styles/style.css new file mode 100644 index 00000000..d0dfcb99 --- /dev/null +++ b/lab1/assets/styles/style.css @@ -0,0 +1,85 @@ +.text-box{ + color: #85a1b7; + background-color: #feb431; + max-width: 700px; +} + +.text-box__text{ + text-align: center; +} + +.image-block{ + position: relative; + width: 600px; + height: 400px; +} + +.image-block__image--back{ + width: 100%; + height: 100%; +} + +.image-block__image--front{ + position: absolute; + width: 100px; + height: 150px; + top: 50%; + left: 50%; + transform: translate(-50%,-50%); +} + +.traffic-light{ + height: 260; + width: 100px; + background-color: black; + border-radius: 5px; + display: flex; + flex-direction: column; + align-items: center; + padding: 5px; +} + +.traffic-light__lamp{ + width: 70px; + height: 70px; + border-radius: 50%; + margin: 5px; +} + +.traffic-light__lamp--red{ + background-color: red; +} + +.traffic-light__lamp--yellow{ + background-color: yellow; +} + +.traffic-light__lamp--green{ + background-color: green; +} + +.maze { + display: inline-grid; + grid-template-columns: repeat(3, 100px); + grid-template-rows: repeat(3, 100px); +} + +.maze__cell { + background-color: rgb(105, 117, 145); +} + +.maze__cell--top { + border-top: 5px solid black; +} + +.maze__cell--bottom { + border-bottom: 5px solid black; +} + +.maze__cell--left { + border-left: 5px solid black; +} + +.maze__cell--right { + border-right: 5px solid black; +} \ No newline at end of file diff --git a/lab1/index.html b/lab1/index.html new file mode 100644 index 00000000..09dae7af --- /dev/null +++ b/lab1/index.html @@ -0,0 +1,53 @@ + + + + + + page + + + +

+ Задание 1 +

+
+
+

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

+
+
+

+ Задание 2 +

+
+ + +
+

+ Задание 3 +

+
+
+
+
+
+

+ Задание 4 +

+
+
+
+
+
+
+
+
+
+
+
+ + + + \ No newline at end of file diff --git a/lab2/index.html b/lab2/index.html new file mode 100644 index 00000000..d1f20ace --- /dev/null +++ b/lab2/index.html @@ -0,0 +1,133 @@ + + + + + + Лабораторная работа №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
+
+
+
+ +
+
+

Языки программирования

+
+

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

+ +
    +
  • + 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/styles.css b/lab2/styles.css new file mode 100644 index 00000000..02571580 --- /dev/null +++ b/lab2/styles.css @@ -0,0 +1,141 @@ +body { + font-family: Arial, sans-serif; + margin: 40px; +} + +.exercise { + margin-bottom: 60px; +} + +.music__heading { + margin-bottom: 15px; +} + +.music__items { + list-style: none; + padding: 0; + margin: 0; +} + + +.music__items__element { + padding: 5px 0; + color: #333; + transition: color 0.3s ease-in-out; + display: block; + width: fit-content; +} + + +.music__items__element:hover { + color: #ff6b6b; +} + +.container { + line-height: 1.5; +} + +.block { + margin-bottom: 25px; +} + +.block__title { + font-weight: bold; + margin-bottom: 8px; + font-size: 18px; +} + +.block__item { + padding: 4px 8px; + margin: 6px 0; + display: block; + width: fit-content; +} + + +.container__block { + margin-bottom: 25px; +} + +.block_first .block__item { + color: red; + border: 1px solid transparent; +} + +.block_second .block__title { + color: orange; +} + +.block_second .block__item { + color: #b4005a; + border: 1px dashed #ffa500; +} + + +.block_second ~ .container__block.block_third .block__title, +.block_second ~ .container__block.block_third .block__item { + color: green; +} + +.block_second ~ .container__block.block_third .block__item { + border: 1px solid transparent; +} + +.block__item_visitor { + color: purple !important; + border: 1px solid transparent !important; +} + +.languages { + max-width: 800px; + margin: 0 auto; + font-family: Arial, sans-serif; + line-height: 1.6; +} + +.languages__heading { + text-align: center; + margin-bottom: 25px; + color: #333; +} + +.languages__text { + text-align: justify; +} + +.languages__list { + margin: 20px 0; + padding-left: 20px; +} + +.languages__list li { + margin-bottom: 12px; +} + +.languages__link { + font-weight: bold; + text-decoration: none; + color: inherit; + position: relative; +} + +.languages__link::after { + content: " 🌐"; + font-weight: normal; + font-size: 0.9em; +} + +.languages__logo { + text-align: center; + margin-top: 30px; + padding: 30px; + background-color: #000000; + border-radius: 8px; +} + +.languages__logo-img { + max-width: 250px; + height: auto; + display: block; + margin: 0 auto; +} \ No newline at end of file diff --git a/web-lab3/images/cat.jpg b/web-lab3/images/cat.jpg new file mode 100644 index 00000000..08baeecb Binary files /dev/null and b/web-lab3/images/cat.jpg differ diff --git a/web-lab3/images/style.css b/web-lab3/images/style.css new file mode 100644 index 00000000..49c8dab5 --- /dev/null +++ b/web-lab3/images/style.css @@ -0,0 +1,117 @@ +body { + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; + line-height: 1.6; + color: #333; + max-width: 800px; + margin: 40px auto; + padding: 20px; + background-color: #f9f9f9; +} + +.resume { + background: white; + padding: 30px; + border-radius: 10px; + box-shadow: 0 2px 10px rgba(0,0,0,0.1); +} + +.resume__header { + display: flex; + align-items: center; + gap: 20px; + margin-bottom: 20px; +} + +.resume__photo { + width: 150px; + height: 150px; + border-radius: 50%; + overflow: hidden; + border: 3px solid #ddd; +} + +.resume__photo img { + width: 100%; + height: 100%; + object-fit: cover; +} + +.resume__info { + flex: 1; +} + +.resume__name { + margin: 0 0 5px 0; + color: #2c3e50; +} + +.resume__subtitle { + color: #7f8c8d; + margin: 5px 0; +} + +.resume__section { + margin-bottom: 25px; +} + +.resume__section-title { + color: #3498db; + border-bottom: 2px solid #3498db; + padding-bottom: 5px; + margin-top: 20px; + margin-bottom: 10px; +} + +.resume__list { + padding-left: 20px; + margin: 5px 0; +} + +.resume__list-item { + margin: 4px 0; +} + +.resume__skills { + display: flex; + gap: 20px; + flex-wrap: wrap; +} + +.resume__skills-column { + flex: 1; + min-width: 250px; +} + +.resume__skills-heading { + margin: 0 0 10px 0; + color: #2c3e50; +} + +.resume__about { + background-color: #f1f8ff; + padding: 15px; + border-left: 4px solid #3498db; + border-radius: 5px; +} + +.resume__github { + margin: 0; +} + +.resume__link { + color: #2980b9; + text-decoration: none; +} + +.resume__link:hover { + text-decoration: underline; +} + +.resume__projects-list { + list-style: none; + padding: 0; +} + +.resume__projects-item { + margin-bottom: 8px; +} \ No newline at end of file diff --git a/web-lab3/index.html b/web-lab3/index.html new file mode 100644 index 00000000..a7c7ef27 --- /dev/null +++ b/web-lab3/index.html @@ -0,0 +1,91 @@ + + + + + + Резюме — Ушаков Роман Сергеевич + + + +
+ +
+
+ Фото котика +
+
+

Ушаков Роман Сергеевич

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

Увлечения

+ +
+ +
+

Навыки

+
+
+

Hard Skills

+
    +
  • HTML / CSS
    • +
  • JavaScript (базовый)
    • +
  • Git / GitHub
    • +
  • Основы C++
    • +
  • Linux (командная строка)
    • +
+
+
+

Soft Skills

+
    +
  • Коммуникабельность
    • +
  • Умение работать в команде
    • +
  • Аналитическое мышление
    • +
  • Самообучение
    • +
  • Тайм-менеджмент
    • +
+
+
+
+ +
+

GitHub

+

+ https://github.com/tlmesnewroman +

+
+ +
+

Обо мне

+
+ Учусь в Самарском университете имени Королева на направлении «Информационная безопасность автоматизированных систем». Увлекаюсь спортом и программированием — стремлюсь сочетать физическую активность с умственной нагрузкой, чтобы быть в тонусе во всех сферах жизни. +
+
+ +
+

Мои проекты

+ +
+ +
+ + \ No newline at end of file diff --git a/web-lab3/style.css b/web-lab3/style.css new file mode 100644 index 00000000..905053b4 --- /dev/null +++ b/web-lab3/style.css @@ -0,0 +1,118 @@ +/* === СТИЛИ ДЛЯ WEB-LAB3 (резюме) === */ +body { + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; + line-height: 1.6; + color: #333; + max-width: 800px; + margin: 40px auto; + padding: 20px; + background-color: #f9f9f9; +} + +.resume { + background: white; + padding: 30px; + border-radius: 10px; + box-shadow: 0 2px 10px rgba(0,0,0,0.1); +} + +.resume__header { + display: flex; + align-items: center; + gap: 20px; + margin-bottom: 20px; +} + +.resume__photo { + width: 150px; + height: 150px; + border-radius: 50%; + overflow: hidden; + border: 3px solid #ddd; +} + +.resume__photo img { + width: 100%; + height: 100%; + object-fit: cover; +} + +.resume__info { + flex: 1; +} + +.resume__name { + margin: 0 0 5px 0; + color: #2c3e50; +} + +.resume__subtitle { + color: #7f8c8d; + margin: 5px 0; +} + +.resume__section { + margin-bottom: 25px; +} + +.resume__section-title { + color: #3498db; + border-bottom: 2px solid #3498db; + padding-bottom: 5px; + margin-top: 20px; + margin-bottom: 10px; +} + +.resume__list { + padding-left: 20px; + margin: 5px 0; +} + +.resume__list-item { + margin: 4px 0; +} + +.resume__skills { + display: flex; + gap: 20px; + flex-wrap: wrap; +} + +.resume__skills-column { + flex: 1; + min-width: 250px; +} + +.resume__skills-heading { + margin: 0 0 10px 0; + color: #2c3e50; +} + +.resume__about { + background-color: #f1f8ff; + padding: 15px; + border-left: 4px solid #3498db; + border-radius: 5px; +} + +.resume__github { + margin: 0; +} + +.resume__link { + color: #2980b9; + text-decoration: none; +} + +.resume__link:hover { + text-decoration: underline; +} + +.resume__projects-list { + list-style: none; + padding: 0; +} + +.resume__projects-item { + margin-bottom: 8px; +} \ No newline at end of file diff --git a/web-lab4/calculator.css b/web-lab4/calculator.css new file mode 100644 index 00000000..6fd2ec2b --- /dev/null +++ b/web-lab4/calculator.css @@ -0,0 +1,90 @@ +/* Сброс и общие стили */ +* { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +body { + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; + background-color: #f4f6f9; + padding: 20px; + color: #333; +} + +/* Основной блок */ +.calculator { + max-width: 500px; + margin: 0 auto; + background: white; + padding: 30px; + border-radius: 12px; + box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12); +} + +.calculator__title { + text-align: center; + margin-bottom: 24px; + font-size: 26px; + color: #2c3e50; +} + +.calculator__input-group { + margin-bottom: 20px; +} + +.calculator__label { + display: block; + margin-bottom: 8px; + font-weight: 600; + font-size: 16px; +} + +.calculator__input, +.calculator__select { + width: 100%; + padding: 12px; + border: 1px solid #d1d8e0; + border-radius: 8px; + font-size: 16px; + background: #fafafa; +} + +.calculator__input:focus, +.calculator__select:focus { + outline: none; + border-color: #3498db; +} + +.calculator__button { + width: 100%; + padding: 14px; + background-color: #3498db; + color: white; + border: none; + border-radius: 8px; + font-size: 18px; + font-weight: 600; + cursor: pointer; + margin-top: 10px; + transition: background 0.2s; +} + +.calculator__button:hover { + background-color: #2980b9; +} + +.calculator__result { + margin-top: 24px; + padding: 16px; + background-color: #e8f4fc; + border-radius: 8px; + text-align: center; + font-size: 18px; + border-left: 4px solid #3498db; +} + +.calculator__result-value { + font-weight: bold; + color: #2c3e50; +} \ No newline at end of file diff --git a/web-lab4/calculator.html b/web-lab4/calculator.html new file mode 100644 index 00000000..1f10fa73 --- /dev/null +++ b/web-lab4/calculator.html @@ -0,0 +1,42 @@ + + + + + + Калькулятор — Лабораторная работа 4 + + + +
+

Калькулятор

+ +
+ + +
+ +
+ + +
+ +
+ + +
+ + + +
+ Результат: — +
+
+ + + + \ No newline at end of file diff --git a/web-lab4/calculator.js b/web-lab4/calculator.js new file mode 100644 index 00000000..33b5ca28 --- /dev/null +++ b/web-lab4/calculator.js @@ -0,0 +1,58 @@ +document.addEventListener("DOMContentLoaded", () => { + const num1Input = document.getElementById("calculator__num1"); + const num2Input = document.getElementById("calculator__num2"); + const operationSelect = document.getElementById("calculator__operation"); + const button = document.getElementById("calculator__button"); + const resultValue = document.getElementById("calculator__result-value"); + + + if (!num1Input || !num2Input || !operationSelect || !button || !resultValue) { + console.error("Ошибка: один или несколько HTML-элементов отсутствуют."); + return; + } + + + function calculate() { + const num1 = parseFloat(num1Input.value); + const num2 = parseFloat(num2Input.value); + const op = operationSelect.value; + + + if (isNaN(num1) || isNaN(num2)) { + resultValue.textContent = "Ошибка: введите числа!"; + return; + } + + let result; + switch (op) { + case "+": + result = num1 + num2; + break; + case "-": + result = num1 - num2; + break; + case "*": + result = num1 * num2; + break; + case "/": + if (num2 === 0) { + resultValue.textContent = "Ошибка: деление на ноль!"; + return; + } + result = num1 / num2; + break; + default: + resultValue.textContent = "Ошибка: выберите операцию!"; + return; + } + + resultValue.textContent = result; + } + + + button.addEventListener("click", calculate); + + + num1Input.addEventListener("keypress", e => e.key === "Enter" && calculate()); + num2Input.addEventListener("keypress", e => e.key === "Enter" && calculate()); +}); \ No newline at end of file diff --git a/web-lab4/style.css b/web-lab4/style.css new file mode 100644 index 00000000..e69de29b