Tul xxx Tul

Viewing: index.php

<!-- ═══════════════════════════════════════════════════════════════════════════
     COMIDAS MODULE - NEO-BRUTALIST REMASTER
     ═══════════════════════════════════════════════════════════════════════════ -->
<style>
    #comidas-module * {
        font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif !important;
        border-radius: 0 !important;
    }

    /* Keep spinners round */
    #comidas-module .spinner-border,
    #comidas-module .spinner-grow,
    .spinner-border,
    .spinner-grow {
        border-radius: 50% !important;
    }

    /* Module Header */
    #comidas-module .module-header {
        margin-bottom: 2rem;
    }

    #comidas-module .module-title {
        font-size: 2.5rem;
        font-weight: 800;
        color: #f4f4f5;
        text-transform: uppercase;
        letter-spacing: 2px;
        margin-bottom: 0.5rem;
    }

    #comidas-module .module-subtitle {
        color: #a1a1aa;
        font-size: 1rem;
        font-family: 'JetBrains Mono', monospace !important;
        letter-spacing: 0.5px;
    }

    /* Button Nueva Comida */
    #comidas-module #btn-nueva-comida {
        background-color: #10b981;
        border: 2px solid #10b981;
        color: #fff;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 2px;
        padding: 0.75rem 1.5rem;
        transition: all 0.2s;
        box-shadow: 4px 4px 0 rgba(16, 185, 129, 0.3);
    }

    #comidas-module #btn-nueva-comida:hover {
        transform: translate(-2px, -2px);
        box-shadow: 6px 6px 0 rgba(16, 185, 129, 0.4);
    }

    #comidas-module #btn-nueva-comida:active {
        transform: translate(0, 0);
        box-shadow: 2px 2px 0 rgba(16, 185, 129, 0.3);
    }

    /* Empty State */
    #comidas-module .empty-state {
        background-color: #18181b;
        border: 2px solid #27272a;
        padding: 3rem 2rem;
        text-align: center;
        box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.4);
    }

    #comidas-module .empty-state i {
        font-size: 4rem;
        color: #52525b;
        margin-bottom: 1rem;
    }

    #comidas-module .empty-state h5 {
        color: #e4e4e7;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 1.5px;
        margin-bottom: 0.5rem;
    }

    #comidas-module .empty-state p {
        color: #a1a1aa;
        font-size: 0.95rem;
    }

    /* Meal Items */
    #comidas-module .meal-item {
        background-color: #18181b;
        border: 2px solid #27272a;
        padding: 1rem;
        display: flex;
        align-items: center;
        gap: 1rem;
        transition: all 0.2s;
        box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.3);
    }

    #comidas-module .meal-item:hover {
        transform: translate(-1px, -1px);
        box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.4);
        border-color: #3f3f46;
    }

    #comidas-module .meal-item.completed {
        opacity: 0.6;
        background-color: #27272a;
    }

    #comidas-module .meal-item.completed .meal-name {
        text-decoration: line-through;
    }

    /* Custom Checkbox - Silver Style */
    #comidas-module .meal-check {
        appearance: none;
        width: 24px;
        height: 24px;
        border: 2px solid #71717a;
        background-color: transparent;
        cursor: pointer;
        position: relative;
        transition: all 0.2s;
        flex-shrink: 0;
        box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.2);
    }

    #comidas-module .meal-check:hover {
        border-color: #a1a1aa;
        transform: translate(-1px, -1px);
        box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.3);
    }

    #comidas-module .meal-check:checked {
        background: linear-gradient(135deg, #cbd5e1 0%, #94a3b8 100%);
        border-color: #cbd5e1;
        animation: checkPulse 0.3s ease;
    }

    #comidas-module .meal-check:checked::after {
        content: '';
        position: absolute;
        left: 6px;
        top: 2px;
        width: 6px;
        height: 12px;
        border: solid #09090b;
        border-width: 0 2px 2px 0;
        transform: rotate(45deg);
    }

    @keyframes checkPulse {
        0%, 100% { transform: scale(1); }
        50% { transform: scale(1.1); }
    }

    #comidas-module .meal-info {
        flex: 1;
    }

    #comidas-module .meal-name {
        color: #f4f4f5;
        font-size: 1.05rem;
        font-weight: 700;
        margin-bottom: 0.25rem;
    }

    #comidas-module .meal-desc {
        color: #a1a1aa;
        font-size: 0.9rem;
        margin-bottom: 0.25rem;
        line-height: 1.4;
    }

    #comidas-module .meal-date {
        color: #71717a;
        font-size: 0.8rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        font-family: 'JetBrains Mono', monospace !important;
    }

    #comidas-module .meal-actions {
        display: flex;
        gap: 0.5rem;
    }

    #comidas-module .btn-icon {
        background-color: transparent;
        border: 2px solid #3f3f46;
        color: #a1a1aa;
        padding: 0.4rem 0.6rem;
        cursor: pointer;
        transition: all 0.2s;
        box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.2);
        font-size: 0.9rem;
    }

    #comidas-module .btn-icon:hover {
        transform: translate(-1px, -1px);
        box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.3);
    }

    #comidas-module .btn-icon.edit:hover {
        background-color: rgba(16, 185, 129, 0.1);
        border-color: #10b981;
        color: #10b981;
    }

    #comidas-module .btn-icon.danger:hover {
        background-color: rgba(239, 68, 68, 0.1);
        border-color: #ef4444;
        color: #ef4444;
    }

    /* Modal Styles */
    #modalComida .modal-content {
        background-color: #18181b;
        border: 2px solid #27272a;
        color: #f4f4f5;
        box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.5);
    }

    #modalComida .modal-header {
        border-bottom: 2px solid #27272a;
    }

    #modalComida .modal-title {
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 1.5px;
        font-size: 1.1rem;
    }

    #modalComida .modal-footer {
        border-top: 2px solid #27272a;
    }

    #modalComida .form-label {
        color: #a1a1aa;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 1px;
        font-size: 0.85rem;
        margin-bottom: 0.5rem;
    }

    #modalComida .form-control {
        background-color: #27272a !important;
        border: 2px solid #3f3f46 !important;
        color: #e4e4e7 !important;
        padding: 0.6rem 0.8rem;
        transition: all 0.2s;
        box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.2);
    }

    #modalComida .form-control:focus {
        border-color: #10b981 !important;
        box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2) !important;
        outline: none;
    }

    #modalComida .form-control::placeholder {
        color: #71717a;
    }

    /* Modal Buttons */
    #modalComida .btn-ghost {
        background-color: transparent;
        border: 2px solid #3f3f46;
        color: #a1a1aa;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 1px;
        padding: 0.5rem 1.5rem;
        transition: all 0.2s;
        box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.2);
    }

    #modalComida .btn-ghost:hover {
        background-color: #27272a;
        color: #e4e4e7;
        transform: translate(-1px, -1px);
        box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.3);
    }

    #modalComida .btn-accent {
        background-color: #10b981;
        border: 2px solid #10b981;
        color: #fff;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 1.5px;
        padding: 0.5rem 1.5rem;
        transition: all 0.2s;
        box-shadow: 3px 3px 0 rgba(16, 185, 129, 0.3);
    }

    #modalComida .btn-accent:hover {
        transform: translate(-2px, -2px);
        box-shadow: 5px 5px 0 rgba(16, 185, 129, 0.4);
    }

    #modalComida .btn-accent:active {
        transform: translate(0, 0);
        box-shadow: 2px 2px 0 rgba(16, 185, 129, 0.3);
    }

    /* Close Button */
    #modalComida .btn-close {
        background-color: transparent;
        border: 2px solid #3f3f46;
        opacity: 1;
        padding: 0.5rem;
        transition: all 0.2s;
        box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.2);
        filter: brightness(0) invert(1);
    }

    #modalComida .btn-close:hover {
        background-color: #ef4444;
        border-color: #ef4444;
        transform: translate(-1px, -1px);
        box-shadow: 3px 3px 0 rgba(239, 68, 68, 0.3);
    }

    /* Force modal buttons hover states */
    body #modalComida .btn-ghost:hover {
        background-color: #27272a !important;
        color: #e4e4e7 !important;
        transform: translate(-1px, -1px);
        box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.3) !important;
    }

    body #modalComida .btn-accent:hover {
        transform: translate(-2px, -2px) !important;
        box-shadow: 5px 5px 0 rgba(16, 185, 129, 0.4) !important;
    }

    body #modalComida .btn-accent:active {
        transform: translate(0, 0) !important;
        box-shadow: 2px 2px 0 rgba(16, 185, 129, 0.3) !important;
    }

    body #modalComida .btn-close:hover {
        background-color: #ef4444 !important;
        border-color: #ef4444 !important;
        transform: translate(-1px, -1px);
        box-shadow: 3px 3px 0 rgba(239, 68, 68, 0.3) !important;
    }

    /* Responsive */
    @media (max-width: 768px) {
        #comidas-module .module-title {
            font-size: 2rem;
        }

        #comidas-module .module-header {
            flex-direction: column;
            align-items: flex-start !important;
        }

        #comidas-module #btn-nueva-comida {
            width: 100%;
            justify-content: center;
        }

        #comidas-module .meal-item {
            flex-wrap: wrap;
        }

        #comidas-module .meal-actions {
            width: 100%;
            justify-content: flex-end;
            padding-top: 0.5rem;
            border-top: 2px solid #27272a;
        }
    }

