лаба 3

This commit is contained in:
Алексей Крюков 2023-12-22 06:24:28 +04:00
parent 82d1623bbd
commit 2bde88b3c7
63 changed files with 6407 additions and 174 deletions

24
lab_3/.eslintrc.json Normal file
View File

@ -0,0 +1,24 @@
{
"env": {
"browser": true,
"es2021": true
},
"extends": "airbnb-base",
"parserOptions": {
"ecmaVersion": 12,
"sourceType": "module"
},
"rules": {
"quotes": "off",
"indent": "off",
"no-console": "off",
"no-use-before-define": "off",
"no-alert": "off",
"no-restricted-globals": "off",
"quote-props": "off",
"linebreak-style":"off",
"no-tabs":"off",
"no-mixed-spaces-and-tabs":"off",
"no-var":"off"
}
}

View File

Before

Width:  |  Height:  |  Size: 1007 B

After

Width:  |  Height:  |  Size: 1007 B

View File

Before

Width:  |  Height:  |  Size: 2.0 KiB

After

Width:  |  Height:  |  Size: 2.0 KiB

30
lab_3/data.json Normal file

File diff suppressed because one or more lines are too long

View File

Before

Width:  |  Height:  |  Size: 10 KiB

After

Width:  |  Height:  |  Size: 10 KiB

View File

Before

Width:  |  Height:  |  Size: 65 KiB

After

Width:  |  Height:  |  Size: 65 KiB

View File

Before

Width:  |  Height:  |  Size: 20 KiB

After

Width:  |  Height:  |  Size: 20 KiB

View File

Before

Width:  |  Height:  |  Size: 41 KiB

After

Width:  |  Height:  |  Size: 41 KiB

View File

Before

Width:  |  Height:  |  Size: 11 KiB

After

Width:  |  Height:  |  Size: 11 KiB

View File

Before

Width:  |  Height:  |  Size: 30 KiB

After

Width:  |  Height:  |  Size: 30 KiB

View File

Before

Width:  |  Height:  |  Size: 8.1 KiB

After

Width:  |  Height:  |  Size: 8.1 KiB

View File

Before

Width:  |  Height:  |  Size: 105 KiB

After

Width:  |  Height:  |  Size: 105 KiB

View File

Before

Width:  |  Height:  |  Size: 38 KiB

After

Width:  |  Height:  |  Size: 38 KiB

View File

Before

Width:  |  Height:  |  Size: 44 KiB

After

Width:  |  Height:  |  Size: 44 KiB

61
lab_3/dist/assets/mainPage-9f6cc184.js vendored Normal file

File diff suppressed because one or more lines are too long

View File

Before

Width:  |  Height:  |  Size: 110 KiB

After

Width:  |  Height:  |  Size: 110 KiB

View File

Before

Width:  |  Height:  |  Size: 211 KiB

After

Width:  |  Height:  |  Size: 211 KiB

5
lab_3/dist/assets/styles-6446fc66.css vendored Normal file

File diff suppressed because one or more lines are too long

191
lab_3/dist/friends.html vendored Normal file
View File

@ -0,0 +1,191 @@
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<script src="../assets/js/color-modes.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="node_modules/@fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet" />
<title>Друзья</title>
<link rel="stylesheet" href="/assets/styles-6446fc66.css">
</head>
<body>
<body>
<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
<symbol id="check2" viewBox="0 0 16 16">
<path d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z"/>
</symbol>
<symbol id="circle-half" viewBox="0 0 16 16">
<path d="M8 15A7 7 0 1 0 8 1v14zm0 1A8 8 0 1 1 8 0a8 8 0 0 1 0 16z"/>
</symbol>
<symbol id="moon-stars-fill" viewBox="0 0 16 16">
<path d="M6 .278a.768.768 0 0 1 .08.858 7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278z"/>
<path d="M10.794 3.148a.217.217 0 0 1 .412 0l.387 1.162c.173.518.579.924 1.097 1.097l1.162.387a.217.217 0 0 1 0 .412l-1.162.387a1.734 1.734 0 0 0-1.097 1.097l-.387 1.162a.217.217 0 0 1-.412 0l-.387-1.162A1.734 1.734 0 0 0 9.31 6.593l-1.162-.387a.217.217 0 0 1 0-.412l1.162-.387a1.734 1.734 0 0 0 1.097-1.097l.387-1.162zM13.863.099a.145.145 0 0 1 .274 0l.258.774c.115.346.386.617.732.732l.774.258a.145.145 0 0 1 0 .274l-.774.258a1.156 1.156 0 0 0-.732.732l-.258.774a.145.145 0 0 1-.274 0l-.258-.774a1.156 1.156 0 0 0-.732-.732l-.774-.258a.145.145 0 0 1 0-.274l.774-.258c.346-.115.617-.386.732-.732L13.863.1z"/>
</symbol>
<symbol id="sun-fill" viewBox="0 0 16 16">
<path d="M8 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0zm0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13zm8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5zM3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8zm10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0zm-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707zM4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708z"/>
</symbol>
</svg>
<div class="dropdown position-fixed bottom-0 end-0 mb-3 me-3 bd-mode-toggle">
<button class="btn btn-bd-primary py-2 dropdown-toggle d-flex align-items-center"
id="bd-theme"
type="button"
aria-expanded="false"
data-bs-toggle="dropdown"
aria-label="Toggle theme (auto)">
<svg class="bi my-1 theme-icon-active" width="1em" height="1em"><use href="#circle-half"></use></svg>
<span class="visually-hidden" id="bd-theme-text">Toggle theme</span>
</button>
<ul class="dropdown-menu dropdown-menu-end shadow" aria-labelledby="bd-theme-text">
<li>
<button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="light" aria-pressed="false">
<svg class="bi me-2 opacity-50 theme-icon" width="1em" height="1em"><use href="#sun-fill"></use></svg>
Light
<svg class="bi ms-auto d-none" width="1em" height="1em"><use href="#check2"></use></svg>
</button>
</li>
<li>
<button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="dark" aria-pressed="false">
<svg class="bi me-2 opacity-50 theme-icon" width="1em" height="1em"><use href="#moon-stars-fill"></use></svg>
Dark
<svg class="bi ms-auto d-none" width="1em" height="1em"><use href="#check2"></use></svg>
</button>
</li>
<li>
<button type="button" class="dropdown-item d-flex align-items-center active" data-bs-theme-value="auto" aria-pressed="true">
<svg class="bi me-2 opacity-50 theme-icon" width="1em" height="1em"><use href="#circle-half"></use></svg>
Auto
<svg class="bi ms-auto d-none" width="1em" height="1em"><use href="#check2"></use></svg>
</button>
</li>
</ul>
</div>
<header class="p-3 mb-3 border-bottom">
<div class="container">
<div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start">
<a href="/" class="d-flex align-items-center mb-2 mb-lg-0 link-body-emphasis text-decoration-none">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-mastodon" viewBox="0 0 16 16">
<path d="M11.19 12.195c2.016-.24 3.77-1.475 3.99-2.603.348-1.778.32-4.339.32-4.339 0-3.47-2.286-4.488-2.286-4.488C12.062.238 10.083.017 8.027 0h-.05C5.92.017 3.942.238 2.79.765c0 0-2.285 1.017-2.285 4.488l-.002.662c-.004.64-.007 1.35.011 2.091.083 3.394.626 6.74 3.78 7.57 1.454.383 2.703.463 3.709.408 1.823-.1 2.847-.647 2.847-.647l-.06-1.317s-1.303.41-2.767.36c-1.45-.05-2.98-.156-3.215-1.928a3.614 3.614 0 0 1-.033-.496s1.424.346 3.228.428c1.103.05 2.137-.064 3.188-.189zm1.613-2.47H11.13v-4.08c0-.859-.364-1.295-1.091-1.295-.804 0-1.207.517-1.207 1.541v2.233H7.168V5.89c0-1.024-.403-1.541-1.207-1.541-.727 0-1.091.436-1.091 1.296v4.079H3.197V5.522c0-.859.22-1.541.66-2.046.456-.505 1.052-.764 1.793-.764.856 0 1.504.328 1.933.983L8 4.39l.417-.695c.429-.655 1.077-.983 1.934-.983.74 0 1.336.259 1.791.764.442.505.661 1.187.661 2.046v4.203z"></path>
</svg>
" Meeter "
</a>
<ul class="nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0">
<li><a href="index.html" class="nav-link px-2 link-body-emphasis">Сообщения</a></li>
<li><a href="mainPage.html" class="nav-link px-2 link-body-emphasis">Главная</a></li>
<li><a href="friends.html" class="nav-link px-2 link-secondary">Друзья</a></li>
</ul>
<div class="d-flex justify-content-end">
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
<img src="/assets/avtar-5b1dc830.png" alt="mdo" width="32" height="32" class="rounded-circle me-2">
Крюков Алексей
</button>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenuButton">
<li><a class="dropdown-item" href="profile.html">Профиль</a></li>
<li><a class="dropdown-item" href="#">Настройки</a></li>
<li><a class="dropdown-item" href="#">Помощь</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="login.html">Выйти</a></li>
</ul>
</div>
</div>
</div>
</div>
</header>
<main>
<div class="d-flex flex-column flex-md-row p-4 gap-4 py-md-5 align-items-center justify-content-center">
<div class="list-group">
<div class="input-group">
<span class="input-group-text" id="basic-addon1">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16">
<path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"></path>
</svg>
</span>
<input type="text" class="form-control" placeholder="Поиск" aria-label="Поиск" aria-describedby="basic-addon1">
</div>
<a href="#" class="list-group-item list-group-item-action d-flex gap-3 py-3" aria-current="true">
<img src="/assets/fr1-506a77b0.jpg" alt="twbs" width="32" height="32" class="rounded-circle flex-shrink-0">
<div class="d-flex gap-2 w-100 justify-content-between">
<div>
<h6 class="mb-0">Максим Пчёлкин</h6>
<p class="mb-0 opacity-75">УлГТУ</p>
</div>
<small class="opacity-50 text-nowrap">online</small>
</div>
</a>
<a href="#" class="list-group-item list-group-item-action d-flex gap-3 py-3" aria-current="true">
<img src="/assets/fr1-506a77b0.jpg" alt="twbs" width="32" height="32" class="rounded-circle flex-shrink-0">
<div class="d-flex gap-2 w-100 justify-content-between">
<div>
<h6 class="mb-0">Максим Пчёлкин</h6>
<p class="mb-0 opacity-75">УлГТУ</p>
</div>
<small class="opacity-50 text-nowrap">online</small>
</div>
</a>
<a href="#" class="list-group-item list-group-item-action d-flex gap-3 py-3" aria-current="true">
<img src="/assets/FR2-2bc30fa2.jpg" alt="twbs" width="32" height="32" class="rounded-circle flex-shrink-0">
<div class="d-flex gap-2 w-100 justify-content-between">
<div>
<h6 class="mb-0">Лиза Шабаева</h6>
<p class="mb-0 opacity-75">УлГТУ</p>
</div>
<small class="opacity-50 text-nowrap">online</small>
</div>
</a>
<a href="#" class="list-group-item list-group-item-action d-flex gap-3 py-3" aria-current="true">
<img src="/assets/fr3-7638bf44.jpg" alt="twbs" width="32" height="32" class="rounded-circle flex-shrink-0">
<div class="d-flex gap-2 w-100 justify-content-between">
<div>
<h6 class="mb-0">Двейн Скала</h6>
<p class="mb-0 opacity-75">Легенда</p>
</div>
<small class="opacity-50 text-nowrap">online</small>
</div>
</a>
<a href="#" class="list-group-item list-group-item-action d-flex gap-3 py-3" aria-current="true">
<img src="/assets/fr4-797d1519.jpg" alt="twbs" width="32" height="32" class="rounded-circle flex-shrink-0">
<div class="d-flex gap-2 w-100 justify-content-between">
<div>
<h6 class="mb-0">Магистр Йода</h6>
<p class="mb-0 opacity-75">Темная звезда</p>
</div>
<small class="opacity-50 text-nowrap">online</small>
</div>
</a>
<a href="#" class="list-group-item list-group-item-action d-flex gap-3 py-3" aria-current="true">
<img src="/assets/fr1-506a77b0.jpg" alt="twbs" width="32" height="32" class="rounded-circle flex-shrink-0">
<div class="d-flex gap-2 w-100 justify-content-between">
<div>
<h6 class="mb-0">L ???</h6>
<p class="mb-0 opacity-75">???</p>
</div>
<small class="opacity-50 text-nowrap">online</small>
</div>
</a>
<a href="#" class="list-group-item list-group-item-action d-flex gap-3 py-3" aria-current="true">
<img src="/assets/fr1-506a77b0.jpg" alt="twbs" width="32" height="32" class="rounded-circle flex-shrink-0">
<div class="d-flex gap-2 w-100 justify-content-between">
<div>
<h6 class="mb-0">Псих Джокер</h6>
<p class="mb-0 opacity-75">Тюрьма</p>
</div>
<small class="opacity-50 text-nowrap">online</small>
</div>
</a>
</div>
</div>
</main>
<div class="container">
<footer class="footer mt-auto fixed bottom-0 w-100">
<div class="copywriter p-2">
&copy; 2023 UlRent Крюков Алексей ПИбд-21 | Все права защищены
</div>
</footer>
</div>
<script src="node_modules/bootstrap/dist/js/bootstrap.bundle.js"></script>
</body>
</html>

