IP_PIbd-21_Potapov_Frontend/feed.html

528 lines
32 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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>
<link href="./node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="./node_modules/bootstrap-icons/font/bootstrap-icons.min.css" rel="stylesheet" />
<link rel="stylesheet" href="./static/css/base.css">
<link rel="stylesheet" href="./static/css/left-menu.css">
<link rel="stylesheet" href="./static/css/center.css">
<link rel="stylesheet" href="./static/css/post.css">
<link rel="stylesheet" href="./static/css/avatar.css">
<link rel="shortcut icon" href="./static/img/favicon.svg" type="image/svg+xml">
<script src="./static/js/feed.js" type="module"></script>
<title>Новости</title>
</head>
<body class="min-vh-100 d-flex flex-column">
<header class="sticky-top">
<nav class="navbar">
<div class="container-fluid d-flex justify-content-between">
<a class="navbar-brand">
<span class="logo-small d-sm-none">нк</span>
<span class="logo-full d-none d-sm-block">неконтакте</span>
</a>
<div class="page-title position-fixed w-100 text-center">Новости</div>
<div class="dropdown">
<a class="dropdown-toggle d-flex align-items-center" href="#" role="button" id="dropdownMenuLink"
data-bs-toggle="dropdown" aria-expanded="false" style="color: white;">
<img src="./static/img/gachi.jpg"
class="user-avatar avatar-small img-fluid rounded-circle me-2">
<div class="post-author-name me-2 d-none d-md-block">
Алексей Смирнов
</div>
</a>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenuLink">
<li class="d-sm-none"><a class="dropdown-item" href="/me.html"><i
class="bi bi-person me-2"></i>Моя страница</a>
</li>
<li><a class="dropdown-item" href="#"><i class="bi bi-gear me-2"></i>Настройки</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#"><i class="bi bi-box-arrow-right me-2"></i>Выход</a></li>
</ul>
</div>
</div>
</nav>
</header>
<main class="px-1 px-sm-2 px-lg-4 pt-2 pt-sm-4 d-flex position-relative flex-fill">
<div id="left-menu"
class="p-3 d-none d-sm-flex flex-column justify-content-center align-content-around border border-dark rounded-2 position-fixed">
<a href="/me.html" class="left-menu-item d-flex rounded-2 py-1 px-2">
<i class="bi bi-person"></i>
<span class="ms-2 d-none d-lg-block">Моя страница</span>
</a>
<a href="/feed.html" class="left-menu-item d-flex rounded-2 py-1 px-2">
<i class="bi bi-layout-text-sidebar-reverse"></i>
<span class="ms-2 d-none d-lg-block">Новости</span>
</a>
<a href="/messages.html" class="left-menu-item d-flex rounded-2 py-1 px-2">
<i class="bi bi-chat-text"></i>
<span class="ms-2 d-none d-lg-block">Сообщения</span>
</a>
<a href="/friends.html" class="left-menu-item d-flex rounded-2 py-1 px-2">
<i class="bi bi-people"></i>
<span class="ms-2 d-none d-lg-block">Друзья</span>
</a>
</div>
<div class="wrapper d-flex justify-content-center">
<div class="center d-flex flex-column">
<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">
<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 class="posts-wrapper">
<div class="post mb-2 mb-sm-4 w-100 d-flex flex-column border rounded-2 border-dark">
<div
class="post-header py-1 px-2 d-flex border-bottom border-dark justify-content-between align-items-center">
<a class="d-flex justify-content-start align-items-center">
<div class="post-author-avatar-wrapper">
<img src="./static/img/korgi.jpg" class="post-author-avatar">
</div>
<div class="post-meta ms-2 d-flex flex-column justify-content-center">
<div class="post-author-name">
Алексей Смирнов
</div>
<div class="post-publication-datetime">
15 сентября, 15:22
</div>
</div>
</a>
<a>
<i class="bi bi-three-dots fs-4"></i>
</a>
</div>
<div class="post-body">
<div class="post-body-text m-2">
<p>
Корги королевская порода с дружелюбным характером
</p>
<p>
Привет, друзья! Сегодня я хочу рассказать вам о замечательной породе собак корги. Эти
милые создания с короткими лапами и длинными ушами покорили сердца многих людей, и не
зря! Корги это небольшие собаки, которые произошли из Уэльса. Они были выведены для
охоты на зайцев и других мелких животных.
</p>
</div>
<img src="./static/img/korgi.jpg" class="post-body-img img-fluid">
</div>
<div class="post-footer py-1 px-2 border-top border-dark d-flex">
<div class="counter-block likes-block px-2 me-1 d-flex align-items-center rounded-4">
<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
<g fill="none" fill-rule="evenodd">
<path d="M0 0h24v24H0z"></path>
<path
d="M16 4a5.95 5.95 0 0 0-3.89 1.7l-.12.11-.12-.11A5.96 5.96 0 0 0 7.73 4 5.73 5.73 0 0 0 2 9.72c0 3.08 1.13 4.55 6.18 8.54l2.69 2.1c.66.52 1.6.52 2.26 0l2.36-1.84.94-.74c4.53-3.64 5.57-5.1 5.57-8.06A5.73 5.73 0 0 0 16.27 4zm.27 1.8a3.93 3.93 0 0 1 3.93 3.92v.3c-.08 2.15-1.07 3.33-5.51 6.84l-2.67 2.08a.04.04 0 0 1-.04 0L9.6 17.1l-.87-.7C4.6 13.1 3.8 11.98 3.8 9.73A3.93 3.93 0 0 1 7.73 5.8c1.34 0 2.51.62 3.57 1.92a.9.9 0 0 0 1.4-.01c1.04-1.3 2.2-1.91 3.57-1.91z"
fill="currentColor" fill-rule="nonzero"></path>
</g>
</svg>
<span class="count ms-1">734</span>
</div>
<div class="counter-block comments-block px-2 me-1 d-flex align-items-center rounded-4">
<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
<g fill="none" fill-rule="evenodd">
<path d="M0 0h24v24H0z"></path>
<path
d="M16.9 4H7.1c-1.15 0-1.73.11-2.35.44-.56.3-1 .75-1.31 1.31C3.11 6.37 3 6.95 3 8.1v5.8c0 1.15.11 1.73.44 2.35.3.56.75 1 1.31 1.31l.15.07c.51.25 1.04.35 1.95.37h.25v2.21c0 .44.17.85.47 1.16l.12.1c.64.55 1.6.52 2.21-.08L13.37 18h3.53c1.15 0 1.73-.11 2.35-.44.56-.3 1-.75 1.31-1.31.33-.62.44-1.2.44-2.35V8.1c0-1.15-.11-1.73-.44-2.35a3.17 3.17 0 0 0-1.31-1.31A4.51 4.51 0 0 0 16.9 4zM6.9 5.8h9.99c.88 0 1.18.06 1.5.23.25.13.44.32.57.57.17.32.23.62.23 1.5v6.16c-.02.61-.09.87-.23 1.14-.13.25-.32.44-.57.57-.32.17-.62.23-1.5.23h-4.02a.9.9 0 0 0-.51.26l-3.47 3.4V17.1c0-.5-.4-.9-.9-.9H6.74a2.3 2.3 0 0 1-1.14-.23 1.37 1.37 0 0 1-.57-.57c-.17-.32-.23-.62-.23-1.5V7.74c.02-.61.09-.87.23-1.14.13-.25.32-.44.57-.57.3-.16.58-.22 1.31-.23z"
fill="currentColor" fill-rule="nonzero"></path>
</g>
</svg>
<span class="count ms-1">344</span>
</div>
<div class="counter-block replies-block px-2 d-flex align-items-center rounded-4">
<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
<g fill="none" fill-rule="evenodd">
<path d="M0 0h24v24H0z"></path>
<path
d="M12 3.73c-1.12.07-2 1-2 2.14v2.12h-.02a9.9 9.9 0 0 0-7.83 10.72.9.9 0 0 0 1.61.46l.19-.24a9.08 9.08 0 0 1 5.84-3.26l.2-.03.01 2.5a2.15 2.15 0 0 0 3.48 1.69l7.82-6.14a2.15 2.15 0 0 0 0-3.38l-7.82-6.13c-.38-.3-.85-.46-1.33-.46zm.15 1.79c.08 0 .15.03.22.07l7.82 6.14a.35.35 0 0 1 0 .55l-7.82 6.13a.35.35 0 0 1-.57-.28V14.7a.9.9 0 0 0-.92-.9h-.23l-.34.02c-2.28.14-4.4.98-6.12 2.36l-.17.15.02-.14a8.1 8.1 0 0 1 6.97-6.53.9.9 0 0 0 .79-.9V5.87c0-.2.16-.35.35-.35z"
fill="currentColor" fill-rule="nonzero"></path>
</g>
</svg>
<span class="count ms-1">1</span>
</div>
</div>
</div>
<div class="post mb-2 mb-sm-4 w-100 d-flex flex-column border rounded-2 border-dark">
<div
class="post-header py-1 px-2 d-flex border-bottom border-dark justify-content-between align-items-center">
<a class="d-flex justify-content-start align-items-center">
<img src="./static/img/polina_krotova.jpg"
class="post-author-avatar avatar-small img-fluid rounded-circle">
<div class="post-meta ms-2 d-flex flex-column justify-content-center">
<div class="post-author-name">
Полина Кротова
</div>
<div class="post-publication-datetime">
15 сентября, 15:22
</div>
</div>
</a>
<a>
<i class="bi bi-three-dots fs-4"></i>
</a>
</div>
<div class="post-body">
<div class="post-body-text m-2">
<p>
Самореализация: путь к успеху и счастью
</p>
<p>
Привет, друзья! Сегодня мы поговорим о таком важном аспекте нашей жизни, как
самореализация. Многие из нас задумываются о том, как достичь гармонии в жизни и
реализовать свои мечты. В этом посте мы рассмотрим основные аспекты самореализации и
дадим советы, которые помогут вам найти свой путь к счастью.
</p>
</div>
<img src="./static/img/samoreal.jpeg" class="post-body-img img-fluid">
</div>
<div class="post-footer py-1 px-2 border-top border-dark d-flex">
<div class="counter-block likes-block px-2 me-1 d-flex align-items-center rounded-4">
<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
<g fill="none" fill-rule="evenodd">
<path d="M0 0h24v24H0z"></path>
<path
d="M16 4a5.95 5.95 0 0 0-3.89 1.7l-.12.11-.12-.11A5.96 5.96 0 0 0 7.73 4 5.73 5.73 0 0 0 2 9.72c0 3.08 1.13 4.55 6.18 8.54l2.69 2.1c.66.52 1.6.52 2.26 0l2.36-1.84.94-.74c4.53-3.64 5.57-5.1 5.57-8.06A5.73 5.73 0 0 0 16.27 4zm.27 1.8a3.93 3.93 0 0 1 3.93 3.92v.3c-.08 2.15-1.07 3.33-5.51 6.84l-2.67 2.08a.04.04 0 0 1-.04 0L9.6 17.1l-.87-.7C4.6 13.1 3.8 11.98 3.8 9.73A3.93 3.93 0 0 1 7.73 5.8c1.34 0 2.51.62 3.57 1.92a.9.9 0 0 0 1.4-.01c1.04-1.3 2.2-1.91 3.57-1.91z"
fill="currentColor" fill-rule="nonzero"></path>
</g>
</svg>
<span class="count ms-1">734</span>
</div>
<div class="counter-block comments-block px-2 me-1 d-flex align-items-center rounded-4">
<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
<g fill="none" fill-rule="evenodd">
<path d="M0 0h24v24H0z"></path>
<path
d="M16.9 4H7.1c-1.15 0-1.73.11-2.35.44-.56.3-1 .75-1.31 1.31C3.11 6.37 3 6.95 3 8.1v5.8c0 1.15.11 1.73.44 2.35.3.56.75 1 1.31 1.31l.15.07c.51.25 1.04.35 1.95.37h.25v2.21c0 .44.17.85.47 1.16l.12.1c.64.55 1.6.52 2.21-.08L13.37 18h3.53c1.15 0 1.73-.11 2.35-.44.56-.3 1-.75 1.31-1.31.33-.62.44-1.2.44-2.35V8.1c0-1.15-.11-1.73-.44-2.35a3.17 3.17 0 0 0-1.31-1.31A4.51 4.51 0 0 0 16.9 4zM6.9 5.8h9.99c.88 0 1.18.06 1.5.23.25.13.44.32.57.57.17.32.23.62.23 1.5v6.16c-.02.61-.09.87-.23 1.14-.13.25-.32.44-.57.57-.32.17-.62.23-1.5.23h-4.02a.9.9 0 0 0-.51.26l-3.47 3.4V17.1c0-.5-.4-.9-.9-.9H6.74a2.3 2.3 0 0 1-1.14-.23 1.37 1.37 0 0 1-.57-.57c-.17-.32-.23-.62-.23-1.5V7.74c.02-.61.09-.87.23-1.14.13-.25.32-.44.57-.57.3-.16.58-.22 1.31-.23z"
fill="currentColor" fill-rule="nonzero"></path>
</g>
</svg>
<span class="count ms-1">344</span>
</div>
<div class="counter-block replies-block px-2 d-flex align-items-center rounded-4">
<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
<g fill="none" fill-rule="evenodd">
<path d="M0 0h24v24H0z"></path>
<path
d="M12 3.73c-1.12.07-2 1-2 2.14v2.12h-.02a9.9 9.9 0 0 0-7.83 10.72.9.9 0 0 0 1.61.46l.19-.24a9.08 9.08 0 0 1 5.84-3.26l.2-.03.01 2.5a2.15 2.15 0 0 0 3.48 1.69l7.82-6.14a2.15 2.15 0 0 0 0-3.38l-7.82-6.13c-.38-.3-.85-.46-1.33-.46zm.15 1.79c.08 0 .15.03.22.07l7.82 6.14a.35.35 0 0 1 0 .55l-7.82 6.13a.35.35 0 0 1-.57-.28V14.7a.9.9 0 0 0-.92-.9h-.23l-.34.02c-2.28.14-4.4.98-6.12 2.36l-.17.15.02-.14a8.1 8.1 0 0 1 6.97-6.53.9.9 0 0 0 .79-.9V5.87c0-.2.16-.35.35-.35z"
fill="currentColor" fill-rule="nonzero"></path>
</g>
</svg>
<span class="count ms-1">1</span>
</div>
</div>
</div>
<div class="post mb-2 mb-sm-4 w-100 d-flex flex-column border rounded-2 border-dark">
<div
class="post-header py-1 px-2 d-flex border-bottom border-dark justify-content-between align-items-center">
<a class="d-flex justify-content-start align-items-center">
<img src="./static/img/gachi.jpg"
class="post-author-avatar avatar-small img-fluid rounded-circle">
<div class="post-meta ms-2 d-flex flex-column justify-content-center">
<div class="post-author-name">
Алексей Смирнов
</div>
<div class="post-publication-datetime">
15 сентября, 15:22
</div>
</div>
</a>
<a>
<i class="bi bi-three-dots fs-4"></i>
</a>
</div>
<div class="post-body">
<div class="post-body-text m-2">
<p>
Корги - это не просто милые собачки, а настоящие друзья, которые всегда готовы составить
компанию в любых приключениях. Они очень умны и легко обучаемы, что делает их идеальными
питомцами для семей с детьми. Однако, несмотря на свою популярность, корги все же
остаются собаками, которые нуждаются в правильном уходе и заботе.
</p>
</div>
</div>
<div class="post-footer py-1 px-2 border-top border-dark d-flex">
<div class="counter-block likes-block px-2 me-1 d-flex align-items-center rounded-4">
<img src="./static/img/heart.svg" style="width: 24px;">
<span class="count ms-1">734</span>
</div>
<div class="counter-block comments-block px-2 me-1 d-flex align-items-center rounded-4">
<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
<g fill="none" fill-rule="evenodd">
<path d="M0 0h24v24H0z"></path>
<path
d="M16.9 4H7.1c-1.15 0-1.73.11-2.35.44-.56.3-1 .75-1.31 1.31C3.11 6.37 3 6.95 3 8.1v5.8c0 1.15.11 1.73.44 2.35.3.56.75 1 1.31 1.31l.15.07c.51.25 1.04.35 1.95.37h.25v2.21c0 .44.17.85.47 1.16l.12.1c.64.55 1.6.52 2.21-.08L13.37 18h3.53c1.15 0 1.73-.11 2.35-.44.56-.3 1-.75 1.31-1.31.33-.62.44-1.2.44-2.35V8.1c0-1.15-.11-1.73-.44-2.35a3.17 3.17 0 0 0-1.31-1.31A4.51 4.51 0 0 0 16.9 4zM6.9 5.8h9.99c.88 0 1.18.06 1.5.23.25.13.44.32.57.57.17.32.23.62.23 1.5v6.16c-.02.61-.09.87-.23 1.14-.13.25-.32.44-.57.57-.32.17-.62.23-1.5.23h-4.02a.9.9 0 0 0-.51.26l-3.47 3.4V17.1c0-.5-.4-.9-.9-.9H6.74a2.3 2.3 0 0 1-1.14-.23 1.37 1.37 0 0 1-.57-.57c-.17-.32-.23-.62-.23-1.5V7.74c.02-.61.09-.87.23-1.14.13-.25.32-.44.57-.57.3-.16.58-.22 1.31-.23z"
fill="currentColor" fill-rule="nonzero"></path>
</g>
</svg>
<span class="count ms-1">344</span>
</div>
<div class="counter-block replies-block px-2 d-flex align-items-center rounded-4">
<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
<g fill="none" fill-rule="evenodd">
<path d="M0 0h24v24H0z"></path>
<path
d="M12 3.73c-1.12.07-2 1-2 2.14v2.12h-.02a9.9 9.9 0 0 0-7.83 10.72.9.9 0 0 0 1.61.46l.19-.24a9.08 9.08 0 0 1 5.84-3.26l.2-.03.01 2.5a2.15 2.15 0 0 0 3.48 1.69l7.82-6.14a2.15 2.15 0 0 0 0-3.38l-7.82-6.13c-.38-.3-.85-.46-1.33-.46zm.15 1.79c.08 0 .15.03.22.07l7.82 6.14a.35.35 0 0 1 0 .55l-7.82 6.13a.35.35 0 0 1-.57-.28V14.7a.9.9 0 0 0-.92-.9h-.23l-.34.02c-2.28.14-4.4.98-6.12 2.36l-.17.15.02-.14a8.1 8.1 0 0 1 6.97-6.53.9.9 0 0 0 .79-.9V5.87c0-.2.16-.35.35-.35z"
fill="currentColor" fill-rule="nonzero"></path>
</g>
</svg>
<span class="count ms-1">1</span>
</div>
</div>
</div>
<div class="post mb-2 mb-sm-4 w-100 d-flex flex-column border rounded-2 border-dark">
<div
class="post-header py-1 px-2 d-flex border-bottom border-dark justify-content-between align-items-center">
<a class="d-flex justify-content-start align-items-center">
<img src="./static/img/selivan_troickiy.jpg"
class="post-author-avatar avatar-small img-fluid rounded-circle">
<div class="post-meta ms-2 d-flex flex-column justify-content-center">
<div class="post-author-name">
Селиван Троицкий
</div>
<div class="post-publication-datetime">
15 сентября, 15:22
</div>
</div>
</a>
<a>
<i class="bi bi-three-dots fs-4"></i>
</a>
</div>
<div class="post-body">
<div class="post-body-text m-2">
<p>
Ульяновский политехнический университет - это одно из ведущих образовательных учреждений
России, которое предлагает широкий спектр образовательных программ для студентов всех
возрастов. Университет был основан в 1957 году и с тех пор выпустил тысячи
квалифицированных специалистов. Сегодня в университете обучается более 5000 студентов,
которые могут выбрать из 15 направлений подготовки бакалавров, 10 направлений подготовки
магистров и 5 специальностей.
</p>
</div>
</div>
<div class="post-footer py-1 px-2 border-top border-dark d-flex">
<div class="counter-block likes-block px-2 me-1 d-flex align-items-center rounded-4">
<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
<g fill="none" fill-rule="evenodd">
<path d="M0 0h24v24H0z"></path>
<path
d="M16 4a5.95 5.95 0 0 0-3.89 1.7l-.12.11-.12-.11A5.96 5.96 0 0 0 7.73 4 5.73 5.73 0 0 0 2 9.72c0 3.08 1.13 4.55 6.18 8.54l2.69 2.1c.66.52 1.6.52 2.26 0l2.36-1.84.94-.74c4.53-3.64 5.57-5.1 5.57-8.06A5.73 5.73 0 0 0 16.27 4zm.27 1.8a3.93 3.93 0 0 1 3.93 3.92v.3c-.08 2.15-1.07 3.33-5.51 6.84l-2.67 2.08a.04.04 0 0 1-.04 0L9.6 17.1l-.87-.7C4.6 13.1 3.8 11.98 3.8 9.73A3.93 3.93 0 0 1 7.73 5.8c1.34 0 2.51.62 3.57 1.92a.9.9 0 0 0 1.4-.01c1.04-1.3 2.2-1.91 3.57-1.91z"
fill="currentColor" fill-rule="nonzero"></path>
</g>
</svg>
<span class="count ms-1">734</span>
</div>
<div class="counter-block comments-block px-2 me-1 d-flex align-items-center rounded-4">
<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
<g fill="none" fill-rule="evenodd">
<path d="M0 0h24v24H0z"></path>
<path
d="M16.9 4H7.1c-1.15 0-1.73.11-2.35.44-.56.3-1 .75-1.31 1.31C3.11 6.37 3 6.95 3 8.1v5.8c0 1.15.11 1.73.44 2.35.3.56.75 1 1.31 1.31l.15.07c.51.25 1.04.35 1.95.37h.25v2.21c0 .44.17.85.47 1.16l.12.1c.64.55 1.6.52 2.21-.08L13.37 18h3.53c1.15 0 1.73-.11 2.35-.44.56-.3 1-.75 1.31-1.31.33-.62.44-1.2.44-2.35V8.1c0-1.15-.11-1.73-.44-2.35a3.17 3.17 0 0 0-1.31-1.31A4.51 4.51 0 0 0 16.9 4zM6.9 5.8h9.99c.88 0 1.18.06 1.5.23.25.13.44.32.57.57.17.32.23.62.23 1.5v6.16c-.02.61-.09.87-.23 1.14-.13.25-.32.44-.57.57-.32.17-.62.23-1.5.23h-4.02a.9.9 0 0 0-.51.26l-3.47 3.4V17.1c0-.5-.4-.9-.9-.9H6.74a2.3 2.3 0 0 1-1.14-.23 1.37 1.37 0 0 1-.57-.57c-.17-.32-.23-.62-.23-1.5V7.74c.02-.61.09-.87.23-1.14.13-.25.32-.44.57-.57.3-.16.58-.22 1.31-.23z"
fill="currentColor" fill-rule="nonzero"></path>
</g>
</svg>
<span class="count ms-1">344</span>
</div>
<div class="counter-block replies-block px-2 d-flex align-items-center rounded-4">
<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
<g fill="none" fill-rule="evenodd">
<path d="M0 0h24v24H0z"></path>
<path
d="M12 3.73c-1.12.07-2 1-2 2.14v2.12h-.02a9.9 9.9 0 0 0-7.83 10.72.9.9 0 0 0 1.61.46l.19-.24a9.08 9.08 0 0 1 5.84-3.26l.2-.03.01 2.5a2.15 2.15 0 0 0 3.48 1.69l7.82-6.14a2.15 2.15 0 0 0 0-3.38l-7.82-6.13c-.38-.3-.85-.46-1.33-.46zm.15 1.79c.08 0 .15.03.22.07l7.82 6.14a.35.35 0 0 1 0 .55l-7.82 6.13a.35.35 0 0 1-.57-.28V14.7a.9.9 0 0 0-.92-.9h-.23l-.34.02c-2.28.14-4.4.98-6.12 2.36l-.17.15.02-.14a8.1 8.1 0 0 1 6.97-6.53.9.9 0 0 0 .79-.9V5.87c0-.2.16-.35.35-.35z"
fill="currentColor" fill-rule="nonzero"></path>
</g>
</svg>
<span class="count ms-1">1</span>
</div>
</div>
</div>
<div class="post mb-2 mb-sm-4 w-100 d-flex flex-column border rounded-2 border-dark">
<div
class="post-header py-1 px-2 d-flex border-bottom border-dark justify-content-between align-items-center">
<a class="d-flex justify-content-start align-items-center">
<img src="./static/img/gachi.jpg"
class="post-author-avatar avatar-small img-fluid rounded-circle">
<div class="post-meta ms-2 d-flex flex-column justify-content-center">
<div class="post-author-name">
Алексей Смирнов
</div>
<div class="post-publication-datetime">
15 сентября, 15:22
</div>
</div>
</a>
<a>
<i class="bi bi-three-dots fs-4"></i>
</a>
</div>
<div class="post-body">
<img src="./static/img/korgi.jpg" class="post-body-img img-fluid">
</div>
<div class="post-footer py-1 px-2 border-top border-dark d-flex">
<div class="counter-block likes-block px-2 me-1 d-flex align-items-center rounded-4">
<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
<g fill="none" fill-rule="evenodd">
<path d="M0 0h24v24H0z"></path>
<path
d="M16 4a5.95 5.95 0 0 0-3.89 1.7l-.12.11-.12-.11A5.96 5.96 0 0 0 7.73 4 5.73 5.73 0 0 0 2 9.72c0 3.08 1.13 4.55 6.18 8.54l2.69 2.1c.66.52 1.6.52 2.26 0l2.36-1.84.94-.74c4.53-3.64 5.57-5.1 5.57-8.06A5.73 5.73 0 0 0 16.27 4zm.27 1.8a3.93 3.93 0 0 1 3.93 3.92v.3c-.08 2.15-1.07 3.33-5.51 6.84l-2.67 2.08a.04.04 0 0 1-.04 0L9.6 17.1l-.87-.7C4.6 13.1 3.8 11.98 3.8 9.73A3.93 3.93 0 0 1 7.73 5.8c1.34 0 2.51.62 3.57 1.92a.9.9 0 0 0 1.4-.01c1.04-1.3 2.2-1.91 3.57-1.91z"
fill="currentColor" fill-rule="nonzero"></path>
</g>
</svg>
<span class="count ms-1">734</span>
</div>
<div class="counter-block comments-block px-2 me-1 d-flex align-items-center rounded-4">
<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
<g fill="none" fill-rule="evenodd">
<path d="M0 0h24v24H0z"></path>
<path
d="M16.9 4H7.1c-1.15 0-1.73.11-2.35.44-.56.3-1 .75-1.31 1.31C3.11 6.37 3 6.95 3 8.1v5.8c0 1.15.11 1.73.44 2.35.3.56.75 1 1.31 1.31l.15.07c.51.25 1.04.35 1.95.37h.25v2.21c0 .44.17.85.47 1.16l.12.1c.64.55 1.6.52 2.21-.08L13.37 18h3.53c1.15 0 1.73-.11 2.35-.44.56-.3 1-.75 1.31-1.31.33-.62.44-1.2.44-2.35V8.1c0-1.15-.11-1.73-.44-2.35a3.17 3.17 0 0 0-1.31-1.31A4.51 4.51 0 0 0 16.9 4zM6.9 5.8h9.99c.88 0 1.18.06 1.5.23.25.13.44.32.57.57.17.32.23.62.23 1.5v6.16c-.02.61-.09.87-.23 1.14-.13.25-.32.44-.57.57-.32.17-.62.23-1.5.23h-4.02a.9.9 0 0 0-.51.26l-3.47 3.4V17.1c0-.5-.4-.9-.9-.9H6.74a2.3 2.3 0 0 1-1.14-.23 1.37 1.37 0 0 1-.57-.57c-.17-.32-.23-.62-.23-1.5V7.74c.02-.61.09-.87.23-1.14.13-.25.32-.44.57-.57.3-.16.58-.22 1.31-.23z"
fill="currentColor" fill-rule="nonzero"></path>
</g>
</svg>
<span class="count ms-1">344</span>
</div>
<div class="counter-block replies-block px-2 d-flex align-items-center rounded-4">
<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
<g fill="none" fill-rule="evenodd">
<path d="M0 0h24v24H0z"></path>
<path
d="M12 3.73c-1.12.07-2 1-2 2.14v2.12h-.02a9.9 9.9 0 0 0-7.83 10.72.9.9 0 0 0 1.61.46l.19-.24a9.08 9.08 0 0 1 5.84-3.26l.2-.03.01 2.5a2.15 2.15 0 0 0 3.48 1.69l7.82-6.14a2.15 2.15 0 0 0 0-3.38l-7.82-6.13c-.38-.3-.85-.46-1.33-.46zm.15 1.79c.08 0 .15.03.22.07l7.82 6.14a.35.35 0 0 1 0 .55l-7.82 6.13a.35.35 0 0 1-.57-.28V14.7a.9.9 0 0 0-.92-.9h-.23l-.34.02c-2.28.14-4.4.98-6.12 2.36l-.17.15.02-.14a8.1 8.1 0 0 1 6.97-6.53.9.9 0 0 0 .79-.9V5.87c0-.2.16-.35.35-.35z"
fill="currentColor" fill-rule="nonzero"></path>
</g>
</svg>
<span class="count ms-1">1</span>
</div>
</div>
</div>
<div class="post mb-2 mb-sm-4 w-100 d-flex flex-column border rounded-2 border-dark">
<div
class="post-header py-1 px-2 d-flex border-bottom border-dark justify-content-between align-items-center">
<a class="d-flex justify-content-start align-items-center">
<img src="./static/img/valeriy_nikiforov.jpg"
class="post-author-avatar avatar-small img-fluid rounded-circle">
<div class="post-meta ms-2 d-flex flex-column justify-content-center">
<div class="post-author-name">
Валерий Никифоров
</div>
<div class="post-publication-datetime">
15 сентября, 15:22
</div>
</div>
</a>
<a>
<i class="bi bi-three-dots fs-4"></i>
</a>
</div>
<div class="post-body">
<div class="post-body-text m-2">
<p>
Крутое фото - зацените!
</p>
</div>
<img src="./static/img/gachi.jpg" class="post-body-img img-fluid">
</div>
<div class="post-footer py-1 px-2 border-top border-dark d-flex">
<div class="counter-block likes-block px-2 me-1 d-flex align-items-center rounded-4">
<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
<g fill="none" fill-rule="evenodd">
<path d="M0 0h24v24H0z"></path>
<path
d="M16 4a5.95 5.95 0 0 0-3.89 1.7l-.12.11-.12-.11A5.96 5.96 0 0 0 7.73 4 5.73 5.73 0 0 0 2 9.72c0 3.08 1.13 4.55 6.18 8.54l2.69 2.1c.66.52 1.6.52 2.26 0l2.36-1.84.94-.74c4.53-3.64 5.57-5.1 5.57-8.06A5.73 5.73 0 0 0 16.27 4zm.27 1.8a3.93 3.93 0 0 1 3.93 3.92v.3c-.08 2.15-1.07 3.33-5.51 6.84l-2.67 2.08a.04.04 0 0 1-.04 0L9.6 17.1l-.87-.7C4.6 13.1 3.8 11.98 3.8 9.73A3.93 3.93 0 0 1 7.73 5.8c1.34 0 2.51.62 3.57 1.92a.9.9 0 0 0 1.4-.01c1.04-1.3 2.2-1.91 3.57-1.91z"
fill="currentColor" fill-rule="nonzero"></path>
</g>
</svg>
<span class="count ms-1">734</span>
</div>
<div class="counter-block comments-block px-2 me-1 d-flex align-items-center rounded-4">
<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
<g fill="none" fill-rule="evenodd">
<path d="M0 0h24v24H0z"></path>
<path
d="M16.9 4H7.1c-1.15 0-1.73.11-2.35.44-.56.3-1 .75-1.31 1.31C3.11 6.37 3 6.95 3 8.1v5.8c0 1.15.11 1.73.44 2.35.3.56.75 1 1.31 1.31l.15.07c.51.25 1.04.35 1.95.37h.25v2.21c0 .44.17.85.47 1.16l.12.1c.64.55 1.6.52 2.21-.08L13.37 18h3.53c1.15 0 1.73-.11 2.35-.44.56-.3 1-.75 1.31-1.31.33-.62.44-1.2.44-2.35V8.1c0-1.15-.11-1.73-.44-2.35a3.17 3.17 0 0 0-1.31-1.31A4.51 4.51 0 0 0 16.9 4zM6.9 5.8h9.99c.88 0 1.18.06 1.5.23.25.13.44.32.57.57.17.32.23.62.23 1.5v6.16c-.02.61-.09.87-.23 1.14-.13.25-.32.44-.57.57-.32.17-.62.23-1.5.23h-4.02a.9.9 0 0 0-.51.26l-3.47 3.4V17.1c0-.5-.4-.9-.9-.9H6.74a2.3 2.3 0 0 1-1.14-.23 1.37 1.37 0 0 1-.57-.57c-.17-.32-.23-.62-.23-1.5V7.74c.02-.61.09-.87.23-1.14.13-.25.32-.44.57-.57.3-.16.58-.22 1.31-.23z"
fill="currentColor" fill-rule="nonzero"></path>
</g>
</svg>
<span class="count ms-1">344</span>
</div>
<div class="counter-block replies-block px-2 d-flex align-items-center rounded-4">
<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
<g fill="none" fill-rule="evenodd">
<path d="M0 0h24v24H0z"></path>
<path
d="M12 3.73c-1.12.07-2 1-2 2.14v2.12h-.02a9.9 9.9 0 0 0-7.83 10.72.9.9 0 0 0 1.61.46l.19-.24a9.08 9.08 0 0 1 5.84-3.26l.2-.03.01 2.5a2.15 2.15 0 0 0 3.48 1.69l7.82-6.14a2.15 2.15 0 0 0 0-3.38l-7.82-6.13c-.38-.3-.85-.46-1.33-.46zm.15 1.79c.08 0 .15.03.22.07l7.82 6.14a.35.35 0 0 1 0 .55l-7.82 6.13a.35.35 0 0 1-.57-.28V14.7a.9.9 0 0 0-.92-.9h-.23l-.34.02c-2.28.14-4.4.98-6.12 2.36l-.17.15.02-.14a8.1 8.1 0 0 1 6.97-6.53.9.9 0 0 0 .79-.9V5.87c0-.2.16-.35.35-.35z"
fill="currentColor" fill-rule="nonzero"></path>
</g>
</svg>
<span class="count ms-1">1</span>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
<div class="bottom-menu d-flex d-sm-none w-100 sticky-bottom justify-content-around">
<a href="/feed.html" class="bottom-menu-item d-flex flex-column rounded-2 align-items-center">
<i class="bi bi-layout-text-sidebar-reverse fs-4"></i>
<span>Новости</span>
</a>
<a href="/messages.html" class="bottom-menu-item d-flex flex-column rounded-2 align-items-center">
<i class="bi bi-chat-text fs-4"></i>
<span>Чаты</span>
</a>
<a href="/friends.html" class="bottom-menu-item d-flex flex-column rounded-2 align-items-center">
<i class="bi bi-people fs-4"></i>
<span>Друзья</span>
</a>
</div>
<footer class="py-2 d-none d-sm-flex justify-content-center border-top border-dark">
<span>&copy; <span id="current-year"></span> Неконтакте</span>
</footer>
</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>