/* ── Confirmation Modal (Neo-Brutalist) ── */
#confirmModal {
    padding: 10px !important;
}

#confirmModal.show {
    padding: 10px !important;
}

body #confirmModal .modal-dialog {
    padding: 0 !important;
    margin: 1.75rem auto !important;
}

body #confirmModal .modal-content {
    background: #0f0f0f !important;
    border: 2px solid rgba(255, 255, 255, 0.15) !important;
    box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.5) !important;
    border-radius: 0 !important;
    margin: 0 !important;
}

body #confirmModal .modal-header {
    border-bottom: 2px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 0 !important;
}

body #confirmModal .modal-body {
    border-radius: 0 !important;
}

body #confirmModal .modal-footer {
    border-top: 2px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 0 !important;
}

body #confirmModal .modal-title {
    font-family: 'Space Grotesk', sans-serif !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
}

body #confirmModal .btn-danger {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
    border: 2px solid #ef4444 !important;
    border-radius: 0 !important;
    color: #fff !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    box-shadow: 3px 3px 0 rgba(239, 68, 68, 0.3) !important;
    transition: all 0.2s ease !important;
    font-family: 'Space Grotesk', sans-serif !important;
}

body #confirmModal .btn-danger:hover {
    transform: translate(-2px, -2px) !important;
    box-shadow: 5px 5px 0 rgba(239, 68, 68, 0.4) !important;
}