229
lab_3/dist/index.html vendored Normal file
View File

@ -0,0 +1,229 @@
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="node_modules/@fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet" />
<script src="../assets/js/color-modes.js"></script>
<title>Сообщения</title>
<link rel="stylesheet" href="/assets/styles-6446fc66.css">
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
<symbol id="check2" viewBox="0 0 16 16">
<path d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z"/>
</symbol>
<symbol id="circle-half" viewBox="0 0 16 16">
<path d="M8 15A7 7 0 1 0 8 1v14zm0 1A8 8 0 1 1 8 0a8 8 0 0 1 0 16z"/>
</symbol>
<symbol id="moon-stars-fill" viewBox="0 0 16 16">
<path d="M6 .278a.768.768 0 0 1 .08.858 7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278z"/>
<path d="M10.794 3.148a.217.217 0 0 1 .412 0l.387 1.162c.173.518.579.924 1.097 1.097l1.162.387a.217.217 0 0 1 0 .412l-1.162.387a1.734 1.734 0 0 0-1.097 1.097l-.387 1.162a.217.217 0 0 1-.412 0l-.387-1.162A1.734 1.734 0 0 0 9.31 6.593l-1.162-.387a.217.217 0 0 1 0-.412l1.162-.387a1.734 1.734 0 0 0 1.097-1.097l.387-1.162zM13.863.099a.145.145 0 0 1 .274 0l.258.774c.115.346.386.617.732.732l.774.258a.145.145 0 0 1 0 .274l-.774.258a1.156 1.156 0 0 0-.732.732l-.258.774a.145.145 0 0 1-.274 0l-.258-.774a1.156 1.156 0 0 0-.732-.732l-.774-.258a.145.145 0 0 1 0-.274l.774-.258c.346-.115.617-.386.732-.732L13.863.1z"/>
</symbol>
<symbol id="sun-fill" viewBox="0 0 16 16">
<path d="M8 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0zm0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13zm8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5zM3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8zm10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0zm-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707zM4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708z"/>
</symbol>
</svg>
<div class="dropdown position-fixed bottom-0 end-0 mb-3 me-3 bd-mode-toggle">
<button class="btn btn-bd-primary py-2 dropdown-toggle d-flex align-items-center"
id="bd-theme"
type="button"
aria-expanded="false"
data-bs-toggle="dropdown"
aria-label="Toggle theme (auto)">
<svg class="bi my-1 theme-icon-active" width="1em" height="1em"><use href="#circle-half"></use></svg>
<span class="visually-hidden" id="bd-theme-text">Toggle theme</span>
</button>
<ul class="dropdown-menu dropdown-menu-end shadow" aria-labelledby="bd-theme-text">
<li>
<button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="light" aria-pressed="false">
<svg class="bi me-2 opacity-50 theme-icon" width="1em" height="1em"><use href="#sun-fill"></use></svg>
Light
<svg class="bi ms-auto d-none" width="1em" height="1em"><use href="#check2"></use></svg>
</button>
</li>
<li>
<button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="dark" aria-pressed="false">
<svg class="bi me-2 opacity-50 theme-icon" width="1em" height="1em"><use href="#moon-stars-fill"></use></svg>
Dark
<svg class="bi ms-auto d-none" width="1em" height="1em"><use href="#check2"></use></svg>
</button>
</li>
<li>
<button type="button" class="dropdown-item d-flex align-items-center active" data-bs-theme-value="auto" aria-pressed="true">
<svg class="bi me-2 opacity-50 theme-icon" width="1em" height="1em"><use href="#circle-half"></use></svg>
Auto
<svg class="bi ms-auto d-none" width="1em" height="1em"><use href="#check2"></use></svg>
</button>
</li>
</ul>
</div>
<header class="p-3 mb-3 border-bottom fixed top-0">
<div class="container">
<div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start">
<a href="/" class="d-flex align-items-center mb-2 mb-lg-0 link-body-emphasis text-decoration-none">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-mastodon" viewBox="0 0 16 16">
<path d="M11.19 12.195c2.016-.24 3.77-1.475 3.99-2.603.348-1.778.32-4.339.32-4.339 0-3.47-2.286-4.488-2.286-4.488C12.062.238 10.083.017 8.027 0h-.05C5.92.017 3.942.238 2.79.765c0 0-2.285 1.017-2.285 4.488l-.002.662c-.004.64-.007 1.35.011 2.091.083 3.394.626 6.74 3.78 7.57 1.454.383 2.703.463 3.709.408 1.823-.1 2.847-.647 2.847-.647l-.06-1.317s-1.303.41-2.767.36c-1.45-.05-2.98-.156-3.215-1.928a3.614 3.614 0 0 1-.033-.496s1.424.346 3.228.428c1.103.05 2.137-.064 3.188-.189zm1.613-2.47H11.13v-4.08c0-.859-.364-1.295-1.091-1.295-.804 0-1.207.517-1.207 1.541v2.233H7.168V5.89c0-1.024-.403-1.541-1.207-1.541-.727 0-1.091.436-1.091 1.296v4.079H3.197V5.522c0-.859.22-1.541.66-2.046.456-.505 1.052-.764 1.793-.764.856 0 1.504.328 1.933.983L8 4.39l.417-.695c.429-.655 1.077-.983 1.934-.983.74 0 1.336.259 1.791.764.442.505.661 1.187.661 2.046v4.203z"></path>
</svg>
" Meeter "
</a>
<ul class="nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0">
<li><a href="index.html" class="nav-link px-2 link-secondary">Сообщения</a></li>
<li><a href="mainPage.html" class="nav-link px-2 link-body-emphasis">Главная</a></li>
<li><a href="friends.html" class="nav-link px-2 link-body-emphasis">Друзья</a></li>
</ul>
<div class="d-flex justify-content-end">
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
<img src="/assets/avtar-5b1dc830.png" alt="mdo" width="32" height="32" class="rounded-circle me-2">
Крюков Алексей
</button>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenuButton">
<li><a class="dropdown-item" href="profile.html">Профиль</a></li>
<li><a class="dropdown-item" href="#">Настройки</a></li>
<li><a class="dropdown-item" href="#">Помощь</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="login.html">Выйти</a></li>
</ul>
</div>
</div>
</div>
</div>
</header>
<main >
<div class="d-flex flex-column flex-md-row p-4 gap-4 py-md-5 align-items-center justify-content-center">
<div class="list-group">
<div class="input-group">
<span class="input-group-text" id="basic-addon1">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16">
<path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"></path>
</svg>
</span>
<input type="text" class="form-control" placeholder="Поиск" aria-label="Поиск" aria-describedby="basic-addon1">
</div>
<a href="#" class="list-group-item list-group-item-action d-flex gap-3 py-3" aria-current="true">
<img src="/assets/fr1-506a77b0.jpg" alt="twbs" width="32" height="32" class="rounded-circle flex-shrink-0">
<div class="d-flex gap-2 w-100 justify-content-between">
<div>
<h6 class="mb-0">Максим Пчёлкин</h6>
<p class="mb-0 opacity-75">Привет, ты делал дз по Ип? Чет тяжко идет, можешь помочь?</p>
</div>
<small class="opacity-50 text-nowrap">now</small>
</div>
</a>
<a href="#" class="list-group-item list-group-item-action d-flex gap-3 py-3" aria-current="true">
<img src="/assets/FR2-2bc30fa2.jpg" alt="twbs" width="32" height="32" class="rounded-circle flex-shrink-0">
<div class="d-flex gap-2 w-100 justify-content-between">
<div>
<h6 class="mb-0">Лиза Шабаева</h6>
<p class="mb-0 opacity-75">Пойдем гулять!!!</p>
</div>
<small class="opacity-50 text-nowrap">10min</small>
</div>
</a>
<a href="#" class="list-group-item list-group-item-action d-flex gap-3 py-3" aria-current="true">
<img src="/assets/fr3-7638bf44.jpg" alt="twbs" width="32" height="32" class="rounded-circle flex-shrink-0">
<div class="d-flex gap-2 w-100 justify-content-between">
<div>
<h6 class="mb-0">Двейн Скала</h6>
<p class="mb-0 opacity-75">Вставай, пей свой протеин, сегодня идем жать рекорды!!!</p>
</div>
<small class="opacity-50 text-nowrap">2h</small>
</div>
</a>
<a href="#" class="list-group-item list-group-item-action d-flex gap-3 py-3" aria-current="true">
<img src="/assets/fr4-797d1519.jpg" alt="twbs" width="32" height="32" class="rounded-circle flex-shrink-0">
<div class="d-flex gap-2 w-100 justify-content-between">
<div>
<h6 class="mb-0">Магистр Йода</h6>
<p class="mb-0 opacity-75">Есть лишь одно удовольствие, превосходящее радость от вкусной еды, это удовольствие от самого приготовления</p>
</div>
<small class="opacity-50 text-nowrap">2h</small>
</div>
</a>
<a href="#" class="list-group-item list-group-item-action d-flex gap-3 py-3" aria-current="true">
<img src="/assets/fr5-b3302432.jpg" alt="twbs" width="32" height="32" class="rounded-circle flex-shrink-0">
<div class="d-flex gap-2 w-100 justify-content-between">
<div>
<h6 class="mb-0">L ???</h6>
<p class="mb-0 opacity-75">Человек, который пытается кому-либо подражать, всё равно делает это по-своему! Никто не может скрыть свою натуру и привычки!</p>
</div>
<small class="opacity-50 text-nowrap">3d</small>
</div>
</a>
<a href="#" class="list-group-item list-group-item-action d-flex gap-3 py-3" aria-current="true">
<img src="data:image/jpeg;base64,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" alt="twbs" width="32" height="32" class="rounded-circle flex-shrink-0">
<div class="d-flex gap-2 w-100 justify-content-between">
<div>
<h6 class="mb-0">Псих Джокер</h6>
<p class="mb-0 opacity-75">фхфхфхфхффффхфхфхфххыхвххахах</p>
</div>
<small class="opacity-50 text-nowrap">4d</small>
</div>
</a>
<a href="#" class="list-group-item list-group-item-action d-flex gap-3 py-3" aria-current="true">
<img src="/assets/fr7-24d2a56e.jpg" alt="twbs" width="32" height="32" class="rounded-circle flex-shrink-0">
<div class="d-flex gap-2 w-100 justify-content-between">
<div>
<h6 class="mb-0">Харли Квин</h6>
<p class="mb-0 opacity-75">Тебе напишет джокер, не отвечай ему, пупсик)</p>
</div>
<small class="opacity-50 text-nowrap">4d</small>
</div>
</a>
<a href="#" class="list-group-item list-group-item-action d-flex gap-3 py-3" aria-current="true">
<img src="/assets/fr8-db8976f2.jpg" alt="twbs" width="32" height="32" class="rounded-circle flex-shrink-0">
<div class="d-flex gap-2 w-100 justify-content-between">
<div>
<h6 class="mb-0">Губка Боб</h6>
<p class="mb-0 opacity-75">Мы с Патриком жарим сосисоны, приходи</p>
</div>
<small class="opacity-50 text-nowrap">3d</small>
</div>
</a>
<a href="#" class="list-group-item list-group-item-action d-flex gap-3 py-3" aria-current="true">
<img src="/assets/fr9-675abcdc.jpg" alt="twbs" width="32" height="32" class="rounded-circle flex-shrink-0">
<div class="d-flex gap-2 w-100 justify-content-between">
<div>
<h6 class="mb-0">Хантер х Хантер</h6>
<p class="mb-0 opacity-75">г доту ?</p>
</div>
<small class="opacity-50 text-nowrap">1w</small>
</div>
</a>
<a href="#" class="list-group-item list-group-item-action d-flex gap-3 py-3" aria-current="true">
<img src="/assets/fr10-6c9a0f6b.jpg" alt="twbs" width="32" height="32" class="rounded-circle flex-shrink-0">
<div class="d-flex gap-2 w-100 justify-content-between">
<div>
<h6 class="mb-0">Кил Луа</h6>
<p class="mb-0 opacity-75">Я силен</p>
</div>
<small class="opacity-50 text-nowrap">now</small>
</div>
</a>
</div>
</div>
</main>
<footer class="d-flex flex-wrap justify-content-between align-items-center py-3 my-4 border-top">
<div class="footer-logo col-md-4 d-flex align-items-center">
<a href="/" class="mb-3 me-2 mb-md-0 text-body-secondary text-decoration-none lh-1">
<svg class="bi" width="30" height="24"><use xlink:href="#bootstrap"/></svg>
</a>
<span class="mb-3 mb-md-0 text-body-secondary">&copy; 2023 Крюков Алексей ПИбд-21</span>
</div>
<ul class="nav col-md-4 justify-content-end list-unstyled d-flex">
<li class="ms-3"><a class="text-body-secondary" href="#"><svg class="bi" width="24" height="24"><use xlink:href="#twitter"/></svg></a></li>
<li class="ms-3"><a class="text-body-secondary" href="#"><svg class="bi" width="24" height="24"><use xlink:href="#instagram"/></svg></a></li>
<li class="ms-3"><a class="text-body-secondary" href="#"><svg class="bi" width="24" height="24"><use xlink:href="#facebook"/></svg></a></li>
</ul>
</footer>
<script src="node_modules/bootstrap/dist/js/bootstrap.bundle.js"></script>
</body>
</html>

