<!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>