146 lines
5.3 KiB
PHP
146 lines
5.3 KiB
PHP
<!DOCTYPE html>
|
||
<html lang="es">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<meta name="csrf-token" content="{{ csrf_token() }}">
|
||
<title>DummyBot – tareas</title>
|
||
<style>
|
||
:root {
|
||
--bg: #0f172a;
|
||
--card: #1e293b;
|
||
--text: #e2e8f0;
|
||
--muted: #94a3b8;
|
||
--accent: #38bdf8;
|
||
--high: #ef4444;
|
||
--med: #facc15;
|
||
--low: #22c55e;
|
||
}
|
||
* { box-sizing: border-box; }
|
||
body {
|
||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
||
background: var(--bg);
|
||
color: var(--text);
|
||
margin: 0;
|
||
padding: 2rem 1rem;
|
||
max-width: 720px;
|
||
margin-inline: auto;
|
||
}
|
||
h1 { margin: 0 0 1.5rem; font-size: 1.8rem; }
|
||
h1 small { font-size: 0.9rem; color: var(--muted); font-weight: 400; }
|
||
|
||
form.add {
|
||
background: var(--card);
|
||
padding: 1rem;
|
||
border-radius: 8px;
|
||
display: grid;
|
||
grid-template-columns: 1fr auto auto;
|
||
gap: 0.5rem;
|
||
margin-bottom: 2rem;
|
||
}
|
||
form.add input[type="text"] {
|
||
background: #0b1224;
|
||
border: 1px solid #334155;
|
||
color: var(--text);
|
||
padding: 0.6rem 0.8rem;
|
||
border-radius: 6px;
|
||
font-size: 1rem;
|
||
}
|
||
form.add select, form.add button {
|
||
background: #0b1224;
|
||
color: var(--text);
|
||
border: 1px solid #334155;
|
||
padding: 0.6rem 0.8rem;
|
||
border-radius: 6px;
|
||
font-size: 1rem;
|
||
cursor: pointer;
|
||
}
|
||
form.add button { background: var(--accent); color: #002030; border-color: var(--accent); font-weight: 600; }
|
||
form.add button:hover { filter: brightness(1.1); }
|
||
|
||
ul.tasks { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.5rem; }
|
||
ul.tasks li {
|
||
background: var(--card);
|
||
padding: 0.8rem 1rem;
|
||
border-radius: 6px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.75rem;
|
||
}
|
||
ul.tasks li.done { opacity: 0.5; text-decoration: line-through; }
|
||
ul.tasks li.snoozed { border-left: 4px solid var(--med); }
|
||
.badge {
|
||
font-size: 0.7rem;
|
||
padding: 0.15rem 0.5rem;
|
||
border-radius: 999px;
|
||
font-weight: 700;
|
||
text-transform: uppercase;
|
||
}
|
||
.badge.high { background: var(--high); color: #fff; }
|
||
.badge.med { background: var(--med); color: #000; }
|
||
.badge.low { background: var(--low); color: #000; }
|
||
.title { flex: 1; }
|
||
.meta { font-size: 0.8rem; color: var(--muted); }
|
||
form.inline { display: inline; }
|
||
form.inline button {
|
||
background: transparent;
|
||
border: 1px solid #334155;
|
||
color: var(--text);
|
||
padding: 0.3rem 0.6rem;
|
||
border-radius: 4px;
|
||
cursor: pointer;
|
||
font-size: 0.85rem;
|
||
}
|
||
form.inline button:hover { border-color: var(--accent); }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<h1>DummyBot <small>· gestor de tareas TDAH-friendly</small></h1>
|
||
|
||
<form class="add" method="POST" action="{{ route('tasks.store') }}">
|
||
@csrf
|
||
<input type="text" name="title" placeholder="¿Qué tienes que hacer?" required maxlength="120" autofocus>
|
||
<select name="priority">
|
||
<option value="med">Media</option>
|
||
<option value="high">Alta</option>
|
||
<option value="low">Baja</option>
|
||
</select>
|
||
<button type="submit">Añadir</button>
|
||
</form>
|
||
|
||
<ul class="tasks">
|
||
@forelse($tasks as $task)
|
||
<li class="{{ $task->done ? 'done' : '' }} {{ $task->snooze_until && $task->snooze_until->isFuture() ? 'snoozed' : '' }}">
|
||
<span class="badge {{ $task->priority }}">{{ $task->priority }}</span>
|
||
<span class="title">{{ $task->title }}</span>
|
||
<span class="meta">
|
||
@if($task->done)
|
||
hecha {{ $task->done_at?->diffForHumans() }}
|
||
@elseif($task->snooze_until && $task->snooze_until->isFuture())
|
||
snooze hasta {{ $task->snooze_until->format('H:i') }}
|
||
@else
|
||
creada {{ $task->created_at->diffForHumans() }}
|
||
@endif
|
||
</span>
|
||
|
||
@if($task->done)
|
||
<form class="inline" method="POST" action="{{ route('tasks.restore', $task) }}">
|
||
@csrf
|
||
<button>Reabrir</button>
|
||
</form>
|
||
@else
|
||
<form class="inline" method="POST" action="{{ route('tasks.destroy', $task) }}">
|
||
@csrf @method('DELETE')
|
||
<button>Borrar</button>
|
||
</form>
|
||
@endif
|
||
</li>
|
||
@empty
|
||
<li style="background:transparent;color:var(--muted);text-align:center;padding:2rem;">
|
||
Aún no hay tareas. Añade la primera arriba ☝️
|
||
</li>
|
||
@endforelse
|
||
</ul>
|
||
</body>
|
||
</html>
|