51
lab_3/dist/login.html vendored Normal file
View File

@ -0,0 +1,51 @@
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="node_modules/@fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet" />
<script src="../assets/js/color-modes.js"></script>
<title>Вход</title>
<link rel="stylesheet" href="/assets/styles-6446fc66.css">
</head>
<body>
<main class="form-signin w-100 m-auto">
<form>
<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" fill="currentColor" class="bi bi-emoji-sunglasses-fill" viewBox="0 0 16 16">
<path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16M2.31 5.243A1 1 0 0 1 3.28 4H6a1 1 0 0 1 1 1v.116A4.22 4.22 0 0 1 8 5c.35 0 .69.04 1 .116V5a1 1 0 0 1 1-1h2.72a1 1 0 0 1 .97 1.243l-.311 1.242A2 2 0 0 1 11.439 8H11a2 2 0 0 1-1.994-1.839A2.99 2.99 0 0 0 8 6c-.393 0-.74.064-1.006.161A2 2 0 0 1 5 8h-.438a2 2 0 0 1-1.94-1.515zM4.969 9.75A3.498 3.498 0 0 0 8 11.5a3.498 3.498 0 0 0 3.032-1.75.5.5 0 1 1 .866.5A4.498 4.498 0 0 1 8 12.5a4.498 4.498 0 0 1-3.898-2.25.5.5 0 0 1 .866-.5z"/>
</svg>
<h1 class="h3 mb-3 fw-normal">Please sign in</h1>
<div class="form-floating">
<input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
<label for="floatingInput">Email address</label>
</div>
<div class="form-floating">
<input type="password" class="form-control" id="floatingPassword" placeholder="Password">
<label for="floatingPassword">Password</label>
</div>
<div class="form-check text-start my-3">
<input class="form-check-input" type="checkbox" value="remember-me" id="flexCheckDefault">
<label class="form-check-label" for="flexCheckDefault">
Remember me
</label>
</div>
<a href="index.html">
<a href="index.html" class="btn btn-primary w-100 py-2" type="submit">Sign in</a>
<p class="mt-5 mb-3 text-body-secondary">&copy; 20172023</p>
</a>
</form>
</main>
<div class="container">
<footer class="footer mt-auto fixed bottom-0 w-100">
<div class="copywriter p-2">
&copy; 2023 UlRent Крюков Алексей ПИбд-21 | Все права защищены
</div>
</footer>
</div>
<script src="node_modules/bootstrap/dist/js/bootstrap.bundle.js"></script>
</body>
</html>

View File

@ -3,11 +3,16 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="node_modules/@fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet" /> <link href="node_modules/@fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet" />
<script src="../assets/js/color-modes.js"></script>
<link rel="stylesheet" href="./styles.css">
<script src="./assets/js/color-modes.js"></script>
<title>Главная</title> <title>Главная</title>
<script type="module" crossorigin src="/assets/mainPage-9f6cc184.js"></script>
<link rel="stylesheet" href="/assets/styles-6446fc66.css">
</head> </head>
<body> <body>
<body> <body>
@ -78,7 +83,7 @@
<div class="d-flex justify-content-end"> <div class="d-flex justify-content-end">
<div class="dropdown"> <div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false"> <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
<img src="images/avtar.png" alt="mdo" width="32" height="32" class="rounded-circle me-2"> <img src="/assets/avtar-5b1dc830.png" alt="mdo" width="32" height="32" class="rounded-circle me-2">
Крюков Алексей Крюков Алексей
</button> </button>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenuButton"> <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenuButton">
@ -104,7 +109,7 @@
<small class="opacity-50 text-nowrap">now</small> <small class="opacity-50 text-nowrap">now</small>
</div> </div>
<p class="post-caption mt-3">Уверенно расправились с соперником на первой карте! Ожидаем такой же результат и на второй 🤩</p> <p class="post-caption mt-3">Уверенно расправились с соперником на первой карте! Ожидаем такой же результат и на второй 🤩</p>
<img src="images/post1.jpg" alt="Post image" class="post-img mt-4 img-fluid"> <img src="/assets/post1-6e94c164.jpg" alt="Post image" class="post-img mt-4 img-fluid">
<div class="post-interaction"> <div class="post-interaction">
<div class="d-flex gap-2 align-items-center"> <div class="d-flex gap-2 align-items-center">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-heart-fill" viewBox="0 0 16 16"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-heart-fill" viewBox="0 0 16 16">
@ -134,7 +139,7 @@
<small class="opacity-50 text-nowrap">1 min</small> <small class="opacity-50 text-nowrap">1 min</small>
</div> </div>
<p class="post-caption mt-3">Уверенно расправились с соперником на первой карте! Ожидаем такой же результат и на второй 🤩</p> <p class="post-caption mt-3">Уверенно расправились с соперником на первой карте! Ожидаем такой же результат и на второй 🤩</p>
<img src="images/post2.jpg" alt="Post image" class="post-img mt-4 img-fluid"> <img src="/assets/post2-1d8199f6.jpg" alt="Post image" class="post-img mt-4 img-fluid">
<div class="post-interaction"> <div class="post-interaction">
<div class="d-flex gap-2 align-items-center"> <div class="d-flex gap-2 align-items-center">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-heart-fill" viewBox="0 0 16 16"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-heart-fill" viewBox="0 0 16 16">

