diff options
| -rw-r--r-- | src/app.html | 8 | ||||
| -rw-r--r-- | src/lib/Landing.svelte | 20 | ||||
| -rw-r--r-- | src/lib/LandingHero.svelte | 28 | ||||
| -rw-r--r-- | static/demo/demo-poster.jpg | bin | 0 -> 36720 bytes | |||
| -rw-r--r-- | static/demo/demo.mp4 | bin | 0 -> 8762419 bytes |
5 files changed, 36 insertions, 20 deletions
diff --git a/src/app.html b/src/app.html index 152feaf2..7133b358 100644 --- a/src/app.html +++ b/src/app.html @@ -5,6 +5,14 @@ <meta charset="utf-8" /> <meta name="viewport" property="viewport" content="width=device-width" /> <meta name="theme-color" property="theme-color" content="#060506" /> + + <link rel="preconnect" href="https://s4.anilist.co" crossorigin /> + <link rel="preconnect" href="https://cdn.due.moe" crossorigin /> + <link rel="preconnect" href="https://analytics.fuwn.me" crossorigin /> + <link rel="dns-prefetch" href="https://s4.anilist.co" /> + <link rel="dns-prefetch" href="https://cdn.due.moe" /> + <link rel="dns-prefetch" href="https://i.imgur.com" /> + <meta name="description" property="description" diff --git a/src/lib/Landing.svelte b/src/lib/Landing.svelte index 4c824a8d..4a5c7df0 100644 --- a/src/lib/Landing.svelte +++ b/src/lib/Landing.svelte @@ -187,7 +187,16 @@ tabindex="0" onkeydown={(e) => e.key === 'Enter' && (demoFocused = true)} > - <img src="https://i.imgur.com/j5vfKbx.gif" alt="Demo" title="Click to expand" /> + <video + autoplay + loop + muted + playsinline + poster="/demo/demo-poster.jpg" + title="Click to expand" + > + <source src="/demo/demo.mp4" type="video/mp4" /> + </video> </div> </div> </div> @@ -203,7 +212,9 @@ onkeydown={(e) => e.key === 'Escape' && (demoFocused = false)} > <div class="demo-focused"> - <img src="https://i.imgur.com/j5vfKbx.gif" alt="Demo" /> + <video autoplay loop muted playsinline> + <source src="/demo/demo.mp4" type="video/mp4" /> + </video> <p class="demo-hint">Click anywhere to close</p> </div> @@ -344,11 +355,12 @@ transform: scale(1.02); } - .demo-card img { + .demo-card video { width: 100%; height: 100%; object-fit: fill; border-radius: 8px; + pointer-events: none; } .cta { @@ -392,7 +404,7 @@ animation: scaleIn 0.2s ease; } - .demo-focused img { + .demo-focused video { max-width: 90vw; max-height: 80vh; border-radius: 12px; diff --git a/src/lib/LandingHero.svelte b/src/lib/LandingHero.svelte index b42b91ac..401c976f 100644 --- a/src/lib/LandingHero.svelte +++ b/src/lib/LandingHero.svelte @@ -1,16 +1,9 @@ <script lang="ts"> import { env } from '$env/dynamic/public'; import localforage from 'localforage'; - import { onMount } from 'svelte'; - - let visible = $state(false); - - onMount(() => { - visible = true; - }); </script> -<section class="hero" class:visible> +<section class="hero"> <div class="hero-content"> <p class="tagline">The AniList Companion</p> @@ -55,16 +48,19 @@ text-align: center; padding: 2rem; position: relative; - opacity: 0; - transform: translateY(20px); - transition: - opacity 0.6s ease, - transform 0.6s ease; + animation: heroFadeIn 0.6s ease forwards; } - .hero.visible { - opacity: 1; - transform: translateY(0); + @keyframes heroFadeIn { + from { + opacity: 0; + transform: translateY(20px); + } + + to { + opacity: 1; + transform: translateY(0); + } } /*.hero-content { diff --git a/static/demo/demo-poster.jpg b/static/demo/demo-poster.jpg Binary files differnew file mode 100644 index 00000000..4368313e --- /dev/null +++ b/static/demo/demo-poster.jpg diff --git a/static/demo/demo.mp4 b/static/demo/demo.mp4 Binary files differnew file mode 100644 index 00000000..c7322989 --- /dev/null +++ b/static/demo/demo.mp4 |
