<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="theme-color" content="#07080c">
<meta name="description" content="Rainbow Team — официальный сайт Minecraft-сервера">
<title>Rainbow Team — Minecraft</title>
<style>
:root{
--bg:#07080c;
--bg2:#0c0e14;
--card:rgba(16,18,27,.76);
--card2:rgba(20,22,32,.92);
--line:rgba(255,255,255,.08);
--text:#f7f8fb;
--muted:#9aa1b1;
--purple:#8b5cf6;
--pink:#ec4899;
--blue:#38bdf8;
--green:#22c55e;
--yellow:#f59e0b;
--red:#ef4444;
--radius:22px;
--shadow:0 25px 80px rgba(0,0,0,.42);
}
*{
box-sizing:border-box;
margin:0;
padding:0;
}
html{
scroll-behavior:smooth;
}
body{
font-family:Arial,Helvetica,sans-serif;
color:var(--text);
background:
radial-gradient(circle at 10% 10%,rgba(139,92,246,.17),transparent 28%),
radial-gradient(circle at 90% 10%,rgba(236,72,153,.13),transparent 26%),
radial-gradient(circle at 50% 90%,rgba(56,189,248,.08),transparent 30%),
var(--bg);
min-height:100vh;
overflow-x:hidden;
}
body::before{
content:"";
position:fixed;
inset:0;
pointer-events:none;
opacity:.18;
background-image:
linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
background-size:38px 38px;
mask-image:linear-gradient(to bottom,#000,transparent);
z-index:-1;
}
a{
color:inherit;
text-decoration:none;
}
button{
font:inherit;
}
.container{
width:min(1180px,92%);
margin:auto;
}
/* HEADER */
header{
position:sticky;
top:0;
z-index:1000;
border-bottom:1px solid var(--line);
backdrop-filter:blur(20px);
background:rgba(7,8,12,.72);
}
.nav{
min-height:76px;
display:flex;
justify-content:space-between;
align-items:center;
gap:20px;
}
.brand{
display:flex;
align-items:center;
gap:12px;
font-weight:900;
letter-spacing:.6px;
white-space:nowrap;
}
.brand-logo{
width:42px;
height:42px;
border-radius:13px;
display:grid;
place-items:center;
font-size:21px;
background:
linear-gradient(135deg,var(--purple),var(--pink),var(--blue));
box-shadow:0 10px 35px rgba(139,92,246,.3);
}
.brand small{
display:block;
margin-top:3px;
font-size:11px;
color:var(--muted);
font-weight:600;
letter-spacing:1.4px;
}
.nav-links{
display:flex;
align-items:center;
gap:8px;
flex-wrap:wrap;
justify-content:center;
}
.nav-links a{
color:#a9afbd;
padding:10px 13px;
border-radius:10px;
font-size:14px;
transition:.2s;
}
.nav-links a:hover{
color:#fff;
background:rgba(255,255,255,.055);
}
.nav-btn{
border:1px solid var(--line);
background:rgba(255,255,255,.045);
color:#fff;
padding:10px 15px;
border-radius:11px;
cursor:pointer;
transition:.2s;
}
.nav-btn:hover{
transform:translateY(-1px);
border-color:rgba(139,92,246,.45);
}
/* HERO */
.hero{
position:relative;
min-height:calc(100vh - 76px);
display:flex;
align-items:center;
padding:80px 0 100px;
}
.hero-grid{
display:grid;
grid-template-columns:1.15fr .85fr;
align-items:center;
gap:55px;
}
.eyebrow{
display:inline-flex;
align-items:center;
gap:9px;
color:#cbd0db;
background:rgba(255,255,255,.045);
border:1px solid var(--line);
padding:9px 13px;
border-radius:999px;
font-size:12px;
text-transform:uppercase;
letter-spacing:1.8px;
margin-bottom:22px;
}
.pulse-dot{
width:8px;
height:8px;
border-radius:50%;
background:var(--green);
box-shadow:0 0 0 0 rgba(34,197,94,.55);
animation:pulse 1.9s infinite;
}
@keyframes pulse{
70%{box-shadow:0 0 0 9px rgba(34,197,94,0)}
100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}
}
.hero h1{
font-size:clamp(50px,9vw,105px);
line-height:.9;
letter-spacing:-5px;
max-width:850px;
}
.gradient-text{
background:linear-gradient(90deg,#fff 0%,#c4b5fd 32%,#f9a8d4 63%,#7dd3fc 100%);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
}
.hero p{
margin-top:28px;
max-width:720px;
color:var(--muted);
line-height:1.7;
font-size:17px;
}
.hero-actions{
display:flex;
gap:12px;
flex-wrap:wrap;
margin-top:31px;
}
.btn{
display:inline-flex;
align-items:center;
justify-content:center;
gap:10px;
min-height:50px;
padding:0 19px;
border-radius:13px;
border:1px solid var(--line);
cursor:pointer;
transition:.22s;
font-weight:800;
}
.btn:hover{
transform:translateY(-2px);
}
.btn-main{
color:#fff;
border:0;
background:linear-gradient(135deg,var(--purple),var(--pink));
box-shadow:0 14px 38px rgba(139,92,246,.25);
}
.btn-secondary{
background:rgba(255,255,255,.045);
color:#fff;
}
.hero-stats{
display:flex;
flex-wrap:wrap;
gap:12px;
margin-top:28px;
}
.mini-stat{
padding:13px 16px;
border:1px solid var(--line);
border-radius:14px;
background:rgba(255,255,255,.035);
min-width:145px;
}
.mini-stat strong{
display:block;
font-size:18px;
}
.mini-stat span{
color:var(--muted);
font-size:11px;
display:block;
margin-top:5px;
text-transform:uppercase;
letter-spacing:1px;
}
/* HERO CARD */
.showcase{
position:relative;
}
.showcase-card{
padding:24px;
background:
linear-gradient(145deg,rgba(139,92,246,.14),rgba(236,72,153,.05) 55%,rgba(56,189,248,.1)),
var(--card);
border:1px solid var(--line);
border-radius:28px;
box-shadow:var(--shadow);
backdrop-filter:blur(18px);
transform:rotate(1.3deg);
}
.showcase-top{
display:flex;
justify-content:space-between;
align-items:center;
gap:12px;
margin-bottom:21px;
}
.server-badge{
padding:7px 10px;
border-radius:999px;
font-size:11px;
font-weight:800;
text-transform:uppercase;
letter-spacing:1px;
background:rgba(34,197,94,.12);
color:#86efac;
border:1px solid rgba(34,197,94,.2);
}
.cube{
aspect-ratio:1/1;
display:grid;
place-items:center;
border-radius:22px;
font-size:70px;
background:
radial-gradient(circle at 30% 25%,rgba(255,255,255,.18),transparent 24%),
linear-gradient(145deg,#6d28d9,#be185d 55%,#0284c7);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.2),
0 25px 55px rgba(0,0,0,.28);
margin-bottom:20px;
}
.showcase-card h2{
font-size:27px;
margin-bottom:8px;
}
.showcase-card p{
color:var(--muted);
line-height:1.5;
font-size:14px;
}
.server-preview{
display:grid;
grid-template-columns:1fr 1fr;
gap:10px;
margin-top:18px;
}
.preview-item{
padding:14px;
border:1px solid var(--line);
border-radius:14px;
background:rgba(0,0,0,.16);
}
.preview-item span{
color:var(--muted);
display:block;
font-size:10px;
text-transform:uppercase;
letter-spacing:1px;
margin-bottom:6px;
}
.preview-item strong{
font-size:14px;
word-break:break-word;
}
/* SECTION */
section{
padding:90px 0;
}
.section-head{
margin-bottom:30px;
}
.section-kicker{
font-size:11px;
text-transform:uppercase;
color:#a78bfa;
letter-spacing:2px;
font-weight:800;
margin-bottom:10px;
}
.section-title{
font-size:clamp(30px,5vw,48px);
letter-spacing:-1.5px;
}
.section-desc{
color:var(--muted);
margin-top:10px;
max-width:720px;
line-height:1.6;
}
/* SERVER CARDS */
.server-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:18px;
}
.server-card{
position:relative;
overflow:hidden;
background:var(--card);
border:1px solid var(--line);
border-radius:var(--radius);
padding:27px;
box-shadow:var(--shadow);
backdrop-filter:blur(18px);
}
.server-card::after{
content:"";
position:absolute;
width:180px;
height:180px;
border-radius:50%;
filter:blur(55px);
opacity:.12;
right:-50px;
top:-50px;
background:var(--purple);
pointer-events:none;
}
.server-card.bedrock::after{
background:var(--blue);
}
.server-top{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:15px;
}
.platform{
display:flex;
align-items:center;
gap:12px;
}
.platform-icon{
width:46px;
height:46px;
border-radius:14px;
display:grid;
place-items:center;
font-size:21px;
background:rgba(255,255,255,.06);
border:1px solid var(--line);
}
.platform h3{
font-size:21px;
}
.platform small{
display:block;
color:var(--muted);
margin-top:4px;
}
.status-chip{
border:1px solid var(--line);
background:rgba(255,255,255,.04);
color:#c4cad5;
padding:7px 10px;
border-radius:999px;
font-size:11px;
white-space:nowrap;
}
.status-chip.online{
color:#86efac;
background:rgba(34,197,94,.08);
border-color:rgba(34,197,94,.18);
}
.server-address{
margin-top:23px;
padding:16px;
background:rgba(0,0,0,.18);
border:1px solid var(--line);
border-radius:15px;
}
.server-address label{
display:block;
color:var(--muted);
font-size:10px;
text-transform:uppercase;
letter-spacing:1.2px;
margin-bottom:7px;
}
.address-text{
font-family:monospace;
font-size:17px;
font-weight:800;
word-break:break-all;
}
.server-meta{
display:grid;
grid-template-columns:1fr 1fr;
gap:10px;
margin-top:12px;
}
.meta-box{
padding:13px;
background:rgba(255,255,255,.03);
border:1px solid var(--line);
border-radius:13px;
}
.meta-box span{
display:block;
color:var(--muted);
font-size:10px;
text-transform:uppercase;
letter-spacing:1px;
margin-bottom:5px;
}
.meta-box strong{
font-size:14px;
}
.server-buttons{
display:flex;
gap:9px;
margin-top:15px;
}
.server-buttons .btn{
flex:1;
min-height:46px;
}
/* FEATURES */
.feature-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:15px;
}
.feature{
padding:23px;
border:1px solid var(--line);
border-radius:18px;
background:var(--card);
transition:.22s;
}
.feature:hover{
transform:translateY(-5px);
background:var(--card2);
border-color:rgba(139,92,246,.25);
}
.feature-icon{
width:43px;
height:43px;
display:grid;
place-items:center;
border-radius:13px;
background:rgba(139,92,246,.1);
margin-bottom:17px;
font-size:19px;
}
.feature h3{
font-size:18px;
margin-bottom:8px;
}
.feature p{
color:var(--muted);
line-height:1.55;
font-size:14px;
}
/* TEAM */
.team-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:17px;
}
.person{
display:flex;
gap:16px;
align-items:center;
padding:22px;
border:1px solid var(--line);
border-radius:18px;
background:var(--card);
}
.avatar{
width:58px;
height:58px;
border-radius:17px;
display:grid;
place-items:center;
font-weight:900;
font-size:20px;
flex:none;
background:linear-gradient(135deg,var(--purple),var(--pink));
}
.avatar.blue{
background:linear-gradient(135deg,#0284c7,#38bdf8);
}
.person h3{
font-size:18px;
}
.person p{
color:var(--muted);
margin-top:4px;
font-size:13px;
}
/* RULES */
.rules-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:15px;
}
.rule{
display:flex;
gap:13px;
align-items:flex-start;
padding:19px;
border:1px solid var(--line);
border-radius:16px;
background:var(--card);
}
.rule-num{
width:31px;
height:31px;
border-radius:10px;
display:grid;
place-items:center;
flex:none;
font-weight:900;
background:rgba(139,92,246,.12);
color:#c4b5fd;
}
.rule h4{
margin-bottom:5px;
}
.rule p{
color:var(--muted);
line-height:1.5;
font-size:13px;
}
/* FAQ */
.faq{
display:grid;
gap:11px;
}
details{
border:1px solid var(--line);
border-radius:16px;
background:var(--card);
overflow:hidden;
}
summary{
list-style:none;
cursor:pointer;
padding:19px 20px;
font-weight:800;
display:flex;
justify-content:space-between;
align-items:center;
gap:15px;
}
summary::-webkit-details-marker{
display:none;
}
summary::after{
content:"+";
color:#9ca3af;
font-size:22px;
transition:.2s;
}
details[open] summary::after{
content:"−";
}
.faq-answer{
color:var(--muted);
padding:0 20px 19px;
line-height:1.65;
font-size:14px;
}
/* CTA */
.cta{
position:relative;
overflow:hidden;
padding:45px;
border:1px solid var(--line);
border-radius:28px;
background:
radial-gradient(circle at 15% 20%,rgba(139,92,246,.2),transparent 30%),
radial-gradient(circle at 85% 70%,rgba(236,72,153,.16),transparent 30%),
var(--card);
box-shadow:var(--shadow);
}
.cta h2{
font-size:clamp(29px,5vw,50px);
letter-spacing:-1.5px;
max-width:750px;
}
.cta p{
color:var(--muted);
margin-top:11px;
max-width:650px;
line-height:1.6;
}
.cta-buttons{
display:flex;
flex-wrap:wrap;
gap:10px;
margin-top:22px;
}
/* FOOTER */
footer{
border-top:1px solid var(--line);
padding:35px 0 50px;
}
.footer-grid{
display:grid;
grid-template-columns:1.3fr .7fr .7fr;
gap:25px;
}
.footer-brand{
font-size:20px;
font-weight:900;
margin-bottom:8px;
}
footer p,
footer a{
color:var(--muted);
line-height:1.65;
font-size:13px;
}
.footer-title{
color:#fff;
font-weight:800;
margin-bottom:9px;
}
.footer-links{
display:grid;
gap:6px;
}
.copyright{
margin-top:30px;
padding-top:18px;
border-top:1px solid var(--line);
color:#666d7a;
font-size:12px;
}
/* TOAST */
.toast{
position:fixed;
left:50%;
bottom:24px;
transform:translate(-50%,20px);
background:#151823;
border:1px solid var(--line);
box-shadow:var(--shadow);
padding:13px 17px;
border-radius:13px;
opacity:0;
pointer-events:none;
transition:.25s;
z-index:2000;
font-size:13px;
}
.toast.show{
transform:translate(-50%,0);
opacity:1;
}
/* TOP BUTTON */
#topButton{
position:fixed;
right:20px;
bottom:20px;
width:45px;
height:45px;
display:grid;
place-items:center;
border:1px solid var(--line);
border-radius:13px;
background:rgba(15,17,25,.86);
color:#fff;
cursor:pointer;
opacity:0;
transform:translateY(10px);
pointer-events:none;
transition:.2s;
z-index:900;
backdrop-filter:blur(14px);
}
#topButton.visible{
opacity:1;
transform:translateY(0);
pointer-events:auto;
}
/* RESPONSIVE */
@media(max-width:900px){
.hero-grid{
grid-template-columns:1fr;
}
.showcase{
max-width:600px;
width:100%;
margin:auto;
}
.feature-grid{
grid-template-columns:1fr 1fr;
}
.footer-grid{
grid-template-columns:1fr 1fr;
}
}
@media(max-width:680px){
.nav{
min-height:68px;
}
.nav-links{
display:none;
}
.hero{
padding:60px 0 80px;
}
.hero h1{
font-size:54px;
letter-spacing:-3px;
}
.hero p{
font-size:15px;
}
section{
padding:65px 0;
}
.server-grid,
.team-grid,
.rules-grid,
.feature-grid{
grid-template-columns:1fr;
}
.cta{
padding:28px;
}
.footer-grid{
grid-template-columns:1fr;
}
.server-buttons{
flex-direction:column;
}
.server-meta{
grid-template-columns:1fr;
}
}
</style>
</head>
<body>
<header>
<div class="container nav">
<a href="#top" class="brand">
<div class="brand-logo">🌈</div>
<div>
RAINBOW TEAM
<small>MINECRAFT SERVER</small>
</div>
</a>
<nav class="nav-links">
<a href="#servers">Серверы</a>
<a href="#about">О проекте</a>
<a href="#team">Команда</a>
<a href="#rules">Правила</a>
<a href="#faq">FAQ</a>
</nav>
<button class="nav-btn" onclick="scrollToId('servers')">
Играть
</button>
</div>
</header>
<main id="top">
<!-- HERO -->
<section class="hero">
<div class="container hero-grid">
<div>
<div class="eyebrow">
<span class="pulse-dot"></span>
Официальный Minecraft-проект
</div>
<h1>
RAINBOW
<span class="gradient-text">TEAM</span>
</h1>
<p>
Minecraft-сервер Rainbow Team.
Информация о сервере, адреса подключения,
правила проекта и всё необходимое для игры
находятся в одном месте.
</p>
<div class="hero-actions">
<a href="#servers" class="btn btn-main">
⛏ Перейти к серверу
</a>
<a href="#rules" class="btn btn-secondary">
Правила проекта
</a>
</div>
<div class="hero-stats">
<div class="mini-stat">
<strong>Java + Bedrock</strong>
<span>Платформы</span>
</div>
<div class="mini-stat">
<strong>24/7</strong>
<span>Доступность</span>
</div>
<div class="mini-stat">
<strong>2026</strong>
<span>Проект</span>
</div>
</div>
</div>
<div class="showcase">
<div class="showcase-card">
<div class="showcase-top">
<strong>SERVER PANEL</strong>
<div class="showcase-top">
<strong>SERVER PANEL</strong>
<div class="server-badge">ONLINE SYSTEM</div>
</div>
<div class="cube">⛏</div>
<h2>Rainbow Team</h2>
<p>
Единая точка входа в проект.
Выбирай платформу, копируй адрес
и подключайся.
</p>
<div class="server-preview">
<div class="preview-item">
<span>Java</span>
<strong>play.rainbowteam.pics</strong>
</div>
<div class="preview-item">
<span>Bedrock</span>
<strong>play-3OIE.aternos.me</strong>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- SERVERS -->
<section id="servers">
<div class="container">
<div class="section-head">
<div class="section-kicker">CONNECT</div>
<h2 class="section-title">Серверы</h2>
<p class="section-desc">
Выбери нужную версию Minecraft и скопируй
адрес подключения.
</p>
</div>
<div class="server-grid">
<!-- JAVA -->
<article class="server-card">
<div class="server-top">
<div class="platform">
<div class="platform-icon">☕</div>
<div>
<h3>Java Edition</h3>
<small>PC / Java</small>
</div>
</div>
<div class="status-chip" id="javaStatus">
Проверка...
</div>
</div>
<div class="server-address">
<label>Адрес сервера</label>
<div class="address-text" id="javaAddress">
play.rainbowteam.pics
</div>
</div>
<div class="server-meta">
<div class="meta-box">
<span>Версия</span>
<strong>1.21.x</strong>
</div>
<div class="meta-box">
<span>Адрес</span>
<strong>play.rainbowteam.pics</strong>
</div>
</div>
<div class="server-buttons">
<button
class="btn btn-main"
onclick="copyText('play.rainbowteam.pics','Java IP скопирован')">
📋 Копировать
</button>
<button
class="btn btn-secondary"
onclick="showToast('Java: play.rainbowteam.pics')">
ℹ Инфо
</button>
</div>
</article>
<!-- BEDROCK -->
<article class="server-card bedrock">
<div class="server-top">
<div class="platform">
<div class="platform-icon">🟦</div>
<div>
<h3>Bedrock Edition</h3>
<small>Android / iOS / Windows / Console</small>
</div>
</div>
<div class="status-chip" id="bedrockStatus">
Проверка...
</div>
</div>
<div class="server-address">
<label>Адрес сервера</label>
<div class="address-text">
play-3OIE.aternos.me
</div>
</div>
<div class="server-meta">
<div class="meta-box">
<span>Порт</span>
<strong>19132</strong>
</div>
<div class="meta-box">
<span>Подключение</span>
<strong>Bedrock</strong>
</div>
</div>
<div class="server-buttons">
<button
class="btn btn-main"
onclick="copyText('play-3OIE.aternos.me','Bedrock IP скопирован')">
📋 Копировать IP
</button>
<button
class="btn btn-secondary"
onclick="copyText('19132','Порт скопирован')">
🔢 Копировать порт
</button>
</div>
</article>
</div>
</div>
</section>
<!-- ABOUT -->
<section id="about">
<div class="container">
<div class="section-head">
<div class="section-kicker">PROJECT</div>
<h2 class="section-title">
О Rainbow Team
</h2>
<p class="section-desc">
Проект создан вокруг Minecraft
и собственного игрового сервера.
Здесь собрана вся основная информация
без лишних разделов.
</p>
</div>
<div class="feature-grid">
<div class="feature">
<div class="feature-icon">🌐</div>
<h3>Свой домен</h3>
<p>
Официальная точка проекта —
rainbowteam.pics.
</p>
</div>
<div class="feature">
<div class="feature-icon">🖥</div>
<h3>Две платформы</h3>
<p>
Поддерживаются Java Edition
и Bedrock Edition.
</p>
</div>
<div class="feature">
<div class="feature-icon">⚡</div>
<h3>Быстрый доступ</h3>
<p>
Адрес сервера можно скопировать
одной кнопкой.
</p>
</div>
<div class="feature">
<div class="feature-icon">🛡</div>
<h3>Правила</h3>
<p>
Основные правила проекта находятся
прямо на официальном сайте.
</p>
</div>
<div class="feature">
<div class="feature-icon">📱</div>
<h3>Mobile First</h3>
<p>
Сайт нормально работает
на телефонах и планшетах.
</p>
</div>
<div class="feature">
<div class="feature-icon">🚀</div>
<h3>Развитие</h3>
<p>
Сайт рассчитан на добавление новых
функций и разделов.
</p>
</div>
</div>
</div>
</section>
<!-- TEAM -->
<section id="team">
<div class="container">
<div class="section-head">
<div class="section-kicker">TEAM</div>
<h2 class="section-title">
Команда
</h2>
<p class="section-desc">
Основные участники Rainbow Team.
</p>
</div>
<div class="team-grid">
<div class="person">
<div class="avatar">L</div>
<div>
<h3>@Liteporchik</h3>
<p>Основатель / разработка проекта</p>
</div>
</div>
<div class="person">
<div class="avatar blue">A</div>
<div>
<h3>@ALTAPULTA</h3>
<p>Участник Rainbow Team</p>
</div>
</div>
</div>
</div>
</section>
<!-- RULES -->
<section id="rules">
<div class="container">
<div class="section-head">
<div class="section-kicker">RULES</div>
<h2 class="section-title">
Правила сервера
</h2>
<p class="section-desc">
Базовые правила проекта.
</p>
</div>
<div class="rules-grid">
<div class="rule">
<div class="rule-num">01</div>
<div>
<h4>Без грифа</h4>
<p>
Не разрушай чужие постройки
и не забирай чужие ресурсы.
</p>
</div>
</div>
<div class="rule">
<div class="rule-num">02</div>
<div>
<h4>Без читов</h4>
<p>
Использование запрещённых преимуществ
может привести к блокировке.
</p>
</div>
</div>
<div class="rule">
<div class="rule-num">03</div>
<div>
<h4>Уважение</h4>
<p>
Не мешай другим игрокам
и соблюдай нормальное общение.
</p>
</div>
</div>
<div class="rule">
<div class="rule-num">04</div>
<div>
<h4>Без спама</h4>
<p>
Не засоряй игровой чат
одинаковыми сообщениями.
</p>
</div>
</div>
</div>
</div>
</section>
<!-- FAQ -->
<section id="faq">
<div class="container">
<div class="section-head">
<div class="section-kicker">FAQ</div>
<h2 class="section-title">
Частые вопросы
</h2>
</div>
<div class="faq">
<details>
<summary>
Как зайти с Java Edition?
</summary>
<div class="faq-answer">
Открой Minecraft Java Edition,
выбери «Сетевая игра» →
«Добавить сервер» и укажи:
<strong>play.rainbowteam.pics</strong>
</div>
</details>
<details>
<summary>
Как зайти с Bedrock Edition?
</summary>
<div class="faq-answer">
Адрес:
<strong>play-3OIE.aternos.me</strong><br>
Порт:
<strong>19132</strong>
</div>
</details>
<details>
<summary>
Где находится официальный сайт?
</summary>
<div class="faq-answer">
<strong>rainbowteam.pics</strong>
</div>
</details>
</div>
</div>
</section>
<!-- CTA -->
<section>
<div class="container">
<div class="cta">
<h2>
Rainbow Team —
один адрес для всего проекта.
</h2>
<p>
Выбирай свою платформу,
копируй адрес и подключайся.
</p>
<div class="cta-buttons">
<button
class="btn btn-main"
onclick="copyText('play.rainbowteam.pics','Java IP скопирован')">
☕ Java IP
</button>
<button
class="btn btn-secondary"
onclick="copyText('play-3OIE.aternos.me:19132','Bedrock адрес скопирован')">
🟦 Bedrock адрес
</button>
</div>
</div>
</div>
</section>
</main>
<!-- FOOTER -->
<footer>
<div class="container">
<div class="footer-grid">
<div>
<div class="footer-brand">
RAINBOW TEAM
</div>
<p>
Официальный Minecraft-проект.
<br>
rainbowteam.pics
</p>
</div>
<div>
<div class="footer-title">
Навигация
</div>
<div class="footer-links">
<a href="#servers">Серверы</a>
<a href="#about">О проекте</a>
<a href="#team">Команда</a>
<a href="#rules">Правила</a>
<a href="#faq">FAQ</a>
</div>
</div>
<div>
<div class="footer-title">
Команда
</div>
<div class="footer-links">
<a href="#">@Liteporchik</a>
<a href="#">@ALTAPULTA</a>
</div>
</div>
</div>
<div class="copyright">
© 2026 Rainbow Team.
Minecraft является товарным знаком Mojang Studios.
</div>
</div>
</footer>
<div class="toast" id="toast"></div>
<button
id="topButton"
onclick="window.scrollTo({top:0,behavior:'smooth'})">
↑
</button>
<script>
function showToast(message){
const toast = document.getElementById("toast");
toast.textContent = message;
toast.classList.add("show");
clearTimeout(window.toastTimer);
window.toastTimer = setTimeout(() => {
toast.classList.remove("show");
},2200);
}
function copyText(text,message){
if(navigator.clipboard){
navigator.clipboard.writeText(text)
.then(() => {
showToast(message || "Скопировано");
})
.catch(() => {
fallbackCopy(text);
});
}else{
fallbackCopy(text);
}
}
function fallbackCopy(text){
const area = document.createElement("textarea");
area.value = text;
document.body.appendChild(area);
area.select();
try{
document.execCommand("copy");
showToast("Скопировано");
}catch(e){
showToast(text);
}
area.remove();
}
function scrollToId(id){
const element = document.getElementById(id);
if(element){
element.scrollIntoView({
behavior:"smooth"
});
}
}
window.addEventListener("scroll",() => {
const button = document.getElementById("topButton");
if(window.scrollY > 500){
button.classList.add("visible");
}else{
button.classList.remove("visible");
}
});
async function checkJava(){
const element =
document.getElementById("javaStatus");
try{
const response = await fetch(
"https://api.mcsrvstat.us/3/play.rainbowteam.pics",
{
cache:"no-store"
}
);
const data = await response.json();
if(data && data.online){
element.textContent = "● ONLINE";
element.classList.add("online");
}else{
element.textContent = "● OFFLINE";
}
}catch{
element.textContent = "● STATUS N/A";
}
}
async function checkBedrock(){
const element =
document.getElementById("bedrockStatus");
try{
const response = await fetch(
"https://api.mcsrvstat.us/bedrock/3/play-3OIE.aternos.me:19132",
{
cache:"no-store"
}
);
const data = await response.json();
if(data && data.online){
element.textContent = "● ONLINE";
element.classList.add("online");
}else{
element.textContent = "● OFFLINE";
}
}catch{
element.textContent = "● STATUS N/A";
}
}
checkJava();
checkBedrock();
setInterval(checkJava,60000);
setInterval(checkBedrock,60000);
</script>
</body>
</html>