-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
114 lines (112 loc) · 3.86 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Ghibli Gallery - スタジオジブリ作品の場面写真</title>
<meta name="description" content="Remaster Studio Ghibli's Work Album with Vue 3.0">
<meta name="keywords" content="japanese,anime,poster,ghilbi,スタジオジブリ,gallery,draw,movie,写真,場面写真,picture,かぐや姫の物語,風立ちぬ,コクリコ坂から,借りぐらしのアリエッティ,崖の上のポニョ,ゲド戦記,ハウルの動く城,猫の恩返し,千と千尋の神隠し,もののけ姫,平成狸合戦ぽんぽこ,海がきこえる,紅の豚,魔女の宅急便,となりのトトロ,吉卜力,宮崎駿,天空の城,風の谷,輝夜姬,風起,借物少女,地海戰記,霍爾的移動城堡,貓的報恩,神隱少女,平成狸合戰,紅豬,魔女宅急便,龍貓,天空之城,風之谷">
<meta name="author" content="Ray Chang">
<link rel="icon" href="https://raw.githubusercontent.com/rayc2045/ghibli-gallery/main/images/favicon.ico">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;600&display=swap">
<link rel="stylesheet" href="src/styles/style.css">
<style>
[v-cloak] {
display: none;
}
</style>
<script src="src/scripts/script.min.js" type="module"></script>
</head>
<body
v-cloak
:style="bodyStyle"
@vue:mounted="init"
@vue:unmounted="removeLocalAlbumId"
>
<div
:class="['loader', { 'fade-out': !isLoading }]"
@touchstart.prevent
@contextmenu.prevent
@selectstart.prevent
@dragstart.prevent
@animationend="$el.remove()"
>
<img src="./images/totoro_logo.png" />
</div>
<div class="container">
<nav
class="catalog"
@contextmenu.prevent
@selectstart.prevent
@dragstart.prevent
>
<a
v-for="(album, idx) of works"
href="#title"
@click="changeAlbum(idx)"
>
{{ album.title[language] }}
</a>
</nav>
<main>
<h1
id="title"
@contextmenu.prevent
@selectstart.prevent
@dragstart.prevent
>
{{ currentAlbum.title[language] }} ({{ currentAlbum.publicTime }})
</h1>
<section
v-for="album of works"
v-show="album.albumFolder === currentAlbum.albumFolder"
>
<img
v-for="(num, idx) in album.numOfImages" :key="idx"
:src="getImageUrl(idx)"
loading="lazy"
@click="bodyWidth >= 1080 ? Slider.showSlider(getImageUrl(idx)) : false"
/>
</section>
</main>
</div>
<div
v-show="!isLoading"
:class="['to-top-button', { hide: isTopButtonHide }]"
@click="moveToTop"
@selectstart.prevent
>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="48"
d="M112 328l144-144 144 144"
/>
</svg>
</div>
<div
v-show="Slider.isShow"
class="slider"
@mousemove="Slider.handleMouseMove"
>
<div class="prev" @click="Slider.prev" @keypress.left="Slider.prev">
<img src="./images/prev.svg" />
</div>
<div class="next" @click="Slider.next" @keypress.right="Slider.next">
<img src="./images/next.svg" />
</div>
<div
:class="['close', { transparent: !Slider.isCloseButtonShow }]"
@click="Slider.close"
@keypress.esc="Slider.close"
>
<img src="./images/close.svg" />
</div>
<img :src="Slider.currentImageUrl" />
<p>{{ Slider.progress }}</p>
</div>
</body>
</html>