Statusy, Wersja Mobilna, Logo PaperMC

- Dodano statusy serwerów dla wszystkich (#13)
- Mobilna Wersja Panelu (#18)
- Zamieniono logo PaperMC na ich nowy link
This commit is contained in:
Andus 2025-05-09 23:02:30 +02:00
parent 60e2f73008
commit 07c9522444
8 changed files with 245 additions and 168 deletions

View file

@ -21,7 +21,7 @@ def home():
username = oidc.user_getfield("preferred_username")
server_path = f"./servers/mc-{username}"
has_server = os.path.exists(server_path)
return render_template("home.html", has_server=has_server)
return render_template("home.html", has_server=has_server, is_logged_in=is_logged_in)
@main.route('/setup')
@ -61,8 +61,8 @@ def list_ads():
return jsonify(files)
@main.route("/servers")
def server_list():
@main.route("/status")
def servers_status():
servers_dir = "./servers"
server_dirs = [
d for d in os.listdir(servers_dir)
@ -73,18 +73,18 @@ def server_list():
for server_dir in server_dirs:
server_name = server_dir
server_status = "stopped"
server_status = "Offline"
try:
container = client.containers.get(server_name)
if container.status == "running":
server_status = "running"
server_status = "Online"
except NotFound:
pass
server_data.append({"name": server_name, "status": server_status})
return render_template('server_list.html', servers=server_data)
return render_template('servers_list.html', servers=server_data)
@main.app_errorhandler(404)

View file

@ -1,3 +1,6 @@
/* Imports */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap');
/* Reset & Base Styles */
* {
margin: 0;
@ -103,7 +106,7 @@ h2 {
/* Tabs */
.tabs {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
grid-template-columns: repeat(3, 1fr);
gap: 14px;
margin-bottom: 26px;
}
@ -209,6 +212,7 @@ h2 {
.btn-primary { background: #4a5aef; color: white; box-shadow: 0 0 10px #4a5aef99; }
.btn-success { background: #2ecc71; color: white; box-shadow: 0 0 10px #2ecc7199; }
.btn-danger { background: #e74c3c; color: white; box-shadow: 0 0 10px #e74c3c99; }
.btn-worsedanger { background: #8b0000; color: white; box-shadow: 0 0 10px #8b000099; }
.btn-warning { background: #f39c12; color: black; box-shadow: 0 0 10px #f39c1288; }
.btn-info { background: #3498db; color: white; box-shadow: 0 0 10px #3498db99; }
@ -256,18 +260,7 @@ h2 {
background-color: #666;
}
/* Chart Container */
.chart-container {
background: #12121c;
padding: 20px;
border-radius: 14px;
margin-top: 30px;
border: 1px solid #232334;
box-shadow: 0 0 12px #1a1a2a;
overflow-x: auto;
}
body > *:not(script):not(style):not(.cursor-glow) {
body > *:not(.cursor-glow) {
animation: growIn 0.6s ease-out;
}
@ -577,117 +570,187 @@ a.non-link:hover {
color: #000;
}
/* Servers Status */
.server-table-container {
overflow-x: auto;
padding: 1rem;
border-radius: 16px;
background: rgba(14, 14, 26, 0.6);
backdrop-filter: blur(12px);
border: 1px solid #1a1a2a;
box-shadow: 0 0 24px rgba(74, 90, 239, 0.15);
}
.server-table {
width: 100%;
border-collapse: collapse;
color: #f0f0f0;
font-size: 0.95rem;
border-radius: 12px;
overflow: hidden;
}
.server-table thead {
background: linear-gradient(145deg, #1a1a2f, #23233a);
text-transform: uppercase;
letter-spacing: 0.05em;
font-size: 0.85rem;
color: #b9c5ff;
}
.server-table th,
.server-table td {
padding: 1rem;
text-align: left;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.server-table tbody tr:hover {
background: rgba(255, 255, 255, 0.03);
transition: background 0.3s ease;
}
.server-table th:first-child,
.server-table td:first-child {
border-left: none;
}
.server-table th:last-child,
.server-table td:last-child {
border-right: none;
}
.server-table tbody tr {
box-shadow: inset 0 0 0 rgba(0, 0, 0, 0);
transition: box-shadow 0.2s ease;
}
.server-table tbody tr:hover {
box-shadow: inset 0 0 12px rgba(255, 255, 255, 0.03);
}
.status-label {
display: inline-block;
padding: 0.4em 0.75em;
border-radius: 999px;
font-weight: 600;
font-size: 0.875rem;
text-transform: capitalize;
color: white;
}
.status-label.online {
background-color: #2ecc71;
}
.status-label.offline {
background-color: #e74c3c;
}
/* Mobile Tweaks */
@media (max-width: 480px) {
@media (max-width: 768px) {
html {
font-size: clamp(14px, 2.5vw, 16px);
font-size: clamp(15px, 4vw, 16px);
}
/* Heading adjustment */
h2 {
font-size: 1.5rem;
body {
padding: 0 8px;
}
h1, h2, h3 {
line-height: 1.2;
}
/* Dashboard Card */
.dashboard-card {
padding: 16px;
max-width: 100%;
box-sizing: border-box;
}
.tabs {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
margin-bottom: 12px;
}
/* Tab buttons */
.tab-button {
padding: 10px;
font-size: 0.85rem;
padding: 12px;
font-size: 0.95rem;
width: 100%;
box-sizing: border-box;
}
/* Square button adjustments */
.square-button {
display: flex;
align-items: center;
width: 100%;
aspect-ratio: unset;
flex-direction: row;
justify-content: flex-start;
gap: 12px;
padding: 10px;
font-size: 0.9rem;
padding: 12px;
font-size: 0.95rem;
}
.square-button img {
width: 32px;
height: auto;
margin: 0;
}
/* Navigation Bar */
.top-nav {
padding: 12px;
font-size: 0.9rem;
flex-direction: column;
align-items: flex-start;
align-items: center;
justify-content: center;
text-align: center;
}
.nav-links a {
margin-left: 10px;
font-size: 0.9rem;
.nav-links {
display: flex;
flex-direction: row;
align-items: center;
margin-top: 12px;
}
/* Console Output */
.console-output {
font-size: 0.8rem;
height: 160px;
}
/* Chart container */
.chart-container {
width: 100%;
height: auto;
padding: 12px;
}
/* Buttons */
.btn {
font-size: 0.9rem;
padding: 12px;
font-size: 0.95rem;
padding: 14px;
width: 100%;
}
/* Form layout */
form {
padding: 0 8px;
}
/* Tab content spacing */
.tab-content {
margin-top: 8px;
margin-top: 12px;
}
/* Particle background on small screens */
#particle-background {
display: none; /* Improves performance */
}
/* Charts Row - Allow horizontal scroll */
.charts-row {
overflow-x: auto;
padding-bottom: 10px;
}
/* Input Fields */
input[type="text"], input[type="number"], select {
input[type="text"], input[type="number"], select, textarea {
width: 100%;
font-size: 1rem;
padding: 10px;
box-sizing: border-box;
}
/* Adjust drop zone */
#drop-zone {
padding: 20px;
}
/* Adjust text area height */
.console-output {
height: 160px;
}
}
/* Additional general fixes for small screens */
/* Universal Fixes */
* {
max-width: 100%;
word-wrap: break-word;
box-sizing: border-box;
}

View file

@ -6,9 +6,6 @@
<button class="tab-button" onclick="showTab('controls')">Sterowanie 🎛️</button>
<button class="tab-button" onclick="showTab('console')">Konsola 📟</button>
<button class="tab-button" onclick="showTab('files')">Pliki 📁</button>
</div>
<div class="tabs">
<button class="tab-button" onclick="showTab('config')">Konfiguracja 🛠️</button>
<button class="tab-button" onclick="showTab('mods')">Mody/Pluginy 🧩</button>
<button class="tab-button" onclick="showTab('statistics')">Statystyki 📈</button>
@ -25,7 +22,7 @@
<button class="btn btn-success" onclick="sendAction('start')">Start</button>
<button class="btn btn-warning" onclick="sendAction('restart')">Restart</button>
<button class="btn btn-danger" onclick="sendAction('stop')">Stop</button><br>
<button class="btn btn-danger" onclick="deleteServer()">Usuń Serwer</button>
<button class="btn btn-worsedanger" onclick="deleteServer()">Usuń Serwer</button>
</div>
<div class="tab-panel" id="console">
@ -113,7 +110,7 @@
</div>
<div class="tab-panel" id="mods">
<h2>Zainstaluj mody/pluginy z Modrinth</h2>
<h4>Zainstaluj mody/pluginy z <span style="color: #2ecc71;">Modrinth</span></h4>
<input type="text" id="mod-search" placeholder="Wyszukaj mod/plugin..." oninput="searchMods()">
<div id="mod-results"></div>
</div>

View file

@ -2,20 +2,30 @@
{% block content %}
<div class="logo-wrapper">
<h2 class="logo-text">MCPanel</h2>
<p id="quote" class="splash-text">Jesteśmy 1.5x lepsi od Aternosa!</p>
<p id="quote" class="splash-text"></p>
</div>
<div class="tabs">
{% if is_logged_in %}
{% if has_server %}
<a class="tab-button" href="{{ url_for('main.dashboard') }}">Idź do panelu</a>
{% else %}
<a class="tab-button" href="{{ url_for('main.setup') }}">Ustaw własny serwer</a>
{% endif %}
{% else %}
<a class="tab-button" href="{{ url_for('main.dashboard') }}">Zaloguj się</a>
{% endif %}
<a class="tab-button" href="#news">Wiadomości</a>
</div>
<div id="news">
<!-- Z Tagami jak: WERSJA PANELU, PROBLEM -->
<h3>Wiadomości:</h3>
<p>Soon&trade;</p>
</div>
<script>
const quotes = [
"Jesteśmy 2x lepsi od Aternosa!",
"Twój serwer, Twoje zasady!",
"Stabilność? Nie znam takiego słowa!",
"Zero kolejki, tylko gra!",

View file

@ -3,6 +3,7 @@
<head>
<meta charset="UTF-8">
<title>MCPanel</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
</head>
@ -22,8 +23,9 @@
<div class="nav-logo"><a href="/">MCPanel <h6>BETA</h6></a></div>
<div class="nav-links">
<a href="/dashboard">Panel</a>
<a href="/status">Statusy</a>
<a style="color: cornflowerblue;" href="/donate">Donate</a>
<a href="/logout">Wyloguj</a>
<a style="color: red;" href="/logout">Wyloguj</a>
</div>
</nav>
@ -31,7 +33,7 @@
{% block content %}{% endblock %}
</div>
<div id="ad-banner" class="ad-banner"></div>
<p>Wersja: v0.2</p>
<p>Wersja: v0.3</p>
<script>
window.addEventListener('dragover', e => e.preventDefault());
window.addEventListener('drop', e => e.preventDefault());

View file

@ -1,27 +0,0 @@
{% extends "layout.html" %}
{% block content %}
<h1>Wszystkie Serwery</h1>
<div class="server-table">
<table border="1">
<thead>
<tr>
<th>Nazwa</th>
<th>Status</th>
</tr>
</thead>
<tbody>
{% for server in servers %}
<tr>
<td>{{ server.name }}</td>
<td>{{ server.status }}</td>
</tr>
{% else %}
<tr>
<td colspan="2">Nie znaleziono serwerów</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
{% endblock %}

View file

@ -0,0 +1,32 @@
{% extends "layout.html" %}
{% block content %}
<h1 class="page-title">Wszystkie Serwery</h1>
<div class="server-table-container">
<table class="server-table">
<thead>
<tr>
<th>Nazwa</th>
<th>Status</th>
</tr>
</thead>
<tbody>
{% for server in servers %}
<tr>
<td>{{ server.name }}</td>
<td>
<span class="status-label {{ 'online' if server.status == 'Online' else 'offline' }}">
{{ server.status }}
</span>
</td>
</tr>
{% else %}
<tr>
<td colspan="2" class="empty-row">Nie znaleziono serwerów</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
{% endblock %}

View file

@ -4,7 +4,7 @@
<div style="display: flex; justify-content: center; gap: 2rem; margin-bottom: 2rem;">
<button class="square-button" onclick="selectType(this, 'paper')">
<img src="https://docs.papermc.io/assets/images/papermc-logomark-512-f125384f3367cd4d9291ca983fcb7334.png" alt="Paper">
<img src="https://assets.papermc.io/brand/papermc_logo.min.svg" alt="Paper">
<b>Paper</b>
<br>
<p>Zoptymalizowany serwer Minecraft oferujący lepszą wydajność.</p>