127
lab_3/dist/profile.html vendored Normal file
View File

@ -0,0 +1,127 @@
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="node_modules/@fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet" />
<script src="../assets/js/color-modes.js"></script>
<title>Профиль</title>
<link rel="stylesheet" href="/assets/styles-6446fc66.css">
</head>
<body>
<body>
<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
<symbol id="check2" viewBox="0 0 16 16">
<path d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z"/>
</symbol>
<symbol id="circle-half" viewBox="0 0 16 16">
<path d="M8 15A7 7 0 1 0 8 1v14zm0 1A8 8 0 1 1 8 0a8 8 0 0 1 0 16z"/>
</symbol>
<symbol id="moon-stars-fill" viewBox="0 0 16 16">
<path d="M6 .278a.768.768 0 0 1 .08.858 7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278z"/>
<path d="M10.794 3.148a.217.217 0 0 1 .412 0l.387 1.162c.173.518.579.924 1.097 1.097l1.162.387a.217.217 0 0 1 0 .412l-1.162.387a1.734 1.734 0 0 0-1.097 1.097l-.387 1.162a.217.217 0 0 1-.412 0l-.387-1.162A1.734 1.734 0 0 0 9.31 6.593l-1.162-.387a.217.217 0 0 1 0-.412l1.162-.387a1.734 1.734 0 0 0 1.097-1.097l.387-1.162zM13.863.099a.145.145 0 0 1 .274 0l.258.774c.115.346.386.617.732.732l.774.258a.145.145 0 0 1 0 .274l-.774.258a1.156 1.156 0 0 0-.732.732l-.258.774a.145.145 0 0 1-.274 0l-.258-.774a1.156 1.156 0 0 0-.732-.732l-.774-.258a.145.145 0 0 1 0-.274l.774-.258c.346-.115.617-.386.732-.732L13.863.1z"/>
</symbol>
<symbol id="sun-fill" viewBox="0 0 16 16">
<path d="M8 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0zm0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13zm8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5zM3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8zm10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0zm-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707zM4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708z"/>
</symbol>
</svg>
<div class="dropdown position-fixed bottom-0 end-0 mb-3 me-3 bd-mode-toggle">
<button class="btn btn-bd-primary py-2 dropdown-toggle d-flex align-items-center"
id="bd-theme"
type="button"
aria-expanded="false"
data-bs-toggle="dropdown"
aria-label="Toggle theme (auto)">
<svg class="bi my-1 theme-icon-active" width="1em" height="1em"><use href="#circle-half"></use></svg>
<span class="visually-hidden" id="bd-theme-text">Toggle theme</span>
</button>
<ul class="dropdown-menu dropdown-menu-end shadow" aria-labelledby="bd-theme-text">
<li>
<button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="light" aria-pressed="false">
<svg class="bi me-2 opacity-50 theme-icon" width="1em" height="1em"><use href="#sun-fill"></use></svg>
Light
<svg class="bi ms-auto d-none" width="1em" height="1em"><use href="#check2"></use></svg>
</button>
</li>
<li>
<button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="dark" aria-pressed="false">
<svg class="bi me-2 opacity-50 theme-icon" width="1em" height="1em"><use href="#moon-stars-fill"></use></svg>
Dark
<svg class="bi ms-auto d-none" width="1em" height="1em"><use href="#check2"></use></svg>
</button>
</li>
<li>
<button type="button" class="dropdown-item d-flex align-items-center active" data-bs-theme-value="auto" aria-pressed="true">
<svg class="bi me-2 opacity-50 theme-icon" width="1em" height="1em"><use href="#circle-half"></use></svg>
Auto
<svg class="bi ms-auto d-none" width="1em" height="1em"><use href="#check2"></use></svg>
</button>
</li>
</ul>
</div>
<header class="p-3 mb-3 border-bottom">
<div class="container">
<div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start">
<a href="/" class="d-flex align-items-center mb-2 mb-lg-0 link-body-emphasis text-decoration-none">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-mastodon" viewBox="0 0 16 16">
<path d="M11.19 12.195c2.016-.24 3.77-1.475 3.99-2.603.348-1.778.32-4.339.32-4.339 0-3.47-2.286-4.488-2.286-4.488C12.062.238 10.083.017 8.027 0h-.05C5.92.017 3.942.238 2.79.765c0 0-2.285 1.017-2.285 4.488l-.002.662c-.004.64-.007 1.35.011 2.091.083 3.394.626 6.74 3.78 7.57 1.454.383 2.703.463 3.709.408 1.823-.1 2.847-.647 2.847-.647l-.06-1.317s-1.303.41-2.767.36c-1.45-.05-2.98-.156-3.215-1.928a3.614 3.614 0 0 1-.033-.496s1.424.346 3.228.428c1.103.05 2.137-.064 3.188-.189zm1.613-2.47H11.13v-4.08c0-.859-.364-1.295-1.091-1.295-.804 0-1.207.517-1.207 1.541v2.233H7.168V5.89c0-1.024-.403-1.541-1.207-1.541-.727 0-1.091.436-1.091 1.296v4.079H3.197V5.522c0-.859.22-1.541.66-2.046.456-.505 1.052-.764 1.793-.764.856 0 1.504.328 1.933.983L8 4.39l.417-.695c.429-.655 1.077-.983 1.934-.983.74 0 1.336.259 1.791.764.442.505.661 1.187.661 2.046v4.203z"></path>
</svg>
" Meeter "
</a>
<ul class="nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0">
<li><a href="index.html" class="nav-link px-2 link-body-emphasis">Сообщения</a></li>
<li><a href="mainPage.html" class="nav-link px-2 link-body-emphasis">Главная</a></li>
<li><a href="friends.html" class="nav-link px-2 link-body-emphasis">Друзья</a></li>
</ul>
<div class="d-flex justify-content-end">
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
<img src="/assets/avtar-5b1dc830.png" alt="mdo" width="32" height="32" class="rounded-circle me-2">
Крюков Алексей
</button>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenuButton">
<li><a class="dropdown-item" href="profile.html">Профиль</a></li>
<li><a class="dropdown-item" href="#">Настройки</a></li>
<li><a class="dropdown-item" href="#">Помощь</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="login.html">Выйти</a></li>
</ul>
</div>
</div>
</div>
</div>
</header>
<main>
<div class="container mt-5">
<div class="card">
<img src="/assets/fr1-506a77b0.jpg" class="profile-img" alt="Profile Picture">
<div class="card-body">
<h5 class="card-title">Крюков Алексей</h5>
<p class="card-text">Web Developer</p>
<p class="card-text">8 800 535 35353</p>
<p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae obcaecati ipsum enim maxime molestias sint nulla vitae similique magni temporibus?</p>
<div class="card-btns">
<a href="#" class="btn btn-primary">Добавить в друзья</a>
<a href="#" class="btn btn-primary">Подписаться</a>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</main>
<div class="container">
<footer class="footer mt-auto fixed bottom-0 w-100">
<div class="copywriter p-2">
&copy; 2023 UlRent Крюков Алексей ПИбд-21 | Все права защищены
</div>
</footer>
</div>
<script src="node_modules/bootstrap/dist/js/bootstrap.bundle.js"></script>
</body>
</html>

BIN
lab_3/images/FR2.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 10 KiB

BIN
lab_3/images/avtar.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 65 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 45 KiB

BIN
lab_3/images/fr1.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 20 KiB

BIN
lab_3/images/fr10.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 41 KiB

BIN
lab_3/images/fr3.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 11 KiB

BIN
lab_3/images/fr4.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 30 KiB

BIN
lab_3/images/fr5.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.1 KiB

View File

Before

Width:  |  Height:  |  Size: 2.9 KiB

After

Width:  |  Height:  |  Size: 2.9 KiB

BIN
lab_3/images/fr7.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 105 KiB

BIN
lab_3/images/fr8.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 38 KiB

BIN
lab_3/images/fr9.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 44 KiB

View File

Before

Width:  |  Height:  |  Size: 3.1 KiB

After

Width:  |  Height:  |  Size: 3.1 KiB

View File

Before

Width:  |  Height:  |  Size: 30 KiB

After

Width:  |  Height:  |  Size: 30 KiB

BIN
lab_3/images/post1.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 110 KiB

BIN
lab_3/images/post2.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 211 KiB

View File

@ -223,6 +223,5 @@
</ul> </ul>
</footer> </footer>
<script src="node_modules/bootstrap/dist/js/bootstrap.bundle.js"></script> <script src="node_modules/bootstrap/dist/js/bootstrap.bundle.js"></script>
</body> </body>
</html> </html>

114
lab_3/js/apiendpoint.js Normal file
View File