body #confirmModal .btn-danger:active {
    transform: translate(0, 0) !important;
    box-shadow: 2px 2px 0 rgba(239, 68, 68, 0.3) !important;
}

body #confirmModal .btn-secondary {
    background: transparent !important;
    border: 2px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 0 !important;
    color: #fff !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    box-shadow: 3px 3px 0 rgba(255, 255, 255, 0.05) !important;
    transition: all 0.2s ease !important;
    font-family: 'Space Grotesk', sans-serif !important;
}

body #confirmModal .btn-secondary:hover {
    transform: translate(-2px, -2px) !important;
    box-shadow: 5px 5px 0 rgba(255, 255, 255, 0.08) !important;
    background: rgba(255, 255, 255, 0.03) !important;
}

body #confirmModal .btn-secondary:active {
    transform: translate(0, 0) !important;
    box-shadow: 2px 2px 0 rgba(255, 255, 255, 0.05) !important;
}
</style>

<?php
/**
 * Módulo Comidas - Vista principal
 * Lista tipo to-do para registrar comidas
 */
require_once __DIR__ . '/../../config/database.php';

$db = getDB();
$uid = $_SESSION['user_id'];

// Obtener todas las comidas del usuario ordenadas por fecha y estado
$duo = getDuoId();
$stmt = $db->prepare("SELECT * FROM comidas WHERE usuario_id = :uid AND duo_id = :duo ORDER BY completada ASC, fecha DESC, id DESC");
$stmt->execute([':uid' => $uid, ':duo' => $duo]);
$comidas = $stmt->fetchAll();
?>

