Создан компонет счетчика сайта
This commit is contained in:
Web-serfer
parent
54b92c3015
commit
95c7b64d4c
11 changed files with 425 additions and 31 deletions
|
|
@ -1,5 +1,6 @@
|
|||
---
|
||||
import { COMPANY } from '@constants';
|
||||
import VisitorCounter from './VisitorCounter.astro';
|
||||
|
||||
const sectionsLinks = [
|
||||
{ label: 'Услуги', href: '/services' },
|
||||
|
|
@ -25,10 +26,8 @@ const currentYear = new Date().getFullYear().toString();
|
|||
<footer class="footer">
|
||||
<div class="site-container footer-container">
|
||||
|
||||
<!-- Верхняя часть футера (Колонки) -->
|
||||
<div class="footer-top">
|
||||
|
||||
<!-- Колонка 1: Бренд и описание -->
|
||||
<div class="footer-col brand-col">
|
||||
<a href="/" class="footer-logo">Автоюрист086</a>
|
||||
<p class="brand-desc">
|
||||
|
|
@ -38,7 +37,6 @@ const currentYear = new Date().getFullYear().toString();
|
|||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Колонка 2: Разделы и Разное -->
|
||||
<div class="footer-col links-cols">
|
||||
<div class="footer-links-group">
|
||||
<h4 class="col-title">Разделы</h4>
|
||||
|
|
@ -58,13 +56,11 @@ const currentYear = new Date().getFullYear().toString();
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Колонка 3: Контакты -->
|
||||
<div class="footer-col">
|
||||
<h4 class="col-title">Связь с нами</h4>
|
||||
<p class="address">{COMPANY.address}</p>
|
||||
<a href={`tel:${COMPANY.phoneClean}`} class="footer-phone">{COMPANY.phone}</a>
|
||||
|
||||
<!-- Иконка "Поделиться" -->
|
||||
<button class="share-btn" aria-label="Share">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<circle cx="18" cy="5" r="3"></circle>
|
||||
|
|
@ -78,9 +74,9 @@ const currentYear = new Date().getFullYear().toString();
|
|||
|
||||
</div>
|
||||
|
||||
<!-- Нижняя часть футера (Копирайт) -->
|
||||
<div class="footer-bottom">
|
||||
<p class="copyright">© {currentYear} Автоюрист086.ru Все права защищены.</p>
|
||||
<VisitorCounter client:load today={0} total={0} />
|
||||
<ul class="footer-bottom-links">
|
||||
{legalLinks.map(link => (
|
||||
<li><a href={link.href}>{link.label}</a></li>
|
||||
|
|
@ -92,24 +88,20 @@ const currentYear = new Date().getFullYear().toString();
|
|||
</footer>
|
||||
|
||||
<style>
|
||||
/* Базовые стили футера */
|
||||
.footer {
|
||||
background-color: #031529; /* Темно-синий фон */
|
||||
color: #8c9bb0; /* Приглушенный серо-голубой цвет текста */
|
||||
background-color: #031529;
|
||||
color: #8c9bb0;
|
||||
font-family: 'Inter', system-ui, -apple-system, sans-serif;
|
||||
padding: 4rem 0 1.5rem 0;
|
||||
}
|
||||
|
||||
/* Сетка для колонок */
|
||||
.footer-top {
|
||||
display: grid;
|
||||
/* Пропорции колонок: первая чуть шире, остальные равны */
|
||||
grid-template-columns: 1.5fr 1fr 1fr 1fr;
|
||||
gap: 2rem;
|
||||
margin-bottom: 4rem;
|
||||
}
|
||||
|
||||
/* Колонка 1 */
|
||||
.footer-logo {
|
||||
display: inline-block;
|
||||
color: #ffffff;
|
||||
|
|
@ -126,16 +118,14 @@ const currentYear = new Date().getFullYear().toString();
|
|||
margin: 0;
|
||||
}
|
||||
|
||||
/* Заголовки колонок (Золотой цвет) */
|
||||
.col-title {
|
||||
color: #d1b06b; /* Золотистый/бежевый */
|
||||
color: #d1b06b;
|
||||
font-size: 0.95rem;
|
||||
font-weight: 600;
|
||||
margin: 0 0 1.5rem 0;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
/* Списки ссылок */
|
||||
.footer-links {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
|
|
@ -154,10 +144,9 @@ const currentYear = new Date().getFullYear().toString();
|
|||
}
|
||||
|
||||
.footer-links a:hover {
|
||||
color: #d1b06b; /* При наведении становятся золотыми */
|
||||
color: #d1b06b;
|
||||
}
|
||||
|
||||
/* Колонка Контактов */
|
||||
.address {
|
||||
font-size: 0.85rem;
|
||||
margin-bottom: 1rem;
|
||||
|
|
@ -170,10 +159,9 @@ const currentYear = new Date().getFullYear().toString();
|
|||
font-weight: 700;
|
||||
text-decoration: none;
|
||||
margin-bottom: 1.5rem;
|
||||
font-family: system-ui, -apple-system, sans-serif; /* Цифры лучше читаются в sans-serif */
|
||||
font-family: system-ui, -apple-system, sans-serif;
|
||||
}
|
||||
|
||||
/* Кнопка "Поделиться" */
|
||||
.share-btn {
|
||||
background: transparent;
|
||||
border: 1px solid #2a3a50;
|
||||
|
|
@ -194,17 +182,16 @@ const currentYear = new Date().getFullYear().toString();
|
|||
background-color: rgba(209, 176, 107, 0.05);
|
||||
}
|
||||
|
||||
/* Нижняя панель (Копирайт) */
|
||||
.footer-bottom {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding-top: 1.5rem;
|
||||
border-top: 1px solid rgba(140, 155, 176, 0.1); /* Тонкая полоска разделителя */
|
||||
border-top: 1px solid rgba(140, 155, 176, 0.1);
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.copyright, .developer {
|
||||
.copyright {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
|
|
@ -227,19 +214,38 @@ const currentYear = new Date().getFullYear().toString();
|
|||
color: #d1b06b;
|
||||
}
|
||||
|
||||
/* Адаптивность для мобильных устройств */
|
||||
.visitor-counters {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.counter-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.4rem;
|
||||
}
|
||||
|
||||
.counter-item :global(svg) {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.counter-value {
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.footer {
|
||||
padding: 3rem 1.5rem 1rem 1.5rem;
|
||||
}
|
||||
|
||||
.footer-top {
|
||||
grid-template-columns: 1fr; /* 1 колонка */
|
||||
grid-template-columns: 1fr;
|
||||
gap: 2.5rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Разделы и Разное в одном ряду */
|
||||
.links-cols {
|
||||
display: flex;
|
||||
gap: 2rem;
|
||||
|
|
@ -250,7 +256,6 @@ const currentYear = new Date().getFullYear().toString();
|
|||
flex: 1;
|
||||
}
|
||||
|
||||
/* Центрируем все элементы */
|
||||
.brand-col {
|
||||
text-align: center;
|
||||
}
|
||||
|
|
@ -277,9 +282,13 @@ const currentYear = new Date().getFullYear().toString();
|
|||
gap: 1rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.visitor-counters {
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Планшет - 2 колонки */
|
||||
@media (min-width: 641px) and (max-width: 767px) {
|
||||
.footer-top {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
|
|
@ -291,7 +300,6 @@ const currentYear = new Date().getFullYear().toString();
|
|||
}
|
||||
}
|
||||
|
||||
/* Десктоп (md и выше) - 4 колонки в один ряд: Бренд | Разделы | Разное | Контакты */
|
||||
@media (min-width: 768px) {
|
||||
.footer-top {
|
||||
grid-template-columns: 1.5fr 1fr 1fr 1fr;
|
||||
|
|
@ -299,7 +307,7 @@ const currentYear = new Date().getFullYear().toString();
|
|||
}
|
||||
|
||||
.links-cols {
|
||||
display: contents; /* Дочерние элементы становятся частью грида */
|
||||
display: contents;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
69
frontend/src/components/layout/footer/VisitorCounter.astro
Normal file
69
frontend/src/components/layout/footer/VisitorCounter.astro
Normal file
|
|
@ -0,0 +1,69 @@
|
|||
---
|
||||
import { Icon } from 'astro-icon/components';
|
||||
|
||||
interface Props {
|
||||
today?: number;
|
||||
total?: number;
|
||||
}
|
||||
|
||||
const { today = 0, total = 0 } = Astro.props;
|
||||
---
|
||||
|
||||
<div class="visitor-counters">
|
||||
<div class="counter-item">
|
||||
<Icon name="users-group" />
|
||||
<span class="counter-value">{today} сегодня</span>
|
||||
</div>
|
||||
<div class="counter-item">
|
||||
<Icon name="users-total" />
|
||||
<span class="counter-value">{total} всего</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
(function() {
|
||||
const root = document.querySelector('.visitor-counters');
|
||||
if (!root) return;
|
||||
|
||||
const valueEls = root.querySelectorAll('.counter-value');
|
||||
if (valueEls.length < 2) return;
|
||||
|
||||
const todayStr = new Date().toDateString();
|
||||
|
||||
fetch('/api/visitors').then(r => r.json()).then(d => {
|
||||
if (typeof d.todayVisitors === 'number') {
|
||||
if (d.isNewVisitor) {
|
||||
localStorage.setItem('site_visited', todayStr);
|
||||
}
|
||||
if (valueEls[0]) valueEls[0].textContent = d.todayVisitors + ' сегодня';
|
||||
if (valueEls[1]) valueEls[1].textContent = d.totalVisitors + ' всего';
|
||||
}
|
||||
}).catch(() => {});
|
||||
})();
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.visitor-counters {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.counter-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.4rem;
|
||||
color: #8c9bb0;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.counter-item :global(svg) {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.counter-value {
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
</style>
|
||||
Loading…
Add table
Add a link
Reference in a new issue