-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathlive.html
119 lines (119 loc) · 6.19 KB
/
live.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
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=0.5">
<meta name="description" content="A log categorizing Kizuna AIs' videos during love-pii's tenure as versions of Kizuna AI.">
<title>Kizuna AI Attendance Log</title>
<link rel="shortcut icon" type="image/png" href="icon/ai.png">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto">
<link rel="stylesheet" href="style.css">
<script src="https://apis.google.com/js/api.js"></script>
<script src="basics.js"></script>
<script src="live.js"></script>
<style id="filcss"></style>
</head>
<body>
<h1>Kizuna AI Attendance Log</h1>
<div class="flexbox">
<div id="info">
<h2>About</h2>
<p>This website categorizes Kizuna AIs' videos during Love-chan's and AI-pii's tenure as versions of Kizuna AI.</p>
<p>This includes all publicly listed videos posted between <a href="https://youtube.com/playlist?list=PL0bHKk6wuUGJHfkIt17TY0rCjuZ083jPl">the beginning</a> (Kizuna AI's Everyday series) and <a href="https://youtu.be/-QmvyuWXaTw">the end</a> (Love-chan and AI-pii's first livestream with their new models).</p>
<h3>Symbol Definitions</h3>
<div class="flexbox">
<div class="legend">
<img src="icon/ai.png">
<div>AI-chan</div>
</div>
<div class="legend">
<img src="icon/black.png">
<div>Black AI</div>
</div>
<div class="legend">
<img src="icon/love.png">
<div>Love-chan</div>
</div>
<div class="legend">
<img src="icon/pii.png">
<div>AI-pii</div>
</div>
<div class="legend">
<img src="icon/bro.png">
<div>AI-bro</div>
</div>
</div>
<div class="flexbox">
<div class="role ai black love pii bro">
<h3>Major Role</h3>
<div class="attendance dye">
<div class="ai"></div>
<div class="black"></div>
<div class="love"></div>
<div class="pii"></div>
<div class="bro"></div>
</div>
<p>A colored symbol on a black background indicates a major role.</p>
<p>An AI has a major role if the following statements are true:</p>
<ul>
<li>The AI is present and has a vocal role.</li>
<li>If the video is a livestream, the AI is present for the entire duration.</li>
</ul>
</div>
<div class="role aiish ai blackish black loveish love piiish pii broish bro">
<h3>Minor Role</h3>
<div class="attendance dye">
<div class="ai"></div>
<div class="black"></div>
<div class="love"></div>
<div class="pii"></div>
<div class="bro"></div>
</div>
<p>A black symbol indicates a minor role.</p>
<p>An AI has a minor role if any of the following is true:</p>
<ul>
<li>The AI is present but has no vocal role.</li>
<li>The AI is referenced in a clip of a past video.</li>
<li>The AI is given a significant mention (e.g. fan art).</li>
<li>If the video is a livestream, the AI appears for a relatively short time.</li>
</ul>
</div>
</div>
<h3>Supplementary Reading</h3>
<ul>
<li><a href="/ailog">This project's README file.</a></li>
<li><a href="/ailog/MOTIVATION">Discussion of rumors and AI-chan's activities beyond YouTube.</a></li>
<li><a href="/ailog/CONTEXT">Context behind the replacement conspiracy theory.</a></li>
<li><a href="/ailog/ADDENDUM">Remarks on behind-the-scenes notes posted during hiatus.</a></li>
<li><a href="https://twitter.com/kizunaaiss/status/1327967483932725251">Infographic timeline of important events.</a></li>
<li><a href="https://docs.google.com/document/d/1wFML_LXAbKEIuRu42vN_GW7hIqqPU4DDfQALbvCv4FI">Detailed timeline of important events.</a></li>
</ul>
</div>
<div id="filter">
<h2>Filter</h2>
<input type="checkbox" name="filter" id="filai" class="role">
<label for="filai"><img src="icon/ai.png"></label>
<input type="checkbox" name="filter" id="filblack" class="role">
<label for="filblack"><img src="icon/black.png"></label>
<input type="checkbox" name="filter" id="fillove" class="role">
<label for="fillove"><img src="icon/love.png"></label>
<input type="checkbox" name="filter" id="filpii" class="role">
<label for="filpii"><img src="icon/pii.png"></label>
<input type="checkbox" name="filter" id="filbro" class="role">
<label for="filbro"><img src="icon/bro.png"></label>
</div>
</div>
<p id="version">This live version of the Attendance Log may display some videos out of chronological order.</p>
<a id="github" href="https://github.com/Krazete/ailog"><img src="icon/github.png"></a>
<div id="options">
<input type="radio" name="channel" id="optchannel" value="aichannel" checked>
<label for="optchannel">A.I.Channel</label>
<input type="radio" name="channel" id="optgames" value="aigames">
<label for="optgames">A.I.Games</label>
<input type="radio" name="channel" id="optchina" value="aichina">
<label for="optchina">A.I.Channel China</label>
</div>
<div class="units" id="aichannel"></div>
<div class="units" id="aigames"></div>
<div class="units" id="aichina"></div>
</body>
</html>