Aurora/index.html at main · AlbeePython/Aurora · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CRAFTX</title>
    <script src="https://cloudflare.com"></script>
    <link href="https://googleapis.com" rel="stylesheet">
    <style>
        :root {
            --bg: #0f172a;
            --card: #1e293b;
            --accent: #38bdf8;
            --text: #f8fafc;
            --radius: 16px;
        }

        body {
            background: var(--bg);
            color: var(--text);
            font-family: 'Inter', sans-serif;
            margin: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 20px;
        }

        /* Навигация */
        nav {
            display: flex;
            gap: 15px;
            margin-bottom: 40px;
            background: var(--card);
            padding: 10px 20px;
            border-radius: 50px;
            border: 1px solid rgba(255,255,255,0.05);
            position: sticky;
            top: 20px;
            z-index: 100;
        }

        .nav-btn {
            background: none;
            border: none;
            color: #94a3b8;
            padding: 10px 20px;
            cursor: pointer;
            font-weight: 600;
            transition: 0.3s;
            border-radius: 25px;
        }

        .nav-btn.active {
            background: var(--accent);
            color: var(--bg);
        }

        /* Контентные секции */
        .page-section { display: none; width: 100%; max-width: 1100px; animation: fadeIn 0.4s ease; }
        .page-section.active { display: block; }

        h1 { font-weight: 800; margin-bottom: 40px; color: var(--accent); text-transform: uppercase; letter-spacing: 2px; text-align: center; }

        /* Донаты (Сетка) */
        .grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 25px;
        }

        .card {
            background: var(--card);
            padding: 30px;
            border-radius: var(--radius);
            border: 1px solid rgba(255,255,255,0.05);
            text-align: center;
            transition: 0.3s;
        }

        .card:hover { transform: translateY(-5px); border-color: var(--accent); }
        .price { color: var(--accent); font-weight: 600; font-size: 1.1rem; margin-bottom: 20px; display: block; }

        .buy-btn {
            background: var(--accent); color: var(--bg); border: none; padding: 14px;
            width: 100%; border-radius: 10px; font-weight: 800; cursor: pointer; text-transform: uppercase;
        }

        /* Стили раздела Информация */
        .info-container {
            background: var(--card);
            padding: 40px;
            border-radius: var(--radius);
            line-height: 1.6;
            border: 1px solid rgba(255,255,255,0.05);
        }
        .info-container h2 { color: var(--accent); margin-top: 0; }
        .info-container ul { padding-left: 20px; color: #cbd5e1; }
        .info-container li { margin-bottom: 10px; }

        /* Личный кабинет */
        .dev-box {
            text-align: center;
            padding: 100px 20px;
            background: rgba(255,255,255,0.02);
            border-radius: var(--radius);
            border: 2px dashed #334155;
        }

        /* Модалка (из прошлого кода) */
        .modal-overlay {
            position: fixed; inset: 0; background: rgba(0,0,0,0.85); backdrop-filter: blur(8px);
            display: none; justify-content: center; align-items: center; z-index: 1000;
        }
        .modal { background: var(--card); width: 95%; max-width: 800px; border-radius: var(--radius); display: flex; overflow: hidden; border: 1px solid rgba(255,255,255,0.1); }
        .side-pay { flex: 1; background: rgba(0,0,0,0.2); padding: 30px; border-right: 1px solid rgba(255,255,255,0.05); }
        .side-info { flex: 1.6; padding: 30px; display: none; }
        .side-info.active { display: block; }
        .pay-item { padding: 15px; border: 1px solid var(--accent); border-radius: 10px; color: var(--accent); text-align: center; font-weight: 600; cursor: pointer; margin-bottom: 10px; }
        .copy-box { background: #0f172a; border: 2px dashed var(--accent); padding: 12px; text-align: center; border-radius: 10px; cursor: pointer; margin: 15px 0; font-weight: 800; color: var(--accent); }
        .warning-box { background: rgba(239, 68, 68, 0.15); border-left: 4px solid #ef4444; padding: 15px; margin: 15px 0; font-size: 0.85rem; color: #fca5a5; }

        #receipt-render { position: absolute; left: -9999px; width: 350px; background: white; color: black; padding: 25px; font-family: 'Courier New', monospace; }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; } }
    </style>
</head>
<body>

    <nav>
        <button class="nav-btn active" onclick="showPage('donate', this)">Донаты</button>
        <button class="nav-btn" onclick="showPage('info', this)">Информация</button>
        <button class="nav-btn" onclick="showPage('profile', this)">Личный кабинет</button>
    </nav>

    <!-- СЕКЦИЯ: ДОНАТЫ -->
    <section id="donate" class="page-section active">
        <h1>CRAFTX SERVER STORE</h1>
        <div class="grid">
            <div class="card"><h3>LEGEND</h3><span class="price">50 руб. / 100 coins</span><button class="buy-btn" onclick="openBuy('LEGEND', '50 рублей')">Купить</button></div>
            <div class="card"><h3>VAPER</h3><span class="price">70 рублей</span><button class="buy-btn" onclick="openBuy('VAPER', '70 рублей')">Купить</button></div>
            <div class="card"><h3>TOPER</h3><span class="price">150 рублей</span><button class="buy-btn" onclick="openBuy('TOPER', '150 рублей')">Купить</button></div>
            <div class="card"><h3>MILLENIAL</h3><span class="price">200 рублей</span><button class="buy-btn" onclick="openBuy('MILLENIAL', '200 рублей')">Купить</button></div>
            <div class="card"><h3>JUNIOR</h3><span class="price">250 рублей</span><button class="buy-btn" onclick="openBuy('JUNIOR', '250 рублей')">Купить</button></div>
            <div class="card"><h3>HYDRA</h3><span class="price">500 рублей</span><button class="buy-btn" onclick="openBuy('HYDRA', '500 рублей')">Купить</button></div>
        </div>
    </section>

    <!-- СЕКЦИЯ: ИНФОРМАЦИЯ -->
    <section id="info" class="page-section">
        <h1>О ПРОЕКТЕ CRAFTX</h1>
        <div class="info-container">
            <h2>Добро пожаловать в будущее выживания!</h2>
            <p><b>CraftX</b> — это технологичный Minecraft сервер нового поколения. Мы объединили стабильность ядра <b>Spigot</b> с безграничными возможностями <b>Fabric</b> аддонов, чтобы создать уникальный игровой опыт.</p>

            <p>Наш проект работает на версии <b>1.16.5</b> и поддерживает вход со всех актуальных версий игры вплоть до <b>апреля 2026 года</b>. Вам не нужно постоянно менять лаунчеры — мы всегда на связи!</p>

            <h3>Почему выбирают нас?</h3>
            <ul>
                <li><b>Технологии:</b> Использование Fabric-адонов позволяет нам внедрять уникальные механики, которые вы не встретите на обычных серверах.</li>
                <li><b>Производительность:</b> Оптимизированный код обеспечивает высокий TPS даже при большом онлайне.</li>
                <li><b>Слышим каждого:</b> Мы проводим еженедельные голосования в Discord и внедряем идеи, предложенные нашими игроками.</li>
                <li><b>Постоянный прогресс:</b> Новые ивенты, боссы и самописные плагины обновляются ежемесячно.</li>
            </ul>

            <p>Станьте частью истории CraftX уже сегодня. Наша миссия — создать комфортное комьюнити, где каждый найдет себе занятие по душе, будь то грандиозные постройки или захватывающее выживание.</p>
            <p style="color:var(--accent); font-weight:800; text-align:center;">CRAFTX — Сделано игроками для игроков.</p>
        </div>
    </section>

    <!-- СЕКЦИЯ: ЛИЧНЫЙ КАБИНЕТ -->
    <section id="profile" class="page-section">
        <h1>ЛИЧНЫЙ КАБИНЕТ</h1>
        <div class="dev-box">
            <h2 style="color:#64748b">РАЗДЕЛ В РАЗРАБОТКЕ</h2>
            <p style="color:#475569">Совсем скоро здесь появится статистика игрока, управление скинами и история покупок.</p>
            <div style="font-size: 3rem; margin-top: 20px;">⚙️</div>
        </div>
    </section>

    <!-- Модальное окно покупки (остается неизменным по логике) -->
    <div class="modal-overlay" id="m-overlay">
        <div class="modal">
            <div class="side-pay">
                <h3>Оплата</h3>
                <div class="pay-item" onclick="switchStep('step-2')">СБП (QR-код)</div>
                <div class="pay-item" onclick="switchStep('step-steam')">Steam</div>
                <div class="pay-bad">Крипта (N/A)</div>
                <button style="margin-top:20px; background:none; border:1px solid #444; color:#aaa; cursor:pointer; width:100%; padding:5px; border-radius:5px" onclick="closeModal()">Отмена</button>
            </div>
            <div class="side-info active" id="step-1">
                <h3>Оформление</h3>
                <p>Товар: <b id="p-name"></b></p>
                <p>Цена: <b id="p-price" style="color:var(--accent)"></b></p>
                <input type="email" id="u-email" placeholder="Ваш Email">
                <div class="policy"><input type="checkbox" id="u-agree"> Согласен с политикой</div>
                <p><small>Выберите метод оплаты слева</small></p>
            </div>
            <div class="side-info" id="step-2" style="text-align:center;">
                <h3>Сканируйте QR</h3>
                <img src="pay.png" width="180" style="background:white; padding:10px; border-radius:10px;" onerror="this.src='https://placeholder.com'">
                <button class="buy-btn" style="margin-top:15px" onclick="finish()">Я ОПЛАТИЛ</button>
            </div>
            <div class="side-info" id="step-steam">
                <h3>Steam Оплата</h3>
                <div class="copy-box" onclick="copyText('negative_dash')">negative_dash</div>
                <p><small>Оплатите через <a href="https://ggsel.net/catalog/product/avtopopolnenie-balansa-steam-247-rub-kzt-uah-4352988" target="_blank" style="color:var(--accent)">партнера</a> и нажмите кнопку:</small></p>
                <div class="warning-box">Сделайте скриншот чека!</div>
                <button class="buy-btn" onclick="finishSteam()">Я ОПЛАТИЛ</button>
            </div>
        </div>
    </div>

    <!-- Чек -->
    <div id="receipt-render">
        <center><h2>CRAFTX PROJECT</h2><p>ЧЕК ОБ ОПЛАТЕ</p></center>
        <hr><p>Товар: <span id="r-item"></span></p><p>Сумма: <span id="r-price"></span></p><p>Email: <span id="r-email"></span></p><p>ID: <span id="r-id"></span></p>
    </div>

    <script>
        function showPage(pageId, btn) {
            document.querySelectorAll('.page-section').forEach(s => s.classList.remove('active'));
            document.querySelectorAll('.nav-btn').forEach(b => b.classList.remove('active'));
            document.getElementById(pageId).classList.add('active');
            btn.classList.add('active');
        }

        let selName = ""; let selPrice = "";
        function openBuy(n, p) {
            selName = n; selPrice = p;
            document.getElementById('p-name').innerText = n;
            document.getElementById('p-price').innerText = p;
            document.getElementById('m-overlay').style.display = 'flex';
        }

        function closeModal() { document.getElementById('m-overlay').style.display = 'none'; location.reload(); }

        function switchStep(stepId) {
            const mail = document.getElementById('u-email').value;
            if(!mail.includes('@')) return alert('Введите почту!');
            if(!document.getElementById('u-agree').checked) return alert('Примите условия!');
            document.querySelectorAll('.side-info').forEach(el => el.classList.remove('active'));
            document.getElementById(stepId).classList.add('active');
        }

        function copyText(t) { navigator.clipboard.writeText(t); alert('Логин скопирован!'); }

        function finishSteam() {
            alert('Юху!\nПервый этап выполнен, напиши мне в Discord: albee_ldps\nПочта: craftx.minecraft@bk.ru');
            location.reload();
        }

        async function finish() {
            const ticket = 'ID-' + Math.floor(Math.random()*99999);
            const mail = document.getElementById('u-email').value;
            document.getElementById('r-item').innerText = selName;
            document.getElementById('r-price').innerText = selPrice;
            document.getElementById('r-email').innerText = mail;
            document.getElementById('r-id').innerText = ticket;

            const canvas = await html2canvas(document.getElementById('receipt-render'));
            const p = document.createElement('a'); p.href = canvas.toDataURL(); p.download = 'receipt.png'; p.click();

            alert('Готово! Чек сохранен. Отправь его админу albee_ldps');
            location.reload();
        }
    </script>
</body>
</html>