diff --git a/calculator.html b/calculator.html new file mode 100644 index 00000000..99fd5939 --- /dev/null +++ b/calculator.html @@ -0,0 +1,70 @@ + + + + + + Калькулятор - Лабораторная работа 4 + + + +
+

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

+

Интерактивный калькулятор на JavaScript

+ +
+
0
+ +
+
+ + +
+ +
+ + +
+ +
+ + +
+
+ + + + +
+

Результат:

+
-
+
+ +
+ +
+

📋 Требования задания:

+
    +
  • ✓ Два поля для ввода числа
    • +
  • ✓ Выпадающий список для выбора операции
    • +
  • ✓ Кнопка "Вычислить"
    • +
  • ✓ Поле с результатом действия
    • +
  • ✓ Обработка ошибок (деление на ноль и др.)
    • +
+
+
+ +
+ ← Лабораторная 1 + ← Лабораторная 2 + ← Лабораторная 3 +
+
+ + + + \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 00000000..67d224c2 --- /dev/null +++ b/index.html @@ -0,0 +1,77 @@ + + + + + + Лабораторная работа 1 + + + +
+

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

+ +
+

Текстовый блок

+
+

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

+
+
+ +
+

Картинки

+
+ Котенок + Еще котенок +
+
+ +
+

Светофор

+
+
+
+
+
+
+ +
+

Лабиринт 3x3

+
+ +
+ Вход +
+
+
+ +
+
+
+ +
+
+ +
+ Выход +
+
+
+
+ + \ No newline at end of file diff --git a/lab2.html b/lab2.html new file mode 100644 index 00000000..08089dd3 --- /dev/null +++ b/lab2.html @@ -0,0 +1,81 @@ + + + + + + Лабораторная работа 2 + + + +
+

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

+ + +
+

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

+ +
+ + +
+

Родители и дети

+
+
+

Первый родитель

+
Ребенок 1
+
Ребенок 2
+
Ребенок 3
+
+ +
+

Второй родитель

+
Ребенок 1
+
Ребенок 2
+
Ребенок 3
+
+ +
+

Третий родитель

+
Ребенок 1
+
Ребенок 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/laba3veb.html b/laba3veb.html new file mode 100644 index 00000000..d8babc94 --- /dev/null +++ b/laba3veb.html @@ -0,0 +1,126 @@ + + + + + + Резюме - Сухова Юлия Сергеевна + + + +
+
+

Сухова Юлия Сергеевна

+

Студентка • Начинающий разработчик

+
+ +
+
+
+ Фото +
+ +
+

Личная информация

+
+
Дата рождения:
+
15.08.2006
+
+
+
GitHub:
+
+ sukhovaay +
+
+
+ +
+

Hard Skills

+
+
HTML
+
CSS
+
JavaScript
+
Python
+
Git
+
Figma
+
+
+ +
+

Soft Skills

+
+
Коммуникабельность
+
Работа в команде
+
Тайм-менеджмент
+
Креативность
+
Адаптивность
+
Решение проблем
+
+
+
+ +
+
+

О себе

+

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

+
+ +
+

Увлечения

+
    +
  • Программирование
    • +
  • Танцы
    • +
  • Спортзал
    • +
  • Изучение новых технологий
    • +
  • Чтение IT-литературы
    • +
+
+ +
+

Образование

+
+
Учебное заведение:
+
Самарский Университет
+
+
+
Направление:
+
Информационная безопасность автоматизированных систем
+
+
+
Год поступления:
+
2024
+
+
+ +
+

Проекты

+
+
Лабораторная 1:
+
Основы верстки HTML/CSS
+
+
+
Лабораторная 2:
+
Продвинутая верстка с анимациями
+
+
+
Текущий проект:
+
Разработка персонального резюме
+
+
+ +
+

Цели

+

+ В ближайшем будущем планирую углубить знания в JavaScript. В долгосрочной перспективе - стать + full-stack разработчиком и работать над интересными проектами. +

