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
|
<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 localforage from 'localforage';
</script>
<div class="example-item card">
<div class="item-content">
<details class="list" open>
<MangaListTemplate due={true} dummy displayUnresolved={false} disableFilter />
</details>
</div>
<div class="card item-description">
<span class="big-text">Manga, Without the Guesswork</span>
<p>
<a href={root('/')}>due.moe</a> automatically keeps your manga and light novel lists up to date—checking
for new chapters, notifying you of new releases, and reminding you to update your volume count
if you fall behind. Completed and ongoing series stay neatly organized so you can instantly see
what needs your attention. Staying on top of your reading has never been easier.
</p>
<small class="bottom">
This demo view contains simulated data which may include concluded manga.
</small>
</div>
</div>
<p></p>
<div class="example-item card">
<div class="card item-description">
<span class="big-text">Anime, Made Smarter</span>
<p>
Track your anime effortlessly. <a href={root('/')}>due.moe</a> shows which episodes you still need
to watch, keeps you updated on upcoming releases, and even counts down to the next subtitled episode—so
you're always on time.
</p>
<small class="bottom">
This demo view contains simulated data which may include concluded anime.
</small>
</div>
<div class="item-content">
<details class="list" open>
<CompletedAnimeList dummy disableFilter />
</details>
</div>
</div>
<p></p>
<div class="example-item card">
<div class="item-content">
<span class="big-text">Smarter Tools, Better Experience</span>
<p>
<a href={root('/')}>due.moe</a> isn't just tracking—it's a full suite of tools designed to enhance
your AniList experience. From Wrapped to Sequel Spy, everything you need is right here.
</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="medium-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={async () => {
await localforage.setItem(
'redirect',
window.location.origin + window.location.pathname + window.location.search
);
}}>Log in</a
>
with AniList, and <a href={root('/')}>due.moe</a> does the rest.
</span>
</div>
<div class="item-description demo">
<a href="https://imgur.com/j5vfKbx.mp4" target="_blank">
<img src="https://imgur.com/j5vfKbx.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;
padding: 1rem;
}
.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>
|