diff --git a/lab1/index.html b/lab1/index.html new file mode 100644 index 00000000..58580baf --- /dev/null +++ b/lab1/index.html @@ -0,0 +1,67 @@ + + + + + Лабораторная работа 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..d04f5f84 --- /dev/null +++ b/lab1/vneshka.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; } diff --git a/lab2/index.html b/lab2/index.html new file mode 100644 index 00000000..efa8ee92 --- /dev/null +++ b/lab2/index.html @@ -0,0 +1,86 @@ + + + + + Лабораторная работа 2 + + + + +

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

+ +
+

1. Список

+
+

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

+ +
+
+ + +
+

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..f68deb0b --- /dev/null +++ b/lab2/vneshka.css @@ -0,0 +1,119 @@ +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/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 +
+
+ +
+
+

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

+ +
+
+ +
+
+

Софт скилы:

+ +
+
+

Хард скилы:

+ +
+
+ +
+
+ Мой гитхаб: 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; +} diff --git a/lab4/calculator.css b/lab4/calculator.css new file mode 100644 index 00000000..1c17e466 --- /dev/null +++ b/lab4/calculator.css @@ -0,0 +1,295 @@ +* { + 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 { + 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); } +} + +/* Header */ +.calculator__header { + background: linear-gradient(135deg, #2c3e50, #4a6491); + color: white; + padding: 30px; + text-align: center; + border-bottom: 4px solid #3498db; +} + +.calculator__title { + font-size: 2.5rem; + margin-bottom: 10px; + display: flex; + align-items: center; + justify-content: center; + gap: 15px; +} + +.calculator__subtitle { + font-size: 1.1rem; + opacity: 0.9; +} + +/* Main */ +.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 */ +.calculator__input-group { + display: grid; + grid-template-columns: 1fr auto 1fr; + gap: 20px; + margin-bottom: 30px; + align-items: end; +} + +.calculator__input-wrapper, +.calculator__operation-wrapper { + display: flex; + flex-direction: column; + gap: 8px; +} + +.calculator__label { + font-weight: 600; + color: #2c3e50; + display: flex; + align-items: center; + gap: 8px; +} + +.calculator__input, +.calculator__select { + padding: 14px; + border: 2px solid #e0e0e0; + border-radius: 10px; + font-size: 1.1rem; + transition: all 0.3s; + background: white; +} + +.calculator__input:focus, +.calculator__select:focus { + outline: none; + border-color: #3498db; + box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2); +} + +.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; + background-position: right 15px center; + background-size: 12px; + padding-right: 40px; +} + +/* Buttons */ +.calculator__button-group { + display: flex; + gap: 15px; + margin-bottom: 30px; +} + +.calculator__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; +} + +.calculator__button--calculate { + background: linear-gradient(135deg, #00b09b, #96c93d); + color: white; +} + +.calculator__button--calculate:hover { + transform: translateY(-3px); + box-shadow: 0 7px 14px rgba(0, 176, 155, 0.3); +} + +.calculator__button--reset { + background: linear-gradient(135deg, #ff416c, #ff4b2b); + color: white; +} + +.calculator__button--reset:hover { + transform: translateY(-3px); + box-shadow: 0 7px 14px rgba(255, 65, 108, 0.3); +} + +/* Result Section */ +.calculator__result-section, +.calculator__history-section { + margin-bottom: 30px; +} + +.calculator__section-title { + color: #2c3e50; + margin-bottom: 15px; + display: flex; + align-items: center; + gap: 10px; + font-size: 1.4rem; +} + +.calculator__result-display { + background: #f8f9fa; + border-radius: 10px; + padding: 25px; + min-height: 100px; + border: 2px dashed #dee2e6; + display: flex; + align-items: center; + justify-content: center; +} + +.calculator__result-placeholder { + text-align: center; + color: #6c757d; +} + +.calculator__result-placeholder i { + font-size: 2rem; + margin-bottom: 10px; + color: #adb5bd; +} + +.calculator__history-list { + max-height: 200px; + overflow-y: auto; + padding: 10px; + background: #f8f9fa; + border-radius: 10px; +} + +.calculator__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); } +} + +.calculator__history-item--success { + border-left-color: #00b09b; +} + +.calculator__history-item--error { + border-left-color: #ff416c; +} + + +.calculator__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); +} + +.calculator__info-card .calculator__section-title { + color: white; +} + +.calculator__info-list { + list-style: none; +} + +.calculator__info-item { + padding: 10px 0; + display: flex; + align-items: center; + gap: 10px; + border-bottom: 1px solid rgba(255, 255, 255, 0.2); +} + +.calculator__info-item:last-child { + border-bottom: none; +} + +.calculator__footer { + background: #2c3e50; + color: white; + padding: 20px; + text-align: center; + display: flex; + flex-direction: column; + gap: 15px; +} + +.calculator__back-link { + color: #3498db; + text-decoration: none; + font-weight: 600; + display: inline-flex; + align-items: center; + gap: 8px; + transition: color 0.3s; +} + +.calculator__back-link:hover { + color: #1abc9c; +} + + +@media (max-width: 768px) { + .calculator__main { + grid-template-columns: 1fr; + } + + .calculator__input-group { + grid-template-columns: 1fr; + } + + .calculator__title { + 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..68c3c89e --- /dev/null +++ b/lab4/calculator.html @@ -0,0 +1,119 @@ + + + + + Калькулятор - Лабораторная работа 4 + + + + +
+
+

Калькулятор

+

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

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

+ Результат +

+
+
+ +

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

+
+
+
+ +
+

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

+
+ +
+
+
+ +
+

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

+
    +
  • + Поддерживаются все основные операции +
    • +
  • + Деление на ноль невозможно +
    • +
  • + Возведение в степень включено +
    • +
  • + История сохраняется до обновления страницы +
    • +
+
+
+ + +
+ + + + \ No newline at end of file diff --git a/lab4/calculator.js b/lab4/calculator.js new file mode 100644 index 00000000..06f34e9f --- /dev/null +++ b/lab4/calculator.js @@ -0,0 +1,243 @@ +document.addEventListener('DOMContentLoaded', function() { + // Получаем элементы с проверкой + 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(elements.num1.value); + const num2 = parseFloat(elements.num2.value); + const operation = elements.operation.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) { + elements.resultDisplay.innerHTML = ` +
+
+ ${expression} = +
+
+ ${result} +
+
+ Успешно вычислено +
+
+ `; + } + + // Функция для отображения ошибки + function showError(message) { + elements.resultDisplay.innerHTML = ` +
+
+ +
+
+ Ошибка! +
+
+ ${message} +
+
+ `; + } + + // Функция для добавления в историю + function addToHistory(expression, result, type) { + const historyItem = document.createElement('div'); + historyItem.className = `calculator__history-item calculator__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} +
+
+ `; + } + + elements.historyList.insertBefore(historyItem, elements.historyList.firstChild); + + // Ограничиваем историю 10 записями + if (elements.historyList.children.length > 10) { + elements.historyList.removeChild(elements.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() { + elements.num1.value = ''; + elements.num2.value = ''; + elements.operation.value = 'add'; + elements.resultDisplay.innerHTML = ` +
+ +

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

+
+ `; + elements.historyList.innerHTML = ''; + elements.num1.focus(); + } + + // Обработчики событий (добавляем проверку на существование) + if (elements.calculateBtn) { + elements.calculateBtn.addEventListener('click', calculate); + } + + if (elements.resetBtn) { + elements.resetBtn.addEventListener('click', resetCalculator); + } + + // Обработка нажатия Enter + [elements.num1, elements.num2, elements.operation].forEach(input => { + if (input) { + input.addEventListener('keypress', function(e) { + if (e.key === 'Enter') { + calculate(); + } + }); + } + }); + + // Фокусировка на первом поле при загрузке + if (elements.num1) { + elements.num1.focus(); + } + + // Добавляем пример в историю при загрузке + setTimeout(() => { + if (elements.historyList) { + 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 +
+
+ + +
+
+

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

+ +
+
+ + +
+
+
+

Софт скилы:

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

Хард скилы:

+
    +
  • 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. Список

+
+

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

+ +
+
+ + +
+

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