+
+
+
+
+ + \ No newline at end of file diff --git a/photo_2024-11-15_00-26-55.jpg b/photo_2024-11-15_00-26-55.jpg new file mode 100644 index 00000000..68be8317 Binary files /dev/null and b/photo_2024-11-15_00-26-55.jpg differ diff --git a/resume.html b/resume.html new file mode 100644 index 00000000..cf6c86d3 --- /dev/null +++ b/resume.html @@ -0,0 +1,141 @@ + + + + + + Резюме - Сухова Юлия Сергеевна + + + +
+
+

Сухова Юлия Сергеевна

+

Студентка • Начинающий разработчик

+
+ +
+
+
+
+ Фото +
+
+ +
+

Личная информация

+
+
Дата рождения:
+
15.08.2006
+
+
+
GitHub:
+
+ sukhovaay +
+
+
+ +
+

Hard Skills

+
+
HTML
+
CSS
+
JavaScript
+
Python
+
Git
+
Figma
+
+
+ +
+

Soft Skills

+
+
Коммуникабельность
+
Работа в команде
+
Тайм-менеджмент
+
Креативность
+
Адаптивность
+
Решение проблем
+
+
+
+ +
+
+

О себе

+

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

+
+ +
+

Увлечения

+
    +
  • Программирование
    • +
  • Танцы
    • +
  • Спортзал
    • +
  • Изучение новых технологий
    • +
  • Чтение IT-литературы
    • +
+
+ +
+

Образование

+
+
Учебное заведение:
+
Самарский Университет
+
+
+
Направление:
+
Информационная безопасность автоматизированных систем
+
+
+
Год поступления:
+
2024
+
+
+ +
+

Мои проекты

+
+
+

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

+

Основы верстки HTML/CSS - работа с текстом, изображениями, светофором и лабиринтом

+ Посмотреть проект → +
+ +
+

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

+

Продвинутая верстка с анимациями, работа с селекторами и псевдоэлементами

+ Посмотреть проект → +
+ +
+

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

+

Создание персонального резюме с использованием HTML и CSS

+ Посмотреть проект → +
+ +
+

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

+

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

+ Посмотреть проект → +
+
+
+ +
+

Цели

+

+ В ближайшем будущем планирую углубить знания в JavaScript. В долгосрочной перспективе - стать + full-stack разработчиком и работать над интересными проектами. +