<div id="comidas-module" class="fade-in-up">
    <!-- Header del módulo -->
    <div class="module-header d-flex flex-wrap align-items-start justify-content-between gap-3">
        <div>
            <h1 class="module-title">
                <i class="bi bi-egg-fried"></i>
                Comidas
            </h1>
            <p class="module-subtitle">Registra y controla tu alimentación diaria</p>
        </div>
        <button class="btn btn-accent d-flex align-items-center gap-2" data-bs-toggle="modal" data-bs-target="#modalComida" onclick="ComidasModule.resetForm()" id="btn-nueva-comida">
            <i class="bi bi-plus-lg"></i>
            Nueva Comida
        </button>
    </div>

    <!-- Lista de comidas -->
    <div class="d-flex flex-column gap-3 fade-in-up fade-in-up-delay-1" id="comidas-list">
        <?php if (empty($comidas)): ?>
            <div class="empty-state" id="comidas-empty">
                <i class="bi bi-egg-fried d-block"></i>
                <h5>Sin comidas registradas</h5>
                <p>Comienza a registrar tus comidas para llevar un control de tu alimentación.</p>
            </div>
        <?php else: ?>
            <?php foreach ($comidas as $comida): ?>
                <div class="meal-item <?= $comida['completada'] ? 'completed' : '' ?>" id="comida-<?= $comida['id'] ?>">
                    <input type="checkbox" class="meal-check" 
                           <?= $comida['completada'] ? 'checked' : '' ?>
                           onchange="ComidasModule.toggleCompletada(<?= $comida['id'] ?>, this.checked)"
                           id="check-comida-<?= $comida['id'] ?>">
                    <div class="meal-info">
                        <div class="meal-name"><?= htmlspecialchars($comida['nombre']) ?></div>
                        <?php if (!empty($comida['descripcion'])): ?>
                            <div class="meal-desc"><?= htmlspecialchars($comida['descripcion']) ?></div>
                        <?php endif; ?>
                        <div class="meal-date">
                            <i class="bi bi-calendar3 me-1"></i>
                            <?= date('d/m/Y', strtotime($comida['fecha'])) ?>
                        </div>
                    </div>
                    <div class="meal-actions">
                        <button class="btn-icon edit" onclick="ComidasModule.editar(<?= $comida['id'] ?>, '<?= htmlspecialchars(addslashes($comida['nombre'])) ?>', '<?= htmlspecialchars(addslashes($comida['descripcion'] ?? '')) ?>', '<?= $comida['fecha'] ?>')" title="Editar">
                            <i class="bi bi-pencil"></i>
                        </button>
                        <button class="btn-icon danger" onclick="ComidasModule.eliminar(<?= $comida['id'] ?>)" title="Eliminar">
                            <i class="bi bi-trash3"></i>
                        </button>
                    </div>
                </div>
            <?php endforeach; ?>
        <?php endif; ?>
    </div>
</div><!-- Close #comidas-module -->