@ -0,0 +1,114 @@
const serverUrl = "http://localhost:8081";
export function createUserObject(
firstName,
lastName,
birthday,
address,
username,
password,
avatarImg,
) {
return {
firstName,
lastName,
birthday,
address,
username,
password,
avatarImg,
};
}
export function createPostObject(
userId,
createdDateTime,
text,
img,
) {
return {
userId,
createdDateTime,
text,
img,
};
}
export class ApiEndpoint {
constructor(endpoint) {
this.endpoint = endpoint;
}
async getObjects() {
const response = await fetch(`${serverUrl}/${this.endpoint}`);
if (!response.ok) {
throw response.statusText;
}
return response.json();
}
async getObject(id) {
const response = await fetch(`${serverUrl}/${this.endpoint}/${id}`);
if (!response.ok) {
throw response.statusText;
}
return response.json();
}
async createObject(obj) {
const options = {
method: "POST",
body: JSON.stringify(obj),
headers: {
"Accept": "application/json",
"Content-Type": "application/json",
},
};
try {
const response = await fetch(`${serverUrl}/${this.endpoint}`, options);
if (!response.ok) {
throw response.statusText;
}
return response.json();
} catch (error) {
console.error('Ошибка при выполнении запроса:', error);
throw error;
}
}
async updateObject(obj) {
const options = {
method: "PUT",
body: JSON.stringify(obj),
headers: {
"Accept": "application/json",
"Content-Type": "application/json",
},
};
const response = await fetch(
`${serverUrl}/${this.endpoint}/${obj.id}`,
options,
);
if (!response.ok) {
throw response.statusText;
}
return response.json();
}
async deleteObject(id) {
const options = {
method: "DELETE",
};
const response = await fetch(
`${serverUrl}/${this.endpoint}/${id}`,
options,
);
if (!response.ok) {
throw response.statusText;
}
return response.json();
}
}

216
lab_3/js/feed.js Normal file
View File

@ -0,0 +1,216 @@
import { ApiEndpoint, createPostObject } from "./apiendpoint";
import { generatePostHtml } from "./posts";
const postApiEndpoint = new ApiEndpoint("posts");
const userApiEndpoint = new ApiEndpoint("users");
document.addEventListener("DOMContentLoaded", loadPosts);
// функция для получения содержимого файла в виде base64 строки
// https://ru.wikipedia.org/wiki/Base64
async function readImageFileToBase64(file) {
const reader = new FileReader();
// создание Promise-объекта для использования функции
// с помощью await (асинхронно) без коллбэков (callback)
// https://learn.javascript.ru/promise
return new Promise((resolve, reject) => {
// 2. "Возвращаем" содержимое когда файл прочитан
// через вызов resolve
// Если не использовать Promise, то всю работу по взаимодействию
// с REST API пришлось бы делать в обработчике (callback) функции
// onloadend
reader.onloadend = () => {
const fileContent = reader.result;
// Здесь могла бы быть работа с REST API
// Чтение заканчивает выполняться здесь
resolve(fileContent);
};
// 3. Возвращаем ошибку
reader.onerror = () => {
// Или здесь в случае ошибки
reject(new Error("oops, something went wrong with the file reader."));
};
// Шаг 1. Сначала читаем файл
// Чтение начинает выполняться здесь
reader.readAsDataURL(file);
});
}
let currentEditPostId = null;
async function buttonPostPublicationClicked() {
let text = document.getElementById("post-editor").value.trim();
const img = document.getElementById("input-title-image").files[0];
var check = document.getElementById("check-title-image").checked;
if (text === "" && check) {
return;
}
let imgBase64 = null;
if (img != null) {
imgBase64 = await readImageFileToBase64(img);
}
// eslint-disable-next-line vars-on-top
var post = createPostObject(1, new Date(), text, imgBase64);
if (text === "") {
text = null;
}
await postApiEndpoint.createObject(post);
showImage(null);
document.getElementById("post-editor").value = "";
await loadPosts();
}
// eslint-disable-next-line no-unused-vars
async function postObjectEdit(e) {
let text = document.getElementById("post-editor").value.trim();
const img = document.getElementById("input-title-image").files[0];
var check = document.getElementById("check-title-image").checked;
var post = await postApiEndpoint.getObject(currentEditPostId);
if (text === "" && !check) {
return;
}
let imgBase64 = null;
if (img != null) {
imgBase64 = await readImageFileToBase64(img);
}
if (text === "") {
text = null;
}
post.text = text;
if (check) {
post.img = imgBase64;
}
await postApiEndpoint.updateObject(post);
document.getElementById("edit-block").style.display = "none";
document.getElementById("post-publication-button").style.display = "block";
currentEditPostId = null;
showImage(null);
document.getElementById("post-editor").value = "";
await loadPosts();
}
async function editPost(e) {
var textElement = document.getElementById("post-editor");
const btnId = e.target.id;
// eslint-disable-next-line radix
const postId = parseInt(btnId.split("-")[2]);
const postObj = await postApiEndpoint.getObject(postId);
document.getElementById("post-editor").value = postObj.text == null ? "" : postObj.text;
textElement.style.height = "auto";
textElement.style.height = `${textElement.scrollHeight + 2}px`;
showImage(postObj.img);
scrollTo(0, 0);
document.getElementById("edit-block").style.display = 'flex';
document.getElementById("post-publication-button").style.display = 'none';
currentEditPostId = postId;
}
async function loadPosts() {
document.getElementById("edit-block").style.display = "none";
document.getElementById("edit-post-button-cancel").addEventListener('click', () => { location.reload(); });
document.getElementById("edit-post-button-accept").addEventListener('click', postObjectEdit);
// eslint-disable-next-line vars-on-top
var posts = await postApiEndpoint.getObjects();
posts.sort((a, b) => (a.createdDateTime < b.createdDateTime ? 1 : -1));
const center = document.getElementsByClassName("posts-wrapper")[0];
center.innerHTML = "";
// eslint-disable-next-line no-plusplus
for (let i = 0; i < posts.length; i++) {
const post = posts[i];
// eslint-disable-next-line no-await-in-loop
const postOwner = await userApiEndpoint.getObject(post.userId);
center.innerHTML += generatePostHtml(post, postOwner);
}
const postDeleteButtons = document.getElementsByClassName("post-delete-button");
// eslint-disable-next-line no-plusplus
for (let i = 0; i < postDeleteButtons.length; i++) {
const btn = postDeleteButtons[i];
btn.addEventListener('click', (e) => {
const btnId = e.target.id;
// eslint-disable-next-line radix
const postId = parseInt(btnId.split("-")[2]);
postApiEndpoint.deleteObject(postId);
// eslint-disable-next-line vars-on-top
var postDiv = document.getElementById(`post-${postId}`);
postDiv.parentNode.removeChild(postDiv);
});
}
const postEditButtons = document.getElementsByClassName("post-edit-button");
// eslint-disable-next-line no-plusplus
for (let i = 0; i < postEditButtons.length; i++) {
const btn = postEditButtons[i];
btn.addEventListener("click", editPost);
}
// eslint-disable-next-line vars-on-top
var text = document.getElementById("post-editor");
function resize() {
if (text.value === "") {
text.style.height = "calc(1em + 26px)";
return;
}
text.style.height = "auto";
text.style.height = `${text.scrollHeight + 2}px`;
}
/* 0-timeout to get the already changed text */
function delayedResize() {
window.setTimeout(resize, 0);
}
observe(text, "change", resize);
observe(text, "cut", delayedResize);
observe(text, "paste", delayedResize);
observe(text, "drop", delayedResize);
observe(text, "keydown", delayedResize);
text.focus();
text.select();
resize();
document.getElementById("post-publication-button").addEventListener('click', buttonPostPublicationClicked);
}
// eslint-disable-next-line vars-on-top
var observe;
if (window.attachEvent) {
observe = function (element, event, handler) {
element.attachEvent(`on${event}`, handler);
};
} else {
observe = function (element, event, handler) {
element.addEventListener(event, handler, false);
};
}
function showImage(img) {
var previewEmpty = document.getElementById("empty-title-image");
var previewSelected = document.getElementById("selected-title-image");
var check = document.getElementById("check-title-image");
var preview = document.getElementById("title-image-preview");
if (check != null) check.checked = false;
if (img != null) {
// eslint-disable-next-line vars-on-top
var src = img;
previewEmpty.style.display = "none";
previewSelected.style.display = "block";
previewSelected.style.opacity = "1.0";
previewSelected.src = src;
preview.title = "Редактировать изображение";
} else {
previewEmpty.style.display = "block";
previewSelected.style.display = "none";
previewSelected.style.opacity = "1.0";
previewSelected.src = "";
preview.title = "Добавить изображение";
}
}

59
lab_3/js/posts.js Normal file
View File

@ -0,0 +1,59 @@
// eslint-disable-next-line import/prefer-default-export
export function generatePostHtml(postObject, userObject) {
const postText = postObject.text !== null ? `<p class="post-caption mt-3">${postObject.text}</p>` : "";
const postImg = postObject.img !== null ? `<img src="${postObject.img}" alt="Post image" class="post-img mt-4 img-fluid">` : "";
const options = {
year: "numeric",
month: "long",
day: "numeric",
hour: "numeric",
minute: "numeric",
};
const postCreatedDateTime = new Date(postObject.createdDateTime);
const editButtonHtml = `<a class="dropdown-item post-edit-button" id="edit-post-${postObject.id}"><i class="bi bi-pencil"></i> Редактировать</a>`;
const deleteButtonHtml = `<a class="dropdown-item post-delete-button" id="delete-post-${postObject.id}"><i class="bi bi-trash3"></i> Удалить</a>`;
const html = `<div class="card my-4 post">
<div class="card-body h-100" id="post-${postObject.id}">
<div class="ms-3">
<h6 class="mb-0">${userObject.firstName} ${userObject.lastName}</h6>
<small class="opacity-50 text-nowrap">${postCreatedDateTime.toLocaleDateString("ru-RU", options)}</small>
</div>
${postText}
${postImg}
<div class="post-interaction">
<!-- Dropdown button -->
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
Options
</button>
<!-- Dropdown menu -->
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
${editButtonHtml}
${deleteButtonHtml}
</ul>
</div>
<div class="d-flex gap-2 align-items-center">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-heart-fill" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M8 1.314C12.438-3.248 23.534 4.735 8 15-7.534 4.736 3.562-3.248 8 1.314"/>
</svg>
<span class="me-1">123</span>
</div>
<div class="d-flex gap-2 align-items-center">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chat-left-text-fill" viewBox="0 0 16 16">
<path d="M0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4.414a1 1 0 0 0-.707.293L.854 15.146a.5.5 0 0 0 .708-.708l2-2a.5.5 0 0 0 0-.708l-2-2a.5.5 0 0 0-.708.708L.146 4.293A1 1 0 0 0 0 4.414V2zm5 1a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zm8.5 3a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z"/>
</svg>
<span class="me-1">123</span>
</div>
<div class="d-flex gap-2 align-items-center">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-share-fill" viewBox="0 0 16 16">
<path d="M11 2.5a2.5 2.5 0 1 1 .603 1.628l-6.718 3.12a2.499 2.499 0 0 1 0 1.504l6.718 3.12a2.5 2.5 0 1 1-.488.876l-6.718-3.12a2.5 2.5 0 1 1 0-3.256l6.718-3.12A2.5 2.5 0 0 1 11 2.5zm-8.5 4a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zm8.5 3a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z"/>
</svg>
<span class="me-1">Share</span>
</div>
</div>
</div>
</div>`;
return html;
}

