-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
197 lines (188 loc) · 5.61 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- you can remove bulma since you have your own css -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css">
<script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
<style>
[v-cloak] { display: none; } /* waits until content loads to display */
</style>
<title>Shugo Chara Cast</title>
</head>
<body>
<main id="app" v-cloak role="main" class="section">
<!-- the character buttons -->
<div class="container">
<div class="columns is-centered is-multiline has-text-centered">
<div v-for="c of characters" :key="c.name" class="column is-3">
<button v-if="!c.locked" @click="showCharacter(c)">
<img :src="c.image">
</button>
</div>
</div>
</div>
<!-- the modal -->
<div v-if="modalActive" class="modal is-active">
<div class="modal-background" @click="closeCharacter"></div>
<div class="modal-content box has-background-grey-lighter">
<p class="title">{{ selected.name }}</p>
<div class="columns">
<!-- left side -->
<div class="column is-narrow">
<img :src="selected.image">
<!-- the color palette squares -->
<div>
<span
v-for="color of selected.colors"
:style="{ 'background-color': color }"
class="image is-16x16 is-inline-block"
>
</span>
</div>
</div>
<!-- right side -->
<div class="column">
<!-- just inserts the current data into the modal -->
<p><strong>Name:</strong> {{ selected.name }}</p>
<p><strong>Birthdate:</strong> {{ selected.birth }}</p>
<p><strong>Info:</strong> {{ selected.info }}</p>
<hr>
<p class="subtitle">Charas</p>
<div class="box">
<p v-for="chara of selected.charas">{{ chara }}</p>
<!-- you can have it insert extra html too -->
<div v-if="selected.html">
<hr>
<div v-html="selected.html"></div>
</div>
</div>
</div>
</div>
</div>
<button
class="modal-close is-large"
aria-label="close"
@click="closeCharacter">
</button>
</div>
</main>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script>
// this is where all the data and functions are stored
var app = new Vue({
el: '#app',
data: {
selected: null,
// list of characters. because it is all data, you can save it to JSON
characters: [
{
name: 'Amu Hinamori',
image: 'amu.webp',
birth: '24 September',
info: 'Cool and Spicy TM. has too many eggs',
colors: [
'#F0B8D1', '#CE3950'
],
charas: [
'Ran', 'Miki', 'Su', 'Dia'
],
// an example of inserting html
html: `
<article class="message">
<div class="message-header">
<p>Hey, look at this random html</p>
</div>
<div class="message-body">
<span class="icon has-text-success">
<i class="fas fa-check-square"></i>
</span>
Why does Amu get it and no one else?
<p>Idk, why does she get anything else no one has</p>
</div>
</article>`
},
{
name: 'Ikuto Tsukiyomi',
image: 'ikuto.webp',
birth: '1 December',
info: 'Nya',
colors: [
'#A7B1CA', '#60669A', '#565551'
],
charas: [
'Yoru'
]
},
{
name: 'Tadase Hotori',
image: 'tadase.webp',
birth: '29 March',
info: '"iT\'s AgAiNsT tHe RuLeS"',
colors: [
'#B8D9F0', '#F8DC9C'
],
charas: [
'Kiseki'
]
},
{
name: 'Rima Mashiro',
image: 'rima.webp',
birth: '6 February',
info: 'Bala Balance',
colors: [
'#FFDEAC', ''
],
charas: [
'Kusukusu'
],
html: `
<p>Guess i lied about only Amu having html...</p>
<p>Have a KusuKusu image.</p>
<img src="kusukusu.webp">`
},
{
name: 'Kukai Soma',
image: 'kukai.webp',
birth: '17 August',
info: 'Best boi',
colors: [
'#B8F0D5', '#AF6C5B'
],
charas: [
'Daichi'
]
},
// if the character is 'locked', they won't appear on the page
{ name: 'Yaya Yuiki', locked: true },
{ name: 'Nadeshiko Fujisaki', locked: true },
{ name: 'Kairi Sanjo', locked: true },
]
},
// a getter function. just makes things look nicer in the html in this case
computed: {
modalActive() {
return this.selected !== null;
}
},
// updating the title. you can ignore this
watch: {
selected(next) {
document.title = next ? `Cast - ${next.name}` : 'Shugo Chara Cast'
}
},
// the functions for opening and closing the modal
methods: {
showCharacter(character) {
this.selected = character;
},
closeCharacter() {
this.selected = null;
}
}
})
</script>
</body>
</html>