-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
333 lines (259 loc) · 12 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
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- <meta http-equiv="Refresh" content="10" /> -->
<title>画里有话</title>
<script src="./src/js/htmx.js"></script>
<script src="./src/js/hyperscript.min.js"></script>
<script src="src/js/art-template.js"></script>
<script src="src/js/alpinejs.min.js"></script>
<script src="src/js/state-machine.js"></script>
<script src="src/js/localforage.min.js"></script>
<script src="src/js/mithril.js"></script>
<!-- htmx plugins -->
<script src="src/js/htmx-class-tools.js"></script>
<script src="src/js/htmx-head-support.js"></script>
<script src="src/js/htmx-multi-swap.js"></script>
<script src="src/js/htmx-path-params.js"></script>
<script src="src/js/htmx-remove-me.js"></script>
<script src="src/js/htmx-response-targets.js"></script>
<script src="src/js/htmx-restored.js"></script>
<script src="src/js/htmx-ws.js"></script>
<script src="src/js/htmx-alpine-morph.js"></script>
<!-- alpine plugins -->
<script src="src/js/alpinejs.mask.min.js"></script>
<script src="src/js/alpinejs.intersect.min.js"></script>
<script src="src/js/alpinejs.persist.min.js"></script>
<script src="src/js/alpinejs.focus.min.js"></script>
<script src="src/js/alpinejs.collapse.min.js"></script>
<script src="src/js/alpinejs.anchor.min.js"></script>
<script src="src/js/alpinejs.morph.min.js"></script>
<script src="src/js/alpinejs.sort.min.js"></script>
<script src="src/js/alpinejs.min.js"></script>
<link rel="stylesheet" href="src/css/index.css">
<link rel="stylesheet" href="src/css/layout.css">
<link rel="stylesheet" href="src/font/GentiumPlus-webfont-example.css">
<script src="src/js/index.js"></script>
<style>
@font-face {
font-family: 'ChironSungHK';
src: url('src/font/ChironSungHKVF.ttf');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'ChironSungHK';
src: url('src/font/ChironSungHKVF.ttf');
font-weight: bold;
font-style: normal;
}
@font-face {
font-family: 'ChironHeiHK';
src: url('src/font/ChironHeiHKVF.ttf');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'ChironHeiHK';
src: url('src/font/ChironHeiHKVF.ttf');
font-weight: bold;
font-style: normal;
}
</style>
</head>
<body class="sans">
<div id="screenmatte" x-data="{show: true}" x-cloak x-show="show" _="on load go to top of me " @load.transition.duration.500ms="setTimeout(() => {show =false}, 500)">
</div>
<div id="headerCon">
<header>
<div class="flex justify-center items-center top-nav q-mr-md">
<img src="/src/logo.svg" alt="" id="logo">
<span id="title" class="sans serif" _="on click go to the top of body">岭南方言视觉化设计</span>
<span id="tunnel">
<span _="on click remove .hidden from <#statiCon,#switcherCon,#fixedbottom, #prods .flexSon /> then add .hidden to <#dynaCon /> then go to the top of <#statiCon /> -60px">有声插画</span>
<span
_="on click remove .hidden from <#dynaCon,#switcherCon,#fixedbottom, #dynaCon .flexSon, #prods .flexSon /> then add .hidden to <#statiCon /> then go to the top of <#dynaCon /> -60px">动态图</span>
<span><a href="#products">周边</a></span>
<span><a href="/src/html/MeM24 Links.html">方言资源</a></span>
<span><a href="#pjintro">关于</a></span>
<span><a href="#class">我们</a></span>
</span>
</div>
</header>
</div>
<div id="intro">
<div id="pjimgCon">
<img src="src/logo.svg" id="whole" alt="项目主题字" _="on load go to the top of me">
<img src="src/alla.png" id="allillus" alt="插画全家福">
</div>
<h2 id="pjintro">项目简介</h2>
<p><b>“画里有话”——岭南方言视觉化</b>项目，由来自岭南不同地区的四位同学组成的设计小组，分别为广州话、客家话、雷州话、漳州话创作方言插画及衍生设计。 旨在通过方言语汇的创意展现，与年轻人共鸣，诱发人们对方言的兴趣，从而鼓励更多人使用方言表达、记录，用设计的力量为方言保育作出贡献。</p>
<center>
<img src="src/map.png" alt="" id="map">
<figcaption>广东地区主要民系和方言分布</figcaption></center>
<center>
<div id="vidCon">
<video src="src/act/vid/carousel.mp4" id="glance" controls loop></video>
</div>
<figcaption>插画总览（视频版）</figcaption>
</center>
<p>
在插画画风的选择上，我们刻意采用了童化、漫画化的造型语言与色彩。越简单抽象，四个人的绘画输出越容易统一。摆脱写实桎梏也能为画面的趣味性提供创意空间。
</p>
<p>
画得"简单"还有一个好处：当观者看后觉得<i>“就这？我也能”</i> 而跃跃欲试时，我们以作品催生作品的目的就达到了
——<i>既然你也能，那你也来画几张自己的方言吧</i>。
</p>
<h2 id="pjintro">如何写方言</h2>
<p>
方言中有许多字词从未以书面形式记录，无法以其本字书写。即便在方言词典中，许多用字也缺乏考证依据。因此只能采用同音、近音字代替。为了弥补汉字不能准确表达方言发音的缺憾， 在此项目中，我们选用既有的成熟拼音方案为方言标注发音。其中， 客家话使用巴色差会制定的客语白话字（pha̍k va sṳ）、粤语使用香港语言学学会制定的粤语拼音方案（jyut6 ping3）、漳州话使用台湾省制定的闽南语罗马字拼音方案（TL/Tâi-lô）、雷州话使用《雷州话字典》中的雷州话拼音方案。声调的标注则使用语言学家赵元任先生发明的五度标调法。
</p>
<div id="romaCon">
<!-- <img src="src/pic/roma/016.png" alt="">
<img src="src/pic/roma/020.png" alt=""> -->
<img src="src/pic/roma/024.png" alt="">
<img src="src/pic/roma/026.png" alt="">
<img src="src/pic/roma/027.png" alt="">
<img src="src/pic/roma/028.png" alt="">
<center id="carCon">
<div class="carousal">
<img src="src/pic/roma/42.png" alt="">
<img src="src/pic/roma/43.png" alt="">
<img src="src/pic/roma/44.png" alt="">
<img src="src/pic/roma/45.png" alt="">
<img src="src/pic/roma/46.png" alt="">
<img src="src/pic/roma/47.png" alt="">
<img src="src/pic/roma/48.png" alt="">
<img src="src/pic/roma/50.png" alt="">
<img src="src/pic/roma/51.png" alt="">
<script>
var carousal = document.querySelector('.carousal');
var carousalWidth = carousal.offsetWidth;
var scrollAmount = 10; // 每次滚动的像素数
carousal.addEventListener('mousemove', function(event) {
var mouseX = event.clientX - carousal.getBoundingClientRect().left;
var halfWidth = carousalWidth / 2;
if (mouseX < halfWidth) {
carousal.scrollLeft -= scrollAmount; // 向左滚动
} else {
carousal.scrollLeft += scrollAmount; // 向右滚动
}
});
</script>
</div>
<figcaption>书籍装帧课程作业《广乜》中对几种客家话拼音方案的介绍（节选）</figcaption>
</center>
</div>
</div>
<div id="switcherCon" class="hidden">
<span class="langswitcher" id="langswitcherHaks" _="on click remove .hidden from <.flexSon /> then add .hidden to <.flexSon:has(figure:not([id^='H'])) /> "> 客家话</span>
<span class="langswitcher" id="langswitcherPaks" _="on click remove .hidden from <.flexSon /> then add .hidden to <.flexSon:has(figure:not([id^='P'])) />">白话</span>
<span class="langswitcher" id="langswitcherChongs" _="on click remove .hidden from <.flexSon /> then add .hidden to <.flexSon:has(figure:not([id^='C'])) />">漳州话</span>
<span class="langswitcher" id="langswitcherLuis" _="on click remove .hidden from <.flexSon /> then add .hidden to <.flexSon:has(figure:not([id^='L'])) />">雷州话</span>
<span class="langswitcher" id="langswitcherAll" _="on click remove .hidden from <.flexSon />">全部</span>
</div>
<main>
<!-- 有声插画 -->
<div x-data="pics" class="flexCon hidden" id="statiCon">
<template x-for="item in alls">
<div class="flexSon shadow" _="on click go to the top of me -60px">
<figure x-bind:id="`${item}fig`">
<img class="illus" x-bind:src="`src/pic/${item}.png`" alt="illustration"
@click.stop.throttle.2000ms="playAudio(item)">
<audio x-bind:src="`src/aud/${item}.mp3`" x-ref="audio"></audio>
</figure>
<figcaption x-bind:hx-get="`src/txt/${item}.txt`" hx-trigger="load" hx-swap="innerHTML">文本内容缺失</figcaption>
<div class="explain items-center" x-bind:hx-get="`src/txt/explain/${item}.txt`" hx-trigger="load" hx-swap="innerHTML" >
</div>
</div>
</template>
</div>
<!-- 动态图 -->
<div x-data="acts" class="flexCon hidden" id="dynaCon">
<template x-for="item in acts">
<div class="flexSon shadow gifs" _="on click go to the top of me -60px">
<figure x-bind:id="`${item}gif`">
<a x-bind:href="`#${item}fig`">
<img class="illus" x-bind:src="`src/act/gif/${item}.gif`" alt="gif" >
</a>
</figure>
</div>
</template>
</div>
</main>
<div id="products">
<h2 >周边</h2>
<p>系列插画可作为图案应用在T恤、帆布袋、鼠标垫、马克杯、饮品杯等等上，充当装饰的同时，也能作为方言识字教育器具。</p>
<!-- 周边图 -->
<div x-data="prods" class="flexCon" id="prods">
<template x-for="item in prods">
<article class="flexSon">
<figure x-bind:id="`${item}fig`">
<img class="prods" x-bind:src="`src/prods/${item}.png`" alt="`prods:${item}`" >
</figure>
</article>
</template>
</div>
</div>
<center>
<div id="fixedbottom" class="">
<nav id="innerfixedbottom" class="flex">
<span id="searchinput" >
<input type="text" id="searchInput" placeholder="输入搜索关键字">
<span onclick="searchAndScroll()">跳至下一结果</span>
</span>
<span onclick="window.scrollTo({left:0,top: 0,behavior: 'smooth'});">到顶</span>
<span
onclick="window.scrollTo({left:0,top: document.documentElement.scrollHeight, behavior: 'smooth' });">到底</span>
<span id="ScrollUp">上滾</span>
<span id="ScrollDn">下滾</span>
<script>
// 获取 <span> 元素
const scrollUp = document.getElementById('ScrollUp');
const scrollDown = document.getElementById('ScrollDn');
let scrollDirection = null; let scrollSpeed = 0;
scrollUp.addEventListener('mouseenter', function () { startScroll('up', 5); });
scrollDown.addEventListener('mouseenter', function () { startScroll('down', 5); });
scrollUp.addEventListener('mouseleave', stopScroll);
scrollDown.addEventListener('mouseleave', stopScroll);
function startScroll(direction, speed) {
scrollSpeed = speed;
scrollDirection = (direction === 'up') ? -scrollSpeed : scrollSpeed; scroll();
}
function stopScroll() { scrollDirection = null; }
function scroll() { if (scrollDirection !== null) { window.scrollBy(0, scrollDirection); requestAnimationFrame(scroll); } }
</script>
</nav>
</div>
</center>
<footer>
<div id="class">
<h4>广州美术学院 城市学院　 2022 级　视传本科 5 班</h4>
</div>
<div class="us flex flex-left">
<div class="authors">
<h3>李敏莉 </h3>
<p>白话插画，版面设计</p>
<p hx-get="src/txt/contact/pak.txt" hx-trigger="load" hx-swap="innerHTML" >联系方式</p>
</div>
<div class="authors">
<h3>陈月连</h3>
<p>雷州话插画，主题字设计</p>
<p hx-get="src/txt/contact/min-lui.txt" hx-trigger="load" hx-swap="innerHTML" >联系方式</p>
</div>
<div class="authors">
<h3>曾惠芬</h3>
<p>漳州话插画</p>
<p hx-get="src/txt/contact/min-chong.txt" hx-trigger="load" hx-swap="innerHTML" >联系方式</p>
</div>
<div class="authors">
<h3>Wyx</h3>
<p>客家话插画，超媒体制作</p>
<p hx-get="src/txt/contact/hakka.txt" hx-trigger="load" hx-swap="innerHTML" >联系方式</p>
</div>
</div>
</footer>
</body>
</html>