mirror of
https://github.com/ThaUnknown/miru.git
synced 2026-08-16 17:45:45 +00:00
feat(web): improve home screen
This commit is contained in:
ThaUnknown
parent
4f797de139
commit
7a1793c3db
6 changed files with 112 additions and 22 deletions
|
|
@ -4,7 +4,7 @@
|
|||
</script>
|
||||
|
||||
<div class='container pb-20 font-weight-light font-size-16 text-muted position-sticky' style='top: 100%'>
|
||||
<hr class='w-full my-20' />
|
||||
<hr class='w-full mb-20 mt-0' />
|
||||
<div class='row px-20 px-sm-0 mb-20 content'>
|
||||
<div class='col-12 col-md-4 pt-20 mb-20 text-md-left'>
|
||||
<a href='/'>
|
||||
|
|
|
|||
65
web/src/lib/components/ShowcaseEpisodes.svelte
Normal file
65
web/src/lib/components/ShowcaseEpisodes.svelte
Normal file
|
|
@ -0,0 +1,65 @@
|
|||
<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>
|
||||
|
|
@ -25,10 +25,6 @@
|
|||
</div>
|
||||
|
||||
<style>
|
||||
.app-image {
|
||||
aspect-ratio: 2/1;
|
||||
object-fit: contain;
|
||||
}
|
||||
.overlay-gradient {
|
||||
background: linear-gradient(0deg, #101113 15.27%, rgba(16, 17, 19, 0.92) 41.28%, rgba(16, 17, 19, 0.25) 74.32%);
|
||||
pointer-events: none;
|
||||
|
|
|
|||
|
|
@ -13,4 +13,9 @@ hr {
|
|||
|
||||
:root {
|
||||
--container-xl-max-width: 150rem
|
||||
}
|
||||
|
||||
.app-image {
|
||||
aspect-ratio: 2/1;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
|
@ -9,8 +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'
|
||||
|
||||
/** @type {import('./$types').PageData} */
|
||||
export let data
|
||||
</script>
|
||||
|
||||
|
|
@ -86,13 +86,13 @@
|
|||
<div class='container-xl'>
|
||||
<hr />
|
||||
<div class='my-20 py-20'>
|
||||
<div class='row flex-column-reverse flex-md-row'>
|
||||
<div class='col-md-5 col-12'>
|
||||
<div class='row flex-column-reverse flex-lg-row'>
|
||||
<div class='col-lg-6 col-12'>
|
||||
<div class='content'>
|
||||
<img src='player.webp' alt='player' class='mw-full' />
|
||||
<ShowcaseEpisodes />
|
||||
</div>
|
||||
</div>
|
||||
<div class='col-md-7 col-12'>
|
||||
<div class='col-lg-6 col-12 align-items-center d-flex'>
|
||||
<div class='content'>
|
||||
<h1 class='w-full font-weight-bold text-white'>
|
||||
It already does that.
|
||||
|
|
@ -104,13 +104,11 @@
|
|||
</div>
|
||||
<hr />
|
||||
<div class='my-20 py-20'>
|
||||
<div>
|
||||
<div class='content'>
|
||||
<h1 class='text-center font-weight-bold text-white'>
|
||||
Available everywhere.
|
||||
</h1>
|
||||
<p class='text-center text-muted font-size-16'>No need to install different apps for different devices and platforms, effortlessly install on any<br />platform, ensuring a seamless anime experience on any device. Whether you prefer Windows, Linux, Mac, Android and more.</p>
|
||||
</div>
|
||||
<div class='content'>
|
||||
<h1 class='text-center font-weight-bold text-white'>
|
||||
Available everywhere.
|
||||
</h1>
|
||||
<p class='text-center text-muted font-size-16'>No need to install different apps for different devices and platforms, effortlessly install on any<br />platform, ensuring a seamless anime experience on any device. Whether you prefer Windows, Linux, Mac, Android and more.</p>
|
||||
</div>
|
||||
<div class='platform-grid p-20 text-white'>
|
||||
<WindowsSvg class='w-50 h-50' />
|
||||
|
|
@ -129,8 +127,31 @@
|
|||
</div>
|
||||
</div>
|
||||
<Stargazers stargazers={data.stargazers} />
|
||||
<hr class='mb-0' />
|
||||
<div class='bg-dark'>
|
||||
<div class='container-xl pt-20'>
|
||||
<div class='pt-20'>
|
||||
<div class='content my-0 align-items-center d-flex flex-column'>
|
||||
<h1 class='text-center font-weight-bold text-white mb-0'>
|
||||
MIRU
|
||||
</h1>
|
||||
<p class='text-center text-muted font-size-16'>Start your journey right here. Right now. Get started by<br />clicking download button below.</p>
|
||||
<a href='/download' class='btn btn-danger btn-lg'>
|
||||
Download
|
||||
</a>
|
||||
|
||||
<div class='h-150 w-full overflow-hidden mt-20 pt-20'>
|
||||
<img src='app.webp' alt='app' class='mw-full px-20 w-full app-image' />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.btn-danger {
|
||||
--dm-button-danger-bg-color: #e5204c
|
||||
}
|
||||
.glow {
|
||||
background-image: radial-gradient(circle farthest-side,rgba(255,0,182,.05),hsla(0,0%,100%,0));
|
||||
pointer-events: none;
|
||||
|
|
|
|||
|
|
@ -6,7 +6,6 @@
|
|||
import AndroidTVSVG from '$lib/svg/AndroidTVSVG.svelte'
|
||||
import SteamOSSVG from '$lib/svg/SteamOSSVG.svelte'
|
||||
|
||||
/** @type {import('./$types').PageData} */
|
||||
export let data
|
||||
|
||||
function getOS () {
|
||||
|
|
@ -39,13 +38,17 @@
|
|||
const releases = await data.releases
|
||||
|
||||
const { assets } = releases[0]
|
||||
|
||||
/** @param {string} ext */
|
||||
const url = ext => assets.find(({ name }) => name.endsWith(ext))?.browser_download_url || ''
|
||||
|
||||
downloads = {
|
||||
iOS: 'https://www.android.com',
|
||||
Android: '',
|
||||
Windows: assets.find(({ name }) => name.endsWith('installer.exe'))?.browser_download_url || '',
|
||||
'Mac OS': assets.find(({ name }) => name.endsWith('.dmg'))?.browser_download_url || '',
|
||||
Linux: assets.find(({ name }) => name.endsWith('.AppImage'))?.browser_download_url || '',
|
||||
Debian: assets.find(({ name }) => name.endsWith('.deb'))?.browser_download_url || ''
|
||||
Windows: url('installer.exe'),
|
||||
'Mac OS': url('.dmg'),
|
||||
Linux: url('.AppImage'),
|
||||
Debian: url('.deb')
|
||||
}
|
||||
return downloads
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue