лаба 3
24
lab_3/.eslintrc.json
Normal 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"
|
||||||
|
}
|
||||||
|
}
|
Before Width: | Height: | Size: 1007 B After Width: | Height: | Size: 1007 B |
Before Width: | Height: | Size: 2.0 KiB After Width: | Height: | Size: 2.0 KiB |
30
lab_3/data.json
Normal file
Before Width: | Height: | Size: 10 KiB After Width: | Height: | Size: 10 KiB |
Before Width: | Height: | Size: 65 KiB After Width: | Height: | Size: 65 KiB |
Before Width: | Height: | Size: 20 KiB After Width: | Height: | Size: 20 KiB |
Before Width: | Height: | Size: 41 KiB After Width: | Height: | Size: 41 KiB |
Before Width: | Height: | Size: 11 KiB After Width: | Height: | Size: 11 KiB |
Before Width: | Height: | Size: 30 KiB After Width: | Height: | Size: 30 KiB |
Before Width: | Height: | Size: 8.1 KiB After Width: | Height: | Size: 8.1 KiB |
Before Width: | Height: | Size: 105 KiB After Width: | Height: | Size: 105 KiB |
Before Width: | Height: | Size: 38 KiB After Width: | Height: | Size: 38 KiB |
Before Width: | Height: | Size: 44 KiB After Width: | Height: | Size: 44 KiB |
61
lab_3/dist/assets/mainPage-9f6cc184.js
vendored
Normal file
Before Width: | Height: | Size: 110 KiB After Width: | Height: | Size: 110 KiB |
Before Width: | Height: | Size: 211 KiB After Width: | Height: | Size: 211 KiB |
5
lab_3/dist/assets/styles-6446fc66.css
vendored
Normal file
191
lab_3/dist/friends.html
vendored
Normal 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">
|
||||||
|
© 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
@ -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,/9j/4AAQSkZJRgABAQEASABIAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wgARCAEAAQADASIAAhEBAxEB/8QAHAAAAgMBAQEBAAAAAAAAAAAABAUDBgcCAQAI/8QAGQEAAwEBAQAAAAAAAAAAAAAAAQIDAAQF/9oADAMBAAIQAxAAAAEQ3OdTjqOsYD5dKuaw1eickCWk5Biu8BPJpwYAzAdpBuSRQPmfsNEJKCGUerzI9CRbYKuebtKWN0c0bIRix876jVyG1XaI6mHeM/0qR0JzRN2n4yRO/b/ML1Mi4fJWLcc3taY7MwCFSsd4vTajkpabtyI1A2pzix1NXW0y1SzenDslHRxSejFNjohTVJXHUiPo6Sy4bljkZL6T3Hvp8nViDK/1cejbnSkBvLs/dStRnzD1ACoyn4set2Hzo4oA5UoNz3gOSM8lU7ti+bUEG3oDNeqmItz8R9CnOOwPVbccvp5AVsIvOdf0DVUNI6RsTozzlv3IICoYGgjnMPO4sFcpdOalhx8lL3cm7S5TqnJ0owbMjg/y90iDBUnQQpUz2QsDo4zgYZGEo032NmmO5TUnR6FcKJThrKg7J7E+w3S+e1hGp1n57ua2zkxbwgqjMSmOkHdzISuYHUhkB0DbLrQiODsvKak3lCj7aCTrnXBEVIJ+zR6R+48KV9Ux05gUB4eV8G61XXKO9qNc0nZnbLJn5i10NBZAkKCvvKfWZyvwB0eVv1mAnvD5JLo9Or172FWd2tCh79Yg0ur26qhVztUxpBf0USHZp9KynTlv4cwNxyLW0FzVmNQJuvuj1t3B7qKX3FqWsdri4VfutAtGxMc0MY3ii+MGTUTBD+S8KW3QDLUpYwevUq7VDLC5Z/LqraO/s/q640l+fUMe0rLsNy4gZtbHle6Zn2cjS/cD8vRYfuRVSoGAWEVRQt3jJiqy41zu5OToNTRoGMqbi7HVdDn2UHkcKV1EvqQH6FlNLqFAjq9+XTzXICyxLUFLF0cnV+cWtfILYjqQfLzbQGuLtV7LpNQbQea0s6n43OdnemVevP1aRWistVtIZWhqlh52rdxXEjAK3ytWzSBsttHj33157l199zX7Qv8A3LU1F6rJcu1oG7tkf2nZyvbIHJGz++CLgjXYc/vx5Q6c1Btx2kn3qb9DFCpQfmQXb6QxfiIMZUVP1UNDtDqTn5l26YeTmsR9D2B19Ai29cRIrWugg/uTHWWhqS6puf0JTW9MGM4TG0ZlswYjo7yIOjz69MBKH0Jwi0mxSNkDN6J39x0cnncbdtqk0HnNYzqGQDryP3ETMNbxyl7BcseNY7dmqMwGx2XJOdtfEyngz1E/H5hTRM949LlaZHMspl/3Wj8vC+xWl/eQ6FC8Qbr87Tsz6gU7VJDPGs30cOJfvPe1MZy+Ps4k0vMKdbLpX6WsMCQ6VZoApn0w80AWHRaVaNxMyEzsLOuIrmHkXE8ukaaYVWqY54fb53PMnqnYpI+o0hmkhBnrz33Cv5ppee1OqUm9da+U82uDdtbKeQ4J+pLMNUbrZiRy0G2ADHlsKstDmhWKrBOs0kkM7RUSxrenjgjODrImP2E11vrJJInWVlHVsWw0XLn4qHgkTXsl1Garj5ZV6Uyi3SK6awweHngjf17TUGLqlhY1LQubxESDpUuOSuFUZ3nnb5g/YxO6e++Z90B9eTmUPX3J30vHZPcf0oIsvgq8+gqUsKbQIc/+DX6Sg+il3pXMoViepMFDCoepVJWzzEC13x50+fXrMhhaYJQ5Q7upuOtf/8QAFBABAAAAAAAAAAAAAAAAAAAAoP/aAAgBAQABBQIAH//EACMRAAICAgEEAwEBAAAAAAAAAAABAhEDEBIEEyBBITFhFCL/2gAIAQMBAT8B1L5Gj6LEfRZERPSL1QjFh7nsydNx9lFCRGF7sl8+CZL41yohn5+j7GRMePiPJwHj5jVCZkhtDepTE9UI7lE58iGTlpMfyNV4MaMcr0h/BkfIoSL1EyqtIsQoWJFamrO2UQxjWkZkUQVjVCVGRHe/DHIvWSXE/p/DJ1HL0WJ6ysUKH/kbJanjoS1YyRjhyK3V6yZDiIWsWPuD6S/ZlwcPZVmWJjW3qe2R/wAjVGCXKzlQ83H0ZcnMzeiAhbk/CyK5l0d29zRiRj6fn73B+WB1ZKfeF09+yWGjt0cbMOPgZc3PSRR9+KYpWRlR3Sxo58h6giTIfI1tkYWYp8DsfosH6VxJZbIn2QQjPkMQ0UXRyEIeexdTXolO9qIiUqHKyCFHwZkP6PwWSzkN2IscjJk5iICP/8QAIREAAgMAAwACAwEAAAAAAAAAAAECEBEDEiATIRQxYUH/2gAIAQIBAT8Bf0IV54YyNNGE0dttS31hghVhIS0TENUqaMP1UiErcRwwzCHFStLTj4+py8XxmDQvrymJnNDPHFDqNjkZTIPbX1XY03ai8PlHI7jHXGNjEyRxS6nwf0mr4lp+P/SPDn++F9DkRekYnHXFyaN7cXhF6c0uvqEMENkXt7fHI5H5hekKdYYcRO3UR+VWjZEn4mJeV9mYaaIwl4/ZhFeIiGhxMNJXN77QjsdqwdN7XFEVKAoCjhhL03UVollMXlxGjaapIiupgkM//8QAFBABAAAAAAAAAAAAAAAAAAAAoP/aAAgBAQAGPwIAH//EABQQAQAAAAAAAAAAAAAAAAAAAKD/2gAIAQEAAT8hAB//2gAMAwEAAgADAAAAEPY317mfZP0cv3ncjZff2Tu/rVfd3OXXvUPdtHlxzdH1e73Yde/z/OzqtX8oJ33fOdN/HtfDWX/vL73lcKXE+7/oauJmNLDeNYaaaNL3G0jfd9udXNvlJjQ/v+DK5XvKflzhEwHh7PoYvN7rqUvfrap74VbsKyeVKPV/yHvt/lurTrF7WuU2qaWbmJvDaPZnVe0tnK3c+D7ypf37PmNOCHGM6/C8NR7AMdrUx3ff3Xfh4+zt3bA9fbR1bncXMvvYn//EACIRAAMBAQACAgMAAwAAAAAAAAABESEQMVFBYSBx4YGR8f/aAAgBAwEBPxCj0fBQQUCFGhOV8cecIfLX4Qy+Q45se4RsT+jYpaghPgwY8xKsNWLDTFq9EfG0X8oe/wA4zRiYxcsKTOMo662v+jUXg/MQkUS8NgsFggwikgIpjUzcWjrj2+H7lMQvsKCl0iJceAQ1dApBlSiglMhr+jJ4DyWEy0PcEFh7Bqlq0gIQWmDfvjjwNjNpJFpgoEFo0atkE/y/pj8qf4iEIUotNCMQ8j0SjjMfUDD7Yx5IMEE4WkpbjRBQf6BQfqLyhSmmxDwJnm5BkFxvUk53tH2c0XtpjikKUMotHkb43CB6XDr4NfBY+oQSpEghKZAYhaewbFB2JD7j1RfPEaYPBg3koIoVQ8GMGH/a6U5yxy2nm/CQxqCoer+FcEDFkgtEGP/EAB4RAAMBAQEAAwEBAAAAAAAAAAABESEQMSBBYVFx/9oACAECAQE/EFLUUTGqIM9Jw44leCs8D8hqFnJRMbG5xBlYOMQXjoaJC494bExRStExIsf0DCKejUMCY1xpR76ZNtFRQQLRFonSBUxaSDYlTTpEUhyPONHLOfo3Yy+j/wAFx19DU0PBpSAxU0bs9EE4MTNo4GsMaGqKKcPsfckIXhcMfXMPFyiRs011/gxyJ0SI0pBPrY1uHo3BhvfiKBPRvO4G4LBB8TG+IKODwxClG6fXhR/ARYFRocD2Cznh6HBATvWgxfhj4FhhEqPR4IaJzgxzaMOJdnqINFfs/TkQQaJyEnxUExhhDwZShIYXKdmubR//xAAYEAACAwAAAAAAAAAAAAAAAAABEVGAkP/aAAgBAQABPxDG1mbJ/wD/2Q==" 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">© 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
@ -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">© 2017–2023</p>
|
||||||
|
</a>
|
||||||
|
</form>
|
||||||
|
</main>
|
||||||
|
<div class="container">
|
||||||
|
<footer class="footer mt-auto fixed bottom-0 w-100">
|
||||||
|
<div class="copywriter p-2">
|
||||||
|
© 2023 UlRent Крюков Алексей ПИбд-21 | Все права защищены
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
<script src="node_modules/bootstrap/dist/js/bootstrap.bundle.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
17
lab_2/mainPage.html → lab_3/dist/mainPage.html
vendored
@ -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
@ -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">
|
||||||
|
© 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
After Width: | Height: | Size: 10 KiB |
BIN
lab_3/images/avtar.png
Normal file
After Width: | Height: | Size: 65 KiB |
BIN
lab_3/images/downloadPhoto.png
Normal file
After Width: | Height: | Size: 45 KiB |
BIN
lab_3/images/fr1.jpg
Normal file
After Width: | Height: | Size: 20 KiB |
BIN
lab_3/images/fr10.jpg
Normal file
After Width: | Height: | Size: 41 KiB |
BIN
lab_3/images/fr3.jpg
Normal file
After Width: | Height: | Size: 11 KiB |
BIN
lab_3/images/fr4.jpg
Normal file
After Width: | Height: | Size: 30 KiB |
BIN
lab_3/images/fr5.jpg
Normal file
After Width: | Height: | Size: 8.1 KiB |
Before Width: | Height: | Size: 2.9 KiB After Width: | Height: | Size: 2.9 KiB |
BIN
lab_3/images/fr7.jpg
Normal file
After Width: | Height: | Size: 105 KiB |
BIN
lab_3/images/fr8.jpg
Normal file
After Width: | Height: | Size: 38 KiB |
BIN
lab_3/images/fr9.jpg
Normal file
After Width: | Height: | Size: 44 KiB |
Before Width: | Height: | Size: 3.1 KiB After Width: | Height: | Size: 3.1 KiB |
Before Width: | Height: | Size: 30 KiB After Width: | Height: | Size: 30 KiB |
BIN
lab_3/images/post1.jpg
Normal file
After Width: | Height: | Size: 110 KiB |
BIN
lab_3/images/post2.jpg
Normal file
After Width: | Height: | Size: 211 KiB |
@ -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
@ -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
@ -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
@ -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
@ -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
@ -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>© <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
33
lab_3/package.json
Normal 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"
|
||||||
|
}
|
||||||
|
}
|
@ -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
@ -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'),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|