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 { API_BASE, ENABLE_POLLING } from './config';
import { getBuildHistory, getCiStatus, getMenu, getPrices } from './services/api'; import { getBuildHistory, getCiStatus, getMenu, getPrices } from './services/api';
import { prettify } from './utils/text'; import { prettify } from './utils/text';
import { fly, fade } from 'svelte/transition';
let menu = null; let menu = null;
let prices = []; let prices = [];
@@ -13,6 +14,16 @@
let loadingCiStatus = true; let loadingCiStatus = true;
let buildHistory = []; let buildHistory = [];
let loadingHistory = true; let loadingHistory = true;
let showFishToast = false;
function onFishClick() {
if (showFishToast) return;
showFishToast = true;
setTimeout(() => {
showFishToast = false;
}, 2800);
}
async function fetchMenu() { async function fetchMenu() {
loadingMenu = true; loadingMenu = true;
@@ -129,7 +140,9 @@
</div> </div>
{#if menu} {#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-primary">
<div class="menu-grid"> <div class="menu-grid">
<div> <div>
@@ -144,7 +157,37 @@
<p class="section-title">Segundos</p> <p class="section-title">Segundos</p>
<ul> <ul>
{#each menu.mains as main} {#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} {/each}
</ul> </ul>
</div> </div>
@@ -185,7 +228,9 @@
<li>{alternativeItem}</li> <li>{alternativeItem}</li>
{/each} {/each}
</ul> </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> </aside>
{/if} {/if}
</div> </div>
@@ -276,7 +321,10 @@
{#if buildHistory.length} {#if buildHistory.length}
<div class="history-list"> <div class="history-list">
{#each buildHistory as build} {#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> <summary>
<div class="summary-left"> <div class="summary-left">
<span class={`status-dot ${build.status}`}></span> <span class={`status-dot ${build.status}`}></span>
@@ -306,9 +354,7 @@
{build.fun_message} {build.fun_message}
</p> </p>
{:else} {:else}
<p class="history-message success"> <p class="history-message success">Correcto</p>
Correcto
</p>
{/if} {/if}
</div> </div>
</details> </details>

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

@@ -239,7 +239,9 @@ button.outline {
padding: 1rem 1.1rem; padding: 1rem 1.1rem;
border: 1px dashed rgba(234, 179, 8, 0.45); 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)); 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; color: #fef9c3;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@@ -493,7 +495,9 @@ li {
border-radius: 12px; border-radius: 12px;
background: rgba(255, 255, 255, 0.02); background: rgba(255, 255, 255, 0.02);
overflow: hidden; overflow: hidden;
transition: border-color 160ms ease, box-shadow 160ms ease; transition:
border-color 160ms ease,
box-shadow 160ms ease;
} }
.history-item summary { .history-item summary {
@@ -606,3 +610,48 @@ li {
color: #fecdd3; color: #fecdd3;
border: 1px solid rgba(248, 113, 113, 0.4); 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;
}