Skip to content

K3323/Петрова_Виктория/Лаб_5 #397

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
notpetrusha wants to merge 1 commit into
base: main
Choose a base branch
from
Open

K3323/Петрова_Виктория/Лаб_5 #397

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added works/К3323/Петрова_Виктория/lab5/image.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added works/К3323/Петрова_Виктория/lab5/image1.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added works/К3323/Петрова_Виктория/lab5/image3.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
51 changes: 51 additions & 0 deletions works/К3323/Петрова_Виктория/lab5/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Карта изображений</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Карта изображений</h1>
<div style="position: relative; display: inline-block;">
<img src="image1.png" usemap="#site-map" width="800" height="500">

<svg width="800" height="500" style="position: absolute; top: 0; left: 0; pointer-events: none;">
<!-- 1. Прямоугольник -->
<rect x="50" y="50" width="150" height="100" stroke="red" fill="none" stroke-width="2"/>
<!-- 2. Круг -->
<circle cx="400" cy="100" r="60" stroke="blue" fill="none" stroke-width="2"/>
<!-- 3. Ромб -->
<polygon points="600,80 640,120 600,160 560,120" stroke="green" fill="none" stroke-width="2"/>
<!-- 4. Треугольник -->
<polygon points="150,300 250,450 50,450" stroke="orange" fill="none" stroke-width="2"/>
<!-- 5. Второй прямоугольник -->
<rect x="300" y="350" width="200" height="50" stroke="purple" fill="none" stroke-width="2"/>
<!-- 6. Квадрат -->
<rect x="650" y="350" width="50" height="50" stroke="black" fill="none" stroke-width="2"/>
</svg>
<div id="videoContainer">
<video id="myVideo" width="640" height="360" controls>
<source src="video.mp4" type="video/mp4">
Ваш браузер не поддерживает видео.
</video>
</div>
</div>
<map name="site-map">
<!-- 1. Прямоугольник -->
<area shape="rect" coords="50,50,200,150" href="page1.html" alt="Страница 1" title="Перейти на страницу 1">
<!-- 2. Круг -->
<area shape="circle" coords="400,100,60" href="#" onclick="changeCursor(); return false;" alt="Курсор" title="Сменить курсор">
<!-- 3. Ромб (теперь: смена фона) -->
<area shape="poly" coords="600,80,640,120,600,160,560,120" href="#" onclick="changeBackground(); return false;" alt="Фон" title="Сменить фон страницы">
<!-- 4. Треугольник (теперь: показать видео) -->
<area shape="poly" coords="150,300,250,450,50,450" href="#" onclick="showVideo(); return false;" alt="Видео" title="Показать видео">
<!-- 5. Второй прямоугольник -->
<area shape="rect" coords="300,350,500,400" href="#" onclick="showMessage(); return false;" alt="Сообщение" title="Показать сообщение">
<!-- 6. Квадрат -->
<area shape="rect" coords="650,350,700,400" href="#" onclick="startStarfall(); return false;" alt="Анимация" title="Запустить кровопад">
</map>
<script src="script.js"></script>

</body>
</html>
30 changes: 30 additions & 0 deletions works/К3323/Петрова_Виктория/lab5/page1.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Страница 1</title>
<style>
html, body {
margin: 0;
padding: 0;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background-color: #000; /* чтобы фон не был белым */
}

img {
width: 736px;
height: 414px;
object-fit: contain;
display: block;
}
</style>
</head>
<body>

<img src="image.png" alt="Mooorning">

</body>
</html>
73 changes: 73 additions & 0 deletions works/К3323/Петрова_Виктория/lab5/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,73 @@
function changeBackground() {
document.body.style.backgroundColor = getRandomColor();
}

function getRandomColor() {
const letters = '0123456789ABCDEF';
let color = '#';
for (let i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}


function showVideo() {
const video = document.getElementById('myVideo');
const container = document.getElementById('videoContainer');
container.style.display = 'block';
video.currentTime = 0;
video.play();

video.onended = function() {
container.style.display = 'none';
};
}

function startStarfall() {
for (let i = 0; i < 30; i++) {
const cow = document.createElement('div');
cow.classList.add('cow');
cow.innerText = '🐮';

// Либо с левой, либо с правой половины экрана
const side = Math.random() < 0.5 ? 'left' : 'right';
const offset = Math.random() * 50; // от 0 до 50vw
cow.style.position = 'fixed';
cow.style.top = '-50px';
cow.style[side] = `${offset}vw`;
cow.style.fontSize = '32px';
cow.style.zIndex = 9999;

const duration = 3 + Math.random() * 2;
cow.style.animation = `fall ${duration}s linear`;

document.body.appendChild(cow);

setTimeout(() => {
cow.remove();
}, duration * 1000);
}
}


function changeCursor() {
document.body.style.cursor = 'url("image3.png"), auto';
setTimeout(() => {
document.body.style.cursor = 'default';
}, 5000); // через 5 секунд вернётся
}

function showMessage() {
const msg = document.createElement('div');
msg.className = 'popup-message';
msg.innerHTML = '🎉 Отличного настроения и крутых идей! 🚀';

document.body.appendChild(msg);

setTimeout(() => {
msg.remove();
}, 3000); // исчезает через 3 секунды
}


56 changes: 56 additions & 0 deletions works/К3323/Петрова_Виктория/lab5/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
body {
font-family: sans-serif;
text-align: center;
background-color: #f5f5f5;
}

#videoContainer {
position: absolute;
top: 70px;
left: 80px;
z-index: 10;
display: none;
background-color: white;
padding: 10px;
border-radius: 8px
}

.star {
position: fixed;
top: -30px;
font-size: 24px;
animation: fall linear;
z-index: 9999;
pointer-events: none;
color: gold;
}

@keyframes fall {
to {
transform: translateY(110vh) rotate(360deg);
opacity: 0;
}
}

.popup-message {
position: fixed;
top: 30%;
left: 50%;
transform: translate(-50%, -50%);
background: #ffe680;
color: #333;
padding: 20px 30px;
border: 2px solid #ff9900;
border-radius: 10px;
font-size: 20px;
font-weight: bold;
z-index: 9999;
animation: popFade 3s ease-in-out forwards;
box-shadow: 0 0 15px rgba(0,0,0,0.2);
}

@keyframes popFade {
0% { transform: translate(-50%, -50%) scale(0.8); opacity: 0; }
20% { transform: translate(-50%, -50%) scale(1.05); opacity: 1; }
100% { transform: translate(-50%, -50%) scale(1); opacity: 0; }
}
Binary file added works/К3323/Петрова_Виктория/lab5/video.mp4
View file
Open in desktop
Binary file not shown.
Binary file added works/К3323/Петрова_Виктория/lab5/Отчет_Петрова_Виктория.odt
View file
Open in desktop
Binary file not shown.