282 lines
16 KiB
HTML
282 lines
16 KiB
HTML
<!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">
|
||
<title>Неконтакте</title>
|
||
</head>
|
||
|
||
<body>
|
||
<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><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">
|
||
<div id="left-menu"
|
||
class="p-3 d-none d-lg-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">Моя страница</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">Новости</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">Сообщения</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">Друзья</span>
|
||
</a>
|
||
</div>
|
||
<div class="wrapper d-flex justify-content-center">
|
||
<div class="center">
|
||
<div class="user-profile p-3 mb-2 mb-sm-4 w-100 d-flex border rounded-2 border-dark">
|
||
<img src="./static/img/gachi.jpg" class="user-photo img-fluid rounded-2 h-25 me-5">
|
||
<div class="user-meta-wrapper d-flex flex-column">
|
||
<span class="fs-5 mb-2">Алексей Смирнов</span>
|
||
<span style="font-size: small; font-style: italic;" class="mb-2">Прежде чем задать вопрос,
|
||
подумай, хочешь ли
|
||
ты знать на него
|
||
правдивый
|
||
ответ...</span>
|
||
<span style="font-size: small;"><i class="bi bi-geo-alt me-1"></i>Ульяновск</span>
|
||
<span style="font-size: small;"><i class="bi bi-cake2 me-1"></i>23.04.1998г.</span>
|
||
<span style="font-size: small;"><i class="bi bi-people me-1"></i>234 друга</span>
|
||
</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>
|
||
<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/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/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>
|
||
</div>
|
||
|
||
</main>
|
||
<footer class="py-2 d-flex justify-content-center border-top border-dark">
|
||
<span>© <span id="current-year"></span> Неконтакте</span>
|
||
</footer>
|
||
</body>
|
||
<script>document.getElementById('current-year').innerHTML = new Date().getFullYear();</script>
|
||
|
||
</html>
|