лаба 3
This commit is contained in:
Алексей Крюков
parent
82d1623bbd
commit
2bde88b3c7
24
lab_3/.eslintrc.json
Normal file
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
30
lab_3/data.json
Normal file
File diff suppressed because one or more lines are too long
|
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
61
lab_3/dist/assets/mainPage-9f6cc184.js
vendored
Normal file
File diff suppressed because one or more lines are too long
|
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
5
lab_3/dist/assets/styles-6446fc66.css
vendored
Normal file
File diff suppressed because one or more lines are too long
191
lab_3/dist/friends.html
vendored
Normal file
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
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,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" alt="twbs" width="32" height="32" class="rounded-circle flex-shrink-0">
|
||||
<div class="d-flex gap-2 w-100 justify-content-between">
|
||||
<div>
|
||||
<h6 class="mb-0">Псих Джокер</h6>
|
||||
<p class="mb-0 opacity-75">фхфхфхфхффффхфхфхфххыхвххахах</p>
|
||||
</div>
|
||||
<small class="opacity-50 text-nowrap">4d</small>
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" class="list-group-item list-group-item-action d-flex gap-3 py-3" aria-current="true">
|
||||
<img src="/assets/fr7-24d2a56e.jpg" alt="twbs" width="32" height="32" class="rounded-circle flex-shrink-0">
|
||||
<div class="d-flex gap-2 w-100 justify-content-between">
|
||||
<div>
|
||||
<h6 class="mb-0">Харли Квин</h6>
|
||||
<p class="mb-0 opacity-75">Тебе напишет джокер, не отвечай ему, пупсик)</p>
|
||||
</div>
|
||||
<small class="opacity-50 text-nowrap">4d</small>
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" class="list-group-item list-group-item-action d-flex gap-3 py-3" aria-current="true">
|
||||
<img src="/assets/fr8-db8976f2.jpg" alt="twbs" width="32" height="32" class="rounded-circle flex-shrink-0">
|
||||
<div class="d-flex gap-2 w-100 justify-content-between">
|
||||
<div>
|
||||
<h6 class="mb-0">Губка Боб</h6>
|
||||
<p class="mb-0 opacity-75">Мы с Патриком жарим сосисоны, приходи</p>
|
||||
</div>
|
||||
<small class="opacity-50 text-nowrap">3d</small>
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" class="list-group-item list-group-item-action d-flex gap-3 py-3" aria-current="true">
|
||||
<img src="/assets/fr9-675abcdc.jpg" alt="twbs" width="32" height="32" class="rounded-circle flex-shrink-0">
|
||||
<div class="d-flex gap-2 w-100 justify-content-between">
|
||||
<div>
|
||||
<h6 class="mb-0">Хантер х Хантер</h6>
|
||||
<p class="mb-0 opacity-75">г доту ?</p>
|
||||
</div>
|
||||
<small class="opacity-50 text-nowrap">1w</small>
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" class="list-group-item list-group-item-action d-flex gap-3 py-3" aria-current="true">
|
||||
<img src="/assets/fr10-6c9a0f6b.jpg" alt="twbs" width="32" height="32" class="rounded-circle flex-shrink-0">
|
||||
<div class="d-flex gap-2 w-100 justify-content-between">
|
||||
<div>
|
||||
<h6 class="mb-0">Кил Луа</h6>
|
||||
<p class="mb-0 opacity-75">Я силен</p>
|
||||
</div>
|
||||
<small class="opacity-50 text-nowrap">now</small>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<footer class="d-flex flex-wrap justify-content-between align-items-center py-3 my-4 border-top">
|
||||
<div class="footer-logo col-md-4 d-flex align-items-center">
|
||||
<a href="/" class="mb-3 me-2 mb-md-0 text-body-secondary text-decoration-none lh-1">
|
||||
<svg class="bi" width="30" height="24"><use xlink:href="#bootstrap"/></svg>
|
||||
</a>
|
||||
<span class="mb-3 mb-md-0 text-body-secondary">© 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
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
17
lab_2/mainPage.html → lab_3/dist/mainPage.html
vendored
@ -3,11 +3,16 @@
|
||||
<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" />
|
||||
|
||||
<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>
|
||||
<script type="module" crossorigin src="/assets/mainPage-9f6cc184.js"></script>
|
||||
<link rel="stylesheet" href="/assets/styles-6446fc66.css">
|
||||
</head>
|
||||
<body>
|
||||
<body>
|
||||
@ -78,7 +83,7 @@
|
||||
<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">
|
||||
<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">
|
||||
@ -104,7 +109,7 @@
|
||||
<small class="opacity-50 text-nowrap">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">
|
||||
<img src="/assets/post1-6e94c164.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">
|
||||
@ -134,7 +139,7 @@
|
||||
<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">
|
||||
<img src="/assets/post2-1d8199f6.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">
|
||||
127
lab_3/dist/profile.html
vendored
Normal file
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
BIN
lab_3/images/FR2.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
BIN
lab_3/images/avtar.png
Normal file
BIN
lab_3/images/avtar.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 65 KiB |
BIN
lab_3/images/downloadPhoto.png
Normal file
BIN
lab_3/images/downloadPhoto.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 45 KiB |
BIN
lab_3/images/fr1.jpg
Normal file
BIN
lab_3/images/fr1.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
BIN
lab_3/images/fr10.jpg
Normal file
BIN
lab_3/images/fr10.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 41 KiB |
BIN
lab_3/images/fr3.jpg
Normal file
BIN
lab_3/images/fr3.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
BIN
lab_3/images/fr4.jpg
Normal file
BIN
lab_3/images/fr4.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 30 KiB |
BIN
lab_3/images/fr5.jpg
Normal file
BIN
lab_3/images/fr5.jpg
Normal file
Binary file not shown.
|
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
BIN
lab_3/images/fr7.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 105 KiB |
BIN
lab_3/images/fr8.jpg
Normal file
BIN
lab_3/images/fr8.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 38 KiB |
BIN
lab_3/images/fr9.jpg
Normal file
BIN
lab_3/images/fr9.jpg
Normal file
Binary file not shown.
|
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
BIN
lab_3/images/post1.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 110 KiB |
BIN
lab_3/images/post2.jpg
Normal file
BIN
lab_3/images/post2.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 211 KiB |
@ -223,6 +223,5 @@
|
||||
</ul>
|
||||
</footer>
|
||||
<script src="node_modules/bootstrap/dist/js/bootstrap.bundle.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
114
lab_3/js/apiendpoint.js
Normal file
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
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
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
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
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
4814
lab_3/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
33
lab_3/package.json
Normal file
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 {
|
||||
font-size: 1.125rem;
|
||||
text-anchor: middle;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
body {
|
||||
body, main {
|
||||
min-height: 100vh;
|
||||
min-height: -webkit-fill-available;
|
||||
}
|
||||
|
||||
main {
|
||||
height: 100vh;
|
||||
height: -webkit-fill-available;
|
||||
max-height: 100%;
|
||||
padding-top: 10px;
|
||||
overflow-x: auto;
|
||||
@ -28,21 +83,10 @@ main {
|
||||
.b-example-divider {
|
||||
width: 100%;
|
||||
height: 3rem;
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
border: solid rgba(0, 0, 0, .15);
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
border: solid rgba(0, 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);
|
||||
}
|
||||
|
||||
.b-example-vr {
|
||||
flex-shrink: 0;
|
||||
width: 1.5rem;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.bi {
|
||||
vertical-align: -.125em;
|
||||
fill: currentColor;
|
||||
box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, 0.1), inset 0 .125em .5em rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.nav-scroller {
|
||||
@ -65,8 +109,6 @@ main {
|
||||
|
||||
.btn-bd-primary {
|
||||
--bd-violet-bg: #712cf9;
|
||||
--bd-violet-rgb: 112.520718, 44.062154, 249.437846;
|
||||
|
||||
--bs-btn-font-weight: 600;
|
||||
--bs-btn-color: var(--bs-white);
|
||||
--bs-btn-bg: var(--bd-violet-bg);
|
||||
@ -74,33 +116,19 @@ main {
|
||||
--bs-btn-hover-color: var(--bs-white);
|
||||
--bs-btn-hover-bg: #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-bg: #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 {
|
||||
padding: 1rem;
|
||||
background: #333;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.page-footer.fixed-bottom {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
@ -108,12 +136,14 @@ main {
|
||||
bottom: 0;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.form-control-dark {
|
||||
border-color: var(--bs-gray);
|
||||
}
|
||||
|
||||
.form-control-dark:focus {
|
||||
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 {
|
||||
@ -123,69 +153,7 @@ main {
|
||||
.dropdown-toggle:not(:focus) {
|
||||
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 {
|
||||
width: 100%;
|
||||
max-width: 600px;
|
||||
@ -193,12 +161,13 @@ main {
|
||||
}
|
||||
|
||||
.form-check-input:checked + .form-checked-content {
|
||||
opacity: .5;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.form-check-input-placeholder {
|
||||
border-style: dashed;
|
||||
}
|
||||
|
||||
[contenteditable]:focus {
|
||||
outline: 0;
|
||||
}
|
||||
@ -206,33 +175,39 @@ main {
|
||||
.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: #ffffff;
|
||||
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;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.list-group-radio .list-group-item {
|
||||
cursor: pointer;
|
||||
border-radius: .5rem;
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
|
||||
.list-group-radio .form-check-input {
|
||||
z-index: 2;
|
||||
margin-top: -.5em;
|
||||
margin-top: -0.5em;
|
||||
}
|
||||
|
||||
.list-group-radio .list-group-item:hover,
|
||||
.list-group-radio .list-group-item:focus {
|
||||
background-color: var(--bs-secondary-bg);
|
||||
@ -243,63 +218,61 @@ main {
|
||||
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;
|
||||
}
|
||||
|
||||
.bd-mode-toggle {
|
||||
z-index: 1500;
|
||||
}
|
||||
|
||||
.bd-mode-toggle .dropdown-menu .active .bi {
|
||||
display: block !important;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
html {
|
||||
height: -webkit-fill-available;
|
||||
}
|
||||
|
||||
.dropdown-toggle { outline: 0; }
|
||||
.dropdown-toggle {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
.btn-toggle {
|
||||
padding: .25rem .5rem;
|
||||
padding: 0.25rem 0.5rem;
|
||||
font-weight: 600;
|
||||
color: var(--bs-emphasis-color);
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.btn-toggle:hover,
|
||||
.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);
|
||||
}
|
||||
|
||||
.btn-toggle::before {
|
||||
width: 1.25em;
|
||||
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");
|
||||
transition: transform .35s ease;
|
||||
transform-origin: .5em 50%;
|
||||
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 0.35s ease;
|
||||
transform-origin: 0.5em 50%;
|
||||
}
|
||||
|
||||
[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"] {
|
||||
color: rgba(var(--bs-emphasis-color-rgb), .85);
|
||||
color: rgba(var(--bs-emphasis-color-rgb), 0.85);
|
||||
}
|
||||
|
||||
.btn-toggle[aria-expanded="true"]::before {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
.btn-toggle-nav a {
|
||||
padding: .1875rem .5rem;
|
||||
margin-top: .125rem;
|
||||
padding: 0.1875rem 0.5rem;
|
||||
margin-top: 0.125rem;
|
||||
margin-left: 1.25rem;
|
||||
}
|
||||
|
||||
.btn-toggle-nav a:hover,
|
||||
.btn-toggle-nav a:focus {
|
||||
background-color: var(--bs-tertiary-bg);
|
||||
@ -309,47 +282,6 @@ html {
|
||||
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 {
|
||||
width: 90%;
|
||||
height: auto;
|
||||
@ -357,29 +289,32 @@ html {
|
||||
margin-left: 5%;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.post-caption {
|
||||
margin-top: 12px;
|
||||
margin-left: 5%;
|
||||
font-size: 14px;
|
||||
color: rgb(255, 243, 243)7d7;
|
||||
color: rgb(255, 243, 243);
|
||||
}
|
||||
|
||||
.like-icon, .comment-icon, .share-icon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
object-fit: cover;
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.post-interaction {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.card-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
}
|
||||
|
||||
.card {
|
||||
@ -390,9 +325,89 @@ html {
|
||||
max-height: 60%;
|
||||
margin-left: 15%;
|
||||
}
|
||||
|
||||
.profile-img {
|
||||
margin-top: 3%;
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
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
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'),
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
BIN
Отчеты/Лабораторная 2.docx
Normal file
BIN
Отчеты/Лабораторная 2.docx
Normal file
Binary file not shown.
BIN
Отчеты/лаб3.docx
Normal file
BIN
Отчеты/лаб3.docx
Normal file
Binary file not shown.
Loading…
Reference in New Issue
Block a user