Creepso/miru
1
0
Fork 0
mirror of https://github.com/ThaUnknown/miru.git synced 2026-08-15 15:43:30 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat(web): more wip features page

Browse source
This commit is contained in:
ThaUnknown 2024-03-08 14:17:42 +01:00
parent 2967fb8afd
commit 527e288732
1 changed files with 162 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

166
web/src/routes/features/+page.svelte
View file

@ -1,14 +1,86 @@
<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.
Explore, Find, 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.
Embark on a journey through our Anime discovery, 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='content row pb-20'>
<div class='col-12 col-lg-9 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 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='col-12 col-lg-3 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 class='col-12 col-lg-4 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'>
Discover anything
</h4>
<p class='text-center text-muted font-size-14'>Find new anime, watch trailers, bookmark and share with friends.</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' />
<!-- preview card hover -->
</div>
</div>
</div>
<div class='col-12 col-lg-4 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'>
See whats next
</h4>
<p class='text-center text-muted font-size-14'>View airing schedules, upcoming releases and the expected release times.</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' />
<!-- schedule page -->
</div>
</div>
</div>
<div class='col-12 col-lg-4 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'>
Don't miss out on anything
</h4>
<p class='text-center text-muted font-size-14'>Browse sequels, prequels and side stories. Track friends<br />and view recommendations.</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' />
<!-- view details left side -->
<img src='/search.webp' alt='search' class='w-full h-full' />
</div>
</div>
</div>
</div>
<!-- <div class='content px-10'>
<h1 class='w-full font-weight-bold text-white'>
Control Every Frame of Your Viewing Experience.
</h1>
<p class='text-muted font-size-16 w-600 mw-full'>
From full subtitle support to intuitive keybinds, our platform offers unparalleled control. Immerse yourself in the cinematic experience with Picture-in-Picture, Discord integration, and a suite of features designed to make every frame a masterpiece.
</p>
</div>
<div class='content row pb-20'>
<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'>
@ -33,7 +105,93 @@
</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'>
Discover anime
</h4>
<p class='text-center text-muted font-size-14'>Find new anime, watch trailers, bookmark and share with friends.</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' />
<!-- preview card hover
</div>
</div>
</div>
<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'>
Don't miss out on anything
</h4>
<p class='text-center text-muted font-size-14'>Browse sequels, prequels and side stories. Track friends<br />and view recommendations.</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' />
<!-- view details left side
<img src='/search.webp' alt='search' class='w-full h-full' />
</div>
</div>
</div>
</div>
<div class='content px-10'>
<h1 class='w-full font-weight-bold text-white'>
Redefining Your Torrent Experience.
</h1>
<p class='text-muted font-size-16 w-600 mw-full'>
Our platform provides customization options, real-time streaming, and meticulous torrent management. Select your downloads folder, track progress on the seek bar, and immerse yourself in a symphony of features that make torrenting a seamless and personalized journey.
</p>
</div>
<div class='content row pb-20'>
<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 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'>
Discover anything
</h4>
<p class='text-center text-muted font-size-14'>Find new anime, watch trailers, bookmark and share with friends.</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' />
<!-- preview card hover
</div>
</div>
</div>
<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'>
Don't miss out on anything
</h4>
<p class='text-center text-muted font-size-14'>Browse sequels, prequels and side stories. Track friends<br />and view recommendations.</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' />
<!-- view details left side
<img src='/search.webp' alt='search' class='w-full h-full' />
</div>
</div>
</div>
</div> -->
</div>
<style>