OpenBokeron/TallerCiCd
8
0
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects Releases Wiki Activity

Add fish easter egg

Browse Source
This commit is contained in:
jose-rZM
2025-12-15 13:15:26 +01:00
parent cde0b767d2
commit 3360a8fc60
2 changed files with 104 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
frontend/src/App.svelte
View File

@@ -3,6 +3,7 @@
import { API_BASE, ENABLE_POLLING } from './config';
import { getBuildHistory, getCiStatus, getMenu, getPrices } from './services/api';
import { prettify } from './utils/text';
import { fly, fade } from 'svelte/transition';
let menu = null;
let prices = [];
@@ -13,6 +14,16 @@
let loadingCiStatus = true;
let buildHistory = [];
let loadingHistory = true;
let showFishToast = false;
function onFishClick() {
if (showFishToast) return;
showFishToast = true;
setTimeout(() => {
showFishToast = false;
}, 2800);
}
async function fetchMenu() {
loadingMenu = true;
@@ -129,7 +140,9 @@
</div>
{#if menu}
<div class={`menu-layout ${menu?.alternative?.items?.length ? 'with-alternative' : ''}`}>
<div
class={`menu-layout ${menu?.alternative?.items?.length ? 'with-alternative' : ''}`}
>
<div class="menu-primary">
<div class="menu-grid">
<div>
@@ -144,7 +157,37 @@
<p class="section-title">Segundos</p>
<ul>
{#each menu.mains as main}
<li class:fish={main.toLowerCase().includes('pescado') || main.toLowerCase().includes('pedro')}>{main}</li>
<li
class:fish={main.toLowerCase().includes('pescado') ||
main.toLowerCase().includes('pedro')}
on:click={() => {
if (
main.toLowerCase().includes('pescado') ||
main.toLowerCase().includes('pedro')
) {
onFishClick();
}
}}
>
{main}
</li>
{#if showFishToast}
<div
class="toast"
in:fly={{ y: 20, duration: 200 }}
out:fade={{ duration: 150 }}
>
<div class="toast-icon">🐟</div>
<div class="toast-content">
<div class="toast-title">Legacy feature</div>
<div class="toast-text">
A día de hoy, lleva habiendo pescado al
vapor (y/o variantes) diariamente desde hace
varios años.
</div>
</div>
</div>
{/if}
{/each}
</ul>
</div>
@@ -185,7 +228,9 @@
<li>{alternativeItem}</li>
{/each}
</ul>
<span class="chip subtle">Mira si te estás planteando esto, mejor quédate sin comer</span>
<span class="chip subtle"
>Mira si te estás planteando esto, mejor quédate sin comer</span
>
</aside>
{/if}
</div>
@@ -276,7 +321,10 @@
{#if buildHistory.length}
<div class="history-list">
{#each buildHistory as build}
<details class={`history-item ${build.status}`} open={build === buildHistory[0]}>
<details
class={`history-item ${build.status}`}
open={build === buildHistory[0]}
>
<summary>
<div class="summary-left">
<span class={`status-dot ${build.status}`}></span>
@@ -306,9 +354,7 @@
{build.fun_message}
</p>
{:else}
<p class="history-message success">
Correcto
</p>
<p class="history-message success">Correcto</p>
{/if}
</div>
</details>

53
frontend/src/styles/app.css
View File

@@ -239,7 +239,9 @@ button.outline {
padding: 1rem 1.1rem;
border: 1px dashed rgba(234, 179, 8, 0.45);
background: linear-gradient(160deg, rgba(234, 179, 8, 0.1), rgba(234, 179, 8, 0.02));
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03), 0 16px 32px rgba(0, 0, 0, 0.22);
box-shadow:
inset 0 0 0 1px rgba(255, 255, 255, 0.03),
0 16px 32px rgba(0, 0, 0, 0.22);
color: #fef9c3;
display: flex;
flex-direction: column;
@@ -493,7 +495,9 @@ li {
border-radius: 12px;
background: rgba(255, 255, 255, 0.02);
overflow: hidden;
transition: border-color 160ms ease, box-shadow 160ms ease;
transition:
border-color 160ms ease,
box-shadow 160ms ease;
}
.history-item summary {
@@ -606,3 +610,48 @@ li {
color: #fecdd3;
border: 1px solid rgba(248, 113, 113, 0.4);
}
.fish {
cursor: pointer;
position: relative;
}
.toast {
position: fixed;
bottom: 1.5rem;
right: 1.5rem;
display: flex;
align-items: center;
gap: 0.75rem;
background: linear-gradient(135deg, #1f1f1f, #2a2a2a);
color: #fff;
padding: 0.75rem 1rem;
border-radius: 10px;
box-shadow:
0 10px 30px rgba(0, 0, 0, 0.35),
inset 0 0 0 1px rgba(255, 255, 255, 0.05);
z-index: 1000;
max-width: 260px;
backdrop-filter: blur(6px);
}
.toast-icon {
font-size: 1.4rem;
line-height: 1;
}
.toast-title {
font-weight: 600;
font-size: 0.9rem;
}
.toast-text {
font-size: 0.8rem;
opacity: 0.85;
}