+
+
+
+
+ + \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 00000000..c51947bd --- /dev/null +++ b/style.css @@ -0,0 +1,803 @@ +/* ===== ОБЩИЕ СТИЛИ ===== */ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; + line-height: 1.6; + color: #333; +} + +body.lab1 { + background-color: #f5f5f5; + padding: 20px; +} + +.container { + max-width: 1200px; + margin: 0 auto; +} + +.main-title { + text-align: center; + color: #2c3e50; + font-size: 36px; + margin-bottom: 40px; + font-weight: bold; +} + +.section-title { + color: #2c3e50; + font-size: 24px; + margin-bottom: 20px; + padding-bottom: 10px; + border-bottom: 2px solid #bdc3c7; + text-align: center; + font-weight: bold; +} + +section { + margin-bottom: 60px; + padding: 20px; + background-color: white; + border-radius: 10px; + box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); +} + +/* Текстовый блок */ +.text-block { + padding: 30px; + background-color: #CF6F21; + border-radius: 8px; +} + +.text-block__content { + color: #B5FCEE; + text-align: right; + font-size: 18px; + line-height: 1.8; + margin: 0; +} + +/* Картинки */ +.images-container { + position: relative; + width: 500px; + height: 350px; + margin: 0 auto; +} + +.image { + position: absolute; + width: 350px; + height: 250px; + object-fit: cover; + border-radius: 10px; + box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); +} + +.image_first { + top: 20px; + left: 50px; + z-index: 2; + border: 5px solid #ff6b6b; +} + +.image_second { + top: 70px; + left: 100px; + z-index: 1; + border: 5px solid #4ecdc4; +} + +/* Светофор */ +.task-3 { + display: flex; + flex-direction: column; + align-items: center; +} + +.traffic-light { + width: 120px; + background-color: #2c3e50; + padding: 25px; + border-radius: 15px; + box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); +} + +.traffic-light__light { + width: 70px; + height: 70px; + border-radius: 50%; + margin: 15px auto; + border: 3px solid #000; +} + +.traffic-light__light_red { + background-color: #c0392b; +} + +.traffic-light__light_yellow { + background-color: #f39c12; +} + +.traffic-light__light_green { + background-color: #27ae60; +} + +/* Лабиринт */ +.maze { + display: grid; + grid-template-columns: repeat(3, 80px); + grid-template-rows: repeat(3, 80px); + width: fit-content; + margin-top: 20px; +} + +.maze__cell { + width: 80px; + height: 80px; + border: 2px solid black; + box-sizing: border-box; + display: flex; + justify-content: center; + align-items: center; +} + +.maze__cell_open-top { + border-top: none; +} + +.maze__cell_open-left { + border-left: none; +} + +.maze__cell_open-right { + border-right: none; +} + +.maze__cell_open-bottom { + border-bottom: none; +} + +.maze__cell--entry { + background-color: rgba(144, 238, 144, 0.3); +} + +.maze__cell--exit { + background-color: rgba(255, 99, 71, 0.3); +} + +.maze__label { + font-size: 12px; + font-weight: bold; + color: #2c3e50; + text-transform: uppercase; + letter-spacing: 0.5px; +} + +.maze__cell--entry .maze__label { + color: #27ae60; +} + +.maze__cell--exit .maze__label { + color: #c0392b; +} + +/* Анимированный список видеоигр */ +.games-list { + list-style-type: none; + max-width: 500px; + margin: 0 auto; +} + +.games-list__item { + padding: 15px; + margin: 10px 0; + background-color: #ecf0f1; + border-radius: 5px; + border-left: 4px solid #3498db; + transition: all 0.3s ease; + cursor: pointer; +} + +.games-list__item:hover { + background-color: #3498db; + color: white; + transform: translateX(10px); + border-left-color: #2980b9; +} + +/* Родители и дети */ +.family-container { + display: flex; + justify-content: space-between; + gap: 20px; +} + +.parent { + flex: 1; + padding: 20px; + border: 2px solid #bdc3c7; + border-radius: 8px; +} + +.parent__title { + text-align: center; + margin-bottom: 15px; + font-weight: bold; +} + +.parent__child { + padding: 10px; + margin: 5px 0; + border: 1px solid transparent; + border-radius: 4px; +} + +/* Стили для первого родителя */ +.parent_1 .parent__child { + color: red; +} + +/* Стили для второго родителя */ +.parent_2 { + color: orange; +} + +.parent_2 .parent__child { + color: #b4005a; + border: 1px dashed orange; +} + +/* Стили для третьего родителя */ +.parent_3, +.parent_3 .parent__child { + color: green; +} + +/* Дети-гости */ +.parent__child_visitor { + color: purple !important; + border: none !important; +} + +/* Текст с языками программирования */ +.programming-text { + line-height: 1.8; + font-size: 16px; + position: relative; +} + +.programming-text a { + font-weight: bold; + text-decoration: none; + color: #2c3e50; + position: relative; + transition: color 0.3s ease; +} + +.programming-text a:hover { + color: #e74c3c; +} + +/* Псевдоэлемент для ссылок */ +.programming-text a::after { + content: " 🌐"; + font-size: 14px; +} + +.programming-text::after { + content: ""; + display: block; + width: 200px; + height: 60px; + margin: 30px auto 0; + background-image: url('https://upload.wikimedia.org/wikipedia/commons/0/02/SVG_logo.svg'); + background-size: contain; + background-repeat: no-repeat; + background-position: center; +} + +body.resume { + background-color: #ffe6f2; + padding: 20px; + min-height: 100vh; +} + +.resume-container { + max-width: 1000px; + margin: 0 auto; + background-color: white; + border-radius: 15px; + box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); + overflow: hidden; +} + +.resume__header { + background: linear-gradient(135deg, #ff66b2, #ff99cc); + color: white; + padding: 40px; + text-align: center; +} + +.resume__title { + font-size: 2.5rem; + margin-bottom: 10px; +} + +.resume__subtitle { + font-size: 1.2rem; + opacity: 0.9; +} + +.resume__content { + display: flex; + flex-wrap: wrap; + padding: 30px; +} + +.resume__left-column { + flex: 1; + min-width: 300px; + padding-right: 30px; +} + +.resume__right-column { + flex: 2; + min-width: 300px; + border-left: 2px solid #ff99cc; + padding-left: 30px; +} + +/* Блок photo */ +.photo { + text-align: center; + margin-bottom: 30px; +} + +.photo__image { + width: 200px; + height: 200px; + border-radius: 50%; + object-fit: cover; + border: 5px solid #ff99cc; + box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); +} + +.photo__placeholder { + width: 200px; + height: 200px; + border-radius: 50%; + background-color: #ffccdd; + display: flex; + align-items: center; + justify-content: center; + margin: 0 auto; + border: 5px solid #ff99cc; + color: #ff66b2; + font-weight: bold; +} + +/* Блок section для резюме */ +.resume .section { + margin-bottom: 30px; + padding: 0; + background-color: transparent; + box-shadow: none; + border-radius: 0; +} + +.section__title { + color: #ff66b2; + font-size: 1.5rem; + margin-bottom: 15px; + padding-bottom: 5px; + border-bottom: 2px solid #ffccdd; + text-align: left; +} + +/* Блок info-item */ +.info-item { + margin-bottom: 10px; + display: flex; + align-items: flex-start; +} + +.info-item__label { + font-weight: bold; + min-width: 150px; + color: #ff66b2; +} + +.info-item__value { + flex: 1; +} + +/* Блок skills */ +.skills { + display: flex; + flex-wrap: wrap; + gap: 10px; + margin-top: 10px; +} + +.skills__item { + background-color: #ffccdd; + padding: 5px 15px; + border-radius: 20px; + font-size: 0.9rem; +} + +/* Блок hobbies-list */ +.hobbies-list { + list-style-type: none; +} + +.hobbies-list__item { + margin-bottom: 8px; + padding-left: 20px; + position: relative; +} + +.hobbies-list__item::before { + content: "♥"; + color: #ff66b2; + position: absolute; + left: 0; +} + +/* Блок about-text */ +.about-text { + text-align: justify; + line-height: 1.8; +} + +/* Блок github-link */ +.github-link { + display: inline-block; + background-color: #ff66b2; + color: white; + padding: 8px 15px; + border-radius: 5px; + text-decoration: none; + margin-top: 10px; + transition: background-color 0.3s; +} + +.github-link:hover { + background-color: #e0559c; +} + +/* Блок проектов */ +.projects { + display: flex; + flex-direction: column; + gap: 20px; +} + +.project-item { + background-color: #fff; + border: 2px solid #ffccdd; + border-radius: 10px; + padding: 20px; + transition: all 0.3s ease; +} + +.project-item:hover { + transform: translateY(-5px); + box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); + border-color: #ff66b2; +} + +.project-item__title { + color: #ff66b2; + font-size: 1.3rem; + margin-bottom: 10px; + font-weight: bold; +} + +.project-item__description { + color: #666; + margin-bottom: 15px; + line-height: 1.5; +} + +.project-link { + display: inline-block; + background-color: #ff66b2; + color: white; + padding: 8px 15px; + border-radius: 5px; + text-decoration: none; + font-weight: bold; + transition: background-color 0.3s; +} + +.project-link:hover { + background-color: #e0559c; +} + +@media (max-width: 768px) { + .resume__content { + flex-direction: column; + } + + .resume__right-column { + border-left: none; + border-top: 2px solid #ff99cc; + padding-left: 0; + padding-top: 30px; + margin-top: 20px; + } + + .resume__left-column { + padding-right: 0; + } +} + +body.calculator { + background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); + color: #333; + line-height: 1.6; + padding: 20px; + min-height: 100vh; + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; +} + +.calculator-container { + max-width: 600px; + margin: 30px auto; + padding: 30px; + background-color: white; + border-radius: 20px; + box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); +} + +.calculator-title { + text-align: center; + color: #667eea; + font-size: 2.5rem; + margin-bottom: 10px; + font-weight: bold; +} + +.calculator-subtitle { + text-align: center; + color: #666; + margin-bottom: 30px; + font-size: 1.1rem; +} + +.calculator { + background-color: #f8f9fa; + padding: 25px; + border-radius: 15px; + border: 2px solid #e9ecef; +} + +.calculator__display { + background-color: #2c3e50; + color: white; + font-size: 2rem; + text-align: right; + padding: 20px; + border-radius: 10px; + margin-bottom: 25px; + font-family: 'Courier New', monospace; + min-height: 80px; + display: flex; + align-items: center; + justify-content: flex-end; + overflow-x: auto; +} + +.calculator__controls { + display: grid; + grid-template-columns: 1fr; + gap: 20px; + margin-bottom: 25px; +} + +.calculator__input-group { + display: flex; + flex-direction: column; + gap: 8px; +} + +.calculator__input-group label { + font-weight: bold; + color: #495057; +} + +.calculator__input { + padding: 12px 15px; + border: 2px solid #ced4da; + border-radius: 8px; + font-size: 1rem; + transition: border-color 0.3s; +} + +.calculator__input:focus { + outline: none; + border-color: #667eea; + box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1); +} + +.calculator__select { + padding: 12px 15px; + border: 2px solid #ced4da; + border-radius: 8px; + font-size: 1rem; + background-color: white; + cursor: pointer; + transition: border-color 0.3s; +} + +.calculator__select:focus { + outline: none; + border-color: #667eea; +} + +.calculator__button { + background: linear-gradient(to right, #667eea, #764ba2); + color: white; + border: none; + padding: 15px 30px; + font-size: 1.1rem; + font-weight: bold; + border-radius: 10px; + cursor: pointer; + transition: all 0.3s; + width: 100%; + margin-bottom: 15px; +} + +.calculator__button:hover { + transform: translateY(-2px); + box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4); +} + +.calculator__button:active { + transform: translateY(0); +} + +.calculator__button_secondary { + background: linear-gradient(to right, #6c757d, #495057); +} + +.calculator__button_secondary:hover { + box-shadow: 0 5px 15px rgba(108, 117, 125, 0.4); +} + +.calculator__result { + margin: 25px 0; + padding: 20px; + background-color: #e9f7ef; + border-radius: 10px; + border: 2px solid #d1f2eb; +} + +.calculator__result h3 { + color: #27ae60; + margin-bottom: 10px; +} + +.calculator__result-value { + font-size: 2.5rem; + font-weight: bold; + color: #2c3e50; + text-align: center; + min-height: 60px; + display: flex; + align-items: center; + justify-content: center; + font-family: 'Courier New', monospace; +} + +.calculator__error { + color: #e74c3c; + background-color: #fdf2f2; + padding: 15px; + border-radius: 8px; + border: 2px solid #fadbd8; + margin: 20px 0; + font-weight: bold; + text-align: center; + display: none; +} + +.calculator__features { + background-color: #e8f4fd; + padding: 15px; + border-radius: 8px; + border: 2px solid #b3e0ff; + margin-top: 20px; +} + +.calculator__features h3 { + color: #3498db; + margin-bottom: 10px; +} + +.calculator__features ul { + margin-left: 20px; +} + +.calculator__features li { + margin-bottom: 5px; + color: #2c3e50; +} + +.calculator__features li:before { + content: "✓ "; + color: #27ae60; + font-weight: bold; +} + +.navigation { + display: flex; + justify-content: center; + gap: 15px; + margin-top: 30px; + flex-wrap: wrap; +} + +.nav-link { + display: inline-block; + padding: 10px 20px; + background-color: #f8f9fa; + color: #495057; + text-decoration: none; + border-radius: 8px; + border: 2px solid #dee2e6; + transition: all 0.3s; + font-weight: bold; +} + +.nav-link:hover { + background-color: #667eea; + color: white; + border-color: #667eea; + transform: translateY(-2px); +} + +@media (max-width: 768px) { + .calculator-container { + padding: 20px; + margin: 10px; + } + + .calculator__controls { + grid-template-columns: 1fr; + } + + .navigation { + flex-direction: column; + align-items: center; + } + + .nav-link { + width: 100%; + text-align: center; + } +} + +.back-link { + display: inline-block; + margin: 20px 0; + padding: 10px 20px; + background-color: #3498db; + color: white; + text-decoration: none; + border-radius: 5px; + font-weight: bold; + transition: background-color 0.3s; +} + +.back-link:hover { + background-color: #2980b9; +} \ No newline at end of file