blob: bfe69de9da623efbc5391f31e049aba50de7cc29 (
plain) (
blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
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';
</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>
<p></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>
<p></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`}
onclick={() => {
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;
}
</style>
|