14
lab_3/jsconfig.json Normal file
View File

@ -0,0 +1,14 @@
{
"compilerOptions": {
"module": "ESNext",
"moduleResolution": "Node",
"target": "ES2020",
"jsx": "preserve",
"strictNullChecks": true,
"strictFunctionTypes": true
},
"exclude": [
"node_modules",
"**/node_modules/*"
]
}

227
lab_3/mainPage.html Normal file
View File

@ -0,0 +1,227 @@
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
<script type="module" src="./node_modules/@popperjs/core/dist/umd/popper.min.js"></script>
<script type="module" src="./node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="./assets/js/color-modes.js"></script>
<link rel="stylesheet" href="./styles.css">
<script src="js/feed.js" type="module"></script>
<title>Главная</title>
</head>
<body>
<body>
<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
<symbol id="check2" viewBox="0 0 16 16">
<path d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z"/>
</symbol>
<symbol id="circle-half" viewBox="0 0 16 16">
<path d="M8 15A7 7 0 1 0 8 1v14zm0 1A8 8 0 1 1 8 0a8 8 0 0 1 0 16z"/>
</symbol>
<symbol id="moon-stars-fill" viewBox="0 0 16 16">
<path d="M6 .278a.768.768 0 0 1 .08.858 7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278z"/>
<path d="M10.794 3.148a.217.217 0 0 1 .412 0l.387 1.162c.173.518.579.924 1.097 1.097l1.162.387a.217.217 0 0 1 0 .412l-1.162.387a1.734 1.734 0 0 0-1.097 1.097l-.387 1.162a.217.217 0 0 1-.412 0l-.387-1.162A1.734 1.734 0 0 0 9.31 6.593l-1.162-.387a.217.217 0 0 1 0-.412l1.162-.387a1.734 1.734 0 0 0 1.097-1.097l.387-1.162zM13.863.099a.145.145 0 0 1 .274 0l.258.774c.115.346.386.617.732.732l.774.258a.145.145 0 0 1 0 .274l-.774.258a1.156 1.156 0 0 0-.732.732l-.258.774a.145.145 0 0 1-.274 0l-.258-.774a1.156 1.156 0 0 0-.732-.732l-.774-.258a.145.145 0 0 1 0-.274l.774-.258c.346-.115.617-.386.732-.732L13.863.1z"/>
</symbol>
<symbol id="sun-fill" viewBox="0 0 16 16">
<path d="M8 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0zm0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13zm8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5zM3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8zm10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0zm-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707zM4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708z"/>
</symbol>
</svg>
<div class="dropdown position-fixed bottom-0 end-0 mb-3 me-3 bd-mode-toggle">
<button class="btn btn-bd-primary py-2 dropdown-toggle d-flex align-items-center"
id="bd-theme"
type="button"
aria-expanded="false"
data-bs-toggle="dropdown"
aria-label="Toggle theme (auto)">
<svg class="bi my-1 theme-icon-active" width="1em" height="1em"><use href="#circle-half"></use></svg>
<span class="visually-hidden" id="bd-theme-text">Toggle theme</span>
</button>
<ul class="dropdown-menu dropdown-menu-end shadow" aria-labelledby="bd-theme-text">
<li>
<button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="light" aria-pressed="false">
<svg class="bi me-2 opacity-50 theme-icon" width="1em" height="1em"><use href="#sun-fill"></use></svg>
Light
<svg class="bi ms-auto d-none" width="1em" height="1em"><use href="#check2"></use></svg>
</button>
</li>
<li>
<button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="dark" aria-pressed="false">
<svg class="bi me-2 opacity-50 theme-icon" width="1em" height="1em"><use href="#moon-stars-fill"></use></svg>
Dark
<svg class="bi ms-auto d-none" width="1em" height="1em"><use href="#check2"></use></svg>
</button>
</li>
<li>
<button type="button" class="dropdown-item d-flex align-items-center active" data-bs-theme-value="auto" aria-pressed="true">
<svg class="bi me-2 opacity-50 theme-icon" width="1em" height="1em"><use href="#circle-half"></use></svg>
Auto
<svg class="bi ms-auto d-none" width="1em" height="1em"><use href="#check2"></use></svg>
</button>
</li>
</ul>
</div>
<header class="p-3 mb-3 border-bottom">
<div class="container">
<div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start">
<a href="/" class="d-flex align-items-center mb-2 mb-lg-0 link-body-emphasis text-decoration-none">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-mastodon" viewBox="0 0 16 16">
<path d="M11.19 12.195c2.016-.24 3.77-1.475 3.99-2.603.348-1.778.32-4.339.32-4.339 0-3.47-2.286-4.488-2.286-4.488C12.062.238 10.083.017 8.027 0h-.05C5.92.017 3.942.238 2.79.765c0 0-2.285 1.017-2.285 4.488l-.002.662c-.004.64-.007 1.35.011 2.091.083 3.394.626 6.74 3.78 7.57 1.454.383 2.703.463 3.709.408 1.823-.1 2.847-.647 2.847-.647l-.06-1.317s-1.303.41-2.767.36c-1.45-.05-2.98-.156-3.215-1.928a3.614 3.614 0 0 1-.033-.496s1.424.346 3.228.428c1.103.05 2.137-.064 3.188-.189zm1.613-2.47H11.13v-4.08c0-.859-.364-1.295-1.091-1.295-.804 0-1.207.517-1.207 1.541v2.233H7.168V5.89c0-1.024-.403-1.541-1.207-1.541-.727 0-1.091.436-1.091 1.296v4.079H3.197V5.522c0-.859.22-1.541.66-2.046.456-.505 1.052-.764 1.793-.764.856 0 1.504.328 1.933.983L8 4.39l.417-.695c.429-.655 1.077-.983 1.934-.983.74 0 1.336.259 1.791.764.442.505.661 1.187.661 2.046v4.203z"></path>
</svg>
" Meeter "
</a>
<ul class="nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0">
<li><a href="index.html" class="nav-link px-2 link-body-emphasis">Сообщения</a></li>
<li><a href="mainPage.html" class="nav-link px-2 link-secondary">Главная</a></li>
<li><a href="friends.html" class="nav-link px-2 link-body-emphasis">Друзья</a></li>
</ul>
<div class="d-flex justify-content-end">
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
<img src="images/avtar.png" alt="mdo" width="32" height="32" class="rounded-circle me-2">
Крюков Алексей
</button>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenuButton">
<li><a class="dropdown-item" href="profile.html">Профиль</a></li>
<li><a class="dropdown-item" href="#">Настройки</a></li>
<li><a class="dropdown-item" href="#">Помощь</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="login.html">Выйти</a></li>
</ul>
</div>
</div>
</div>
</div>
</header>
<main>
<div class="container">
<div class="row">
<div class="col-12 col-md-8 mx-auto">
<div class="card my-4">
<div class="card-body h-50 w-100">
<div class="ms-3">
<textarea placeholder="Что нового?" id="post-editor" class="border rounded-2 border-dark mb-2 p-2"></textarea>
<div id="title-image-block" class="modal-critery">
<input id="check-title-image" type="checkbox" style="display: none;">
<input id="input-title-image" name="titleImage" accept="image/*" type="file" onchange="showTitleImagePreview(event);" />
<label id="title-image-preview" for="input-title-image" title="Добавить изображение" class="rounded-2 mb-2 w-100">
<i id="empty-title-image" class="bi bi-camera">Выберите изображение</i>
<img id="selected-title-image" class="rounded-2">
</label>
</div>
<button class="btn btn-primary mb-2" id="post-publication-button">Опубликовать</button>
<div class="mb-2 w-100" id="edit-block">
<button class="btn btn-danger me-2 w-100" id="edit-post-button-cancel">Отмена</button>
<button class="btn btn-success w-100" id="edit-post-button-accept">Применить</button>
</div>
</div>
</div>
</div>
<div class="posts-wrapper">
<!-- Контейнер для постов -->
</div>
<div class="col-12 col-md-8 mx-auto">
<div class="card my-4 post">
<div class="card-body h-100">
<div class="ms-3">
<h6 class="mb-0">Virtus.Pro</h6>
<small class="opacity-50 text-nowrap current-year">now</small>
</div>
<p class="post-caption mt-3">Уверенно расправились с соперником на первой карте! Ожидаем такой же результат и на второй 🤩</p>
<img src="images/post1.jpg" alt="Post image" class="post-img mt-4 img-fluid">
<div class="post-interaction">
<div class="d-flex gap-2 align-items-center">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-heart-fill" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M8 1.314C12.438-3.248 23.534 4.735 8 15-7.534 4.736 3.562-3.248 8 1.314"/>
</svg>
<span class="me-1">10324</span>
</div>
<div class="d-flex gap-2 align-items-center">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chat-left-text-fill" viewBox="0 0 16 16">
<path d="M0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4.414a1 1 0 0 0-.707.293L.854 15.146a.5.5 0 0 0 .708-.708l2-2a.5.5 0 0 0 0-.708l-2-2a.5.5 0 0 0-.708.708L.146 4.293A1 1 0 0 0 0 4.414V2zm5 1a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zm8.5 3a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z"/></svg>
<span class="me-1">100</span>
</div>
<div class="d-flex gap-2 align-items-center">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-share-fill" viewBox="0 0 16 16">
<path d="M11 2.5a2.5 2.5 0 1 1 .603 1.628l-6.718 3.12a2.499 2.499 0 0 1 0 1.504l6.718 3.12a2.5 2.5 0 1 1-.488.876l-6.718-3.12a2.5 2.5 0 1 1 0-3.256l6.718-3.12A2.5 2.5 0 0 1 11 2.5zm-8.5 4a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zm8.5 3a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z"/></svg>
<span class="me-1">Share</span>
</div>
</div>
</div>
</div>
<div class="card my-4 post">
<div class="card-body h-100">
<div class="ms-3">
<h6 class="mb-0">Футбол</h6>
<small class="opacity-50 text-nowrap">1 min</small>
</div>
<p class="post-caption mt-3">Уверенно расправились с соперником на первой карте! Ожидаем такой же результат и на второй 🤩</p>
<img src="images/post2.jpg" alt="Post image" class="post-img mt-4 img-fluid">
<div class="post-interaction">
<div class="d-flex gap-2 align-items-center">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-heart-fill" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M8 1.314C12.438-3.248 23.534 4.735 8 15-7.534 4.736 3.562-3.248 8 1.314"/>
</svg>
<span class="me-1">2312</span>
</div>
<div class="d-flex gap-2 align-items-center">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chat-left-text-fill" viewBox="0 0 16 16">
<path d="M0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4.414a1 1 0 0 0-.707.293L.854 15.146a.5.5 0 0 0 .708-.708l2-2a.5.5 0 0 0 0-.708l-2-2a.5.5 0 0 0-.708.708L.146 4.293A1 1 0 0 0 0 4.414V2zm5 1a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zm8.5 3a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z"/></svg>
<span class="me-1">21</span>
</div>
<div class="d-flex gap-2 align-items-center">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-share-fill" viewBox="0 0 16 16">
<path d="M11 2.5a2.5 2.5 0 1 1 .603 1.628l-6.718 3.12a2.499 2.499 0 0 1 0 1.504l6.718 3.12a2.5 2.5 0 1 1-.488.876l-6.718-3.12a2.5 2.5 0 1 1 0-3.256l6.718-3.12A2.5 2.5 0 0 1 11 2.5zm-8.5 4a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zm8.5 3a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z"/></svg>
<span class="me-1">Share</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</html>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
</main>
<div class="container">
<footer class="footer mt-auto fixed bottom-0 w-100">
<div class="copywriter p-2">
<span>&copy; <span id="current-year"></span> Meeter</span>
Крюков Алексей ПИбд-21 | Все права защищены
</div>
</footer>
<script src="node_modules/bootstrap/dist/js/bootstrap.bundle.js"></script>
</div>
</body>
<script>document.getElementById('current-year').innerHTML = new Date().getFullYear();</script>
<script>
function showTitleImagePreview(event) {
var previewEmpty = document.getElementById("empty-title-image");
var previewSelected = document.getElementById("selected-title-image");
var check = document.getElementById("check-title-image");
var preview = document.getElementById('title-image-preview');
if (check != null) check.checked = true;
if (event.target.files.length > 0) {
var src = URL.createObjectURL(event.target.files[0]);
previewEmpty.style.display = "none";
previewSelected.style.display = "block";
previewSelected.style.opacity = "1.0";
previewSelected.src = src;
preview.title = "Редактировать изображение";
} else {
previewEmpty.style.display = "block";
previewSelected.style.display = "none";
previewSelected.style.opacity = "1.0";
previewSelected.src = "";
preview.title = "Добавить изображение";
}
}
</script>
</html>

