Add whitepaper page
All checks were successful
Build Docker Image / build (push) Successful in 6m42s
All checks were successful
Build Docker Image / build (push) Successful in 6m42s
This commit is contained in:
Ruslan Bakiev
716
app/pages/whitepaper.vue
Normal file
716
app/pages/whitepaper.vue
Normal file
@@ -0,0 +1,716 @@
|
||||
<template>
|
||||
<div class="whitepaper">
|
||||
<div class="grain" aria-hidden="true"></div>
|
||||
<header class="hero">
|
||||
<nav class="nav">
|
||||
<div class="logo">Optovia</div>
|
||||
<div class="nav-actions">
|
||||
<button
|
||||
class="lang-toggle"
|
||||
:class="{ active: lang === 'ru' }"
|
||||
@click="lang = 'ru'"
|
||||
>
|
||||
RU
|
||||
</button>
|
||||
<button
|
||||
class="lang-toggle"
|
||||
:class="{ active: lang === 'en' }"
|
||||
@click="lang = 'en'"
|
||||
>
|
||||
EN
|
||||
</button>
|
||||
<button class="cta">Запросить демо</button>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="hero-grid">
|
||||
<div class="hero-text">
|
||||
<div class="eyebrow">White Paper</div>
|
||||
<h1>Инфраструктура цифровых инструментов, которая стирает границы</h1>
|
||||
<p class="lead">
|
||||
Optovia — платформа, которая помогает участникам рынка получать
|
||||
первоклассные цифровые инструменты и выстраивать процессы KYC и
|
||||
мониторинга как единую, прозрачную систему.
|
||||
</p>
|
||||
<div class="hero-actions">
|
||||
<button class="cta">Скачать PDF</button>
|
||||
<button class="ghost">Связаться с командой</button>
|
||||
</div>
|
||||
<div class="hero-meta">
|
||||
<div class="meta-card">
|
||||
<span class="meta-title">Фокус</span>
|
||||
<span class="meta-value">KYC / Monitoring</span>
|
||||
</div>
|
||||
<div class="meta-card">
|
||||
<span class="meta-title">Формат</span>
|
||||
<span class="meta-value">B2B / API-first</span>
|
||||
</div>
|
||||
<div class="meta-card">
|
||||
<span class="meta-title">Стадия</span>
|
||||
<span class="meta-value">Private beta</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hero-visual">
|
||||
<div class="card flow-card">
|
||||
<div class="card-header">
|
||||
<span>Flow View</span>
|
||||
<span class="pill">Live</span>
|
||||
</div>
|
||||
<div class="flow">
|
||||
<div class="flow-node success">User</div>
|
||||
<div class="flow-node success">Team</div>
|
||||
<div class="flow-node success">KYC App</div>
|
||||
<div class="flow-node warn">Temporo</div>
|
||||
<div class="flow-node success">Business</div>
|
||||
<div class="flow-node success">KSC Monitoring</div>
|
||||
<div class="flow-node success">Daxter</div>
|
||||
</div>
|
||||
<div class="flow-footer">
|
||||
<div>
|
||||
<span class="badge ok"></span>В синке: 996
|
||||
</div>
|
||||
<div>
|
||||
<span class="badge bad"></span>Не в синке: 4
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card stats-card">
|
||||
<div class="stat">
|
||||
<span class="label">Всего профилей</span>
|
||||
<span class="value">1 000</span>
|
||||
</div>
|
||||
<div class="stat">
|
||||
<span class="label">Ошибки</span>
|
||||
<span class="value error">4</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<section v-if="lang === 'ru'" class="section" id="ru">
|
||||
<div class="section-header">
|
||||
<h2>О платформе</h2>
|
||||
<p>
|
||||
Мы строим инфраструктуру, которая делает цифровые процессы понятными,
|
||||
управляемыми и доверенными. Optovia связывает команды, данные и
|
||||
комплаенс в единый контур.
|
||||
</p>
|
||||
</div>
|
||||
<div class="grid two">
|
||||
<div class="card">
|
||||
<h3>Проблема рынка</h3>
|
||||
<ul>
|
||||
<li>Сложные KYC-процессы разорваны по системам</li>
|
||||
<li>Низкая наблюдаемость и нет единого статуса</li>
|
||||
<li>Высокая доля ручных действий и человеческий фактор</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h3>Наше решение</h3>
|
||||
<ul>
|
||||
<li>Единый пайплайн KYC и мониторинга</li>
|
||||
<li>Прозрачный статус актуальности данных</li>
|
||||
<li>API-first подход и гибкие интеграции</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section v-if="lang === 'ru'" class="section">
|
||||
<div class="section-header">
|
||||
<h2>Как это работает</h2>
|
||||
<p>
|
||||
Прозрачный процесс с контролем статусов и истории на каждом шаге.
|
||||
</p>
|
||||
</div>
|
||||
<div class="timeline">
|
||||
<div class="step">
|
||||
<div class="dot"></div>
|
||||
<div>
|
||||
<h4>Создание команды</h4>
|
||||
<p>Пользователь создает команду и инициирует KYC application.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="step">
|
||||
<div class="dot"></div>
|
||||
<div>
|
||||
<h4>Процессинг</h4>
|
||||
<p>Temporo запускает процедуру и передает управление бизнес-этапам.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="step">
|
||||
<div class="dot"></div>
|
||||
<div>
|
||||
<h4>Мониторинг</h4>
|
||||
<p>KSC Monitoring фиксирует состояние, Daxter следит за актуальностью.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section v-if="lang === 'ru'" class="section">
|
||||
<div class="section-header">
|
||||
<h2>Технологии</h2>
|
||||
<p>Сильная инженерия, измеримость и надежность.</p>
|
||||
</div>
|
||||
<div class="grid three">
|
||||
<div class="card">
|
||||
<h3>Архитектура</h3>
|
||||
<p>Микросервисы, событийная оркестрация, масштабирование по нагрузке.</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h3>Наблюдаемость</h3>
|
||||
<p>Метрики, трассировка, алерты. Понимаем, где узкие места.</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h3>Данные</h3>
|
||||
<p>PostgreSQL и MongoDB как основа для надежного хранения и поиска.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section v-if="lang === 'ru'" class="section">
|
||||
<div class="section-header">
|
||||
<h2>Безопасность</h2>
|
||||
<p>Доступ, токены и аудит — встроены в архитектуру.</p>
|
||||
</div>
|
||||
<div class="grid two">
|
||||
<div class="card">
|
||||
<h3>Контроль доступа</h3>
|
||||
<ul>
|
||||
<li>m2m-токены</li>
|
||||
<li>Изоляция сервисов</li>
|
||||
<li>Аудит действий</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h3>Надежность</h3>
|
||||
<ul>
|
||||
<li>Failover и очереди</li>
|
||||
<li>Восстановление процессов</li>
|
||||
<li>История событий</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section v-if="lang === 'ru'" class="section">
|
||||
<div class="section-header">
|
||||
<h2>Roadmap</h2>
|
||||
<p>Черновик, дополним вместе.</p>
|
||||
</div>
|
||||
<div class="grid three">
|
||||
<div class="card">
|
||||
<h3>Q1</h3>
|
||||
<p>Private beta + пилоты с партнерами.</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h3>Q2</h3>
|
||||
<p>Автоматизация мониторинга, алерты, отчеты.</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h3>Q3</h3>
|
||||
<p>Масштабирование и выход в новые вертикали.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section v-if="lang === 'en'" class="section" id="en">
|
||||
<div class="section-header">
|
||||
<h2>About the platform</h2>
|
||||
<p>
|
||||
We build infrastructure that makes digital processes transparent and
|
||||
trusted. Optovia connects teams, data, and compliance into a single
|
||||
system.
|
||||
</p>
|
||||
</div>
|
||||
<div class="grid two">
|
||||
<div class="card">
|
||||
<h3>Market problem</h3>
|
||||
<ul>
|
||||
<li>KYC processes are fragmented</li>
|
||||
<li>Low observability and no single status view</li>
|
||||
<li>Heavy manual work and human error</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h3>Our solution</h3>
|
||||
<ul>
|
||||
<li>Unified KYC & monitoring pipeline</li>
|
||||
<li>Clear profile freshness status</li>
|
||||
<li>API-first integrations</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section v-if="lang === 'en'" class="section" id="en-more">
|
||||
<div class="section-header">
|
||||
<h2>How it works</h2>
|
||||
<p>Transparent flow with status control at each step.</p>
|
||||
</div>
|
||||
<div class="timeline">
|
||||
<div class="step">
|
||||
<div class="dot"></div>
|
||||
<div>
|
||||
<h4>Team creation</h4>
|
||||
<p>User creates a team and submits a KYC application.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="step">
|
||||
<div class="dot"></div>
|
||||
<div>
|
||||
<h4>Processing</h4>
|
||||
<p>Temporo orchestrates the procedure and business steps.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="step">
|
||||
<div class="dot"></div>
|
||||
<div>
|
||||
<h4>Monitoring</h4>
|
||||
<p>KSC Monitoring stores state, Daxter tracks freshness.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section v-if="lang === 'en'" class="section" id="en-tech">
|
||||
<div class="section-header">
|
||||
<h2>Technology</h2>
|
||||
<p>Strong engineering, measurable outcomes, reliability.</p>
|
||||
</div>
|
||||
<div class="grid three">
|
||||
<div class="card">
|
||||
<h3>Architecture</h3>
|
||||
<p>Microservices, event-driven orchestration, scalable design.</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h3>Observability</h3>
|
||||
<p>Metrics, tracing, alerts. We see bottlenecks early.</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h3>Data</h3>
|
||||
<p>PostgreSQL and MongoDB as the reliable data backbone.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section v-if="lang === 'en'" class="section" id="en-security">
|
||||
<div class="section-header">
|
||||
<h2>Security</h2>
|
||||
<p>Access control, tokens, and audit built in.</p>
|
||||
</div>
|
||||
<div class="grid two">
|
||||
<div class="card">
|
||||
<h3>Access control</h3>
|
||||
<ul>
|
||||
<li>m2m tokens</li>
|
||||
<li>Service isolation</li>
|
||||
<li>Audit trail</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h3>Reliability</h3>
|
||||
<ul>
|
||||
<li>Failover and queues</li>
|
||||
<li>Process recovery</li>
|
||||
<li>Event history</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section v-if="lang === 'en'" class="section" id="en-roadmap">
|
||||
<div class="section-header">
|
||||
<h2>Roadmap</h2>
|
||||
<p>Draft, we will refine together.</p>
|
||||
</div>
|
||||
<div class="grid three">
|
||||
<div class="card">
|
||||
<h3>Q1</h3>
|
||||
<p>Private beta + partner pilots.</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h3>Q2</h3>
|
||||
<p>Monitoring automation, alerts, reporting.</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h3>Q3</h3>
|
||||
<p>Scale and expand into new verticals.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer class="footer">
|
||||
<div class="footer-content">
|
||||
<div>
|
||||
<div class="logo">Optovia</div>
|
||||
<p>White Paper v0.1</p>
|
||||
</div>
|
||||
<div>
|
||||
<p>Контакты: <span class="muted">to be added</span></p>
|
||||
<p>Команда: <span class="muted">to be added</span></p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
const lang = ref<'ru' | 'en'>('ru');
|
||||
|
||||
definePageMeta({
|
||||
layout: false,
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@import url('https://fonts.googleapis.com/css2?family=Fraunces:wght@400;500;700&family=IBM+Plex+Sans:wght@300;400;600&display=swap');
|
||||
|
||||
:global(body) {
|
||||
margin: 0;
|
||||
font-family: 'IBM Plex Sans', sans-serif;
|
||||
color: #13100f;
|
||||
background: radial-gradient(circle at top left, #fef9f0 0%, #f5f1ea 55%, #efe7dd 100%);
|
||||
}
|
||||
|
||||
.whitepaper {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.grain {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
opacity: 0.35;
|
||||
mix-blend-mode: multiply;
|
||||
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/></filter><rect width='120' height='120' filter='url(%23n)' opacity='0.06'/></svg>");
|
||||
}
|
||||
|
||||
.hero {
|
||||
padding: 48px 72px 80px;
|
||||
background: linear-gradient(135deg, rgba(31, 91, 158, 0.08), rgba(232, 123, 42, 0.05));
|
||||
border-bottom: 1px solid rgba(19, 16, 15, 0.12);
|
||||
}
|
||||
|
||||
.nav {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 48px;
|
||||
}
|
||||
|
||||
.logo {
|
||||
font-family: 'Fraunces', serif;
|
||||
font-size: 28px;
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
|
||||
.nav-actions {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.lang-toggle {
|
||||
border: 1px solid rgba(19, 16, 15, 0.12);
|
||||
background: transparent;
|
||||
padding: 6px 10px;
|
||||
border-radius: 999px;
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
letter-spacing: 0.08em;
|
||||
}
|
||||
|
||||
.lang-toggle.active {
|
||||
background: #13100f;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.cta {
|
||||
background: #1f5b9e;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 10px 16px;
|
||||
border-radius: 12px;
|
||||
cursor: pointer;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.ghost {
|
||||
background: transparent;
|
||||
border: 1px solid #13100f;
|
||||
padding: 10px 16px;
|
||||
border-radius: 12px;
|
||||
cursor: pointer;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.hero-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 48px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.hero-text h1 {
|
||||
font-family: 'Fraunces', serif;
|
||||
font-size: 48px;
|
||||
line-height: 1.1;
|
||||
margin: 8px 0 20px;
|
||||
}
|
||||
|
||||
.eyebrow {
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.16em;
|
||||
font-size: 12px;
|
||||
color: #6c6661;
|
||||
}
|
||||
|
||||
.lead {
|
||||
font-size: 18px;
|
||||
color: #6c6661;
|
||||
max-width: 520px;
|
||||
}
|
||||
|
||||
.hero-actions {
|
||||
margin-top: 24px;
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.hero-meta {
|
||||
margin-top: 32px;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.meta-card {
|
||||
background: #ffffff;
|
||||
border: 1px solid rgba(19, 16, 15, 0.12);
|
||||
padding: 12px 14px;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.meta-title {
|
||||
display: block;
|
||||
font-size: 11px;
|
||||
color: #6c6661;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
}
|
||||
|
||||
.meta-value {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.hero-visual {
|
||||
display: grid;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.card {
|
||||
background: #ffffff;
|
||||
border-radius: 20px;
|
||||
padding: 20px;
|
||||
border: 1px solid rgba(19, 16, 15, 0.12);
|
||||
box-shadow: 0 20px 60px rgba(15, 17, 19, 0.15);
|
||||
}
|
||||
|
||||
.flow-card {
|
||||
padding: 20px 24px;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-size: 13px;
|
||||
color: #6c6661;
|
||||
}
|
||||
|
||||
.pill {
|
||||
background: #e7f3ff;
|
||||
color: #1f5b9e;
|
||||
font-size: 11px;
|
||||
padding: 4px 8px;
|
||||
border-radius: 999px;
|
||||
}
|
||||
|
||||
.flow {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
gap: 12px;
|
||||
margin: 18px 0;
|
||||
}
|
||||
|
||||
.flow-node {
|
||||
text-align: center;
|
||||
padding: 10px 12px;
|
||||
border-radius: 12px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
border: 1px solid rgba(19, 16, 15, 0.12);
|
||||
background: #f9f7f3;
|
||||
}
|
||||
|
||||
.flow-node.success {
|
||||
border-color: rgba(31, 91, 158, 0.4);
|
||||
}
|
||||
|
||||
.flow-node.warn {
|
||||
border-color: rgba(232, 123, 42, 0.6);
|
||||
background: rgba(232, 123, 42, 0.08);
|
||||
}
|
||||
|
||||
.flow-footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 12px;
|
||||
color: #6c6661;
|
||||
}
|
||||
|
||||
.badge {
|
||||
display: inline-block;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
.badge.ok {
|
||||
background: #1f5b9e;
|
||||
}
|
||||
|
||||
.badge.bad {
|
||||
background: #e23b2a;
|
||||
}
|
||||
|
||||
.stats-card {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.stat {
|
||||
background: #f9f7f3;
|
||||
border-radius: 14px;
|
||||
padding: 14px;
|
||||
}
|
||||
|
||||
.label {
|
||||
font-size: 11px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
color: #6c6661;
|
||||
}
|
||||
|
||||
.value {
|
||||
display: block;
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.value.error {
|
||||
color: #e23b2a;
|
||||
}
|
||||
|
||||
.section {
|
||||
padding: 72px;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
max-width: 640px;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.section-header h2 {
|
||||
font-family: 'Fraunces', serif;
|
||||
font-size: 34px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.grid.two {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.grid.three {
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.timeline {
|
||||
display: grid;
|
||||
gap: 18px;
|
||||
}
|
||||
|
||||
.step {
|
||||
display: grid;
|
||||
grid-template-columns: 22px 1fr;
|
||||
gap: 16px;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.dot {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 50%;
|
||||
background: #1f5b9e;
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
.footer {
|
||||
padding: 40px 72px 60px;
|
||||
border-top: 1px solid rgba(19, 16, 15, 0.12);
|
||||
}
|
||||
|
||||
.footer-content {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
color: #6c6661;
|
||||
}
|
||||
|
||||
.muted {
|
||||
color: #6c6661;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@media (max-width: 980px) {
|
||||
.hero {
|
||||
padding: 36px 24px 60px;
|
||||
}
|
||||
|
||||
.hero-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.hero-text h1 {
|
||||
font-size: 36px;
|
||||
}
|
||||
|
||||
.section {
|
||||
padding: 52px 24px;
|
||||
}
|
||||
|
||||
.grid.two,
|
||||
.grid.three {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.footer-content {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 12px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user