From 83ade5376e8f2f7bdb123754053cc31f49be9f32 Mon Sep 17 00:00:00 2001
From: husbando_enjoyer <husbando_enjoyer@altdom.simplelogin.com>
Date: Mon, 15 Dec 2025 13:15:26 +0100
Subject: [PATCH] Add fish easter egg

---
 frontend/src/App.svelte     | 60 ++++++++++++++++++++++++++++++++-----
 frontend/src/styles/app.css | 53 ++++++++++++++++++++++++++++++--
 2 files changed, 104 insertions(+), 9 deletions(-)

diff --git a/frontend/src/App.svelte b/frontend/src/App.svelte
index c1e2c66..61d9e54 100644
--- a/frontend/src/App.svelte
+++ b/frontend/src/App.svelte
@@ -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>
diff --git a/frontend/src/styles/app.css b/frontend/src/styles/app.css
index 6866649..05e6169 100644
--- a/frontend/src/styles/app.css
+++ b/frontend/src/styles/app.css
@@ -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;
+}