4814
lab_3/package-lock.json generated Normal file

File diff suppressed because it is too large Load Diff

33
lab_3/package.json Normal file
View File

@ -0,0 +1,33 @@
{
"name": "kryukov_ip",
"version": "1.0.0",
"type": "module",
"scripts": {
"start": "vite --port 80 --host 0.0.0.0",
"serve": "http-server -p 80 ./dist/",
"build": "vite build",
"rest": "json-server --watch data.json -p 8081",
"dev": "npm-run-all --parallel rest start",
"prod": "npm-run-all build --parallel serve rest"
},
"dependencies": {
"@editorjs/editorjs": "^2.28.2",
"@editorjs/embed": "^2.6.0",
"@editorjs/header": "^2.7.0",
"@editorjs/list": "^1.8.0",
"bootstrap": "5.3.2",
"bootstrap-icons": "1.11.1"
},
"devDependencies": {
"@editorjs/link": "^2.5.0",
"@editorjs/quote": "^2.5.0",
"@editorjs/simple-image": "^1.5.1",
"eslint": "^8.50.0",
"eslint-config-airbnb-base": "15.0.0",
"eslint-plugin-import": "2.28.1",
"http-server": "14.1.1",
"json-server": "0.17.4",
"npm-run-all": "4.1.5",
"vite": "4.4.9"
}
}

View File

