admin/38676-vm
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Autosave: 20260222-004605

Browse Source
This commit is contained in:
Flatlogic Bot 2026-02-22 00:46:05 +00:00
parent 33fe61ffd9
commit 80577e3944
5 changed files with 599 additions and 412 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

119
admin.php Normal file
View File

@ -0,0 +1,119 @@
<?php
require_once 'db/config.php';
$db = db();
// MJ Actions
if (isset($_POST['reset_world'])) {
$db->exec("UPDATE cities SET current_red_percentage = 100, is_liberated = 0");
$db->exec("UPDATE planets SET terrestrial_control = 0, status = 'hostile'");
header("Location: admin.php?success=reset");
exit;
}
$total_planets = $db->query("SELECT COUNT(*) FROM planets")->fetchColumn();
$liberated_planets = $db->query("SELECT COUNT(*) FROM planets WHERE status = 'stable'")->fetchColumn();
$total_cities = $db->query("SELECT COUNT(*) FROM cities")->fetchColumn();
$liberated_cities = $db->query("SELECT COUNT(*) FROM cities WHERE is_liberated = 1")->fetchColumn();
$planets_stats = $db->query("SELECT * FROM planets ORDER BY terrestrial_control DESC")->fetchAll();
// Mock Resources
$resources = [
'Metal' => ['val' => '136 053', 'max' => '1 210 000', 'prod' => '+1 980', 'icon' => 'fa-cube'],
'Crystal' => ['val' => '127 322', 'max' => '1 010 000', 'prod' => '+1 703', 'icon' => 'fa-gem'],
'Deuterium' => ['val' => '32 277', 'max' => '50 000', 'prod' => '+28', 'icon' => 'fa-flask'],
'Energy' => ['val' => '2 100', 'max' => '2 100', 'prod' => '', 'icon' => 'fa-bolt'],
'Dark Matter' => ['val' => '4 930', 'max' => '', 'prod' => '', 'icon' => 'fa-atom']
];
?>
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Console MJ</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
<link href="assets/css/custom.css?v=<?php echo time(); ?>" rel="stylesheet">
<style>
body { background: #000; color: #fff; font-family: Arial, sans-serif; }
header#top-bar { height: auto; padding: 10px; background: rgba(10, 15, 30, 0.9); border-bottom: 2px solid #2d3545; display: flex; justify-content: center; align-items: center; }
.resource-container { display: flex; gap: 10px; flex-wrap: wrap; }
.resource-box { background: #0a0a0a; border: 1px solid #3b4252; padding: 5px 15px; text-align: left; min-width: 140px; position: relative; }
.resource-box i { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); opacity: 0.3; font-size: 20px; }
.resource-name { font-size: 10px; color: #8c92a3; text-transform: uppercase; }
.resource-value { font-size: 13px; font-weight: bold; color: #fff; }
#main-content { padding: 40px; display: flex; flex-direction: column; align-items: center; }
.view-frame { background: rgba(20, 30, 50, 0.8); border: 1px solid #4c566a; padding: 30px; max-width: 1000px; width: 100%; }
table { width: 100%; border-collapse: collapse; margin-top: 20px; }
th, td { border: 1px solid #2d3545; padding: 10px; text-align: left; font-size: 12px; }
th { background: #1e293b; color: #8c92a3; text-transform: uppercase; font-size: 10px; }
.stat-card { background: #0a0a0a; border: 1px solid #2d3545; padding: 15px; margin-bottom: 20px; }
.btn-danger { background: #bf616a; border: none; color: white; padding: 10px 20px; cursor: pointer; font-weight: bold; text-transform: uppercase; }
.btn-danger:hover { background: #d08770; }
.back-link { display: inline-block; margin-bottom: 20px; color: #88c0d0; text-decoration: none; font-weight: bold; }
.back-link:hover { text-decoration: underline; }
</style>
</head>
<body>
<header id="top-bar">
<div class="resource-container">
<?php foreach($resources as $name => $res): ?>
<div class="resource-box">
<div class="resource-name"><?php echo $name; ?></div>
<div class="resource-value"><?php echo $res['val']; ?></div>
<i class="fa-solid <?php echo $res['icon']; ?>"></i>
</div>
<?php endforeach; ?>
</div>
</header>
<main id="main-content">
<div class="view-frame">
<a href="index.php" class="back-link"><i class="fa-solid fa-arrow-left"></i> Retour au Secteur</a>
<h2 class="text-accent" style="margin-top: 0; color: #88c0d0;">Console de Commandement MJ</h2>
<div style="display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px;">
<div class="stat-card">
<div class="text-muted small">Planètes Libérées</div>
<div class="text-success" style="font-size: 20px; font-weight: bold; color: #a3be8c;"><?php echo $liberated_planets; ?> / <?php echo $total_planets; ?></div>
</div>
<div class="stat-card">
<div class="text-muted small">Villes Libérées</div>
<div class="text-success" style="font-size: 20px; font-weight: bold; color: #a3be8c;"><?php echo $liberated_cities; ?> / <?php echo $total_cities; ?></div>
</div>
<div class="stat-card">
<form method="POST" onsubmit="return confirm('Wipe total ?');">
<button type="submit" name="reset_world" class="btn-danger">RÉINITIALISER L'UNIVERS</button>
</form>
</div>
</div>
<table>
<thead>
<tr>
<th>Planète</th>
<th>Type</th>
<th>Statut</th>
<th>Contrôle Sol</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<?php foreach ($planets_stats as $p): ?>
<tr>
<td><?php echo $p['name']; ?></td>
<td><?php echo strtoupper($p['type'] ?? 'PLANET'); ?></td>
<td style="color: <?php echo ($p['status'] == 'stable' ? '#a3be8c' : '#bf616a'); ?>"><?php echo strtoupper($p['status']); ?></td>
<td><?php echo $p['terrestrial_control']; ?>%</td>
<td><a href="index.php?galaxy_id=<?php echo $p['galaxy_id'] ?? 1; ?>&sector_id=<?php echo $p['sector_id']; ?>" style="color: #88c0d0; text-decoration: none;">Localiser</a></td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
</div>
</main>
</body>
</html>

366
assets/css/custom.css
View File

@ -1,302 +1,128 @@
:root {
--bg-black: #000000;
--border-color: #2d3545;
--text-primary: #ffffff;
--text-muted: #8c92a3;
--accent-blue: #3b82f6;
--danger-red: #ef4444;
--success-green: #22c55e;
--nord-0: #2e3440;
--nord-1: #3b4252;
--nord-2: #434c5e;
--nord-3: #4c566a;
--nord-4: #d8dee9;
--nord-5: #e5e9f0;
--nord-6: #eceff4;
--nord-7: #8fbcbb;
--nord-8: #88c0d0;
--nord-9: #81a1c1;
--nord-10: #5e81ac;
}
body {
background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
background-size: 400% 400%;
animation: gradient 15s ease infinite;
color: #212529;
font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
font-size: 14px;
background-color: var(--bg-black);
color: var(--text-primary);
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: 13px;
margin: 0;
padding: 0;
}
.text-muted { color: var(--text-muted); }
.text-accent { color: var(--nord-8); }
.text-success { color: var(--success-green); }
.text-danger { color: var(--danger-red); }
/* Global Layout */
#main-wrapper {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.main-wrapper {
/* Resources Bar */
#top-bar {
background: var(--nord-0);
border-bottom: 2px solid var(--nord-1);
padding: 10px;
z-index: 100;
}
.resource-container {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
width: 100%;
padding: 20px;
box-sizing: border-box;
position: relative;
z-index: 1;
gap: 15px;
flex-wrap: wrap;
}
@keyframes gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
.resource-box {
background: rgba(0,0,0,0.5);
border: 1px solid var(--nord-3);
padding: 8px 15px;
min-width: 140px;
}
.chat-container {
width: 100%;
max-width: 600px;
background: rgba(255, 255, 255, 0.85);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 20px;
display: flex;
flex-direction: column;
height: 85vh;
box-shadow: 0 20px 40px rgba(0,0,0,0.2);
backdrop-filter: blur(15px);
-webkit-backdrop-filter: blur(15px);
overflow: hidden;
/* Grid System */
.galaxy-map {
display: grid;
gap: 2px;
background: var(--nord-1);
border: 2px solid var(--nord-3);
}
.chat-header {
padding: 1.5rem;
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
background: rgba(255, 255, 255, 0.5);
font-weight: 700;
font-size: 1.1rem;
display: flex;
justify-content: space-between;
align-items: center;
.slot {
background: #0a0a0a;
transition: all 0.2s;
}
.chat-messages {
flex: 1;
overflow-y: auto;
padding: 1.5rem;
display: flex;
flex-direction: column;
gap: 1.25rem;
.slot:hover {
background: #1a1a1a;
box-shadow: inset 0 0 10px rgba(136, 192, 208, 0.2);
}
/* Custom Scrollbar */
::-webkit-scrollbar {
width: 6px;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.3);
border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
background: rgba(255, 255, 255, 0.5);
}
.message {
max-width: 85%;
padding: 0.85rem 1.1rem;
border-radius: 16px;
line-height: 1.5;
font-size: 0.95rem;
box-shadow: 0 4px 15px rgba(0,0,0,0.05);
animation: fadeIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px) scale(0.95); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.message.visitor {
align-self: flex-end;
background: linear-gradient(135deg, #212529 0%, #343a40 100%);
color: #fff;
border-bottom-right-radius: 4px;
}
.message.bot {
align-self: flex-start;
background: #ffffff;
color: #212529;
border-bottom-left-radius: 4px;
}
.chat-input-area {
padding: 1.25rem;
background: rgba(255, 255, 255, 0.5);
border-top: 1px solid rgba(0, 0, 0, 0.05);
}
.chat-input-area form {
display: flex;
gap: 0.75rem;
}
.chat-input-area input {
flex: 1;
border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: 12px;
padding: 0.75rem 1rem;
outline: none;
background: rgba(255, 255, 255, 0.9);
transition: all 0.3s ease;
}
.chat-input-area input:focus {
border-color: #23a6d5;
box-shadow: 0 0 0 3px rgba(35, 166, 213, 0.2);
}
.chat-input-area button {
background: #212529;
color: #fff;
border: none;
padding: 0.75rem 1.5rem;
border-radius: 12px;
cursor: pointer;
font-weight: 600;
transition: all 0.3s ease;
}
.chat-input-area button:hover {
/* Forms */
input[type="number"], input[type="text"] {
background: #000;
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}
/* Background Animations */
.bg-animations {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
overflow: hidden;
pointer-events: none;
}
.blob {
position: absolute;
width: 500px;
height: 500px;
background: rgba(255, 255, 255, 0.2);
border-radius: 50%;
filter: blur(80px);
animation: move 20s infinite alternate cubic-bezier(0.45, 0, 0.55, 1);
}
.blob-1 {
top: -10%;
left: -10%;
background: rgba(238, 119, 82, 0.4);
}
.blob-2 {
bottom: -10%;
right: -10%;
background: rgba(35, 166, 213, 0.4);
animation-delay: -7s;
width: 600px;
height: 600px;
}
.blob-3 {
top: 40%;
left: 30%;
background: rgba(231, 60, 126, 0.3);
animation-delay: -14s;
width: 450px;
height: 450px;
}
@keyframes move {
0% { transform: translate(0, 0) rotate(0deg) scale(1); }
33% { transform: translate(150px, 100px) rotate(120deg) scale(1.1); }
66% { transform: translate(-50px, 200px) rotate(240deg) scale(0.9); }
100% { transform: translate(0, 0) rotate(360deg) scale(1); }
}
.admin-link {
font-size: 14px;
border: 1px solid var(--nord-3);
color: #fff;
text-decoration: none;
background: rgba(0, 0, 0, 0.2);
padding: 0.5rem 1rem;
border-radius: 8px;
transition: all 0.3s ease;
padding: 5px;
}
.admin-link:hover {
background: rgba(0, 0, 0, 0.4);
text-decoration: none;
}
/* Admin Styles */
.admin-container {
max-width: 900px;
margin: 3rem auto;
padding: 2.5rem;
background: rgba(255, 255, 255, 0.85);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-radius: 24px;
box-shadow: 0 20px 50px rgba(0,0,0,0.15);
border: 1px solid rgba(255, 255, 255, 0.4);
position: relative;
z-index: 1;
}
.admin-container h1 {
margin-top: 0;
color: #212529;
font-weight: 800;
}
.table {
width: 100%;
border-collapse: separate;
border-spacing: 0 8px;
margin-top: 1.5rem;
}
.table th {
background: transparent;
button {
background: var(--nord-3);
color: #fff;
border: none;
padding: 1rem;
color: #6c757d;
font-weight: 600;
text-transform: uppercase;
font-size: 0.75rem;
letter-spacing: 1px;
padding: 8px 15px;
cursor: pointer;
font-weight: bold;
transition: background 0.2s;
}
.table td {
background: #fff;
padding: 1rem;
border: none;
button:hover {
background: var(--nord-10);
}
.table tr td:first-child { border-radius: 12px 0 0 12px; }
.table tr td:last-child { border-radius: 0 12px 12px 0; }
.form-group {
margin-bottom: 1.25rem;
/* Admin Console Fixes */
.stat-card {
background: var(--nord-0);
border: 1px solid var(--nord-3);
padding: 20px;
}
.form-group label {
display: block;
margin-bottom: 0.5rem;
font-weight: 600;
font-size: 0.9rem;
}
.form-control {
table {
width: 100%;
padding: 0.75rem 1rem;
border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: 12px;
background: #fff;
transition: all 0.3s ease;
box-sizing: border-box;
border-collapse: collapse;
}
.form-control:focus {
outline: none;
border-color: #23a6d5;
box-shadow: 0 0 0 3px rgba(35, 166, 213, 0.1);
th {
background: var(--nord-1);
color: var(--nord-8);
text-align: left;
padding: 12px;
font-size: 11px;
}
td {
padding: 10px;
border-bottom: 1px solid var(--nord-1);
}

BIN
assets/pasted-20260221-235039-d61e193a.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 825 KiB

BIN
assets/pasted-20260222-000144-8d808175.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1012 KiB

526
index.php
View File

@ -1,150 +1,392 @@
<?php
declare(strict_types=1);
@ini_set('display_errors', '1');
@error_reporting(E_ALL);
@date_default_timezone_set('UTC');
require_once 'db/config.php';
$db = db();
$view = isset($_GET['view']) ? $_GET['view'] : 'sector';
$galaxy_id = isset($_GET['galaxy_id']) ? (int)$_GET['galaxy_id'] : 1;
$sector_id = isset($_GET['sector_id']) ? (int)$_GET['sector_id'] : 1;
// Grid size: 6x6 = 36 slots per sector
$grid_size = 36;
$grid_cols = 6;
$grid_rows = 6;
// Mock Resources (Following the screenshot's style)
$resources = [
'Metal' => ['val' => '136 053', 'max' => '1 210 000', 'prod' => '+1 980', 'icon' => 'fa-cube'],
'Crystal' => ['val' => '127 322', 'max' => '1 010 000', 'prod' => '+1 703', 'icon' => 'fa-gem'],
'Deuterium' => ['val' => '32 277', 'max' => '50 000', 'prod' => '+28', 'icon' => 'fa-flask'],
'Energy' => ['val' => '2 100', 'max' => '2 100', 'prod' => '', 'icon' => 'fa-bolt'],
'Dark Matter' => ['val' => '4 930', 'max' => '', 'prod' => '', 'icon' => 'fa-atom']
];
if ($view === 'sector') {
// Fetch Objects for the current sector (6x6 grid = 36 slots)
$stmt = $db->prepare("SELECT * FROM planets WHERE galaxy_id = ? AND sector_id = ? AND slot BETWEEN 1 AND ?");
$stmt->execute([$galaxy_id, $sector_id, $grid_size]);
$objects_raw = $stmt->fetchAll();
$grid = array_fill(1, $grid_size, null);
foreach ($objects_raw as $obj) {
if ($obj['slot'] >= 1 && $obj['slot'] <= $grid_size) {
$grid[$obj['slot']] = $obj;
}
}
$page_title = "Secteur $sector_id [G$galaxy_id]";
} else {
// Galaxy View: Fetch all planets in this galaxy to build mini-maps
$stmt = $db->prepare("SELECT sector_id, slot, status, type FROM planets WHERE galaxy_id = ? ORDER BY sector_id, slot ASC");
$stmt->execute([$galaxy_id]);
$all_planets = $stmt->fetchAll();
$sector_data = [];
$active_sectors = [];
foreach ($all_planets as $p) {
$sector_data[$p['sector_id']][$p['slot']] = [
'status' => $p['status'],
'type' => $p['type']
];
if (!in_array($p['sector_id'], $active_sectors)) {
$active_sectors[] = (int)$p['sector_id'];
}
}
$page_title = "Galaxie $galaxy_id";
}
function getStatusColor($status, $type = 'planet') {
if ($status == 'hostile') return '#ef4444'; // Rouge
if ($status == 'controlled' || $status == 'contested') return '#5e81ac'; // Bleu cassé
if ($status == 'allied' || $status == 'stable') return '#a3be8c'; // Vert cassé
if ($status == 'resource' || $type == 'asteroid') return '#f59e0b'; // Ressources / Orange
if ($status == 'pna') return '#d08770'; // PNA
if ($status == 'vortex' || $type == 'black_hole') return '#8b5cf6'; // Vortex / Violet
if ($status == 'empty' || $type == 'empty') return 'rgba(255,255,255,0.05)';
if ($status == 'inhabited') return '#eceff4'; // Planète inhabitée (Blanc cassé)
return 'rgba(255,255,255,0.05)'; // Fallback to empty
}
$phpVersion = PHP_VERSION;
$now = date('Y-m-d H:i:s');
?>
<!doctype html>
<html lang="en">
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>New Style</title>
<?php
// Read project preview data from environment
$projectDescription = $_SERVER['PROJECT_DESCRIPTION'] ?? '';
$projectImageUrl = $_SERVER['PROJECT_IMAGE_URL'] ?? '';
?>
<?php if ($projectDescription): ?>
<!-- Meta description -->
<meta name="description" content='<?= htmlspecialchars($projectDescription) ?>' />
<!-- Open Graph meta tags -->
<meta property="og:description" content="<?= htmlspecialchars($projectDescription) ?>" />
<!-- Twitter meta tags -->
<meta property="twitter:description" content="<?= htmlspecialchars($projectDescription) ?>" />
<?php endif; ?>
<?php if ($projectImageUrl): ?>
<!-- Open Graph image -->
<meta property="og:image" content="<?= htmlspecialchars($projectImageUrl) ?>" />
<!-- Twitter image -->
<meta property="twitter:image" content="<?= htmlspecialchars($projectImageUrl) ?>" />
<?php endif; ?>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">
<style>
:root {
--bg-color-start: #6a11cb;
--bg-color-end: #2575fc;
--text-color: #ffffff;
--card-bg-color: rgba(255, 255, 255, 0.01);
--card-border-color: rgba(255, 255, 255, 0.1);
}
body {
margin: 0;
font-family: 'Inter', sans-serif;
background: linear-gradient(45deg, var(--bg-color-start), var(--bg-color-end));
color: var(--text-color);
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
text-align: center;
overflow: hidden;
position: relative;
}
body::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><path d="M-10 10L110 10M10 -10L10 110" stroke-width="1" stroke="rgba(255,255,255,0.05)"/></svg>');
animation: bg-pan 20s linear infinite;
z-index: -1;
}
@keyframes bg-pan {
0% { background-position: 0% 0%; }
100% { background-position: 100% 100%; }
}
main {
padding: 2rem;
}
.card {
background: var(--card-bg-color);
border: 1px solid var(--card-border-color);
border-radius: 16px;
padding: 2rem;
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.1);
}
.loader {
margin: 1.25rem auto 1.25rem;
width: 48px;
height: 48px;
border: 3px solid rgba(255, 255, 255, 0.25);
border-top-color: #fff;
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.hint {
opacity: 0.9;
}
.sr-only {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap; border: 0;
}
h1 {
font-size: 3rem;
font-weight: 700;
margin: 0 0 1rem;
letter-spacing: -1px;
}
p {
margin: 0.5rem 0;
font-size: 1.1rem;
}
code {
background: rgba(0,0,0,0.2);
padding: 2px 6px;
border-radius: 4px;
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
footer {
position: absolute;
bottom: 1rem;
font-size: 0.8rem;
opacity: 0.7;
}
</style>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><?php echo $page_title; ?></title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
<link href="assets/css/custom.css?v=<?php echo time(); ?>" rel="stylesheet">
<style>
body {
background: #000;
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
color: #fff;
background-image: radial-gradient(circle at 50% 50%, #1a2a4a 0%, #000 70%);
background-attachment: fixed;
}
#main-wrapper {
display: flex;
flex-direction: column;
min-height: 100vh;
background: rgba(0, 0, 0, 0.4);
}
header#top-bar {
height: auto;
padding: 10px;
background: rgba(10, 15, 30, 0.95);
border-bottom: 2px solid #2d3545;
display: flex;
justify-content: center;
align-items: center;
}
.resource-container {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.resource-box {
background: #0a0a0a;
border: 1px solid #3b4252;
padding: 5px 15px;
text-align: left;
min-width: 140px;
position: relative;
}
.resource-box i { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); opacity: 0.3; font-size: 20px; }
.resource-name { font-size: 10px; color: #8c92a3; text-transform: uppercase; }
.resource-value { font-size: 13px; font-weight: bold; color: #fff; }
.resource-prod { font-size: 10px; color: #22c55e; }
#game-container {
flex-grow: 1;
padding: 20px;
display: flex;
flex-direction: column;
align-items: center;
}
.nav-panel {
background: rgba(20, 30, 50, 0.95);
border: 1px solid #4c566a;
padding: 15px;
width: 200px;
margin-bottom: 20px;
box-shadow: 0 0 15px rgba(0,0,0,0.5);
}
.nav-panel h3 { margin: 0 0 10px 0; font-size: 14px; text-transform: uppercase; color: #88c0d0; border-bottom: 1px solid #4c566a; padding-bottom: 5px; }
.nav-panel div { margin-bottom: 8px; font-size: 12px; }
.nav-panel label { display: inline-block; width: 60px; color: #8c92a3; }
.nav-panel input { width: 60px; background: #000; border: 1px solid #4c566a; color: #fff; padding: 2px 5px; text-align: center; }
.nav-panel button { width: 100%; background: #4c566a; border: none; color: #fff; padding: 5px; margin-top: 10px; cursor: pointer; text-transform: uppercase; font-weight: bold; }
.nav-panel button:hover { background: #5e81ac; }
/* Main Sector Map (6x6 Grid) */
.galaxy-map {
background: rgba(0, 0, 0, 0.9);
border: 2px solid #2d3545;
padding: 1px;
display: grid;
grid-template-columns: repeat(6, 120px);
grid-template-rows: repeat(6, 100px);
gap: 1px;
position: relative;
}
/* Galaxy View (Grid of Sectors - 6x6) */
.sector-grid {
display: grid;
grid-template-columns: repeat(6, 160px);
grid-template-rows: repeat(6, 130px);
gap: 10px;
}
.sector-card {
background: rgba(10, 15, 30, 0.9);
border: 1px solid #3b4252;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.2s;
text-decoration: none;
color: #fff;
padding: 10px;
position: relative;
}
.sector-card:hover {
border-color: #88c0d0;
background: rgba(20, 30, 50, 0.95);
transform: translateY(-2px);
box-shadow: 0 0 15px rgba(136, 192, 208, 0.2);
}
.sector-card.empty { opacity: 0.7; }
/* Mini-map Grid (6x6) */
.mini-map {
display: grid;
grid-template-columns: repeat(6, 8px);
grid-template-rows: repeat(6, 8px);
gap: 2px;
margin-bottom: 12px;
background: rgba(0,0,0,0.7);
padding: 5px;
border: 1px solid #4c566a;
}
.mini-dot {
width: 8px;
height: 8px;
background: rgba(255,255,255,0.05);
border-radius: 1px;
}
.slot {
background: #050505;
border: 1px solid #1a1a1a;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: relative;
cursor: pointer;
transition: all 0.2s;
}
.slot:hover {
background: #111;
border-color: #3b82f6;
z-index: 10;
}
.slot-id {
position: absolute;
top: 2px;
left: 5px;
font-size: 9px;
color: #444;
}
.object-icon {
font-size: 24px;
margin-bottom: 5px;
}
.object-name { font-size: 10px; font-weight: bold; color: #3b82f6; }
.object-status { font-size: 9px; color: #8c92a3; }
.legend {
margin-top: 20px;
background: rgba(10, 15, 30, 0.95);
border: 1px solid #2d3545;
padding: 10px 20px;
display: flex;
gap: 15px;
font-size: 10px;
flex-wrap: wrap;
max-width: 1000px;
justify-content: center;
}
.legend-item { display: flex; align-items: center; gap: 5px; }
.dot { width: 8px; height: 8px; border-radius: 1px; border: 1px solid rgba(255,255,255,0.2); }
.breadcrumb {
margin-bottom: 20px;
font-size: 14px;
color: #88c0d0;
}
.breadcrumb a { color: #fff; text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.admin-link { position: fixed; bottom: 10px; right: 10px; background: #bf616a; color: #fff; padding: 5px 10px; text-decoration: none; font-size: 10px; font-weight: bold; }
</style>
</head>
<body>
<main>
<div class="card">
<h1>Analyzing your requirements and generating your website…</h1>
<div class="loader" role="status" aria-live="polite" aria-label="Applying initial changes">
<span class="sr-only">Loading…</span>
</div>
<p class="hint"><?= ($_SERVER['HTTP_HOST'] ?? '') === 'appwizzy.com' ? 'AppWizzy' : 'Flatlogic' ?> AI is collecting your requirements and applying the first changes.</p>
<p class="hint">This page will update automatically as the plan is implemented.</p>
<p>Runtime: PHP <code><?= htmlspecialchars($phpVersion) ?></code> — UTC <code><?= htmlspecialchars($now) ?></code></p>
<div id="main-wrapper">
<header id="top-bar">
<div class="resource-container">
<?php foreach($resources as $name => $res): ?>
<div class="resource-box">
<div class="resource-name"><?php echo $name; ?></div>
<div class="resource-value"><?php echo $res['val']; ?></div>
<div class="resource-prod"><?php echo $res['prod']; ?></div>
<i class="fa-solid <?php echo $res['icon']; ?>"></i>
</div>
<?php endforeach; ?>
</div>
</header>
<main id="game-container">
<div class="breadcrumb">
<a href="?view=galaxy&galaxy_id=<?php echo $galaxy_id; ?>">Galaxie <?php echo $galaxy_id; ?></a>
<?php if($view === 'sector'): ?>
&nbsp;>&nbsp; Secteur <?php echo $sector_id; ?>
<?php endif; ?>
</div>
<div style="display: flex; gap: 40px; align-items: flex-start; width: 100%; max-width: 1100px; justify-content: center;">
<!-- Navigation -->
<div class="nav-panel">
<h3>Univers</h3>
<form method="GET">
<input type="hidden" name="view" value="<?php echo $view; ?>">
<div>
<label>Galaxie</label>
<input type="number" name="galaxy_id" value="<?php echo $galaxy_id; ?>" min="1">
</div>
<?php if($view === 'sector'): ?>
<div>
<label>Secteur</label>
<input type="number" name="sector_id" value="<?php echo $sector_id; ?>" min="1">
</div>
<?php endif; ?>
<button type="submit">Localiser</button>
</form>
<?php if($view === 'sector'): ?>
<button onclick="location.href='?view=galaxy&galaxy_id=<?php echo $galaxy_id; ?>'" style="background: #3b4252; margin-top: 5px;">Vue Galaxie</button>
<?php endif; ?>
</div>
<?php if($view === 'sector'): ?>
<!-- Sector Map (6x6 Grid) -->
<div class="galaxy-map">
<?php for($i=1; $i<=$grid_size; $i++): ?>
<div class="slot">
<span class="slot-id"><?php echo $i; ?></span>
<?php if (isset($grid[$i])): $obj = $grid[$i]; ?>
<div class="object-icon">
<?php
$icon = 'fa-earth-europe';
$color = getStatusColor($obj['status'], $obj['type']);
if ($obj['type'] == 'asteroid') { $icon = 'fa-mountain'; }
if ($obj['type'] == 'black_hole') { $icon = 'fa-circle-dot'; }
if ($obj['type'] == 'star') { $icon = 'fa-sun'; }
?>
<i class="fa-solid <?php echo $icon; ?>" style="color: <?php echo $color; ?>;"></i>
</div>
<span class="object-name"><?php echo $obj['name']; ?></span>
<span class="object-status"><?php echo ucfirst($obj['status']); ?></span>
<?php else: ?>
<div style="opacity: 0.05;"><i class="fa-solid fa-circle fa-sm"></i></div>
<?php endif; ?>
</div>
<?php endfor; ?>
</div>
<?php else: ?>
<!-- Galaxy View (Grid of Sectors - 6x6) -->
<div class="sector-grid">
<?php for($s=1; $s<=$grid_size; $s++):
$isActive = in_array($s, $active_sectors);
?>
<a href="?view=sector&galaxy_id=<?php echo $galaxy_id; ?>&sector_id=<?php echo $s; ?>" class="sector-card <?php echo $isActive ? '' : 'empty'; ?>">
<!-- Mini Map Preview (6x6 Grid) -->
<div class="mini-map">
<?php for($p=1; $p<=$grid_size; $p++):
$dotColor = 'rgba(255,255,255,0.05)';
if (isset($sector_data[$s][$p])) {
$dotColor = getStatusColor($sector_data[$s][$p]['status'], $sector_data[$s][$p]['type']);
}
?>
<div class="mini-dot" style="background-color: <?php echo $dotColor; ?>;"></div>
<?php endfor; ?>
</div>
<div style="font-size: 10px; color: #88c0d0;">SECTEUR</div>
<div style="font-size: 20px; font-weight: bold;"><?php echo $s; ?></div>
<?php if($isActive): ?>
<div style="font-size: 8px; color: #a3be8c; margin-top: 5px;"><i class="fa-solid fa-check"></i> Actif</div>
<?php else: ?>
<div style="font-size: 8px; color: #4c566a; margin-top: 5px;">Inexploré</div>
<?php endif; ?>
</a>
<?php endfor; ?>
</div>
<?php endif; ?>
</div>
<!-- Legend -->
<div class="legend">
<div class="legend-item"><span class="dot" style="background: rgba(255,255,255,0.05);"></span> Système vide</div>
<div class="legend-item"><span class="dot" style="background: #eceff4;"></span> Planète inhabitée</div>
<div class="legend-item"><span class="dot" style="background: #ef4444;"></span> Planète hostile</div>
<div class="legend-item"><span class="dot" style="background: #f59e0b;"></span> Ressources</div>
<div class="legend-item"><span class="dot" style="background: #d08770;"></span> Planète en PNA</div>
<div class="legend-item"><span class="dot" style="background: #a3be8c;"></span> Planète alliée / stable</div>
<div class="legend-item"><span class="dot" style="background: #5e81ac;"></span> Planète contrôlée</div>
<div class="legend-item"><span class="dot" style="background: #8b5cf6;"></span> Vortex</div>
</div>
</main>
</div>
</main>
<footer>
Page updated: <?= htmlspecialchars($now) ?> (UTC)
</footer>
<a href="admin.php" class="admin-link">Console MJ</a>
</body>
</html>
</html>