Загрузка данных
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GTASHE4KA RP — Твоя новая реальность в GTA 5 RolePlay</title>
<!-- Подключение шрифтов в стиле Majestic RP -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,800;1,900&family=Unbounded:wght@700;800;900&display=swap" rel="stylesheet">
<style>
:root {
--bg-main: #090a0f;
--bg-secondary: #11131c;
--bg-card: rgba(20, 23, 34, 0.75);
--bg-card-hover: rgba(28, 32, 48, 0.95);
--accent: #ffcc00;
--accent-hover: #ffe047;
--accent-dark: #cc9900;
--accent-glow: rgba(255, 204, 0, 0.35);
--accent-soft: rgba(255, 204, 0, 0.1);
--text-main: #ffffff;
--text-muted: #8b92a5;
--border-color: rgba(255, 255, 255, 0.07);
--border-accent: rgba(255, 204, 0, 0.4);
--success: #00e676;
--radius-md: 14px;
--radius-lg: 22px;
--transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
font-family: 'Montserrat', sans-serif;
background-color: var(--bg-main);
color: var(--text-main);
overflow-x: hidden;
line-height: 1.5;
background-image:
radial-gradient(circle at 85% 10%, rgba(255, 204, 0, 0.12) 0%, transparent 45%),
radial-gradient(circle at 10% 45%, rgba(255, 170, 0, 0.07) 0%, transparent 40%),
radial-gradient(circle at 80% 85%, rgba(255, 204, 0, 0.08) 0%, transparent 40%);
}
/* Кастомный скроллбар */
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: var(--bg-main);
}
::-webkit-scrollbar-thumb {
background: #25293a;
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: var(--accent);
}
.container {
max-width: 1320px;
margin: 0 auto;
padding: 0 24px;
}
/* Утилиты */
.text-accent {
color: var(--accent);
}
.badge {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 16px;
background: var(--accent-soft);
border: 1px solid var(--border-accent);
border-radius: 100px;
color: var(--accent);
font-weight: 700;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 1.2px;
margin-bottom: 20px;
}
.section-title {
font-family: 'Unbounded', sans-serif;
font-size: clamp(28px, 4vw, 44px);
font-weight: 900;
text-transform: uppercase;
line-height: 1.15;
margin-bottom: 16px;
letter-spacing: -0.5px;
}
.section-subtitle {
color: var(--text-muted);
font-size: 16px;
max-width: 600px;
font-weight: 500;
}
/* Кнопки */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 12px;
padding: 16px 32px;
border-radius: var(--radius-md);
font-family: 'Montserrat', sans-serif;
font-weight: 800;
font-size: 14px;
text-transform: uppercase;
letter-spacing: 0.8px;
text-decoration: none;
cursor: pointer;
border: none;
transition: var(--transition);
position: relative;
overflow: hidden;
}
.btn-primary {
background: linear-gradient(135deg, #ffd900 0%, #ffae00 100%);
color: #090a0f;
box-shadow: 0 10px 30px var(--accent-glow);
}
.btn-primary:hover {
transform: translateY(-3px);
box-shadow: 0 16px 40px rgba(255, 204, 0, 0.55);
background: linear-gradient(135deg, #ffe347 0%, #ffc400 100%);
}
.btn-outline {
background: rgba(255, 255, 255, 0.04);
color: var(--text-main);
border: 1px solid rgba(255, 255, 255, 0.12);
backdrop-filter: blur(10px);
}
.btn-outline:hover {
background: rgba(255, 204, 0, 0.1);
border-color: var(--accent);
color: var(--accent);
transform: translateY(-3px);
}
/* НАВИГАЦИЯ */
header {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 1000;
background: rgba(9, 10, 15, 0.82);
backdrop-filter: blur(18px);
border-bottom: 1px solid var(--border-color);
transition: var(--transition);
}
.navbar {
display: flex;
align-items: center;
justify-content: space-between;
height: 88px;
}
.logo {
display: flex;
align-items: center;
gap: 14px;
text-decoration: none;
color: var(--text-main);
}
.logo-icon {
width: 46px;
height: 46px;
background: linear-gradient(135deg, var(--accent), var(--accent-dark));
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-family: 'Unbounded', sans-serif;
font-weight: 900;
font-size: 24px;
color: #090a0f;
box-shadow: 0 0 25px var(--accent-glow);
transform: skewX(-6deg);
}
.logo-text {
display: flex;
flex-direction: column;
}
.logo-brand {
font-family: 'Unbounded', sans-serif;
font-weight: 900;
font-size: 20px;
letter-spacing: 0.5px;
line-height: 1;
}
.logo-sub {
font-size: 10px;
font-weight: 800;
color: var(--accent);
letter-spacing: 3.5px;
text-transform: uppercase;
margin-top: 4px;
}
.nav-links {
display: flex;
align-items: center;
gap: 34px;
list-style: none;
}
.nav-links a {
color: var(--text-muted);
text-decoration: none;
font-weight: 700;
font-size: 13px;
text-transform: uppercase;
letter-spacing: 0.6px;
transition: var(--transition);
position: relative;
padding: 8px 0;
}
.nav-links a:hover,
.nav-links a.active {
color: var(--text-main);
}
.nav-links a::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0%;
height: 2px;
background: var(--accent);
box-shadow: 0 0 10px var(--accent);
transition: var(--transition);
}
.nav-links a:hover::after,
.nav-links a.active::after {
width: 100%;
}
.nav-actions {
display: flex;
align-items: center;
gap: 14px;
}
.x2-pill {
background: rgba(255, 204, 0, 0.15);
color: var(--accent);
border: 1px solid var(--accent);
padding: 3px 8px;
border-radius: 6px;
font-size: 11px;
font-weight: 900;
animation: pulseGlow 2s infinite;
}
@keyframes pulseGlow {
0%, 100% { box-shadow: 0 0 0 0 rgba(255, 204, 0, 0.4); }
50% { box-shadow: 0 0 12px 2px rgba(255, 204, 0, 0.6); }
}
/* HERO SECTION */
.hero {
position: relative;
min-height: 100vh;
padding-top: 140px;
padding-bottom: 80px;
display: flex;
align-items: center;
overflow: hidden;
}
.hero-bg-grid {
position: absolute;
inset: 0;
background-image:
linear-gradient(to right, rgba(255,255,255,0.025) 1px, transparent 1px),
linear-gradient(to bottom, rgba(255,255,255,0.025) 1px, transparent 1px);
background-size: 64px 64px;
mask-image: radial-gradient(circle at center, black 35%, transparent 80%);
z-index: -1;
}
.hero-wrapper {
display: grid;
grid-template-columns: 1.15fr 0.85fr;
gap: 48px;
align-items: center;
}
.online-badge {
display: inline-flex;
align-items: center;
gap: 12px;
background: rgba(20, 23, 34, 0.85);
border: 1px solid rgba(255, 255, 255, 0.08);
padding: 10px 20px;
border-radius: 100px;
margin-bottom: 28px;
backdrop-filter: blur(10px);
}
.online-dot {
width: 10px;
height: 10px;
background: var(--success);
border-radius: 50%;
box-shadow: 0 0 12px var(--success);
position: relative;
}
.online-dot::after {
content: '';
position: absolute;
inset: -4px;
border-radius: 50%;
border: 2px solid var(--success);
animation: ping 1.6s cubic-bezier(0, 0, 0.2, 1) infinite;
}
@keyframes ping {
75%, 100% {
transform: scale(2);
opacity: 0;
}
}
.online-text {
font-size: 13px;
font-weight: 600;
color: var(--text-muted);
}
.online-count {
color: var(--text-main);
font-weight: 800;
font-size: 15px;
}
.hero-title {
font-family: 'Unbounded', sans-serif;
font-size: clamp(36px, 5.2vw, 66px);
font-weight: 900;
line-height: 1.06;
text-transform: uppercase;
margin-bottom: 24px;
letter-spacing: -1.5px;
}
.hero-title .highlight {
background: linear-gradient(90deg, #ffcc00 0%, #fff099 50%, #ffae00 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: 0 10px 35px rgba(255, 204, 0, 0.25);
}
.hero-desc {
font-size: 17px;
color: var(--text-muted);
max-width: 560px;
margin-bottom: 40px;
font-weight: 500;
}
.hero-buttons {
display: flex;
flex-wrap: wrap;
gap: 18px;
margin-bottom: 48px;
}
.hero-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
padding-top: 32px;
border-top: 1px solid var(--border-color);
max-width: 540px;
}
.stat-item h4 {
font-family: 'Unbounded', sans-serif;
font-size: 26px;
font-weight: 800;
color: var(--text-main);
}
.stat-item p {
font-size: 12px;
color: var(--text-muted);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-top: 4px;
}
/* Правая часть Hero с карточкой персонажа/арта */
.hero-visual {
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.hero-glow-circle {
position: absolute;
width: 440px;
height: 440px;
background: radial-gradient(circle, rgba(255, 204, 0, 0.28) 0%, transparent 70%);
filter: blur(45px);
z-index: 0;
}
.hero-showcase-card {
position: relative;
z-index: 1;
width: 100%;
max-width: 480px;
height: 550px;
border-radius: 28px;
background: linear-gradient(165deg, rgba(32, 36, 52, 0.85) 0%, rgba(13, 15, 23, 0.95) 100%);
border: 1px solid rgba(255, 204, 0, 0.3);
box-shadow: 0 30px 60px rgba(0, 0, 0, 0.65), 0 0 40px rgba(255, 204, 0, 0.12);
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 32px;
background-image:
linear-gradient(to top, #090a0f 12%, rgba(9, 10, 15, 0.3) 55%, transparent 100%),
url('https://images.unsplash.com/photo-1617788138017-80ad40651399?auto=format&fit=crop&w=1000&q=80');
background-size: cover;
background-position: center;
}
.showcase-tag {
position: absolute;
top: 24px;
right: 24px;
background: rgba(9, 10, 15, 0.8);
border: 1px solid var(--border-accent);
backdrop-filter: blur(8px);
padding: 8px 16px;
border-radius: 12px;
font-weight: 800;
font-size: 12px;
color: var(--accent);
text-transform: uppercase;
}
.promo-box {
background: rgba(15, 17, 25, 0.9);
border: 1px solid rgba(255, 255, 255, 0.1);
backdrop-filter: blur(14px);
border-radius: 18px;
padding: 20px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}
.promo-info span {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 1px;
color: var(--text-muted);
font-weight: 700;
display: block;
}
.promo-info strong {
font-family: 'Unbounded', sans-serif;
font-size: 20px;
color: var(--accent);
letter-spacing: 1px;
}
.promo-info p {
font-size: 12px;
color: #d0d5e0;
margin-top: 2px;
}
.copy-promo-btn {
background: var(--accent);
color: #090a0f;
border: none;
border-radius: 12px;
padding: 12px 18px;
font-weight: 800;
font-size: 12px;
cursor: pointer;
text-transform: uppercase;
transition: var(--transition);
}
.copy-promo-btn:hover {
background: var(--accent-hover);
transform: scale(1.05);
}
/* МОНИТОРИНГ СЕРВЕРОВ */
.servers-section {
padding: 100px 0;
position: relative;
}
.section-header {
display: flex;
justify-content: space-between;
align-items: flex-end;
margin-bottom: 48px;
flex-wrap: wrap;
gap: 20px;
}
.servers-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(295px, 1fr));
gap: 24px;
}
.server-card {
background: var(--bg-card);
border: 1px solid var(--border-color);
border-radius: var(--radius-lg);
padding: 26px;
transition: var(--transition);
position: relative;
overflow: hidden;
backdrop-filter: blur(12px);
}
.server-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 4px;
height: 100%;
background: var(--accent);
opacity: 0.4;
transition: var(--transition);
}
.server-card:hover {
transform: translateY(-6px);
background: var(--bg-card-hover);
border-color: var(--border-accent);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.45), 0 0 25px rgba(255, 204, 0, 0.08);
}
.server-card:hover::before {
opacity: 1;
box-shadow: 0 0 15px var(--accent);
}
.server-top {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
.server-name {
font-family: 'Unbounded', sans-serif;
font-size: 18px;
font-weight: 800;
text-transform: uppercase;
}
.server-num {
font-size: 12px;
font-weight: 800;
padding: 4px 10px;
border-radius: 8px;
background: var(--accent-soft);
color: var(--accent);
border: 1px solid rgba(255, 204, 0, 0.25);
}
.server-online-row {
display: flex;
justify-content: space-between;
font-size: 13px;
font-weight: 700;
margin-bottom: 10px;
}
.server-online-row span:first-child {
color: var(--text-muted);
}
.progress-track {
width: 100%;
height: 8px;
background: rgba(255, 255, 255, 0.06);
border-radius: 10px;
overflow: hidden;
margin-bottom: 20px;
}
.progress-fill {
height: 100%;
background: linear-gradient(90deg, #ff9900, #ffcc00);
border-radius: 10px;
box-shadow: 0 0 12px var(--accent);
transition: width 0.8s ease;
}
.server-ip-btn {
width: 100%;
padding: 12px;
border-radius: 10px;
background: rgba(255, 255, 255, 0.04);
border: 1px dashed rgba(255, 255, 255, 0.15);
color: var(--text-muted);
font-family: 'Montserrat', sans-serif;
font-size: 12px;
font-weight: 700;
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
transition: var(--transition);
}
.server-ip-btn:hover {
background: var(--accent-soft);
border-color: var(--accent);
color: var(--accent);
}
/* КАК НАЧАТЬ ИГРАТЬ (3 ШАГА) */
.steps-section {
padding: 100px 0;
background: linear-gradient(180deg, transparent 0%, rgba(17, 19, 28, 0.6) 50%, transparent 100%);
}
.steps-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 28px;
margin-top: 48px;
}
.step-card {
background: var(--bg-card);
border: 1px solid var(--border-color);
border-radius: var(--radius-lg);
padding: 40px 32px;
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 360px;
transition: var(--transition);
}
.step-card:hover {
border-color: var(--border-accent);
transform: translateY(-6px);
}
.step-bg-num {
position: absolute;
right: -10px;
top: -25px;
font-family: 'Unbounded', sans-serif;
font-size: 140px;
font-weight: 900;
color: rgba(255, 204, 0, 0.05);
line-height: 1;
pointer-events: none;
user-select: none;
transition: var(--transition);
}
.step-card:hover .step-bg-num {
color: rgba(255, 204, 0, 0.12);
transform: scale(1.05);
}
.step-icon {
width: 56px;
height: 56px;
border-radius: 16px;
background: var(--accent-soft);
border: 1px solid var(--border-accent);
display: flex;
align-items: center;
justify-content: center;
color: var(--accent);
margin-bottom: 28px;
}
.step-title {
font-family: 'Unbounded', sans-serif;
font-size: 22px;
font-weight: 800;
margin-bottom: 14px;
text-transform: uppercase;
}
.step-desc {
color: var(--text-muted);
font-size: 14px;
margin-bottom: 32px;
font-weight: 500;
}
/* О ПРОЕКТЕ / ОСОБЕННОСТИ ( ТАБЫ В СТИЛЕ MAJESTIC ) */
.features-section {
padding: 100px 0;
}
.features-tabs {
display: flex;
gap: 12px;
margin-bottom: 36px;
overflow-x: auto;
padding-bottom: 8px;
}
.tab-btn {
padding: 16px 26px;
background: var(--bg-card);
border: 1px solid var(--border-color);
border-radius: var(--radius-md);
color: var(--text-muted);
font-family: 'Montserrat', sans-serif;
font-weight: 800;
font-size: 13px;
text-transform: uppercase;
cursor: pointer;
white-space: nowrap;
transition: var(--transition);
}
.tab-btn.active,
.tab-btn:hover {
background: var(--accent);
color: #090a0f;
border-color: var(--accent);
box-shadow: 0 8px 25px var(--accent-glow);
}
.feature-showcase {
background: var(--bg-card);
border: 1px solid var(--border-color);
border-radius: 28px;
padding: 48px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 48px;
align-items: center;
}
.feature-content h3 {
font-family: 'Unbounded', sans-serif;
font-size: 32px;
margin-bottom: 18px;
text-transform: uppercase;
}
.feature-content p {
color: var(--text-muted);
font-size: 16px;
margin-bottom: 28px;
}
.feature-list {
list-style: none;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
.feature-list li {
display: flex;
align-items: center;
gap: 10px;
font-weight: 700;
font-size: 14px;
}
.feature-list li span {
width: 22px;
height: 22px;
border-radius: 6px;
background: var(--accent-soft);
color: var(--accent);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 12px;
}
.feature-image-box {
width: 100%;
height: 360px;
border-radius: 20px;
background-size: cover;
background-position: center;
border: 1px solid var(--border-accent);
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
transition: var(--transition);
}
/* МЕДИА И СОЦСЕТИ */
.social-section {
padding: 80px 0 120px;
}
.social-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
margin-top: 40px;
}
.social-card {
background: var(--bg-card);
border: 1px solid var(--border-color);
border-radius: var(--radius-lg);
padding: 30px;
text-decoration: none;
color: var(--text-main);
transition: var(--transition);
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 24px;
}
.social-card:hover {
border-color: var(--accent);
transform: translateY(-6px);
box-shadow: 0 16px 35px rgba(255, 204, 0, 0.12);
}
.social-card h4 {
font-family: 'Unbounded', sans-serif;
font-size: 20px;
margin-bottom: 6px;
}
.social-card p {
color: var(--text-muted);
font-size: 13px;
font-weight: 600;
}
.social-sub-count {
color: var(--accent);
font-weight: 800;
font-size: 14px;
display: flex;
align-items: center;
justify-content: space-between;
}
/* ФУТЕР */
footer {
background: #06070a;
border-top: 1px solid var(--border-color);
padding: 70px 0 40px;
}
.footer-grid {
display: grid;
grid-template-columns: 1.5fr 1fr 1fr 1fr;
gap: 40px;
margin-bottom: 50px;
}
.footer-col h5 {
font-family: 'Unbounded', sans-serif;
font-size: 14px;
text-transform: uppercase;
margin-bottom: 20px;
color: var(--text-main);
}
.footer-col ul {
list-style: none;
display: flex;
flex-direction: column;
gap: 12px;
}
.footer-col a {
color: var(--text-muted);
text-decoration: none;
font-size: 14px;
font-weight: 500;
transition: var(--transition);
}
.footer-col a:hover {
color: var(--accent);
}
.footer-bottom {
padding-top: 30px;
border-top: 1px solid var(--border-color);
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 16px;
color: var(--text-muted);
font-size: 13px;
}
/* МОДАЛЬНЫЕ ОКНА (МАГАЗИН / АВТОРИЗАЦИЯ) */
.modal-overlay {
position: fixed;
inset: 0;
background: rgba(5, 6, 10, 0.85);
backdrop-filter: blur(12px);
z-index: 2000;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
opacity: 0;
pointer-events: none;
transition: var(--transition);
}
.modal-overlay.active {
opacity: 1;
pointer-events: all;
}
.modal-box {
background: #121520;
border: 1px solid var(--border-accent);
border-radius: 24px;
width: 100%;
max-width: 480px;
padding: 36px;
position: relative;
box-shadow: 0 25px 70px rgba(0, 0, 0, 0.8), 0 0 40px rgba(255, 204, 0, 0.15);
transform: translateY(20px);
transition: var(--transition);
}
.modal-overlay.active .modal-box {
transform: translateY(0);
}
.modal-close {
position: absolute;
top: 24px;
right: 24px;
background: rgba(255, 255, 255, 0.06);
border: none;
color: var(--text-muted);
width: 36px;
height: 36px;
border-radius: 10px;
cursor: pointer;
font-size: 18px;
transition: var(--transition);
}
.modal-close:hover {
background: var(--accent);
color: #090a0f;
}
.form-group {
margin-bottom: 18px;
}
.form-group label {
display: block;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
color: var(--text-muted);
margin-bottom: 8px;
}
.form-control {
width: 100%;
padding: 15px 18px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 12px;
color: var(--text-main);
font-family: 'Montserrat', sans-serif;
font-size: 14px;
font-weight: 600;
outline: none;
transition: var(--transition);
}
.form-control:focus {
border-color: var(--accent);
background: rgba(255, 204, 0, 0.04);
}
.form-control option {
background: #121520;
color: #fff;
}
.calc-summary {
background: var(--accent-soft);
border: 1px solid var(--border-accent);
padding: 16px;
border-radius: 14px;
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 24px;
}
/* УВЕДОМЛЕНИЯ (TOAST) */
.toast {
position: fixed;
bottom: 28px;
right: 28px;
background: #161926;
border: 1px solid var(--accent);
color: var(--text-main);
padding: 16px 24px;
border-radius: 14px;
font-weight: 700;
font-size: 14px;
box-shadow: 0 15px 35px rgba(0,0,0,0.6), 0 0 20px var(--accent-glow);
z-index: 3000;
transform: translateY(120%);
transition: var(--transition);
display: flex;
align-items: center;
gap: 12px;
}
.toast.show {
transform: translateY(0);
}
/* АДАПТИВНОСТЬ */
@media (max-width: 1024px) {
.hero-wrapper,
.feature-showcase {
grid-template-columns: 1fr;
}
.steps-grid {
grid-template-columns: 1fr;
}
.social-grid {
grid-template-columns: repeat(2, 1fr);
}
.footer-grid {
grid-template-columns: 1fr 1fr;
}
.nav-links {
display: none;
}
}
@media (max-width: 600px) {
.social-grid,
.footer-grid,
.feature-list {
grid-template-columns: 1fr;
}
.feature-showcase {
padding: 28px 20px;
}
.hero-stats {
grid-template-columns: 1fr;
gap: 16px;
}
}
</style>
</head>
<body>
<!-- ШАПКА САЙТА -->
<header>
<div class="container navbar">
<a href="#" class="logo">
<div class="logo-icon">G</div>
<div class="logo-text">
<span class="logo-brand">GTASHE4KA</span>
<span class="logo-sub">ROLE PLAY</span>
</div>
</a>
<ul class="nav-links">
<li><a href="#hero" class="active">Главная</a></li>
<li><a href="#servers">Серверы</a></li>
<li><a href="#start">Как начать</a></li>
<li><a href="#about">О проекте</a></li>
<li><a href="#media">Сообщество</a></li>
</ul>
<div class="nav-actions">
<button class="btn btn-outline" onclick="openModal('donateModal')" style="padding: 12px 20px;">
Магазин <span class="x2-pill">X2</span>
</button>
<button class="btn btn-primary" onclick="openModal('authModal')" style="padding: 12px 22px;">
Кабинет
</button>
</div>
</div>
</header>
<!-- HERO SECTION -->
<section class="hero" id="hero">
<div class="hero-bg-grid"></div>
<div class="container hero-wrapper">
<div class="hero-content">
<div class="online-badge">
<span class="online-dot"></span>
<span class="online-text">Сейчас в штате:</span>
<span class="online-count" id="totalOnlineCounter">14 820 игроков</span>
</div>
<h1 class="hero-title">
СОЗДАЙ СВОЮ <br>
ИМПЕРИЮ НА <br>
<span class="highlight">GTASHE4KA RP</span>
</h1>
<p class="hero-desc">
Масштабный RolePlay проект в GTA V. Сотни эксклюзивных автомобилей, продуманная экономика, криминальные войны семей и полная свобода отыгрыша.
</p>
<div class="hero-buttons">
<a href="#start" class="btn btn-primary">
<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>
Начать играть
</a>
<button class="btn btn-outline" onclick="openModal('donateModal')">
Пополнить счёт (X2)
</button>
</div>
<div class="hero-stats">
<div class="stat-item">
<h4>8 СЕРВЕРОВ</h4>
<p>Стабильный пинг</p>
</div>
<div class="stat-item">
<h4>450+ АВТО</h4>
<p>Реальный тюнинг</p>
</div>
<div class="stat-item">
<h4>120 FPS</h4>
<p>Оптимизация</p>
</div>
</div>
</div>
<div class="hero-visual">
<div class="hero-glow-circle"></div>
<div class="hero-showcase-card">
<div class="showcase-tag">SEASON PASS 2026</div>
<div class="promo-box">
<div class="promo-info">
<span>Бонус новичкам по промокоду:</span>
<strong>GTASHE4KA</strong>
<p>+50,000$ и Platinum VIP на 7 дней</p>
</div>
<button class="copy-promo-btn" onclick="copyText('GTASHE4KA', 'Промокод GTASHE4KA скопирован! Введите его в чате /promo')">
Копировать
</button>
</div>
</div>
</div>
</div>
</section>
<!-- СЕРВЕРЫ -->
<section class="servers-section" id="servers">
<div class="container">
<div class="section-header">
<div>
<div class="badge">Мониторинг в реальном времени</div>
<h2 class="section-title">ВЫБЕРИ СВОЙ <span class="text-accent">СЕРВЕР</span></h2>
<p class="section-subtitle">Нажмите на IP-адрес любого сервера, чтобы мгновенно скопировать его для быстрого подключения через F1.</p>
</div>
</div>
<div class="servers-grid" id="serversContainer">
<!-- Генерируется через JS -->
</div>
</div>
</section>
<!-- КАК НАЧАТЬ ИГРАТЬ -->
<section class="steps-section" id="start">
<div class="container">
<div class="badge">Быстрый старт за 5 минут</div>
<h2 class="section-title">КАК НАЧАТЬ <span class="text-accent">ИГРАТЬ?</span></h2>
<p class="section-subtitle">Три простых шага отделяют тебя от погружения в атмосферу GTASHE4KA RolePlay.</p>
<div class="steps-grid">
<!-- Шаг 1 -->
<div class="step-card">
<div class="step-bg-num">01</div>
<div>
<div class="step-icon">
<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="3" width="20" height="14" rx="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg>
</div>
<h3 class="step-title">Установите GTA V</h3>
<p class="step-desc">Для игры потребуется любая лицензионная версия Grand Theft Auto V (Steam, Epic Games или Rockstar Games Launcher). Прохождение сюжета не требуется.</p>
</div>
<a href="https://store.steampowered.com/app/271590/Grand_theft_Auto_V/" target="_blank" class="btn btn-outline" style="width: 100%;">Купить GTA V в Steam</a>
</div>
<!-- Шаг 2 -->
<div class="step-card" style="border-color: var(--border-accent); background: linear-gradient(180deg, rgba(255,204,0,0.08) 0%, var(--bg-card) 100%);">
<div class="step-bg-num">02</div>
<div>
<div class="step-icon" style="background: var(--accent); color: #090a0f;">
<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
</div>
<h3 class="step-title">Скачайте Лаунчер</h3>
<p class="step-desc">Фирменный лаунчер GTASHE4KA сам установит все необходимые файлы мультиплеера, проверит целостность модов и настроит графику.</p>
</div>
<button class="btn btn-primary" style="width: 100%;" onclick="downloadLauncher()">
Скачать Лаунчер (Windows)
</button>
</div>
<!-- Шаг 3 -->
<div class="step-card">
<div class="step-bg-num">03</div>
<div>
<div class="step-icon">
<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg>
</div>
<h3 class="step-title">Врывайтесь в игру</h3>
<p class="step-desc">Запустите лаунчер, выберите понравившийся сервер, создайте уникального персонажа и не забудьте ввести промокод <strong>GTASHE4KA</strong>.</p>
</div>
<a href="#servers" class="btn btn-outline" style="width: 100%;">Выбрать сервер</a>
</div>
</div>
</div>
</section>
<!-- О ПРОЕКТЕ / ТАБЫ -->
<section class="features-section" id="about">
<div class="container">
<div class="badge">Уникальный игровой мод</div>
<h2 class="section-title">ПОЧЕМУ ВЫБИРАЮТ <span class="text-accent">GTASHE4KA?</span></h2>
<div class="features-tabs" style="margin-top: 32px;">
<button class="tab-btn active" onclick="switchTab(0, this)">Криминал и Семьи</button>
<button class="tab-btn" onclick="switchTab(1, this)">Автопарк и Тюнинг</button>
<button class="tab-btn" onclick="switchTab(2, this)">Гос. Структуры</button>
<button class="tab-btn" onclick="switchTab(3, this)">Бизнес и Работы</button>
</div>
<div class="feature-showcase" id="featureDisplay">
<div class="feature-content">
<h3 id="featTitle">Создай собственную семью или синдикат</h3>
<p id="featDesc">Объединяйтесь с друзьями в могущественные организации, покупайте особняки, участвуйте в войнах за территории (Captures / Bizwar), грабьте банки и перехватывайте поставки оружия.</p>
<ul class="feature-list" id="featList">
<li><span>✓</span> Война за квадраты и бизнесы</li>
<li><span>✓</span> Контракты и ограбления банков</li>
<li><span>✓</span> Кастомные особняки и склады</li>
<li><span>✓</span> Гибкая система рангов и доступа</li>
</ul>
</div>
<div class="feature-image-box" id="featImg" style="background-image: url('https://images.unsplash.com/photo-1511512578047-dfb367046420?auto=format&fit=crop&w=1000&q=80');"></div>
</div>
</div>
</section>
<!-- СОЦИАЛЬНЫЕ СЕТИ -->
<section class="social-section" id="media">
<div class="container">
<div class="badge">Всегда на связи</div>
<h2 class="section-title">НАШЕ <span class="text-accent">СООБЩЕСТВО</span></h2>
<p class="section-subtitle">Следите за обновлениями, участвуйте в еженедельных розыгрышах G-Coins и общайтесь с игроками.</p>
<div class="social-grid">
<a href="#media" onclick="showToast('Переход в официальный Discord канал GTASHE4KA')" class="social-card">
<div>
<h4>DISCORD</h4>
<p>Торговая площадка, общение и техподдержка 24/7</p>
</div>
<div class="social-sub-count">
<span>195 000+ участников</span>
<span>→</span>
</div>
</a>
<a href="#media" onclick="showToast('Переход в Telegram-канал GTASHE4KA')" class="social-card">
<div>
<h4>TELEGRAM</h4>
<p>Инсайды разработки, промокоды и быстрые новости</p>
</div>
<div class="social-sub-count">
<span>140 000+ подписчиков</span>
<span>→</span>
</div>
</a>
<a href="#media" onclick="showToast('Переход в группу ВКонтакте GTASHE4KA')" class="social-card">
<div>
<h4>ВКОНТАКТЕ</h4>
<p>Конкурсы, мемы и отчёты об обновлениях</p>
</div>
<div class="social-sub-count">
<span>210 000+ подписчиков</span>
<span>→</span>
</div>
</a>
<a href="#media" onclick="showToast('Переход на YouTube канал GTASHE4KA')" class="social-card">
<div>
<h4>YOUTUBE</h4>
<p>Обзоры патчей, трейлеры сезонов и гайды</p>
</div>
<div class="social-sub-count">
<span>98 000+ подписчиков</span>
<span>→</span>
</div>
</a>
</div>
</div>
</section>
<!-- ФУТЕР -->
<footer>
<div class="container">
<div class="footer-grid">
<div class="footer-col">
<a href="#" class="logo" style="margin-bottom: 18px;">
<div class="logo-icon">G</div>
<div class="logo-text">
<span class="logo-brand">GTASHE4KA</span>
<span class="logo-sub">ROLE PLAY</span>
</div>
</a>
<p style="color: var(--text-muted); font-size: 13px; max-width: 300px;">
GTASHE4KA RP не аффилирован и не связан с Take-Two Interactive или Rockstar North Interactive. Все права на торговые марки принадлежат их правообладателям.
</p>
</div>
<div class="footer-col">
<h5>Навигация</h5>
<ul>
<li><a href="#hero">Главная</a></li>
<li><a href="#servers">Мониторинг серверов</a></li>
<li><a href="#start">Скачать лаунчер</a></li>
<li><a href="#" onclick="openModal('donateModal'); return false;">Пополнить счёт</a></li>
</ul>
</div>
<div class="footer-col">
<h5>Ресурсы</h5>
<ul>
<li><a href="#" onclick="showToast('Раздел Форума скоро откроется!'); return false;">Форум проекта</a></li>
<li><a href="#" onclick="showToast('База знаний Wiki открыта!'); return false;">База знаний (Wiki)</a></li>
<li><a href="#" onclick="openModal('authModal'); return false;">Личный кабинет</a></li>
<li><a href="#" onclick="showToast('Служба поддержки в Discord'); return false;">Центр поддержки</a></li>
</ul>
</div>
<div class="footer-col">
<h5>Правовая информация</h5>
<ul>
<li><a href="#">Пользовательское соглашение</a></li>
<li><a href="#">Политика конфиденциальности</a></li>
<li><a href="#">Правила возврата средств</a></li>
<li><a href="#">Контакты: support@gtashe4ka.rp</a></li>
</ul>
</div>
</div>
<div class="footer-bottom">
<span>© 2026 GTASHE4KA ROLEPLAY. Все права защищены.</span>
<span>Принимаем к оплате: МИР • СБП • Visa • MasterCard • Crypto</span>
</div>
</div>
</footer>
<!-- МОДАЛЬНОЕ ОКНО: ДОНАТ / МАГАЗИН -->
<div class="modal-overlay" id="donateModal">
<div class="modal-box">
<button class="modal-close" onclick="closeModal('donateModal')">✕</button>
<div class="badge" style="margin-bottom: 10px;">Акция X2 активна</div>
<h3 style="font-family: 'Unbounded', sans-serif; font-size: 24px; margin-bottom: 22px;">ПОПОЛНЕНИЕ СЧЁТА</h3>
<form onsubmit="handleDonate(event)">
<div class="form-group">
<label>Выберите сервер</label>
<select class="form-control" required>
<option value="1">#1 | Los Santos</option>
<option value="2">#2 | Vice City</option>
<option value="3">#3 | Liberty City</option>
<option value="4">#4 | San Fierro</option>
<option value="5">#5 | Las Venturas</option>
<option value="6">#6 | Miami</option>
<option value="7">#7 | Detroit</option>
<option value="8">#8 | Atlanta</option>
</select>
</div>
<div class="form-group">
<label>Ваш игровой логин или Static ID</label>
<input type="text" class="form-control" placeholder="Например: Player_One или #45120" required>
</div>
<div class="form-group">
<label>Сумма пополнения (₽)</label>
<input type="number" id="donateInput" class="form-control" value="500" min="50" max="500000" oninput="updateCoins()" required>
</div>
<div class="calc-summary">
<span style="font-size: 13px; font-weight: 700; color: var(--text-muted);">К зачислению с учётом X2:</span>
<strong id="coinsOutput" style="font-family: 'Unbounded', sans-serif; font-size: 20px; color: var(--accent);">1 000 GC</strong>
</div>
<button type="submit" class="btn btn-primary" style="width: 100%;">Перейти к оплате</button>
</form>
</div>
</div>
<!-- МОДАЛЬНОЕ ОКНО: ЛИЧНЫЙ КАБИНЕТ -->
<div class="modal-overlay" id="authModal">
<div class="modal-box">
<button class="modal-close" onclick="closeModal('authModal')">✕</button>
<div class="badge" style="margin-bottom: 10px;">Авторизация</div>
<h3 style="font-family: 'Unbounded', sans-serif; font-size: 24px; margin-bottom: 22px;">ЛИЧНЫЙ КАБИНЕТ</h3>
<form onsubmit="handleAuth(event)">
<div class="form-group">
<label>Сервер</label>
<select class="form-control" required>
<option value="1">#1 | Los Santos</option>
<option value="2">#2 | Vice City</option>
<option value="3">#3 | Liberty City</option>
<option value="4">#4 | San Fierro</option>
</select>
</div>
<div class="form-group">
<label>Логин</label>
<input type="text" class="form-control" placeholder="Введите ваш логин" required>
</div>
<div class="form-group">
<label>Пароль</label>
<input type="password" class="form-control" placeholder="••••••••" required>
</div>
<button type="submit" class="btn btn-primary" style="width: 100%;">Войти в аккаунт</button>
</form>
</div>
</div>
<!-- ВСПЛЫВАЮЩЕЕ УВЕДОМЛЕНИЕ -->
<div class="toast" id="toastBox">
<span style="color: var(--accent);">⚡</span>
<span id="toastMsg">Скопировано в буфер обмена!</span>
</div>
<script>
// Данные серверов в стиле Majestic RP
const serversData = [
{ id: 1, name: "Los Santos", online: 1945, max: 2000, ip: "s1.gtashe4ka.rp:22005" },
{ id: 2, name: "Vice City", online: 1890, max: 2000, ip: "s2.gtashe4ka.rp:22005" },
{ id: 3, name: "Liberty City", online: 1810, max: 2000, ip: "s3.gtashe4ka.rp:22005" },
{ id: 4, name: "San Fierro", online: 1765, max: 2000, ip: "s4.gtashe4ka.rp:22005" },
{ id: 5, name: "Las Venturas", online: 1980, max: 2000, ip: "s5.gtashe4ka.rp:22005" },
{ id: 6, name: "Miami", online: 1720, max: 2000, ip: "s6.gtashe4ka.rp:22005" },
{ id: 7, name: "Detroit", online: 1840, max: 2000, ip: "s7.gtashe4ka.rp:22005" },
{ id: 8, name: "Atlanta", online: 1992, max: 2000, ip: "s8.gtashe4ka.rp:22005" }
];
// Рендер карточек серверов
function renderServers() {
const container = document.getElementById('serversContainer');
let totalOnline = 0;
container.innerHTML = serversData.map(srv => {
totalOnline += srv.online;
const percent = Math.min(100, Math.round((srv.online / srv.max) * 100));
return `
<div class="server-card">
<div class="server-top">
<span class="server-name">${srv.name}</span>
<span class="server-num">SERVER #${srv.id}</span>
</div>
<div class="server-online-row">
<span>Игроков онлайн</span>
<span><strong class="text-accent">${srv.online}</strong> / ${srv.max}</span>
</div>
<div class="progress-track">
<div class="progress-fill" style="width: ${percent}%"></div>
</div>
<button class="server-ip-btn" onclick="copyText('${srv.ip}', 'IP сервера ${srv.name} (${srv.ip}) скопирован!')">
<span>${srv.ip}</span>
<span style="color: var(--accent);">КОПИРОВАТЬ IP</span>
</button>
</div>
`;
}).join('');
document.getElementById('totalOnlineCounter').textContent =
totalOnline.toLocaleString('ru-RU') + ' игроков';
}
// Данные для вкладок "О проекте"
const featuresData = [
{
title: "Создай собственную семью или синдикат",
desc: "Объединяйтесь с друзьями в могущественные организации, покупайте особняки, участвуйте в войнах за территории (Captures / Bizwar), грабьте банки и перехватывайте поставки оружия.",
list: [
"Война за квадраты и бизнесы",
"Контракты и ограбления банков",
"Кастомные особняки и склады",
"Гибкая система рангов и доступа"
],
img: "https://images.unsplash.com/photo-1511512578047-dfb367046420?auto=format&fit=crop&w=1000&q=80"
},
{
title: "Более 450 детализированных автомобилей",
desc: "От классических японских спорткаров до эксклюзивных гиперкаров. Настраивайте выхлоп, подвеску, обвесы, винилы и чип-тюнинг в собственных автомастерских.",
list: [
"Реалистичная физика управления",
"Детальный визуальный стайлинг",
"Эксклюзивные обвесы и диски",
"Авторынок и аукционы контейнеров"
],
img: "https://images.unsplash.com/photo-1503376780353-7e6692767b70?auto=format&fit=crop&w=1000&q=80"
},
{
title: "Закон, порядок и политика штата",
desc: "Вступайте в ряды LSPD, FIB, Шерифов или Армии, используйте современную спецтехнику, дроны и базу данных граждан, либо станьте Губернатором и меняйте законы штата.",
list: [
"Бортовой компьютер и база розыска",
"Судебная система и адвокатура",
"Спецоперации и рейды на картели",
"Выборы Губернатора и Конгресс"
],
img: "https://images.unsplash.com/photo-1477959858617-67f85cf4f1df?auto=format&fit=crop&w=1000&q=80"
},
{
title: "Продвинутая экономика и бизнесы",
desc: "Начните карьеру с дальнобойщика или инкассатора и вырастите до владельца сети АЗС, автосалонов или казино. Полный контроль над наценками, закупками и персоналом.",
list: [
"Свыше 15 уникальных работ",
"Маркетплейс прямо в планшете",
"Пассивный доход от недвижимости",
"Фермы, шахты и логистика"
],
img: "https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?auto=format&fit=crop&w=1000&q=80"
}
];
function switchTab(index, btnElement) {
document.querySelectorAll('.tab-btn').forEach(btn => btn.classList.remove('active'));
btnElement.classList.add('active');
const item = featuresData[index];
document.getElementById('featTitle').textContent = item.title;
document.getElementById('featDesc').textContent = item.desc;
document.getElementById('featImg').style.backgroundImage = `url('${item.img}')`;
document.getElementById('featList').innerHTML = item.list
.map(point => `<li><span>✓</span> ${point}</li>`)
.join('');
}
// Калькулятор G-Coins
function updateCoins() {
const val = parseInt(document.getElementById('donateInput').value) || 0;
const total = val * 2;
document.getElementById('coinsOutput').textContent = total.toLocaleString('ru-RU') + ' GC';
}
// Модальные окна
function openModal(id) {
document.getElementById(id).classList.add('active');
}
function closeModal(id) {
document.getElementById(id).classList.remove('active');
}
window.addEventListener('click', (e) => {
if (e.target.classList.contains('modal-overlay')) {
e.target.classList.remove('active');
}
});
// Уведомления (Toast) и копирование
let toastTimeout;
function showToast(message) {
const toast = document.getElementById('toastBox');
document.getElementById('toastMsg').textContent = message;
toast.classList.add('show');
clearTimeout(toastTimeout);
toastTimeout = setTimeout(() => {
toast.classList.remove('show');
}, 3200);
}
function copyText(text, customMsg) {
navigator.clipboard.writeText(text).catch(() => {});
showToast(customMsg || `Скопировано: ${text}`);
}
function downloadLauncher() {
showToast('Загрузка GTASHE4KA_Launcher_Setup.exe началась...');
}
function handleDonate(e) {
e.preventDefault();
closeModal('donateModal');
showToast('Перенаправление на защищённый шлюз оплаты...');
}
function handleAuth(e) {
e.preventDefault();
closeModal('authModal');
showToast('Проверка данных аккаунта GTASHE4KA...');
}
// Живое обновление онлайна каждые 4 секунды
setInterval(() => {
serversData.forEach(srv => {
const delta = Math.floor(Math.random() * 11) - 5;
srv.online = Math.max(1200, Math.min(srv.max, srv.online + delta));
});
renderServers();
}, 4000);
// Инициализация
renderServers();
</script>
</body>
</html>