Skip to content

Commit

Permalink
small easter egg: loading lychee logo when loading the full JS page a…
Browse files Browse the repository at this point in the history 
…t first
  • Loading branch information
@ildyria
ildyria committed Jan 2, 2025
1 parent 36546c2 commit 5f31173
Show file tree
Hide file tree
Showing 3 changed files with 69 additions and 2 deletions.
6 changes: 5 additions & 1 deletion resources/js/views/App.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,12 +8,16 @@
</template>

<script setup lang="ts">
import { onMounted } from "vue";
import Toast from "primevue/toast";
import LeftMenu from "@/menus/LeftMenu.vue";
import Error from "@/views/Error.vue";
import { disableCtrlA } from "@/utils/keybindings-utils";
disableCtrlA();
onMounted(() => {
document.getElementsByClassName("LycheeLoading")[0].classList.add("!hidden");
});
</script>

<style lang="scss">
Expand Down
54 changes: 54 additions & 0 deletions resources/views/includes/lychee.blade.php
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
<div class="LycheeLoading" style="display: flex; justify-content: center; align-items: center; height: 100vh">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" width="301.13" height="304.34" viewBox="0 0 79.67 80.52">
<defs>
<linearGradient id="a">
<stop offset="0" stop-color="#078507"/>
<stop offset="1" stop-color="#3ec13e"/>
</linearGradient>
<linearGradient xlink:href="#a" id="b" x1="112.54" x2="148.6" y1="136.99" y2="166.89" gradientUnits="userSpaceOnUse"/>
</defs>
<g transform="translate(-70.08 -140.01)" class="paths">
<path fill="#a05a2c" stroke="#000" stroke-width=".96" d="M113.72 147.47a9.94 9.94 0 0 1 4.65 3.45m-2.2-5.5c2.4.72 2.99 1.74 3.76 3.06m-9.15 4.83c1-2.46 1.46-4.28 2.94-5.84-.2-.73.13-1.6.93-1.8.83-.39 1.83-.07 2.63-.57 1.1-.67 2.16-1.42 3.17-2.2 1.19-1.02 2.46-2.14 4.06-2.4 1.68-.17 3.1 1.98 2.18 3.44-.73 1.17-2.17 1.46-3.26 2.16-1.23.7-2.42 1.46-3.5 2.38.24 1-.37 2.1-1.38 2.38-.99.26-1.36 1.36-1.7 2.2-.23.4-.08 1.29-.73 1l-5.34-.75z"/>
<path fill="#ff515b" stroke="#000" stroke-linejoin="round" stroke-width="1.6" d="m103.19 153.3 3.82-3.2 3.64 3.58 3.51-2 3.52 3.57 4.01-1.94 2.76 4.89 4.33-.82 1.25 4.7 4.9.45.25 5.9 4.2 2.13-1.07 4.83 4.14 3.26-2.88 4.58 2.76 3.38-2.76 4.2 1.7 3.64-3.33 2.07.62 4.27-3.57 2-.19 4.52-4.58.57-1.32 4.39-4.57-.13-2.2 4.2-4.45-.87-2.95 3.2-4.52-1.82-3.26 2.88-3.07-2.94-4.2 2-3.14-3.2-4.4 1-2-4.26H85.5l-1.26-4.77-5.2-.12v-4.83l-3.52-1.7.5-4.39-3.7-1.94 2.01-4.45-3.45-3.58 3.08-4.2-2.51-4.08 4.14-2.88-1.5-5.15 4.7-1.88.3-5.9 5.4-.81.88-4.46 4.96.2 1.88-3.96 4.39 1.44 3.01-3.45z"/>
<circle cx="107.26" cy="185.67" r="21.33" fill="#e9e5d5" fill-rule="evenodd" stroke="#000" stroke-linecap="square" stroke-miterlimit="11.5" stroke-width="2"/>
<path fill="#666" fill-opacity=".19" d="M87.07 188.08c11.88 19.77 32.37 21.46 40.44-5.05 1.18 17.55-13.07 23.52-21.27 22.97-.76-.06-16.4-.34-19.17-17.92z"/>
<path fill="none" stroke="#000" stroke-linecap="round" stroke-width="1.06" d="M90.22 165.45c.92-5.44 1.46-5.74 2.3-6.2 1.43-.8 2.5.22 6.54 2.46M101.42 160.27c3.02-4.61 3.63-4.67 4.58-4.76 1.63-.16 2.2 1.2 5 4.88M113.3 160.94c4.61-3.03 5.2-2.83 6.1-2.54 1.56.51 1.54 1.99 2.65 6.47M123.6 166.48c5.44-.86 5.9-.44 6.6.2 1.21 1.11.58 2.45-.26 7M131.08 175.73c5.1 2.1 5.27 2.69 5.54 3.6.46 1.58-.78 2.4-3.86 5.84M132.69 186.81c3.76 4.04 3.67 4.65 3.53 5.59-.24 1.62-1.7 1.85-5.94 3.7M130.03 197.5c1.57 5.3 1.22 5.8.67 6.58-.94 1.34-2.35.9-6.96.66M122.78 206.14c-.7 5.47-1.24 5.78-2.05 6.28-1.4.85-2.51-.13-6.63-2.22M83.67 175.04c-2.1-5.1-1.8-5.64-1.35-6.47.8-1.44 2.25-1.14 6.86-1.38M81.3 186.3c-4.2-3.6-4.17-4.2-4.14-5.16.06-1.64 1.48-2.03 5.48-4.34M84.26 196.92c-5.26-1.65-5.48-2.23-5.83-3.12-.59-1.53.57-2.45 3.34-6.14M91.57 205.5c-5.43 1.01-5.9.6-6.61-.02-1.24-1.07-.65-2.43.06-6.99M101.47 210.26c-4.6 3.03-5.19 2.84-6.1 2.55-1.55-.5-1.54-1.99-2.65-6.47M112.65 210.33c-3.02 4.62-3.64 4.68-4.58 4.77-1.64.15-2.21-1.21-5.01-4.88"/>
<path fill="#fff" fill-opacity=".41" d="M98.16 169.57s1.33-1.2 2.49-.13c1.15 1.07-1.07 2.57-1.07 2.57s-2.72 1.26-4.57 4.13c-1.28 2-2.35.75-2.35.75s-1.12-.6-.22-2.13c1.22-2.38 2.76-3.14 5.72-5.19z"/>
<path fill="url(#b)" stroke="#000" stroke-width="1.4" d="M127.74 145.67c4.47.23 9.5 2.19 16.06 10.28 8.34 10.3 4.26 15.88 4.26 15.88l-9.76-6.3s-8.16-4.52-10.91-12.86c-2.22-4.46-4.6-4.33-3.15-6.62.72-.73 1.05-.5 3.5-.38z"/>
<path fill="none" stroke="#000" stroke-width=".96" d="M124.1 146.5c8.26 4.38 16.97 12.75 21.68 20.54"/>
<path fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width=".96" d="m131.23 156.28.72-4.2 5.27-.63M135.5 160.08l.84-4.27 4.14-.22M140 163.72l.63-3.45 3.83.19M143.27 166.76l.63-2.57 2.2-.28M145.59 168.4l.13-1.39 1.4.6"/>
<path class="tick tick0" fill="#ffd5d5" stroke="#000" stroke-width="1.26" d="M97.77 175.89c.54-.66 2.06-1.8 3.91.37 1.41 1.65 2.08 2.7.38 4.3-1.45 1.35-2.45-.07-3.4-.83-1.25-.98-1.71-2.83-.89-3.84z"/>
<path class="tick tick1" fill="#f6cc08" stroke="#000" stroke-width="1.26" d="M107.65 172.19c.84-.16 2.73-.02 2.72 2.83 0 2.17-.18 3.4-2.5 3.5-1.99.09-1.83-1.64-2.05-2.84-.3-1.56.55-3.26 1.83-3.5z"/>
<path class="tick tick2" fill="maroon" stroke="#000" stroke-width="1.26" d="M118.44 176.02c.6.6 1.6 2.2-.73 3.86-1.77 1.26-2.88 1.83-4.31 0-1.22-1.57.28-2.44 1.12-3.33 1.1-1.14 2.98-1.44 3.92-.53z"/>
<path class="tick tick3" fill="#a00" stroke="#000" stroke-width="1.26" d="M122.6 185.5c.08.84-.18 2.72-3.03 2.51-2.16-.15-3.38-.42-3.32-2.75.06-1.98 1.78-1.7 2.99-1.84 1.57-.19 3.21.78 3.35 2.08z"/>
<path class="tick tick4" fill="#d40000" stroke="#000" stroke-width="1.26" d="M117.96 195.46c-.61.59-2.25 1.53-3.84-.85-1.2-1.8-1.74-2.93.14-4.3 1.6-1.17 2.43.35 3.28 1.22 1.12 1.13 1.36 3.02.42 3.93z"/>
<path class="tick tick5" fill="red" stroke="#000" stroke-width="1.26" d="M108.2 199.18c-.83.14-2.72-.03-2.67-2.88.04-2.16.24-3.4 2.56-3.46 1.99-.05 1.8 1.67 2 2.87.28 1.56-.6 3.26-1.88 3.47z"/>
<path class="tick tick6" fill="#ff8080" stroke="#000" stroke-width="1.26" d="M98.3 196.05c-.74-.42-2.1-1.72-.28-3.92 1.38-1.66 2.3-2.5 4.16-1.1 1.58 1.21.35 2.44-.24 3.5-.76 1.4-2.5 2.16-3.64 1.52z"/>
<path class="tick tick7" fill="#faa" stroke="#000" stroke-width="1.26" d="M93.32 186.16c-.24-.81-.29-2.7 2.55-2.99 2.15-.21 3.4-.15 3.73 2.15.29 1.97-1.45 1.98-2.62 2.32-1.52.45-3.3-.22-3.66-1.48z"/>
</g>
</svg>
{{-- We use inline style because that makes sure that they are direclty loaded at rendering instead of waiting for the full JS to load. --}}
<style>
.tick {
fill: transparent;
animation: col 2s linear infinite;
--delay: 0.25s;
}
.tick0 { animation-delay: calc(0 * var(--delay)); }
.tick1 { animation-delay: calc(1 * var(--delay)); }
.tick2 { animation-delay: calc(2 * var(--delay)); }
.tick3 { animation-delay: calc(3 * var(--delay)); }
.tick4 { animation-delay: calc(4 * var(--delay)); }
.tick5 { animation-delay: calc(5 * var(--delay)); }
.tick6 { animation-delay: calc(6 * var(--delay)); }
.tick7 { animation-delay: calc(7 * var(--delay)); }
.tick8 { animation-delay: calc(8 * var(--delay)); }
@keyframes col {
0%, 100% {fill:transparent}
10% {fill:#38bdf8}
}
</style>
</div>
11 changes: 10 additions & 1 deletion resources/views/vueapp.blade.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,15 +7,24 @@
<head>
<meta charset="UTF-8">
<x-meta />
<style>
body.dark {
/* var(--p-surface-900); */
/* = var(--p-zinc-900); */
background-color: #18181b;
}
</style>
@vite(['resources/js/app.ts','resources/sass/app.scss'])
{{-- @vite(['resources/sass/app.scss']) --}}
</head>
@if((Configs::get()['dark_mode_enabled'] ?? '1') == '1')
<body class="antialiased dark">
@else
<body class="antialiased">
@endif
<x-warning-misconfiguration />
<x-warning-misconfiguration />
@include('includes.svg')
@include('includes.lychee')
<div id="app" class="w-full3">
<app/>
</div>
Expand Down

0 comments on commit 5f31173

Please sign in to comment.