<!-- Modal para crear/editar comida -->
<div class="modal fade" id="modalComida" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content" style="border-radius: 0 !important; background-color: #18181b; border: 2px solid #27272a; color: #f4f4f5; box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.5);">
            <div class="modal-header" style="border-radius: 0 !important; border-bottom: 2px solid #27272a;">
                <h5 class="modal-title" id="modalComidaTitle" style="border-radius: 0 !important; font-weight: 800; text-transform: uppercase; letter-spacing: 1.5px; font-size: 1.1rem;">Nueva Comida</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" style="border-radius: 0 !important; background-color: transparent; border: 2px solid #3f3f46; opacity: 1; padding: 0.5rem; transition: all 0.2s; box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.2); filter: brightness(0) invert(1);"></button>
            </div>
            <form id="formComida" onsubmit="ComidasModule.guardar(event)">
                <div class="modal-body" style="border-radius: 0 !important;">
                    <input type="hidden" id="comida-id" value="">
                    <div class="mb-3">
                        <label for="comida-nombre" class="form-label" style="border-radius: 0 !important; color: #a1a1aa; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; font-size: 0.85rem; margin-bottom: 0.5rem;">Nombre *</label>
                        <input type="text" class="form-control" id="comida-nombre" placeholder="Ej: Pollo con arroz" required style="border-radius: 0 !important; background-color: #27272a !important; border: 2px solid #3f3f46 !important; color: #e4e4e7 !important; padding: 0.6rem 0.8rem; transition: all 0.2s; box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.2);">
                    </div>
                    <div class="mb-3">
                        <label for="comida-descripcion" class="form-label" style="border-radius: 0 !important; color: #a1a1aa; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; font-size: 0.85rem; margin-bottom: 0.5rem;">Descripción (opcional)</label>
                        <textarea class="form-control" id="comida-descripcion" rows="2" placeholder="Detalles adicionales..." style="border-radius: 0 !important; background-color: #27272a !important; border: 2px solid #3f3f46 !important; color: #e4e4e7 !important; padding: 0.6rem 0.8rem; transition: all 0.2s; box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.2);"></textarea>
                    </div>
                    <div class="mb-3">
                        <label for="comida-fecha" class="form-label" style="border-radius: 0 !important; color: #a1a1aa; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; font-size: 0.85rem; margin-bottom: 0.5rem;">Fecha</label>
                        <input type="date" class="form-control" id="comida-fecha" value="<?= date('Y-m-d') ?>" style="border-radius: 0 !important; background-color: #27272a !important; border: 2px solid #3f3f46 !important; color: #e4e4e7 !important; padding: 0.6rem 0.8rem; transition: all 0.2s; box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.2);">
                    </div>
                </div>
                <div class="modal-footer" style="border-radius: 0 !important; border-top: 2px solid #27272a;">
                    <button type="button" class="btn btn-ghost" data-bs-dismiss="modal" style="border-radius: 0 !important; background-color: transparent; border: 2px solid #3f3f46; color: #a1a1aa; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; padding: 0.5rem 1.5rem; transition: all 0.2s; box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.2);">Cancelar</button>
                    <button type="submit" class="btn btn-accent" id="btn-guardar-comida" style="border-radius: 0 !important; background-color: #10b981; border: 2px solid #10b981; color: #fff; font-weight: 800; text-transform: uppercase; letter-spacing: 1.5px; padding: 0.5rem 1.5rem; transition: all 0.2s; box-shadow: 3px 3px 0 rgba(16, 185, 129, 0.3);">
                        <i class="bi bi-check-lg me-1"></i>
                        Guardar
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
User / IP	: 216.73.216.159
Host / Server	: 45.84.207.204 / aircan.me
System	: Linux lt-bnk-web1726.main-hosting.eu 5.14.0-611.36.1.el9_7.x86_64 #1 SMP PREEMPT_DYNAMIC Tue Mar 3 11:23:52 EST 2026 x86_64