-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
231 lines (214 loc) · 12.7 KB
/
index.html
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
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
<!doctype html>
<html lang="en" data-bs-theme="dark">
<head>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-YTG3D4TK8N"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-YTG3D4TK8N');
</script>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- PWA manifest -->
<link rel="manifest" href="manifest.json" />
<!-- ios support -->
<link rel="apple-touch-icon" href="assets/animemo-icon.png" />
<link rel="icon" type="image/png" href="assets/animemo-icon.png" />
<link rel="shortcut icon" type="image/jpg" href="assets/animemo-icon.png" />
<meta name="apple-mobile-web-app-status-bar" content="#21252a" />
<meta name="theme-color" content="#21252a" />
<meta name="description" content="Animemo - your anime tracker">
<meta property="og:title" content="Animemo">
<meta property="og:type" content="website" />
<meta property="og:image" content="https://animemo.netlify.app/assets/animemo-app-screenshot.png">
<meta property="og:url" content="https://animemo.netlify.app">
<meta name="twitter:card" content="summary_large_image">
<meta property="og:description" content="Animemo - your anime tracker">
<meta property="og:site_name" content="Animemo">
<meta name="twitter:image:alt" content="animemo.netlify.com">
<title>Animemo - Your anime tracker アニメトラッカー</title>
<link href="style.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://kit.fontawesome.com/7ed19c3a98.js" crossorigin="anonymous"></script>
</head>
<body class="container-fluid overflow-x-hidden overflow-y-scroll">
<div id="app" class="position-relative">
<header class="d-flex justify-content-between align-items-center">
<div class="d-flex align-items-center">
<img class="" style="width:3rem; height: 3rem;" src="assets/animemo-icon.png" alt="Animemo logo" />
<div>
<div class="fw-bold fs-4 lh-sm">Animemo</div>
<span class="d-block p-0 m-0 lh-sm" style="font-size: .7rem;">アニメトラッカー</span>
</div>
</div>
<div>Animes <span id="animeCount" class="badge bg-orange">0</span></div>
<!-- Menu dropdown -->
<nav class="dropdown" style="z-index:99">
<button class="btn btn-secondary shadow dropdown-toggle" type="button" data-bs-toggle="dropdown"
aria-expanded="false" aria-label="main menu">
<i class="fa-solid fa-bars"></i>
</button>
<ul class="dropdown-menu pt-0 shadow ">
<li class="px-2 pt-2">
<button class="btn btn-info w-100" data-bs-toggle="modal" data-bs-target="#addAnimeModal">
<i class="fa-solid fa-plus"></i> Add Anime
</button>
</li>
<li>
<hr class="dropdown-divider">
</li>
<li>
<h6 class="dropdown-header">Sort by</h6>
</li>
<li><a id="sortbyname" class="dropdown-item position-relative" href="#"
onclick="sortBy('name')">Name</a></li>
<li><a id="sortbylast" class="dropdown-item position-relative" href="#"
onclick="sortBy('lastwatched')">Last Watched</a></li>
<li><a id="sortbymost" class="dropdown-item position-relative" href="#"
onclick="sortBy('mostwatched')">Most Watched</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li class="d-flex justify-content-between align-items-center">
<div class="small ms-3">Dark Mode</div>
<div class="form-check form-switch form-control-lg">
<input class="form-check-input " type="checkbox" role="switch" name="darkModeToggle"
checked>
</div>
</li>
<li>
<hr class="dropdown-divider">
</li>
<li>
<a id="sortbyname" class="dropdown-item position-relative" data-bs-toggle="modal"
data-bs-target="#aboutAnimemo" href="#" onclick="">About
<strong>Animemo</strong></a>
</li>
</ul>
</nav>
</header>
<!--Anime List Section-->
<div id="list"
class="row g-4 row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 row-cols-xl-5 row-cols-xxl-5 mb-4">
</div>
<!-- fixed bottom Anime ADD button-->
<div id="addbuttonatbottom" class="position-fixed start-50 bottom-0 w-auto d-none">
<button class="btn btn-info rounded-circle mb-3" data-bs-toggle="modal" data-bs-target="#addAnimeModal" aria-label="Add new anime"
style="width:3rem !important; height: 3rem!important;transform: translateX(-1.5rem);">
<i class="fa-solid fa-plus"></i>
</button>
</div>
<!-- Search Modal -->
<div class="modal fade" id="addAnimeModal" tabindex="-1" aria-labelledby="searchModal" aria-hidden="true">
<div class="modal-dialog modal-lg modal-fullscreen-sm-down">
<div class="modal-content">
<div class="modal-header">
<div class="modal-title d-flex" id="searchModal">
<img class="" style="height: 3rem;" src="assets/animemo-icon.png" alt="Animemo logo" />
<div>
<div class="fs-6 text-secondary-emphasis mt-1">Add new anime to Animemo</div>
<span class="small text-secondary-emphasis">Search anime database and add to your
list</span>
</div>
</div>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="col d-flex">
<input onsearch="fetchAnimeData()" type="search"
class="form-control me-2 bg-secondary-subtle border border-2 border-secondary-subtle"
id="searchText" list="animemoDatalist" placeholder="Anime name">
<datalist id="animemoDatalist">
<!-- Datalist options loop -->
</datalist>
<button class="btn btn-info w-auto d-flex align-items-center" type="button"
onclick="fetchAnimeData()">
<span class="spinner-border d-none spinner-border-sm me-2" role="status"
aria-hidden="true"></span>
<span>Search</span></button>
</div>
<ul class="list-group py-3" id="resultList">
<!--Search results-->
</ul>
</div>
<div class="modal-footer d-flex justify-content-between">
<div class="d-flex">
<button class="btn btn-info btn-sm w-auto d-flex align-items-center me-1" type="button"
onclick="fetchAnimeData('mostPopular')">
<span>Popular Animes</span>
</button>
<button class="btn btn-info btn-sm w-auto d-flex align-items-center" type="button"
onclick="fetchAnimeData('mostRating')">
<span>Rating Leaders</span>
</button>
</div>
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Done</button>
</div>
</div>
</div>
</div>
<!-- About Modal -->
<div class="modal fade" id="aboutAnimemo" tabindex="-1" aria-labelledby="aboutModal" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-fullscreen-sm-down">
<div class="modal-content">
<div class="modal-header">
<div class="modal-title d-flex align-items-center" id="aboutModal">
<img class="" style="height: 3rem;" src="assets/animemo-icon.png" alt="Animemo logo" />
<div>
<div class="fs-6 text-secondary-emphasis mt-1">Animemo v0.1.0</div>
</div>
</div>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p><strong class="text-orange">Animemo</strong> aims to make it easier to track the anime series
you watch. You can easily add an anime to your list and set which episode you watched last.
</p>
<p>Animemo is an open source project. Developed by
<a class="btn-link text-orange" href="https://www.borakucukkara.com" target="_blank">Bora
Kucukkara.</a>
</p>
<p>Feel free to <a href="mailto:borakucukkara.com@gmail.com"
class="btn-link text-orange">contact me.</a></p>
<p>
You can install Animemo as an App on your devices via Chrome/Safari browsers on IOS/Android
or MacOS/Windows/Linux devices.
</p>
<div
class="d-flex alert p-3 alert-light flex-column justify-content-center align-items-center w-100">
<div class="lead mb-2">BTW i turn coffee into code</div>
<div>
<script type="text/javascript"
src="https://cdnjs.buymeacoffee.com/1.0.0/button.prod.min.js" data-name="bmc-button"
data-slug="borakucukkara" data-color="#FFDD00" data-emoji="" data-font="Cookie"
data-text="Buy me a coffee" data-outline-color="#000000" data-font-color="#000000"
data-coffee-color="#ffffff"></script>
</div>
</div>
<p class="small text-secondary">
Animemo does not keep and host your personal data. All application data is kept by the user
device. Resetting your device or resetting your internet browser may result in the loss of
your data. All anime titles, episodes and visual data are taken from the Kitsu API service.
Animemo is not responsible for incorrect data.
</p>
</div>
<div class="modal-footer d-flex justify-content-between align-items-center">
<div class="d-flex">
<a href="https://www.bay-software.com" target="_blank"><img style="width: 3rem" class="me-2" src="assets/BAYSOFTWARE-Logo-DarkBG.png"></a>
<p>Powered by <a class="btn-link text-orange" href="https://www.bay-software.com" target="_blank">Bay Software</a><br><small>© 2023, All rights reserved.</small></p>
</div>
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
<script src="script.js">
</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>