947 lines
32 KiB
HTML
947 lines
32 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Чепухаграм — Безопасное общение без компромиссов</title>
|
||
<meta name="description" content="Чепухаграм — современный, премиальный мессенджер со сквозным шифрованием (E2EE). Общайтесь безопасно, обменивайтесь файлами, совершайте WebRTC звонки и отправляйте видео-кружочки.">
|
||
<!-- Google Fonts -->
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;700&family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
||
|
||
<style>
|
||
:root {
|
||
--bg-color: #0b071a;
|
||
--accent-color: #7c4dff;
|
||
--accent-light: #9e75ff;
|
||
--accent-glow: rgba(124, 77, 255, 0.3);
|
||
--text-primary: #ffffff;
|
||
--text-secondary: #94a3b8;
|
||
--glass-bg: rgba(255, 255, 255, 0.03);
|
||
--glass-border: rgba(255, 255, 255, 0.08);
|
||
--card-shadow: 0 12px 40px 0 rgba(0, 0, 0, 0.5);
|
||
--phone-bg: #130f26;
|
||
}
|
||
|
||
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
html {
|
||
scroll-behavior: smooth;
|
||
}
|
||
|
||
body {
|
||
font-family: 'Inter', sans-serif;
|
||
background-color: var(--bg-color);
|
||
color: var(--text-primary);
|
||
overflow-x: hidden;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
h1, h2, h3, .logo {
|
||
font-family: 'Outfit', sans-serif;
|
||
}
|
||
|
||
/* Custom Scrollbar */
|
||
::-webkit-scrollbar {
|
||
width: 8px;
|
||
}
|
||
::-webkit-scrollbar-track {
|
||
background: var(--bg-color);
|
||
}
|
||
::-webkit-scrollbar-thumb {
|
||
background: var(--glass-border);
|
||
border-radius: 4px;
|
||
transition: background 0.3s;
|
||
}
|
||
::-webkit-scrollbar-thumb:hover {
|
||
background: var(--accent-color);
|
||
}
|
||
|
||
/* Layout Container */
|
||
.container {
|
||
width: 100%;
|
||
max-width: 1200px;
|
||
margin: 0 auto;
|
||
padding: 0 24px;
|
||
}
|
||
|
||
/* Navigation Header */
|
||
header {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
z-index: 100;
|
||
background: rgba(11, 7, 26, 0.75);
|
||
backdrop-filter: blur(16px);
|
||
border-bottom: 1px solid var(--glass-border);
|
||
padding: 16px 0;
|
||
transition: all 0.3s;
|
||
}
|
||
|
||
.header-content {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
|
||
.logo {
|
||
font-size: 24px;
|
||
font-weight: 700;
|
||
letter-spacing: -0.5px;
|
||
color: var(--text-primary);
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
text-decoration: none;
|
||
}
|
||
|
||
.logo-dot {
|
||
width: 10px;
|
||
height: 10px;
|
||
background-color: var(--accent-color);
|
||
border-radius: 50%;
|
||
box-shadow: 0 0 12px var(--accent-color);
|
||
display: inline-block;
|
||
}
|
||
|
||
nav {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 32px;
|
||
}
|
||
|
||
nav a {
|
||
color: var(--text-secondary);
|
||
text-decoration: none;
|
||
font-weight: 500;
|
||
font-size: 15px;
|
||
transition: color 0.3s;
|
||
}
|
||
|
||
nav a:hover {
|
||
color: var(--text-primary);
|
||
}
|
||
|
||
.btn-cta {
|
||
background: linear-gradient(135deg, var(--accent-color) 0%, #5e35b1 100%);
|
||
color: white;
|
||
padding: 10px 24px;
|
||
border-radius: 30px;
|
||
font-weight: 600;
|
||
font-size: 14px;
|
||
text-decoration: none;
|
||
transition: transform 0.3s, box-shadow 0.3s;
|
||
box-shadow: 0 4px 15px var(--accent-glow);
|
||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||
}
|
||
|
||
.btn-cta:hover {
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 6px 20px rgba(124, 77, 255, 0.5);
|
||
}
|
||
|
||
/* Hero Section */
|
||
.hero {
|
||
padding: 180px 0 100px 0;
|
||
position: relative;
|
||
background: radial-gradient(circle at 10% 20%, rgba(124, 77, 255, 0.06) 0%, transparent 50%);
|
||
}
|
||
|
||
/* Floating Background Glow Effect */
|
||
.hero::after {
|
||
content: '';
|
||
position: absolute;
|
||
top: 25%;
|
||
right: 12%;
|
||
width: 450px;
|
||
height: 450px;
|
||
background: radial-gradient(circle, rgba(124, 77, 255, 0.1) 0%, rgba(186, 104, 200, 0.03) 50%, transparent 70%);
|
||
z-index: -1;
|
||
filter: blur(60px);
|
||
pointer-events: none;
|
||
animation: floatGlow 8s infinite alternate ease-in-out;
|
||
}
|
||
|
||
@keyframes floatGlow {
|
||
0% { transform: translate(0, 0) scale(1); }
|
||
100% { transform: translate(40px, -40px) scale(1.15); }
|
||
}
|
||
|
||
.hero-layout {
|
||
display: grid;
|
||
grid-template-columns: 1.1fr 0.9fr;
|
||
align-items: center;
|
||
gap: 60px;
|
||
}
|
||
|
||
.hero-title {
|
||
font-size: 56px;
|
||
font-weight: 700;
|
||
line-height: 1.15;
|
||
margin-bottom: 24px;
|
||
background: linear-gradient(135deg, #ffffff 30%, #d1c4e9 100%);
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
}
|
||
|
||
.hero-subtitle {
|
||
font-size: 18px;
|
||
color: var(--text-secondary);
|
||
margin-bottom: 40px;
|
||
font-weight: 300;
|
||
max-width: 580px;
|
||
}
|
||
|
||
.hero-actions {
|
||
display: flex;
|
||
gap: 16px;
|
||
}
|
||
|
||
.btn-secondary {
|
||
background: var(--glass-bg);
|
||
border: 1px solid var(--glass-border);
|
||
color: var(--text-primary);
|
||
padding: 12px 28px;
|
||
border-radius: 30px;
|
||
font-weight: 600;
|
||
text-decoration: none;
|
||
transition: background 0.3s, border-color 0.3s;
|
||
}
|
||
|
||
.btn-secondary:hover {
|
||
background: rgba(255, 255, 255, 0.08);
|
||
border-color: rgba(255, 255, 255, 0.2);
|
||
}
|
||
|
||
/* Mockup Mobile Phone styling */
|
||
.hero-mockup-wrapper {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
position: relative;
|
||
}
|
||
|
||
.hero-mockup {
|
||
width: 100%;
|
||
max-width: 380px;
|
||
height: 600px;
|
||
background: var(--phone-bg);
|
||
border: 12px solid #2d264d;
|
||
border-radius: 40px;
|
||
box-shadow: var(--card-shadow), 0 0 0 1px rgba(255, 255, 255, 0.05);
|
||
display: flex;
|
||
flex-direction: column;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
/* Phone Camera Notch */
|
||
.hero-mockup::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
width: 130px;
|
||
height: 25px;
|
||
background: #2d264d;
|
||
border-bottom-left-radius: 18px;
|
||
border-bottom-right-radius: 18px;
|
||
z-index: 10;
|
||
}
|
||
|
||
/* Status Bar */
|
||
.mockup-status {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 26px 20px 10px 24px;
|
||
font-size: 11px;
|
||
color: rgba(255, 255, 255, 0.6);
|
||
font-weight: 600;
|
||
letter-spacing: 0.2px;
|
||
z-index: 5;
|
||
}
|
||
|
||
.mockup-status-icons {
|
||
display: flex;
|
||
gap: 6px;
|
||
align-items: center;
|
||
}
|
||
|
||
.mockup-header {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
border-bottom: 1px solid var(--glass-border);
|
||
padding: 10px 20px 15px 20px;
|
||
z-index: 5;
|
||
background: rgba(19, 15, 38, 0.85);
|
||
backdrop-filter: blur(10px);
|
||
}
|
||
|
||
.mockup-avatar {
|
||
width: 36px;
|
||
height: 36px;
|
||
background: linear-gradient(135deg, var(--accent-color), #b388ff);
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-weight: 700;
|
||
color: white;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.mockup-info h4 {
|
||
font-size: 13px;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.mockup-info span {
|
||
font-size: 10px;
|
||
color: #4cd964;
|
||
font-weight: 500;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 4px;
|
||
}
|
||
|
||
.mockup-info span::before {
|
||
content: '';
|
||
display: inline-block;
|
||
width: 5px;
|
||
height: 5px;
|
||
background-color: #4cd964;
|
||
border-radius: 50%;
|
||
}
|
||
|
||
/* Chat Messages Container */
|
||
.mockup-chat {
|
||
flex: 1;
|
||
padding: 15px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 12px;
|
||
overflow-y: auto;
|
||
z-index: 1;
|
||
}
|
||
|
||
.mockup-bubble {
|
||
max-width: 80%;
|
||
padding: 10px 14px;
|
||
border-radius: 16px;
|
||
font-size: 13px;
|
||
line-height: 1.4;
|
||
position: relative;
|
||
word-wrap: break-word;
|
||
}
|
||
|
||
.mockup-bubble.partner {
|
||
background: #231b40;
|
||
align-self: flex-start;
|
||
border-bottom-left-radius: 3px;
|
||
border: 1px solid rgba(255, 255, 255, 0.02);
|
||
color: #e2e8f0;
|
||
}
|
||
|
||
.mockup-bubble.me {
|
||
background: var(--accent-color);
|
||
color: white;
|
||
align-self: flex-end;
|
||
border-bottom-right-radius: 3px;
|
||
box-shadow: 0 4px 12px var(--accent-glow);
|
||
}
|
||
|
||
.mockup-bubble .time {
|
||
font-size: 9px;
|
||
color: rgba(255, 255, 255, 0.4);
|
||
text-align: right;
|
||
margin-top: 4px;
|
||
display: block;
|
||
}
|
||
|
||
/* Typing Indicator CSS */
|
||
.typing-indicator {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 4px;
|
||
padding: 8px 12px;
|
||
align-self: flex-start;
|
||
background: #231b40;
|
||
border-radius: 16px;
|
||
border-bottom-left-radius: 3px;
|
||
}
|
||
|
||
.typing-indicator span {
|
||
width: 6px;
|
||
height: 6px;
|
||
background-color: #a0aec0;
|
||
border-radius: 50%;
|
||
animation: typing-bounce 1.4s infinite ease-in-out both;
|
||
}
|
||
|
||
.typing-indicator span:nth-child(1) { animation-delay: -0.32s; }
|
||
.typing-indicator span:nth-child(2) { animation-delay: -0.16s; }
|
||
|
||
@keyframes typing-bounce {
|
||
0%, 80%, 100% { transform: scale(0.3); opacity: 0.4; }
|
||
40% { transform: scale(1); opacity: 1; }
|
||
}
|
||
|
||
/* Chat Input Field Mockup */
|
||
.mockup-input {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
border-top: 1px solid var(--glass-border);
|
||
padding: 12px 15px 24px 15px;
|
||
z-index: 5;
|
||
background: rgba(19, 15, 38, 0.95);
|
||
}
|
||
|
||
.mockup-input-field {
|
||
flex: 1;
|
||
background: rgba(255, 255, 255, 0.04);
|
||
border: 1px solid var(--glass-border);
|
||
border-radius: 20px;
|
||
padding: 8px 16px;
|
||
font-size: 12px;
|
||
color: var(--text-secondary);
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
.mockup-send {
|
||
width: 32px;
|
||
height: 32px;
|
||
background: linear-gradient(135deg, var(--accent-color) 0%, #6200ea 100%);
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: white;
|
||
cursor: pointer;
|
||
font-size: 12px;
|
||
box-shadow: 0 2px 8px var(--accent-glow);
|
||
}
|
||
|
||
/* Phone Home Indicator Bar */
|
||
.mockup-home-bar {
|
||
position: absolute;
|
||
bottom: 6px;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
width: 120px;
|
||
height: 4px;
|
||
background: rgba(255, 255, 255, 0.3);
|
||
border-radius: 2px;
|
||
z-index: 10;
|
||
}
|
||
|
||
/* Features Section */
|
||
.features {
|
||
padding: 120px 0;
|
||
position: relative;
|
||
background: radial-gradient(circle at 90% 80%, rgba(124, 77, 255, 0.04) 0%, transparent 50%);
|
||
}
|
||
|
||
.section-header {
|
||
text-align: center;
|
||
margin-bottom: 70px;
|
||
}
|
||
|
||
.section-title {
|
||
font-size: 40px;
|
||
font-weight: 700;
|
||
margin-bottom: 16px;
|
||
background: linear-gradient(135deg, #ffffff 40%, #e2d9ff 100%);
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
}
|
||
|
||
.section-subtitle {
|
||
font-size: 16px;
|
||
color: var(--text-secondary);
|
||
max-width: 600px;
|
||
margin: 0 auto;
|
||
font-weight: 300;
|
||
}
|
||
|
||
.features-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
|
||
gap: 30px;
|
||
}
|
||
|
||
.feature-card {
|
||
background: var(--glass-bg);
|
||
border: 1px solid var(--glass-border);
|
||
border-radius: 24px;
|
||
padding: 36px;
|
||
transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), border-color 0.4s, box-shadow 0.4s;
|
||
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.feature-card::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
background: radial-gradient(circle at top left, rgba(124, 77, 255, 0.15) 0%, transparent 60%);
|
||
opacity: 0;
|
||
transition: opacity 0.4s;
|
||
pointer-events: none;
|
||
}
|
||
|
||
.feature-card:hover {
|
||
transform: translateY(-6px);
|
||
border-color: rgba(124, 77, 255, 0.25);
|
||
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 0 0 20px rgba(124, 77, 255, 0.08);
|
||
}
|
||
|
||
.feature-card:hover::before {
|
||
opacity: 1;
|
||
}
|
||
|
||
.feature-icon {
|
||
width: 52px;
|
||
height: 52px;
|
||
background: rgba(124, 77, 255, 0.08);
|
||
border-radius: 16px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: var(--accent-light);
|
||
margin-bottom: 24px;
|
||
font-size: 24px;
|
||
border: 1px solid rgba(124, 77, 255, 0.15);
|
||
}
|
||
|
||
.feature-card h3 {
|
||
font-size: 20px;
|
||
font-weight: 600;
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.feature-card p {
|
||
font-size: 14px;
|
||
color: var(--text-secondary);
|
||
line-height: 1.6;
|
||
}
|
||
|
||
/* E2EE Call-to-Action Card */
|
||
.e2ee-banner {
|
||
padding: 60px 0 120px 0;
|
||
}
|
||
|
||
.banner-card {
|
||
background: linear-gradient(135deg, rgba(124, 77, 255, 0.12) 0%, rgba(20, 16, 35, 0.4) 100%);
|
||
border: 1px solid rgba(124, 77, 255, 0.18);
|
||
border-radius: 32px;
|
||
padding: 60px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 40px;
|
||
box-shadow: var(--card-shadow);
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.banner-card::after {
|
||
content: '';
|
||
position: absolute;
|
||
bottom: -50px;
|
||
right: -50px;
|
||
width: 250px;
|
||
height: 250px;
|
||
background: radial-gradient(circle, var(--accent-glow) 0%, transparent 70%);
|
||
pointer-events: none;
|
||
}
|
||
|
||
.banner-content {
|
||
max-width: 600px;
|
||
z-index: 1;
|
||
}
|
||
|
||
.banner-tag {
|
||
background: rgba(124, 77, 255, 0.15);
|
||
color: #d1c4e9;
|
||
padding: 6px 14px;
|
||
border-radius: 20px;
|
||
font-size: 11px;
|
||
font-weight: 600;
|
||
text-transform: uppercase;
|
||
letter-spacing: 1px;
|
||
display: inline-block;
|
||
margin-bottom: 18px;
|
||
border: 1px solid rgba(124, 77, 255, 0.2);
|
||
}
|
||
|
||
.banner-title {
|
||
font-size: 36px;
|
||
font-weight: 700;
|
||
margin-bottom: 16px;
|
||
background: linear-gradient(135deg, #ffffff 40%, #e2d9ff 100%);
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
}
|
||
|
||
.banner-text {
|
||
color: var(--text-secondary);
|
||
font-size: 15px;
|
||
margin-bottom: 32px;
|
||
line-height: 1.7;
|
||
}
|
||
|
||
.banner-visual {
|
||
font-size: 120px;
|
||
color: var(--accent-color);
|
||
opacity: 0.85;
|
||
filter: drop-shadow(0 0 20px var(--accent-glow));
|
||
animation: pulse 3.5s infinite ease-in-out;
|
||
z-index: 1;
|
||
user-select: none;
|
||
}
|
||
|
||
@keyframes pulse {
|
||
0% { transform: scale(1); filter: drop-shadow(0 0 20px var(--accent-glow)); }
|
||
50% { transform: scale(1.06); filter: drop-shadow(0 0 35px rgba(124, 77, 255, 0.6)); }
|
||
100% { transform: scale(1); filter: drop-shadow(0 0 20px var(--accent-glow)); }
|
||
}
|
||
|
||
/* Footer */
|
||
footer {
|
||
border-top: 1px solid var(--glass-border);
|
||
padding: 50px 0;
|
||
text-align: center;
|
||
background: #06040e;
|
||
}
|
||
|
||
.footer-logo {
|
||
font-size: 20px;
|
||
font-weight: 700;
|
||
margin-bottom: 16px;
|
||
text-decoration: none;
|
||
color: white;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
}
|
||
|
||
.footer-links {
|
||
display: flex;
|
||
justify-content: center;
|
||
gap: 28px;
|
||
margin-bottom: 24px;
|
||
}
|
||
|
||
.footer-links a {
|
||
color: var(--text-secondary);
|
||
text-decoration: none;
|
||
font-size: 14px;
|
||
transition: color 0.3s;
|
||
}
|
||
|
||
.footer-links a:hover {
|
||
color: var(--text-primary);
|
||
}
|
||
|
||
.footer-text {
|
||
font-size: 12px;
|
||
color: rgba(255, 255, 255, 0.25);
|
||
}
|
||
|
||
/* Responsive Styles */
|
||
@media (max-width: 900px) {
|
||
.hero-layout {
|
||
grid-template-columns: 1fr;
|
||
text-align: center;
|
||
gap: 50px;
|
||
}
|
||
.hero-subtitle {
|
||
margin-left: auto;
|
||
margin-right: auto;
|
||
}
|
||
.hero-actions {
|
||
justify-content: center;
|
||
}
|
||
.hero-mockup {
|
||
max-width: 360px;
|
||
height: 570px;
|
||
}
|
||
.banner-card {
|
||
flex-direction: column;
|
||
text-align: center;
|
||
padding: 40px;
|
||
}
|
||
.banner-visual {
|
||
font-size: 100px;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 600px) {
|
||
header {
|
||
padding: 12px 0;
|
||
}
|
||
nav {
|
||
gap: 16px;
|
||
}
|
||
nav a {
|
||
font-size: 13px;
|
||
}
|
||
.btn-cta {
|
||
padding: 8px 16px;
|
||
font-size: 12px;
|
||
}
|
||
.logo {
|
||
font-size: 20px;
|
||
}
|
||
.hero-title {
|
||
font-size: 40px;
|
||
}
|
||
.hero-subtitle {
|
||
font-size: 15px;
|
||
}
|
||
.section-title {
|
||
font-size: 32px;
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<!-- Header Navigation -->
|
||
<header>
|
||
<div class="container header-content">
|
||
<a href="#" class="logo" id="logoLink">
|
||
<span class="logo-dot"></span>Чепухаграм
|
||
</a>
|
||
<nav id="navMenu">
|
||
<a href="#features">Функции</a>
|
||
<a href="./about-secutity/index.html">Безопасность</a>
|
||
<a href="./about-secutity/index.html" class="btn-cta" id="ctaHeader">О защите</a>
|
||
</nav>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- Hero Section -->
|
||
<section class="hero">
|
||
<div class="container hero-layout">
|
||
<div class="hero-text">
|
||
<h1 class="hero-title" id="mainTitle">Чепухаграм</h1>
|
||
<p class="hero-subtitle" id="mainSub">Приватность следующего поколения. Полноценное сквозное шифрование сообщений, звонков и медиафайлов. Полный контроль над вашими личными данными.</p>
|
||
<div class="hero-actions">
|
||
<a href="./about-secutity/index.html" class="btn-cta" id="heroCta">Изучить защиту</a>
|
||
<a href="#features" class="btn-secondary" id="heroSecondary">Функции</a>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Interactive Chat Mockup (Mobile phone styling) -->
|
||
<div class="hero-mockup-wrapper">
|
||
<div class="hero-mockup" id="chatMockup">
|
||
<div class="mockup-status">
|
||
<div class="mockup-time">09:41</div>
|
||
<div class="mockup-status-icons">📶 🔋</div>
|
||
</div>
|
||
<div class="mockup-header">
|
||
<div class="mockup-avatar">А</div>
|
||
<div class="mockup-info">
|
||
<h4>Алиса</h4>
|
||
<span>в сети</span>
|
||
</div>
|
||
</div>
|
||
<div class="mockup-chat" id="mockupChat">
|
||
<div class="mockup-bubble partner">
|
||
Привет! Ты проверил систему шифрования Чепухаграм?
|
||
<span class="time">22:04</span>
|
||
</div>
|
||
<div class="mockup-bubble me">
|
||
Да! Используется X25519 для обмена ключами и AES-256-GCM для шифрования.
|
||
<span class="time">22:05</span>
|
||
</div>
|
||
<div class="mockup-bubble partner">
|
||
Отлично! А что с файлами и звонками?
|
||
<span class="time">22:05</span>
|
||
</div>
|
||
</div>
|
||
<div class="mockup-input">
|
||
<div class="mockup-input-field" id="mockupInputText">Напишите сообщение...</div>
|
||
<div class="mockup-send" id="mockupSendBtn">⚡</div>
|
||
</div>
|
||
<div class="mockup-home-bar"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Features Section -->
|
||
<section class="features" id="features">
|
||
<div class="container">
|
||
<div class="section-header">
|
||
<h2 class="section-title" id="featuresTitle">Возможности Чепухаграм</h2>
|
||
<p class="section-subtitle" id="featuresSub">Сочетание передовых криптографических технологий с удобным современным интерфейсом мессенджера.</p>
|
||
</div>
|
||
|
||
<div class="features-grid">
|
||
<!-- Feature 1: E2EE Messages -->
|
||
<div class="feature-card" id="featCard1">
|
||
<div class="feature-icon">🔒</div>
|
||
<h3>Сквозное шифрование</h3>
|
||
<p>Текстовые сообщения и метаданные шифруются прямо на вашем устройстве и передаются в зашифрованном виде. Сервер не имеет ключей для расшифровки.</p>
|
||
</div>
|
||
|
||
<!-- Feature 2: Voice & Video notes -->
|
||
<div class="feature-card" id="featCard2">
|
||
<div class="feature-icon">🎙️</div>
|
||
<h3>Голос и Видео-кружочки</h3>
|
||
<p>Записывайте голосовые сообщения и видео-кружочки в одно касание. Нативное сжатие через FFmpeg уменьшает вес медиа без потери качества.</p>
|
||
</div>
|
||
|
||
<!-- Feature 3: File Streaming -->
|
||
<div class="feature-card" id="featCard3">
|
||
<div class="feature-icon">📤</div>
|
||
<h3>Стриминг файлов</h3>
|
||
<p>Безопасный поблочный стриминг файлов любого формата. Каждый файл шифруется своим уникальным AES-GCM ключом, который передается через E2EE канал.</p>
|
||
</div>
|
||
|
||
<!-- Feature 4: WebRTC Calls -->
|
||
<div class="feature-card" id="featCard4">
|
||
<div class="feature-icon">📞</div>
|
||
<h3>Аудио и видеозвонки</h3>
|
||
<p>Кристально чистые и конфиденциальные WebRTC звонки напрямую между вашими устройствами в обход промежуточных серверов.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Encryption Banner Section -->
|
||
<section class="e2ee-banner">
|
||
<div class="container">
|
||
<div class="banner-card" id="bannerCard">
|
||
<div class="banner-content">
|
||
<span class="banner-tag">Архитектура безопасности</span>
|
||
<h2 class="banner-title" id="bannerTitle">Zero-Knowledge Безопасность</h2>
|
||
<p class="banner-text" id="bannerText">Мы придерживаемся принципа «нулевого разглашения». Ваши секретные ключи создаются на базе эллиптических кривых эллиптического протокола X25519 и никогда не покидают ваши устройства в незашифрованном виде.</p>
|
||
<a href="./about-secutity/index.html" class="btn-cta" id="bannerCta">Подробнее о криптографии</a>
|
||
</div>
|
||
<div class="banner-visual" id="lockIcon">🔒</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Footer -->
|
||
<footer>
|
||
<div class="container">
|
||
<a href="#" class="footer-logo">
|
||
<span class="logo-dot"></span>Чепухаграм
|
||
</a>
|
||
<div class="footer-links">
|
||
<a href="#features">Функции</a>
|
||
<a href="./about-secutity/index.html">Безопасность мессенджера</a>
|
||
</div>
|
||
<p class="footer-text">© 2026 Чепухаграм. Все права защищены. Разработано с фокусом на абсолютную приватность.</p>
|
||
</div>
|
||
</footer>
|
||
|
||
<!-- Interactive script for Chat Mockup Mock animations -->
|
||
<script>
|
||
document.addEventListener('DOMContentLoaded', () => {
|
||
const chat = document.getElementById('mockupChat');
|
||
const inputField = document.getElementById('mockupInputText');
|
||
|
||
const conversation = [
|
||
{ isMe: true, text: "Файлы и кружочки шифруются поблочно ключом AES-GCM." },
|
||
{ isMe: false, text: "Вау! А ключи файлов шифруются на общем X25519 ключе?" },
|
||
{ isMe: true, text: "Да, именно так! Полная крипто-защита." },
|
||
{ isMe: false, text: "Супер, теперь я спокоен за свои данные!" }
|
||
];
|
||
|
||
let msgIdx = 0;
|
||
|
||
// Updates phone time in the mockup to match real time
|
||
function updateMockupTime() {
|
||
const timeEl = document.querySelector('.mockup-time');
|
||
if (timeEl) {
|
||
const now = new Date();
|
||
timeEl.textContent = `${String(now.getHours()).padStart(2, '0')}:${String(now.getMinutes()).padStart(2, '0')}`;
|
||
}
|
||
}
|
||
updateMockupTime();
|
||
setInterval(updateMockupTime, 60000);
|
||
|
||
function simulateTypingAndSending() {
|
||
if (msgIdx >= conversation.length) {
|
||
msgIdx = 0;
|
||
chat.innerHTML = `
|
||
<div class="mockup-bubble partner">
|
||
Привет! Ты проверил систему шифрования Чепухаграм?
|
||
<span class="time">22:04</span>
|
||
</div>
|
||
<div class="mockup-bubble me">
|
||
Да! Используется X25519 для обмена ключами и AES-256-GCM для шифрования.
|
||
<span class="time">22:05</span>
|
||
</div>
|
||
<div class="mockup-bubble partner">
|
||
Отлично! А что с файлами и звонками?
|
||
<span class="time">22:05</span>
|
||
</div>
|
||
`;
|
||
setTimeout(simulateTypingAndSending, 3000);
|
||
return;
|
||
}
|
||
|
||
const nextMsg = conversation[msgIdx];
|
||
|
||
// Show typing indicator
|
||
const typing = document.createElement('div');
|
||
typing.className = 'typing-indicator';
|
||
typing.innerHTML = '<span></span><span></span><span></span>';
|
||
chat.appendChild(typing);
|
||
chat.scrollTop = chat.scrollHeight;
|
||
|
||
inputField.textContent = "Печатает...";
|
||
|
||
setTimeout(() => {
|
||
// Remove typing indicator
|
||
typing.remove();
|
||
|
||
inputField.textContent = nextMsg.text;
|
||
|
||
setTimeout(() => {
|
||
const bubble = document.createElement('div');
|
||
bubble.className = `mockup-bubble ${nextMsg.isMe ? 'me' : 'partner'}`;
|
||
|
||
const time = new Date();
|
||
const timeStr = `${String(time.getHours()).padStart(2, '0')}:${String(time.getMinutes()).padStart(2, '0')}`;
|
||
|
||
bubble.innerHTML = `${nextMsg.text}<span class="time">${timeStr}</span>`;
|
||
chat.appendChild(bubble);
|
||
chat.scrollTop = chat.scrollHeight;
|
||
|
||
inputField.textContent = "Напишите сообщение...";
|
||
msgIdx++;
|
||
|
||
setTimeout(simulateTypingAndSending, 3500);
|
||
}, 800);
|
||
}, 2000);
|
||
}
|
||
|
||
setTimeout(simulateTypingAndSending, 3000);
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|