mirror of
https://github.com/ThaUnknown/miru.git
synced 2026-04-21 01:42:05 +00:00
feat(web): WIP features page
This commit is contained in:
ThaUnknown
parent
7a1793c3db
commit
2967fb8afd
8 changed files with 289 additions and 67 deletions
79
web/src/lib/components/EpisodeList.svelte
Normal file
79
web/src/lib/components/EpisodeList.svelte
Normal file
|
|
@ -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>
|
||||
|
|
@ -1,65 +0,0 @@
|
|||
<script>
|
||||
import { since } from '@/modules/util.js'
|
||||
</script>
|
||||
|
||||
<div class='d-flex flex-column pl-lg-20'>
|
||||
<div class='w-full my-20 content-visibility-auto scale opacity-half px-20 h-150' tabindex='0' role='button'>
|
||||
<div class='rounded w-full h-full overflow-hidden d-flex flex-xsm-column flex-row pointer bg-black'>
|
||||
<div class='h-full'><img alt='thumbnail' src='https://artworks.thetvdb.com/banners/series/330139/episodes/5e9182bfcfe47.jpg' class='img-cover h-full' /></div>
|
||||
<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'>1. "I Love You"</div>
|
||||
<div class='ml-auto pl-5'>25m</div>
|
||||
</div>
|
||||
<div class='progress mb-15' style='height: 2px; min-height: 2px;'><div class='progress-bar w-full' /></div>
|
||||
<div class='font-size-12 overflow-hidden'>Hodgins retrieves Violet from the hospital, as Major Gilbert asked him to look out for her. After they meet Gilbert`s relatives, he offers her a job.</div>
|
||||
<div class='pt-10 font-size-12 mt-auto'>{since(new Date('January 11, 2018'))}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class='w-full my-20 content-visibility-auto scale h-150' tabindex='0' role='button'>
|
||||
<div class='rounded w-full h-full overflow-hidden d-flex flex-xsm-column flex-row pointer border bg-dark'>
|
||||
<div class='h-full'><img alt='thumbnail' src='https://artworks.thetvdb.com/banners/series/330139/episodes/5e918871eb4d4.jpg' class='img-cover h-full' /></div>
|
||||
<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'>2. Not Coming Back</div>
|
||||
<div class='ml-auto pl-5'>25m</div>
|
||||
</div>
|
||||
<div class='font-size-12 overflow-hidden'>Violet tries to adjust to her new job: she needs to learn typing, and her coworkers question whether she has the right demeanor for letter writing.</div>
|
||||
<div class='pt-10 font-size-12 mt-auto'>{since(new Date('January 18, 2018'))}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
|
|
@ -459,3 +459,159 @@ export const cards = [
|
|||
}
|
||||
}
|
||||
]
|
||||
|
||||
export const violetEpisodes = [
|
||||
{
|
||||
episode: 1,
|
||||
image: 'https://artworks.thetvdb.com/banners/series/330139/episodes/5e9182bfcfe47.jpg',
|
||||
summary: 'Hodgins retrieves Violet from the hospital, as Major Gilbert asked him to look out for her. After they meet Gilbert`s relatives, he offers her a job.',
|
||||
title: {
|
||||
en: '"I Love You" and Auto Memoir Dolls'
|
||||
},
|
||||
length: 25,
|
||||
airdate: '2018-01-11'
|
||||
},
|
||||
{
|
||||
episode: 2,
|
||||
image: 'https://artworks.thetvdb.com/banners/series/330139/episodes/5e918871eb4d4.jpg',
|
||||
summary: 'Violet tries to adjust to her new job: she needs to learn typing, and her coworkers question whether she has the right demeanor for letter writing.',
|
||||
title: {
|
||||
en: 'Not Coming Back'
|
||||
},
|
||||
length: 25,
|
||||
airdate: '2018-01-18'
|
||||
}
|
||||
]
|
||||
|
||||
export const horimiyaEpisodes = [
|
||||
{
|
||||
episode: 1,
|
||||
image: 'https://artworks.thetvdb.com/banners/series/388593/episodes/5ff9fadc853c1.jpg',
|
||||
summary: 'Hori-san lives a double life: trendy, popular girl at school, simple, strong-willed caretaker at home. After a chance encounter with her classmate Miyamura, she finds out that she`s not the only one who hides her true self away.\nSource: Funimation',
|
||||
title: {
|
||||
en: 'A Tiny Happenstance'
|
||||
},
|
||||
length: 25,
|
||||
airdate: '2021-01-10'
|
||||
},
|
||||
{
|
||||
episode: 2,
|
||||
image: 'https://artworks.thetvdb.com/banners/series/388593/episodes/6003ea1e05389.jpg',
|
||||
summary: 'When her mother asks about Miyamura, Hori comes to a frightening realization. Later, the Student Council ropes Hori into extra work, but when conflict arises, it`s up to Miyamura to smooth things over.\nSource: Funimation',
|
||||
title: {
|
||||
en: 'You Wear More Than One Face'
|
||||
},
|
||||
length: 25,
|
||||
airdate: '2021-01-17'
|
||||
},
|
||||
{
|
||||
episode: 3,
|
||||
image: 'https://artworks.thetvdb.com/banners/series/388593/episodes/600c4c8ece821.jpg',
|
||||
summary: 'Miyamura reflects on his past and present. Hori responds to Remi`s selfish demand. A heated conversation between Ishikawa and Miyamura ends with a fistfight. \nSource: Funimation',
|
||||
title: {
|
||||
en: 'That`s Why It`s Okay'
|
||||
},
|
||||
length: 25,
|
||||
airdate: '2021-01-24'
|
||||
},
|
||||
{
|
||||
episode: 4,
|
||||
image: 'https://artworks.thetvdb.com/banners/series/388593/episodes/6015843705271.jpg',
|
||||
summary: 'The student council room becomes a cool hangout. Hori tries to get Miyamura flustered. An old friend brings out a new side of Miyamura. Later, when Hori gets sick, Miyamura comes to her rescue.\nSource: Funimation',
|
||||
title: {
|
||||
en: 'Everybody Loves Somebody'
|
||||
},
|
||||
length: 25,
|
||||
airdate: '2021-01-31'
|
||||
},
|
||||
{
|
||||
episode: 5,
|
||||
image: 'https://artworks.thetvdb.com/banners/series/388593/episodes/601fc19257c5f.jpg',
|
||||
summary: 'A rumor complicates Hori and Miyamura`s budding relationship. Kyosuke comes home to roost and instantly takes a liking to Miyamura. Sakura evaluates her friendship with Remi.\nSource: Funimation',
|
||||
title: {
|
||||
en: 'I Can`t Say It Out Loud'
|
||||
},
|
||||
length: 25,
|
||||
airdate: '2021-02-07'
|
||||
},
|
||||
{
|
||||
episode: 6,
|
||||
image: 'https://artworks.thetvdb.com/banners/series/388593/episodes/6028021687d7d.jpg',
|
||||
summary: 'Miyamura ends up staying the night. Rumors spread like wildfire at school. Shindo calls the couple over to share a bag of candy. A second-year girl begins to stalk Miyamura.\nSource: Funimation',
|
||||
title: {
|
||||
en: 'This Summer`s Going to Be a Hot One'
|
||||
},
|
||||
length: 25,
|
||||
airdate: '2021-02-14'
|
||||
},
|
||||
{
|
||||
episode: 7,
|
||||
image: 'https://artworks.thetvdb.com/banners/series/388593/episodes/603140c678b1d.jpg',
|
||||
summary: 'Sakura finds the courage to get closer to Toru. Yoshikawa struggles to voice what she truly wants. Miyamura goes away for a week-long trip. Hori worries about her horror obsession.\nSource: Funimation',
|
||||
title: {
|
||||
en: 'You`re Here, I`m Here'
|
||||
},
|
||||
length: 25,
|
||||
airdate: '2021-02-21'
|
||||
},
|
||||
{
|
||||
episode: 8,
|
||||
image: 'https://artworks.thetvdb.com/banners/series/388593/episodes/603a964fe5b9c.jpg',
|
||||
summary: 'Remi reflects on how she and Sengoku started dating. Miyamura discovers a hidden side of Hori. When Yoshikawa gets asked out, the gang gets Ishikawa to help.\nSource: Funimation',
|
||||
title: {
|
||||
en: 'The Truth Deception Reveals'
|
||||
},
|
||||
length: 25,
|
||||
airdate: '2021-02-28'
|
||||
},
|
||||
{
|
||||
episode: 9,
|
||||
image: 'https://artworks.thetvdb.com/banners/series/388593/episodes/6043a769b00b8.jpg',
|
||||
summary: 'Miyamura runs into some unfriendly faces. Hori tries to get Miyamura to fulfill her darkest desires. Mizouchi`s love is unrequited. Tanihara confronts his past with Miyamura.\nSource: Funimation',
|
||||
title: {
|
||||
en: 'It`s Hard, but Not Impossible'
|
||||
},
|
||||
length: 25,
|
||||
airdate: '2021-03-07'
|
||||
},
|
||||
{
|
||||
episode: 10,
|
||||
image: 'https://artworks.thetvdb.com/banners/v4/episode/8130228/screencap/604ce2b265143.jpg',
|
||||
summary: 'Hori has an unexpected demand of Miyamura. When Yoshikawa learns her fake relationship with Ishikawa might be coming to an end, she`s forced to reflect on her own feelings.\nSource: Funimation',
|
||||
title: {
|
||||
en: 'Until the Snow Melts'
|
||||
},
|
||||
length: 25,
|
||||
airdate: '2021-03-14'
|
||||
},
|
||||
{
|
||||
episode: 11,
|
||||
image: 'https://artworks.thetvdb.com/banners/v4/episode/8130229/screencap/605637617b11d.jpg',
|
||||
summary: 'The gang tries to get Yanagi to loosen up. Iura is clueless as to how much he terrifies Sawada. When Iura`s sister Motoko is struggling with entrance exams, Iura asks Hori to help.\nSource: Funimation',
|
||||
title: {
|
||||
en: 'It May Seem Like Hate'
|
||||
},
|
||||
length: 25,
|
||||
airdate: '2021-03-21'
|
||||
},
|
||||
{
|
||||
episode: 12,
|
||||
image: 'https://artworks.thetvdb.com/banners/v4/episode/8130230/screencap/605f710ee2da0.jpg',
|
||||
summary: 'Yoshikawa heads over to Ishikawa`s house. Christmas brings romantic holiday cheer to all. Hori and Miyamura discuss their future.\nSource: Funimation',
|
||||
title: {
|
||||
en: 'Hitherto, and Forevermore'
|
||||
},
|
||||
length: 25,
|
||||
airdate: '2021-03-28'
|
||||
},
|
||||
{
|
||||
episode: 13,
|
||||
image: 'https://artworks.thetvdb.com/banners/v4/episode/8130231/screencap/6068a4a604d75.jpg',
|
||||
summary: 'As graduation approaches, Miyamura reflects on the past year, an uncertain future, and the new life he`s found.\nSource: Funimation',
|
||||
title: {
|
||||
en: 'I Would Gift You the Sky'
|
||||
},
|
||||
length: 25,
|
||||
airdate: '2021-04-04'
|
||||
}
|
||||
]
|
||||
|
|
|
|||
|
|
@ -9,7 +9,8 @@
|
|||
import Stargazers from '$lib/components/Stargazers.svelte'
|
||||
import ShowcaseCards from '$lib/components/ShowcaseCards.svelte'
|
||||
import VideoShowcase from '$lib/components/VideoShowcase.svelte'
|
||||
import ShowcaseEpisodes from '$lib/components/ShowcaseEpisodes.svelte'
|
||||
import EpisodeList from '$lib/components/EpisodeList.svelte'
|
||||
import { violetEpisodes } from '$lib/dummyData.js'
|
||||
|
||||
export let data
|
||||
</script>
|
||||
|
|
@ -89,7 +90,7 @@
|
|||
<div class='row flex-column-reverse flex-lg-row'>
|
||||
<div class='col-lg-6 col-12'>
|
||||
<div class='content'>
|
||||
<ShowcaseEpisodes />
|
||||
<EpisodeList episodeList={violetEpisodes} userProgress={1} />
|
||||
</div>
|
||||
</div>
|
||||
<div class='col-lg-6 col-12 align-items-center d-flex'>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
BIN
web/static/episodes.webp
Normal file
BIN
web/static/episodes.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 86 KiB |
BIN
web/static/search.png
Normal file
BIN
web/static/search.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.8 MiB |
BIN
web/static/search.webp
Normal file
BIN
web/static/search.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 459 KiB |
Loading…
Reference in a new issue