DexWich

Раиса

<!DOCTYPE html>

<html lang="ru">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>MineWorld — Сервер Minecraft</title>

    <style>

        * {

            margin: 0;

            padding: 0;

            box-sizing: border-box;

        }

        body {

            font-family: 'Minecraft', Arial, sans-serif;

            background: linear-gradient(135deg, #2c3e50 0%, #3498db 100%);

            color: #ecf0f1;

            min-height: 100vh;

            padding: 20px;

        }

        .container {

            max-width: 900px;

            margin: 0 auto;

            background: rgba(44, 62, 80, 0.9);

            padding: 30px;

            border-radius: 15px;

            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);

            border: 3px solid #f1c40f;

        }

        h1 {

            text-align: center;

            color: #f1c40f;

            margin-bottom: 10px;

            font-size: 2.5em;

            text-shadow: 2px 2px 4px #000;

        }

        h2 {

            color: #e67e22;

            border-bottom: 2px solid #e67e22;

            padding-bottom: 8px;

            margin-top: 20px;

        }

        .section {

            margin-bottom: 30px;

            padding: 20px;

            background: rgba(52, 73, 94, 0.8);

            border-radius: 10px;

            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);

        }

        button {

            background: #e67e22;

            color: white;

            border: none;

            padding: 12px 25px;

            border-radius: 5px;

            cursor: pointer;

            font-size: 1em;

            transition: all 0.3s ease;

        }

        button:hover {

            background: #d35400;

            transform: scale(1.05);

        }

        .balance {

            text-align: center;

            margin-bottom: 20px;

            font-size: 1.2em;

        }

        .gems-balance {

            color: #2ecc71; /* Зелёный для Гем */

            font-weight: bold;

        }

        .dexcoin-balance {

            color: #f1c40f; /* Золотой для DexCoin */

            font-weight: bold;

        }

        .server-status {

            text-align: center;

            margin: 20px 0;

            padding: 15px;

            background: rgba(46, 204, 113, 0.2);

            border-radius: 10px;

            border-left: 4px solid #2ecc71;

        }

        .status-online { color: #2ecc71; }

        .status-offline { color: #e74c3c; }

        .donate-slider-wrapper {

            display: flex;

            align-items: center;

            justify-content: center;

            margin: 15px 0;

        }

        .slider-arrow {

            width: 30px;

            height: 30px;

            border: none;

            border-radius: 50%;

            background: #e67e22;

            color: white;

            font-size: 16px;

            cursor: pointer;

            display: flex;

            align-items: center;

            justify-content: center;

        }

        .amount-display {

            font-weight: bold;

            font-size: 1.1em;

            min-width: 120px;

            text-align: center;

            color: #f39c12;

        }

        .vip-packages {

            display: grid;

            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

            gap: 20px;

        }

        .vip-card {

            background: rgba(44, 62, 80, 0.9);

            padding: 20px;

            border-radius: 10px;

            text-align: center;

            border: 2px solid #e67e22;

            transition: transform 0.3s;

        }

        .vip-card:hover {

            transform: translateY(-5px);

        }

        .vip-card h3 {

            color: #f1c40f;

            margin-bottom: 10px;

        }

        .price {

            font-size: 1.3em;

            font-weight: bold;

            color: #2ecc71;

            margin: 15px 0;

        }

        .vip-card ul {

            list-style: none;

            margin: 15px 0;

            text-align: left;

        }

        .vip-card li {

            padding: 5px 0;

            color: #bdc3c7;

        }

        .notification {

            position: fixed;

            top: 20px;

            right: 20px;

            background: #2ecc71;

            color: white;

            padding: 15px 20px;

            border-radius: 5px;

            box-shadow: 0 4px 6px rgba(0,0,0,0.1);

            z-index: 1000;

            opacity: 0;

            transition: opacity 0.5s;

        }

    </style>

</head>

<body>

    <div class="container">

        <h1>MineWorld</h1>

        <p style="text-align: center; color: #bdc3c7; margin-bottom: 30px;">Твой мир возможностей в Minecraft</p>

        <!-- Балансы валют -->

        <div class="balance">

            <span class="gems-balance">Ваш баланс: <span id="playerGems">1500</span> Гем</span><br>

            <span class="dexcoin-balance">DexCoin: <span id="playerDexCoin">0</span></span>

        </div>

        <!-- Статус сервера -->

        <section class="section">

            <h2>Статус сервера</h2>

            <div class="server-status">