EuskadiTech/Axia4
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

v2.0,0 - Refactor code structure for improved readability and maintainability

Browse Source
This commit is contained in:
naielv
2026-02-13 01:56:00 +01:00
parent 4efda27840
commit 30fce4b5a9
11 changed files with 919 additions and 310 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
public_html/_incl/post-body.php
View File

@@ -1,4 +1,8 @@
</main>
<?php if ($_GET["_hidenav"] != "yes" && $_GET["_hidenav"] != "widget") { ?>
</div>
</div>
<?php } ?>
<script src="/static/bootstrap.bundle.min.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function() {

525
public_html/_incl/pre-body.php
View File

@@ -17,6 +17,16 @@ if (!isset($APP_CODE)) {
$APP_ICON = "logo-$APP_CODE.png";
}
$displayName = $_SESSION["auth_data"]["display_name"] ?? "Invitado";
$email = $_SESSION["auth_data"]["email"] ?? "Sin sesión";
$initials = "?";
if (!empty($displayName)) {
$parts = preg_split('/\s+/', trim($displayName));
$first = mb_substr($parts[0] ?? "", 0, 1);
$last = mb_substr($parts[1] ?? "", 0, 1);
$initials = mb_strtoupper($first . $last);
}
?>
<!DOCTYPE html>
<html lang="es">
@@ -125,23 +135,381 @@ if (!isset($APP_CODE)) {
padding: 10px;
margin-bottom: 10px;
}
details summary {
cursor: pointer;
display: list-item;
}
.text-black {
color: black !important;
}
.btn {
margin-bottom: 5px;
}
.navbar-nav > a.btn {
.navbar-nav>a.btn {
margin-right: 10px;
}
.bg-custom {
background-color: #9013FE;
}
.app-shell {
display: flex;
min-height: 100vh;
background: #f5f5f5;
}
.sidebar-toggle-input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.sidebar {
width: 260px;
background: #ffffff;
border-right: 1px solid #e5e7eb;
padding: 20px 16px;
position: sticky;
top: 0;
height: 100vh;
display: flex;
flex-direction: column;
gap: 16px;
transition: width 0.25s ease, transform 0.25s ease, padding 0.25s ease, opacity 0.2s ease;
}
.sidebar-toggle-input:not(:checked)~.app-shell .sidebar {
width: 0;
padding-left: 0;
padding-right: 0;
border-right: none;
overflow: hidden;
opacity: 0;
pointer-events: none;
}
.sidebar-brand {
display: flex;
align-items: center;
gap: 10px;
font-weight: 600;
color: #202124;
text-decoration: none;
}
.sidebar-brand img {
height: 34px;
}
.sidebar-nav {
display: flex;
flex-direction: column;
gap: 8px;
}
.sidebar-link {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 10px;
border-radius: 12px;
text-decoration: none;
color: #202124;
background: #f8f9fa;
outline: 1px solid grey;
}
.sidebar-link img {
height: 26px;
}
.sidebar-note {
font-size: 12px;
color: #5f6368;
}
.sidebar-backdrop {
display: none;
}
.app-content {
flex: 1;
min-width: 0;
}
.axia-home {
max-width: 1200px;
margin: 0 auto;
padding: 10px 16px 40px;
}
.axia-header {
display: flex;
align-items: center;
gap: 18px;
background: #ffffff;
border-radius: 999px;
padding: 10px 16px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
position: sticky;
top: 10px;
z-index: 5;
}
.logo-area {
display: flex;
align-items: center;
gap: 10px;
font-weight: 600;
color: #202124;
text-decoration: none;
}
.brand-logo {
height: 32px;
}
.brand-text {
font-size: 18px;
}
.sidebar-toggle {
width: 36px;
height: 36px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
background: #f1f3f4;
color: #5f6368;
border: none;
}
.search-bar {
flex: 1;
}
.search-bar input {
width: 100%;
border: none;
background: #f1f3f4;
padding: 10px 16px;
border-radius: 999px;
outline: none;
font-size: 15px;
}
.header-actions {
display: flex;
align-items: center;
gap: 10px;
}
.axia-header summary {
list-style: none;
}
.axia-header summary::-webkit-details-marker {
display: none;
}
.icon-button {
list-style: none;
background: transparent;
border: none;
padding: 8px;
border-radius: 50%;
cursor: pointer;
}
.dot-grid {
display: grid;
grid-template-columns: repeat(3, 4px);
gap: 4px;
padding: 2px;
}
.dot-grid span {
width: 4px;
height: 4px;
background: #5f6368;
border-radius: 50%;
}
details {
position: relative;
}
.menu-card {
position: absolute;
right: 0;
margin-top: 10px;
background: #fff;
border-radius: 16px;
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
padding: 16px;
min-width: 240px;
z-index: 10;
}
.menu-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
gap: 12px;
}
.menu-item {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 10px;
border-radius: 12px;
text-decoration: none;
color: #202124;
background: #f8f9fa;
outline: 1px solid grey;
}
.menu-item img {
height: 28px;
}
.avatar {
width: 36px;
height: 36px;
border-radius: 50%;
background: #1a73e8;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
cursor: pointer;
}
.avatar.big {
width: 48px;
height: 48px;
font-size: 24px;
}
.account-card {
min-width: 280px;
}
.account-head {
display: flex;
gap: 12px;
align-items: center;
margin-bottom: 12px;
}
.account-name {
font-weight: 600;
}
.account-email {
font-size: 13px;
color: #5f6368;
}
.account-actions .btn {
margin-bottom: 8px;
}
@media (max-width: 768px) {
.sidebar-toggle {
display: inline-flex;
/* make it more to the left */
margin-left: -8px;
}
.logo-area {
gap: 6px;
margin-left: -8px;
margin-right: -8px;
}
.axia-home {
padding: 10px 8px 40px;
}
.app-shell {
display: block;
}
.sidebar {
position: fixed;
left: 0;
top: 0;
height: 100vh;
transform: translateX(-100%);
transition: transform 0.25s ease;
z-index: 20;
width: 260px;
padding: 20px 16px;
border-right: 1px solid #e5e7eb;
opacity: 1;
pointer-events: auto;
}
.sidebar-toggle-input:not(:checked)~.app-shell .sidebar {
width: 260px;
padding: 20px 16px;
border-right: 1px solid #e5e7eb;
opacity: 1;
pointer-events: auto;
}
.sidebar-backdrop {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.35);
opacity: 0;
pointer-events: none;
transition: opacity 0.25s ease;
z-index: 15;
display: block;
}
.sidebar-toggle-input:checked~.app-shell .sidebar {
transform: translateX(0);
}
.sidebar-toggle-input:checked~.app-shell .sidebar-backdrop {
opacity: 1;
pointer-events: auto;
}
.axia-header {
flex-wrap: wrap;
border-radius: 20px;
}
.search-bar {
width: 100%;
order: 3;
display: none;
}
/* make other buttons alinged to the right */
.header-actions {
margin-left: auto;
margin-right: -8px;
gap: 6px;
}
.hide-small {
display: none;
}
}
:root {
--bs-btn-font-family: Arial, Helvetica, sans-serif;
--bs-body-font-family: Arial, Helvetica, sans-serif;
@@ -158,44 +526,125 @@ if (!isset($APP_CODE)) {
<?php } elseif ($_GET["_hidenav"] == "widget") { ?>
<main style="padding: 0px;">
<?php } else { ?>
<style>
body {
height: calc(100% - 3em);
background: #ddd;
}
</style>
<nav class="navbar navbar-expand-lg bg-<?= $APP_COLOR ?? ($APP_CODE == "ax4" ? "custom" : "primary") ?>" data-bs-theme="dark">
<div class="container-fluid">
<a href="<?php echo $APP_ROOT ?? ""; ?>" class="navbar-brand">
<img height="30" class="logo" loading="lazy" src="/static/<?php echo $APP_ICON ?? "logo.png"; ?>" style="<?= $APP_ICON != "logo.png" ? '' : 'filter: invert(1);' ?>" />
<?php echo $APP_NAME ?? "Axia<sup>4</sup>"; ?>
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarColor01">
<ul class="navbar-nav me-auto">
<a class="btn btn-secondary" href="<?= $APP_ROOT ?>">Inicio</a>
<?php if (file_exists("../$APP_CODE/__menu.php")) { ?>
<?php require_once "../$APP_CODE/__menu.php"; ?>
<?php } ?>
</ul>
<?php if ($APP_CODE != "ax4") { ?>
<a href="/" class="btn btn-dark pseudo" style="background: #9013FE; color: white;">Salir a Axia4</a>
<input type="checkbox" id="sidebarToggle" class="sidebar-toggle-input">
<script>
(function() {
const toggle = document.getElementById('sidebarToggle');
if (!toggle) return;
const storageKey = 'axia4.sidebar.open';
const prefersDesktopOpen = window.matchMedia('(min-width: 769px)').matches;
const saved = localStorage.getItem(storageKey);
if (saved === 'true' || saved === 'false') {
toggle.checked = saved === 'true';
} else {
toggle.checked = prefersDesktopOpen;
}
toggle.addEventListener('change', function() {
localStorage.setItem(storageKey, toggle.checked ? 'true' : 'false');
});
})();
</script>
<div class="app-shell">
<aside class="sidebar">
<b>Esta app</b>
<nav class="sidebar-nav">
<?php
if (file_exists(__DIR__ . "/../$APP_CODE/__menu.php")) {
include __DIR__ . "/../$APP_CODE/__menu.php";
}
?>
</nav>
<b>Axia4</b>
<nav class="sidebar-nav">
<a class="sidebar-link" href="/">
<img src="/static/logo.png" alt="">
<span>Inicio</span>
</a>
</nav>
</aside>
<label for="sidebarToggle" class="sidebar-backdrop" aria-hidden="true"></label>
<div class="app-content">
<main class="axia-home">
<header class="axia-header">
<label for="sidebarToggle" class="sidebar-toggle" aria-label="Abrir menú">☰</label>
<a class="logo-area" href="<?= $APP_ROOT ?>">
<img src="/static/<?= $APP_ICON ?>" alt="<?= htmlspecialchars($APP_NAME) ?>" class="brand-logo">
<span class="brand-text"><?= $APP_NAME ?></span>
</a>
<form class="search-bar" action="/search.php" method="get">
<input type="text" name="q" placeholder="Busca en Axia4" aria-label="Buscar">
</form>
<div class="header-actions">
<details class="app-menu">
<summary class="icon-button" aria-label="Menú de aplicaciones">
<span class="dot-grid" aria-hidden="true">
<span></span><span></span><span></span>
<span></span><span></span><span></span>
<span></span><span></span><span></span>
</span>
</summary>
<div class="menu-card">
<div class="menu-grid">
<a class="menu-item" href="/">
<img src="/static/logo.png" alt="">
<span>Axia4</span>
</a>
<a class="menu-item" href="/club/">
<img src="/static/logo-club.png" alt="">
<span>Club</span>
</a>
<a class="menu-item" href="/entreaulas/">
<img src="/static/logo-entreaulas.png" alt="">
<span>EntreAulas</span>
</a>
<a class="menu-item" href="/account/">
<img src="/static/logo-account.png" alt="">
<span>Cuenta</span>
</a>
<a class="menu-item" href="/sysadmin/">
<img src="/static/logo-sysadmin.png" alt="">
<span>SysAdmin</span>
</a>
</div>
</div>
</details>
<details class="account-menu">
<summary class="avatar" aria-label="Cuenta">
<?php echo htmlspecialchars($initials); ?>
</summary>
<div class="menu-card account-card">
<div class="account-head">
<div class="avatar big"><?php echo htmlspecialchars($initials); ?></div>
<div>
<div class="account-name"><?php echo htmlspecialchars($displayName); ?></div>
<div class="account-email"><?php echo htmlspecialchars($email); ?></div>
</div>
</div>
<div class="account-actions">
<?php if ($_SESSION["auth_ok"]) { ?>
<a href="/account/" class="btn btn-primary w-100">Gestionar cuenta</a>
<a href="/_login.php?logout=1&redir=/" class="btn btn-outline-secondary w-100">Cerrar sesión</a>
<?php } else { ?>
<a href="/_login.php?redir=/" class="btn btn-primary w-100">Iniciar sesión</a>
<a href="/account/register.php" class="btn btn-outline-primary w-100">Crear cuenta</a>
<?php } ?>
</div>
</div>
</details>
</div>
</header>
<div style="margin-top: 20px;">
<?php } ?>
</div>
</div>
</nav>
<main style="padding: 20px; ">
<?php } ?>
<?php if (isset($_GET["_result"])) { ?>
<div class="card pad"
style="padding: 10px; background-color: <?php echo $_GET["_resultcolor"] ?? 'lightgreen'; ?>; text-align: center;">
<h3><?php echo $_GET["_result"]; ?></h3>
</div>
<?php } ?>
<!-- <div class="card pad" style="padding: 15px; background: #ffcc00; color: #000;">
<?php if (isset($_GET["_result"])) { ?>
<div class="card pad"
style="padding: 10px; background-color: <?php echo $_GET["_resultcolor"] ?? 'lightgreen'; ?>; text-align: center;">
<h3><?php echo $_GET["_result"]; ?></h3>
</div>
<?php } ?>
<!-- <div class="card pad" style="padding: 15px; background: #ffcc00; color: #000;">
<h2>Alerta Meteorologica</h2>
<span>Viento fuerte en Portugalete.</span>
</div> -->

4
public_html/account/index.php
View File

@@ -2,10 +2,6 @@
require_once "_incl/auth_redir.php";
require_once "_incl/pre-body.php";
?>
<div class="card pad" style="background: lightblue;">
<h1>Aviso: Migración de la plataforma</h1>
<span>En los siguientes dias vamos a migrar los datos de EntreAulas a una nueva base de datos, para mayor estabilidad y rendimiento.</span>
</div>
<div id="grid">
<div class="card pad grid-item" style="text-align: center;">
<h2>¡Hola, <?php echo htmlspecialchars($_SESSION["auth_data"]["display_name"]); ?>!</h2>

36
public_html/club/upload/form.php
View File

@@ -8,28 +8,26 @@ $APP_CODE = "club";
$APP_NAME = "La web del Club<sup>3</sup>";
$APP_TITLE = "La web del Club";
require_once "../../_incl/pre-body.php"; ?>
<div class="card">
<div>
<h1 class="card-title">Subir fotos</h1>
<form id="upload" encType="multipart/form-data">
<div class="mb-3">
<label for="uploaderfileinp" class="form-label"><b>Elegir los archivos a subir (max 10)</b></label>
<input type="file" id="uploaderfileinp" name="file[]" multiple="true" class="form-control" />
<div class="card pad">
<h1>Subir fotos</h1>
<form id="upload" encType="multipart/form-data">
<div class="mb-3">
<label for="uploaderfileinp" class="form-label"><b>Elegir los archivos a subir (max 10)</b></label>
<input type="file" id="uploaderfileinp" name="file[]" multiple="true" class="form-control" />
</div>
<hr>
<div class="mb-3">
<span><b>Progreso:</b> <span id="alert">Por subir...</span></span>
<div class="progress">
<div id="fileuploaderprog" class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 0%;">0%</div>
</div>
<hr>
<div class="mb-3">
<span><b>Progreso:</b> <span id="alert">Por subir...</span></span>
<div class="progress">
<div id="fileuploaderprog" class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 0%;">0%</div>
</div>
</div>
<button type="submit" class="btn btn-primary">Subir fotos</button>
</form>
</div>
</div>
<button type="submit" class="btn btn-primary">Subir fotos</button>
</form>
</div>
<script src="js/plugin/jquery-3.6.0.min.js"></script>
<script src="js/main.js"></script>
<script src="js/plugin/jquery-3.6.0.min.js"></script>
<script src="js/main.js"></script>
<?php require_once "../../_incl/post-body.php"; ?>

36
public_html/club/upload/index.php
View File

@@ -3,24 +3,22 @@ $APP_CODE = "club";
$APP_NAME = "La web del Club<sup>3</sup>";
$APP_TITLE = "La web del Club";
require_once "../../_incl/pre-body.php"; ?>
<div class="card">
<div>
<h1 class="card-title">Subir fotos</h1>
<form action="form.php" method="get">
<div class="mb-3">
<label for="n" class="form-label"><b>Tu nombre:</b></label>
<input required type="text" id="n" name="n" class="form-control" value="<?php echo $_GET["n"] ?: "";?>" placeholder="Nombre...">
</div>
<div class="mb-3">
<label for="f" class="form-label"><b>Fecha:</b></label>
<input required type="date" id="f" name="f" class="form-control" value="<?php echo $_GET["f"] ?: "";?>" placeholder="Fecha...">
</div>
<div class="mb-3">
<label for="p" class="form-label"><b>La contraseña:</b></label>
<input required type="text" id="p" name="p" class="form-control" value="" placeholder="Contraseña...">
</div>
<button type="submit" class="btn btn-primary">Continuar...</button>
</form>
</div>
<div class="card pad">
<h1>Subir fotos</h1>
<form action="form.php" method="get">
<div class="mb-3">
<label for="n" class="form-label"><b>Tu nombre:</b></label>
<input required type="text" id="n" name="n" class="form-control" value="<?php echo $_GET["n"] ?: "";?>" placeholder="Nombre...">
</div>
<div class="mb-3">
<label for="f" class="form-label"><b>Fecha:</b></label>
<input required type="date" id="f" name="f" class="form-control" value="<?php echo $_GET["f"] ?: "";?>" placeholder="Fecha...">
</div>
<div class="mb-3">
<label for="p" class="form-label"><b>La contraseña:</b></label>
<input required type="text" id="p" name="p" class="form-control" value="" placeholder="Contraseña...">
</div>
<button type="submit" class="btn btn-primary">Continuar...</button>
</form>
</div>
<?php require_once "../../_incl/post-body.php"; ?>

24
public_html/club/upload/unauth.php
View File

@@ -1,22 +1,2 @@
<?php ini_set("display_errors", "off");?>
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>La web del club</title>
<link rel="stylesheet" href="/newcss-terminal.css">
</head>
<body>
<header>
<h1>La web del Club</h1>
<a href="/club/">[ Inicio ]</a>
<a href="/">[ Volver a tech.eus ]</a>
</header>
<h1>Subir fotos</h1>
<h2>La contraseña es incorrecta.</h2>
</body>
</html>
<?php
header("Location: /club/?_resultcolor=red&_result=" . urlencode("La contraseña para subir fotos es incorrecta o no se ha proporcionado. Si crees que esto es un error, contacta con el administrador del sitio."));

9
public_html/entreaulas/__menu.php
View File

@@ -1,2 +1,7 @@
<a href="/_login.php?reload_user=1" class="btn btn-secondary">Recargar Cuenta</a>
<a href="/_login.php?logout=1" class="btn btn-secondary">Cerrar sesión</a>
<!-- <a href="/_login.php?reload_user=1" class="btn btn-secondary">Recargar Cuenta</a>
<a href="/_login.php?logout=1" class="btn btn-secondary">Cerrar sesión</a> -->
<a class="sidebar-link" href="/entreaulas/">
<span>Mi aula</span>
</a>

4
public_html/entreaulas/index.php
View File

@@ -1,10 +1,6 @@
<?php
require_once "_incl/auth_redir.php";
require_once "_incl/pre-body.php";?>
<div class="card pad" style="background: lightblue;">
<h1>Aviso: Migración de la plataforma</h1>
<span>En los siguientes dias vamos a migrar los datos de EntreAulas a una nueva base de datos, para mayor estabilidad y rendimiento.</span>
</div>
<div class="card pad">
<div>
<h1 class="card-title">¡Hola, <?php echo $_SESSION["auth_data"]["display_name"];?>!</h1>

330
public_html/entreaulas/paneldiario.php
View File

@@ -12,23 +12,23 @@ switch ($_GET["form"]) {
// Por ahora, solo mostramos un mensaje de confirmación.
// Y redirigimos despues de 10 segundos al panel diario.
header("Refresh: 10; URL=/entreaulas/paneldiario.php?aulario=" . urlencode($_GET['aulario'] ?? ''));
?>
?>
<div class="card pad">
<div>
<h1 class="card-title">Menú Seleccionado</h1>
<span>
Has seleccionado el siguiente menú para el día <?php echo htmlspecialchars($selected_date); ?>:
</span>
<ul>
<li>Primer Plato: <?php echo htmlspecialchars($plato1); ?></li>
<li>Segundo Plato: <?php echo htmlspecialchars($plato2); ?></li>
<li>Postre: <?php echo htmlspecialchars($postre); ?></li>
</ul>
<a href="/entreaulas/paneldiario.php?aulario=<?php echo urlencode($_GET['aulario'] ?? ''); ?>" class="btn btn-primary">Volver
al Panel Diario</a>
</div>
<div>
<h1 class="card-title">Menú Seleccionado</h1>
<span>
Has seleccionado el siguiente menú para el día <?php echo htmlspecialchars($selected_date); ?>:
</span>
<ul>
<li>Primer Plato: <?php echo htmlspecialchars($plato1); ?></li>
<li>Segundo Plato: <?php echo htmlspecialchars($plato2); ?></li>
<li>Postre: <?php echo htmlspecialchars($postre); ?></li>
</ul>
<a href="/entreaulas/paneldiario.php?aulario=<?php echo urlencode($_GET['aulario'] ?? ''); ?>" class="btn btn-primary">Volver
al Panel Diario</a>
</div>
</div>
<?php
<?php
die();
break;
}
@@ -36,16 +36,61 @@ switch ($_GET["form"]) {
<audio id="win-sound" src="/static/sounds/win.mp3" preload="auto"></audio>
<audio id="lose-sound" src="/static/sounds/lose.mp3" preload="auto"></audio>
<audio id="click-sound" src="/static/sounds/click.mp3" preload="auto"></audio>
<script>
function announceAndMaybeRedirect(message, redirectUrl, success) {
const fallbackId = success ? 'win-sound' : 'lose-sound';
const fallbackAudio = document.getElementById(fallbackId);
const doRedirect = () => {
if (redirectUrl) {
window.location.href = redirectUrl;
}
};
const playFallback = () => {
if (!fallbackAudio) {
doRedirect();
return;
}
doRedirect();
return;
fallbackAudio.pause();
fallbackAudio.currentTime = 0;
fallbackAudio.onended = () => {
fallbackAudio.onended = null;
doRedirect();
};
fallbackAudio.play().catch(doRedirect);
};
if (!message) {
playFallback();
return;
}
if (!('speechSynthesis' in window)) {
playFallback();
return;
}
try {
window.speechSynthesis.cancel();
const utterance = new SpeechSynthesisUtterance(message);
utterance.lang = 'es-ES';
utterance.rate = 1;
utterance.onend = doRedirect;
utterance.onerror = playFallback;
window.speechSynthesis.speak(utterance);
} catch (e) {
playFallback();
}
}
</script>
<?php
switch ($_GET["action"]) {
default:
case "index":
?>
<div class="card pad">
<div>
<h1 class="card-title">Panel Diario</h1>
</div>
</div>
?>
<div id="grid">
<!-- Calendario -->
<a onclick="document.getElementById('click-sound').play()" href="?action=calendar&aulario=<?php echo urlencode($_GET['aulario'] ?? ''); ?>" class="btn btn-primary grid-item">
@@ -91,27 +136,31 @@ switch ($_GET["action"]) {
});
setTimeout(() => {
msnry.layout()
}, 250); window.onresize = () => {msnry.layout()}
}, 250);
window.onresize = () => {
msnry.layout()
}
</script>
<?php
<?php
break;
case "actividades":
$actividades = glob("/DATA/entreaulas/Centros/" . $_SESSION["auth_data"]["entreaulas"]["centro"] . "/Panel/Actividades/*", GLOB_ONLYDIR);
?>
?>
<script>
function seleccionarActividad(element, actividad) {
element.style.backgroundColor = "#9cff9f"; // Verde
document.getElementById('win-sound').play();
setTimeout(() => {
window.location.href = "/entreaulas/paneldiario.php?aulario=<?php echo urlencode($_GET['aulario'] ?? ''); ?>";
}, 2000);
announceAndMaybeRedirect(
actividad + ", Actividad seleccionada",
"/entreaulas/paneldiario.php?aulario=<?php echo urlencode($_GET['aulario'] ?? ''); ?>",
true
);
}
</script>
<div class="card pad">
<div>
<h1 class="card-title">¿Que vamos a hacer?</h1>
</div>
<div class="card pad">
<div>
<h1 class="card-title">¿Que vamos a hacer?</h1>
</div>
</div>
<div id="grid">
<?php foreach ($actividades as $actividad_path) {
@@ -146,9 +195,12 @@ switch ($_GET["action"]) {
});
setTimeout(() => {
msnry.layout()
}, 250); window.onresize = () => {msnry.layout()}
}, 250);
window.onresize = () => {
msnry.layout()
}
</script>
<?php
<?php
break;
case "menu":
// Menú del comedor (nuevo sistema, vista simplificada)
@@ -219,14 +271,15 @@ switch ($_GET["action"]) {
}
return "/entreaulas/_filefetch.php?type=comedor_image&centro=" . urlencode($centro_id) . "&aulario=" . urlencode($aulario_id) . "&date=" . urlencode($date) . "&file=" . urlencode($value);
}
?>
?>
<script>
function seleccionarMenuTipo(element, hasData) {
function seleccionarMenuTipo(element, hasData, menu_ty) {
element.style.backgroundColor = "#9cff9f"; // Verde
document.getElementById('win-sound').play();
setTimeout(() => {
window.location.href = "/entreaulas/paneldiario.php?aulario=<?php echo urlencode($_GET['aulario'] ?? ''); ?>";
}, 2000);
announceAndMaybeRedirect(
menu_ty + ", Menú seleccionado",
"/entreaulas/paneldiario.php?aulario=<?php echo urlencode($_GET['aulario'] ?? ''); ?>",
true
);
}
</script>
<div class="card pad">
@@ -234,7 +287,7 @@ switch ($_GET["action"]) {
<div class="text-muted"><?= htmlspecialchars($date) ?></div>
</div>
<div class="menu-grid">
<div class="menum-grid">
<?php
$plates = [
"primero" => "Primer plato",
@@ -256,31 +309,31 @@ switch ($_GET["action"]) {
}
}
}
?>
<div class="card pad menu-card" onclick="seleccionarMenuTipo(this, <?php echo $hasData ? 'true' : 'false'; ?>);" style="cursor: pointer; border: 4px solid <?= htmlspecialchars($typeColor) ?>;">
<h3 class="menu-title" style="color: <?= htmlspecialchars($typeColor) ?>;">
?>
<div class="card pad menum-card" onclick="seleccionarMenuTipo(this, <?php echo $hasData ? 'true' : 'false'; ?>, '<?= htmlspecialchars($typeLabel) ?>');" style="cursor: pointer; border: 4px solid <?= htmlspecialchars($typeColor) ?>;">
<h3 class="menum-title" style="color: <?= htmlspecialchars($typeColor) ?>;">
<?= htmlspecialchars($typeLabel) ?>
</h3>
<?php if (!$hasData): ?>
<div class="menu-placeholder">Menú no disponible</div>
<div class="menum-placeholder">Menú no disponible</div>
<?php else: ?>
<div class="menu-lines">
<div class="menum-lines">
<?php
$loop = 0;
foreach ($plates as $plateKey => $plateLabel):
$loop ++;
$loop++;
$plate = $menuItem["plates"][$plateKey] ?? ["name" => "", "pictogram" => "", "photo" => ""];
$pictSrc = image_src_simple($plate["pictogram"] ?? "", $centro_id, $source_aulario_id, $date);
?>
<div class="menu-line">
?>
<div class="menum-line">
<?php if ($pictSrc !== ""): ?>
<img class="menu-line-img" src="<?= htmlspecialchars($pictSrc) ?>" alt="<?= htmlspecialchars($plateLabel) ?>">
<img class="menum-line-img" src="<?= htmlspecialchars($pictSrc) ?>" alt="<?= htmlspecialchars($plateLabel) ?>">
<?php else: ?>
<div class="menu-line-img placeholder">
<div class="menum-line-img placeholder">
<!-- Nª Plato --><?= $loop ?>
</div>
<?php endif; ?>
<div class="menu-line-name">
<div class="menum-line-name">
<?= $plate["name"] !== "" ? htmlspecialchars($plate["name"]) : "?" ?>
</div>
</div>
@@ -292,37 +345,49 @@ switch ($_GET["action"]) {
</div>
<style>
.menu-grid {
.menum-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 12px;
align-items: stretch;
min-width: 0;
}
.menu-card {
.menum-card {
min-height: 260px;
width: 100%;
min-width: 0;
}
.menu-title {
.menum-title {
font-size: 1.6rem;
margin-bottom: 10px;
}
.menu-lines {
.menum-lines {
display: grid;
gap: 8px;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
min-width: 0;
}
.menu-line {
.menum-line {
display: grid;
grid-template-columns: 100px 1fr;
grid-template-columns: 100px minmax(0, 1fr);
align-items: center;
gap: 8px;
background: #fff;
border-radius: 10px;
padding: 6px 8px;
border: 2px solid #eee;
min-width: 0;
}
.menu-line-title {
.menum-line-title {
font-weight: bold;
}
.menu-line-img {
.menum-line-img {
width: 100px;
height: 100px;
object-fit: contain;
@@ -334,17 +399,24 @@ switch ($_GET["action"]) {
justify-content: center;
font-weight: bold;
}
.menu-line-img.placeholder {
.menum-line-img.placeholder {
background: #f1f1f1;
border-style: dashed;
color: #333;
font-size: 5rem;
}
.menu-line-name {
.menum-line-name {
font-size: 1.1rem;
font-weight: bold;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.menu-placeholder {
.menum-placeholder {
height: 160px;
display: flex;
align-items: center;
@@ -356,44 +428,53 @@ switch ($_GET["action"]) {
font-weight: bold;
}
</style>
<?php
<?php
break;
case "calendar":
// Calendario, elegir el dia, mes, y dia-de-la-semana.
$mes_correcto = date('m');
$dia_correcto = date('d');
$ds_correcto = date('N'); // 1 (Lunes) a 7 (Domingo)
?>
$first_ds = date('N', strtotime(date('Y-m-01'))); // 1 (Lunes) a 7 (Domingo)
$days_in_month = (int) date('t');
?>
<div class="card pad">
<h1>¿Que dia es?</h1>
</div>
<div class="grid">
<div class="calendar-grid">
<script>
function seleccionarDia(element, dia, mes, year, ds) {
// Si es dia correcto
if (dia == <?php echo $dia_correcto; ?> && mes == <?php echo $mes_correcto; ?> && ds == <?php echo $ds_correcto; ?>) {
element.style.backgroundColor = "#9cff9f"; // Verde
document.getElementById('win-sound').play();
setTimeout(() => {
window.location.href = "?action=calendario_diasemana&aulario=<?php echo urlencode($_GET['aulario'] ?? ''); ?>";
}, 2000);
announceAndMaybeRedirect(
dia + ", Correcto",
"?action=calendario_diasemana&aulario=<?php echo urlencode($_GET['aulario'] ?? ''); ?>",
true
);
} else {
element.style.backgroundColor = "#ff9088"; // Rojo
document.getElementById('lose-sound').play();
announceAndMaybeRedirect(dia + ", No es correcto", null, false);
setTimeout(() => {
element.style.backgroundColor = ""; // Volver al color anterior
}, 2000);
}
}
</script>
<?php foreach (range(1, 31) as $dia) {
<?php
$leading_blanks = max(0, $first_ds - 1);
for ($i = 0; $i < $leading_blanks; $i++) {
echo '<div class="card grid-item calendar-empty"></div>';
}
foreach (range(1, $days_in_month) as $dia) {
$ds = date('N', strtotime(date('Y-m-') . sprintf("%02d", $dia)));
if ($ds > 5) {
?>
?>
<div class="card grid-item" style="background-color: #000; color: #fff; text-align: center;">
<span style="font-size: 48px;"><?php echo $dia; ?></span>
</div>
<?php
<?php
continue;
}
$is_today = ($dia == $dia_correcto);
@@ -402,56 +483,75 @@ switch ($_GET["action"]) {
onclick="seleccionarDia(this, <?php echo $dia; ?>, <?php echo $mes_correcto; ?>, <?php echo date('Y'); ?>, <?php echo $ds; ?>);">
<span style="font-size: 48px;"><?php echo $dia; ?></span>
</a>
<?php } ?>
<?php }
$total_cells = $leading_blanks + $days_in_month;
$trailing_blanks = (7 - ($total_cells % 7)) % 7;
for ($i = 0; $i < $trailing_blanks; $i++) {
echo '<div class="card grid-item calendar-empty"></div>';
}
?>
</div>
<style>
.calendar-grid {
display: grid;
grid-template-columns: repeat(7, minmax(0, 1fr));
gap: 10px;
align-items: stretch;
grid-auto-rows: 100px;
}
.grid-item {
margin-bottom: 10px !important;
margin-bottom: 0 !important;
padding: 15px;
width: 130px;
height: 100px;
width: 100%;
height: 100%;
text-align: center;
text-decoration: none;
display: flex;
align-items: center;
justify-content: center;
}
.grid-item img {
margin: 0 auto;
height: 125px;
}
.calendar-empty {
background: transparent;
border: 2px dashed #e0e0e0;
box-shadow: none;
}
.calendar-grid {
min-width: 0;
}
</style>
<script>
var msnry = new Masonry('.grid', {
"columnWidth": 130,
"itemSelector": ".grid-item",
"gutter": 10,
"transitionDuration": 0
});
setTimeout(() => {
msnry.layout()
}, 250); window.onresize = () => {msnry.layout()}
</script>
<?php
<?php
break;
case "calendario_diasemana":
// Calendario - Día de la semana
$dia_de_la_semana = date('N'); // 1 (Lunes) a 7 (Domingo)
?>
?>
<div class="card pad">
<h1>¿Que día de la semana es?</h1>
</div>
<div class="grid">
<script>
function seleccionarDiaSemana(element, ds) {
var dow = ["", "Lunes", "Martes", "Miércoles", "Jueves", "Viernes", "Sábado", "Domingo"];
// Si es dia de la semana correcto
if (ds == <?php echo $dia_de_la_semana; ?>) {
element.style.backgroundColor = "#9cff9f"; // Verde
document.getElementById('win-sound').play();
setTimeout(() => {
location.href = "/entreaulas/paneldiario.php?action=calendario_mes&aulario=<?php echo urlencode($_GET['aulario'] ?? ''); ?>";
}, 2000);
announceAndMaybeRedirect(
dow[ds] + ", Correcto",
"/entreaulas/paneldiario.php?action=calendario_mes&aulario=<?php echo urlencode($_GET['aulario'] ?? ''); ?>",
true
);
} else {
element.style.backgroundColor = "#ff9088"; // Rojo
document.getElementById('lose-sound').play();
announceAndMaybeRedirect(dow[ds] + ", No es correcto", null, false);
setTimeout(() => {
element.style.backgroundColor = ""; // Volver al color anterior
}, 2000);
@@ -474,7 +574,7 @@ switch ($_GET["action"]) {
5 => "Ostirala"
];
foreach ($days_of_week as $ds => $day_name) {
?>
?>
<a class="card grid-item" style="width: 225px; height: 225px; color: black;"
onclick="seleccionarDiaSemana(this, <?php echo $ds; ?>);">
<span style="font-size: 30px;"><?php echo $day_name; ?></span>
@@ -507,9 +607,12 @@ switch ($_GET["action"]) {
});
setTimeout(() => {
msnry.layout()
}, 250); window.onresize = () => {msnry.layout()}
}, 250);
window.onresize = () => {
msnry.layout()
}
</script>
<?php
<?php
break;
case "calendario_mes":
// Calendario - Mes
@@ -542,7 +645,7 @@ switch ($_GET["action"]) {
11 => "Azaroa",
12 => "Abendua"
];
?>
?>
<div class="card pad">
<h1>¿Que mes es?</h1>
</div>
@@ -550,15 +653,17 @@ switch ($_GET["action"]) {
<script>
function seleccionarMes(element, mes) {
// Si es mes correcto
var meses = ["", "Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"];
if (mes == <?php echo $mes_correcto; ?>) {
element.style.backgroundColor = "#9cff9f"; // Verde
document.getElementById('win-sound').play();
setTimeout(() => {
window.location.href = "/entreaulas/paneldiario.php?aulario=<?php echo urlencode($_GET['aulario'] ?? ''); ?>";
}, 2000);
announceAndMaybeRedirect(
meses[mes] + ", Correcto",
"/entreaulas/paneldiario.php?aulario=<?php echo urlencode($_GET['aulario'] ?? ''); ?>",
true
);
} else {
element.style.backgroundColor = "#ff9088"; // Rojo
document.getElementById('lose-sound').play();
announceAndMaybeRedirect(meses[mes] + ", No es correcto", null, false);
setTimeout(() => {
element.style.backgroundColor = ""; // Volver al color anterior
}, 2000);
@@ -566,7 +671,7 @@ switch ($_GET["action"]) {
}
</script>
<?php foreach ($meses_esp as $mes => $mes_name) {
?>
?>
<a class="card grid-item" style="width: 180px; height: 180px; color: black;"
onclick="seleccionarMes(this, <?php echo $mes; ?>);">
<span style="font-size: 24px;"><?php echo $mes_name; ?></span>
@@ -599,9 +704,12 @@ switch ($_GET["action"]) {
});
setTimeout(() => {
msnry.layout()
}, 250); window.onresize = () => {msnry.layout()}
}, 250);
window.onresize = () => {
msnry.layout()
}
</script>
<?php
<?php
break;
}
require_once "_incl/post-body.php"; ?>
require_once "_incl/post-body.php"; ?>

257
public_html/index.php
View File

@@ -1,125 +1,200 @@
<?php require_once "_incl/pre-body.php"; ?>
<div class="card pad" style="background: lightblue;">
<h1>Aviso: Migración de la plataforma</h1>
<span>En los siguientes dias vamos a migrar los datos de EntreAulas a una nueva base de datos, para mayor estabilidad y rendimiento.</span>
<section class="hero">
<h1>Bienvenidx a Axia4</h1>
<p>La plataforma unificada de EuskadiTech y Sketaria.</p>
<hr>
<h3>Versión 2.0.0</h3>
<p>Con esta versión, cambiamos la interfaz a una mas sencilla.</p>
<a class="btn btn-primary" href="/account/">Accede a tu cuenta</a>
</section>
<div class="notice-card">
<strong>Aviso: En mantenimiento</strong>
<span>En los siguientes días vamos a cambiar la interfaz.</span>
</div>
<div class="card pad">
<h1>¡Bienvenidx a Axia4!</h1>
<span>Axia4 es la plataforma unificada de EuskadiTech y Sketaria.</span>
</div>
<div id="grid">
<div class="card grid-item">
<div id="grid" class="app-grid">
<div class="app-card">
<img src="/static/logo-club.png" alt="Logo Club">
<b>La web del club</b>
<a href="/club/" class="btn btn-primary">Acceso publico</a>
<div class="app-title">La web del club</div>
<div class="app-actions">
<a href="/club/" class="btn btn-primary">Acceso público</a>
</div>
</div>
<div class="card grid-item">
<div class="app-card">
<img src="/static/logo-entreaulas.png" alt="Logo EntreAulas">
<b>EntreAulas</b>
<span>Gestión de aularios conectados.</span>
<?php if ($_SESSION["auth_ok"] && in_array('entreaulas:access', $_SESSION["auth_data"]["permissions"] ?? [])) { ?>
<a href="/entreaulas/" class="btn btn-primary">Acceder</a>
<?php } else { ?>
<small class="btn btn-dark disabled">No tienes permiso para acceder</small>
<?php } ?>
<div class="app-title">EntreAulas</div>
<div class="app-desc">Gestión de aularios conectados.</div>
<div class="app-actions">
<?php if ($_SESSION["auth_ok"] && in_array('entreaulas:access', $_SESSION["auth_data"]["permissions"] ?? [])) { ?>
<a href="/entreaulas/" class="btn btn-primary">Acceder</a>
<?php } else { ?>
<span class="btn btn-outline-secondary disabled">Sin permiso</span>
<?php } ?>
</div>
</div>
<div class="card grid-item">
<div class="app-card">
<img src="/static/logo-account.png" alt="Logo Account">
<b>Mi Cuenta</b>
<span>Acceso a la plataforma y pagos.</span>
<?php if ($_SESSION["auth_ok"]) { ?>
<a href="/account/" class="btn btn-primary">Ir a mi cuenta</a>
<a href="/_login.php?logout=1&redir=/" class="btn btn-secondary">Cerrar sesión</a>
<?php } else { ?>
<a href="/_login.php?redir=/" class="btn btn-primary">Iniciar sesión</a>
<a href="/account/register.php" class="btn btn-primary">Crear cuenta</a>
<?php } ?>
<div class="app-title">Mi Cuenta</div>
<div class="app-desc">Acceso a la plataforma y pagos.</div>
<div class="app-actions">
<?php if ($_SESSION["auth_ok"]) { ?>
<a href="/account/" class="btn btn-primary">Ir a mi cuenta</a>
<a href="/_login.php?logout=1&redir=/" class="btn btn-outline-secondary">Cerrar sesión</a>
<?php } else { ?>
<a href="/_login.php?redir=/" class="btn btn-primary">Iniciar sesión</a>
<a href="/account/register.php" class="btn btn-outline-primary">Crear cuenta</a>
<?php } ?>
</div>
</div>
<div class="card grid-item" style="opacity: 0.5;">
<div class="app-card is-disabled">
<img src="/static/logo-oscar.png" alt="Logo OSCAR">
<b>OSCAR</b>
<span>Red de IA Absoluta.</span>
<div class="app-title">OSCAR</div>
<div class="app-desc">Red de IA Absoluta.</div>
<div class="app-note">Próximamente</div>
</div>
<div class="card grid-item" style="opacity: 0.5;">
<div class="app-card is-disabled">
<img src="/static/logo-media.png" alt="Logo ET Media">
<b>ET Media</b>
<span>Streaming de pelis y series.</span>
<div class="app-title">ET Media</div>
<div class="app-desc">Streaming de pelis y series.</div>
<div class="app-note">Próximamente</div>
</div>
<div class="card grid-item" style="opacity: 0.5;">
<div class="app-card is-disabled">
<img src="/static/logo-hyper.png" alt="Logo Hyper">
<b>Hyper</b>
<span>Plataforma de gestión empresarial.</span>
<div class="app-title">Hyper</div>
<div class="app-desc">Plataforma de gestión empresarial.</div>
<div class="app-note">Próximamente</div>
</div>
<div class="card grid-item" style="opacity: 0.5;">
<div class="app-card is-disabled">
<img src="/static/logo-mail.png" alt="Logo Comunicaciones">
<b>Comunicaciones</b>
<span>Correos electrónicos y mensajería.</span>
<div class="app-title">Comunicaciones</div>
<div class="app-desc">Correos electrónicos y mensajería.</div>
<div class="app-note">Próximamente</div>
</div>
<div class="card grid-item" style="opacity: 0.5;">
<div class="app-card is-disabled">
<img src="/static/logo-malla.png" alt="Logo Malla">
<b>Malla Meshtastic</b>
<span>Red de comunicación por radio.</span>
<div class="app-title">Malla Meshtastic</div>
<div class="app-desc">Red de comunicación por radio.</div>
<div class="app-note">Próximamente</div>
</div>
<div class="card grid-item" style="opacity: 0.5;">
<div class="app-card is-disabled">
<img src="/static/logo-aularios.png" alt="Logo Aularios">
<b>Aularios<sup>2</sup></b>
<span>Visita virtual a los aularios.</span>
<!--<a href="https://aularios.tech.eus" class="btn btn-primary">Tengo cuenta</a>-->
<small>Solo lectura - Migrando a Axia4</small>
<div class="app-title">Aularios<sup>2</sup></div>
<div class="app-desc">Visita virtual a los aularios.</div>
<div class="app-note">Solo lectura · Migrando a Axia4</div>
</div>
<div class="card grid-item" style="opacity: 0.5;">
<div class="app-card is-disabled">
<img src="/static/logo-nube.png" alt="Logo Axia4 Cloud">
<b>Nube Axia4.NET</b>
<span>Almacenamiento central de datos.</span>
<!--<a href="https://axia4.net" class="btn btn-primary">Tengo cuenta</a>-->
<small>Cerrado por migración a Axia4</small>
<div class="app-title">Nube Axia4.NET</div>
<div class="app-desc">Almacenamiento central de datos.</div>
<div class="app-note">Cerrado por migración</div>
</div>
<div class="card grid-item" style="opacity: 0.5;">
<div class="app-card is-disabled">
<img src="/static/logo-nk4.png" alt="Logo Nube Kasa">
<b>Nube Kasa</b>
<span>Nube personal con domotica.</span>
<!--<a href="https://nk4.tech.eus/_familia/" class="btn btn-primary">Acceso privado</a>-->
<small>Cerrado por mantenimiento</small>
<div class="app-title">Nube Kasa</div>
<div class="app-desc">Nube personal con domótica.</div>
<div class="app-note">Cerrado por mantenimiento</div>
</div>
<div class="card grid-item">
<div class="app-card">
<img src="/static/logo-sysadmin.png" alt="Logo SysAdmin">
<b>SysAdmin</b>
<span>Configuración de Axia4.</span>
<?php if (in_array('sysadmin:access', $_SESSION["auth_data"]["permissions"] ?? [])) { ?>
<a href="/sysadmin/" class="btn btn-primary">Acceder</a>
<?php } else { ?>
<small class="btn btn-dark disabled">No tienes permiso para acceder</small>
<?php } ?>
<div class="app-title">SysAdmin</div>
<div class="app-desc">Configuración de Axia4.</div>
<div class="app-actions">
<?php if (in_array('sysadmin:access', $_SESSION["auth_data"]["permissions"] ?? [])) { ?>
<a href="/sysadmin/" class="btn btn-primary">Acceder</a>
<?php } else { ?>
<span class="btn btn-outline-secondary disabled">Sin permiso</span>
<?php } ?>
</div>
</div>
</div>
</div>
<style>
.grid-item {
margin-bottom: 10px !important;
padding: 15px;
width: 235px;
text-align: center;
body {
background: #f5f5f5;
}
.grid-item img {
margin: 0 auto;
height: 100px;
.hero {
text-align: center;
margin: 32px 0 16px;
background: url(/static/portugalete.jpg) #ffffffc2;
padding: 25px 7px;
padding-top: 50px;
height: 500px;
border-radius: 50px;
background-size: cover;
background-position: center;
background-blend-mode: lighten;
color: black;
/* -webkit-text-stroke: 0.5px #acacac; */
}
.hero h1 {
font-size: 42px;
margin-bottom: 8px;
color: #000;
}
.hero p {
color: #000;
}
.notice-card {
background: #e8f0fe;
padding: 12px 16px;
border-radius: 12px;
display: flex;
flex-direction: column;
gap: 4px;
color: #1a3c78;
margin-bottom: 20px;
outline: 1px solid #c2d1f0;
}
.app-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 16px;
}
.app-card {
background: #fff;
border-radius: 16px;
padding: 16px;
display: flex;
flex-direction: column;
gap: 8px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}
.app-card img {
height: 64px;
width: 64px;
}
.app-title {
font-weight: 600;
color: #202124;
}
.app-desc,
.app-note {
color: #5f6368;
font-size: 13px;
}
.app-actions {
margin-top: auto;
display: flex;
flex-direction: column;
gap: 6px;
}
.is-disabled {
opacity: 0.6;
}
</style>
<script>
var msnry = new Masonry('#grid', {
"columnWidth": 235,
"itemSelector": ".grid-item",
"gutter": 10,
"transitionDuration": 0
});
setTimeout(() => {msnry.layout()}, 250)
setInterval(() => {
msnry.layout()
}, 1000);
</script>
<?php require_once "_incl/post-body.php"; ?>
<?php require_once "_incl/post-body.php"; ?>

BIN
public_html/static/portugalete.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 381 KiB