-
-
Notifications
You must be signed in to change notification settings - Fork 126
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
7a1793c
commit 2967fb8
Showing
8 changed files
with
289 additions
and
67 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,79 @@ | ||
| <script lang='ts'> | ||
| import { since } from '@/modules/util' | ||
| export let userProgress = 0 | ||
| /** @type {{ episode: number, image: string, summary: string, rating: number, title: { en: string }, length: number, airdate: string }[]} */ | ||
| export let episodeList = [] | ||
| </script> | ||
|
|
||
| {#each episodeList as { episode, image, summary, rating, title, length, airdate }} | ||
| {@const completed = userProgress >= episode} | ||
| {@const target = userProgress + 1 === episode} | ||
| <div class='w-full my-20 content-visibility-auto scale' class:opacity-half={completed} class:px-20={!target} class:h-150={image || summary}> | ||
| <div class='rounded w-full h-full overflow-hidden d-flex flex-xsm-column flex-row pointer' class:border={target} class:bg-black={completed} class:bg-dark={!completed}> | ||
| {#if image} | ||
| <div class='h-full'> | ||
| <img alt='thumbnail' src={image} class='img-cover h-full' /> | ||
| </div> | ||
| {/if} | ||
| <div class='h-full w-full px-20 py-15 d-flex flex-column'> | ||
| <div class='w-full d-flex flex-row mb-15'> | ||
| <div class='text-white font-weight-bold font-size-16 overflow-hidden title'> | ||
| {episode}. {title?.en || 'Episode ' + episode} | ||
| </div> | ||
| {#if length} | ||
| <div class='ml-auto pl-5'> | ||
| {length}m | ||
| </div> | ||
| {/if} | ||
| </div> | ||
| {#if completed} | ||
| <div class='progress mb-15' style='height: 2px; min-height: 2px;'> | ||
| <div class='progress-bar w-full' /> | ||
| </div> | ||
| {/if} | ||
| <div class='font-size-12 overflow-hidden'> | ||
| {summary || ''} | ||
| </div> | ||
| <div class='pt-10 font-size-12 mt-auto'> | ||
| {#if airdate} | ||
| {since(new Date(airdate))} | ||
| {/if} | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| {/each} | ||
|
|
||
| <style> | ||
| .opacity-half { | ||
| opacity: 30%; | ||
| } | ||
| .title { | ||
| display: -webkit-box !important; | ||
| -webkit-line-clamp: 1; | ||
| -webkit-box-orient: vertical; | ||
| } | ||
| .scale { | ||
| transition: transform 0.2s ease; | ||
| } | ||
| .scale:hover{ | ||
| transform: scale(1.05); | ||
| } | ||
| .border { | ||
| --dm-border-color: white | ||
| } | ||
| @media (max-width: 470px) { | ||
| .flex-xsm-column { | ||
| flex-direction: column !important; | ||
| } | ||
| .scale { | ||
| height: auto !important; | ||
| } | ||
| img { | ||
| width: 100%; | ||
| height: 15rem !important; | ||
| } | ||
| } | ||
| </style> |
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,51 @@ | ||
| <div class='container-xl'> | ||
| <div class='content px-10'> | ||
| <h1 class='w-full font-weight-bold text-white'> | ||
| Explore, Watch, and Dive into the World of Animation. | ||
| </h1> | ||
| <p class='text-muted font-size-16 w-600 mw-full'> | ||
| Embark on a journey through our Anime Discovery Hub, where seamless integration and advanced filtering redefine your anime experience. Discover, watch, and dive into animation like never before. | ||
| </p> | ||
| </div> | ||
| <div class='content row gap-15'> | ||
|
|
||
| <div class='w-full w-lg-three-quarter p-10'> | ||
| <div class='w-full card flex-grow-1 pb-0 pt-15 m-0 d-flex flex-column h-500'> | ||
| <h4 class='text-center font-weight-bold text-white mb-0'> | ||
| Anything you want | ||
| </h4> | ||
| <p class='text-center text-muted font-size-14'>Filter anime by name, genre, season, year, format, status.<br />Browse your lists, track sequels and more.</p> | ||
| <div class='flex-grow-1 w-full overflow-hidden d-flex position-relative'> | ||
| <div class='overlay-gradient-top-bottom position-absolute top-0 left-0 w-full h-full z-50' /> | ||
| <img src='/search.webp' alt='search' class='w-full h-full' /> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div class='w-full w-lg-quarter p-10'> | ||
| <div class='w-full card flex-grow-1 pb-0 pt-15 m-0 d-flex flex-column align-items-center h-lg-500 h-600'> | ||
| <h4 class='text-center font-weight-bold text-white mb-0'> | ||
| Track your progress | ||
| </h4> | ||
| <p class='text-center text-muted font-size-14'>With a click of a button you can track your watch progress in no time.</p> | ||
| <div class='flex-grow-1 overflow-hidden d-flex position-relative w-full w-lg-full w-sm-three-quarter'> | ||
| <div class='overlay-gradient-top-bottom position-absolute top-0 left-0 w-full h-full z-50' /> | ||
| <img src='/episodes.webp' alt='search' class='w-full h-full' /> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
| <style> | ||
| .overlay-gradient-top-bottom { | ||
| background: linear-gradient(0deg, #17191cff 0%, #17191c00 30%, #17191c00 70%, #17191cff); | ||
| pointer-events: none; | ||
| } | ||
| img { | ||
| object-fit: cover; | ||
| object-position: top; | ||
| } | ||
| .container-xl { | ||
| padding-top: 10rem; | ||
| } | ||
| </style> |
Binary file not shown.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file not shown.