@ -1,18 +1,73 @@
/* Общие стили для карточек */
.card {
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.3s;
}
.card:hover {
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}
/* Стили для текстовой области */
#post-editor {
width: 100%;
resize: none;
}
/* Стили для кнопок */
.btn {
border-radius: 25px;
padding: 5px 20px;
font-size: 14px;
}
/* Стили для блока выбора изображения */
#title-image-block {
display: flex;
align-items: center;
}
#input-title-image {
display: none;
}
#title-image-preview {
cursor: pointer;
border: 2px dashed #ccc;
padding: 5px;
margin-left: 10px;
width: 150px;
height: 150px;
position: relative;
}
#empty-title-image {
font-size: 28px;
color: #ccc;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#selected-title-image {
max-width: 100%;
max-height: 100%;
}
/* Общие стили */
.bd-placeholder-img { .bd-placeholder-img {
font-size: 1.125rem; font-size: 1.125rem;
text-anchor: middle; text-anchor: middle;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none; user-select: none;
} }
body { body, main {
min-height: 100vh; min-height: 100vh;
min-height: -webkit-fill-available; min-height: -webkit-fill-available;
} }
main { main {
height: 100vh;
height: -webkit-fill-available;
max-height: 100%; max-height: 100%;
padding-top: 10px; padding-top: 10px;
overflow-x: auto; overflow-x: auto;
@ -28,21 +83,10 @@ main {
.b-example-divider { .b-example-divider {
width: 100%; width: 100%;
height: 3rem; height: 3rem;
background-color: rgba(255, 255, 255, 0.1); background-color: rgba(0, 0, 0, 0.1);
border: solid rgba(0, 0, 0, .15); border: solid rgba(0, 0, 0, 0.15);
border-width: 1px 0; border-width: 1px 0;
box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15); box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, 0.1), inset 0 .125em .5em rgba(0, 0, 0, 0.15);
}
.b-example-vr {
flex-shrink: 0;
width: 1.5rem;
height: 100vh;
}
.bi {
vertical-align: -.125em;
fill: currentColor;
} }
.nav-scroller { .nav-scroller {
@ -65,8 +109,6 @@ main {
.btn-bd-primary { .btn-bd-primary {
--bd-violet-bg: #712cf9; --bd-violet-bg: #712cf9;
--bd-violet-rgb: 112.520718, 44.062154, 249.437846;
--bs-btn-font-weight: 600; --bs-btn-font-weight: 600;
--bs-btn-color: var(--bs-white); --bs-btn-color: var(--bs-white);
--bs-btn-bg: var(--bd-violet-bg); --bs-btn-bg: var(--bd-violet-bg);
@ -74,33 +116,19 @@ main {
--bs-btn-hover-color: var(--bs-white); --bs-btn-hover-color: var(--bs-white);
--bs-btn-hover-bg: #6528e0; --bs-btn-hover-bg: #6528e0;
--bs-btn-hover-border-color: #6528e0; --bs-btn-hover-border-color: #6528e0;
--bs-btn-focus-shadow-rgb: var(--bd-violet-rgb); --bs-btn-focus-shadow-rgb: 112.520718, 44.062154, 249.437846;
--bs-btn-active-color: var(--bs-btn-hover-color); --bs-btn-active-color: var(--bs-btn-hover-color);
--bs-btn-active-bg: #5a23c8; --bs-btn-active-bg: #5a23c8;
--bs-btn-active-border-color: #5a23c8; --bs-btn-active-border-color: #5a23c8;
} }
.bd-mode-toggle {
z-index: 1500;
}
.bd-mode-toggle .dropdown-menu .active .bi {
display: block !important;
}
.bd-mode-toggle {
z-index: 1500;
}
.bd-mode-toggle .dropdown-menu .active .bi {
display: block !important;
}
.page-footer { .page-footer {
padding: 1rem; padding: 1rem;
background: #333; background: #333;
color: #fff; color: #fff;
text-align: center; text-align: center;
} }
.page-footer.fixed-bottom { .page-footer.fixed-bottom {
position: fixed; position: fixed;
left: 0; left: 0;
@ -108,12 +136,14 @@ main {
bottom: 0; bottom: 0;
z-index: 10; z-index: 10;
} }
.form-control-dark { .form-control-dark {
border-color: var(--bs-gray); border-color: var(--bs-gray);
} }
.form-control-dark:focus { .form-control-dark:focus {
border-color: #fff; border-color: #fff;
box-shadow: 0 0 0 .25rem rgba(255, 255, 255, .25); box-shadow: 0 0 0 .25rem rgba(255, 255, 255, 0.25);
} }
.text-small { .text-small {
@ -123,69 +153,7 @@ main {
.dropdown-toggle:not(:focus) { .dropdown-toggle:not(:focus) {
outline: 0; outline: 0;
} }
.list-group {
width: 100%;
max-width: 460px;
margin-inline: 1.5rem;
}
.form-check-input:checked + .form-checked-content {
opacity: .5;
}
.form-check-input-placeholder {
border-style: dashed;
}
[contenteditable]:focus {
outline: 0;
}
.list-group-checkable .list-group-item {
cursor: pointer;
}
.list-group-item-check {
position: absolute;
clip: rect(0, 0, 0, 0);
}
.list-group-item-check:hover + .list-group-item {
background-color: var(--bs-secondary-bg);
}
.list-group-item-check:checked + .list-group-item {
color: #fff;
background-color: var(--bs-primary);
border-color: var(--bs-primary);
}
.list-group-item-check[disabled] + .list-group-item,
.list-group-item-check:disabled + .list-group-item {
pointer-events: none;
filter: none;
opacity: .5;
}
.list-group-radio .list-group-item {
cursor: pointer;
border-radius: .5rem;
}
.list-group-radio .form-check-input {
z-index: 2;
margin-top: -.5em;
}
.list-group-radio .list-group-item:hover,
.list-group-radio .list-group-item:focus {
background-color: var(--bs-secondary-bg);
}
.list-group-radio .form-check-input:checked + .list-group-item {
background-color: var(--bs-body);
border-color: var(--bs-primary);
box-shadow: 0 0 0 2px var(--bs-primary);
}
.list-group-radio .form-check-input[disabled] + .list-group-item,
.list-group-radio .form-check-input:disabled + .list-group-item {
pointer-events: none;
filter: none;
opacity: .5;
}
.list-group { .list-group {
width: 100%; width: 100%;
max-width: 600px; max-width: 600px;
@ -193,12 +161,13 @@ main {
} }
.form-check-input:checked + .form-checked-content { .form-check-input:checked + .form-checked-content {
opacity: .5; opacity: 0.5;
} }
.form-check-input-placeholder { .form-check-input-placeholder {
border-style: dashed; border-style: dashed;
} }
[contenteditable]:focus { [contenteditable]:focus {
outline: 0; outline: 0;
} }
@ -206,33 +175,39 @@ main {
.list-group-checkable .list-group-item { .list-group-checkable .list-group-item {
cursor: pointer; cursor: pointer;
} }
.list-group-item-check { .list-group-item-check {
position: absolute; position: absolute;
clip: rect(0, 0, 0, 0); clip: rect(0, 0, 0, 0);
} }
.list-group-item-check:hover + .list-group-item { .list-group-item-check:hover + .list-group-item {
background-color: var(--bs-secondary-bg); background-color: var(--bs-secondary-bg);
} }
.list-group-item-check:checked + .list-group-item { .list-group-item-check:checked + .list-group-item {
color: #ffffff; color: #fff;
background-color: var(--bs-primary); background-color: var(--bs-primary);
border-color: var(--bs-primary); border-color: var(--bs-primary);
} }
.list-group-item-check[disabled] + .list-group-item, .list-group-item-check[disabled] + .list-group-item,
.list-group-item-check:disabled + .list-group-item { .list-group-item-check:disabled + .list-group-item {
pointer-events: none; pointer-events: none;
filter: none; filter: none;
opacity: .5; opacity: 0.5;
} }
.list-group-radio .list-group-item { .list-group-radio .list-group-item {
cursor: pointer; cursor: pointer;
border-radius: .5rem; border-radius: 0.5rem;
} }
.list-group-radio .form-check-input { .list-group-radio .form-check-input {
z-index: 2; z-index: 2;
margin-top: -.5em; margin-top: -0.5em;
} }
.list-group-radio .list-group-item:hover, .list-group-radio .list-group-item:hover,
.list-group-radio .list-group-item:focus { .list-group-radio .list-group-item:focus {
background-color: var(--bs-secondary-bg); background-color: var(--bs-secondary-bg);
@ -243,63 +218,61 @@ main {
border-color: var(--bs-primary); border-color: var(--bs-primary);
box-shadow: 0 0 0 2px var(--bs-primary); box-shadow: 0 0 0 2px var(--bs-primary);
} }
.list-group-radio .form-check-input[disabled] + .list-group-item, .list-group-radio .form-check-input[disabled] + .list-group-item,
.list-group-radio .form-check-input:disabled + .list-group-item { .list-group-radio .form-check-input:disabled + .list-group-item {
pointer-events: none; pointer-events: none;
filter: none; filter: none;
opacity: .5; opacity: 0.5;
}
.bd-mode-toggle {
z-index: 1500;
}
.bd-mode-toggle .dropdown-menu .active .bi {
display: block !important;
} }
html { html {
height: -webkit-fill-available; height: -webkit-fill-available;
} }
.dropdown-toggle { outline: 0; } .dropdown-toggle {
outline: 0;
}
.btn-toggle { .btn-toggle {
padding: .25rem .5rem; padding: 0.25rem 0.5rem;
font-weight: 600; font-weight: 600;
color: var(--bs-emphasis-color); color: var(--bs-emphasis-color);
background-color: transparent; background-color: transparent;
} }
.btn-toggle:hover, .btn-toggle:hover,
.btn-toggle:focus { .btn-toggle:focus {
color: rgba(var(--bs-emphasis-color-rgb), .85); color: rgba(var(--bs-emphasis-color-rgb), 0.85);
background-color: var(--bs-tertiary-bg); background-color: var(--bs-tertiary-bg);
} }
.btn-toggle::before { .btn-toggle::before {
width: 1.25em; width: 1.25em;
line-height: 0; line-height: 0;
content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%280,0,0,.5%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e"); content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba(0,0,0,.5)' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e");
transition: transform .35s ease; transition: transform 0.35s ease;
transform-origin: .5em 50%; transform-origin: 0.5em 50%;
} }
[data-bs-theme="dark"] .btn-toggle::before { [data-bs-theme="dark"] .btn-toggle::before {
content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%28255,255,255,.5%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e"); content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba(255,255,255,.5)' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e");
} }
.btn-toggle[aria-expanded="true"] { .btn-toggle[aria-expanded="true"] {
color: rgba(var(--bs-emphasis-color-rgb), .85); color: rgba(var(--bs-emphasis-color-rgb), 0.85);
} }
.btn-toggle[aria-expanded="true"]::before { .btn-toggle[aria-expanded="true"]::before {
transform: rotate(90deg); transform: rotate(90deg);
} }
.btn-toggle-nav a { .btn-toggle-nav a {
padding: .1875rem .5rem; padding: 0.1875rem 0.5rem;
margin-top: .125rem; margin-top: 0.125rem;
margin-left: 1.25rem; margin-left: 1.25rem;
} }
.btn-toggle-nav a:hover, .btn-toggle-nav a:hover,
.btn-toggle-nav a:focus { .btn-toggle-nav a:focus {
background-color: var(--bs-tertiary-bg); background-color: var(--bs-tertiary-bg);
@ -309,47 +282,6 @@ html {
overflow-y: auto; overflow-y: auto;
} }
.b-example-divider {
width: 100%;
height: 3rem;
background-color: rgba(0, 0, 0, 0.1);
border: solid rgba(0, 0, 0, .15);
border-width: 1px 0;
box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
}
.bd-mode-toggle .dropdown-menu .active .bi {
display: block !important;
}
.bd-mode-toggle {
z-index: 1500;
}
.bd-mode-toggle .dropdown-menu .active .bi {
display: block !important;
}
.form-signin {
max-width: 330px;
padding: 1rem;
}
.form-signin .form-floating:focus-within {
z-index: 2;
}
.form-signin input[type="email"] {
margin-bottom: -1px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.form-signin input[type="password"] {
margin-bottom: 10px;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.post-img { .post-img {
width: 90%; width: 90%;
height: auto; height: auto;
@ -357,29 +289,32 @@ html {
margin-left: 5%; margin-left: 5%;
border-radius: 12px; border-radius: 12px;
} }
.post-caption { .post-caption {
margin-top: 12px; margin-top: 12px;
margin-left: 5%; margin-left: 5%;
font-size: 14px; font-size: 14px;
color: rgb(255, 243, 243)7d7; color: rgb(255, 243, 243);
} }
.like-icon, .comment-icon, .share-icon { .like-icon, .comment-icon, .share-icon {
width: 24px; width: 24px;
height: 24px; height: 24px;
object-fit: cover; object-fit: cover;
margin-right: 12px; margin-right: 12px;
} }
.post-interaction { .post-interaction {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
margin-top: 12px; margin-top: 12px;
} }
.card-container { .card-container {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
.card { .card {
@ -390,9 +325,89 @@ html {
max-height: 60%; max-height: 60%;
margin-left: 15%; margin-left: 15%;
} }
.profile-img { .profile-img {
margin-top: 3%; margin-top: 3%;
width: 300px; width: 300px;
height: 300px; height: 300px;
border-radius: 50%; border-radius: 50%;
} }
.post-meta {
font-size: small;
}
.counter-block {
transition: .1s;
cursor: pointer;
}
.counter-block:hover {
background-color: #e8e8e8;
}
.post-body-img {
width: 100%;
}
.post-body a {
color: #4a9cb7;
text-decoration: none;
background-image: linear-gradient(currentColor, currentColor);
background-position: 0% 100%;
background-repeat: no-repeat;
background-size: 0% 2px;
transition: background-size .3s;
}
.post-body a:hover {
background-size: 100% 2px;
}
.post-body-text {
white-space: pre-wrap;
}
.border-radius {
border-radius: 5px;
}
.input-field {
border: 1px solid #ddd;
border-radius: 5px;
padding: 10px;
width: 100%;
}
.modal-critery {
border: 1px solid #ddd;
border-radius: 5px;
padding: 20px;
width: 100%;
}
#title-image-preview {
display: inline-block;
border: 1px solid #ddd;
border-radius: 5px;
padding: 5px;
cursor: pointer;
transition: background-color 0.3s ease;
}
#title-image-preview:hover {
background-color: #f1f1f1;
}
#selected-title-image {
display: none;
width: 100%;
height: auto;
}
#empty-title-image {
display: inline;
font-size: 2em;
}
#post-publication-button {
margin-top: 5px;
}

19
lab_3/vite.config.js Normal file
View File

@ -0,0 +1,19 @@
import { resolve } from 'path';
// eslint-disable-next-line import/no-extraneous-dependencies
import { defineConfig } from 'vite';
export default defineConfig({
build: {
soursemap: true,
emptyOutDir: true,
rollupOptions: {
input: {
index: resolve(__dirname, 'index.html'),
friends: resolve(__dirname, 'friends.html'),
mainPage: resolve(__dirname, 'mainPage.html'),
profile: resolve(__dirname, 'profile.html'),
login: resolve(__dirname, 'login.html'),
},
},
},
});

Binary file not shown.

BIN
Отчеты/лаб3.docx Normal file

Binary file not shown.