|
|
| (Не показані 5 проміжних версій 2 користувачів) |
| Рядок 1: |
Рядок 1: |
| <html> | | <html> |
| <div> | | <head> |
| | <script src="/resources/status.js"></script> |
| | <title>MC Онлайн Гравці</title> |
| <style> | | <style> |
| .hidden { display: none !important; } | | #widget { |
| .fade-in {
| | padding: 1em; |
| animation: fadeIn 0.4s ease-in-out;
| | box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); |
| } | | } |
| @keyframes fadeIn { | | #players { |
| from { opacity: 0; } | | font-weight: bold; |
| to { opacity: 1; } | | list-style: none; |
| | padding: 0; |
| | margin: 0; |
| } | | } |
| </style>
| | #players li { |
| <style>
| | display: flex; |
| html, body {
| | align-items: center; |
| height: 100%;
| | padding: 5px 0; |
| margin: 0;
| | border-bottom: 1px solid #b1b3b6; |
| background-color: #121212;
| | } |
| color: #ffffff;
| | #players li:last-child { |
| }
| | border-bottom: none; |
| | | } |
| .page-wrapper {
| | #players img { |
| display: flex;
| | width: 24px; |
| flex-direction: column;
| | height: 24px; |
| min-height: 100vh;
| | margin-right: 10px; |
| }
| | border-radius: 4px; |
| | | border: 1px solid #a2a9b1; |
| h5 {
| | } |
| font-size: 1.64rem;
| | #players a { |
| line-height: 110%;
| | text-decoration: none; |
| margin: 1.093rem 0 0.656rem 0;
| | color: #555; |
| position: relative;
| | } |
| padding-bottom: 12px;
| | #players a:hover { |
| text-align: center;
| | text-decoration: underline; |
| }
| | color: #007bff; |
| | | } |
| h5::after {
| | .server-header { |
| content: '';
| | text-align: center; |
| position: absolute;
| | margin-bottom: 15px; |
| left: 5%;
| | box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); |
| bottom: 0;
| | } |
| height: 2px;
| | #playerCount { |
| width: 90%;
| | font-size: 1.2em; |
| background-color: #388e3c;
| | font-weight: bold; |
| border-radius: 1px;
| | margin-left: 10px; |
| }
| | } |
| | | #server-icon { |
| main {
| | width: 64px; |
| flex: 1 0 auto;
| | height: 64px; |
| }
| | display: block; |
| | | float: left; |
| nav {
| | } |
| background-color: #1b1b1b;
| | .status-container { |
| }
| | display: flex; |
| | | align-items: center; |
| .btn-green {
| | justify-content: flex-start; |
| background-color: #388e3c !important;
| | } |
| transition: transform 0.2s ease, box-shadow 0.2s ease;
| | .status-indicator { |
| }
| | width: 20px; |
| | | height: 20px; |
| .btn-green:hover {
| | border-radius: 50%; |
| transform: translateY(-2px);
| | margin-right: 10px; |
| box-shadow: 0 4px 8px rgba(56, 142, 60, 0.6);
| | animation: pulse 1.5s infinite; |
| }
| | } |
| | | .status-online { |
| .btn-green:active {
| | background-color: #4caf50; |
| transform: translateY(1px);
| | box-shadow: 0 0 10px #4caf50; |
| box-shadow: 0 2px 4px rgba(56, 142, 60, 0.4);
| | } |
| }
| | .status-offline { |
| | | background-color: #f44336; |
| .content {
| | box-shadow: 0 0 10px #f44336; |
| display: flex;
| | } |
| margin-top: 20px;
| | .status-text { |
| }
| | font-size: 1.2em; |
| | | font-weight: bold; |
| .main-content {
| | } |
| width: 70%;
| | .status-online-text { |
| padding: 20px;
| | color: #4caf50; |
| }
| | } |
| | | .status-offline-text { |
| .side-menu {
| | color: #f44336; |
| width: 30%;
| | } |
| background-color: #2c2c2c;
| | @keyframes pulse { |
| padding: 20px;
| | 0%, 100% { |
| border-left: 2px solid #388e3c;
| | transform: scale(1); |
| margin-bottom: 20px;
| | opacity: 1; |
| }
| |
| | |
| footer {
| |
| background-color: #1b1b1b;
| |
| padding: 20px;
| |
| color: #9e9e9e;
| |
| text-align: center;
| |
| }
| |
| | |
| #player-list {
| |
| font-size: 13px;
| |
| padding-left: 0;
| |
| list-style: none;
| |
| max-height: 150px;
| |
| overflow-y: auto;
| |
| }
| |
| | |
| #player-list li {
| |
| display: flex;
| |
| align-items: center;
| |
| gap: 8px;
| |
| margin-bottom: 4px;
| |
| white-space: nowrap;
| |
| padding-bottom: 5px;
| |
| box-shadow: 0 1px 1px rgba(56, 142, 60, 0.6);
| |
| }
| |
| | |
| table.placeholders-table {
| |
| width: 100%;
| |
| border-collapse: collapse;
| |
| margin-top: 20px;
| |
| }
| |
| | |
| table.placeholders-table th,
| |
| table.placeholders-table td {
| |
| border: 1px solid #388e3c;
| |
| padding: 8px;
| |
| text-align: left;
| |
| }
| |
| | |
| table.placeholders-table th {
| |
| background-color: #388e3c;
| |
| color: #fff;
| |
| }
| |
| </style>
| |
| <script>
| |
| document.addEventListener('DOMContentLoaded', function () { | |
| const serverAddress = @json($serverAddress); | |
| const playerName = @json($playerName); | |
| | |
| const onlineBlock = document.getElementById('server-online');
| |
| const offlineBlock = document.getElementById('server-offline');
| |
| const versionEl = document.getElementById('server-version'); | |
| const iconEl = document.getElementById('icon-img');
| |
| const motdEl = document.getElementById('motd');
| |
| const playersEl = document.getElementById('players-online');
| |
| const playerList = document.getElementById('player-list');
| |
| const uptimeEl = document.getElementById('server-uptime'); | |
| | |
| function applyFadeInOnce(block) {
| |
| if (block.classList.contains('hidden')) {
| |
| block.classList.remove('hidden');
| |
| block.classList.add('fade-in');
| |
| block.addEventListener('animationend', () => {
| |
| block.classList.remove('fade-in');
| |
| }, { once: true });
| |
| }
| |
| } | | } |
| | | 50% { |
| function parseMinecraftColors(text) { | | transform: scale(1.2); |
| const colors = { | | opacity: 0.7; |
| '0': '#000000', '1': '#0000AA', '2': '#00AA00', '3': '#00AAAA',
| |
| '4': '#AA0000', '5': '#AA00AA', '6': '#FFAA00', '7': '#AAAAAA',
| |
| '8': '#555555', '9': '#5555FF', 'a': '#55FF55', 'b': '#55FFFF',
| |
| 'c': '#FF5555', 'd': '#FF55FF', 'e': '#FFFF55', 'f': '#FFFFFF',
| |
| };
| |
| const formats = { 'l': 'b', 'n': 'u', 'm': 's', 'o': 'i' };
| |
| | |
| let result = '', openTags = [];
| |
| text = (text || '').replace(/&/g, '§');
| |
| | |
| for (let i = 0; i < text.length; i++) {
| |
| if (text[i] === '§') {
| |
| const code = text[i + 1]?.toLowerCase();
| |
| | |
| if (code === 'x' && i + 13 < text.length) {
| |
| const hex = `#${text[i + 2]}${text[i + 3]}${text[i + 4]}${text[i + 5]}${text[i + 6]}${text[i + 7]}`;
| |
| while (openTags.length && openTags[openTags.length - 1] === 'span') {
| |
| result += `</${openTags.pop()}>`;
| |
| }
| |
| result += `<span style="color:${hex}">`;
| |
| openTags.push('span');
| |
| i += 7;
| |
| continue;
| |
| }
| |
| | |
| i++;
| |
| if (code === 'r') {
| |
| while (openTags.length) result += `</${openTags.pop()}>`;
| |
| } else if (colors[code]) {
| |
| while (openTags.length && openTags[openTags.length - 1] === 'span') {
| |
| result += `</${openTags.pop()}>`;
| |
| }
| |
| result += `<span style="color:${colors[code]}">`;
| |
| openTags.push('span');
| |
| } else if (formats[code]) {
| |
| const tag = formats[code];
| |
| result += `<${tag}>`;
| |
| openTags.push(tag);
| |
| }
| |
| } else {
| |
| result += text[i];
| |
| }
| |
| }
| |
| | |
| while (openTags.length) result += `</${openTags.pop()}>`;
| |
| return result;
| |
| } | | } |
| | | } |
| async function updateStatus() {
| | #motd { |
| try { | | font-size: 1.2em; |
| const response = await fetch(`http://192.168.10.113:8888/placeholders?player=${encodeURIComponent(playerName)}`);
| | font-weight: bold; |
| const data = await response.json();
| | font-weight: bold; |
| | | color: #0056b3; |
| const isOnline = data["%pinger_online_bastion16.co.ua:35211%"]?.toLowerCase().includes("online");
| | background-color: #000000; |
| if (!isOnline) return showOfflineUI();
| | padding: 20px 10px 10px 10px; |
| | | /* border-radius: 4px; */ |
| offlineBlock.classList.add('hidden');
| | margin-bottom: 1em; |
| applyFadeInOnce(onlineBlock);
| | text-align: center; |
| | | height: 34px; |
| if (iconEl) {
| | } |
| fetch(`https://api.mcstatus.io/v2/status/java/${serverAddress}`)
| | #server-ip { |
| .then(res => res.json())
| | box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); |
| .then(msData => {
| | width: 21%; |
| if (iconEl.src !== msData.icon) {
| | font-size: 1.2em; */ |
| iconEl.src = msData.icon;
| | margin: 1em 0 auto; |
| }
| | padding: 10px; |
| });
| | /* background-color: #f1f1f1; */ |
| }
| | /* border: 1px solid #ccc; */ |
| | | display: block; |
| const version = data["%pinger_version_bastion16.co.ua:35211%"] || '';
| | cursor: pointer; |
| if (versionEl && versionEl.textContent !== version) versionEl.textContent = version;
| | text-align: center; |
| | | /* position: absolute; */ |
| const motd = parseMinecraftColors(data["%pinger_motd_bastion16.co.ua:35211%"]);
| | top: 50%; |
| if (motdEl && motdEl.innerHTML !== motd) motdEl.innerHTML = motd;
| | background-color: #fff; |
| | | color: #000; |
| const uptime = data["%server_uptime%"] || '—';
| | } |
| if (uptimeEl && uptimeEl.textContent !== uptime) uptimeEl.textContent = uptime;
| | #server-ip:hover { |
| | | background-color: #000; |
| const online = data["%pinger_players_bastion16.co.ua:35211%"] || '0';
| | color: #fff; |
| const max = data["%pinger_max_bastion16.co.ua:35211%"] || '0';
| | } |
| const playersText = `${online} / ${max}`;
| | #anketa { |
| if (playersEl && playersEl.textContent !== playersText) playersEl.textContent = playersText;
| | box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); |
| | | width: 21%; |
| if (playerList) {
| | font-size: 1.2em; */ |
| const playersRaw = data["%playerlist_players_list%"];
| | margin: 1em 0 auto; |
| const currentPlayers = Array.from(playerList.querySelectorAll('li')).map(li => li.textContent.trim());
| | padding: 10px; |
| const players = playersRaw ? playersRaw.split(',').map(p => p.trim()) : [];
| | /* background-color: #f1f1f1; */ |
| | | /* border: 1px solid #ccc; */ |
| if (players.map(p => p.toLowerCase()).join(',') !== currentPlayers.join(',').toLowerCase()) {
| | display: block; |
| playerList.innerHTML = '';
| | cursor: pointer; |
| if (players.length > 0) {
| | text-align: center; |
| players.forEach(name => {
| | /* position: absolute; */ |
| const li = document.createElement('li');
| | top: 50%; |
| li.style.display = 'flex';
| | background-color: #fff; |
| li.style.alignItems = 'center';
| | color: #000; |
| li.style.gap = '8px';
| | text-decoration: none; |
| | | } |
| const img = document.createElement('img');
| | #anketa:hover { |
| img.src = `https://mc-heads.net/avatar/${name}/24`;
| | background-color: #000; |
| img.alt = name;
| | color: #fff; |
| img.style.width = '24px';
| | } |
| img.style.height = '24px';
| | .link-header { |
| img.style.borderRadius = '4px';
| | display: flex; |
| | | align-items: center; |
| const span = document.createElement('span');
| | justify-content: space-evenly; |
| | | } |
| fetch(`http://192.168.10.113:8888/placeholders?player=${name}`)
| | </style> |
| .then(r => r.json())
| | </head> |
| .then(pData => {
| | <body> |
| const displayName = parseMinecraftColors(pData["%player_displayname%"] || name);
| | <div id="widget"> |
| const afk = pData["%essentials_afk%"] === 'yes' ? '💤' : '';
| | <div class="server-header"> |
| span.innerHTML = `${displayName} ${afk}`;
| | <img id="server-icon" src="" alt="Іконка сервера"> |
| });
| | <p id="motd" class="info">Завантаження MOTD...</p> |
| | |
| li.appendChild(img);
| |
| li.appendChild(span);
| |
| playerList.appendChild(li);
| |
| });
| |
| } else {
| |
| const li = document.createElement('li');
| |
| li.textContent = '— немає гравців —';
| |
| li.style.color = '#777';
| |
| playerList.appendChild(li);
| |
| }
| |
| }
| |
| }
| |
| } catch (e) {
| |
| console.error('Помилка отримання плейсхолдерів:', e);
| |
| showOfflineUI();
| |
| }
| |
| } | |
| | |
| function showOfflineUI() { | |
| onlineBlock.classList.add('hidden');
| |
| applyFadeInOnce(offlineBlock);
| |
| } | |
| | |
| updateStatus(); | |
| setInterval(updateStatus, 10000); | |
| });
| |
| </script>
| |
| | |
| <h5>Статус Сервера</h5>
| |
| | |
| <div id="server-status" class="card grey darken-3 white-text" style="margin-top: 20px; padding: 12px;">
| |
| <div id="server-online" class="card-content hidden"> | |
| <div style="display: flex; align-items: center; justify-content: space-between;"> | |
| <span style="font-size: 16px; font-weight: bold;">
| |
| <i class="material-icons green-text" style="vertical-align: middle;">cloud_done</i>
| |
| Сервер Online
| |
| </span>
| |
| <span id="server-version" class="green-text text-lighten-2" style="font-size: 14px;"></span>
| |
| </div> | |
| | |
| <div style="margin-top: 10px; text-align: center;">
| |
| <img id="icon-img" src="" alt="Server Icon" style="width: 48px; height: 48px;" /> | |
| </div> | | </div> |
| | | <div class=" link- header"> |
| <div style=" margin-top: 8px; font- size: 14px;"> | | <p id="server-ip" onclick="copyToClipboard('play.bastion16.co.ua')">IP Сервера</p> |
| <strong class="green-text">MOTD:</strong>
| | <a target=”_blank” href="https://bastion16.co.ua/anketa/survey" id="anketa">Анкета</a> |
| <div id="motd" style="color: #a5d6a7; font-size: 13px;"></div>
| | <a target=”_blank” href="https://map.bastion16.co.ua/" id="anketa">Мапа</a> |
| | <a target=”_blank” href="https://t.me/bastionanketa_bot" id="anketa">Написати адміну</a> |
| </div> | | </div> |
| | | <div class="status-container"> |
| <div style="margin-top: 6px;"> | | <div id="status-indicator" class="status-indicator status-offline"></div> |
| <strong class="green-text">Аптайм:</strong> <span id="server-uptime" style="color: #a5d6a7; font-size: 13px;"></span> | | <div id="status-text" class="status-text status-offline-text">Offline</div> |
| | <p id="playerCount" class="info">Завантаження...</p> |
| </div> | | </div> |
| | | <ul id="players"></ul> |
| <div style="margin-top: 8px; font-size: 14px;"> | |
| <strong class="green-text">Гравці онлайн:</strong>
| |
| <div id="players-online" class="white-text">—</div>
| |
| <ul id="player-list" class="white-text" style="list-style: none; padding-left: 0;"></ul>
| |
| </div>
| |
| </div>
| |
| | |
| <div id="server-offline" class="card-content hidden" style="text-align: center;">
| |
| <i class="material-icons red-text" style="vertical-align: middle;">cloud_off</i>
| |
| <p style="margin-top: 10px; color: #ef9a9a;">Сервер недоступний</p>
| |
| </div> | | </div> |
| </div>
| | </body> |
| </div>
| |
| </html> | | </html> |