diff --git a/assets/css/custom.css b/assets/css/custom.css
index 2cc76d9..d40ba94 100644
--- a/assets/css/custom.css
+++ b/assets/css/custom.css
@@ -1,413 +1,420 @@
:root {
- --parchment: #f4e4bc;
- --parchment-dark: #d2b48c;
- --gold: #c5a059;
- --dark-red: #5d0000;
- --text-dark: #000000;
- --border-classic: 1px solid #c5a059;
+ --bg-page: #f3e5b1;
+ --parchment: #f1e0ad;
+ --parchment-light: #f7e9be;
+ --dark-red: #7c0f0f;
+ --gold: #e2c06a;
+ --green: #2f5a2c;
+ --border-color: #3e2a1b;
+ --text-dark: #2a1c12;
+ --sidebar-width: 230px;
}
body {
margin: 0;
padding: 0;
- font-family: 'Times New Roman', Times, serif;
- background-color: #000;
+ font-family: "Times New Roman", Times, serif;
+ background-color: var(--bg-page);
+ background-image: linear-gradient(180deg, #f6e9bf 0%, #f0e1a9 100%);
color: var(--text-dark);
- overflow: hidden;
height: 100vh;
+ overflow: hidden;
}
.elot-wrapper {
display: grid;
- grid-template-columns: 240px 1fr;
- grid-template-rows: 60px 1fr 25px;
+ grid-template-columns: var(--sidebar-width) 1fr;
+ grid-template-rows: 28px 1fr;
height: 100vh;
- background: #000;
- gap: 1px;
+ width: 100vw;
+ box-sizing: border-box;
}
-/* Header / Tabs */
+/* TOP TABS */
.elot-header {
grid-column: 1 / -1;
- background: #5d0000;
- border-bottom: 2px solid var(--gold);
display: flex;
- padding: 0 10px;
- align-items: center;
- justify-content: flex-start;
- gap: 15px;
+ align-items: flex-end;
+ padding-left: var(--sidebar-width);
+ gap: 2px;
+ background: repeating-linear-gradient(
+ 90deg,
+ #3a291b 0px,
+ #3a291b 8px,
+ #2b1e13 8px,
+ #2b1e13 16px
+ );
+ border-bottom: 2px solid #1b130c;
+ z-index: 10;
}
.elot-tab {
- color: var(--gold);
- text-decoration: none;
+ background: #e9d8a6;
+ background-image: linear-gradient(to bottom, #f5e7b9, #dcc68c);
+ border: 1px solid #3e2a1b;
+ border-bottom: none;
+ padding: 2px 10px;
font-size: 13px;
font-weight: bold;
- text-transform: uppercase;
- padding: 5px 8px;
- border: 1px solid transparent;
- transition: all 0.2s;
+ font-style: italic;
+ font-family: "Palatino Linotype", "Book Antiqua", Palatino, "Times New Roman", serif;
+ color: #2c1b12;
+ text-decoration: none;
+ border-radius: 6px 6px 0 0;
+ box-shadow: inset 1px 1px 0 rgba(255,255,255,0.5);
+ height: 20px;
+ display: flex;
+ align-items: center;
+ position: relative;
+ top: 2px;
}
-.elot-tab:hover, .elot-tab.active {
- border: var(--border-classic);
- background: rgba(255,255,255,0.1);
- color: #fff;
+.elot-tab.active {
+ background: #f5e7b9;
+ background-image: none;
+ height: 24px;
+ padding-bottom: 4px;
+ margin-top: -4px;
+ z-index: 12;
+ border-bottom: 2px solid #f5e7b9;
}
-/* Sidebar */
+/* SIDEBAR */
.elot-sidebar {
- background: #f4e4bc url('https://www.transparenttextures.com/patterns/parchment.png');
- border-right: 2px solid var(--gold);
+ grid-row: 1 / -1;
+ background: var(--parchment);
+ background-image: linear-gradient(180deg, #f1e0ae 0%, #ead79f 100%);
+ border-right: 2px solid #2b1c12;
display: flex;
flex-direction: column;
- padding: 8px;
overflow-y: auto;
- font-size: 12px;
+ box-shadow: 2px 0 4px rgba(0,0,0,0.35);
+ z-index: 20;
}
-.sidebar-info {
- text-align: center;
- margin-bottom: 10px;
- font-weight: bold;
- color: var(--dark-red);
- border: var(--border-classic);
- padding: 5px;
- background: rgba(255,255,255,0.3);
-}
-
-.location-box {
+.sidebar-top-black {
background: #000;
- border: 2px solid var(--gold);
- margin-bottom: 10px;
+ height: 8px;
+}
+
+.sidebar-date {
+ background: var(--dark-red);
+ color: var(--gold);
text-align: center;
- padding: 2px;
+ font-size: 11px;
+ padding: 4px 6px;
+ font-weight: bold;
+ border-bottom: 2px solid #000;
+ text-transform: uppercase;
+ letter-spacing: 0.2px;
+}
+
+.location-frame {
+ background: #000;
+ padding: 5px;
+ border-bottom: 2px solid #000;
}
.location-img {
width: 100%;
- height: auto;
+ height: 70px;
display: block;
-}
-
-.nav-compass {
- display: grid;
- grid-template-columns: repeat(3, 1fr);
- gap: 2px;
- width: 120px;
- margin: 0 auto 15px;
-}
-
-.compass-btn {
- background: #5d0000;
- color: var(--gold);
border: 1px solid var(--gold);
- text-align: center;
- padding: 5px 0;
- font-weight: bold;
- cursor: pointer;
- font-size: 14px;
+ background-image: url("../pasted-20260217-204151-b387c572.png");
+ background-size: 2048px auto;
+ background-position: 0 -62px;
+ background-repeat: no-repeat;
}
-.compass-btn.empty { background: transparent; border: none; cursor: default; }
-
-.section-header {
- background: var(--gold);
- color: #5d0000;
- text-align: center;
- font-weight: bold;
- padding: 2px;
- margin: 10px 0 5px;
- border: 1px solid #5d0000;
-}
-
-.presenti-list {
- background: rgba(255,255,255,0.2);
- padding: 5px;
- border: 1px solid var(--gold);
- flex-grow: 1;
-}
-
-.presenti-entry {
- margin-bottom: 2px;
- border-bottom: 1px solid rgba(197, 160, 89, 0.3);
-}
-
-.entry-name {
- color: #0000ff;
- text-decoration: underline;
- cursor: pointer;
-}
-
-/* Main Content */
-.elot-main {
- background: #f4e4bc url('https://www.transparenttextures.com/patterns/parchment.png');
- position: relative;
- overflow: auto;
- padding: 15px;
-}
-
-.content-frame {
- border: 3px double var(--gold);
- padding: 20px;
- background: rgba(255,255,255,0.1);
- min-height: 90%;
-}
-
-.main-title {
- color: var(--dark-red);
- text-align: center;
- font-variant: small-caps;
- border-bottom: 2px solid var(--dark-red);
- margin-bottom: 20px;
-}
-
-/* Footer area */
-.elot-footer {
- grid-column: 2;
- background: #5d0000;
- color: var(--gold);
- display: flex;
- justify-content: center;
- align-items: center;
- gap: 20px;
- font-size: 11px;
-}
-
-.footer-link {
- color: var(--gold);
- text-decoration: none;
-}
-
-.footer-link:hover { text-decoration: underline; }
-
-/* Scheda Form */
-.scheda-table {
- width: 100%;
- border-collapse: collapse;
-}
-
-.scheda-table td {
- padding: 8px;
- border: var(--border-classic);
-}
-
-.label-td {
- background: rgba(93, 0, 0, 0.1);
- width: 30%;
- font-weight: bold;
- color: var(--dark-red);
-}
-
-input[type="text"], input[type="number"], textarea {
- width: 100%;
- border: 1px solid var(--gold);
- background: #fff;
- padding: 4px;
- font-family: serif;
-}
-
-.btn-lot {
- background: #5d0000;
- color: var(--gold);
- border: 2px solid var(--gold);
- padding: 8px 25px;
- font-weight: bold;
- cursor: pointer;
- margin-top: 15px;
-}
-
-
-body {
- margin: 0;
- padding: 0;
- font-family: 'Georgia', 'Times New Roman', serif;
- background-color: #1a0d00;
- color: var(--text-dark);
- overflow: hidden;
- height: 100vh;
-}
-
-.elot-wrapper {
- display: grid;
- grid-template-columns: 260px 1fr;
- grid-template-rows: 40px 1fr 30px;
- height: 100vh;
- background: #000;
- gap: 2px;
-}
-
-/* Header / Tabs */
-.elot-header {
- grid-column: 1 / -1;
- background: #8b4513 linear-gradient(to bottom, #d2b48c, #8b4513);
- border-bottom: 2px solid var(--gold);
- display: flex;
- padding: 0 10px;
- gap: 2px;
- align-items: flex-end;
-}
-
-.elot-tab {
- background: #e6ccb3;
- border: 1px solid var(--gold);
- border-bottom: none;
- padding: 5px 15px;
- font-size: 12px;
- font-weight: bold;
- cursor: pointer;
- border-radius: 5px 5px 0 0;
- text-transform: uppercase;
- color: #330000;
- text-decoration: none;
-}
-
-.elot-tab:hover {
- background: #f5f5dc;
-}
-
-.elot-tab.active {
- background: var(--gold);
- color: #000;
- border-top: 1px solid #fff;
-}
-
-/* Sidebar */
-.elot-sidebar {
- background: #f5e6c4;
- background-image: radial-gradient(circle, #f5e6c4 0%, #e6ccb3 100%);
- border-right: 2px solid var(--gold);
- display: flex;
- flex-direction: column;
- padding: 10px;
- overflow-y: auto;
- box-shadow: inset -5px 0 10px rgba(0,0,0,0.1);
-}
-
-.sidebar-header {
+.location-title {
background: var(--dark-red);
color: var(--gold);
- padding: 5px;
text-align: center;
- font-weight: bold;
- border: 1px solid var(--gold);
- margin-bottom: 10px;
font-size: 12px;
+ font-weight: bold;
+ padding: 2px 4px;
+ text-transform: uppercase;
+ border-top: 1px solid #000;
}
-.nav-buttons {
+.nav-grid {
display: grid;
- grid-template-columns: 1fr 1fr;
- gap: 5px;
- margin-bottom: 15px;
+ grid-template-columns: repeat(4, 1fr);
+ gap: 2px;
+ padding: 5px;
+ background: #000;
}
.nav-btn {
- background: #660000;
- color: var(--gold);
- border: 1px solid var(--gold);
- font-size: 11px;
- padding: 3px;
+ background: #f7e9be;
+ border: 1px solid #000;
+ font-size: 10px;
+ font-weight: bold;
+ padding: 2px 0;
text-align: center;
cursor: pointer;
+ text-transform: uppercase;
+ box-shadow: inset 1px 1px 0 rgba(255,255,255,0.6);
}
-.nav-btn:hover {
- background: #800000;
+.nav-btn:active {
+ box-shadow: inset 1px 1px 2px rgba(0,0,0,0.6);
}
-.presenti-list {
+.sidebar-desc {
+ font-size: 10px;
+ padding: 6px 6px 8px;
+ line-height: 1.2;
+ color: #4b2e20;
+ font-weight: bold;
+ border-bottom: 1px solid #b79a5a;
+}
+
+.guardia-header {
+ background: var(--green);
+ color: #f1dfb2;
+ text-align: center;
font-size: 12px;
- line-height: 1.4;
+ font-weight: bold;
+ padding: 4px;
+ margin-top: 4px;
+ border-top: 1px solid #1d3a1a;
+ border-bottom: 1px solid #1d3a1a;
+}
+
+.guardia-date {
+ font-size: 10px;
+ color: #5b3c2b;
+ padding: 4px 6px 2px;
+ font-weight: bold;
+}
+
+.adventure-frame {
+ padding: 0 5px 6px;
+}
+
+.adventure-img {
+ width: 100%;
+ height: 86px;
+ display: block;
+ border: 1px solid #333;
+ background-image: url("../pasted-20260217-204151-b387c572.png");
+ background-size: 2048px auto;
+ background-position: -4px -255px;
+ background-repeat: no-repeat;
+}
+
+.adventure-caption {
+ text-align: center;
+ font-size: 10px;
+ color: #6a0f0f;
+ font-weight: bold;
+ padding-top: 2px;
+}
+
+.clock-area {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ padding: 4px 5px;
+ gap: 10px;
+}
+
+.clock-text {
+ background: #f8f3de;
+ border: 1px solid #000;
+ padding: 2px 12px;
+ font-weight: bold;
+ font-size: 14px;
+ color: #a10d0d;
+}
+
+.presenti-box {
+ padding: 6px 6px 8px;
+ font-size: 11px;
+ border-top: 1px solid #b79a5a;
+}
+
+.presenti-count {
+ font-weight: bold;
+ margin-bottom: 5px;
+ color: #3c261b;
}
.presenti-entry {
- margin-bottom: 4px;
- border-bottom: 1px dotted #8b4513;
- padding-bottom: 2px;
+ display: flex;
+ align-items: center;
+ gap: 5px;
+ margin-bottom: 2px;
}
-.entry-time {
- color: #8b4513;
+.presenti-icon {
+ width: 10px;
+ height: 10px;
+ border-radius: 2px;
+ border: 1px solid #1f1f1f;
+ display: inline-block;
+ flex: 0 0 auto;
+}
+
+.presenti-icon.is-blue { background: #1b3e8b; }
+.presenti-icon.is-red { background: #b11818; }
+.presenti-icon.is-dark { background: #1d1d1d; }
+.presenti-icon.is-steel { background: #485c6c; }
+.presenti-icon.is-gold { background: #b28a27; }
+.presenti-icon.is-violet { background: #5b2c7a; }
+.presenti-icon.is-green { background: #2e5a2c; }
+
+.presenti-name {
+ color: #000;
+ text-decoration: none;
font-weight: bold;
}
-/* Main Content */
+.sidebar-actions {
+ padding: 6px 8px 10px;
+ display: flex;
+ flex-direction: column;
+ gap: 5px;
+}
+
+.action-btn-green {
+ background: linear-gradient(180deg, #8a9b3f, #6e7c2f);
+ border: 2px solid #f2e6bf;
+ color: #fff;
+ font-size: 10px;
+ font-weight: bold;
+ padding: 5px;
+ border-radius: 10px;
+ cursor: pointer;
+ box-shadow: 0 1px 0 rgba(0,0,0,0.4);
+}
+
+.bazar-btn {
+ background: linear-gradient(180deg, #c51a1a, #870f0f);
+ color: #fff;
+ border: 2px solid #000;
+ border-radius: 20px;
+ padding: 7px 8px;
+ font-weight: bold;
+ font-size: 12px;
+ cursor: pointer;
+ text-align: center;
+ margin-top: 6px;
+ box-shadow: 0 2px 0 rgba(0,0,0,0.5);
+}
+
+.sidebar-banner {
+ background: #f0e0ac;
+ color: #a01111;
+ text-align: center;
+ font-size: 11px;
+ padding: 6px;
+ margin-top: auto;
+ font-weight: bold;
+ border-top: 2px solid #000;
+ letter-spacing: 1px;
+}
+
+/* MAIN AREA */
.elot-main {
- background: var(--parchment);
- position: relative;
- overflow: auto;
+ background: #f6e7b5;
display: flex;
flex-direction: column;
align-items: center;
- justify-content: flex-start;
- padding: 20px;
+ overflow-y: auto;
+ padding-top: 18px;
}
-.map-container {
- border: 8px double var(--gold);
- background: #fff8dc;
- width: 90%;
- max-width: 900px;
- aspect-ratio: 16/10;
- display: flex;
- align-items: center;
- justify-content: center;
+.map-wrapper {
position: relative;
- box-shadow: 0 0 20px rgba(0,0,0,0.3);
- background-image: url('https://www.extremelot.eu/images/mappa_regno.jpg'); /* This might not work, let's use a placeholder */
- background-size: cover;
}
-.map-overlay-text {
- background: rgba(0,0,0,0.5);
- color: var(--gold);
- padding: 10px 20px;
- font-size: 24px;
- text-transform: uppercase;
- letter-spacing: 2px;
- font-weight: bold;
- border: 2px solid var(--gold);
+.map-frame {
+ border: 2px solid #1a120b;
+ background: #cba86b;
+ padding: 6px;
+ box-shadow: 0 0 10px rgba(0,0,0,0.6);
}
-/* Footer area */
-.elot-footer {
- grid-column: 2;
- background: var(--parchment-dark);
- border-top: 2px solid var(--gold);
- padding: 5px;
- text-align: center;
- font-size: 12px;
+.map-canvas {
+ width: 1180px;
+ height: 520px;
+ background-image: url("../pasted-20260217-204151-b387c572.png");
+ background-size: 2048px auto;
+ background-position: -245px -70px;
+ background-repeat: no-repeat;
+ border: 2px solid #3a2416;
}
-.footer-link {
- margin: 0 10px;
- color: var(--dark-red);
- text-decoration: underline;
- font-weight: bold;
-}
-
-/* Forms (Scheda) */
-.scheda-form {
- max-width: 600px;
+.map-img {
+ display: block;
+ max-width: 1000px;
width: 100%;
- background: rgba(255,255,255,0.5);
- padding: 20px;
- border: 2px solid var(--gold);
}
-input, select, textarea {
- background: #fff;
- border: 1px solid var(--gold);
- color: var(--text-dark);
- padding: 5px;
+.map-footer {
+ display: flex;
+ gap: 2px;
+ margin-top: 6px;
+ margin-bottom: 30px;
}
-.btn-submit {
- background: var(--dark-red);
- color: var(--gold);
- border: 2px solid var(--gold);
- padding: 5px 20px;
+.map-link-btn {
+ background: #8d1414;
+ color: #fff;
+ text-decoration: none;
+ font-size: 11px;
+ padding: 2px 10px;
font-weight: bold;
- cursor: pointer;
+ border: 1px solid #000;
+}
+
+/* Custom Scrollbar for parchment feel */
+::-webkit-scrollbar {
+ width: 8px;
+}
+::-webkit-scrollbar-track {
+ background: var(--bg-page);
+}
+::-webkit-scrollbar-thumb {
+ background: #5d4037;
+}
+
+@media (max-width: 1200px) {
+ .map-canvas {
+ width: 960px;
+ height: 430px;
+ background-position: -200px -60px;
+ }
+}
+
+@media (max-width: 980px) {
+ body {
+ overflow: auto;
+ }
+
+ .elot-wrapper {
+ grid-template-columns: 1fr;
+ grid-template-rows: auto auto;
+ height: auto;
+ }
+
+ .elot-header {
+ padding-left: 0;
+ justify-content: center;
+ flex-wrap: wrap;
+ }
+
+ .elot-sidebar {
+ grid-row: auto;
+ border-right: none;
+ border-bottom: 2px solid #2b1c12;
+ }
+
+ .map-canvas {
+ width: 90vw;
+ height: 50vw;
+ background-position: -120px -40px;
+ }
}
diff --git a/assets/pasted-20260217-203643-b0de24d8.png b/assets/pasted-20260217-203643-b0de24d8.png
new file mode 100644
index 0000000..14332ef
Binary files /dev/null and b/assets/pasted-20260217-203643-b0de24d8.png differ
diff --git a/assets/pasted-20260217-204151-b387c572.png b/assets/pasted-20260217-204151-b387c572.png
new file mode 100644
index 0000000..14332ef
Binary files /dev/null and b/assets/pasted-20260217-204151-b387c572.png differ
diff --git a/index.php b/index.php
index 67f822e..fd37c1e 100644
--- a/index.php
+++ b/index.php
@@ -1,6 +1,6 @@
'',
- 'role' => 'Giocatore',
- 'class' => '',
- 'level' => 1,
- 'concept' => '',
-];
-
-if ($_SERVER['REQUEST_METHOD'] === 'POST' && $view === 'scheda') {
- $input['name'] = trim((string)($_POST['name'] ?? ''));
- $input['role'] = trim((string)($_POST['role'] ?? 'Giocatore'));
- $input['class'] = trim((string)($_POST['class'] ?? ''));
- $input['level'] = (int)($_POST['level'] ?? 1);
- $input['concept'] = trim((string)($_POST['concept'] ?? ''));
-
- if (mb_strlen($input['name']) < 2) {
- $errors[] = 'Inserisci un nome.';
- }
-
- if (!$errors) {
- try {
- $db = db();
- $db->exec("CREATE TABLE IF NOT EXISTS characters (
- id INT UNSIGNED AUTO_INCREMENT PRIMARY KEY,
- name VARCHAR(120) NOT NULL,
- role VARCHAR(60) NOT NULL,
- class VARCHAR(120) NOT NULL,
- level TINYINT UNSIGNED NOT NULL,
- concept TEXT NULL,
- created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
- ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4");
-
- $stmt = $db->prepare('INSERT INTO characters (name, role, class, level, concept) VALUES (:name, :role, :class, :level, :concept)');
- $stmt->execute([
- ':name' => $input['name'],
- ':role' => $input['role'],
- ':class' => $input['class'],
- ':level' => $input['level'],
- ':concept' => $input['concept']
- ]);
- $success = true;
- } catch (Throwable $e) {}
- }
+// Simple healthz check
+if (isset($_GET['healthz'])) {
+ header('Content-Type: text/plain');
+ echo "OK\nPHP: " . PHP_VERSION . "\nTime: " . date('Y-m-d H:i:s');
+ exit;
}
-// Mock Log entries
-$mockLog = [
- ['time' => '21:30', 'text' => 'find giunge a Lot'],
- ['time' => '21:31', 'text' => 'Rhael lascia Lot'],
- ['time' => '21:32', 'text' => 'Glykeria lascia Lot'],
- ['time' => '21:33', 'text' => 'Ildiko giunge a Lot'],
- ['time' => '21:35', 'text' => 'Graviel giunge a Lot'],
+// Presenti mock data based on screenshot
+$presenti = [
+ ['color' => 'blue', 'name' => 'Caudex', 'action' => 'lascia Lot'],
+ ['color' => 'red', 'name' => 'Rebo', 'action' => 'giunge a Lot'],
+ ['color' => 'dark', 'name' => 'Xoriane', 'action' => 'giunge a Lot'],
+ ['color' => 'steel', 'name' => 'Helle', 'action' => 'giunge a Lot'],
+ ['color' => 'gold', 'name' => 'Samara', 'action' => 'lascia Lot'],
+ ['color' => 'gold', 'name' => 'Eaoden', 'action' => 'lascia Lot'],
+ ['color' => 'violet', 'name' => 'Zizka', 'action' => 'giunge a Lot'],
+ ['color' => 'green', 'name' => 'Esma', 'action' => 'giunge a Lot'],
+ ['color' => 'blue', 'name' => 'Caudex', 'action' => 'giunge a Lot'],
];
?>
@@ -72,149 +36,108 @@ $mockLog = [
<?= $projectName ?>
-
-
-
-