diff options
Diffstat (limited to 'src/lib/Landing.svelte')
| -rw-r--r-- | src/lib/Landing.svelte | 290 |
1 files changed, 145 insertions, 145 deletions
diff --git a/src/lib/Landing.svelte b/src/lib/Landing.svelte index d0c1ee85..29a341f1 100644 --- a/src/lib/Landing.svelte +++ b/src/lib/Landing.svelte @@ -1,163 +1,163 @@ <script lang="ts"> - import root from './Utility/root'; - import { env } from '$env/dynamic/public'; - import tooltip from './Tooltip/tooltip'; - import CompletedAnimeList from './List/Anime/CompletedAnimeList.svelte'; - import MangaListTemplate from './List/Manga/MangaListTemplate.svelte'; + import root from './Utility/root'; + import { env } from '$env/dynamic/public'; + import tooltip from './Tooltip/tooltip'; + import CompletedAnimeList from './List/Anime/CompletedAnimeList.svelte'; + import MangaListTemplate from './List/Manga/MangaListTemplate.svelte'; </script> <div class="example-item card"> - <div class="item-content"> - <details class="list" open> - <MangaListTemplate due={true} dummy displayUnresolved={false} /> - </details> - </div> - - <div class="card item-description"> - <span class="big-text"> - Instantly view which manga on your lists have newly released chapters - </span> - - <p> - <a href={root('/')}>due.moe</a> will automatically check which manga on your lists have new - chapters available. <a href={root('/')}>due.moe</a> will even alert you when you need to update - your logged volume count if you are trailing behind. - </p> - - <p> - Separating concluded and publishing manga, <a href={root('/')}>due.moe</a> truly gives a one-of-a-kind - experience when it comes to staying on top of your favourite titles. - </p> - - <br /> - - <p class="medium-text"> - <a href={root('/')}>due.moe</a> even supports checking for new light novels chapters! - </p> - - <small class="bottom">This is simulated data including concluded manga.</small> - </div> + <div class="item-content"> + <details class="list" open> + <MangaListTemplate due={true} dummy displayUnresolved={false} /> + </details> + </div> + + <div class="card item-description"> + <span class="big-text"> + Instantly view which manga on your lists have newly released chapters + </span> + + <p> + <a href={root('/')}>due.moe</a> will automatically check which manga on your lists have new + chapters available. <a href={root('/')}>due.moe</a> will even alert you when you need to update + your logged volume count if you are trailing behind. + </p> + + <p> + Separating concluded and publishing manga, <a href={root('/')}>due.moe</a> truly gives a one-of-a-kind + experience when it comes to staying on top of your favourite titles. + </p> + + <br /> + + <p class="medium-text"> + <a href={root('/')}>due.moe</a> even supports checking for new light novels chapters! + </p> + + <small class="bottom">This is simulated data including concluded manga.</small> + </div> </div> <p /> <div class="example-item card"> - <div class="card item-description"> - <span class="big-text">Let's not forget anime!</span> - - <p> - <a href={root('/')}>due.moe</a> will let you know which episodes you still need to watch, which - anime you are caught up on, and planned anime which will begin to air soon. - </p> - - <p> - We'll always let you know when your next episodes are coming out with a countdown, and did we - mention that all displayed countdowns are for <b>subtitled release times by default</b>? Cool, - right? - </p> - - <small class="bottom">This is simulated data including concluded anime.</small> - </div> - <div class="item-content"> - <details class="list" open> - <CompletedAnimeList dummy /> - </details> - </div> + <div class="card item-description"> + <span class="big-text">Let's not forget anime!</span> + + <p> + <a href={root('/')}>due.moe</a> will let you know which episodes you still need to watch, which + anime you are caught up on, and planned anime which will begin to air soon. + </p> + + <p> + We'll always let you know when your next episodes are coming out with a countdown, and did we + mention that all displayed countdowns are for <b>subtitled release times by default</b>? Cool, + right? + </p> + + <small class="bottom">This is simulated data including concluded anime.</small> + </div> + <div class="item-content"> + <details class="list" open> + <CompletedAnimeList dummy /> + </details> + </div> </div> <p /> <div class="example-item card"> - <div class="item-content"> - <span class="big-text">Tools & More!</span> - - <p> - <a href={root('/')}>due.moe</a> also offers a suite of helpful tools to make your life on AniList - that much easier. Some examples include … - </p> - - <ul> - <li><a href={root('/wrapped')}>AniList Wrapped</a> — Your Year on AniList</li> - <li> - Badge Wall — A unified badge collection experience for AniList - <blockquote style="margin: 0 0 0 1.5rem;"> - Easily display all of your earned badges in a single place, with your Anime Watching Club - (AWC) badges automatically included! - </blockquote> - </li> - <li> - <a href={root('/schedule')}>Subtitle Schedule</a> — A release calendar which displaying the - scheduled <b>subtitle release times</b> for simulcast anime! - </li> - <li> - <a href={root('/birthdays')}>Today's Character Birthdays</a> — A calendar to help you stay up - to date with your favourite characters' birthdays, featuring an even bigger character database - than AniList! - </li> - <li> - <a href={root('/tools/sequel_spy')}>Sequel Spy</a> — Find media with prequels you haven't seen - for any simulcast season - </li> - </ul> - - <br /><br /> - - <span class="big-text"> - <a - href={`https://anilist.co/api/v2/oauth/authorize?client_id=${env.PUBLIC_ANILIST_CLIENT_ID}&redirect_uri=${env.PUBLIC_ANILIST_REDIRECT_URI}&response_type=code`} - on:click={() => { - localStorage.setItem( - 'redirect', - window.location.origin + window.location.pathname + window.location.search - ); - }}>Log in</a - > with AniList to get started! - </span> - </div> - - <div class="item-description demo"> - <a href="https://i.imgur.com/yLSBz2f.mp4" target="_blank"> - <img src="https://i.imgur.com/yLSBz2f.gif" alt="Demo" title="Demo" use:tooltip /> - </a> - </div> + <div class="item-content"> + <span class="big-text">Tools & More!</span> + + <p> + <a href={root('/')}>due.moe</a> also offers a suite of helpful tools to make your life on AniList + that much easier. Some examples include … + </p> + + <ul> + <li><a href={root('/wrapped')}>AniList Wrapped</a> — Your Year on AniList</li> + <li> + Badge Wall — A unified badge collection experience for AniList + <blockquote style="margin: 0 0 0 1.5rem;"> + Easily display all of your earned badges in a single place, with your Anime Watching Club + (AWC) badges automatically included! + </blockquote> + </li> + <li> + <a href={root('/schedule')}>Subtitle Schedule</a> — A release calendar which displaying the + scheduled <b>subtitle release times</b> for simulcast anime! + </li> + <li> + <a href={root('/birthdays')}>Today's Character Birthdays</a> — A calendar to help you stay up + to date with your favourite characters' birthdays, featuring an even bigger character database + than AniList! + </li> + <li> + <a href={root('/tools/sequel_spy')}>Sequel Spy</a> — Find media with prequels you haven't seen + for any simulcast season + </li> + </ul> + + <br /><br /> + + <span class="big-text"> + <a + href={`https://anilist.co/api/v2/oauth/authorize?client_id=${env.PUBLIC_ANILIST_CLIENT_ID}&redirect_uri=${env.PUBLIC_ANILIST_REDIRECT_URI}&response_type=code`} + on:click={() => { + localStorage.setItem( + 'redirect', + window.location.origin + window.location.pathname + window.location.search + ); + }}>Log in</a + > with AniList to get started! + </span> + </div> + + <div class="item-description demo"> + <a href="https://i.imgur.com/yLSBz2f.mp4" target="_blank"> + <img src="https://i.imgur.com/yLSBz2f.gif" alt="Demo" title="Demo" use:tooltip /> + </a> + </div> </div> <style> - .example-item { - display: flex; - flex-wrap: wrap; - } - - .demo { - display: flex; - flex-direction: column; - justify-content: center; - } - - .demo img { - border-radius: 8px; - margin: 0.15rem; - width: 100%; - } - - .item-content { - flex: 1 1 50%; - } - - .item-description { - flex: 1 1 50%; - } - - .medium-text { - font-size: 1.125rem; - } - - .big-text { - font-size: 1.25rem; - } - - .bottom { - position: absolute; - bottom: 1em; - } + .example-item { + display: flex; + flex-wrap: wrap; + } + + .demo { + display: flex; + flex-direction: column; + justify-content: center; + } + + .demo img { + border-radius: 8px; + margin: 0.15rem; + width: 100%; + } + + .item-content { + flex: 1 1 50%; + } + + .item-description { + flex: 1 1 50%; + } + + .medium-text { + font-size: 1.125rem; + } + + .big-text { + font-size: 1.25rem; + } + + .bottom { + position: absolute; + bottom: 1em; + } </style> |