Initial commit with all files
This commit is contained in:
20
.htaccess
Normal file
20
.htaccess
Normal file
@@ -0,0 +1,20 @@
|
||||
RewriteEngine On
|
||||
|
||||
# Rewrite /en/(.*) to /lang/en/$1
|
||||
RewriteRule ^en/(.*)$ /lang/en/$1 [L]
|
||||
|
||||
# Rewrite /ru/(.*) to /lang/ru/$1
|
||||
RewriteRule ^ru/(.*)$ /lang/ru/$1 [L]
|
||||
|
||||
# Rewrite /es/(.*) to /lang/es/$1
|
||||
RewriteRule ^es/(.*)$ /lang/es/$1 [L]
|
||||
|
||||
# Rewrite / to /en/
|
||||
RewriteRule ^/$ /en/ [L]
|
||||
|
||||
# Add MIME types for web fonts
|
||||
AddType application/font-woff .woff
|
||||
AddType application/font-woff2 .woff2
|
||||
AddType application/x-font-ttf .ttf
|
||||
AddType application/vnd.ms-fontobject .eot
|
||||
AddType image/svg+xml .svg
|
||||
9
css/all.min.css
vendored
Normal file
9
css/all.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
620
css/style.css
Normal file
620
css/style.css
Normal file
@@ -0,0 +1,620 @@
|
||||
html, body {
|
||||
font-family: 'Inter', 'Montserrat', Arial, sans-serif;
|
||||
background: #161616;
|
||||
color: #ededed;
|
||||
scroll-behavior: smooth;
|
||||
font-size: 17px;
|
||||
overflow-x: hidden;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Мобильные стили для таблицы сравнения */
|
||||
@media (max-width: 768px) {
|
||||
.glass-card .grid {
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr;
|
||||
}
|
||||
.glass-card .col-span-1 {
|
||||
word-break: break-word;
|
||||
white-space: normal;
|
||||
padding-right: 0.5rem;
|
||||
text-align: left !important;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.glass-card .col-span-1 i {
|
||||
margin-right: 0.5rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
#featuresContainer .feature-row {
|
||||
grid-template-columns: minmax(120px, 1fr) 1fr 1fr 1fr;
|
||||
}
|
||||
}
|
||||
.gradient-bg {
|
||||
background: radial-gradient(circle, #202327 65%, #0d0e11 100%);
|
||||
}
|
||||
.glass-card {
|
||||
background: rgba(36,40,46,0.76);
|
||||
border-radius: 2rem;
|
||||
box-shadow: 0 7px 48px 0 #000B;
|
||||
border: 1px solid rgba(116, 250, 255, 0.3);
|
||||
backdrop-filter: blur(8px);
|
||||
}
|
||||
.glass-card.selected {
|
||||
background: rgba(36,40,46,0.95);
|
||||
border: 1px solid rgba(116, 250, 255, 0.3);
|
||||
}
|
||||
.flipbook-page.active .glass-card {
|
||||
background: rgba(36,40,46,0.95);
|
||||
border: 1px solid rgba(116, 250, 255, 0.3);
|
||||
}
|
||||
.hero-3d {
|
||||
filter: drop-shadow(0 10px 90px #74faff66);
|
||||
animation:
|
||||
floaty 3.6s ease-in-out infinite alternate,
|
||||
glow-pulse 3.6s ease-in-out infinite alternate;
|
||||
will-change: transform, filter;
|
||||
}
|
||||
@keyframes floaty {
|
||||
from { transform: translateY(0px) rotateZ(-1deg); }
|
||||
to { transform: translateY(-16px) rotateZ(1deg);}
|
||||
}
|
||||
|
||||
@keyframes glow-pulse {
|
||||
from { filter: drop-shadow(0 10px 90px #74faff66); }
|
||||
to { filter: drop-shadow(0 15px 120px #74faff99); }
|
||||
}
|
||||
.pulse-cta {
|
||||
animation: pulse 1.5s infinite alternate;
|
||||
}
|
||||
@keyframes pulse {
|
||||
from { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
|
||||
to { box-shadow: 0 0 0 12px rgba(16, 185, 129, 0); }
|
||||
}
|
||||
.fade-up {
|
||||
opacity: 0;
|
||||
transform: translateY(36px);
|
||||
animation: fadeUp .8s forwards;
|
||||
animation-delay: var(--delay, 0s);
|
||||
}
|
||||
@keyframes fadeUp {
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
.shadow-3d {
|
||||
box-shadow: 0 12px 36px 0 #33f8fd14, 0 0px 0px #252526;
|
||||
transition: box-shadow .28s cubic-bezier(.16,1,.32,1), transform .24s cubic-bezier(.16,1,.32,1);
|
||||
}
|
||||
.shadow-3d:hover {
|
||||
box-shadow: 0 16px 64px 0 #29ffc679, 0 1px 6px #1115;
|
||||
transform: translateY(-6px) scale(1.05);
|
||||
}
|
||||
/* Для PDF: отключение горизонтальной прокрутки и псевдо-скроллбаров */
|
||||
::-webkit-scrollbar { display:none }
|
||||
|
||||
/* Добавленные стили для анимации иконок функций */
|
||||
.feature-row {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.feature-row:hover {
|
||||
transform: scale(1.05);
|
||||
background-color: #1e293b;
|
||||
}
|
||||
.check-icon, .cross-icon {
|
||||
position: relative;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.feature-row:hover .check-icon {
|
||||
color: #10b981 !important;
|
||||
animation: checkExplode 0.6s ease-out forwards;
|
||||
}
|
||||
.feature-row:hover .cross-icon {
|
||||
color: #ef4444 !important;
|
||||
animation: crossExplode 0.6s ease-out forwards;
|
||||
}
|
||||
|
||||
@keyframes checkExplode {
|
||||
0% {
|
||||
transform: scale(0.1);
|
||||
opacity: 0;
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.3);
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes crossExplode {
|
||||
0% {
|
||||
transform: scale(0.1);
|
||||
opacity: 0;
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.3);
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
.check-icon::after, .cross-icon::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
pointer-events: none;
|
||||
animation: particleFly 0.8s ease-out forwards;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.feature-row:hover .check-icon::after {
|
||||
background: radial-gradient(circle, #10b98133 0%, transparent 70%);
|
||||
box-shadow: 0 0 10px 4px #10b98133;
|
||||
}
|
||||
|
||||
.feature-row:hover .cross-icon::after {
|
||||
background: radial-gradient(circle, #ef444433 0%, transparent 70%);
|
||||
box-shadow: 0 0 10px 4px #ef444433;
|
||||
}
|
||||
|
||||
@keyframes particleFly {
|
||||
0% {
|
||||
transform: scale(0.5);
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
transform: scale(3);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* Стили для кнопок в карточках товаров */
|
||||
.buy-btn {
|
||||
background: linear-gradient(135deg, #10b981 0%, #34d399 100%);
|
||||
color: white;
|
||||
font-weight: 600;
|
||||
border-radius: 0.75rem;
|
||||
padding: 0.5rem 1rem;
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: 0 0 10px rgba(16, 185, 129, 0.5);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.buy-btn:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 0 20px rgba(16, 185, 129, 0.7);
|
||||
}
|
||||
|
||||
.buy-btn::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -50%;
|
||||
left: -50%;
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
background: linear-gradient(
|
||||
to bottom right,
|
||||
rgba(255, 255, 255, 0) 45%,
|
||||
rgba(255, 255, 255, 0.3) 50%,
|
||||
rgba(255, 255, 255, 0) 55%
|
||||
);
|
||||
transform: rotate(30deg);
|
||||
animation: shine 3s infinite;
|
||||
}
|
||||
|
||||
@keyframes shine {
|
||||
0% {
|
||||
left: -50%;
|
||||
}
|
||||
20% {
|
||||
left: 100%;
|
||||
}
|
||||
100% {
|
||||
left: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.details-btn {
|
||||
border: 1px solid #74faff;
|
||||
color: #74faff;
|
||||
font-weight: 500;
|
||||
border-radius: 0.75rem;
|
||||
padding: 0.5rem 1rem;
|
||||
transition: all 0.3s ease;
|
||||
background: rgba(116, 250, 255, 0.1);
|
||||
}
|
||||
|
||||
.details-btn:hover {
|
||||
background: rgba(116, 250, 255, 0.2);
|
||||
color: #b5f8ff;
|
||||
}
|
||||
|
||||
/* Стили флипбука */
|
||||
.flipbook-container {
|
||||
perspective: 2000px;
|
||||
overflow-x: hidden;
|
||||
position: relative;
|
||||
height: 36rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
contain: layout paint;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.flipbook-container {
|
||||
overflow-x: hidden;
|
||||
overflow-y: visible;
|
||||
padding: 0;
|
||||
height: 36rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.flipbook-container {
|
||||
height: 36rem;
|
||||
overflow: visible;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.flipbook-page {
|
||||
position: absolute;
|
||||
width: 16rem;
|
||||
height: 28rem;
|
||||
transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transform-style: preserve-3d;
|
||||
backface-visibility: hidden;
|
||||
border-radius: 1rem;
|
||||
box-shadow: 0 10px 25px rgba(0,0,0,0.3);
|
||||
opacity: 0.7;
|
||||
cursor: pointer;
|
||||
margin: 0 0.5rem;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.flipbook-page {
|
||||
width: 20rem;
|
||||
height: 36rem;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.flipbook-page:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.flipbook-page.active {
|
||||
transform: translateX(0) scale(1);
|
||||
opacity: 1;
|
||||
z-index: 10;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.flipbook-page.left {
|
||||
transform: translateX(-50%) rotateY(15deg) scale(0.9);
|
||||
opacity: 0.8;
|
||||
z-index: 4;
|
||||
filter: brightness(0.9);
|
||||
}
|
||||
|
||||
.flipbook-page.far-left {
|
||||
transform: translateX(-90%) rotateY(20deg) scale(0.8);
|
||||
opacity: 0.6;
|
||||
z-index: 3;
|
||||
filter: brightness(0.8);
|
||||
}
|
||||
|
||||
.flipbook-page.right {
|
||||
transform: translateX(50%) rotateY(-15deg) scale(0.9);
|
||||
opacity: 0.8;
|
||||
z-index: 4;
|
||||
filter: brightness(0.9);
|
||||
}
|
||||
|
||||
.flipbook-page.far-right {
|
||||
transform: translateX(90%) rotateY(-20deg) scale(0.8);
|
||||
opacity: 0.6;
|
||||
z-index: 3;
|
||||
filter: brightness(0.8);
|
||||
}
|
||||
|
||||
.flipbook-page.far-far-right {
|
||||
transform: translateX(130%) rotateY(-25deg) scale(0.7);
|
||||
opacity: 0.5;
|
||||
z-index: 2;
|
||||
filter: brightness(0.7);
|
||||
}
|
||||
|
||||
.flipbook-page.far-far-left {
|
||||
transform: translateX(-130%) rotateY(25deg) scale(0.7);
|
||||
opacity: 0.5;
|
||||
z-index: 2;
|
||||
filter: brightness(0.7);
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.flipbook-page.left {
|
||||
transform: translateX(-60%) rotateY(20deg) scale(0.9);
|
||||
}
|
||||
|
||||
.flipbook-page.far-left {
|
||||
transform: translateX(-120%) rotateY(30deg) scale(0.8);
|
||||
}
|
||||
|
||||
.flipbook-page.right {
|
||||
transform: translateX(60%) rotateY(-20deg) scale(0.9);
|
||||
}
|
||||
|
||||
.flipbook-page.far-right {
|
||||
transform: translateX(120%) rotateY(-30deg) scale(0.8);
|
||||
}
|
||||
|
||||
.flipbook-page.far-far-right {
|
||||
transform: translateX(180%) rotateY(-40deg) scale(0.7);
|
||||
}
|
||||
|
||||
.flipbook-page.far-far-left {
|
||||
transform: translateX(-180%) rotateY(40deg) scale(0.7);
|
||||
}
|
||||
}
|
||||
|
||||
/* Индикаторы круговой дорожки */
|
||||
.flipbook-indicator-track {
|
||||
position: absolute;
|
||||
bottom: -2rem;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 80%;
|
||||
height: 4px;
|
||||
background: rgba(46, 204, 113, 0.2);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.flipbook-indicator {
|
||||
position: absolute;
|
||||
bottom: -2rem;
|
||||
left: 50%;
|
||||
width: calc(100% / 6);
|
||||
height: 6px;
|
||||
background: #2ecc71;
|
||||
border-radius: 3px;
|
||||
transform: translateX(-50%);
|
||||
transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
/* Стили модального окна товара */
|
||||
#productModal {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: rgba(0, 0, 0, 0.8);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 1000;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
#productModal.show {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
background: rgba(36,40,46,0.95);
|
||||
border-radius: 2rem;
|
||||
padding: 2rem;
|
||||
max-width: 500px;
|
||||
width: 90%;
|
||||
border: 1px solid rgba(116, 250, 255, 0.5);
|
||||
box-shadow: 0 10px 30px rgba(0,0,0,0.5);
|
||||
transform: translateY(20px);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
#productModal.show .modal-content {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.modal-close {
|
||||
position: absolute;
|
||||
top: 1rem;
|
||||
right: 1rem;
|
||||
color: #74faff;
|
||||
font-size: 1.5rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.modal-close:hover {
|
||||
color: #b5f8ff;
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
/* Анимация градиента для слова "ЭКОСИСТЕМА" */
|
||||
.font-bebas-neue {
|
||||
display: inline-block;
|
||||
animation: ecosystemPulse 3s ease-in-out infinite;
|
||||
background: linear-gradient(90deg, #74faff, #b5f8ff, #74faff);
|
||||
background-size: 200% auto;
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
@keyframes ecosystemPulse {
|
||||
0% { background-position: 0% center; }
|
||||
50% { background-position: 100% center; }
|
||||
100% { background-position: 0% center; }
|
||||
}
|
||||
|
||||
/* Адаптивные стили для мобильных устройств */
|
||||
@media (max-width: 768px) {
|
||||
.hero-section h1 {
|
||||
font-size: 2.2rem;
|
||||
line-height: 1.2;
|
||||
padding: 0 1rem;
|
||||
word-break: break-word;
|
||||
}
|
||||
.font-bebas-neue {
|
||||
font-size: 2.8rem !important;
|
||||
display: block;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
.font-montserrat-alternates {
|
||||
font-size: 1.6rem;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.hero-section h1 {
|
||||
font-size: 1.8rem;
|
||||
padding: 0 0.5rem;
|
||||
}
|
||||
.font-bebas-neue {
|
||||
font-size: 2.2rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
#order .absolute.rounded-full {
|
||||
padding-left: 1rem; /* Reduced padding for mobile */
|
||||
padding-right: 1rem; /* Reduced padding for mobile */
|
||||
white-space: nowrap; /* Prevent text wrapping */
|
||||
}
|
||||
}
|
||||
|
||||
/* Styles for Language Switcher */
|
||||
#language-switcher {
|
||||
/* Apply glass-card shadow and border */
|
||||
box-shadow: 0 7px 48px 0 #000B;
|
||||
border: 1px solid rgba(116, 250, 255, 0.3);
|
||||
border-radius: 2rem; /* Match glass-card border-radius */
|
||||
/* Apply pulse animation */
|
||||
animation: pulse 1.5s infinite alternate;
|
||||
/* Ensure it's visible above other content */
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
#language-switcher #language-icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
background-color: #007bff; /* Example background, can be adjusted */
|
||||
text-align: center;
|
||||
line-height: 40px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#language-switcher #language-icon img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
/* Styles for Language Switcher */
|
||||
#language-switcher {
|
||||
/* Apply glass-card shadow and border */
|
||||
box-shadow: 0 7px 48px 0 #000B;
|
||||
border: 1px solid rgba(116, 250, 255, 0.3);
|
||||
border-radius: 2rem; /* Match glass-card border-radius */
|
||||
/* Apply pulse animation */
|
||||
animation: pulse 1.5s infinite alternate;
|
||||
/* Ensure it's visible above other content */
|
||||
z-index: 1000;
|
||||
position: fixed; /* Ensure positioning context for absolute children */
|
||||
bottom: 20px;
|
||||
right: 20px;
|
||||
}
|
||||
|
||||
#language-switcher #language-icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
background-color: #007bff; /* Example background, can be adjusted */
|
||||
text-align: center;
|
||||
line-height: 40px;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#language-switcher #language-icon img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.language-options-container {
|
||||
position: absolute;
|
||||
bottom: 50px;
|
||||
right: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition: opacity 0.3s ease, visibility 0.3s ease;
|
||||
}
|
||||
|
||||
.language-options-container.show {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.language-option {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
margin-bottom: 10px;
|
||||
cursor: pointer;
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
|
||||
filter: drop-shadow(0 2px 4px rgba(116, 250, 255, 0.3));
|
||||
}
|
||||
|
||||
.language-option:hover {
|
||||
box-shadow: 0 6px 12px rgba(0,0,0,0.3);
|
||||
filter: drop-shadow(0 4px 8px rgba(116, 250, 255, 0.5));
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.language-options-container.show .language-option {
|
||||
opacity: 1; /* Fade in when container is shown */
|
||||
transform: scale(1); /* Scale up when container is shown */
|
||||
}
|
||||
|
||||
/* Add animation delay for sequential appearance */
|
||||
.language-options-container.show .language-option:nth-child(1) {
|
||||
transition-delay: 0.2s;
|
||||
}
|
||||
.language-options-container.show .language-option:nth-child(2) {
|
||||
transition-delay: 0.4s;
|
||||
}
|
||||
.language-options-container.show .language-option:nth-child(3) {
|
||||
transition-delay: 0.6s;
|
||||
}
|
||||
|
||||
/* Add more nth-child rules if more languages are added */
|
||||
1
css/tailwind.min.css
vendored
Normal file
1
css/tailwind.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
9
docker-compose.yml
Normal file
9
docker-compose.yml
Normal file
@@ -0,0 +1,9 @@
|
||||
version: '3'
|
||||
services:
|
||||
web:
|
||||
image: nginx:alpine
|
||||
volumes:
|
||||
- ./:/usr/share/nginx/html
|
||||
- ./nginx.conf:/etc/nginx/conf.d/default.conf
|
||||
ports:
|
||||
- "9080:80"
|
||||
BIN
images/banner-image.webp
Normal file
BIN
images/banner-image.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
BIN
images/bb_on_white-square.webp
Normal file
BIN
images/bb_on_white-square.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.5 KiB |
BIN
images/logo.webp
Normal file
BIN
images/logo.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
BIN
images/scales.webp
Normal file
BIN
images/scales.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 36 KiB |
372
index.html
Normal file
372
index.html
Normal file
@@ -0,0 +1,372 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>BlackBox – Экосистема приватности и безопасности</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, minimum-scale=0.5, viewport-fit=cover">
|
||||
<meta name="description" content="BlackBox — физическое устройство для мультиуровневой приватности: VPN, анонимный email, приватный мессенджер, децентрализованный хостинг, защищённая передача файлов, крипто-операции. Глубокое динамическое сравнение — в одном устройстве.">
|
||||
<meta name="keywords" content="BlackBox, приватность, безопасность, VPN, экосистема, роутер, анонимный email, приватный мессенджер, децентрализованный хостинг, защищённая передача файлов, крипто-операции">
|
||||
<link href="/css/tailwind.min.css" rel="stylesheet">
|
||||
<link href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.5.2/css/all.min.css" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Montserrat+Alternates:wght@700;500&family=Montserrat:wght@700;500;400&family=Inter:wght@400;600&display=swap" rel="stylesheet">
|
||||
<script src="/js/echarts.min.js"></script>
|
||||
<link rel="stylesheet" href="/css/style.css">
|
||||
<!-- Open Graph Meta Tags for Social Media -->
|
||||
<meta property="og:title" content="BlackBox – Экосистема приватности и безопасности">
|
||||
<meta property="og:description" content="BlackBox — физическое устройство для мультиуровневой приватности: VPN, анонимный email, приватный мессенджер, децентрализованный хостинг, защищённая передача файлов, крипто-операции.">
|
||||
<meta property="og:image" content="/images/scales.webp"> <!-- Using the main device image -->
|
||||
<meta property="og:url" content="https://bbox.wtf"> <!-- Replace with actual URL -->
|
||||
<meta property="og:type" content="website">
|
||||
|
||||
<!-- Twitter Card Meta Tags -->
|
||||
<meta name="twitter:card" content="summary_large_image">
|
||||
<meta name="twitter:title" content="BlackBox – Экосистема приватности и безопасности">
|
||||
<meta name="twitter:description" content="BlackBox — физическое устройство для мультиуровневой приватности: VPN, анонимный email, приватный мессенджер, децентрализованный хостинг, защищённая передача файлов, крипто-операции.">
|
||||
<meta name="twitter:image" content="/images/scales.webp"> <!-- Using the main device image -->
|
||||
</head>
|
||||
<body class="gradient-bg overflow-x-hidden">
|
||||
|
||||
<!-- ШАПКА -->
|
||||
<header class="flex flex-wrap justify-between items-center px-5 md:px-10 py-7 bg-transparent z-10 relative">
|
||||
<a href="/ru/" class="flex items-center space-x-4">
|
||||
<img src="/images/logo.webp" alt="bbox logo" class="w-14 h-14 rounded-lg shadow-lg">
|
||||
<span class="font-montserrat font-bold text-2xl text-cyan-400 tracking-widest">BlackBox</span>
|
||||
</a>
|
||||
<nav class="hidden md:flex space-x-8 text-lg font-montserrat font-semibold">
|
||||
<a href="/ru/#features" class="hover:text-cyan-400 transition-colors">Особенности</a>
|
||||
<a href="/ru/#supercompare" class="hover:text-cyan-400 transition-colors">Сравнение</a>
|
||||
<a href="/ru/#pricing" class="hover:text-cyan-400 transition-colors">Цена</a>
|
||||
<a href="/ru/#testimonials" class="hover:text-cyan-400 transition-colors">Отзывы</a>
|
||||
</nav>
|
||||
<a href="#order" class="pulse-cta rounded-xl px-7 py-3 bg-emerald-500 text-white text-lg font-bold shadow-lg hover:bg-emerald-400 transition-all duration-300 transform hover:scale-105" style="font-family: 'Montserrat', sans-serif; box-shadow: 0 0 15px 5px rgba(16, 185, 129, 0.5);">
|
||||
Заказать сейчас
|
||||
<i class="fas fa-lock ml-2"></i>
|
||||
</a>
|
||||
</header>
|
||||
|
||||
<!-- ГЛАВНЫЙ РАЗДЕЛ -->
|
||||
<section class="pt-10 pb-14 md:pt-18 md:pb-32 px-5 lg:px-0 flex flex-col items-center text-center relative overflow-visible bg-gradient-to-b from-black/90 to-gray-950 z-0">
|
||||
<div class="w-full mx-auto shadow-3d transition-all duration-300" style="background: url('/images/banner-image.webp') center/cover no-repeat; padding: 2rem; border-radius: 1rem;">
|
||||
<h1 class="text-3xl md:text-5xl lg:text-6xl leading-tight mb-6 fade-up text-white" style="--delay:.1s; text-shadow: 0 2px 4px rgba(0,0,0,0.5);">
|
||||
<span class="font-montserrat-alternates font-medium">Целая</span><br class="hidden md:inline">
|
||||
<span class="font-bebas-neue">ЭКОСИСТЕМА</span><br class="hidden lg:inline">
|
||||
<span class="font-montserrat-alternates font-medium">Приватности</span><br>
|
||||
<span class="text-cyan-400 font-montserrat">в одном устройстве</span>
|
||||
</h1>
|
||||
<p class="text-xl md:text-2xl max-w-2xl mx-auto mb-10 text-white fade-up" style="--delay:.3s">
|
||||
BlackBox — не просто VPN.<br>
|
||||
Это инновационное аппаратное решение, которое объединяет инструменты приватности, общения и блокировки слежки на уровне, который невозможен у обычных VPN-сервисов и роутеров!
|
||||
</p>
|
||||
<div class="flex flex-col md:flex-row gap-4 items-center justify-center fade-up" style="--delay:.55s">
|
||||
<a href="#order" class="pulse-cta px-12 py-4 rounded-2xl text-white font-extrabold font-montserrat bg-gradient-to-r from-emerald-500 to-green-500 text-2xl shadow-3d hover:from-emerald-400 hover:to-green-400 transform-gpu transition-all duration-300 hover:scale-105" style="box-shadow: 0 0 20px 8px rgba(16, 185, 129, 0.6);">Купить со скидкой</a>
|
||||
<a href="#supercompare" class="px-10 py-4 rounded-2xl border-2 border-cyan-400 text-cyan-300 bg-transparent font-bold text-xl font-montserrat hover:bg-cyan-700/10 transition">Динамическое сравнение</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-14 mb-8 relative flex justify-center fade-up" style="--delay:.85s;">
|
||||
<img src="/images/scales.webp" alt="BlackBox Device" class="hero-3d rounded-3xl w-[370px] md:w-[470px] z-10" draggable="false">
|
||||
<div class="absolute -bottom-4 left-1/2 -translate-x-1/2 w-72 h-16 bg-cyan-400/10 rounded-full blur-2xl z-0"></div>
|
||||
</div>
|
||||
<div class="mt-4 max-w-2xl mx-auto fade-up" style="--delay:1.1s;">
|
||||
<span class="inline-flex items-center px-4 py-1 rounded-full bg-cyan-800/20 text-cyan-200 font-semibold text-lg animate-pulse">
|
||||
<i class="fas fa-bolt text-yellow-300 mr-2"></i>
|
||||
Скидка 30% на предзаказ до 1 июня!
|
||||
</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- СУПЕРДИНАМИЧЕСКОЕ СРАВНЕНИЕ -->
|
||||
<section id="supercompare" class="max-w-5xl mx-auto py-14 px-5 fade-up" style="--delay:.1s">
|
||||
<h2 class="text-3xl md:text-4xl font-black font-montserrat text-cyan-400 mb-5 text-center tracking-tight">
|
||||
Динамическое сравнение: <span class="text-white">BlackBox</span> против VPN и роутеров
|
||||
</h2>
|
||||
<p class="text-lg text-gray-300 max-w-2xl mx-auto mb-10 text-center">
|
||||
<span class="text-cyan-300 font-bold">BlackBox</span> — это <span class="underline">экосистема приватности</span>. Смотрите как поддержка функций расширяется в сравнении с простыми VPN-сервисами и аппаратными роутерами.
|
||||
</p>
|
||||
|
||||
<div class="glass-card shadow-3d p-8 mb-8">
|
||||
<div class="grid grid-cols-4 gap-4 mb-6">
|
||||
<div class="col-span-1 font-bold text-gray-300 text-right pr-4">Функции</div>
|
||||
<div class="col-span-1 font-bold text-cyan-400 text-center">BlackBox</div>
|
||||
<div class="col-span-1 font-bold text-blue-400 text-center">VPN-Роутер</div>
|
||||
<div class="col-span-1 font-bold text-purple-400 text-center">VPN-сервис</div>
|
||||
</div>
|
||||
|
||||
<div id="featuresContainer">
|
||||
<!-- Features will be inserted here by JS -->
|
||||
</div>
|
||||
|
||||
<div class="text-gray-400 mt-6 text-base">
|
||||
<i class="fas fa-info-circle text-cyan-300"></i>
|
||||
<span class="ml-1">Наведите курсор на строку, чтобы увидеть подробности о каждой функции</span>
|
||||
</div>
|
||||
<div id="dynCompareHint" class="font-mono text-sm mt-3 p-3 bg-gray-800/50 rounded-lg"></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<!-- ОСОБЕННОСТИ -->
|
||||
<section id="features" class="max-w-7xl mx-auto mt-8 lg:mt-0 py-13 px-5">
|
||||
<h2 class="text-3xl md:text-4xl font-bold font-montserrat text-cyan-400 mb-7 fade-up" style="--delay:.15s">BlackBox: преимущества экосистемы</h2>
|
||||
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8 fade-up" style="--delay:.22s">
|
||||
<div class="glass-card shadow-3d p-8 transition hover:scale-105">
|
||||
<i class="fas fa-user-secret text-cyan-300 text-4xl mb-4"></i>
|
||||
<h3 class="font-bold text-xl mb-2">Все инструменты приватности</h3>
|
||||
<p class="text-gray-300">VPN, мессенджер, email, файлы, кошелек и хостинг — в одном мини-компьютере. Больше не нужно искать отдельные сервисы!</p>
|
||||
</div>
|
||||
<div class="glass-card shadow-3d p-8 transition hover:scale-105">
|
||||
<i class="fas fa-globe text-cyan-400 text-4xl mb-4"></i>
|
||||
<h3 class="font-bold text-xl mb-2">Анонимный интернет & даркнет</h3>
|
||||
<p class="text-gray-300">Безопасный доступ ко всем сервисам, включая onion и децентрализованный интернет — даже если они заблокированы вашим провайдером.</p>
|
||||
</div>
|
||||
<div class="glass-card shadow-3d p-8 transition hover:scale-105">
|
||||
<i class="fas fa-comments text-purple-300 text-4xl mb-4"></i>
|
||||
<h3 class="font-bold text-xl mb-2">Личный защищённый мессенджер</h3>
|
||||
<p class="text-gray-300">Собственная платформа для групповых и приватных чатов без риска "утечек". Все данные только у вас!</p>
|
||||
</div>
|
||||
<div class="glass-card shadow-3d p-8 transition hover:scale-105">
|
||||
<i class="fas fa-envelope-open-text text-yellow-300 text-4xl mb-4"></i>
|
||||
<h3 class="font-bold text-xl mb-2">Анонимный email и обмен файлами</h3>
|
||||
<p class="text-gray-300">Создание почтового адреса за 1 клик, обмен файлами без посредников и цензуры.</p>
|
||||
</div>
|
||||
<div class="glass-card shadow-3d p-8 transition hover:scale-105">
|
||||
<i class="fas fa-coins text-emerald-300 text-4xl mb-4"></i>
|
||||
<h3 class="font-bold text-xl mb-2">Изолированный крипто-кошелек</h3>
|
||||
<p class="text-gray-300">Cold-wallet для хранения и операций криптовалютой с максимальной изоляцией от интернет-угроз.</p>
|
||||
</div>
|
||||
<div class="glass-card shadow-3d p-8 transition hover:scale-105">
|
||||
<i class="fas fa-users-cog text-pink-400 text-4xl mb-4"></i>
|
||||
<h3 class="font-bold text-xl mb-2">Платформа для всех устройств</h3>
|
||||
<p class="text-gray-300">BlackBox работает как для одного пользователя, так и для всей семьи или бизнес-группы. Неограниченное количество подключённых устройств.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ВИТРИНА ПРОДУКТОВ -->
|
||||
<section id="products" class="max-w-6xl mx-auto py-12 fade-up" style="--delay:.1s">
|
||||
<h2 class="text-3xl md:text-4xl font-extrabold mb-10 font-montserrat text-center text-cyan-400 px-6">Модельный ряд BlackBox</h2>
|
||||
|
||||
<div class="flipbook-container relative h-96 md:h-[36rem] w-full">
|
||||
<!-- BlackBox VPN (far left) -->
|
||||
<div class="flipbook-page" data-page="1">
|
||||
<div class="glass-card shadow-3d p-6 text-center h-full">
|
||||
<div class="h-40 mb-4 flex items-center justify-center">
|
||||
<img src="/images/bb_on_white-square.webp" alt="BlackBox VPN" class="h-full object-contain rounded-lg">
|
||||
</div>
|
||||
<h3 class="text-xl font-bold mb-3 text-cyan-300 product-title" data-product="BlackBox VPN">BlackBox VPN</h3>
|
||||
<div class="inline-flex items-center px-3 py-1 rounded-full bg-cyan-800/20 text-cyan-200 font-bold mb-3 animate-pulse">
|
||||
<span>99 €</span>
|
||||
</div>
|
||||
<p class="text-gray-300 mb-4 product-description">Создаёт Wi-Fi точку с защищённым VPN. 512 MB RAM.</p>
|
||||
<div class="flex justify-center gap-3">
|
||||
<button class="buy-btn product-buy-btn">Купить</button>
|
||||
<button onclick="showProductDetails(1)" class="details-btn product-details-btn">Подробнее</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- BlackBox Privacy Messenger/Cloud (left) -->
|
||||
<div class="flipbook-page" data-page="2">
|
||||
<div class="glass-card shadow-3d p-6 text-center h-full">
|
||||
<div class="h-40 mb-4 flex items-center justify-center">
|
||||
<img src="/images/bb_on_white-square.webp" alt="BlackBox Privacy" class="h-full object-contain rounded-lg">
|
||||
</div>
|
||||
<h3 class="text-xl font-bold mb-3 text-cyan-300 product-title" data-product="BlackBox Privacy Messenger/Cloud">BlackBox Privacy Messenger/Cloud</h3>
|
||||
<div class="inline-flex items-center px-3 py-1 rounded-full bg-cyan-800/20 text-cyan-200 font-bold mb-3 animate-pulse">
|
||||
<span>199 €</span>
|
||||
</div>
|
||||
<p class="text-gray-300 mb-4 product-description">Встроенный Matrix Messenger или Nextcloud. 1 GB RAM. Полный контроль над вашими данными.</p>
|
||||
<div class="flex justify-center gap-3">
|
||||
<button class="buy-btn product-buy-btn">Купить</button>
|
||||
<button onclick="showProductDetails(2)" class="details-btn product-details-btn">Подробнее</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- BlackBox 4GB (center) -->
|
||||
<div class="flipbook-page active" data-page="3">
|
||||
<div class="glass-card shadow-3d p-6 text-center h-full selected">
|
||||
<div class="h-40 mb-4 flex items-center justify-center">
|
||||
<img src="/images/bb_on_white-square.webp" alt="BlackBox 4GB" class="h-full object-contain rounded-lg">
|
||||
</div>
|
||||
<h3 class="text-xl font-bold mb-3 text-cyan-300 product-title" data-product="BlackBox 4GB">BlackBox 4GB</h3>
|
||||
<div class="inline-flex items-center px-3 py-1 rounded-full bg-cyan-800/20 text-cyan-200 font-bold mb-3 animate-pulse">
|
||||
<span>299 €</span>
|
||||
</div>
|
||||
<p class="text-gray-300 mb-4 product-description">Все функции первых моделей + удалённый рабочий стол (Workspace). 4 GB RAM.</p>
|
||||
<div class="flex justify-center gap-3">
|
||||
<button class="buy-btn product-buy-btn">Купить</button>
|
||||
<button onclick="showProductDetails(3)" class="details-btn product-details-btn">Подробнее</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- BlackBox Workstation (right) -->
|
||||
<div class="flipbook-page" data-page="4">
|
||||
<div class="glass-card shadow-3d p-6 text-center h-full">
|
||||
<div class="h-40 mb-4 flex items-center justify-center">
|
||||
<img src="/images/bb_on_white-square.webp" alt="BlackBox Workstation" class="h-full object-contain rounded-lg">
|
||||
</div>
|
||||
<h3 class="text-xl font-bold mb-3 text-cyan-300 product-title" data-product="BlackBox Workstation">BlackBox Workstation</h3>
|
||||
<div class="inline-flex items-center px-3 py-1 rounded-full bg-cyan-800/20 text-cyan-200 font-bold mb-3 animate-pulse">
|
||||
<span>499 €</span>
|
||||
</div>
|
||||
<p class="text-gray-300 mb-4 product-description">Полноценная рабочая станция. Все функции предыдущих моделей.</p>
|
||||
<div class="flex justify-center gap-3">
|
||||
<button class="buy-btn product-buy-btn">Купить</button>
|
||||
<button onclick="showProductDetails(4)" class="details-btn product-details-btn">Подробнее</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- BlackBox AI (far right) -->
|
||||
<div class="flipbook-page" data-page="5">
|
||||
<div class="glass-card shadow-3d p-6 text-center h-full">
|
||||
<div class="h-40 mb-4 flex items-center justify-center">
|
||||
<img src="/images/bb_on_white-square.webp" alt="BlackBox AI" class="h-full object-contain rounded-lg">
|
||||
</div>
|
||||
<h3 class="text-xl font-bold mb-3 text-cyan-300 product-title" data-product="BlackBox AI">BlackBox AI</h3>
|
||||
<div class="inline-flex items-center px-3 py-1 rounded-full bg-cyan-800/20 text-cyan-200 font-bold mb-3 animate-pulse" style="box-shadow: 0 0 10px 2px rgba(116, 250, 255, 0.3);">
|
||||
<span>2999 €</span>
|
||||
</div>
|
||||
<p class="text-gray-300 mb-4 product-description">Включает все технологии BlackBox. Приватный искусственный интеллект. Максимальная автономность и защита.</p>
|
||||
<div class="flex justify-center gap-3">
|
||||
<button class="buy-btn product-buy-btn">Купить</button>
|
||||
<button onclick="showProductDetails(5)" class="details-btn product-details-btn">Подробнее</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- BlackBox Shop -->
|
||||
<div class="flipbook-page" data-page="6">
|
||||
<div class="glass-card shadow-3d p-6 text-center h-full">
|
||||
<div class="h-40 mb-4 flex items-center justify-center">
|
||||
<img src="/images/bb_on_white-square.webp" alt="BlackBox Shop" class="h-full object-contain rounded-lg">
|
||||
</div>
|
||||
<h3 class="text-xl font-bold mb-3 text-cyan-300 product-title" data-product="BlackBox Shop">BlackBox Shop</h3>
|
||||
<div class="inline-flex items-center px-3 py-1 rounded-full bg-cyan-800/20 text-cyan-200 font-bold mb-3 animate-pulse" style="box-shadow: 0 0 10px 2px rgba(116, 250, 255, 0.3);">
|
||||
<span>от 499 €</span>
|
||||
</div>
|
||||
<p class="text-gray-300 mb-4 product-description">Создание магазина в Telegram через бота. Загрузка товаров, описание, цена. Оплата за товары через криптовалюту. Полная анонимность продавца и покупателя.</p>
|
||||
<div class="flex justify-center gap-3">
|
||||
<button class="buy-btn product-buy-btn">Купить</button>
|
||||
<button onclick="showProductDetails(6)" class="details-btn product-details-btn">Подробнее</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flipbook-indicator-track"></div>
|
||||
<div class="flipbook-indicator" style="transform: translateX(-150%);"></div>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
<!-- PRICING & ORDER -->
|
||||
<section id="order" class="max-w-3xl mx-auto mb-18 py-12 px-6 rounded-3xl glass-card mt-14 text-center border-2 border-cyan-500 relative fade-up" style="--delay:.1s">
|
||||
<div class="absolute top-3 left-1/3 -translate-x-1/2 bg-gradient-to-r from-emerald-500 to-green-500 text-white text-lg font-black rounded-full px-8 py-2 shadow-xl animate-bounce" style="box-shadow: 0 0 15px 5px rgba(16, 185, 129, 0.5);">
|
||||
-30% Только сейчас!
|
||||
</div>
|
||||
<h2 class="text-3xl md:text-4xl font-extrabold mb-4 font-montserrat">Закажите BlackBox WorkStation со скидкой <span class="text-cyan-400">350 USD</span></h2>
|
||||
<p class="text-lg text-gray-200 mb-6 max-w-xl mx-auto">Единоразовая оплата — никаких подписок.<br> Доставка по всему миру. Количество устройств по акции ограничено!</p>
|
||||
<div class="flex flex-wrap items-center justify-center gap-8 mb-7">
|
||||
<div class="text-left bg-gray-800/70 rounded-2xl p-6">
|
||||
<div class="text-2xl">
|
||||
<span class="text-cyan-400 font-bold">149 USD</span>
|
||||
<span class="line-through text-gray-500 ml-2 text-lg">499 USD</span>
|
||||
</div>
|
||||
<div class="text-gray-400 text-xs mt-1">Спец. цена для 10 первых покупателей</div>
|
||||
<div class="mt-3 text-base text-green-300 font-bold">+ Бесплатное обновление в течении года</div>
|
||||
</div>
|
||||
<ul class="text-left space-y-2 text-sm text-gray-200">
|
||||
<li><i class="fas fa-check mr-2 text-cyan-400"></i>Гарантия возврата денег 30 дней</li>
|
||||
<li><i class="fas fa-check mr-2 text-cyan-400"></i>Доставка по всему миру</li>
|
||||
<li><i class="fas fa-check mr-2 text-cyan-400"></i>Персональная поддержка</li>
|
||||
</ul>
|
||||
</div>
|
||||
<a href="https://bbox.rocks/#order" target="_blank" class="pulse-cta px-12 py-4 rounded-xl text-white font-extrabold font-montserrat bg-gradient-to-r from-cyan-400 via-emerald-400 to-cyan-500 shadow-3d text-2xl hover:bg-cyan-400 transform transition">Заказать</a>
|
||||
<div class="mt-6 text-gray-300 text-base">Действительно до <span class="inline-block text-cyan-300 rounded px-2 py-1 font-bold bg-cyan-800/30">1 июня 2025</span> или пока не кончится запас.</div>
|
||||
</section>
|
||||
|
||||
<!-- PRODUCT DETAILS MODAL -->
|
||||
<div id="productModal" class="fixed inset-0 bg-black/80 z-50 flex items-center justify-center hidden">
|
||||
<div class="modal-content relative">
|
||||
<span class="modal-close" onclick="hideProductDetails()">×</span>
|
||||
<h3 id="modalTitle" class="text-2xl font-bold mb-4 text-cyan-400"></h3>
|
||||
<p id="modalDescription" class="text-gray-300 mb-6"></p>
|
||||
<button class="w-full py-3 buy-btn text-lg modal-buy-btn">Купить сейчас</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- TESTIMONIALS -->
|
||||
<section id="testimonials" class="max-w-6xl mx-auto py-11 px-6 mt-4 fade-up" style="--delay:.1s">
|
||||
<h2 class="text-3xl font-extrabold text-cyan-400 mb-7 text-center">Что говорят наши пользователи?</h2>
|
||||
<div class="grid md:grid-cols-3 gap-7 lg:gap-12">
|
||||
<div class="glass-card p-7 shadow-3d flex flex-col items-center text-center">
|
||||
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Testimonial" class="w-14 h-14 rounded-full mb-3 shadow-lg">
|
||||
<div class="mb-2 font-bold text-lg text-emerald-300">Андрей, стартапер</div>
|
||||
<div class="text-gray-300 italic">"BlackBox — первый гаджет, которому я доверяю свои личные данные. Никаких логов, быстрая работа, супер для работы из любой точки мира."</div>
|
||||
</div>
|
||||
<div class="glass-card p-7 shadow-3d flex flex-col items-center text-center border-2 border-cyan-400">
|
||||
<img src="https://randomuser.me/api/portraits/women/43.jpg" alt="Testimonial" class="w-14 h-14 rounded-full mb-3 shadow-lg">
|
||||
<div class="mb-2 font-bold text-lg text-cyan-300">Мария, мама</div>
|
||||
<div class="text-gray-300 italic">"Для нас BlackBox — гарантия интернет-безопасности всей семьи. Даже дети могут пользоваться, ничего не настраивая."</div>
|
||||
</div>
|
||||
<div class="glass-card p-7 shadow-3d flex flex-col items-center text-center">
|
||||
<img src="https://randomuser.me/api/portraits/men/67.jpg" alt="Testimonial" class="w-14 h-14 rounded-full mb-3 shadow-lg">
|
||||
<div class="mb-2 font-bold text-lg text-purple-300">Влад, программист</div>
|
||||
<div class="text-gray-300 italic">"Linux, опенсорс, анонимность — все работает быстро и продуманно. Отличная альтернатива VPN-сервисам и роутерам."</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- FOOTER -->
|
||||
<footer class="w-full mt-10 pt-7 pb-8 bg-black/60 flex flex-col items-center text-center text-gray-500 text-sm">
|
||||
<img src="/images/logo.webp" alt="bbox logo" class="w-10 h-10 mx-auto mb-3">
|
||||
<div class="mb-2">
|
||||
<span class="font-montserrat font-bold text-cyan-400 text-lg">BlackBox</span> © 2022-2025. Все права защищены.<br>
|
||||
</div>
|
||||
<div class="flex justify-center space-x-6 mb-4">
|
||||
<a href="https://t.me/bbox_wtf" target="_blank" class="text-cyan-300 hover:text-cyan-400 transition-colors" aria-label="Наш канал в Telegram">
|
||||
<i class="fab fa-telegram text-2xl"></i> Telegram
|
||||
</a>
|
||||
<a href="https://vk.com/bbox_wtf" target="_blank" class="text-cyan-300 hover:text-cyan-400 transition-colors" aria-label="Наша группа ВКонтакте">
|
||||
<i class="fab fa-vk text-2xl"></i> ВКонтакте
|
||||
</a>
|
||||
</div>
|
||||
<div>
|
||||
<a href="mailto:support@bbox.wtf" class="hover:underline text-cyan-300">Поддержка</a>
|
||||
|
|
||||
<a href="/pages/faq.html" class="hover:underline text-cyan-300">FAQ</a>
|
||||
|
|
||||
<a href="https://bbox.rocks" class="hover:underline">Старый не поддерживаемый сайт</a>
|
||||
</div>
|
||||
<div class="mt-4">
|
||||
<span class="text-gray-400">bbox.wtf — лендинг нового поколения: BlackBox — не просто VPN, это экосистема и ваша цифровая приватность.</span>
|
||||
</div>
|
||||
</footer>
|
||||
<script src="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.5.2/js/all.min.js"></script>
|
||||
<script src="/js/features.js"></script>
|
||||
<script src="/js/flipbook.js"></script>
|
||||
<script src="/js/fade-up.js"></script>
|
||||
<!-- Yandex.Metrika counter -->
|
||||
<script type="text/javascript" >
|
||||
(function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)};
|
||||
m[i].l=1*new Date();
|
||||
for (var j = 0; j < document.scripts.length; j++) {if (document.scripts[j].src === r) { return; }}
|
||||
k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)})
|
||||
(window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym");
|
||||
|
||||
ym(55764994, "init", {
|
||||
clickmap:true,
|
||||
trackLinks:true,
|
||||
accurateTrackBounce:true,
|
||||
webvisor:true,
|
||||
trackHash:true
|
||||
});
|
||||
</script>
|
||||
<noscript><div><img src="https://mc.yandex.ru/watch/55764994" style="position:absolute; left:-9999px;" alt="" /></div></noscript>
|
||||
<!-- /Yandex.Metrika counter -->
|
||||
<script src="/js/lang-detect-redirect.js"></script>
|
||||
<script src="/js/language-switcher.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
6
js/all.min.js
vendored
Normal file
6
js/all.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
45
js/echarts.min.js
vendored
Normal file
45
js/echarts.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
4
js/fade-up.js
Normal file
4
js/fade-up.js
Normal file
@@ -0,0 +1,4 @@
|
||||
// Анимация появления блоков при загрузке
|
||||
document.querySelectorAll('.fade-up').forEach((el,i) => {
|
||||
setTimeout(() => el.classList.add('animate-fadeUp'), 70+i*90)
|
||||
});
|
||||
109
js/features.js
Normal file
109
js/features.js
Normal file
@@ -0,0 +1,109 @@
|
||||
const originalFeaturesData = [
|
||||
{icon:'shield-halved', color:'#0ff'},
|
||||
{icon:'user-secret', color:'#6efaff'},
|
||||
{icon:'envelope-open-text', color:'#91eaff'},
|
||||
{icon:'cloud', color:'#fd7cff'},
|
||||
{icon:'file-shield', color:'#fedd60'},
|
||||
{icon:'coins', color:'#41fdc2'},
|
||||
{icon:'eye-slash', color:'#a6fca8'},
|
||||
{icon:'users', color:'#dc9afd'},
|
||||
];
|
||||
|
||||
const originalProductsData = [
|
||||
{color:'#0ff', data:[1,1,1,1,1,1,1,1]},
|
||||
{color:'#38bdf8', data:[1,1,0,0,0,0,0,1]},
|
||||
{color:'#8b5cf6', data:[1,1,0,0,0,0,0,0]},
|
||||
];
|
||||
|
||||
|
||||
let languageData = {};
|
||||
|
||||
async function fetchLanguageData(lang) {
|
||||
try {
|
||||
let response = await fetch(`/lang/${lang}/json/${lang}.json`);
|
||||
if (!response.ok) {
|
||||
console.error(`Failed to load language data for ${lang}: ${response.status}`);
|
||||
return null;
|
||||
}
|
||||
languageData = await response.json();
|
||||
return languageData;
|
||||
} catch (error) {
|
||||
console.error(`Error fetching language data for ${lang}:`, error);
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
function renderFeatures(data) {
|
||||
const container = document.getElementById('featuresContainer');
|
||||
container.innerHTML = '';
|
||||
|
||||
data.features.forEach((feature, index) => {
|
||||
const featureRow = document.createElement('div');
|
||||
featureRow.className = 'feature-row grid grid-cols-4 gap-4 py-3 border-b border-gray-700/50';
|
||||
featureRow.id = `feature-${index}`;
|
||||
|
||||
// Feature name
|
||||
const nameCell = document.createElement('div');
|
||||
nameCell.className = 'col-span-1 text-gray-300 text-right pr-4 flex items-center justify-end';
|
||||
const icon = originalFeaturesData[index].icon;
|
||||
const color = originalFeaturesData[index].color;
|
||||
nameCell.innerHTML = `<i class="fas fa-${icon} mr-2" style="color:${color}"></i>${feature.name}`;
|
||||
|
||||
// BlackBox
|
||||
const bbCell = document.createElement('div');
|
||||
bbCell.className = 'col-span-1 text-center flex items-center justify-center';
|
||||
const bbData = originalProductsData[0].data[index];
|
||||
bbCell.innerHTML = bbData
|
||||
? `<i class="fas fa-check-circle check-icon text-2xl text-cyan-400"></i>`
|
||||
: `<i class="fas fa-times-circle cross-icon text-xl text-gray-500"></i>`;
|
||||
|
||||
|
||||
// VPN Router
|
||||
const routerCell = document.createElement('div');
|
||||
routerCell.className = 'col-span-1 text-center flex items-center justify-center';
|
||||
const routerData = originalProductsData[1].data[index];
|
||||
routerCell.innerHTML = routerData
|
||||
? `<i class="fas fa-check-circle check-icon text-xl text-blue-400 opacity-70"></i>`
|
||||
: `<i class="fas fa-times-circle cross-icon text-xl text-gray-500"></i>`;
|
||||
|
||||
// VPN Service
|
||||
const vpnCell = document.createElement('div');
|
||||
vpnCell.className = 'col-span-1 text-center flex items-center justify-center';
|
||||
const vpnData = originalProductsData[2].data[index];
|
||||
vpnCell.innerHTML = vpnData
|
||||
? `<i class="fas fa-check-circle check-icon text-xl text-purple-400 opacity-70"></i>`
|
||||
: `<i class="fas fa-times-circle cross-icon text-xl text-gray-500"></i>`;
|
||||
|
||||
featureRow.appendChild(nameCell);
|
||||
featureRow.appendChild(bbCell);
|
||||
featureRow.appendChild(routerCell);
|
||||
featureRow.appendChild(vpnCell);
|
||||
container.appendChild(featureRow);
|
||||
});
|
||||
}
|
||||
|
||||
function setupHoverEffects(data) {
|
||||
document.querySelectorAll('#featuresContainer > div').forEach((row, index) => {
|
||||
row.addEventListener('mouseenter', () => {
|
||||
// Update hint
|
||||
document.getElementById('dynCompareHint').innerHTML =
|
||||
`<i class="fas fa-lightbulb text-cyan-300"></i> <span class="font-semibold">${data.features[index].name}:</span> ${data.features[index].hint}`;
|
||||
});
|
||||
|
||||
row.addEventListener('mouseleave', () => {
|
||||
// Clear hint
|
||||
document.getElementById('dynCompareHint').innerHTML = '';
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', async function() {
|
||||
const currentPath = window.location.pathname;
|
||||
const lang = currentPath.split('/')[1] || 'en'; // Get language from URL, default to 'en'
|
||||
|
||||
const data = await fetchLanguageData(lang);
|
||||
if (data) {
|
||||
renderFeatures(data);
|
||||
setupHoverEffects(data);
|
||||
}
|
||||
});
|
||||
153
js/flipbook.js
Normal file
153
js/flipbook.js
Normal file
@@ -0,0 +1,153 @@
|
||||
// Навигация флипбука
|
||||
let currentPage = 3;
|
||||
const totalPages = 6;
|
||||
const flipbookContainer = document.querySelector('.flipbook-container');
|
||||
const pages = document.querySelectorAll('.flipbook-page');
|
||||
const indicator = document.querySelector('.flipbook-indicator');
|
||||
|
||||
let startTranslateX = 0; // Initial translateX of the active page
|
||||
const pageSpacing = 16 * 1; // 1rem margin on each side of the page (0.5rem * 2)
|
||||
|
||||
function updatePages() {
|
||||
pages.forEach(page => {
|
||||
const pageNum = parseInt(page.dataset.page);
|
||||
const diff = pageNum - currentPage;
|
||||
|
||||
// Apply original classes for animation on both mobile and desktop
|
||||
page.classList.remove('active', 'left', 'right', 'far-left', 'far-right', 'far-far-right', 'far-far-left');
|
||||
if (diff === 0) {
|
||||
page.classList.add('active');
|
||||
} else if (diff === -1) {
|
||||
page.classList.add('left');
|
||||
} else if (diff === -2) {
|
||||
page.classList.add('far-left');
|
||||
} else if (diff === -3) {
|
||||
page.classList.add('far-far-left');
|
||||
} else if (diff === 1) {
|
||||
page.classList.add('right');
|
||||
} else if (diff === 2) {
|
||||
page.classList.add('far-right');
|
||||
} else if (diff === 3) {
|
||||
page.classList.add('far-far-right');
|
||||
}
|
||||
|
||||
// Calculate and apply translateX for each page based on its position relative to the active page
|
||||
// This is the core change for custom scrolling
|
||||
let translateX;
|
||||
// Calculate horizontal translation for each page
|
||||
if (window.innerWidth <= 768) {
|
||||
// Mobile: Adjusted translateX with tighter spacing
|
||||
translateX = (pageNum - currentPage) * (page.offsetWidth * 0.6 + pageSpacing) - 15;
|
||||
// Centering is handled by flexbox on the container
|
||||
} else {
|
||||
// Desktop: Adjusted translateX for spacing and to contribute to the curve effect
|
||||
// Multiplier (0.9) controls horizontal spacing between pages
|
||||
const desktopSpacing = page.offsetWidth * 0.9 + pageSpacing;
|
||||
translateX = (pageNum - currentPage) * desktopSpacing;
|
||||
// Centering is handled by flexbox on the container
|
||||
}
|
||||
|
||||
|
||||
// Apply combined transform: translateX, rotateY (for flip effect), and scale (for perspective)
|
||||
// rotateY: Controls the rotation around the Y-axis (the "flip")
|
||||
// Multipliers (12 for mobile, 20 for desktop) control the degree of rotation per page difference
|
||||
// scale: Controls the size of the page, creating a perspective effect
|
||||
// Multipliers (0.08 for mobile, 0.05 for desktop) control how much smaller pages get further away
|
||||
page.style.transform = `translateX(${translateX}px) rotateY(${diff * (window.innerWidth <= 768 ? 12 : 20)}deg) scale(${1 - Math.abs(diff) * (window.innerWidth <= 768 ? 0.08 : 0.05)})`;
|
||||
|
||||
// Adjust z-index based on distance from active page to control stacking order
|
||||
page.style.zIndex = totalPages - Math.abs(diff);
|
||||
|
||||
// Adjust opacity based on distance to create a fading effect for far pages
|
||||
// Multipliers (0.15 for mobile, 0.1 for desktop) control how much pages fade
|
||||
page.style.opacity = 1 - Math.abs(diff) * (window.innerWidth <= 768 ? 0.15 : 0.1);
|
||||
});
|
||||
|
||||
// Update indicator position
|
||||
let position;
|
||||
if (window.innerWidth <= 768) {
|
||||
// Indicator position for mobile (centered)
|
||||
position = ((currentPage - 1) / (totalPages - 1)) * 100 - 50;
|
||||
} else {
|
||||
// Indicator position for desktop (adjusted for wider range)
|
||||
position = ((currentPage - 1) / (totalPages - 1)) * 200 - 100;
|
||||
}
|
||||
indicator.style.transform = `translateX(${position}%)`;
|
||||
}
|
||||
|
||||
// Click navigation (keep original logic)
|
||||
pages.forEach(page => {
|
||||
page.addEventListener('click', (e) => {
|
||||
if (!page.classList.contains('active')) {
|
||||
currentPage = parseInt(page.dataset.page);
|
||||
updatePages();
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Mouse hover navigation (keep original logic)
|
||||
let hoverTimer;
|
||||
pages.forEach(page => {
|
||||
page.addEventListener('mouseenter', () => {
|
||||
if (!page.classList.contains('active')) {
|
||||
clearTimeout(hoverTimer);
|
||||
hoverTimer = setTimeout(() => {
|
||||
currentPage = parseInt(page.dataset.page);
|
||||
updatePages();
|
||||
}, 300);
|
||||
}
|
||||
});
|
||||
|
||||
page.addEventListener('mouseleave', () => {
|
||||
clearTimeout(hoverTimer);
|
||||
});
|
||||
});
|
||||
|
||||
// Touch swipe detection (removed for mobile as per user request)
|
||||
// The following touch event listeners and related variables are removed.
|
||||
// Navigation on mobile will now be handled by clicking on the cards.
|
||||
|
||||
// Handle window resize to switch between mobile/desktop layouts
|
||||
window.addEventListener('resize', updatePages);
|
||||
|
||||
// Initialize
|
||||
updatePages();
|
||||
|
||||
// Product details data - will be populated from HTML
|
||||
const productDetails = {};
|
||||
|
||||
// Initialize product details from data attributes
|
||||
function initProductDetails() {
|
||||
const productElements = document.querySelectorAll('.flipbook-page');
|
||||
productElements.forEach(page => {
|
||||
const pageNum = parseInt(page.dataset.page);
|
||||
const title = page.querySelector('.product-title').textContent;
|
||||
const description = page.querySelector('.product-description').textContent;
|
||||
productDetails[pageNum] = { title, description };
|
||||
});
|
||||
}
|
||||
|
||||
// Show product details modal
|
||||
function showProductDetails(pageNum) {
|
||||
const details = productDetails[pageNum];
|
||||
if (details) {
|
||||
document.getElementById('modalTitle').textContent = details.title;
|
||||
document.getElementById('modalDescription').textContent = details.description;
|
||||
document.getElementById('productModal').classList.add('show');
|
||||
}
|
||||
}
|
||||
|
||||
function hideProductDetails() {
|
||||
document.getElementById('productModal').classList.remove('show');
|
||||
}
|
||||
|
||||
// Close modal when clicking outside
|
||||
document.getElementById('productModal').addEventListener('click', function(e) {
|
||||
if (e.target === this) {
|
||||
hideProductDetails();
|
||||
}
|
||||
});
|
||||
|
||||
// Initialize
|
||||
initProductDetails();
|
||||
updatePages();
|
||||
21
js/lang-detect-redirect.js
Normal file
21
js/lang-detect-redirect.js
Normal file
@@ -0,0 +1,21 @@
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const currentPath = window.location.pathname;
|
||||
const supportedLanguages = ['en', 'ru', 'es'];
|
||||
const browserLang = (navigator.language || navigator.userLanguage).split('-')[0];
|
||||
|
||||
// Check if the current path already includes a supported language prefix
|
||||
const isOnLangPage = currentPath.startsWith('/en/') ||
|
||||
currentPath.startsWith('/ru/') ||
|
||||
currentPath.startsWith('/es/');
|
||||
|
||||
if (!isOnLangPage) {
|
||||
// Redirect to the browser's language version if supported, otherwise default to English
|
||||
const targetLang = supportedLanguages.includes(browserLang) ? browserLang : 'en';
|
||||
// Construct the new URL, preserving the rest of the path if any
|
||||
let newPath = currentPath;
|
||||
if (!currentPath.startsWith('/en/') && !currentPath.startsWith('/ru/') && !currentPath.startsWith('/es/')) {
|
||||
newPath = '/' + targetLang + currentPath;
|
||||
}
|
||||
window.location.replace(newPath);
|
||||
}
|
||||
});
|
||||
80
js/language-switcher.js
Normal file
80
js/language-switcher.js
Normal file
@@ -0,0 +1,80 @@
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const supportedLanguages = {
|
||||
'en': 'English',
|
||||
'ru': 'Русский',
|
||||
'es': 'Español'
|
||||
};
|
||||
|
||||
const switcherContainer = document.createElement('div');
|
||||
switcherContainer.id = 'language-switcher';
|
||||
switcherContainer.style.position = 'fixed';
|
||||
switcherContainer.style.bottom = '20px';
|
||||
switcherContainer.style.right = '20px';
|
||||
switcherContainer.style.zIndex = '1000';
|
||||
switcherContainer.style.cursor = 'pointer';
|
||||
|
||||
const currentLang = window.location.pathname.split('/')[1];
|
||||
const currentLangDisplay = supportedLanguages[currentLang] || 'Language'; // Fallback if not on a supported lang path
|
||||
|
||||
switcherContainer.innerHTML = `
|
||||
<div id="language-icon" style="width: 40px; height: 40px; border-radius: 50%; overflow: hidden; background-color: #007bff; text-align: center; line-height: 40px; font-weight: bold;">
|
||||
<img src="https://flagcdn.com/w40/${currentLang === 'en' ? 'gb' : currentLang}.png" alt="${currentLang.toUpperCase()}" style="width: 100%; height: 100%; object-fit: cover;">
|
||||
</div>
|
||||
<div id="language-options-container" class="language-options-container" style="position: absolute; bottom: 50px; right: 0;">
|
||||
${Object.keys(supportedLanguages).map(lang => `
|
||||
<div class="language-option" data-lang="${lang}" style="width: 40px; height: 40px; border-radius: 50%; overflow: hidden; margin-bottom: 10px; cursor: pointer;">
|
||||
<img src="https://flagcdn.com/w40/${lang === 'en' ? 'gb' : lang}.png" alt="${supportedLanguages[lang]}" style="width: 100%; height: 100%; object-fit: cover;">
|
||||
</div>
|
||||
`).join('')}
|
||||
</div>
|
||||
`;
|
||||
|
||||
document.body.appendChild(switcherContainer);
|
||||
|
||||
const languageIcon = document.getElementById('language-icon');
|
||||
const languageOptionsContainer = document.getElementById('language-options-container');
|
||||
|
||||
languageIcon.addEventListener('click', function(event) {
|
||||
// Close any other open language switchers first
|
||||
document.querySelectorAll('.language-options-container.show').forEach(el => {
|
||||
if (el !== languageOptionsContainer) {
|
||||
el.classList.remove('show');
|
||||
}
|
||||
});
|
||||
|
||||
// Toggle current switcher
|
||||
languageOptionsContainer.classList.toggle('show');
|
||||
|
||||
// Prevent event bubbling and default behavior
|
||||
event.stopPropagation();
|
||||
event.preventDefault();
|
||||
});
|
||||
|
||||
document.addEventListener('click', function(event) {
|
||||
if (!switcherContainer.contains(event.target)) {
|
||||
languageOptionsContainer.classList.remove('show');
|
||||
}
|
||||
});
|
||||
|
||||
// Close language switcher when other modals open
|
||||
document.addEventListener('modalOpened', function() {
|
||||
languageOptionsContainer.classList.remove('show');
|
||||
});
|
||||
|
||||
languageOptionsContainer.querySelectorAll('.language-option').forEach(item => {
|
||||
item.addEventListener('click', function() {
|
||||
const lang = this.getAttribute('data-lang');
|
||||
const currentPathname = window.location.pathname;
|
||||
const pathParts = currentPathname.split('/').filter(part => part !== '');
|
||||
|
||||
// Remove existing language prefix if present
|
||||
if (supportedLanguages[pathParts[0]]) {
|
||||
pathParts.shift();
|
||||
}
|
||||
|
||||
// Construct new path with selected language
|
||||
const newPath = '/' + lang + '/' + pathParts.join('/');
|
||||
window.location.href = newPath;
|
||||
});
|
||||
});
|
||||
});
|
||||
372
lang/en/index.html
Normal file
372
lang/en/index.html
Normal file
@@ -0,0 +1,372 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>BlackBox – Privacy and Security Ecosystem</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, minimum-scale=0.5, viewport-fit=cover">
|
||||
<meta name="description" content="BlackBox is a physical device for multi-level privacy: VPN, anonymous email, private messenger, decentralized hosting, secure file transfer, crypto operations. Deep dynamic comparison - in one device.">
|
||||
<meta name="keywords" content="BlackBox, privacy, security, VPN, ecosystem, router, anonymous email, private messenger, decentralized hosting, secure file transfer, crypto operations">
|
||||
<link href="/css/tailwind.min.css" rel="stylesheet">
|
||||
<link href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.5.2/css/all.min.css" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Montserrat+Alternates:wght@700;500&family=Montserrat:wght@700;500;400&family=Inter:wght@400;600&display=swap" rel="stylesheet">
|
||||
<script src="/js/echarts.min.js"></script>
|
||||
<link rel="stylesheet" href="/css/style.css">
|
||||
<!-- Open Graph Meta Tags for Social Media -->
|
||||
<meta property="og:title" content="BlackBox – Privacy and Security Ecosystem">
|
||||
<meta property="og:description" content="BlackBox is a physical device for multi-level privacy: VPN, anonymous email, private messenger, decentralized hosting, secure file transfer, crypto operations.">
|
||||
<meta property="og:image" content="/images/scales.webp"> <!-- Using the main device image -->
|
||||
<meta property="og:url" content="https://bbox.wtf"> <!-- Replace with actual URL -->
|
||||
<meta property="og:type" content="website">
|
||||
|
||||
<!-- Twitter Card Meta Tags -->
|
||||
<meta name="twitter:card" content="summary_large_image">
|
||||
<meta name="twitter:title" content="BlackBox – Privacy and Security Ecosystem">
|
||||
<meta name="twitter:description" content="BlackBox is a physical device for multi-level privacy: VPN, anonymous email, private messenger, decentralized hosting, secure file transfer, crypto operations.">
|
||||
<meta name="twitter:image" content="/images/scales.webp"> <!-- Using the main device image -->
|
||||
</head>
|
||||
<body class="gradient-bg overflow-x-hidden">
|
||||
|
||||
<!-- HEADER -->
|
||||
<header class="flex flex-wrap justify-between items-center px-5 md:px-10 py-7 bg-transparent z-10 relative">
|
||||
<a href="/en/" class="flex items-center space-x-4">
|
||||
<img src="/images/logo.webp" alt="bbox logo" class="w-14 h-14 rounded-lg shadow-lg">
|
||||
<span class="font-montserrat font-bold text-2xl text-cyan-400 tracking-widest">BlackBox</span>
|
||||
</a>
|
||||
<nav class="hidden md:flex space-x-8 text-lg font-montserrat font-semibold">
|
||||
<a href="/en/#features" class="hover:text-cyan-400 transition-colors">Features</a>
|
||||
<a href="/en/#supercompare" class="hover:text-cyan-400 transition-colors">Comparison</a>
|
||||
<a href="/en/#pricing" class="hover:text-cyan-400 transition-colors">Pricing</a>
|
||||
<a href="/en/#testimonials" class="hover:text-cyan-400 transition-colors">Testimonials</a>
|
||||
</nav>
|
||||
<a href="#order" class="pulse-cta rounded-xl px-7 py-3 bg-emerald-500 text-white text-lg font-bold shadow-lg hover:bg-emerald-400 transition-all duration-300 transform hover:scale-105" style="font-family: 'Montserrat', sans-serif; box-shadow: 0 0 15px 5px rgba(16, 185, 129, 0.5);">
|
||||
Order Now
|
||||
<i class="fas fa-lock ml-2"></i>
|
||||
</a>
|
||||
</header>
|
||||
|
||||
<!-- HERO SECTION -->
|
||||
<section class="pt-10 pb-14 md:pt-18 md:pb-32 px-5 lg:px-0 flex flex-col items-center text-center relative overflow-visible bg-gradient-to-b from-black/90 to-gray-950 z-0">
|
||||
<div class="w-full mx-auto shadow-3d transition-all duration-300" style="background: url('/images/banner-image.webp') center/cover no-repeat; padding: 2rem; border-radius: 1rem;">
|
||||
<h1 class="text-3xl md:text-5xl lg:text-6xl leading-tight mb-6 fade-up text-white" style="--delay:.1s; text-shadow: 0 2px 4px rgba(0,0,0,0.5);">
|
||||
<span class="font-montserrat-alternates font-medium">A complete</span><br class="hidden md:inline">
|
||||
<span class="font-bebas-neue">ECOSYSTEM</span><br class="hidden lg:inline">
|
||||
<span class="font-montserrat-alternates font-medium">of Privacy</span><br>
|
||||
<span class="text-cyan-400 font-montserrat">in one device</span>
|
||||
</h1>
|
||||
<p class="text-xl md:text-2xl max-w-2xl mx-auto mb-10 text-white fade-up" style="--delay:.3s">
|
||||
BlackBox is not just a VPN.<br>
|
||||
It is an innovative hardware solution that combines privacy, communication, and tracking blocking tools at a level impossible with ordinary VPN services and routers!
|
||||
</p>
|
||||
<div class="flex flex-col md:flex-row gap-4 items-center justify-center fade-up" style="--delay:.55s">
|
||||
<a href="#order" class="pulse-cta px-12 py-4 rounded-2xl text-white font-extrabold font-montserrat bg-gradient-to-r from-emerald-500 to-green-500 text-2xl shadow-3d hover:from-emerald-400 hover:to-green-400 transform-gpu transition-all duration-300 hover:scale-105" style="box-shadow: 0 0 20px 8px rgba(16, 185, 129, 0.6);">Buy with discount</a>
|
||||
<a href="#supercompare" class="px-10 py-4 rounded-2xl border-2 border-cyan-400 text-cyan-300 bg-transparent font-bold text-xl font-montserrat hover:bg-cyan-700/10 transition">Dynamic comparison</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-14 mb-8 relative flex justify-center fade-up" style="--delay:.85s;">
|
||||
<img src="/images/scales.webp" alt="BlackBox Device" class="hero-3d rounded-3xl w-[370px] md:w-[470px] z-10" draggable="false">
|
||||
<div class="absolute -bottom-4 left-1/2 -translate-x-1/2 w-72 h-16 bg-cyan-400/10 rounded-full blur-2xl z-0"></div>
|
||||
</div>
|
||||
<div class="mt-4 max-w-2xl mx-auto fade-up" style="--delay:1.1s;">
|
||||
<span class="inline-flex items-center px-4 py-1 rounded-full bg-cyan-800/20 text-cyan-200 font-semibold text-lg animate-pulse">
|
||||
<i class="fas fa-bolt text-yellow-300 mr-2"></i>
|
||||
30% discount on pre-order until June 1!
|
||||
</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- DYNAMIC COMPARISON -->
|
||||
<section id="supercompare" class="max-w-5xl mx-auto py-14 px-5 fade-up" style="--delay:.1s">
|
||||
<h2 class="text-3xl md:text-4xl font-black font-montserrat text-cyan-400 mb-5 text-center tracking-tight">
|
||||
Dynamic comparison: <span class="text-white">BlackBox</span> vs VPN and routers
|
||||
</h2>
|
||||
<p class="text-lg text-gray-300 max-w-2xl mx-auto mb-10 text-center">
|
||||
<span class="text-cyan-300 font-bold">BlackBox</span> is a <span class="underline">privacy ecosystem</span>. See how feature support expands compared to simple VPN services and hardware routers.
|
||||
</p>
|
||||
|
||||
<div class="glass-card shadow-3d p-8 mb-8">
|
||||
<div class="grid grid-cols-4 gap-4 mb-6">
|
||||
<div class="col-span-1 font-bold text-gray-300 text-right pr-4">Features</div>
|
||||
<div class="col-span-1 font-bold text-cyan-400 text-center">BlackBox</div>
|
||||
<div class="col-span-1 font-bold text-blue-400 text-center">VPN Router</div>
|
||||
<div class="col-span-1 font-bold text-purple-400 text-center">VPN Service</div>
|
||||
</div>
|
||||
|
||||
<div id="featuresContainer">
|
||||
<!-- Features will be inserted here by JS -->
|
||||
</div>
|
||||
|
||||
<div class="text-gray-400 mt-6 text-base">
|
||||
<i class="fas fa-info-circle text-cyan-300"></i>
|
||||
<span class="ml-1">Hover over a row to see details about each feature</span>
|
||||
</div>
|
||||
<div id="dynCompareHint" class="font-mono text-sm mt-3 p-3 bg-gray-800/50 rounded-lg"></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<!-- FEATURES -->
|
||||
<section id="features" class="max-w-7xl mx-auto mt-8 lg:mt-0 py-13 px-5">
|
||||
<h2 class="text-3xl md:text-4xl font-bold font-montserrat text-cyan-400 mb-7 fade-up" style="--delay:.15s">BlackBox: Ecosystem advantages</h2>
|
||||
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8 fade-up" style="--delay:.22s">
|
||||
<div class="glass-card shadow-3d p-8 transition hover:scale-105">
|
||||
<i class="fas fa-user-secret text-cyan-300 text-4xl mb-4"></i>
|
||||
<h3 class="font-bold text-xl mb-2">All privacy tools</h3>
|
||||
<p class="text-gray-300">VPN, messenger, email, files, wallet, and hosting - in one mini-computer. No more searching for separate services!</p>
|
||||
</div>
|
||||
<div class="glass-card shadow-3d p-8 transition hover:scale-105">
|
||||
<i class="fas fa-globe text-cyan-400 text-4xl mb-4"></i>
|
||||
<h3 class="font-bold text-xl mb-2">Anonymous internet & darknet</h3>
|
||||
<p class="text-gray-300">Secure access to all services, including onion and decentralized internet - even if they are blocked by your provider.</p>
|
||||
</div>
|
||||
<div class="glass-card shadow-3d p-8 transition hover:scale-105">
|
||||
<i class="fas fa-comments text-purple-300 text-4xl mb-4"></i>
|
||||
<h3 class="font-bold text-xl mb-2">Personal secure messenger</h3>
|
||||
<p class="text-gray-300">Your own platform for group and private chats without the risk of "leaks". All data is only yours!</p>
|
||||
</div>
|
||||
<div class="glass-card shadow-3d p-8 transition hover:scale-105">
|
||||
<i class="fas fa-envelope-open-text text-yellow-300 text-4xl mb-4"></i>
|
||||
<h3 class="font-bold text-xl mb-2">Anonymous email and file sharing</h3>
|
||||
<p class="text-gray-300">Create an email address in 1 click, share files without intermediaries and censorship.</p>
|
||||
</div>
|
||||
<div class="glass-card shadow-3d p-8 transition hover:scale-105">
|
||||
<i class="fas fa-coins text-emerald-300 text-4xl mb-4"></i>
|
||||
<h3 class="font-bold text-xl mb-2">Isolated crypto wallet</h3>
|
||||
<p class="text-gray-300">Cold-wallet for storing and performing cryptocurrency operations with maximum isolation from internet threats.</p>
|
||||
</div>
|
||||
<div class="glass-card shadow-3d p-8 transition hover:scale-105">
|
||||
<i class="fas fa-users-cog text-pink-400 text-4xl mb-4"></i>
|
||||
<h3 class="font-bold text-xl mb-2">Platform for all devices</h3>
|
||||
<p class="text-gray-300">BlackBox works for a single user, as well as for the whole family or business group. Unlimited number of connected devices.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- PRODUCT SHOWCASE -->
|
||||
<section id="products" class="max-w-6xl mx-auto py-12 fade-up" style="--delay:.1s">
|
||||
<h2 class="text-3xl md:text-4xl font-extrabold mb-10 font-montserrat text-center text-cyan-400 px-6">BlackBox Model Range</h2>
|
||||
|
||||
<div class="flipbook-container relative h-96 md:h-[36rem] w-full">
|
||||
<!-- BlackBox VPN (far left) -->
|
||||
<div class="flipbook-page" data-page="1">
|
||||
<div class="glass-card shadow-3d p-6 text-center h-full">
|
||||
<div class="h-40 mb-4 flex items-center justify-center">
|
||||
<img src="/images/bb_on_white-square.webp" alt="BlackBox VPN" class="h-full object-contain rounded-lg">
|
||||
</div>
|
||||
<h3 class="text-xl font-bold mb-3 text-cyan-300 product-title" data-product="BlackBox VPN">BlackBox VPN</h3>
|
||||
<div class="inline-flex items-center px-3 py-1 rounded-full bg-cyan-800/20 text-cyan-200 font-bold mb-3 animate-pulse">
|
||||
<span>99 €</span>
|
||||
</div>
|
||||
<p class="text-gray-300 mb-4 product-description">Creates a secure VPN Wi-Fi access point. 512 MB RAM.</p>
|
||||
<div class="flex justify-center gap-3">
|
||||
<button class="buy-btn product-buy-btn">Buy</button>
|
||||
<button onclick="showProductDetails(1)" class="details-btn product-details-btn">Details</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- BlackBox Privacy Messenger/Cloud (left) -->
|
||||
<div class="flipbook-page" data-page="2">
|
||||
<div class="glass-card shadow-3d p-6 text-center h-full">
|
||||
<div class="h-40 mb-4 flex items-center justify-center">
|
||||
<img src="/images/bb_on_white-square.webp" alt="BlackBox Privacy" class="h-full object-contain rounded-lg">
|
||||
</div>
|
||||
<h3 class="text-xl font-bold mb-3 text-cyan-300 product-title" data-product="BlackBox Privacy Messenger/Cloud">BlackBox Privacy Messenger/Cloud</h3>
|
||||
<div class="inline-flex items-center px-3 py-1 rounded-full bg-cyan-800/20 text-cyan-200 font-bold mb-3 animate-pulse">
|
||||
<span>199 €</span>
|
||||
</div>
|
||||
<p class="text-gray-300 mb-4 product-description">Integrated Matrix messenger or Nextcloud. 1 GB RAM. Full control over your data.</p>
|
||||
<div class="flex justify-center gap-3">
|
||||
<button class="buy-btn product-buy-btn">Buy</button>
|
||||
<button onclick="showProductDetails(2)" class="details-btn product-details-btn">Details</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- BlackBox 4GB (center) -->
|
||||
<div class="flipbook-page active" data-page="3">
|
||||
<div class="glass-card shadow-3d p-6 text-center h-full selected">
|
||||
<div class="h-40 mb-4 flex items-center justify-center">
|
||||
<img src="/images/bb_on_white-square.webp" alt="BlackBox 4GB" class="h-full object-contain rounded-lg">
|
||||
</div>
|
||||
<h3 class="text-xl font-bold mb-3 text-cyan-300 product-title" data-product="BlackBox 4GB">BlackBox 4GB</h3>
|
||||
<div class="inline-flex items-center px-3 py-1 rounded-full bg-cyan-800/20 text-cyan-200 font-bold mb-3 animate-pulse">
|
||||
<span>299 €</span>
|
||||
</div>
|
||||
<p class="text-gray-300 mb-4 product-description">All functions of previous models + remote desktop (Workspace). 4 GB RAM.</p>
|
||||
<div class="flex justify-center gap-3">
|
||||
<button class="buy-btn product-buy-btn">Buy</button>
|
||||
<button onclick="showProductDetails(3)" class="details-btn product-details-btn">Details</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- BlackBox Workstation (right) -->
|
||||
<div class="flipbook-page" data-page="4">
|
||||
<div class="glass-card shadow-3d p-6 text-center h-full">
|
||||
<div class="h-40 mb-4 flex items-center justify-center">
|
||||
<img src="/images/bb_on_white-square.webp" alt="BlackBox Workstation" class="h-full object-contain rounded-lg">
|
||||
</div>
|
||||
<h3 class="text-xl font-bold mb-3 text-cyan-300 product-title" data-product="BlackBox Workstation">BlackBox Workstation</h3>
|
||||
<div class="inline-flex items-center px-3 py-1 rounded-full bg-cyan-800/20 text-cyan-200 font-bold mb-3 animate-pulse">
|
||||
<span>499 €</span>
|
||||
</div>
|
||||
<p class="text-gray-300 mb-4 product-description">Complete workstation. All functions of previous models.</p>
|
||||
<div class="flex justify-center gap-3">
|
||||
<button class="buy-btn product-buy-btn">Buy</button>
|
||||
<button onclick="showProductDetails(4)" class="details-btn product-details-btn">Details</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- BlackBox AI (far right) -->
|
||||
<div class="flipbook-page" data-page="5">
|
||||
<div class="glass-card shadow-3d p-6 text-center h-full">
|
||||
<div class="h-40 mb-4 flex items-center justify-center">
|
||||
<img src="/images/bb_on_white-square.webp" alt="BlackBox AI" class="h-full object-contain rounded-lg">
|
||||
</div>
|
||||
<h3 class="text-xl font-bold mb-3 text-cyan-300 product-title" data-product="BlackBox AI">BlackBox AI</h3>
|
||||
<div class="inline-flex items-center px-3 py-1 rounded-full bg-cyan-800/20 text-cyan-200 font-bold mb-3 animate-pulse" style="box-shadow: 0 0 10px 2px rgba(116, 250, 255, 0.3);">
|
||||
<span>2999 €</span>
|
||||
</div>
|
||||
<p class="text-gray-300 mb-4 product-description">Includes all BlackBox technologies. Private artificial intelligence. Maximum autonomy and protection.</p>
|
||||
<div class="flex justify-center gap-3">
|
||||
<button class="buy-btn product-buy-btn">Buy</button>
|
||||
<button onclick="showProductDetails(5)" class="details-btn product-details-btn">Details</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- BlackBox Shop -->
|
||||
<div class="flipbook-page" data-page="6">
|
||||
<div class="glass-card shadow-3d p-6 text-center h-full">
|
||||
<div class="h-40 mb-4 flex items-center justify-center">
|
||||
<img src="/images/bb_on_white-square.webp" alt="BlackBox Shop" class="h-full object-contain rounded-lg">
|
||||
</div>
|
||||
<h3 class="text-xl font-bold mb-3 text-cyan-300 product-title" data-product="BlackBox Shop">BlackBox Shop</h3>
|
||||
<div class="inline-flex items-center px-3 py-1 rounded-full bg-cyan-800/20 text-cyan-200 font-bold mb-3 animate-pulse" style="box-shadow: 0 0 10px 2px rgba(116, 250, 255, 0.3);">
|
||||
<span>from 499 €</span>
|
||||
</div>
|
||||
<p class="text-gray-300 mb-4 product-description">Create a Telegram store via bot. Product upload, description, price. Payment via cryptocurrency. Total anonymity for seller and buyer.</p>
|
||||
<div class="flex justify-center gap-3">
|
||||
<button class="buy-btn product-buy-btn">Buy</button>
|
||||
<button onclick="showProductDetails(6)" class="details-btn product-details-btn">Details</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flipbook-indicator-track"></div>
|
||||
<div class="flipbook-indicator" style="transform: translateX(-150%);"></div>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
<!-- PRICING & ORDER -->
|
||||
<section id="order" class="max-w-3xl mx-auto mb-18 py-12 px-6 rounded-3xl glass-card mt-14 text-center border-2 border-cyan-500 relative fade-up" style="--delay:.1s">
|
||||
<div class="absolute top-3 left-1/3 -translate-x-1/2 bg-gradient-to-r from-emerald-500 to-green-500 text-white text-lg font-black rounded-full px-8 py-2 shadow-xl animate-bounce" style="box-shadow: 0 0 15px 5px rgba(16, 185, 129, 0.5);">
|
||||
-30% Only now!
|
||||
</div>
|
||||
<h2 class="text-3xl md:text-4xl font-extrabold mb-4 font-montserrat">Order BlackBox WorkStation with a <span class="text-cyan-400">350 USD</span> discount</h2>
|
||||
<p class="text-lg text-gray-200 mb-6 max-w-xl mx-auto">One-time payment - no subscriptions.<br> Worldwide delivery. The number of devices on promotion is limited!</p>
|
||||
<div class="flex flex-wrap items-center justify-center gap-8 mb-7">
|
||||
<div class="text-left bg-gray-800/70 rounded-2xl p-6">
|
||||
<div class="text-2xl">
|
||||
<span class="text-cyan-400 font-bold">149 USD</span>
|
||||
<span class="line-through text-gray-500 ml-2 text-lg">499 USD</span>
|
||||
</div>
|
||||
<div class="text-gray-400 text-xs mt-1">Special price for the first 10 buyers</div>
|
||||
<div class="mt-3 text-base text-green-300 font-bold">+ Free update within a year</div>
|
||||
</div>
|
||||
<ul class="text-left space-y-2 text-sm text-gray-200">
|
||||
<li><i class="fas fa-check mr-2 text-cyan-400"></i>30-day money-back guarantee</li>
|
||||
<li><i class="fas fa-check mr-2 text-cyan-400"></i>Worldwide delivery</li>
|
||||
<li><i class="fas fa-check mr-2 text-cyan-400"></i>Personal support</li>
|
||||
</ul>
|
||||
</div>
|
||||
<a href="https://bbox.rocks/#order" target="_blank" class="pulse-cta px-12 py-4 rounded-xl text-white font-extrabold font-montserrat bg-gradient-to-r from-cyan-400 via-emerald-400 to-cyan-500 shadow-3d text-2xl hover:bg-cyan-400 transform transition">Order</a>
|
||||
<div class="mt-6 text-gray-300 text-base">Valid until <span class="inline-block text-cyan-300 rounded px-2 py-1 font-bold bg-cyan-800/30">June 1, 2025</span> or while supplies last.</div>
|
||||
</section>
|
||||
|
||||
<!-- PRODUCT DETAILS MODAL -->
|
||||
<div id="productModal" class="fixed inset-0 bg-black/80 z-50 flex items-center justify-center hidden">
|
||||
<div class="modal-content relative">
|
||||
<span class="modal-close" onclick="hideProductDetails()">×</span>
|
||||
<h3 id="modalTitle" class="text-2xl font-bold mb-4 text-cyan-400"></h3>
|
||||
<p id="modalDescription" class="text-gray-300 mb-6"></p>
|
||||
<button class="w-full py-3 buy-btn text-lg modal-buy-btn">Buy now</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- TESTIMONIALS -->
|
||||
<section id="testimonials" class="max-w-6xl mx-auto py-11 px-6 mt-4 fade-up" style="--delay:.1s">
|
||||
<h2 class="text-3xl font-extrabold text-cyan-400 mb-7 text-center">What our users say?</h2>
|
||||
<div class="grid md:grid-cols-3 gap-7 lg:gap-12">
|
||||
<div class="glass-card p-7 shadow-3d flex flex-col items-center text-center">
|
||||
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Testimonial" class="w-14 h-14 rounded-full mb-3 shadow-lg">
|
||||
<div class="mb-2 font-bold text-lg text-emerald-300">Andrey, startup founder</div>
|
||||
<div class="text-gray-300 italic">"BlackBox is the first gadget I trust with my personal data. No logs, fast operation, great for working from anywhere in the world."</div>
|
||||
</div>
|
||||
<div class="glass-card p-7 shadow-3d flex flex-col items-center text-center border-2 border-cyan-400">
|
||||
<img src="https://randomuser.me/api/portraits/women/43.jpg" alt="Testimonial" class="w-14 h-14 rounded-full mb-3 shadow-lg">
|
||||
<div class="mb-2 font-bold text-lg text-cyan-300">Maria, mother</div>
|
||||
<div class="text-gray-300 italic">"For us, BlackBox is a guarantee of internet security for the whole family. Even children can use it without any setup."</div>
|
||||
</div>
|
||||
<div class="glass-card p-7 shadow-3d flex flex-col items-center text-center">
|
||||
<img src="https://randomuser.me/api/portraits/men/67.jpg" alt="Testimonial" class="w-14 h-14 rounded-full mb-3 shadow-lg">
|
||||
<div class="mb-2 font-bold text-lg text-purple-300">Vlad, programmer</div>
|
||||
<div class="text-gray-300 italic">"Linux, open source, anonymity - everything works fast and thoughtfully. A great alternative to VPN services and routers."</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- FOOTER -->
|
||||
<footer class="w-full mt-10 pt-7 pb-8 bg-black/60 flex flex-col items-center text-center text-gray-500 text-sm">
|
||||
<img src="/images/logo.webp" alt="bbox logo" class="w-10 h-10 mx-auto mb-3">
|
||||
<div class="mb-2">
|
||||
<span class="font-montserrat font-bold text-cyan-400 text-lg">BlackBox</span> © 2022-2025. All rights reserved.<br>
|
||||
</div>
|
||||
<div class="flex justify-center space-x-6 mb-4">
|
||||
<a href="https://t.me/bbox_wtf" target="_blank" class="text-cyan-300 hover:text-cyan-400 transition-colors" aria-label="Our Telegram channel">
|
||||
<i class="fab fa-telegram text-2xl"></i> Telegram
|
||||
</a>
|
||||
<a href="https://vk.com/bbox_wtf" target="_blank" class="text-cyan-300 hover:text-cyan-400 transition-colors" aria-label="Our VK group">
|
||||
<i class="fab fa-vk text-2xl"></i> VK
|
||||
</a>
|
||||
</div>
|
||||
<div>
|
||||
<a href="mailto:support@bbox.wtf" class="hover:underline text-cyan-300">Support</a>
|
||||
|
|
||||
<a href="/en/pages/faq.html" class="hover:underline text-cyan-300">FAQ</a>
|
||||
|
|
||||
<a href="https://bbox.rocks" class="hover:underline">Old unsupported website</a>
|
||||
</div>
|
||||
<div class="mt-4">
|
||||
<span class="text-gray-400">bbox.wtf - next-generation landing page: BlackBox is not just a VPN, it's an ecosystem and your digital privacy.</span>
|
||||
</div>
|
||||
</footer>
|
||||
<script src="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.5.2/js/all.min.js"></script>
|
||||
<script src="/js/features.js"></script>
|
||||
<script src="/js/flipbook.js"></script>
|
||||
<script src="/js/fade-up.js"></script>
|
||||
<!-- Yandex.Metrika counter -->
|
||||
<script type="text/javascript" >
|
||||
(function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)};
|
||||
m[i].l=1*new Date();
|
||||
for (var j = 0; j < document.scripts.length; j++) {if (document.scripts[j].src === r) { return; }}
|
||||
k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)})
|
||||
(window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym");
|
||||
|
||||
ym(55764994, "init", {
|
||||
clickmap:true,
|
||||
trackLinks:true,
|
||||
accurateTrackBounce:true,
|
||||
webvisor:true,
|
||||
trackHash:true
|
||||
});
|
||||
</script>
|
||||
<noscript><div><img src="https://mc.yandex.ru/watch/55764994" style="position:absolute; left:-9999px;" alt="" /></div></noscript>
|
||||
<!-- /Yandex.Metrika counter -->
|
||||
<script src="/js/lang-detect-redirect.js"></script>
|
||||
<script src="/js/language-switcher.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
58
lang/en/json/en.json
Normal file
58
lang/en/json/en.json
Normal file
@@ -0,0 +1,58 @@
|
||||
{
|
||||
"features": [
|
||||
{
|
||||
"name": "VPN Tunneling",
|
||||
"hint": "VPN is just the beginning for BlackBox."
|
||||
},
|
||||
{
|
||||
"name": "Secure Browsing",
|
||||
"hint": "The browser runs on the BlackBox device, logs are not written to your PC."
|
||||
},
|
||||
{
|
||||
"name": "Anonymous Email and Messenger",
|
||||
"hint": "Correspondence is stored ONLY by you, end-to-end!"
|
||||
},
|
||||
{
|
||||
"name": "Decentralized Hosting",
|
||||
"hint": "You can create your own website or store files - without censorship."
|
||||
},
|
||||
{
|
||||
"name": "Anonymous File Transfer",
|
||||
"hint": "Transfer documents without intermediaries."
|
||||
},
|
||||
{
|
||||
"name": "Crypto Wallet",
|
||||
"hint": "Crypto functionality in a separate isolated container."
|
||||
},
|
||||
{
|
||||
"name": "No Logs/All Local",
|
||||
"hint": "There is never a central log storage - you maintain privacy."
|
||||
},
|
||||
{
|
||||
"name": "1 Device - Whole Family",
|
||||
"hint": "Access to privacy for everyone (Wi-Fi/LAN, unlimited)."
|
||||
}
|
||||
],
|
||||
"products": [
|
||||
{
|
||||
"name": "BlackBox"
|
||||
},
|
||||
{
|
||||
"name": "VPN Router"
|
||||
},
|
||||
{
|
||||
"name": "VPN Service"
|
||||
}
|
||||
],
|
||||
"product_details": {
|
||||
"BlackBox VPN": "Creates a Wi-Fi point with secure VPN. 512 MB RAM.",
|
||||
"BlackBox Privacy Messenger/Cloud": "Built-in Matrix Messenger or Nextcloud. 1 GB RAM. Full control over your data.",
|
||||
"BlackBox 4GB": "All functions of the first models + remote desktop (Workspace). 4 GB RAM.",
|
||||
"BlackBox Workstation": "Full-fledged workstation. All functions of previous models.",
|
||||
"BlackBox AI": "Includes all BlackBox technologies. Private artificial intelligence. Maximum autonomy and protection.",
|
||||
"BlackBox Shop": "Creating a store in Telegram via a bot. Uploading products, description, price. Payment for goods via cryptocurrency. Full anonymity of seller and buyer."
|
||||
},
|
||||
"buy_button": "Buy",
|
||||
"details_button": "Details",
|
||||
"buy_now_button": "Buy now"
|
||||
}
|
||||
283
lang/en/pages/faq.html
Normal file
283
lang/en/pages/faq.html
Normal file
@@ -0,0 +1,283 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Blackbox - FAQ</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, minimum-scale=0.5, viewport-fit=cover">
|
||||
<meta name="description" content="Frequently Asked Questions about Blackbox.">
|
||||
<meta name="keywords" content="Blackbox, FAQ, questions, answers, anonymity, privacy">
|
||||
<link href="/css/tailwind.min.css" rel="stylesheet">
|
||||
<link href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.5.2/css/all.min.css" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Montserrat+Alternates:wght@700;500&family=Montserrat:wght@700;500;400&family=Inter:wght@400;600&display=swap" rel="stylesheet">
|
||||
<script src="/js/echarts.min.js"></script>
|
||||
<link rel="stylesheet" href="/css/style.css">
|
||||
<!-- Open Graph Meta Tags for Social Media -->
|
||||
<meta property="og:title" content="Blackbox - FAQ">
|
||||
<meta property="og:description" content="Frequently Asked Questions about Blackbox.">
|
||||
<meta property="og:image" content="/images/scales.webp">
|
||||
<meta property="og:url" content="https://bbox.wtf/en/pages/faq.html">
|
||||
<meta property="og:type" content="website">
|
||||
|
||||
<!-- Twitter Card Meta Tags -->
|
||||
<meta name="twitter:card" content="summary_large_image">
|
||||
<meta name="twitter:title" content="Blackbox - FAQ">
|
||||
<meta name="twitter:description" content="Frequently Asked Questions about Blackbox.">
|
||||
<meta name="twitter:image" content="/images/scales.webp">
|
||||
</head>
|
||||
<body class="gradient-bg overflow-x-hidden">
|
||||
|
||||
<!-- HEADER -->
|
||||
<header class="flex flex-wrap justify-between items-center px-5 md:px-10 py-7 bg-transparent z-10 relative">
|
||||
<a href="/en/" class="flex items-center space-x-4">
|
||||
<img src="/images/logo.webp" alt="bbox logo" class="w-14 h-14 rounded-lg shadow-lg">
|
||||
<span class="font-montserrat font-bold text-2xl text-cyan-400 tracking-widest">BlackBox</span>
|
||||
</a>
|
||||
<nav class="hidden md:flex space-x-8 text-lg font-montserrat font-semibold">
|
||||
<a href="/en/#features" class="hover:text-cyan-400 transition-colors">Features</a>
|
||||
<a href="/en/#supercompare" class="hover:text-cyan-400 transition-colors">Comparison</a>
|
||||
<a href="/en/#pricing" class="hover:text-cyan-400 transition-colors">Pricing</a>
|
||||
<a href="/en/#testimonials" class="hover:text-cyan-400 transition-colors">Testimonials</a>
|
||||
</nav>
|
||||
<a href="#order" class="pulse-cta rounded-xl px-7 py-3 bg-emerald-500 text-white text-lg font-bold shadow-lg hover:bg-emerald-400 transition-all duration-300 transform hover:scale-105" style="font-family: 'Montserrat', sans-serif; box-shadow: 0 0 15px 5px rgba(16, 185, 129, 0.5);">
|
||||
Order Now
|
||||
<i class="fas fa-lock ml-2"></i>
|
||||
</a>
|
||||
</header>
|
||||
|
||||
<main class="max-w-4xl mx-auto py-12 px-5">
|
||||
<h1 class="text-4xl font-bold font-montserrat text-cyan-400 mb-8 text-center">Blackbox - FAQ</h1>
|
||||
|
||||
<section class="glass-card shadow-3d p-8">
|
||||
<h3 class="text-2xl font-bold mb-6 text-white">Questions and Answers</h3>
|
||||
|
||||
<div class="faq-item mb-8">
|
||||
<div class="faq-question cursor-pointer">
|
||||
<h4 class="text-xl font-semibold mb-3 text-cyan-300">1. How to become anonymous with Blackbox?</h4>
|
||||
</div>
|
||||
<div class="faq-answer text-gray-300 overflow-hidden max-h-0 transition-max-height duration-500 ease-in-out">
|
||||
<p class="mb-4">Blackbox allows you to enjoy all the benefits of anonymity in 4 simple steps:</p>
|
||||
<ol class="list-decimal list-inside text-gray-300 space-y-2">
|
||||
<li><strong>Connect Blackbox to a power source</strong>.</li>
|
||||
<li><strong>Connect to Blackbox via Wi-Fi</strong>.</li>
|
||||
<li><strong>Connect Blackbox to the Internet</strong>.</li>
|
||||
<li><strong>Use the Internet while remaining anonymous in two ways</strong>:
|
||||
<ul class="list-disc list-inside ml-5 space-y-1">
|
||||
<li>using Blackbox as a router</li>
|
||||
<li>using Blackbox as a workstation</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="faq-item mb-8">
|
||||
<div class="faq-question cursor-pointer">
|
||||
<h4 class="text-xl font-semibold mb-3 text-cyan-300">2. What is the Alpha version?</h4>
|
||||
</div>
|
||||
<div class="faq-answer text-gray-300 overflow-hidden max-h-0 transition-max-height duration-500 ease-in-out">
|
||||
<p>Blackbox Alpha version is an intermediate test version of the product before release, which allows you to start using the implemented functions now, without waiting for the official release:</p>
|
||||
<ul class="list-disc list-inside text-gray-300 space-y-2 mt-2">
|
||||
<li>secure browsing</li>
|
||||
<li>secure darknet viewing</li>
|
||||
<li>VPN server</li>
|
||||
<li>anonymous e-mail</li>
|
||||
<li>update delivery</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="faq-item mb-8">
|
||||
<div class="faq-question cursor-pointer">
|
||||
<h4 class="text-xl font-semibold mb-3 text-cyan-300">3. How to order Blackbox?</h4>
|
||||
</div>
|
||||
<div class="faq-answer text-gray-300 overflow-hidden max-h-0 transition-max-height duration-500 ease-in-out">
|
||||
<p>You can order Blackbox online <a href="https://bbox.wtf/ru/#order" class="text-cyan-400 hover:underline">on our website</a> and pay with any credit card via Stripe, PayPal, or cryptocurrency.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="faq-item mb-8">
|
||||
<div class="faq-question cursor-pointer">
|
||||
<h4 class="text-xl font-semibold mb-3 text-cyan-300">4. How does delivery work?</h4>
|
||||
</div>
|
||||
<div class="faq-answer text-gray-300 overflow-hidden max-h-0 transition-max-height duration-500 ease-in-out">
|
||||
<p>Blackbox is produced in batches of 100 units. Ordering parts and starting production occurs after the batch is completed, but no more than once a week. Blackbox will be produced and delivered within 2 months after the start of production. Blackbox delivery is included in the price.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="faq-item mb-8">
|
||||
<div class="faq-question cursor-pointer">
|
||||
<h4 class="text-xl font-semibold mb-3 text-cyan-300">5. What are the technical specifications of Blackbox?</h4>
|
||||
</div>
|
||||
<div class="faq-answer text-gray-300 overflow-hidden max-h-0 transition-max-height duration-500 ease-in-out">
|
||||
<p class="mb-4"><strong>Configuration:</strong></p>
|
||||
<ul class="list-disc list-inside text-gray-300 space-y-2 ml-5">
|
||||
<li>CPU H2 Quad-core Cortex-A7 H.265/HEVC 1080P</li>
|
||||
<li>MB Orange PI zero 512MB</li>
|
||||
<li>GPU Mali400MP2 GPU @600MHz Supports OpenGL ES 2.0</li>
|
||||
<li>Memory (SDRAM) 512MB DDR3 SDRAM(Share with GPU)</li>
|
||||
<li>SSD Storage Sandisk xD 16Gb Flash</li>
|
||||
<li>Onboard Network 10/100M Ethernet RJ45 POE is default off.</li>
|
||||
<li>Outbound WIFI XR819, IEEE 802.11 b/g/n</li>
|
||||
<li>Inbound WIFI Malloom Mini USB 2.0 802.11n 150Mbps</li>
|
||||
<li>1x USB 2.0 Ports</li>
|
||||
<li>Weight 60g</li>
|
||||
<li>Dimensions 55mm x 55mm x 28mm</li>
|
||||
</ul>
|
||||
<p class="mb-4 mt-4"><strong>Software:</strong></p>
|
||||
<ul class="list-disc list-inside text-gray-300 space-y-2 ml-5">
|
||||
<li>Armbian Jessie 5.38</li>
|
||||
<li>TOR Source 0.4.1.5</li>
|
||||
<li>OpenVPN 2.4.7 Lighthttpd 1.4.54 / NGINX 1.17.3</li>
|
||||
<li>Ejabberd 2.1.11</li>
|
||||
<li>Encryption methods AES2, OTR, PGP, SSH512, SSL</li>
|
||||
</ul>
|
||||
<p class="mb-4 mt-4"><strong>Pre-configuration:</strong></p>
|
||||
<ul class="list-disc list-inside text-gray-300 space-y-2 ml-5">
|
||||
<li>OPSEC</li>
|
||||
<li>Chat/Call server</li>
|
||||
<li>TOR Settings</li>
|
||||
<li>Blackbox openvpn network settings</li>
|
||||
<li>Logs and data cleaner after reboot or on timer</li>
|
||||
<li>TOR Web Interface</li>
|
||||
<li>All encryptions</li>
|
||||
<li>LLMP(Linux+Lighttpd+MiraDB+php7.3)</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="faq-item mb-8">
|
||||
<div class="faq-question cursor-pointer">
|
||||
<h4 class="text-xl font-semibold mb-3 text-cyan-300">6. In what cases are refunds provided?</h4>
|
||||
</div>
|
||||
<div class="faq-answer text-gray-300 overflow-hidden max-h-0 transition-max-height duration-500 ease-in-out">
|
||||
<p>We guarantee a full refund if the delivered device does not meet the stated technical specifications, as well as in case of a delay in Blackbox delivery by more than 1 month from the promised delivery date.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="faq-item mb-8">
|
||||
<div class="faq-question cursor-pointer">
|
||||
<h4 class="text-xl font-semibold mb-3 text-cyan-300">7. Is there a warranty on Blackbox?</h4>
|
||||
</div>
|
||||
<div class="faq-answer text-gray-300 overflow-hidden max-h-0 transition-max-height duration-500 ease-in-out">
|
||||
<p>All Blackbox devices come with a 1-year warranty. If technical problems arise during a year of using Blackbox, you can return the device and get a new one for free in exchange.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="faq-item mb-8">
|
||||
<div class="faq-question cursor-pointer">
|
||||
<h4 class="text-xl font-semibold mb-3 text-cyan-300">8. Can I pay for Blackbox with cryptocurrency?</h4>
|
||||
</div>
|
||||
<div class="faq-answer text-gray-300 overflow-hidden max-h-0 transition-max-height duration-500 ease-in-out">
|
||||
<p>Currently, you can pay for your order with cryptocurrency by contacting the developers in our <a href="https://t.me/joinchat/AAAAAEzMDw32y4NVLkCgqw" class="text-cyan-400 hover:underline">Telegram Community</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="faq-item mb-8">
|
||||
<div class="faq-question cursor-pointer">
|
||||
<h4 class="text-xl font-semibold mb-3 text-cyan-300">9. How does Blackbox affect online anonymity and privacy protection?</h4>
|
||||
</div>
|
||||
<div class="faq-answer text-gray-300 overflow-hidden max-h-0 transition-max-height duration-500 ease-in-out">
|
||||
<p>Blackbox ensures anonymity according to all necessary criteria (who is doing it? what are they doing? where are they doing it from?) and at all technological levels: the software used, the operating system, and the device itself.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="faq-item mb-8">
|
||||
<div class="faq-question cursor-pointer">
|
||||
<h4 class="text-xl font-semibold mb-3 text-cyan-300">10. How to verify your anonymity?</h4>
|
||||
</div>
|
||||
<div class="faq-answer text-gray-300 overflow-hidden max-h-0 transition-max-height duration-500 ease-in-out">
|
||||
<p>Unlike closed-source programs and services whose servers you do not have access to, Blackbox is a server that is located at your home and has an open-source architecture. Anyone who understands cybersecurity can verify its effectiveness in ensuring anonymity and change its settings.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="faq-item">
|
||||
<div class="faq-question cursor-pointer">
|
||||
<h4 class="text-xl font-semibold mb-3 text-cyan-300">11. Does Blackbox slow down Internet speed?</h4>
|
||||
</div>
|
||||
<div class="faq-answer text-gray-300 overflow-hidden max-h-0 transition-max-height duration-500 ease-in-out">
|
||||
<p>Yes, it does. The connection speed through Blackbox is reduced to 20-30 Mbps. Blackbox is not designed for constant Internet use for all tasks. This speed is sufficient if you connect to the Wi-Fi broadcasted by Blackbox only for tasks requiring anonymity. The speed of the secure Blackbox network is 6 times higher than that of TOR.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer class="w-full mt-10 pt-7 pb-8 bg-black/60 flex flex-col items-center text-center text-gray-500 text-sm">
|
||||
<img src="/images/logo.webp" alt="bbox logo" class="w-10 h-10 mx-auto mb-3">
|
||||
<div class="mb-2">
|
||||
<span class="font-montserrat font-bold text-cyan-400 text-lg">BlackBox</span> © 2022-2025. All rights reserved.<br>
|
||||
</div>
|
||||
<div class="flex justify-center space-x-6 mb-4">
|
||||
<a href="https://t.me/bbox_wtf" target="_blank" class="text-cyan-300 hover:text-cyan-400 transition-colors" aria-label="Our Telegram channel">
|
||||
<i class="fab fa-telegram text-2xl"></i> Telegram
|
||||
</a>
|
||||
<a href="https://vk.com/bbox_wtf" target="_blank" class="text-cyan-300 hover:text-cyan-400 transition-colors" aria-label="Our VK group">
|
||||
<i class="fab fa-vk text-2xl"></i> VK
|
||||
</a>
|
||||
</div>
|
||||
<div>
|
||||
<a href="mailto:support@bbox.wtf" class="hover:underline text-cyan-300">Support</a>
|
||||
|
|
||||
<a href="/en/pages/faq.html" class="hover:underline text-cyan-300">FAQ</a>
|
||||
|
|
||||
<a href="https://bbox.rocks" class="hover:underline">Old unsupported website</a>
|
||||
</div>
|
||||
<div class="mt-4">
|
||||
<span class="text-gray-400">bbox.wtf — next-generation landing page: BlackBox — not just a VPN, it's an ecosystem and your digital privacy.</span>
|
||||
</div>
|
||||
</footer>
|
||||
<script src="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.5.2/js/all.min.js"></script>
|
||||
<script src="/js/features.js"></script>
|
||||
<script src="/js/flipbook.js"></script>
|
||||
<script src="/js/fade-up.js"></script>
|
||||
<!-- Yandex.Metrika counter -->
|
||||
<script type="text/javascript" >
|
||||
(function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)};
|
||||
m[i].l=1*new Date();
|
||||
for (var j = 0; j < document.scripts.length; j++) {if (document.scripts[j].src === r) { return; }}
|
||||
k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)})
|
||||
(window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym");
|
||||
|
||||
ym(55764994, "init", {
|
||||
clickmap:true,
|
||||
trackLinks:true,
|
||||
accurateTrackBounce:true,
|
||||
webvisor:true,
|
||||
trackHash:true
|
||||
});
|
||||
</script>
|
||||
<noscript><div><img src="https://mc.yandex.ru/watch/55764994" style="position:absolute; left:-9999px;" alt="" /></div></noscript>
|
||||
<!-- /Yandex.Metrika counter -->
|
||||
<script src="/js/lang-detect-redirect.js"></script>
|
||||
<script src="/js/language-switcher.js"></script>
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const faqQuestions = document.querySelectorAll('.faq-question');
|
||||
|
||||
faqQuestions.forEach(question => {
|
||||
question.addEventListener('click', () => {
|
||||
const faqItem = question.closest('.faq-item');
|
||||
const answer = faqItem.querySelector('.faq-answer');
|
||||
const isOpen = faqItem.classList.contains('open');
|
||||
|
||||
// Close all other open FAQ items
|
||||
document.querySelectorAll('.faq-item.open').forEach(openItem => {
|
||||
if (openItem !== faqItem) {
|
||||
openItem.classList.remove('open');
|
||||
openItem.querySelector('.faq-answer').style.maxHeight = null;
|
||||
}
|
||||
});
|
||||
|
||||
// Toggle the clicked FAQ item
|
||||
if (isOpen) {
|
||||
faqItem.classList.remove('open');
|
||||
answer.style.maxHeight = null;
|
||||
} else {
|
||||
faqItem.classList.add('open');
|
||||
answer.style.maxHeight = answer.scrollHeight + 'px';
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
372
lang/es/index.html
Normal file
372
lang/es/index.html
Normal file
@@ -0,0 +1,372 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="es">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>BlackBox – Ecosistema de Privacidad y Seguridad</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, minimum-scale=0.5, viewport-fit=cover">
|
||||
<meta name="description" content="BlackBox es un dispositivo físico para privacidad multinivel: VPN, correo electrónico anónimo, mensajero privado, alojamiento descentralizado, transferencia segura de archivos, operaciones criptográficas. Comparación dinámica profunda - en un solo dispositivo.">
|
||||
<meta name="keywords" content="BlackBox, privacidad, seguridad, VPN, ecosistema, router, correo electrónico anónimo, mensajero privado, alojamiento descentralizado, transferencia segura de archivos, operaciones criptográficas">
|
||||
<link href="/css/tailwind.min.css" rel="stylesheet">
|
||||
<link href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.5.2/css/all.min.css" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Montserrat+Alternates:wght@700;500&family=Montserrat:wght@700;500;400&family=Inter:wght@400;600&display=swap" rel="stylesheet">
|
||||
<script src="/js/echarts.min.js"></script>
|
||||
<link rel="stylesheet" href="/css/style.css">
|
||||
<!-- Open Graph Meta Tags for Social Media -->
|
||||
<meta property="og:title" content="BlackBox – Ecosistema de Privacidad y Seguridad">
|
||||
<meta property="og:description" content="BlackBox es un dispositivo físico para privacidad multinivel: VPN, correo electrónico anónimo, mensajero privado, alojamiento descentralizado, transferencia segura de archivos, operaciones criptográficas.">
|
||||
<meta property="og:image" content="/images/scales.webp"> <!-- Using the main device image -->
|
||||
<meta property="og:url" content="https://bbox.wtf"> <!-- Replace with actual URL -->
|
||||
<meta property="og:type" content="website">
|
||||
|
||||
<!-- Twitter Card Meta Tags -->
|
||||
<meta name="twitter:card" content="summary_large_image">
|
||||
<meta name="twitter:title" content="BlackBox – Ecosistema de Privacidad y Seguridad">
|
||||
<meta name="twitter:description" content="BlackBox es un dispositivo físico para privacidad multinivel: VPN, correo electrónico anónimo, mensajero privado, alojamiento descentralizado, transferencia segura de archivos, operaciones criptográficas.">
|
||||
<meta name="twitter:image" content="/images/scales.webp"> <!-- Using the main device image -->
|
||||
</head>
|
||||
<body class="gradient-bg overflow-x-hidden">
|
||||
|
||||
<!-- HEADER -->
|
||||
<header class="flex flex-wrap justify-between items-center px-5 md:px-10 py-7 bg-transparent z-10 relative">
|
||||
<a href="/es/" class="flex items-center space-x-4">
|
||||
<img src="/images/logo.webp" alt="bbox logo" class="w-14 h-14 rounded-lg shadow-lg">
|
||||
<span class="font-montserrat font-bold text-2xl text-cyan-400 tracking-widest">BlackBox</span>
|
||||
</a>
|
||||
<nav class="hidden md:flex space-x-8 text-lg font-montserrat font-semibold">
|
||||
<a href="/es/#features" class="hover:text-cyan-400 transition-colors">Características</a>
|
||||
<a href="/es/#supercompare" class="hover:text-cyan-400 transition-colors">Comparación</a>
|
||||
<a href="/es/#pricing" class="hover:text-cyan-400 transition-colors">Precios</a>
|
||||
<a href="/es/#testimonials" class="hover:text-cyan-400 transition-colors">Testimonios</a>
|
||||
</nav>
|
||||
<a href="#order" class="pulse-cta rounded-xl px-7 py-3 bg-emerald-500 text-white text-lg font-bold shadow-lg hover:bg-emerald-400 transition-all duration-300 transform hover:scale-105" style="font-family: 'Montserrat', sans-serif; box-shadow: 0 0 15px 5px rgba(16, 185, 129, 0.5);">
|
||||
Pedir Ahora
|
||||
<i class="fas fa-lock ml-2"></i>
|
||||
</a>
|
||||
</header>
|
||||
|
||||
<!-- HERO SECTION -->
|
||||
<section class="pt-10 pb-14 md:pt-18 md:pb-32 px-5 lg:px-0 flex flex-col items-center text-center relative overflow-visible bg-gradient-to-b from-black/90 to-gray-950 z-0">
|
||||
<div class="w-full mx-auto shadow-3d transition-all duration-300" style="background: url('/images/banner-image.webp') center/cover no-repeat; padding: 2rem; border-radius: 1rem;">
|
||||
<h1 class="text-3xl md:text-5xl lg:text-6xl leading-tight mb-6 fade-up text-white" style="--delay:.1s; text-shadow: 0 2px 4px rgba(0,0,0,0.5);">
|
||||
<span class="font-montserrat-alternates font-medium">Un completo</span><br class="hidden md:inline">
|
||||
<span class="font-bebas-neue">ECOSISTEMA</span><br class="hidden lg:inline">
|
||||
<span class="font-montserrat-alternates font-medium">de Privacidad</span><br>
|
||||
<span class="text-cyan-400 font-montserrat">en un solo dispositivo</span>
|
||||
</h1>
|
||||
<p class="text-xl md:text-2xl max-w-2xl mx-auto mb-10 text-white fade-up" style="--delay:.3s">
|
||||
BlackBox no es solo una VPN.<br>
|
||||
¡Es una solución de hardware innovadora que combina herramientas de privacidad, comunicación y bloqueo de seguimiento a un nivel imposible con los servicios VPN y routers ordinarios!
|
||||
</p>
|
||||
<div class="flex flex-col md:flex-row gap-4 items-center justify-center fade-up" style="--delay:.55s">
|
||||
<a href="#order" class="pulse-cta px-12 py-4 rounded-2xl text-white font-extrabold font-montserrat bg-gradient-to-r from-emerald-500 to-green-500 text-2xl shadow-3d hover:from-emerald-400 hover:to-green-400 transform-gpu transition-all duration-300 hover:scale-105" style="box-shadow: 0 0 20px 8px rgba(16, 185, 129, 0.6);">Comprar con descuento</a>
|
||||
<a href="#supercompare" class="px-10 py-4 rounded-2xl border-2 border-cyan-400 text-cyan-300 bg-transparent font-bold text-xl font-montserrat hover:bg-cyan-700/10 transition">Comparación dinámica</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-14 mb-8 relative flex justify-center fade-up" style="--delay:.85s;">
|
||||
<img src="/images/scales.webp" alt="BlackBox Device" class="hero-3d rounded-3xl w-[370px] md:w-[470px] z-10" draggable="false">
|
||||
<div class="absolute -bottom-4 left-1/2 -translate-x-1/2 w-72 h-16 bg-cyan-400/10 rounded-full blur-2xl z-0"></div>
|
||||
</div>
|
||||
<div class="mt-4 max-w-2xl mx-auto fade-up" style="--delay:1.1s;">
|
||||
<span class="inline-flex items-center px-4 py-1 rounded-full bg-cyan-800/20 text-cyan-200 font-semibold text-lg animate-pulse">
|
||||
<i class="fas fa-bolt text-yellow-300 mr-2"></i>
|
||||
¡30% de descuento en pre-pedido hasta el 1 de junio!
|
||||
</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- DYNAMIC COMPARISON -->
|
||||
<section id="supercompare" class="max-w-5xl mx-auto py-14 px-5 fade-up" style="--delay:.1s">
|
||||
<h2 class="text-3xl md:text-4xl font-black font-montserrat text-cyan-400 mb-5 text-center tracking-tight">
|
||||
Comparación dinámica: <span class="text-white">BlackBox</span> vs VPN y routers
|
||||
</h2>
|
||||
<p class="text-lg text-gray-300 max-w-2xl mx-auto mb-10 text-center">
|
||||
<span class="text-cyan-300 font-bold">BlackBox</span> es un <span class="underline">ecosistema de privacidad</span>. Vea cómo se expande el soporte de funciones en comparación con los servicios VPN simples y los routers de hardware.
|
||||
</p>
|
||||
|
||||
<div class="glass-card shadow-3d p-8 mb-8">
|
||||
<div class="grid grid-cols-4 gap-4 mb-6">
|
||||
<div class="col-span-1 font-bold text-gray-300 text-right pr-4">Características</div>
|
||||
<div class="col-span-1 font-bold text-cyan-400 text-center">BlackBox</div>
|
||||
<div class="col-span-1 font-bold text-blue-400 text-center">Router VPN</div>
|
||||
<div class="col-span-1 font-bold text-purple-400 text-center">Servicio VPN</div>
|
||||
</div>
|
||||
|
||||
<div id="featuresContainer">
|
||||
<!-- Features will be inserted here by JS -->
|
||||
</div>
|
||||
|
||||
<div class="text-gray-400 mt-6 text-base">
|
||||
<i class="fas fa-info-circle text-cyan-300"></i>
|
||||
<span class="ml-1">Pase el cursor sobre una fila para ver detalles sobre cada función</span>
|
||||
</div>
|
||||
<div id="dynCompareHint" class="font-mono text-sm mt-3 p-3 bg-gray-800/50 rounded-lg"></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<!-- FEATURES -->
|
||||
<section id="features" class="max-w-7xl mx-auto mt-8 lg:mt-0 py-13 px-5">
|
||||
<h2 class="text-3xl md:text-4xl font-bold font-montserrat text-cyan-400 mb-7 fade-up" style="--delay:.15s">BlackBox: Ventajas del ecosistema</h2>
|
||||
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8 fade-up" style="--delay:.22s">
|
||||
<div class="glass-card shadow-3d p-8 transition hover:scale-105">
|
||||
<i class="fas fa-user-secret text-cyan-300 text-4xl mb-4"></i>
|
||||
<h3 class="font-bold text-xl mb-2">Todas las herramientas de privacidad</h3>
|
||||
<p class="text-gray-300">VPN, mensajero, correo electrónico, archivos, billetera y alojamiento, todo en una mini-computadora. ¡Ya no necesita buscar servicios separados!</p>
|
||||
</div>
|
||||
<div class="glass-card shadow-3d p-8 transition hover:scale-105">
|
||||
<i class="fas fa-globe text-cyan-400 text-4xl mb-4"></i>
|
||||
<h3 class="font-bold text-xl mb-2">Internet anónimo y darknet</h3>
|
||||
<p class="text-gray-300">Acceso seguro a todos los servicios, incluyendo onion e internet descentralizado, incluso si están bloqueados por su proveedor.</p>
|
||||
</div>
|
||||
<div class="glass-card shadow-3d p-8 transition hover:scale-105">
|
||||
<i class="fas fa-comments text-purple-300 text-4xl mb-4"></i>
|
||||
<h3 class="font-bold text-xl mb-2">Mensajero privado seguro</h3>
|
||||
<p class="text-gray-300">Su propia plataforma para chats grupales y privados sin riesgo de "fugas". ¡Todos los datos son solo suyos!</p>
|
||||
</div>
|
||||
<div class="glass-card shadow-3d p-8 transition hover:scale-105">
|
||||
<i class="fas fa-envelope-open-text text-yellow-300 text-4xl mb-4"></i>
|
||||
<h3 class="font-bold text-xl mb-2">Correo electrónico anónimo y uso compartido de archivos</h3>
|
||||
<p class="text-gray-300">Cree una dirección de correo electrónico en 1 clic, comparta archivos sin intermediarios ni censura.</p>
|
||||
</div>
|
||||
<div class="glass-card shadow-3d p-8 transition hover:scale-105">
|
||||
<i class="fas fa-coins text-emerald-300 text-4xl mb-4"></i>
|
||||
<h3 class="font-bold text-xl mb-2">Billetera criptográfica aislada</h3>
|
||||
<p class="text-gray-300">Billetera fría para almacenar y realizar operaciones con criptomonedas con máxima aislamiento de las amenazas de internet.</p>
|
||||
</div>
|
||||
<div class="glass-card shadow-3d p-8 transition hover:scale-105">
|
||||
<i class="fas fa-users-cog text-pink-400 text-4xl mb-4"></i>
|
||||
<h3 class="font-bold text-xl mb-2">Plataforma para todos los dispositivos</h3>
|
||||
<p class="text-gray-300">BlackBox funciona para un solo usuario, as well as for the whole family or business group. Unlimited number of connected devices.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- PRODUCT SHOWCASE -->
|
||||
<section id="products" class="max-w-6xl mx-auto py-12 fade-up" style="--delay:.1s">
|
||||
<h2 class="text-3xl md:text-4xl font-extrabold mb-10 font-montserrat text-center text-cyan-400 px-6">Gama de Modelos BlackBox</h2>
|
||||
|
||||
<div class="flipbook-container relative h-96 md:h-[36rem] w-full">
|
||||
<!-- BlackBox VPN (far left) -->
|
||||
<div class="flipbook-page" data-page="1">
|
||||
<div class="glass-card shadow-3d p-6 text-center h-full">
|
||||
<div class="h-40 mb-4 flex items-center justify-center">
|
||||
<img src="/images/bb_on_white-square.webp" alt="BlackBox VPN" class="h-full object-contain rounded-lg">
|
||||
</div>
|
||||
<h3 class="text-xl font-bold mb-3 text-cyan-300 product-title" data-product="BlackBox VPN">BlackBox VPN</h3>
|
||||
<div class="inline-flex items-center px-3 py-1 rounded-full bg-cyan-800/20 text-cyan-200 font-bold mb-3 animate-pulse">
|
||||
<span>99 €</span>
|
||||
</div>
|
||||
<p class="text-gray-300 mb-4 product-description">Crea un punto de acceso Wi-Fi con VPN segura. 512 MB RAM.</p>
|
||||
<div class="flex justify-center gap-3">
|
||||
<button class="buy-btn product-buy-btn">Comprar</button>
|
||||
<button onclick="showProductDetails(1)" class="details-btn product-details-btn">Detalles</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- BlackBox Privacy Messenger/Cloud (left) -->
|
||||
<div class="flipbook-page" data-page="2">
|
||||
<div class="glass-card shadow-3d p-6 text-center h-full">
|
||||
<div class="h-40 mb-4 flex items-center justify-center">
|
||||
<img src="/images/bb_on_white-square.webp" alt="BlackBox Privacy" class="h-full object-contain rounded-lg">
|
||||
</div>
|
||||
<h3 class="text-xl font-bold mb-3 text-cyan-300 product-title" data-product="BlackBox Privacy Messenger/Cloud">BlackBox Privacy Messenger/Cloud</h3>
|
||||
<div class="inline-flex items-center px-3 py-1 rounded-full bg-cyan-800/20 text-cyan-200 font-bold mb-3 animate-pulse">
|
||||
<span>199 €</span>
|
||||
</div>
|
||||
<p class="text-gray-300 mb-4 product-description">Mensajero Matrix o Nextcloud integrado. 1 GB RAM. Control total sobre sus datos.</p>
|
||||
<div class="flex justify-center gap-3">
|
||||
<button class="buy-btn product-buy-btn">Comprar</button>
|
||||
<button onclick="showProductDetails(2)" class="details-btn product-details-btn">Detalles</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- BlackBox 4GB (center) -->
|
||||
<div class="flipbook-page active" data-page="3">
|
||||
<div class="glass-card shadow-3d p-6 text-center h-full selected">
|
||||
<div class="h-40 mb-4 flex items-center justify-center">
|
||||
<img src="/images/bb_on_white-square.webp" alt="BlackBox 4GB" class="h-full object-contain rounded-lg">
|
||||
</div>
|
||||
<h3 class="text-xl font-bold mb-3 text-cyan-300 product-title" data-product="BlackBox 4GB">BlackBox 4GB</h3>
|
||||
<div class="inline-flex items-center px-3 py-1 rounded-full bg-cyan-800/20 text-cyan-200 font-bold mb-3 animate-pulse">
|
||||
<span>299 €</span>
|
||||
</div>
|
||||
<p class="text-gray-300 mb-4 product-description">Todas las funciones de los primeros modelos + escritorio remoto (Workspace). 4 GB RAM.</p>
|
||||
<div class="flex justify-center gap-3">
|
||||
<button class="buy-btn product-buy-btn">Comprar</button>
|
||||
<button onclick="showProductDetails(3)" class="details-btn product-details-btn">Detalles</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- BlackBox Workstation (right) -->
|
||||
<div class="flipbook-page" data-page="4">
|
||||
<div class="glass-card shadow-3d p-6 text-center h-full">
|
||||
<div class="h-40 mb-4 flex items-center justify-center">
|
||||
<img src="/images/bb_on_white-square.webp" alt="BlackBox Workstation" class="h-full object-contain rounded-lg">
|
||||
</div>
|
||||
<h3 class="text-xl font-bold mb-3 text-cyan-300 product-title" data-product="BlackBox Workstation">BlackBox Workstation</h3>
|
||||
<div class="inline-flex items-center px-3 py-1 rounded-full bg-cyan-800/20 text-cyan-200 font-bold mb-3 animate-pulse">
|
||||
<span>499 €</span>
|
||||
</div>
|
||||
<p class="text-gray-300 mb-4 product-description">Estación de trabajo completa. Todas las funciones de modelos anteriores.</p>
|
||||
<div class="flex justify-center gap-3">
|
||||
<button class="buy-btn product-buy-btn">Comprar</button>
|
||||
<button onclick="showProductDetails(4)" class="details-btn product-details-btn">Detalles</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- BlackBox AI (far right) -->
|
||||
<div class="flipbook-page" data-page="5">
|
||||
<div class="glass-card shadow-3d p-6 text-center h-full">
|
||||
<div class="h-40 mb-4 flex items-center justify-center">
|
||||
<img src="/images/bb_on_white-square.webp" alt="BlackBox AI" class="h-full object-contain rounded-lg">
|
||||
</div>
|
||||
<h3 class="text-xl font-bold mb-3 text-cyan-300 product-title" data-product="BlackBox AI">BlackBox AI</h3>
|
||||
<div class="inline-flex items-center px-3 py-1 rounded-full bg-cyan-800/20 text-cyan-200 font-bold mb-3 animate-pulse" style="box-shadow: 0 0 10px 2px rgba(116, 250, 255, 0.3);">
|
||||
<span>2999 €</span>
|
||||
</div>
|
||||
<p class="text-gray-300 mb-4 product-description">Incluye todas las tecnologías BlackBox. Inteligencia artificial privada. Máxima autonomía y protección.</p>
|
||||
<div class="flex justify-center gap-3">
|
||||
<button class="buy-btn product-buy-btn">Comprar</button>
|
||||
<button onclick="showProductDetails(5)" class="details-btn product-details-btn">Detalles</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- BlackBox Shop -->
|
||||
<div class="flipbook-page" data-page="6">
|
||||
<div class="glass-card shadow-3d p-6 text-center h-full">
|
||||
<div class="h-40 mb-4 flex items-center justify-center">
|
||||
<img src="/images/bb_on_white-square.webp" alt="BlackBox Shop" class="h-full object-contain rounded-lg">
|
||||
</div>
|
||||
<h3 class="text-xl font-bold mb-3 text-cyan-300 product-title" data-product="BlackBox Shop">BlackBox Shop</h3>
|
||||
<div class="inline-flex items-center px-3 py-1 rounded-full bg-cyan-800/20 text-cyan-200 font-bold mb-3 animate-pulse" style="box-shadow: 0 0 10px 2px rgba(116, 250, 255, 0.3);">
|
||||
<span>desde 499 €</span>
|
||||
</div>
|
||||
<p class="text-gray-300 mb-4 product-description">Creación de una tienda en Telegram a través de un bot. Carga de productos, descripción, precio. Pago de bienes a través de criptomoneda. Anonimato total del vendedor y comprador.</p>
|
||||
<div class="flex justify-center gap-3">
|
||||
<button class="buy-btn product-buy-btn">Comprar</button>
|
||||
<button onclick="showProductDetails(6)" class="details-btn product-details-btn">Detalles</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flipbook-indicator-track"></div>
|
||||
<div class="flipbook-indicator" style="transform: translateX(-150%);"></div>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
<!-- PRICING & ORDER -->
|
||||
<section id="order" class="max-w-3xl mx-auto mb-18 py-12 px-6 rounded-3xl glass-card mt-14 text-center border-2 border-cyan-500 relative fade-up" style="--delay:.1s">
|
||||
<div class="absolute top-3 left-1/3 -translate-x-1/2 bg-gradient-to-r from-emerald-500 to-green-500 text-white text-lg font-black rounded-full px-8 py-2 shadow-xl animate-bounce" style="box-shadow: 0 0 15px 5px rgba(16, 185, 129, 0.5);">
|
||||
¡-30% Solo ahora!
|
||||
</div>
|
||||
<h2 class="text-3xl md:text-4xl font-extrabold mb-4 font-montserrat">Pida BlackBox WorkStation con un descuento de <span class="text-cyan-400">350 USD</span></h2>
|
||||
<p class="text-lg text-gray-200 mb-6 max-w-xl mx-auto">Pago único - sin suscripciones.<br> Envío a todo el mundo. ¡El número de dispositivos en promoción es limitado!</p>
|
||||
<div class="flex flex-wrap items-center justify-center gap-8 mb-7">
|
||||
<div class="text-left bg-gray-800/70 rounded-2xl p-6">
|
||||
<div class="text-2xl">
|
||||
<span class="text-cyan-400 font-bold">149 USD</span>
|
||||
<span class="line-through text-gray-500 ml-2 text-lg">499 USD</span>
|
||||
</div>
|
||||
<div class="text-gray-400 text-xs mt-1">Precio especial para los primeros 10 compradores</div>
|
||||
<div class="mt-3 text-base text-green-300 font-bold">+ Actualización gratuita durante un año</div>
|
||||
</div>
|
||||
<ul class="text-left space-y-2 text-sm text-gray-200">
|
||||
<li><i class="fas fa-check mr-2 text-cyan-400"></i>Garantía de devolución de dinero de 30 días</li>
|
||||
<li><i class="fas fa-check mr-2 text-cyan-400"></i>Envío a todo el mundo</li>
|
||||
<li><i class="fas fa-check mr-2 text-cyan-400"></i>Soporte personalizado</li>
|
||||
</ul>
|
||||
</div>
|
||||
<a href="https://bbox.rocks/#order" target="_blank" class="pulse-cta px-12 py-4 rounded-xl text-white font-extrabold font-montserrat bg-gradient-to-r from-cyan-400 via-emerald-400 to-cyan-500 shadow-3d text-2xl hover:bg-cyan-400 transform transition">Pedir</a>
|
||||
<div class="mt-6 text-gray-300 text-base">Válido hasta el <span class="inline-block text-cyan-300 rounded px-2 py-1 font-bold bg-cyan-800/30">1 de junio de 2025</span> o hasta agotar existencias.</div>
|
||||
</section>
|
||||
|
||||
<!-- PRODUCT DETAILS MODAL -->
|
||||
<div id="productModal" class="fixed inset-0 bg-black/80 z-50 flex items-center justify-center hidden">
|
||||
<div class="modal-content relative">
|
||||
<span class="modal-close" onclick="hideProductDetails()">×</span>
|
||||
<h3 id="modalTitle" class="text-2xl font-bold mb-4 text-cyan-400"></h3>
|
||||
<p id="modalDescription" class="text-gray-300 mb-6"></p>
|
||||
<button class="w-full py-3 buy-btn text-lg">Comprar ahora</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- TESTIMONIALS -->
|
||||
<section id="testimonials" class="max-w-6xl mx-auto py-11 px-6 mt-4 fade-up" style="--delay:.1s">
|
||||
<h2 class="text-3xl font-extrabold text-cyan-400 mb-7 text-center">¿Qué dicen nuestros usuarios?</h2>
|
||||
<div class="grid md:grid-cols-3 gap-7 lg:gap-12">
|
||||
<div class="glass-card p-7 shadow-3d flex flex-col items-center text-center">
|
||||
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Testimonial" class="w-14 h-14 rounded-full mb-3 shadow-lg">
|
||||
<div class="mb-2 font-bold text-lg text-emerald-300">Andrey, fundador de startup</div>
|
||||
<div class="text-gray-300 italic">"BlackBox es el primer gadget en el que confío mis datos personales. Sin registros, funcionamiento rápido, genial para trabajar desde cualquier parte del mundo."</div>
|
||||
</div>
|
||||
<div class="glass-card p-7 shadow-3d flex flex-col items-center text-center border-2 border-cyan-400">
|
||||
<img src="https://randomuser.me/api/portraits/women/43.jpg" alt="Testimonial" class="w-14 h-14 rounded-full mb-3 shadow-lg">
|
||||
<div class="mb-2 font-bold text-lg text-cyan-300">Maria, madre</div>
|
||||
<div class="text-gray-300 italic">"Para nosotros, BlackBox es una garantía de seguridad en internet para toda la familia. Incluso los niños pueden usarlo sin ninguna configuración."</div>
|
||||
</div>
|
||||
<div class="glass-card p-7 shadow-3d flex flex-col items-center text-center">
|
||||
<img src="https://randomuser.me/api/portraits/men/67.jpg" alt="Testimonial" class="w-14 h-14 rounded-full mb-3 shadow-lg">
|
||||
<div class="mb-2 font-bold text-lg text-purple-300">Vlad, programador</div>
|
||||
<div class="text-gray-300 italic">"Linux, código abierto, anonimato: todo funciona rápido y de manera inteligente. Una excelente alternativa a los servicios VPN y routers."</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- FOOTER -->
|
||||
<footer class="w-full mt-10 pt-7 pb-8 bg-black/60 flex flex-col items-center text-center text-gray-500 text-sm">
|
||||
<img src="/images/logo.webp" alt="bbox logo" class="w-10 h-10 mx-auto mb-3">
|
||||
<div class="mb-2">
|
||||
<span class="font-montserrat font-bold text-cyan-400 text-lg">BlackBox</span> © 2022-2025. Todos los derechos reservados.<br>
|
||||
</div>
|
||||
<div class="flex justify-center space-x-6 mb-4">
|
||||
<a href="https://t.me/bbox_wtf" target="_blank" class="text-cyan-300 hover:text-cyan-400 transition-colors" aria-label="Nuestro canal de Telegram">
|
||||
<i class="fab fa-telegram text-2xl"></i> Telegram
|
||||
</a>
|
||||
<a href="https://vk.com/bbox_wtf" target="_blank" class="text-cyan-300 hover:text-cyan-400 transition-colors" aria-label="Nuestro grupo de VK">
|
||||
<i class="fab fa-vk text-2xl"></i> VK
|
||||
</a>
|
||||
</div>
|
||||
<div>
|
||||
<a href="mailto:support@bbox.wtf" class="hover:underline text-cyan-300">Soporte</a>
|
||||
|
|
||||
<a href="/es/pages/faq.html" class="hover:underline text-cyan-300">FAQ</a>
|
||||
|
|
||||
<a href="https://bbox.rocks" class="hover:underline">Sitio web antiguo no compatible</a>
|
||||
</div>
|
||||
<div class="mt-4">
|
||||
<span class="text-gray-400">bbox.wtf - página de destino de próxima generación: BlackBox no es solo una VPN, es un ecosistema y su privacidad digital.</span>
|
||||
</div>
|
||||
</footer>
|
||||
<script src="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.5.2/js/all.min.js"></script>
|
||||
<script src="/js/features.js"></script>
|
||||
<script src="/js/flipbook.js"></script>
|
||||
<script src="/js/fade-up.js"></script>
|
||||
<!-- Yandex.Metrika counter -->
|
||||
<script type="text/javascript" >
|
||||
(function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)};
|
||||
m[i].l=1*new Date();
|
||||
for (var j = 0; j < document.scripts.length; j++) {if (document.scripts[j].src === r) { return; }}
|
||||
k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)})
|
||||
(window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym");
|
||||
|
||||
ym(55764994, "init", {
|
||||
clickmap:true,
|
||||
trackLinks:true,
|
||||
accurateTrackBounce:true,
|
||||
webvisor:true,
|
||||
trackHash:true
|
||||
});
|
||||
</script>
|
||||
<noscript><div><img src="https://mc.yandex.ru/watch/55764994" style="position:absolute; left:-9999px;" alt="" /></div></noscript>
|
||||
<!-- /Yandex.Metrika counter -->
|
||||
<script src="/js/lang-detect-redirect.js"></script>
|
||||
<script src="/js/language-switcher.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
58
lang/es/json/es.json
Normal file
58
lang/es/json/es.json
Normal file
@@ -0,0 +1,58 @@
|
||||
{
|
||||
"features": [
|
||||
{
|
||||
"name": "Tunelización VPN",
|
||||
"hint": "VPN es solo el comienzo para BlackBox."
|
||||
},
|
||||
{
|
||||
"name": "Navegación Segura",
|
||||
"hint": "El navegador se ejecuta en el dispositivo BlackBox, los registros no se escriben en su PC."
|
||||
},
|
||||
{
|
||||
"name": "Correo Electrónico y Mensajero Anónimo",
|
||||
"hint": "¡La correspondencia se almacena SOLO por usted, de extremo a extremo!"
|
||||
},
|
||||
{
|
||||
"name": "Alojamiento Descentralizado",
|
||||
"hint": "Puede crear su propio sitio web o almacenar archivos - sin censura."
|
||||
},
|
||||
{
|
||||
"name": "Transferencia Segura de Archivos",
|
||||
"hint": "Transfiera documentos sin intermediarios."
|
||||
},
|
||||
{
|
||||
"name": "Billetera Criptográfica",
|
||||
"hint": "Funcionalidad criptográfica en un contenedor aislado separado."
|
||||
},
|
||||
{
|
||||
"name": "Sin Registros/Todo Local",
|
||||
"hint": "Nunca hay un almacenamiento central de registros - usted mantiene la privacidad."
|
||||
},
|
||||
{
|
||||
"name": "1 Dispositivo - Toda la Familia",
|
||||
"hint": "Acceso a la privacidad para todos (Wi-Fi/LAN, ilimitado)."
|
||||
}
|
||||
],
|
||||
"products": [
|
||||
{
|
||||
"name": "BlackBox"
|
||||
},
|
||||
{
|
||||
"name": "Router VPN"
|
||||
},
|
||||
{
|
||||
"name": "Servicio VPN"
|
||||
}
|
||||
],
|
||||
"product_details": {
|
||||
"BlackBox VPN": "Crea un punto de acceso Wi-Fi con VPN segura. 512 MB RAM.",
|
||||
"BlackBox Privacy Messenger/Cloud": "Mensajero Matrix o Nextcloud integrado. 1 GB RAM. Control total sobre sus datos.",
|
||||
"BlackBox 4GB": "Todas las funciones de los primeros modelos + escritorio remoto (Workspace). 4 GB RAM.",
|
||||
"BlackBox Workstation": "Estación de trabajo completa. Todas las funciones de modelos anteriores.",
|
||||
"BlackBox AI": "Incluye todas las tecnologías BlackBox. Inteligencia artificial privada. Máxima autonomía y protección.",
|
||||
"BlackBox Shop": "Creación de una tienda en Telegram a través de un bot. Carga de productos, descripción, precio. Pago de bienes a través de criptomoneda. Anonimato total del vendedor y comprador."
|
||||
},
|
||||
"buy_button": "Comprar",
|
||||
"details_button": "Detalles",
|
||||
"buy_now_button": "Comprar ahora"
|
||||
}
|
||||
283
lang/es/pages/faq.html
Normal file
283
lang/es/pages/faq.html
Normal file
@@ -0,0 +1,283 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="es">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Blackbox - Preguntas Frecuentes</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, minimum-scale=0.5, viewport-fit=cover">
|
||||
<meta name="description" content="Preguntas frecuentes sobre Blackbox.">
|
||||
<meta name="keywords" content="Blackbox, FAQ, preguntas frecuentes, preguntas, respuestas, anonimato, privacidad">
|
||||
<link href="/css/tailwind.min.css" rel="stylesheet">
|
||||
<link href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.5.2/css/all.min.css" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Montserrat+Alternates:wght@700;500&family=Montserrat:wght@700;500;400&family=Inter:wght@400;600&display=swap" rel="stylesheet">
|
||||
<script src="/js/echarts.min.js"></script>
|
||||
<link rel="stylesheet" href="/css/style.css">
|
||||
<!-- Open Graph Meta Tags for Social Media -->
|
||||
<meta property="og:title" content="Blackbox - Preguntas Frecuentes">
|
||||
<meta property="og:description" content="Preguntas frecuentes sobre Blackbox.">
|
||||
<meta property="og:image" content="/images/scales.webp">
|
||||
<meta property="og:url" content="https://bbox.wtf/es/pages/faq.html">
|
||||
<meta property="og:type" content="website">
|
||||
|
||||
<!-- Twitter Card Meta Tags -->
|
||||
<meta name="twitter:card" content="summary_large_image">
|
||||
<meta name="twitter:title" content="Blackbox - Preguntas Frecuentes">
|
||||
<meta name="twitter:description" content="Preguntas frecuentes sobre Blackbox.">
|
||||
<meta name="twitter:image" content="/images/scales.webp">
|
||||
</head>
|
||||
<body class="gradient-bg overflow-x-hidden">
|
||||
|
||||
<!-- HEADER -->
|
||||
<header class="flex flex-wrap justify-between items-center px-5 md:px-10 py-7 bg-transparent z-10 relative">
|
||||
<a href="/es/" class="flex items-center space-x-4">
|
||||
<img src="/images/logo.webp" alt="bbox logo" class="w-14 h-14 rounded-lg shadow-lg">
|
||||
<span class="font-montserrat font-bold text-2xl text-cyan-400 tracking-widest">BlackBox</span>
|
||||
</a>
|
||||
<nav class="hidden md:flex space-x-8 text-lg font-montserrat font-semibold">
|
||||
<a href="/es/#features" class="hover:text-cyan-400 transition-colors">Características</a>
|
||||
<a href="/es/#supercompare" class="hover:text-cyan-400 transition-colors">Comparación</a>
|
||||
<a href="/es/#pricing" class="hover:text-cyan-400 transition-colors">Precio</a>
|
||||
<a href="/es/#testimonials" class="hover:text-cyan-400 transition-colors">Testimonios</a>
|
||||
</nav>
|
||||
<a href="#order" class="pulse-cta rounded-xl px-7 py-3 bg-emerald-500 text-white text-lg font-bold shadow-lg hover:bg-emerald-400 transition-all duration-300 transform hover:scale-105" style="font-family: 'Montserrat', sans-serif; box-shadow: 0 0 15px 5px rgba(16, 185, 129, 0.5);">
|
||||
Ordenar Ahora
|
||||
<i class="fas fa-lock ml-2"></i>
|
||||
</a>
|
||||
</header>
|
||||
|
||||
<main class="max-w-4xl mx-auto py-12 px-5">
|
||||
<h1 class="text-4xl font-bold font-montserrat text-cyan-400 mb-8 text-center">Blackbox - Preguntas Frecuentes</h1>
|
||||
|
||||
<section class="glass-card shadow-3d p-8">
|
||||
<h3 class="text-2xl font-bold mb-6 text-white">Preguntas y Respuestas</h3>
|
||||
|
||||
<div class="faq-item mb-8">
|
||||
<div class="faq-question cursor-pointer">
|
||||
<h4 class="text-xl font-semibold mb-3 text-cyan-300">1. ¿Cómo volverse anónimo con Blackbox?</h4>
|
||||
</div>
|
||||
<div class="faq-answer text-gray-300 overflow-hidden max-h-0 transition-max-height duration-500 ease-in-out">
|
||||
<p class="mb-4">Blackbox le permite disfrutar de todos los beneficios del anonimato en 4 sencillos pasos:</p>
|
||||
<ol class="list-decimal list-inside text-gray-300 space-y-2">
|
||||
<li><strong>Conecte Blackbox a una fuente de alimentación</strong>.</li>
|
||||
<li><strong>Conéctese a Blackbox a través de Wi-Fi</strong>.</li>
|
||||
<li><strong>Conecte Blackbox a Internet</strong>.</li>
|
||||
<li><strong>Use Internet mientras permanece anónimo de dos maneras</strong>:
|
||||
<ul class="list-disc list-inside ml-5 space-y-1">
|
||||
<li>usando Blackbox como enrutador</li>
|
||||
<li>usando Blackbox como estación de trabajo</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="faq-item mb-8">
|
||||
<div class="faq-question cursor-pointer">
|
||||
<h4 class="text-xl font-semibold mb-3 text-cyan-300">2. ¿Qué es la versión Alpha?</h4>
|
||||
</div>
|
||||
<div class="faq-answer text-gray-300 overflow-hidden max-h-0 transition-max-height duration-500 ease-in-out">
|
||||
<p>La versión Alpha de Blackbox es una versión de prueba intermedia del producto antes del lanzamiento, que le permite comenzar a usar las funciones implementadas ahora, sin esperar el lanzamiento oficial:</p>
|
||||
<ul class="list-disc list-inside text-gray-300 space-y-2 mt-2">
|
||||
<li>navegación segura</li>
|
||||
<li>visualización segura de la darknet</li>
|
||||
<li>servidor VPN</li>
|
||||
<li>correo electrónico anónimo</li>
|
||||
<li>entrega de actualizaciones</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="faq-item mb-8">
|
||||
<div class="faq-question cursor-pointer">
|
||||
<h4 class="text-xl font-semibold mb-3 text-cyan-300">3. ¿Cómo pedir Blackbox?</h4>
|
||||
</div>
|
||||
<div class="faq-answer text-gray-300 overflow-hidden max-h-0 transition-max-height duration-500 ease-in-out">
|
||||
<p>Puede pedir Blackbox en línea <a href="https://bbox.wtf/ru/#order" class="text-cyan-400 hover:underline">en nuestro sitio web</a> y pagar con cualquier tarjeta de crédito a través de Stripe, PayPal o criptomoneda.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="faq-item mb-8">
|
||||
<div class="faq-question cursor-pointer">
|
||||
<h4 class="text-xl font-semibold mb-3 text-cyan-300">4. ¿Cómo funciona la entrega?</h4>
|
||||
</div>
|
||||
<div class="faq-answer text-gray-300 overflow-hidden max-h-0 transition-max-height duration-500 ease-in-out">
|
||||
<p>Blackbox se produce en lotes de 100 unidades. El pedido de piezas y el inicio de la producción se realizan después de completar el lote, pero no más de una vez por semana. Blackbox se producirá y entregará dentro de los 2 meses posteriores al inicio de la producción. La entrega de Blackbox está incluida en el precio.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="faq-item mb-8">
|
||||
<div class="faq-question cursor-pointer">
|
||||
<h4 class="text-xl font-semibold mb-3 text-cyan-300">5. ¿Cuáles son las especificaciones técnicas de Blackbox?</h4>
|
||||
</div>
|
||||
<div class="faq-answer text-gray-300 overflow-hidden max-h-0 transition-max-height duration-500 ease-in-out">
|
||||
<p class="mb-4"><strong>Configuración:</strong></p>
|
||||
<ul class="list-disc list-inside text-gray-300 space-y-2 ml-5">
|
||||
<li>CPU H2 Quad-core Cortex-A7 H.265/HEVC 1080P</li>
|
||||
<li>MB Orange PI zero 512MB</li>
|
||||
<li>GPU Mali400MP2 GPU @600MHz Supports OpenGL ES 2.0</li>
|
||||
<li>Memory (SDRAM) 512MB DDR3 SDRAM(Share with GPU)</li>
|
||||
<li>SSD Storage Sandisk xD 16Gb Flash</li>
|
||||
<li>Onboard Network 10/100M Ethernet RJ45 POE is default off.</li>
|
||||
<li>Outbound WIFI XR819, IEEE 802.11 b/g/n</li>
|
||||
<li>Inbound WIFI Malloom Mini USB 2.0 802.11n 150Mbps</li>
|
||||
<li>1x USB 2.0 Ports</li>
|
||||
<li>Weight 60g</li>
|
||||
<li>Dimensions 55mm x 55mm x 28mm</li>
|
||||
</ul>
|
||||
<p class="mb-4 mt-4"><strong>Software:</strong></p>
|
||||
<ul class="list-disc list-inside text-gray-300 space-y-2 ml-5">
|
||||
<li>Armbian Jessie 5.38</li>
|
||||
<li>TOR Source 0.4.1.5</li>
|
||||
<li>OpenVPN 2.4.7 Lighthttpd 1.4.54 / NGINX 1.17.3</li>
|
||||
<li>Ejabberd 2.1.11</li>
|
||||
<li>Métodos de cifrado AES2, OTR, PGP, SSH512, SSL</li>
|
||||
</ul>
|
||||
<p class="mb-4 mt-4"><strong>Preconfiguración:</strong></p>
|
||||
<ul class="list-disc list-inside text-gray-300 space-y-2 ml-5">
|
||||
<li>OPSEC</li>
|
||||
<li>Servidor de chat/llamadas</li>
|
||||
<li>Configuración de TOR</li>
|
||||
<li>Configuración de red OpenVPN de Blackbox</li>
|
||||
<li>Limpiador de registros y datos después del reinicio o con temporizador</li>
|
||||
<li>Interfaz web de TOR</li>
|
||||
<li>Todos los cifrados</li>
|
||||
<li>LLMP(Linux+Lighttpd+MiraDB+php7.3)</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="faq-item mb-8">
|
||||
<div class="faq-question cursor-pointer">
|
||||
<h4 class="text-xl font-semibold mb-3 text-cyan-300">6. ¿En qué casos se proporcionan reembolsos?</h4>
|
||||
</div>
|
||||
<div class="faq-answer text-gray-300 overflow-hidden max-h-0 transition-max-height duration-500 ease-in-out">
|
||||
<p>Garantizamos un reembolso completo si el dispositivo entregado no cumple con las especificaciones técnicas indicadas, así como en caso de un retraso en la entrega de Blackbox de más de 1 mes a partir de la fecha de entrega prometida.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="faq-item mb-8">
|
||||
<div class="faq-question cursor-pointer">
|
||||
<h4 class="text-xl font-semibold mb-3 text-cyan-300">7. ¿Hay garantía en Blackbox?</h4>
|
||||
</div>
|
||||
<div class="faq-answer text-gray-300 overflow-hidden max-h-0 transition-max-height duration-500 ease-in-out">
|
||||
<p>Todos los dispositivos Blackbox vienen con una garantía de 1 año. Si surgen problemas técnicos durante un año de uso de Blackbox, puede devolver el dispositivo y obtener uno nuevo gratis a cambio.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="faq-item mb-8">
|
||||
<div class="faq-question cursor-pointer">
|
||||
<h4 class="text-xl font-semibold mb-3 text-cyan-300">8. ¿Puedo pagar Blackbox con criptomoneda?</h4>
|
||||
</div>
|
||||
<div class="faq-answer text-gray-300 overflow-hidden max-h-0 transition-max-height duration-500 ease-in-out">
|
||||
<p>Actualmente, puede pagar su pedido con criptomoneda poniéndose en contacto con los desarrolladores en nuestra <a href="https://t.me/joinchat/AAAAAEzMDw32y4NVLkCgqw" class="text-cyan-400 hover:underline">Comunidad de Telegram</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="faq-item mb-8">
|
||||
<div class="faq-question cursor-pointer">
|
||||
<h4 class="text-xl font-semibold mb-3 text-cyan-300">9. ¿Cómo afecta Blackbox la protección del anonimato y la privacidad en línea?</h4>
|
||||
</div>
|
||||
<div class="faq-answer text-gray-300 overflow-hidden max-h-0 transition-max-height duration-500 ease-in-out">
|
||||
<p>Blackbox garantiza el anonimato según todos los criterios necesarios (¿quién lo hace? ¿qué está haciendo? ¿desde dónde lo hace?) y en todos los niveles tecnológicos: el software utilizado, el sistema operativo y el propio dispositivo.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="faq-item mb-8">
|
||||
<div class="faq-question cursor-pointer">
|
||||
<h4 class="text-xl font-semibold mb-3 text-cyan-300">10. ¿Cómo verificar su anonimato?</h4>
|
||||
</div>
|
||||
<div class="faq-answer text-gray-300 overflow-hidden max-h-0 transition-max-height duration-500 ease-in-out">
|
||||
<p>A diferencia de los programas de código cerrado y los servicios a cuyos servidores no tiene acceso, Blackbox es un servidor que se encuentra en su hogar y tiene una arquitectura de código abierto. Cualquier persona que entienda de ciberseguridad puede verificar su eficacia para garantizar el anonimato y cambiar su configuración.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="faq-item">
|
||||
<div class="faq-question cursor-pointer">
|
||||
<h4 class="text-xl font-semibold mb-3 text-cyan-300">11. ¿Blackbox ralentiza la velocidad de Internet?</h4>
|
||||
</div>
|
||||
<div class="faq-answer text-gray-300 overflow-hidden max-h-0 transition-max-height duration-500 ease-in-out">
|
||||
<p>Sí, lo hace. La velocidad de conexión a través de Blackbox se reduce a 20-30 Mbps. Blackbox no está diseñado para el uso constante de Internet para todas las tareas. Esta velocidad es suficiente si se conecta al Wi-Fi emitido por Blackbox solo para tareas que requieren anonimato. La velocidad de la red segura de Blackbox es 6 veces mayor que la de TOR.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer class="w-full mt-10 pt-7 pb-8 bg-black/60 flex flex-col items-center text-center text-gray-500 text-sm">
|
||||
<img src="/images/logo.webp" alt="bbox logo" class="w-10 h-10 mx-auto mb-3">
|
||||
<div class="mb-2">
|
||||
<span class="font-montserrat font-bold text-cyan-400 text-lg">BlackBox</span> © 2022-2025. Todos los derechos reservados.<br>
|
||||
</div>
|
||||
<div class="flex justify-center space-x-6 mb-4">
|
||||
<a href="https://t.me/bbox_wtf" target="_blank" class="text-cyan-300 hover:text-cyan-400 transition-colors" aria-label="Nuestro canal de Telegram">
|
||||
<i class="fab fa-telegram text-2xl"></i> Telegram
|
||||
</a>
|
||||
<a href="https://vk.com/bbox_wtf" target="_blank" class="text-cyan-300 hover:text-cyan-400 transition-colors" aria-label="Nuestro grupo de VK">
|
||||
<i class="fab fa-vk text-2xl"></i> VK
|
||||
</a>
|
||||
</div>
|
||||
<div>
|
||||
<a href="mailto:support@bbox.wtf" class="hover:underline text-cyan-300">Soporte</a>
|
||||
|
|
||||
<a href="/es/pages/faq.html" class="hover:underline text-cyan-300">Preguntas Frecuentes</a>
|
||||
|
|
||||
<a href="https://bbox.rocks" class="hover:underline">Sitio web antiguo no compatible</a>
|
||||
</div>
|
||||
<div class="mt-4">
|
||||
<span class="text-gray-400">bbox.wtf — página de destino de próxima generación: BlackBox — no solo una VPN, es un ecosistema y su privacidad digital.</span>
|
||||
</div>
|
||||
</footer>
|
||||
<script src="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.5.2/js/all.min.js"></script>
|
||||
<script src="/js/features.js"></script>
|
||||
<script src="/js/flipbook.js"></script>
|
||||
<script src="/js/fade-up.js"></script>
|
||||
<!-- Yandex.Metrika counter -->
|
||||
<script type="text/javascript" >
|
||||
(function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)};
|
||||
m[i].l=1*new Date();
|
||||
for (var j = 0; j < document.scripts.length; j++) {if (document.scripts[j].src === r) { return; }}
|
||||
k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)})
|
||||
(window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym");
|
||||
|
||||
ym(55764994, "init", {
|
||||
clickmap:true,
|
||||
trackLinks:true,
|
||||
accurateTrackBounce:true,
|
||||
webvisor:true,
|
||||
trackHash:true
|
||||
});
|
||||
</script>
|
||||
<noscript><div><img src="https://mc.yandex.ru/watch/55764994" style="position:absolute; left:-9999px;" alt="" /></div></noscript>
|
||||
<!-- /Yandex.Metrika counter -->
|
||||
<script src="/js/lang-detect-redirect.js"></script>
|
||||
<script src="/js/language-switcher.js"></script>
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const faqQuestions = document.querySelectorAll('.faq-question');
|
||||
|
||||
faqQuestions.forEach(question => {
|
||||
question.addEventListener('click', () => {
|
||||
const faqItem = question.closest('.faq-item');
|
||||
const answer = faqItem.querySelector('.faq-answer');
|
||||
const isOpen = faqItem.classList.contains('open');
|
||||
|
||||
// Close all other open FAQ items
|
||||
document.querySelectorAll('.faq-item.open').forEach(openItem => {
|
||||
if (openItem !== faqItem) {
|
||||
openItem.classList.remove('open');
|
||||
openItem.querySelector('.faq-answer').style.maxHeight = null;
|
||||
}
|
||||
});
|
||||
|
||||
// Toggle the clicked FAQ item
|
||||
if (isOpen) {
|
||||
faqItem.classList.remove('open');
|
||||
answer.style.maxHeight = null;
|
||||
} else {
|
||||
faqItem.classList.add('open');
|
||||
answer.style.maxHeight = answer.scrollHeight + 'px';
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
372
lang/ru/index.html
Normal file
372
lang/ru/index.html
Normal file
@@ -0,0 +1,372 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>BlackBox – Экосистема приватности и безопасности</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, minimum-scale=0.5, viewport-fit=cover">
|
||||
<meta name="description" content="BlackBox — физическое устройство для мультиуровневой приватности: VPN, анонимный email, приватный мессенджер, децентрализованный хостинг, защищённая передача файлов, крипто-операции. Глубокое динамическое сравнение — в одном устройстве.">
|
||||
<meta name="keywords" content="BlackBox, приватность, безопасность, VPN, экосистема, роутер, анонимный email, приватный мессенджер, децентрализованный хостинг, защищённая передача файлов, крипто-операции">
|
||||
<link href="/css/tailwind.min.css" rel="stylesheet">
|
||||
<link href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.5.2/css/all.min.css" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Montserrat+Alternates:wght@700;500&family=Montserrat:wght@700;500;400&family=Inter:wght@400;600&display=swap" rel="stylesheet">
|
||||
<script src="/js/echarts.min.js"></script>
|
||||
<link rel="stylesheet" href="/css/style.css">
|
||||
<!-- Open Graph Meta Tags for Social Media -->
|
||||
<meta property="og:title" content="BlackBox – Экосистема приватности и безопасности">
|
||||
<meta property="og:description" content="BlackBox — физическое устройство для мультиуровневой приватности: VPN, анонимный email, приватный мессенджер, децентрализованный хостинг, защищённая передача файлов, крипто-операции.">
|
||||
<meta property="og:image" content="/images/scales.webp"> <!-- Using the main device image -->
|
||||
<meta property="og:url" content="https://bbox.wtf"> <!-- Replace with actual URL -->
|
||||
<meta property="og:type" content="website">
|
||||
|
||||
<!-- Twitter Card Meta Tags -->
|
||||
<meta name="twitter:card" content="summary_large_image">
|
||||
<meta name="twitter:title" content="BlackBox – Экосистема приватности и безопасности">
|
||||
<meta name="twitter:description" content="BlackBox — физическое устройство для мультиуровневой приватности: VPN, анонимный email, приватный мессенджер, децентрализованный хостинг, защищённая передача файлов, крипто-операции.">
|
||||
<meta name="twitter:image" content="/images/scales.webp"> <!-- Using the main device image -->
|
||||
</head>
|
||||
<body class="gradient-bg overflow-x-hidden">
|
||||
|
||||
<!-- ШАПКА -->
|
||||
<header class="flex flex-wrap justify-between items-center px-5 md:px-10 py-7 bg-transparent z-10 relative">
|
||||
<a href="/ru/" class="flex items-center space-x-4">
|
||||
<img src="/images/logo.webp" alt="bbox logo" class="w-14 h-14 rounded-lg shadow-lg">
|
||||
<span class="font-montserrat font-bold text-2xl text-cyan-400 tracking-widest">BlackBox</span>
|
||||
</a>
|
||||
<nav class="hidden md:flex space-x-8 text-lg font-montserrat font-semibold">
|
||||
<a href="/ru/#features" class="hover:text-cyan-400 transition-colors">Особенности</a>
|
||||
<a href="/ru/#supercompare" class="hover:text-cyan-400 transition-colors">Сравнение</a>
|
||||
<a href="/ru/#pricing" class="hover:text-cyan-400 transition-colors">Цена</a>
|
||||
<a href="/ru/#testimonials" class="hover:text-cyan-400 transition-colors">Отзывы</a>
|
||||
</nav>
|
||||
<a href="#order" class="pulse-cta rounded-xl px-7 py-3 bg-emerald-500 text-white text-lg font-bold shadow-lg hover:bg-emerald-400 transition-all duration-300 transform hover:scale-105" style="font-family: 'Montserrat', sans-serif; box-shadow: 0 0 15px 5px rgba(16, 185, 129, 0.5);">
|
||||
Заказать сейчас
|
||||
<i class="fas fa-lock ml-2"></i>
|
||||
</a>
|
||||
</header>
|
||||
|
||||
<!-- ГЛАВНЫЙ РАЗДЕЛ -->
|
||||
<section class="pt-10 pb-14 md:pt-18 md:pb-32 px-5 lg:px-0 flex flex-col items-center text-center relative overflow-visible bg-gradient-to-b from-black/90 to-gray-950 z-0">
|
||||
<div class="w-full mx-auto shadow-3d transition-all duration-300" style="background: url('/images/banner-image.webp') center/cover no-repeat; padding: 2rem; border-radius: 1rem;">
|
||||
<h1 class="text-3xl md:text-5xl lg:text-6xl leading-tight mb-6 fade-up text-white" style="--delay:.1s; text-shadow: 0 2px 4px rgba(0,0,0,0.5);">
|
||||
<span class="font-montserrat-alternates font-medium">Целая</span><br class="hidden md:inline">
|
||||
<span class="font-bebas-neue">ЭКОСИСТЕМА</span><br class="hidden lg:inline">
|
||||
<span class="font-montserrat-alternates font-medium">Приватности</span><br>
|
||||
<span class="text-cyan-400 font-montserrat">в одном устройстве</span>
|
||||
</h1>
|
||||
<p class="text-xl md:text-2xl max-w-2xl mx-auto mb-10 text-white fade-up" style="--delay:.3s">
|
||||
BlackBox — не просто VPN.<br>
|
||||
Это инновационное аппаратное решение, которое объединяет инструменты приватности, общения и блокировки слежки на уровне, который невозможен у обычных VPN-сервисов и роутеров!
|
||||
</p>
|
||||
<div class="flex flex-col md:flex-row gap-4 items-center justify-center fade-up" style="--delay:.55s">
|
||||
<a href="#order" class="pulse-cta px-12 py-4 rounded-2xl text-white font-extrabold font-montserrat bg-gradient-to-r from-emerald-500 to-green-500 text-2xl shadow-3d hover:from-emerald-400 hover:to-green-400 transform-gpu transition-all duration-300 hover:scale-105" style="box-shadow: 0 0 20px 8px rgba(16, 185, 129, 0.6);">Купить со скидкой</a>
|
||||
<a href="#supercompare" class="px-10 py-4 rounded-2xl border-2 border-cyan-400 text-cyan-300 bg-transparent font-bold text-xl font-montserrat hover:bg-cyan-700/10 transition">Динамическое сравнение</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-14 mb-8 relative flex justify-center fade-up" style="--delay:.85s;">
|
||||
<img src="/images/scales.webp" alt="BlackBox Device" class="hero-3d rounded-3xl w-[370px] md:w-[470px] z-10" draggable="false">
|
||||
<div class="absolute -bottom-4 left-1/2 -translate-x-1/2 w-72 h-16 bg-cyan-400/10 rounded-full blur-2xl z-0"></div>
|
||||
</div>
|
||||
<div class="mt-4 max-w-2xl mx-auto fade-up" style="--delay:1.1s;">
|
||||
<span class="inline-flex items-center px-4 py-1 rounded-full bg-cyan-800/20 text-cyan-200 font-semibold text-lg animate-pulse">
|
||||
<i class="fas fa-bolt text-yellow-300 mr-2"></i>
|
||||
Скидка 30% на предзаказ до 1 июня!
|
||||
</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- СУПЕРДИНАМИЧЕСКОЕ СРАВНЕНИЕ -->
|
||||
<section id="supercompare" class="max-w-5xl mx-auto py-14 px-5 fade-up" style="--delay:.1s">
|
||||
<h2 class="text-3xl md:text-4xl font-black font-montserrat text-cyan-400 mb-5 text-center tracking-tight">
|
||||
Динамическое сравнение: <span class="text-white">BlackBox</span> против VPN и роутеров
|
||||
</h2>
|
||||
<p class="text-lg text-gray-300 max-w-2xl mx-auto mb-10 text-center">
|
||||
<span class="text-cyan-300 font-bold">BlackBox</span> — это <span class="underline">экосистема приватности</span>. Смотрите как поддержка функций расширяется в сравнении с простыми VPN-сервисами и аппаратными роутерами.
|
||||
</p>
|
||||
|
||||
<div class="glass-card shadow-3d p-8 mb-8">
|
||||
<div class="grid grid-cols-4 gap-4 mb-6">
|
||||
<div class="col-span-1 font-bold text-gray-300 text-right pr-4">Функции</div>
|
||||
<div class="col-span-1 font-bold text-cyan-400 text-center">BlackBox</div>
|
||||
<div class="col-span-1 font-bold text-blue-400 text-center">VPN-Роутер</div>
|
||||
<div class="col-span-1 font-bold text-purple-400 text-center">VPN-сервис</div>
|
||||
</div>
|
||||
|
||||
<div id="featuresContainer">
|
||||
<!-- Features will be inserted here by JS -->
|
||||
</div>
|
||||
|
||||
<div class="text-gray-400 mt-6 text-base">
|
||||
<i class="fas fa-info-circle text-cyan-300"></i>
|
||||
<span class="ml-1">Наведите курсор на строку, чтобы увидеть подробности о каждой функции</span>
|
||||
</div>
|
||||
<div id="dynCompareHint" class="font-mono text-sm mt-3 p-3 bg-gray-800/50 rounded-lg"></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<!-- ОСОБЕННОСТИ -->
|
||||
<section id="features" class="max-w-7xl mx-auto mt-8 lg:mt-0 py-13 px-5">
|
||||
<h2 class="text-3xl md:text-4xl font-bold font-montserrat text-cyan-400 mb-7 fade-up" style="--delay:.15s">BlackBox: преимущества экосистемы</h2>
|
||||
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8 fade-up" style="--delay:.22s">
|
||||
<div class="glass-card shadow-3d p-8 transition hover:scale-105">
|
||||
<i class="fas fa-user-secret text-cyan-300 text-4xl mb-4"></i>
|
||||
<h3 class="font-bold text-xl mb-2">Все инструменты приватности</h3>
|
||||
<p class="text-gray-300">VPN, мессенджер, email, файлы, кошелек и хостинг — в одном мини-компьютере. Больше не нужно искать отдельные сервисы!</p>
|
||||
</div>
|
||||
<div class="glass-card shadow-3d p-8 transition hover:scale-105">
|
||||
<i class="fas fa-globe text-cyan-400 text-4xl mb-4"></i>
|
||||
<h3 class="font-bold text-xl mb-2">Анонимный интернет & даркнет</h3>
|
||||
<p class="text-gray-300">Безопасный доступ ко всем сервисам, включая onion и децентрализованный интернет — даже если они заблокированы вашим провайдером.</p>
|
||||
</div>
|
||||
<div class="glass-card shadow-3d p-8 transition hover:scale-105">
|
||||
<i class="fas fa-comments text-purple-300 text-4xl mb-4"></i>
|
||||
<h3 class="font-bold text-xl mb-2">Личный защищённый мессенджер</h3>
|
||||
<p class="text-gray-300">Собственная платформа для групповых и приватных чатов без риска "утечек". Все данные только у вас!</p>
|
||||
</div>
|
||||
<div class="glass-card shadow-3d p-8 transition hover:scale-105">
|
||||
<i class="fas fa-envelope-open-text text-yellow-300 text-4xl mb-4"></i>
|
||||
<h3 class="font-bold text-xl mb-2">Анонимный email и обмен файлами</h3>
|
||||
<p class="text-gray-300">Создание почтового адреса за 1 клик, обмен файлами без посредников и цензуры.</p>
|
||||
</div>
|
||||
<div class="glass-card shadow-3d p-8 transition hover:scale-105">
|
||||
<i class="fas fa-coins text-emerald-300 text-4xl mb-4"></i>
|
||||
<h3 class="font-bold text-xl mb-2">Изолированный крипто-кошелек</h3>
|
||||
<p class="text-gray-300">Cold-wallet для хранения и операций криптовалютой с максимальной изоляцией от интернет-угроз.</p>
|
||||
</div>
|
||||
<div class="glass-card shadow-3d p-8 transition hover:scale-105">
|
||||
<i class="fas fa-users-cog text-pink-400 text-4xl mb-4"></i>
|
||||
<h3 class="font-bold text-xl mb-2">Платформа для всех устройств</h3>
|
||||
<p class="text-gray-300">BlackBox работает как для одного пользователя, так и для всей семьи или бизнес-группы. Неограниченное количество подключённых устройств.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ВИТРИНА ПРОДУКТОВ -->
|
||||
<section id="products" class="max-w-6xl mx-auto py-12 fade-up" style="--delay:.1s">
|
||||
<h2 class="text-3xl md:text-4xl font-extrabold mb-10 font-montserrat text-center text-cyan-400 px-6">Модельный ряд BlackBox</h2>
|
||||
|
||||
<div class="flipbook-container relative h-96 md:h-[36rem] w-full">
|
||||
<!-- BlackBox VPN (far left) -->
|
||||
<div class="flipbook-page" data-page="1">
|
||||
<div class="glass-card shadow-3d p-6 text-center h-full">
|
||||
<div class="h-40 mb-4 flex items-center justify-center">
|
||||
<img src="/images/bb_on_white-square.webp" alt="BlackBox VPN" class="h-full object-contain rounded-lg">
|
||||
</div>
|
||||
<h3 class="text-xl font-bold mb-3 text-cyan-300 product-title" data-product="BlackBox VPN">BlackBox VPN</h3>
|
||||
<div class="inline-flex items-center px-3 py-1 rounded-full bg-cyan-800/20 text-cyan-200 font-bold mb-3 animate-pulse">
|
||||
<span>99 €</span>
|
||||
</div>
|
||||
<p class="text-gray-300 mb-4 product-description">Создаёт Wi-Fi точку с защищённым VPN. 512 MB RAM.</p>
|
||||
<div class="flex justify-center gap-3">
|
||||
<button class="buy-btn product-buy-btn">Купить</button>
|
||||
<button onclick="showProductDetails(1)" class="details-btn product-details-btn">Подробнее</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- BlackBox Privacy Messenger/Cloud (left) -->
|
||||
<div class="flipbook-page" data-page="2">
|
||||
<div class="glass-card shadow-3d p-6 text-center h-full">
|
||||
<div class="h-40 mb-4 flex items-center justify-center">
|
||||
<img src="/images/bb_on_white-square.webp" alt="BlackBox Privacy" class="h-full object-contain rounded-lg">
|
||||
</div>
|
||||
<h3 class="text-xl font-bold mb-3 text-cyan-300 product-title" data-product="BlackBox Privacy Messenger/Cloud">BlackBox Privacy Messenger/Cloud</h3>
|
||||
<div class="inline-flex items-center px-3 py-1 rounded-full bg-cyan-800/20 text-cyan-200 font-bold mb-3 animate-pulse">
|
||||
<span>199 €</span>
|
||||
</div>
|
||||
<p class="text-gray-300 mb-4 product-description">Встроенный Matrix Messenger или Nextcloud. 1 GB RAM. Полный контроль над вашими данными.</p>
|
||||
<div class="flex justify-center gap-3">
|
||||
<button class="buy-btn product-buy-btn">Купить</button>
|
||||
<button onclick="showProductDetails(2)" class="details-btn product-details-btn">Подробнее</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- BlackBox 4GB (center) -->
|
||||
<div class="flipbook-page active" data-page="3">
|
||||
<div class="glass-card shadow-3d p-6 text-center h-full selected">
|
||||
<div class="h-40 mb-4 flex items-center justify-center">
|
||||
<img src="/images/bb_on_white-square.webp" alt="BlackBox 4GB" class="h-full object-contain rounded-lg">
|
||||
</div>
|
||||
<h3 class="text-xl font-bold mb-3 text-cyan-300 product-title" data-product="BlackBox 4GB">BlackBox 4GB</h3>
|
||||
<div class="inline-flex items-center px-3 py-1 rounded-full bg-cyan-800/20 text-cyan-200 font-bold mb-3 animate-pulse">
|
||||
<span>299 €</span>
|
||||
</div>
|
||||
<p class="text-gray-300 mb-4 product-description">Все функции первых моделей + удалённый рабочий стол (Workspace). 4 GB RAM.</p>
|
||||
<div class="flex justify-center gap-3">
|
||||
<button class="buy-btn product-buy-btn">Купить</button>
|
||||
<button onclick="showProductDetails(3)" class="details-btn product-details-btn">Подробнее</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- BlackBox Workstation (right) -->
|
||||
<div class="flipbook-page" data-page="4">
|
||||
<div class="glass-card shadow-3d p-6 text-center h-full">
|
||||
<div class="h-40 mb-4 flex items-center justify-center">
|
||||
<img src="/images/bb_on_white-square.webp" alt="BlackBox Workstation" class="h-full object-contain rounded-lg">
|
||||
</div>
|
||||
<h3 class="text-xl font-bold mb-3 text-cyan-300 product-title" data-product="BlackBox Workstation">BlackBox Workstation</h3>
|
||||
<div class="inline-flex items-center px-3 py-1 rounded-full bg-cyan-800/20 text-cyan-200 font-bold mb-3 animate-pulse">
|
||||
<span>499 €</span>
|
||||
</div>
|
||||
<p class="text-gray-300 mb-4 product-description">Полноценная рабочая станция. Все функции предыдущих моделей.</p>
|
||||
<div class="flex justify-center gap-3">
|
||||
<button class="buy-btn product-buy-btn">Купить</button>
|
||||
<button onclick="showProductDetails(4)" class="details-btn product-details-btn">Подробнее</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- BlackBox AI (far right) -->
|
||||
<div class="flipbook-page" data-page="5">
|
||||
<div class="glass-card shadow-3d p-6 text-center h-full">
|
||||
<div class="h-40 mb-4 flex items-center justify-center">
|
||||
<img src="/images/bb_on_white-square.webp" alt="BlackBox AI" class="h-full object-contain rounded-lg">
|
||||
</div>
|
||||
<h3 class="text-xl font-bold mb-3 text-cyan-300 product-title" data-product="BlackBox AI">BlackBox AI</h3>
|
||||
<div class="inline-flex items-center px-3 py-1 rounded-full bg-cyan-800/20 text-cyan-200 font-bold mb-3 animate-pulse" style="box-shadow: 0 0 10px 2px rgba(116, 250, 255, 0.3);">
|
||||
<span>2999 €</span>
|
||||
</div>
|
||||
<p class="text-gray-300 mb-4 product-description">Включает все технологии BlackBox. Приватный искусственный интеллект. Максимальная автономность и защита.</p>
|
||||
<div class="flex justify-center gap-3">
|
||||
<button class="buy-btn product-buy-btn">Купить</button>
|
||||
<button onclick="showProductDetails(5)" class="details-btn product-details-btn">Подробнее</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- BlackBox Shop -->
|
||||
<div class="flipbook-page" data-page="6">
|
||||
<div class="glass-card shadow-3d p-6 text-center h-full">
|
||||
<div class="h-40 mb-4 flex items-center justify-center">
|
||||
<img src="/images/bb_on_white-square.webp" alt="BlackBox Shop" class="h-full object-contain rounded-lg">
|
||||
</div>
|
||||
<h3 class="text-xl font-bold mb-3 text-cyan-300 product-title" data-product="BlackBox Shop">BlackBox Shop</h3>
|
||||
<div class="inline-flex items-center px-3 py-1 rounded-full bg-cyan-800/20 text-cyan-200 font-bold mb-3 animate-pulse" style="box-shadow: 0 0 10px 2px rgba(116, 250, 255, 0.3);">
|
||||
<span>от 499 €</span>
|
||||
</div>
|
||||
<p class="text-gray-300 mb-4 product-description">Создание магазина в Telegram через бота. Загрузка товаров, описание, цена. Оплата за товары через криптовалюту. Полная анонимность продавца и покупателя.</p>
|
||||
<div class="flex justify-center gap-3">
|
||||
<button class="buy-btn product-buy-btn">Купить</button>
|
||||
<button onclick="showProductDetails(6)" class="details-btn product-details-btn">Подробнее</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flipbook-indicator-track"></div>
|
||||
<div class="flipbook-indicator" style="transform: translateX(-150%);"></div>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
<!-- PRICING & ORDER -->
|
||||
<section id="order" class="max-w-3xl mx-auto mb-18 py-12 px-6 rounded-3xl glass-card mt-14 text-center border-2 border-cyan-500 relative fade-up" style="--delay:.1s">
|
||||
<div class="absolute top-3 left-1/3 -translate-x-1/2 bg-gradient-to-r from-emerald-500 to-green-500 text-white text-lg font-black rounded-full px-8 py-2 shadow-xl animate-bounce" style="box-shadow: 0 0 15px 5px rgba(16, 185, 129, 0.5);">
|
||||
-30% Только сейчас!
|
||||
</div>
|
||||
<h2 class="text-3xl md:text-4xl font-extrabold mb-4 font-montserrat">Закажите BlackBox WorkStation со скидкой <span class="text-cyan-400">350 USD</span></h2>
|
||||
<p class="text-lg text-gray-200 mb-6 max-w-xl mx-auto">Единоразовая оплата — никаких подписок.<br> Доставка по всему миру. Количество устройств по акции ограничено!</p>
|
||||
<div class="flex flex-wrap items-center justify-center gap-8 mb-7">
|
||||
<div class="text-left bg-gray-800/70 rounded-2xl p-6">
|
||||
<div class="text-2xl">
|
||||
<span class="text-cyan-400 font-bold">149 USD</span>
|
||||
<span class="line-through text-gray-500 ml-2 text-lg">499 USD</span>
|
||||
</div>
|
||||
<div class="text-gray-400 text-xs mt-1">Спец. цена для 10 первых покупателей</div>
|
||||
<div class="mt-3 text-base text-green-300 font-bold">+ Бесплатное обновление в течении года</div>
|
||||
</div>
|
||||
<ul class="text-left space-y-2 text-sm text-gray-200">
|
||||
<li><i class="fas fa-check mr-2 text-cyan-400"></i>Гарантия возврата денег 30 дней</li>
|
||||
<li><i class="fas fa-check mr-2 text-cyan-400"></i>Доставка по всему миру</li>
|
||||
<li><i class="fas fa-check mr-2 text-cyan-400"></i>Персональная поддержка</li>
|
||||
</ul>
|
||||
</div>
|
||||
<a href="https://bbox.rocks/#order" target="_blank" class="pulse-cta px-12 py-4 rounded-xl text-white font-extrabold font-montserrat bg-gradient-to-r from-cyan-400 via-emerald-400 to-cyan-500 shadow-3d text-2xl hover:bg-cyan-400 transform transition">Заказать</a>
|
||||
<div class="mt-6 text-gray-300 text-base">Действительно до <span class="inline-block text-cyan-300 rounded px-2 py-1 font-bold bg-cyan-800/30">1 июня 2025</span> или пока не кончится запас.</div>
|
||||
</section>
|
||||
|
||||
<!-- PRODUCT DETAILS MODAL -->
|
||||
<div id="productModal" class="fixed inset-0 bg-black/80 z-50 flex items-center justify-center hidden">
|
||||
<div class="modal-content relative">
|
||||
<span class="modal-close" onclick="hideProductDetails()">×</span>
|
||||
<h3 id="modalTitle" class="text-2xl font-bold mb-4 text-cyan-400"></h3>
|
||||
<p id="modalDescription" class="text-gray-300 mb-6"></p>
|
||||
<button class="w-full py-3 buy-btn text-lg modal-buy-btn">Купить сейчас</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- TESTIMONIALS -->
|
||||
<section id="testimonials" class="max-w-6xl mx-auto py-11 px-6 mt-4 fade-up" style="--delay:.1s">
|
||||
<h2 class="text-3xl font-extrabold text-cyan-400 mb-7 text-center">Что говорят наши пользователи?</h2>
|
||||
<div class="grid md:grid-cols-3 gap-7 lg:gap-12">
|
||||
<div class="glass-card p-7 shadow-3d flex flex-col items-center text-center">
|
||||
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Testimonial" class="w-14 h-14 rounded-full mb-3 shadow-lg">
|
||||
<div class="mb-2 font-bold text-lg text-emerald-300">Андрей, стартапер</div>
|
||||
<div class="text-gray-300 italic">"BlackBox — первый гаджет, которому я доверяю свои личные данные. Никаких логов, быстрая работа, супер для работы из любой точки мира."</div>
|
||||
</div>
|
||||
<div class="glass-card p-7 shadow-3d flex flex-col items-center text-center border-2 border-cyan-400">
|
||||
<img src="https://randomuser.me/api/portraits/women/43.jpg" alt="Testimonial" class="w-14 h-14 rounded-full mb-3 shadow-lg">
|
||||
<div class="mb-2 font-bold text-lg text-cyan-300">Мария, мама</div>
|
||||
<div class="text-gray-300 italic">"Для нас BlackBox — гарантия интернет-безопасности всей семьи. Даже дети могут пользоваться, ничего не настраивая."</div>
|
||||
</div>
|
||||
<div class="glass-card p-7 shadow-3d flex flex-col items-center text-center">
|
||||
<img src="https://randomuser.me/api/portraits/men/67.jpg" alt="Testimonial" class="w-14 h-14 rounded-full mb-3 shadow-lg">
|
||||
<div class="mb-2 font-bold text-lg text-purple-300">Влад, программист</div>
|
||||
<div class="text-gray-300 italic">"Linux, опенсорс, анонимность — все работает быстро и продуманно. Отличная альтернатива VPN-сервисам и роутерам."</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- FOOTER -->
|
||||
<footer class="w-full mt-10 pt-7 pb-8 bg-black/60 flex flex-col items-center text-center text-gray-500 text-sm">
|
||||
<img src="/images/logo.webp" alt="bbox logo" class="w-10 h-10 mx-auto mb-3">
|
||||
<div class="mb-2">
|
||||
<span class="font-montserrat font-bold text-cyan-400 text-lg">BlackBox</span> © 2022-2025. Все права защищены.<br>
|
||||
</div>
|
||||
<div class="flex justify-center space-x-6 mb-4">
|
||||
<a href="https://t.me/bbox_wtf" target="_blank" class="text-cyan-300 hover:text-cyan-400 transition-colors" aria-label="Наш канал в Telegram">
|
||||
<i class="fab fa-telegram text-2xl"></i> Telegram
|
||||
</a>
|
||||
<a href="https://vk.com/bbox_wtf" target="_blank" class="text-cyan-300 hover:text-cyan-400 transition-colors" aria-label="Наша группа ВКонтакте">
|
||||
<i class="fab fa-vk text-2xl"></i> ВКонтакте
|
||||
</a>
|
||||
</div>
|
||||
<div>
|
||||
<a href="mailto:support@bbox.wtf" class="hover:underline text-cyan-300">Поддержка</a>
|
||||
|
|
||||
<a href="/pages/faq.html" class="hover:underline text-cyan-300">FAQ</a>
|
||||
|
|
||||
<a href="https://bbox.rocks" class="hover:underline">Старый не поддерживаемый сайт</a>
|
||||
</div>
|
||||
<div class="mt-4">
|
||||
<span class="text-gray-400">bbox.wtf — лендинг нового поколения: BlackBox — не просто VPN, это экосистема и ваша цифровая приватность.</span>
|
||||
</div>
|
||||
</footer>
|
||||
<script src="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.5.2/js/all.min.js"></script>
|
||||
<script src="/js/features.js"></script>
|
||||
<script src="/js/flipbook.js"></script>
|
||||
<script src="/js/fade-up.js"></script>
|
||||
<!-- Yandex.Metrika counter -->
|
||||
<script type="text/javascript" >
|
||||
(function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)};
|
||||
m[i].l=1*new Date();
|
||||
for (var j = 0; j < document.scripts.length; j++) {if (document.scripts[j].src === r) { return; }}
|
||||
k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)})
|
||||
(window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym");
|
||||
|
||||
ym(55764994, "init", {
|
||||
clickmap:true,
|
||||
trackLinks:true,
|
||||
accurateTrackBounce:true,
|
||||
webvisor:true,
|
||||
trackHash:true
|
||||
});
|
||||
</script>
|
||||
<noscript><div><img src="https://mc.yandex.ru/watch/55764994" style="position:absolute; left:-9999px;" alt="" /></div></noscript>
|
||||
<!-- /Yandex.Metrika counter -->
|
||||
<script src="/js/lang-detect-redirect.js"></script>
|
||||
<script src="/js/language-switcher.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
58
lang/ru/json/ru.json
Normal file
58
lang/ru/json/ru.json
Normal file
@@ -0,0 +1,58 @@
|
||||
{
|
||||
"features": [
|
||||
{
|
||||
"name": "VPN-туннелирование",
|
||||
"hint": "VPN — только начало для BlackBox."
|
||||
},
|
||||
{
|
||||
"name": "Безопасный браузинг",
|
||||
"hint": "Браузер запускается на устройстве BlackBox, логи не пишутся на ваш ПК."
|
||||
},
|
||||
{
|
||||
"name": "Анонимный Email и мессенджер",
|
||||
"hint": "Переписка хранится ТОЛЬКО у вас, end-to-end!"
|
||||
},
|
||||
{
|
||||
"name": "Децентрализованный хостинг",
|
||||
"hint": "Можно создать свой сайт или хранить файлы — без цензуры."
|
||||
},
|
||||
{
|
||||
"name": "Анонимная передача файлов",
|
||||
"hint": "Передавайте документы без посредников."
|
||||
},
|
||||
{
|
||||
"name": "Крипто кошелек",
|
||||
"hint": "Крипто-функционал в отдельном изолированном контейнере."
|
||||
},
|
||||
{
|
||||
"name": "Нет логов/всё локально",
|
||||
"hint": "Никогда нет центра хранения логов — вы держите приватность."
|
||||
},
|
||||
{
|
||||
"name": "1 устройство — вся семья",
|
||||
"hint": "Доступ к приватности для всех (Wi-Fi/LAN, без ограничений)."
|
||||
}
|
||||
],
|
||||
"products": [
|
||||
{
|
||||
"name": "BlackBox"
|
||||
},
|
||||
{
|
||||
"name": "VPN-Роутер"
|
||||
},
|
||||
{
|
||||
"name": "VPN-сервис"
|
||||
}
|
||||
],
|
||||
"product_details": {
|
||||
"BlackBox VPN": "Создаёт Wi-Fi точку с защищённым VPN. 512 MB RAM.",
|
||||
"BlackBox Privacy Messenger/Cloud": "Встроенный Matrix Messenger или Nextcloud. 1 GB RAM. Полный контроль над вашими данными.",
|
||||
"BlackBox 4GB": "Все функции первых моделей + удалённый рабочий стол (Workspace). 4 GB RAM.",
|
||||
"BlackBox Workstation": "Полноценная рабочая станция. Все функции предыдущих моделей.",
|
||||
"BlackBox AI": "Включает все технологии BlackBox. Приватный искусственный интеллект. Максимальная автономность и защита.",
|
||||
"BlackBox Shop": "Создание магазина в Telegram через бота. Загрузка товаров, описание, цена. Оплата за товары через криптовалюту. Полная анонимность продавца и покупателя."
|
||||
},
|
||||
"buy_button": "Купить",
|
||||
"details_button": "Подробнее",
|
||||
"buy_now_button": "Купить сейчас"
|
||||
}
|
||||
283
lang/ru/pages/faq.html
Normal file
283
lang/ru/pages/faq.html
Normal file
@@ -0,0 +1,283 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Blackbox - ЧаВо</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, minimum-scale=0.5, viewport-fit=cover">
|
||||
<meta name="description" content="Часто задаваемые вопросы о Blackbox.">
|
||||
<meta name="keywords" content="Blackbox, FAQ, ЧаВо, вопросы, ответы, анонимность, приватность">
|
||||
<link href="/css/tailwind.min.css" rel="stylesheet">
|
||||
<link href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.5.2/css/all.min.css" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Montserrat+Alternates:wght@700;500&family=Montserrat:wght@700;500;400&family=Inter:wght@400;600&display=swap" rel="stylesheet">
|
||||
<script src="/js/echarts.min.js"></script>
|
||||
<link rel="stylesheet" href="/css/style.css">
|
||||
<!-- Open Graph Meta Tags for Social Media -->
|
||||
<meta property="og:title" content="Blackbox - ЧаВо">
|
||||
<meta property="og:description" content="Часто задаваемые вопросы о Blackbox.">
|
||||
<meta property="og:image" content="/images/scales.webp">
|
||||
<meta property="og:url" content="https://bbox.wtf/pages/faq.html">
|
||||
<meta property="og:type" content="website">
|
||||
|
||||
<!-- Twitter Card Meta Tags -->
|
||||
<meta name="twitter:card" content="summary_large_image">
|
||||
<meta name="twitter:title" content="Blackbox - ЧаВо">
|
||||
<meta name="twitter:description" content="Часто задаваемые вопросы о Blackbox.">
|
||||
<meta name="twitter:image" content="/images/scales.webp">
|
||||
</head>
|
||||
<body class="gradient-bg overflow-x-hidden">
|
||||
|
||||
<!-- ШАПКА -->
|
||||
<header class="flex flex-wrap justify-between items-center px-5 md:px-10 py-7 bg-transparent z-10 relative">
|
||||
<a href="/ru/" class="flex items-center space-x-4">
|
||||
<img src="/images/logo.webp" alt="bbox logo" class="w-14 h-14 rounded-lg shadow-lg">
|
||||
<span class="font-montserrat font-bold text-2xl text-cyan-400 tracking-widest">BlackBox</span>
|
||||
</a>
|
||||
<nav class="hidden md:flex space-x-8 text-lg font-montserrat font-semibold">
|
||||
<a href="/ru/#features" class="hover:text-cyan-400 transition-colors">Особенности</a>
|
||||
<a href="/ru/#supercompare" class="hover:text-cyan-400 transition-colors">Сравнение</a>
|
||||
<a href="/ru/#pricing" class="hover:text-cyan-400 transition-colors">Цена</a>
|
||||
<a href="/ru/#testimonials" class="hover:text-cyan-400 transition-colors">Отзывы</a>
|
||||
</nav>
|
||||
<a href="#order" class="pulse-cta rounded-xl px-7 py-3 bg-emerald-500 text-white text-lg font-bold shadow-lg hover:bg-emerald-400 transition-all duration-300 transform hover:scale-105" style="font-family: 'Montserrat', sans-serif; box-shadow: 0 0 15px 5px rgba(16, 185, 129, 0.5);">
|
||||
Заказать сейчас
|
||||
<i class="fas fa-lock ml-2"></i>
|
||||
</a>
|
||||
</header>
|
||||
|
||||
<main class="max-w-4xl mx-auto py-12 px-5">
|
||||
<h1 class="text-4xl font-bold font-montserrat text-cyan-400 mb-8 text-center">Blackbox - ЧаВо</h1>
|
||||
|
||||
<section class="glass-card shadow-3d p-8">
|
||||
<h3 class="text-2xl font-bold mb-6 text-white">Вопросы и ответы</h3>
|
||||
|
||||
<div class="faq-item mb-8">
|
||||
<div class="faq-question cursor-pointer">
|
||||
<h4 class="text-xl font-semibold mb-3 text-cyan-300">1. Как стать анонимным с помощью Blackbox?</h4>
|
||||
</div>
|
||||
<div class="faq-answer text-gray-300 overflow-hidden max-h-0 transition-max-height duration-500 ease-in-out">
|
||||
<p class="mb-4">Blackbox дает возможность пользоваться всеми преимуществами анонимности в 4 простых шага:</p>
|
||||
<ol class="list-decimal list-inside text-gray-300 space-y-2">
|
||||
<li><strong>Подключите Blackbox к источнику питанию</strong>.</li>
|
||||
<li><strong>Подключитесь к Blackbox через Wi-Fi</strong>.</li>
|
||||
<li><strong>Подключите Blackbox к Интернету</strong>.</li>
|
||||
<li><strong>Используйте Интернет, оставаясь анонимным двумя способами</strong>:
|
||||
<ul class="list-disc list-inside ml-5 space-y-1">
|
||||
<li>используя Blackbox как рутер</li>
|
||||
<li>используя Blackbox как рабочую станцию</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="faq-item mb-8">
|
||||
<div class="faq-question cursor-pointer">
|
||||
<h4 class="text-xl font-semibold mb-3 text-cyan-300">2. Что такое Alpha версия?</h4>
|
||||
</div>
|
||||
<div class="faq-answer text-gray-300 overflow-hidden max-h-0 transition-max-height duration-500 ease-in-out">
|
||||
<p>Blackbox Alpha version - это промежуточная тестовая версия продукта перед релизом, которая позволяет начать пользоваться реализованными функциями уже сейчас, не дожидаясь официального релиза:</p>
|
||||
<ul class="list-disc list-inside text-gray-300 space-y-2 mt-2">
|
||||
<li>безопасный браузинг</li>
|
||||
<li>безопасный просмотр даркнета</li>
|
||||
<li>VPN сервер</li>
|
||||
<li>анонимный e-mail</li>
|
||||
<li>доставка обновлений</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="faq-item mb-8">
|
||||
<div class="faq-question cursor-pointer">
|
||||
<h4 class="text-xl font-semibold mb-3 text-cyan-300">3. Как заказать Blackbox?</h4>
|
||||
</div>
|
||||
<div class="faq-answer text-gray-300 overflow-hidden max-h-0 transition-max-height duration-500 ease-in-out">
|
||||
<p>Заказать Blackbox можно онлайн <a href="https://bbox.wtf/ru/#order" class="text-cyan-400 hover:underline">на нашем сайте</a> и оплатить любой кредитной картой через систему Stripe, с помощью PayPal или криптовалюты.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="faq-item mb-8">
|
||||
<div class="faq-question cursor-pointer">
|
||||
<h4 class="text-xl font-semibold mb-3 text-cyan-300">4. Как происходит доставка?</h4>
|
||||
</div>
|
||||
<div class="faq-answer text-gray-300 overflow-hidden max-h-0 transition-max-height duration-500 ease-in-out">
|
||||
<p>Blackbox производится партиями по 100 шт. Заказ деталей и начало производства происходит после комплектации партии, но не чаще, чем 1 раз в неделю. Blackbox будет произведен и доставлен в течении 2-ух месяцев, после начала производства. Доставка Blackbox включена в стоимость.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="faq-item mb-8">
|
||||
<div class="faq-question cursor-pointer">
|
||||
<h4 class="text-xl font-semibold mb-3 text-cyan-300">5. Каковы технические характеристики Blackbox?</h4>
|
||||
</div>
|
||||
<div class="faq-answer text-gray-300 overflow-hidden max-h-0 transition-max-height duration-500 ease-in-out">
|
||||
<p class="mb-4"><strong>Комплектация:</strong></p>
|
||||
<ul class="list-disc list-inside text-gray-300 space-y-2 ml-5">
|
||||
<li>CPU H2 Quad-core Cortex-A7 H.265/HEVC 1080P</li>
|
||||
<li>MB Orange PI zero 512MB</li>
|
||||
<li>GPU Mali400MP2 GPU @600MHz Supports OpenGL ES 2.0</li>
|
||||
<li>Memory (SDRAM) 512MB DDR3 SDRAM(Share with GPU)</li>
|
||||
<li>SSD Storage Sandisk xD 16Gb Flash</li>
|
||||
<li>Onboard Network 10/100M Ethernet RJ45 POE is default off.</li>
|
||||
<li>Outbound WIFI XR819, IEEE 802.11 b/g/n</li>
|
||||
<li>Inbound WIFI Malloom Mini USB 2.0 802.11n 150Mbps</li>
|
||||
<li>1x USB 2.0 Ports</li>
|
||||
<li>Weight 60g</li>
|
||||
<li>Dimensions 55mm x 55mm x 28mm</li>
|
||||
</ul>
|
||||
<p class="mb-4 mt-4"><strong>Программное обеспечение:</strong></p>
|
||||
<ul class="list-disc list-inside text-gray-300 space-y-2 ml-5">
|
||||
<li>Armbian Jessie 5.38</li>
|
||||
<li>TOR Source 0.4.1.5</li>
|
||||
<li>OpenVPN 2.4.7 Lighthttpd 1.4.54 / NGINX 1.17.3</li>
|
||||
<li>Ejabberd 2.1.11</li>
|
||||
<li>Encription methods AES2, OTR, PGP, SSH512, SSL</li>
|
||||
</ul>
|
||||
<p class="mb-4 mt-4"><strong>Пре-конфигурация:</strong></p>
|
||||
<ul class="list-disc list-inside text-gray-300 space-y-2 ml-5">
|
||||
<li>OPSEC</li>
|
||||
<li>Chat/Call server</li>
|
||||
<li>TOR Settings</li>
|
||||
<li>Blackbox openvpn network settings</li>
|
||||
<li>Logs and data cleaner after reboot or on timer</li>
|
||||
<li>TOR Web Interface</li>
|
||||
<li>All encryptions</li>
|
||||
<li>LLMP(Linux+Lighttpd+MiraDB+php7.3)</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="faq-item mb-8">
|
||||
<div class="faq-question cursor-pointer">
|
||||
<h4 class="text-xl font-semibold mb-3 text-cyan-300">6. В каких случаях происходит возврат средств?</h4>
|
||||
</div>
|
||||
<div class="faq-answer text-gray-300 overflow-hidden max-h-0 transition-max-height duration-500 ease-in-out">
|
||||
<p>Мы гарантируем полный возврат средств, если доставленное устройство не отвечает заявленным техническим характеристикам, а также в случае задержки поставки Blackbox более чем на 1 месяц от обещанной даты доставки.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="faq-item mb-8">
|
||||
<div class="faq-question cursor-pointer">
|
||||
<h4 class="text-xl font-semibold mb-3 text-cyan-300">7. Предоставляется ли на Blackbox гарантия?</h4>
|
||||
</div>
|
||||
<div class="faq-answer text-gray-300 overflow-hidden max-h-0 transition-max-height duration-500 ease-in-out">
|
||||
<p>На все устройства Blackbox действует гарантия - 1 год. Если в течение года использования Blackbox возникают технические неполадки, вы можете вернуть устройство и получить бесплатно новое взамен.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="faq-item mb-8">
|
||||
<div class="faq-question cursor-pointer">
|
||||
<h4 class="text-xl font-semibold mb-3 text-cyan-300">8. Можно ли оплатить Blackbox криптовалютой?</h4>
|
||||
</div>
|
||||
<div class="faq-answer text-gray-300 overflow-hidden max-h-0 transition-max-height duration-500 ease-in-out">
|
||||
<p>В данный момент вы можете оплатить заказ криптовалютой, связавшись с разработчиками в нашем <a href="https://t.me/joinchat/AAAAAEzMDw32y4NVLkCgqw" class="text-cyan-400 hover:underline">Telegram Community</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="faq-item mb-8">
|
||||
<div class="faq-question cursor-pointer">
|
||||
<h4 class="text-xl font-semibold mb-3 text-cyan-300">9. Как Blackbox влияет на защиту анонимности и конфиденциальности в сети?</h4>
|
||||
</div>
|
||||
<div class="faq-answer text-gray-300 overflow-hidden max-h-0 transition-max-height duration-500 ease-in-out">
|
||||
<p>Blackbox обеспечивает анонимность по всем необходимым критериям (кто делает? что делает? откуда делает?) и на всех технологических уровнях: используемых программ, операционной системы и самого устройства.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="faq-item mb-8">
|
||||
<div class="faq-question cursor-pointer">
|
||||
<h4 class="text-xl font-semibold mb-3 text-cyan-300">10. Как убедиться в своей анонимности?</h4>
|
||||
</div>
|
||||
<div class="faq-answer text-gray-300 overflow-hidden max-h-0 transition-max-height duration-500 ease-in-out">
|
||||
<p>В отличие от программ с закрытым исходным кодом и сервисам, к серверам которых у вас нет доступа, Blackbox - это сервер, который находится у вас дома, и имеет архитектуру с открытым исходным кодом. Любой человек, который разбирается в кибер-безопасности, может удостовериться в его эффективности для обеспечения анонимности и изменить его настройки.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="faq-item">
|
||||
<div class="faq-question cursor-pointer">
|
||||
<h4 class="text-xl font-semibold mb-3 text-cyan-300">11. Замедляет ли Blackbox скорость работы Интернета?</h4>
|
||||
</div>
|
||||
<div class="faq-answer text-gray-300 overflow-hidden max-h-0 transition-max-height duration-500 ease-in-out">
|
||||
<p>Да, замедляет. Скорость соединения через Blackbox сокращается до 20-30 Мбит/c. Blackbox не рассчитан на постоянное использование Интернета для решения всех возникающих задач. Этой скорости достаточно, если подключаться к Wi-Fi, который раздает Blackbox, только для решения задач, требующих обеспечения анонимности. Скорость безопасной сети Blackbox в 6 раз выше чем у TOR</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer class="w-full mt-10 pt-7 pb-8 bg-black/60 flex flex-col items-center text-center text-gray-500 text-sm">
|
||||
<img src="/images/logo.webp" alt="bbox logo" class="w-10 h-10 mx-auto mb-3">
|
||||
<div class="mb-2">
|
||||
<span class="font-montserrat font-bold text-cyan-400 text-lg">BlackBox</span> © 2022-2025. Все права защищены.<br>
|
||||
</div>
|
||||
<div class="flex justify-center space-x-6 mb-4">
|
||||
<a href="https://t.me/bbox_wtf" target="_blank" class="text-cyan-300 hover:text-cyan-400 transition-colors" aria-label="Наш канал в Telegram">
|
||||
<i class="fab fa-telegram text-2xl"></i> Telegram
|
||||
</a>
|
||||
<a href="https://vk.com/bbox_wtf" target="_blank" class="text-cyan-300 hover:text-cyan-400 transition-colors" aria-label="Наша группа ВКонтакте">
|
||||
<i class="fab fa-vk text-2xl"></i> ВКонтакте
|
||||
</a>
|
||||
</div>
|
||||
<div>
|
||||
<a href="mailto:support@bbox.wtf" class="hover:underline text-cyan-300">Поддержка</a>
|
||||
|
|
||||
<a href="/pages/faq.html" class="hover:underline text-cyan-300">FAQ</a>
|
||||
|
|
||||
<a href="https://bbox.rocks" class="hover:underline">Старый не поддерживаемый сайт</a>
|
||||
</div>
|
||||
<div class="mt-4">
|
||||
<span class="text-gray-400">bbox.wtf — лендинг нового поколения: BlackBox — не просто VPN, это экосистема и ваша цифровая приватность.</span>
|
||||
</div>
|
||||
</footer>
|
||||
<script src="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.5.2/js/all.min.js"></script>
|
||||
<script src="/js/features.js"></script>
|
||||
<script src="/js/flipbook.js"></script>
|
||||
<script src="/js/fade-up.js"></script>
|
||||
<!-- Yandex.Metrika counter -->
|
||||
<script type="text/javascript" >
|
||||
(function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)};
|
||||
m[i].l=1*new Date();
|
||||
for (var j = 0; j < document.scripts.length; j++) {if (document.scripts[j].src === r) { return; }}
|
||||
k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)})
|
||||
(window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym");
|
||||
|
||||
ym(55764994, "init", {
|
||||
clickmap:true,
|
||||
trackLinks:true,
|
||||
accurateTrackBounce:true,
|
||||
webvisor:true,
|
||||
trackHash:true
|
||||
});
|
||||
</script>
|
||||
<noscript><div><img src="https://mc.yandex.ru/watch/55764994" style="position:absolute; left:-9999px;" alt="" /></div></noscript>
|
||||
<!-- /Yandex.Metrika counter -->
|
||||
<script src="/js/lang-detect-redirect.js"></script>
|
||||
<script src="/js/language-switcher.js"></script>
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const faqQuestions = document.querySelectorAll('.faq-question');
|
||||
|
||||
faqQuestions.forEach(question => {
|
||||
question.addEventListener('click', () => {
|
||||
const faqItem = question.closest('.faq-item');
|
||||
const answer = faqItem.querySelector('.faq-answer');
|
||||
const isOpen = faqItem.classList.contains('open');
|
||||
|
||||
// Close all other open FAQ items
|
||||
document.querySelectorAll('.faq-item.open').forEach(openItem => {
|
||||
if (openItem !== faqItem) {
|
||||
openItem.classList.remove('open');
|
||||
openItem.querySelector('.faq-answer').style.maxHeight = null;
|
||||
}
|
||||
});
|
||||
|
||||
// Toggle the clicked FAQ item
|
||||
if (isOpen) {
|
||||
faqItem.classList.remove('open');
|
||||
answer.style.maxHeight = null;
|
||||
} else {
|
||||
faqItem.classList.add('open');
|
||||
answer.style.maxHeight = answer.scrollHeight + 'px';
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
20
nginx.conf
Normal file
20
nginx.conf
Normal file
@@ -0,0 +1,20 @@
|
||||
server {
|
||||
listen 80;
|
||||
server_name localhost;
|
||||
|
||||
root /usr/share/nginx/html;
|
||||
index index.html;
|
||||
|
||||
location / {
|
||||
rewrite ^/en/(.*)$ /lang/en/$1 last;
|
||||
rewrite ^/ru/(.*)$ /lang/ru/$1 last;
|
||||
rewrite ^/es/(.*)$ /lang/es/$1 last;
|
||||
rewrite ^/$ /en/ last;
|
||||
}
|
||||
|
||||
location ~* \.(eot|ttf|woff|woff2)$ {
|
||||
add_header Access-Control-Allow-Origin *;
|
||||
expires 1y;
|
||||
add_header Cache-Control "public";
|
||||
}
|
||||
}
|
||||
313
pages/faq.html
Normal file
313
pages/faq.html
Normal file
@@ -0,0 +1,313 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Blackbox - ЧаВо</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, minimum-scale=0.5, viewport-fit=cover">
|
||||
<meta name="description" content="Часто задаваемые вопросы о Blackbox.">
|
||||
<meta name="keywords" content="Blackbox, FAQ, ЧаВо, вопросы, ответы, анонимность, приватность">
|
||||
<link href="/css/tailwind.min.css" rel="stylesheet">
|
||||
<link href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.5.2/css/all.min.css" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Montserrat+Alternates:wght@700;500&family=Montserrat:wght@700;500;400&family=Inter:wght@400;600&display=swap" rel="stylesheet">
|
||||
<script src="/js/echarts.min.js"></script>
|
||||
<link rel="stylesheet" href="/css/style.css">
|
||||
<!-- Open Graph Meta Tags for Social Media -->
|
||||
<meta property="og:title" content="Blackbox - ЧаВо">
|
||||
<meta property="og:description" content="Часто задаваемые вопросы о Blackbox.">
|
||||
<meta property="og:image" content="/images/scales.webp">
|
||||
<meta property="og:url" content="https://bbox.wtf/pages/faq.html">
|
||||
<meta property="og:type" content="website">
|
||||
|
||||
<!-- Twitter Card Meta Tags -->
|
||||
<meta name="twitter:card" content="summary_large_image">
|
||||
<meta name="twitter:title" content="Blackbox - ЧаВо">
|
||||
<meta name="twitter:description" content="Часто задаваемые вопросы о Blackbox.">
|
||||
<meta name="twitter:image" content="/images/scales.webp">
|
||||
</head>
|
||||
<body class="gradient-bg overflow-x-hidden">
|
||||
|
||||
<!-- ШАПКА -->
|
||||
<header class="flex flex-wrap justify-between items-center px-5 md:px-10 py-7 bg-transparent z-10 relative">
|
||||
<a href="/ru/" class="flex items-center space-x-4">
|
||||
<img src="/images/logo.webp" alt="bbox logo" class="w-14 h-14 rounded-lg shadow-lg">
|
||||
<span class="font-montserrat font-bold text-2xl text-cyan-400 tracking-widest">BlackBox</span>
|
||||
</a>
|
||||
<nav class="hidden md:flex space-x-8 text-lg font-montserrat font-semibold">
|
||||
<a href="/ru/#features" class="hover:text-cyan-400 transition-colors">Особенности</a>
|
||||
<a href="/ru/#supercompare" class="hover:text-cyan-400 transition-colors">Сравнение</a>
|
||||
<a href="/ru/#pricing" class="hover:text-cyan-400 transition-colors">Цена</a>
|
||||
<a href="/ru/#testimonials" class="hover:text-cyan-400 transition-colors">Отзывы</a>
|
||||
</nav>
|
||||
<a href="#order" class="pulse-cta rounded-xl px-7 py-3 bg-emerald-500 text-white text-lg font-bold shadow-lg hover:bg-emerald-400 transition-all duration-300 transform hover:scale-105" style="font-family: 'Montserrat', sans-serif; box-shadow: 0 0 15px 5px rgba(16, 185, 129, 0.5);">
|
||||
Заказать сейчас
|
||||
<i class="fas fa-lock ml-2"></i>
|
||||
</a>
|
||||
</header>
|
||||
|
||||
<main class="max-w-4xl mx-auto py-12 px-5">
|
||||
<h1 class="text-4xl font-bold font-montserrat text-cyan-400 mb-8 text-center">Blackbox - ЧаВо</h1>
|
||||
|
||||
<section class="glass-card shadow-3d p-8">
|
||||
<h3 class="text-2xl font-bold mb-6 text-white">Вопросы и ответы</h3>
|
||||
|
||||
<div class="faq-item mb-8">
|
||||
<div class="faq-question cursor-pointer">
|
||||
<h4 class="text-xl font-semibold mb-3 text-cyan-300">1. Как стать анонимным с помощью Blackbox?</h4>
|
||||
</div>
|
||||
<div class="faq-answer text-gray-300 overflow-hidden max-h-0 transition-max-height duration-500 ease-in-out">
|
||||
<p class="mb-4">Blackbox дает возможность пользоваться всеми преимуществами анонимности в 4 простых шага:</p>
|
||||
<ol class="list-decimal list-inside text-gray-300 space-y-2">
|
||||
<li><strong>Подключите Blackbox к источнику питанию</strong>.</li>
|
||||
<li><strong>Подключитесь к Blackbox через Wi-Fi</strong>.</li>
|
||||
<li><strong>Подключите Blackbox к Интернету</strong>.</li>
|
||||
<li><strong>Используйте Интернет, оставаясь анонимным двумя способами</strong>:
|
||||
<ul class="list-disc list-inside ml-5 space-y-1">
|
||||
<li>используя Blackbox как рутер</li>
|
||||
<li>используя Blackbox как рабочую станцию</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="faq-item mb-8">
|
||||
<div class="faq-question cursor-pointer">
|
||||
<h4 class="text-xl font-semibold mb-3 text-cyan-300">2. Что такое Alpha версия?</h4>
|
||||
</div>
|
||||
<div class="faq-answer text-gray-300 overflow-hidden max-h-0 transition-max-height duration-500 ease-in-out">
|
||||
<p>Blackbox Alpha version - это промежуточная тестовая версия продукта перед релизом, которая позволяет начать пользоваться реализованными функциями уже сейчас, не дожидаясь официального релиза:</p>
|
||||
<ul class="list-disc list-inside text-gray-300 space-y-2 mt-2">
|
||||
<li>безопасный браузинг</li>
|
||||
<li>безопасный просмотр даркнета</li>
|
||||
<li>VPN сервер</li>
|
||||
<li>анонимный e-mail</li>
|
||||
<li>доставка обновлений</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="faq-item mb-8">
|
||||
<div class="faq-question cursor-pointer">
|
||||
<h4 class="text-xl font-semibold mb-3 text-cyan-300">3. Как заказать Blackbox?</h4>
|
||||
</div>
|
||||
<div class="faq-answer text-gray-300 overflow-hidden max-h-0 transition-max-height duration-500 ease-in-out">
|
||||
<p>Заказать Blackbox можно онлайн <a href="https://bbox.wtf/ru/#order" class="text-cyan-400 hover:underline">на нашем сайте</a> и оплатить любой кредитной картой через систему Stripe, с помощью PayPal или криптовалюты.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="faq-item mb-8">
|
||||
<div class="faq-question cursor-pointer">
|
||||
<h4 class="text-xl font-semibold mb-3 text-cyan-300">4. Как происходит доставка?</h4>
|
||||
</div>
|
||||
<div class="faq-answer text-gray-300 overflow-hidden max-h-0 transition-max-height duration-500 ease-in-out">
|
||||
<p>Blackbox производится партиями по 100 шт. Заказ деталей и начало производства происходит после комплектации партии, но не чаще, чем 1 раз в неделю. Blackbox будет произведен и доставлен в течении 2-ух месяцев, после начала производства. Доставка Blackbox включена в стоимость.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="faq-item mb-8">
|
||||
<div class="faq-question cursor-pointer">
|
||||
<h4 class="text-xl font-semibold mb-3 text-cyan-300">5. Каковы технические характеристики Blackbox?</h4>
|
||||
</div>
|
||||
<div class="faq-answer text-gray-300 overflow-hidden max-h-0 transition-max-height duration-500 ease-in-out">
|
||||
<p class="mb-4"><strong>Комплектация:</strong></p>
|
||||
<ul class="list-disc list-inside text-gray-300 space-y-2 ml-5">
|
||||
<li>CPU H2 Quad-core Cortex-A7 H.265/HEVC 1080P</li>
|
||||
<li>MB Orange PI zero 512MB</li>
|
||||
<li>GPU Mali400MP2 GPU @600MHz Supports OpenGL ES 2.0</li>
|
||||
<li>Memory (SDRAM) 512MB DDR3 SDRAM(Share with GPU)</li>
|
||||
<li>SSD Storage Sandisk xD 16Gb Flash</li>
|
||||
<li>Onboard Network 10/100M Ethernet RJ45 POE is default off.</li>
|
||||
<li>Outbound WIFI XR819, IEEE 802.11 b/g/n</li>
|
||||
<li>Inbound WIFI Malloom Mini USB 2.0 802.11n 150Mbps</li>
|
||||
<li>1x USB 2.0 Ports</li>
|
||||
<li>Weight 60g</li>
|
||||
<li>Dimensions 55mm x 55mm x 28mm</li>
|
||||
</ul>
|
||||
<p class="mb-4 mt-4"><strong>Программное обеспечение:</strong></p>
|
||||
<ul class="list-disc list-inside text-gray-300 space-y-2 ml-5">
|
||||
<li>Armbian Jessie 5.38</li>
|
||||
<li>TOR Source 0.4.1.5</li>
|
||||
<li>OpenVPN 2.4.7 Lighthttpd 1.4.54 / NGINX 1.17.3</li>
|
||||
<li>Ejabberd 2.1.11</li>
|
||||
<li>Encription methods AES2, OTR, PGP, SSH512, SSL</li>
|
||||
</ul>
|
||||
<p class="mb-4 mt-4"><strong>Пре-конфигурация:</strong></p>
|
||||
<ul class="list-disc list-inside text-gray-300 space-y-2 ml-5">
|
||||
<li>OPSEC</li>
|
||||
<li>Chat/Call server</li>
|
||||
<li>TOR Settings</li>
|
||||
<li>Blackbox openvpn network settings</li>
|
||||
<li>Logs and data cleaner after reboot or on timer</li>
|
||||
<li>TOR Web Interface</li>
|
||||
<li>All encryptions</li>
|
||||
<li>LLMP(Linux+Lighttpd+MiraDB+php7.3)</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="faq-item mb-8">
|
||||
<div class="faq-question cursor-pointer">
|
||||
<h4 class="text-xl font-semibold mb-3 text-cyan-300">6. В каких случаях происходит возврат средств?</h4>
|
||||
</div>
|
||||
<div class="faq-answer text-gray-300 overflow-hidden max-h-0 transition-max-height duration-500 ease-in-out">
|
||||
<p>Мы гарантируем полный возврат средств, если доставленное устройство не отвечает заявленным техническим характеристикам, а также в случае задержки поставки Blackbox более чем на 1 месяц от обещанной даты доставки.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="faq-item mb-8">
|
||||
<div class="faq-question cursor-pointer">
|
||||
<h4 class="text-xl font-semibold mb-3 text-cyan-300">7. Предоставляется ли на Blackbox гарантия?</h4>
|
||||
</div>
|
||||
<div class="faq-answer text-gray-300 overflow-hidden max-h-0 transition-max-height duration-500 ease-in-out">
|
||||
<p>На все устройства Blackbox действует гарантия - 1 год. Если в течение года использования Blackbox возникают технические неполадки, вы можете вернуть устройство и получить бесплатно новое взамен.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="faq-item mb-8">
|
||||
<div class="faq-question cursor-pointer">
|
||||
<h4 class="text-xl font-semibold mb-3 text-cyan-300">8. Можно ли оплатить Blackbox криптовалютой?</h4>
|
||||
</div>
|
||||
<div class="faq-answer text-gray-300 overflow-hidden max-h-0 transition-max-height duration-500 ease-in-out">
|
||||
<p>В данный момент вы можете оплатить заказ криптовалютой, связавшись с разработчиками в нашем <a href="https://t.me/joinchat/AAAAAEzMDw32y4NVLkCgqw" class="text-cyan-400 hover:underline">Telegram Community</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="faq-item mb-8">
|
||||
<div class="faq-question cursor-pointer">
|
||||
<h4 class="text-xl font-semibold mb-3 text-cyan-300">9. Как Blackbox влияет на защиту анонимности и конфиденциальности в сети?</h4>
|
||||
</div>
|
||||
<div class="faq-answer text-gray-300 overflow-hidden max-h-0 transition-max-height duration-500 ease-in-out">
|
||||
<p>Blackbox обеспечивает анонимность по всем необходимым критериям (кто делает? что делает? откуда делает?) и на всех технологических уровнях: используемых программ, операционной системы и самого устройства.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="faq-item mb-8">
|
||||
<div class="faq-question cursor-pointer">
|
||||
<h4 class="text-xl font-semibold mb-3 text-cyan-300">10. Как убедиться в своей анонимности?</h4>
|
||||
</div>
|
||||
<div class="faq-answer text-gray-300 overflow-hidden max-h-0 transition-max-height duration-500 ease-in-out">
|
||||
<p>В отличие от программ с закрытым исходным кодом и сервисам, к серверам которых у вас нет доступа, Blackbox - это сервер, который находится у вас дома, и имеет архитектуру с открытым исходным кодом. Любой человек, который разбирается в кибер-безопасности, может удостовериться в его эффективности для обеспечения анонимности и изменить его настройки.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="faq-item">
|
||||
<div class="faq-question cursor-pointer">
|
||||
<h4 class="text-xl font-semibold mb-3 text-cyan-300">11. Замедляет ли Blackbox скорость работы Интернета?</h4>
|
||||
</div>
|
||||
<div class="faq-answer text-gray-300 overflow-hidden max-h-0 transition-max-height duration-500 ease-in-out">
|
||||
<p>Да, замедляет. Скорость соединения через Blackbox сокращается до 20-30 Мбит/c. Blackbox не рассчитан на постоянное использование Интернета для решения всех возникающих задач. Этой скорости достаточно, если подключаться к Wi-Fi, который раздает Blackbox, только для решения задач, требующих обеспечения анонимности. Скорость безопасной сети Blackbox в 6 раз выше чем у TOR</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer class="w-full mt-10 pt-7 pb-8 bg-black/60 flex flex-col items-center text-center text-gray-500 text-sm">
|
||||
<img src="/images/logo.webp" alt="bbox logo" class="w-10 h-10 mx-auto mb-3">
|
||||
<div class="mb-2">
|
||||
<span class="font-montserrat font-bold text-cyan-400 text-lg">BlackBox</span> © 2022-2025. Все права защищены.<br>
|
||||
</div>
|
||||
<div class="flex justify-center space-x-6 mb-4">
|
||||
<a href="https://t.me/bbox_wtf" target="_blank" class="text-cyan-300 hover:text-cyan-400 transition-colors" aria-label="Наш канал в Telegram">
|
||||
<i class="fab fa-telegram text-2xl"></i> Telegram
|
||||
</a>
|
||||
<a href="https://vk.com/bbox_wtf" target="_blank" class="text-cyan-300 hover:text-cyan-400 transition-colors" aria-label="Наша группа ВКонтакте">
|
||||
<i class="fab fa-vk text-2xl"></i> ВКонтакте
|
||||
</a>
|
||||
</div>
|
||||
<div>
|
||||
<a href="mailto:support@bbox.wtf" class="hover:underline text-cyan-300">Поддержка</a>
|
||||
|
|
||||
<a href="/pages/faq.html" class="hover:underline text-cyan-300">FAQ</a>
|
||||
|
|
||||
<a href="https://bbox.rocks" class="hover:underline">Старый не поддерживаемый сайт</a>
|
||||
</div>
|
||||
<div class="mt-4">
|
||||
<span class="text-gray-400">bbox.wtf — лендинг нового поколения: BlackBox — не просто VPN, это экосистема и ваша цифровая приватность.</span>
|
||||
</div>
|
||||
</footer>
|
||||
<script src="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.5.2/js/all.min.js"></script>
|
||||
<script src="/js/features.js"></script>
|
||||
<script src="/js/flipbook.js"></script>
|
||||
<script src="/js/fade-up.js"></script>
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const faqQuestions = document.querySelectorAll('.faq-question');
|
||||
|
||||
faqQuestions.forEach(question => {
|
||||
question.addEventListener('click', () => {
|
||||
const faqItem = question.closest('.faq-item');
|
||||
const answer = faqItem.querySelector('.faq-answer');
|
||||
const isOpen = faqItem.classList.contains('open');
|
||||
|
||||
// Close all other open FAQ items
|
||||
document.querySelectorAll('.faq-item.open').forEach(openItem => {
|
||||
if (openItem !== faqItem) {
|
||||
openItem.classList.remove('open');
|
||||
openItem.querySelector('.faq-answer').style.maxHeight = null;
|
||||
}
|
||||
});
|
||||
|
||||
// Toggle the clicked FAQ item
|
||||
if (isOpen) {
|
||||
faqItem.classList.remove('open');
|
||||
answer.style.maxHeight = null;
|
||||
} else {
|
||||
faqItem.classList.add('open');
|
||||
answer.style.maxHeight = answer.scrollHeight + 'px';
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<!-- Yandex.Metrika counter -->
|
||||
<script type="text/javascript" >
|
||||
(function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)};
|
||||
m[i].l=1*new Date();
|
||||
for (var j = 0; j < document.scripts.length; j++) {if (document.scripts[j].src === r) { return; }}
|
||||
k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)})
|
||||
(window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym");
|
||||
|
||||
ym(55764994, "init", {
|
||||
clickmap:true,
|
||||
trackLinks:true,
|
||||
accurateTrackBounce:true,
|
||||
webvisor:true,
|
||||
trackHash:true
|
||||
});
|
||||
</script>
|
||||
<noscript><div><img src="https://mc.yandex.ru/watch/55764994" style="position:absolute; left:-9999px;" alt="" /></div></noscript>
|
||||
<!-- /Yandex.Metrika counter -->
|
||||
<script src="/js/lang-detect-redirect.js"></script>
|
||||
<script src="/js/language-switcher.js"></script>
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const faqQuestions = document.querySelectorAll('.faq-question');
|
||||
|
||||
faqQuestions.forEach(question => {
|
||||
question.addEventListener('click', () => {
|
||||
const faqItem = question.closest('.faq-item');
|
||||
const answer = faqItem.querySelector('.faq-answer');
|
||||
const isOpen = faqItem.classList.contains('open');
|
||||
|
||||
// Close all other open FAQ items
|
||||
document.querySelectorAll('.faq-item.open').forEach(openItem => {
|
||||
if (openItem !== faqItem) {
|
||||
openItem.classList.remove('open');
|
||||
openItem.querySelector('.faq-answer').style.maxHeight = null;
|
||||
}
|
||||
});
|
||||
|
||||
// Toggle the clicked FAQ item
|
||||
if (isOpen) {
|
||||
faqItem.classList.remove('open');
|
||||
answer.style.maxHeight = null;
|
||||
} else {
|
||||
faqItem.classList.add('open');
|
||||
answer.style.maxHeight = answer.scrollHeight + 'px';
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
179
project_description.md
Normal file
179
project_description.md
Normal file
@@ -0,0 +1,179 @@
|
||||
# Описание проекта и его структура
|
||||
|
||||
Данный проект представляет собой веб-страницу, демонстрирующую возможности продукта BlackBox и его сравнение с другими продуктами.
|
||||
|
||||
## Структура проекта
|
||||
|
||||
```
|
||||
/Workspace
|
||||
├── .htaccess
|
||||
├── docker-compose.yml
|
||||
├── index.html
|
||||
├── nginx.conf
|
||||
├── project_description.md
|
||||
├── css/
|
||||
│ ├── all.min.css
|
||||
│ ├── style.css
|
||||
│ └── tailwind.min.css
|
||||
├── images/
|
||||
│ ├── banner-image.webp
|
||||
│ ├── bb_on_white-square.webp
|
||||
│ ├── logo.webp
|
||||
│ └── scales.webp
|
||||
├── js/
|
||||
│ ├── all.min.js
|
||||
│ ├── echarts.min.js
|
||||
│ ├── fade-up.js
|
||||
│ ├── features.js
|
||||
│ ├── flipbook.js
|
||||
│ ├── lang-detect-redirect.js
|
||||
│ └── language-switcher.js
|
||||
├── lang/
|
||||
│ ├── en/
|
||||
│ │ ├── index.html
|
||||
│ │ ├── json/
|
||||
│ │ │ └── en.json
|
||||
│ │ └── pages/
|
||||
│ │ └── faq.html
|
||||
│ ├── es/
|
||||
│ │ ├── index.html
|
||||
│ │ ├── json/
|
||||
│ │ │ └── es.json
|
||||
│ │ └── pages/
|
||||
│ │ └── faq.html
|
||||
│ └── ru/
|
||||
│ ├── index.html
|
||||
│ ├── json/
|
||||
│ │ └── ru.json
|
||||
│ └── pages/
|
||||
│ └── faq.html
|
||||
└── pages/
|
||||
└── faq.html
|
||||
```
|
||||
|
||||
- `/Workspace`: Корневая директория проекта.
|
||||
- `docker-compose.yml`: Файл конфигурации для Docker Compose, используемый для определения и запуска многоконтейнерных Docker-приложений.
|
||||
- `index.html`: Главный HTML-file, содержащий структуру веб-страницы.
|
||||
- `.htaccess`: Файл конфигурации веб-сервера Apache для управления перенаправлениями URL для мультиязычности.
|
||||
- `.htaccess`: Файл конфигурации веб-сервера Apache для управления перенаправлениями URL для мультиязычности.
|
||||
- `docker-compose.yml`: Файл конфигурации для Docker Compose, используемый для определения и запуска многоконтейнерных Docker-приложений.
|
||||
- `index.html`: Главный HTML-файл, содержащий структуру веб-страницы.
|
||||
- `nginx.conf`: Файл конфигурации веб-сервера Nginx.
|
||||
- `project_description.md`: Этот файл, содержащий описание проекта и его структуры.
|
||||
- `css/`: Директория для файлов стилей.
|
||||
- `css/all.min.css`: Минимизированный файл CSS, возможно, содержащий объединенные стили.
|
||||
- `css/style.css`: Основной файл CSS, содержащий стили для оформления веб-страницы.
|
||||
- `css/tailwind.min.css`: Минимизированный файл CSS, возможно, содержащий стили Tailwind CSS.
|
||||
- `images/`: Директория для изображений.
|
||||
- `images/banner-image.webp`: Изображение баннера в формате WebP.
|
||||
- `images/bb_on_white-square.webp`: Изображение продукта "BlackBox" на белом фоне.
|
||||
- `images/logo.webp`: Файл логотипа в формате WebP.
|
||||
- `images/scales.webp`: Изображение весов или сравнения.
|
||||
- `js/`: Директория для файлов JavaScript.
|
||||
- `js/all.min.js`: Минимизированный файл JavaScript, возможно, содержащий объединенные скрипты.
|
||||
- `js/echarts.min.js`: Минимизированный файл JavaScript, возможно, содержащий библиотеку ECharts для построения графиков.
|
||||
- `js/fade-up.js`: Скрипт для анимации появления элементов при прокрутке.
|
||||
- `js/features.js`: Скрипт для отображения таблицы сравнения функций продуктов. Загружает переводы из соответствующего JSON файла.
|
||||
- `js/flipbook.js`: Скрипт для реализации функционала "флипбука" и модального окна с деталями продукта. Загружает переводы для деталей продукта и текста кнопок из соответствующего JSON файла.
|
||||
- `js/lang-detect-redirect.js`: Определяет язык браузера пользователя и перенаправляет на соответствующую языковую версию страницы при первом посещении.
|
||||
- `js/language-switcher.js`: Добавляет на страницу плавающую кнопку-переключатель языка с выпадающим списком.
|
||||
- `lang/`: Директория, содержащая поддиректории для каждого поддерживаемого языка.
|
||||
- `lang/en/`: Директория для английской версии сайта.
|
||||
- `lang/en/index.html`: HTML-файл с контентом на английском языке.
|
||||
- `lang/en/json/`: Директория, содержащая JSON файл с английскими переводами.
|
||||
- `lang/en/json/en.json`: JSON файл с английскими переводами.
|
||||
- `lang/en/pages/`: Директория, содержащая страницы для английской версии сайта.
|
||||
- `lang/en/pages/faq.html`: HTML-файл с контентом FAQ на английском языке.
|
||||
- `lang/es/`: Директория для испанской версии сайта.
|
||||
- `lang/es/index.html`: HTML-файл с контентом на испанском языке.
|
||||
- `lang/es/json/`: Директория, содержащая JSON файл с испанскими переводами.
|
||||
- `lang/es/json/es.json`: JSON файл с испанскими переводами.
|
||||
- `lang/es/pages/`: Директория, содержащая страницы для испанской версии сайта.
|
||||
- `lang/es/pages/faq.html`: HTML-файл с контентом FAQ на испанском языке.
|
||||
- `lang/ru/`: Директория для русской версии сайта.
|
||||
- `lang/ru/index.html`: HTML-файл с контентом на русском языке.
|
||||
- `lang/ru/json/`: Директория, содержащая JSON файл с русскими переводами.
|
||||
- `lang/ru/json/ru.json`: JSON файл с русскими переводами.
|
||||
- `lang/ru/pages/`: Директория, содержащая страницы для русской версии сайта.
|
||||
- `lang/ru/pages/faq.html`: HTML-файл с контентом FAQ на русском языке.
|
||||
- `pages/`: Директория, содержащая общие страницы.
|
||||
- `pages/faq.html`: HTML-файл с общим контентом FAQ.
|
||||
|
||||
## Взаимодействие файлов
|
||||
|
||||
- `index.html` является центральным файлом, который связывает все остальные ресурсы.
|
||||
- В HTML файлах подключены файлы стилей из директории `css/` (`style.css`, `all.min.css`, `tailwind.min.css`) для визуального оформления элементов страницы.
|
||||
- В HTML файлах подключены скрипты из директории `js/` (`fade-up.js`, `features.js`, `flipbook.js`, `lang-detect-redirect.js`, `language-switcher.js`, `all.min.js`, `echarts.min.js`) для добавления интерактивности и динамического контента, а также для мультиязычности.
|
||||
- Скрипты взаимодействуют с элементами в HTML через их ID или классы для изменения их поведения или внешнего вида.
|
||||
- Изображения из директории `images/` (`banner-image.webp`, `bb_on_white-square.webp`, `logo.webp`, `scales.webp`) используются в HTML (например, в теге `<img>` или как фон в CSS).
|
||||
- JavaScript файлы `features.js` и `flipbook.js` загружают переводимый контент из JSON файлов, расположенных в директориях `lang/<lang>/json/`, в зависимости от текущего языка страницы.
|
||||
|
||||
## Стили (css/)
|
||||
|
||||
Директория `css/` содержит файлы стилей, определяющие внешний вид веб-страницы.
|
||||
|
||||
- **style.css**: Основной файл CSS, содержащий стили для:
|
||||
- Общих элементов страницы (тело, заголовки, параграфы).
|
||||
- Макетных элементов (использование Flexbox или Grid для расположения элементов).
|
||||
- Оформления текста, цветов, фонов.
|
||||
- Стилизации интерактивных элементов (кнопки, ссылки).
|
||||
- Адаптивного дизайна (медиазапросы для различных размеров экрана).
|
||||
- Стили, связанные с анимацией появления (`.fade-up`, `.animate-fadeUp`).
|
||||
- Стили для флипбука и модального окна.
|
||||
- Стили для переключателя языка.
|
||||
- **all.min.css**: Минимизированный файл CSS, возможно, содержащий объединенные стили из различных источников.
|
||||
- **tailwind.min.css**: Минимизированный файл CSS, возможно, содержащий стили из фреймворка Tailwind CSS.
|
||||
|
||||
## Скрипты (js/)
|
||||
|
||||
Директория `js/` содержит файлы скриптов:
|
||||
|
||||
- **all.min.js**: Минимизированный файл JavaScript, возможно, содержащий объединенные скрипты.
|
||||
- **echarts.min.js**: Минимизированный файл JavaScript, содержащий библиотеку ECharts для построения графиков.
|
||||
- **fade-up.js**: Реализует анимацию постепенного появления элементов с классом `.fade-up` при загрузке страницы. Использует `setTimeout` для задержки анимации каждого элемента.
|
||||
- **features.js**: Управляет отображением таблицы сравнения функций продуктов. Загружает переводы названий функций и подсказок из соответствующего JSON файла. Динамически создает строки таблицы и добавляет эффекты при наведении для отображения подсказок.
|
||||
- **flipbook.js**: Реализует интерактивный компонент "флипбук" и функционал модального окна с деталями продукта. Загружает переводы для деталей продукта и текста кнопок из соответствующего JSON файла.
|
||||
- **lang-detect-redirect.js**: Определяет язык браузера пользователя и перенаправляет на соответствующую языковую версию страницы при первом посещении.
|
||||
- **language-switcher.js**: Добавляет на страницу плавающую кнопку-переключатель языка с выпадающим списком.
|
||||
|
||||
## Список используемых функций
|
||||
|
||||
Ниже приведен список функций и важных переменных, обнаруженных в неминифицированных JavaScript файлах:
|
||||
|
||||
- **js/fade-up.js**:
|
||||
- Анонимная функция в `document.querySelectorAll('.fade-up').forEach`
|
||||
- Анонимная функция в `setTimeout`
|
||||
|
||||
- **js/features.js**:
|
||||
- `originalFeaturesData`: Массив объектов с исходными данными функций.
|
||||
- `originalProductsData`: Массив объектов с исходными данными продуктов.
|
||||
- `fetchLanguageData(lang)`: Асинхронная функция для загрузки JSON файла с переводами.
|
||||
- `renderFeatures(data)`: Функция для динамического создания и отображения списка функций с использованием переведенных данных.
|
||||
- `setupHoverEffects(data)`: Функция для настройки эффектов при наведении на строки функций с использованием переведенных подсказок.
|
||||
- Анонимная асинхронная функция в `document.addEventListener('DOMContentLoaded', ...)`
|
||||
|
||||
- **js/flipbook.js**:
|
||||
- `updatePages()`: Функция для обновления отображения страниц флипбука.
|
||||
- `initProductDetails()`: Функция для инициализации функционала модального окна деталей продукта.
|
||||
- `showProductDetails(pageNum)`: Функция для отображения модального окна с деталями продукта, используя переведенные данные из JSON.
|
||||
- `hideProductDetails()`: Функция для скрытия модального окна с деталями продукта.
|
||||
- `updateButtonTexts(data)`: Функция для обновления текста кнопок "Купить" и "Подробнее" с использованием переведенных данных из JSON.
|
||||
- Анонимная функция в `pages.forEach(...).addEventListener('click', ...)`
|
||||
- Анонимная функция в `pages.forEach(...).addEventListener('mouseenter', ...)`
|
||||
- Анонимная функция в `setTimeout` внутри `mouseenter` обработчика
|
||||
- Анонимная функция в `pages.forEach(...).addEventListener('mouseleave', ...)`
|
||||
- Анонимная функция в `window.addEventListener('resize', ...)`
|
||||
- Анонимная функция в `document.getElementById('productModal').addEventListener('click', ...)`
|
||||
- Анонимная асинхронная функция в `document.addEventListener('DOMContentLoaded', ...)`
|
||||
|
||||
- **js/lang-detect-redirect.js**:
|
||||
- Анонимная функция в `document.addEventListener('DOMContentLoaded', ...)`
|
||||
|
||||
- **js/language-switcher.js**:
|
||||
- `supportedLanguages`: Объект, содержащий поддерживаемые языки и их коды.
|
||||
- Анонимная функция в `document.addEventListener('DOMContentLoaded', ...)`
|
||||
- Анонимная функция в `languageIcon.addEventListener('click', ...)`
|
||||
- Анонимная функция в `document.addEventListener('click', ...)`
|
||||
- Анонимная функция в `languageDropdown.querySelectorAll('li').forEach(...).addEventListener('click', ...)`
|
||||
|
||||
*Примечание: Минифицированные файлы `all.min.js` и `echarts.min.js` также присутствуют в директории `js/`, но их содержимое не анализировалось для составления списка функций.*
|
||||
Reference in New Issue
Block a user