-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
368 lines (368 loc) · 17 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
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Real & Unreal 虚实之间 - Jinchen Art</title>
<meta property="og:image" content="https://jinchen.org/images/bg/poster.jpg">
<meta property="og:title" content="Real & Unreal 虚实之间 - Jinchen Art" />
<meta name="description" content="Real & Unreal, a David Tuan studio: Art opens a window for you. (虚实之间——段湧工作室)" />
<meta property="og:description" content="Real & Unreal, a David Tuan studio: Art opens a window for you. (虚实之间——段湧工作室)" />
<link href="https://jinchen.org/css/layout.css" rel="stylesheet" />
<style type="text/css">
section#section-head {
margin-bottom: 60px;
}
section#section-head > section {
text-align: center;
}
section#section-head > section > img {
width: 100%;
border-radius: 4px;
user-select: none;
}
section#section-works > section:first-child {
margin-bottom: 0;
display: flex;
flex-wrap: wrap;
user-select: none;
}
section#section-works > section:first-child > img {
background-color: #333;
width: 244px;
height: 200px;
margin: 0 6px 6px 0;
border-radius: 4px;
object-fit: cover;
transition: 0.2s;
cursor: pointer;
}
section#section-works > section:first-child > img:hover {
filter: contrast(1.2);
}
section#section-works > section:first-child + section {
margin-top: 0;
}
section#section-works span#section-works-more {
color: #CCC;
line-height: 30px;
text-align: center;
height: 30px;
background-color: #369;
border-radius: 4px;
display: block;
transition: 0.2s;
cursor: pointer;
}
section#section-works span#section-works-more:hover {
color: #EEE;
background-color: #47A;
}
section#section-intro {
background-color: #333;
background-image: url(images/bg/motley_333.jpg);
padding-top: 10px;
padding-bottom: 10px;
margin-top: 60px;
border-top: 1px solid #444;
}
section#section-intro > section:first-child > strong {
font-size: 16px;
font-weight: normal;
font-style: normal;
}
section#section-intro > section > ul, .x-section-intro > section > ul > li {
list-style: circle;
}
section#section-intro > section > ul > li {
margin-bottom: 8px;
}
section#section-events {
margin-top: 40px;
margin-bottom: 120px;
}
section#section-events > h2 {
color: #C96;
cursor: default;
user-select: none;
}
section#section-events > h2 > span {
color: #A75;
font-size: 14px;
}
section#section-events > section > div {
font-style: italic;
cursor: default;
user-select: none;
}
section#section-events > section > ul {
padding: 0;
margin: 8px 0;
list-style: none;
}
section#section-events > section > ul > li {
line-height: 20px;
background-color: #303030;
padding: 8px 24px;
margin: 0 0 8px 0;
border: 1px solid #333;
border-radius: 8px;
list-style: none;
transition: 0.4s;
}
section#section-events > section > ul > li:hover {
background-color: #333;
}
div#popup-view {
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
backdrop-filter: blur(10px);
background-color: rgba(0,0,0,0.6);
user-select: none;
cursor: default;
}
div#popup-view > div:first-child {
position: absolute;
text-align: center;
top: 0;
right: 0;
left: 0;
bottom: 50px;
}
div#popup-view > div:first-child > img {
height: 100%;
width: 100%;
object-fit: contain;
}
div#popup-view > div:first-child + div {
font-size: 14px;
height: 48px;
line-height: 24px;
text-align: center;
text-shadow: 0 0 4px black;
position: absolute;
left: 0;
right: 0;
bottom: 2px;
}
div#popup-view > div:first-child + div > strong {
font-size: 16px;
font-weight: normal;
font-style: normal;
}
section > div.x-copyright-spec {
color: #F9F9F9; text-align: center; width: 220px; position: absolute; top: 40px; left: 0;
}
section > div.x-copyright-spec > img:first-child {
width: 220px; height: 220px; border-radius: 6px;
}
@media screen and (max-width:560px) {
section#section-works > section:first-child > img {
width: 100%;
height: 320px;
margin: 0 0 10px 0;
}
}
</style>
</head>
<body>
<header>
<section>
<h1><a href="https://jinchen.org"><em>Jinchen Art</em></a></h1>
<ul>
<li class="state-sel" >
<a href="https://realunreal.jinchen.org">Real & Unreal</a>
</li>
<li>
<a href="https://jinchen.org/watercolor">Jiangxi Watercolor</a>
</li>
<li>
<a href="https://jinchen.org/decoration">Decoration</a>
</li>
</ul>
</section>
</header>
<section id="section-head" >
<h2><span>虚实之间</span></h2>
<section>
<img alt="Intro" src="images/bg/card_home_intro.jpg" />
<br /><span>Art opens a window for you · 段湧 工作室</span>
</section>
</section>
<section id="section-works" >
<section id="section-works-container" >
</section>
<section>
<span id="section-works-more" style="display: none; " >+ More 查看更多</span>
</section>
</section>
<section id="section-intro" >
<section>
<strong>David Tuan</strong><span>, graduated from the Academy of Fine Arts, Jiangxi Normal University.</span>
</section>
<section>
<span>段湧（毕业于江西师范大学美术学院）</span>
</section>
<section>
<ul>
<li><span>江西省美协水彩画艺委会副主任<br />Deputy Director, Watercolor Art Committee, Jiangxi Association of Fine Arts</span></li>
<li><span>江西省写生学会副秘书长<br />Deputy Secretary-General, Jiangxi Sketching Society</span></li>
<li><span>《中国水彩画年鉴》2016-2017 编委<br />Editorial Committee, China Watercolor Yearbook</span></li>
<li><span>《江西水彩》会刊总编<br />Chief Editor, Jiangxi Watercolor Painting</span></li>
<li><span>江西豫章书画协会主席<br />Chairman, Jiangxi Yuzhang Calligraphy and Painting Association</span></li>
<li><span>"艺术优雅生活"赣闽粤三省水彩作品系列展策展人<br />Chief Curator, Watercolor Series Exhibition of Art Elegant Life in Jiangxi, Fujian and Guangdong Provinces</span></li>
</ul>
</section>
</section>
<section id="section-events" >
<h2>近年艺术活动<span> Recent Art Events</span></h2>
<section>
<div><span>‘2019</span></div>
<ul>
<li><span>策划“江南西道·江西水彩名家作品展”(苏州E馆)
<br />Organized Jiangxi Watercolor Masters Works Exhibition in E Art Gallery Suzhou.</span></li>
</ul>
<div><span>‘2018</span></div>
<ul>
<li><span>在珠海市古元美术馆主办的“江西省美术家八人作品展”
<br />Sponsored 8 Artists' Works Exhibition of Jiangxi Province in Guyuan Art Museum of Zhuhai City.</span></li>
<li><span>第七届“庐山水彩艺术节”特约嘉宾
<br />Participated the 7<sup>th</sup> Lushan International Art Festival of Watercolor as a special guest.</span></li>
</ul>
<div><span>‘2017</span></div>
<ul>
<li><span>第六届“庐山水彩艺术节”特约嘉宾 & 5幅作品参加世界巡展
<br />Participated the 6<sup>th</sup> Lushan International Art Festival of Watercolor as a special guest. And 5 works were selected for the world tour exhibition.</span></li>
<li><span>参加“水韵溢彩六人作品展”
<br />Participated in the Water Rhyme Overflow Color Six Artists’ Works Exhibition.</span></li>
<li><span>《泊》入选“新丝路·新加坡国际水彩展”
<br /><em>Beached</em> was selected for the New Silk Road - Singapore International Watercolor Exhibition.</span></li>
<li><span>作品《秋日芦语》第二届“亚洲美作品展”获优秀奖
<br /><em>Phragmites Talk in Autumn</em> got award of excellence in Second Asian American Works Exhibition.</span></li>
</ul>
<div><span>‘2016</span></div>
<ul>
<li><span>作品《静湖》参加“潮汕国际水彩展”任特邀嘉宾
<br /><em>Peaceful Lake</em> participated in the Chaoshan International Watercolor Exhibition, and attended as a special guest.</span></li>
<li><span>《沐浴阳光 No. 1》参加“广东江西两省水彩画展”任评督
<br /><em>No. 1 Bathing in the Sunshine</em> participated in the Watercolor Exhibition of Guangdong and Jiangxi Provinces, and attended as a supervisor.</span></li>
</ul>
<div><span>‘2015</span></div>
<ul>
<li><span>水彩画《发小》在“2015江西水彩、粉画作品展”任展览评委
<br /><em>Childhood Friends</em> watercolor painting participated in 2015 Jiangxi Watercolor, Pink Painting Exhibition, and attended as an exhibition judge.</span></li>
</ul>
</section>
</section>
<footer>
<section>
<div class="x-copyright-spec" >
<img alt="Jinchen Art" src="./images/logos/qrcode.jpg" />
<span>Real & Unreal · 虚实之间<br />© David Tuan 2021</span>
</div>
</section>
</footer>
<div id="popup-view" style="display: none; " >
<div><img id="popup-view-img"></div><div><strong id="popup-view-title"></strong><br /><span id="popup-view-desc"></span></div>
</div>
<script type="text/javascript">
(function () {
var images = [
{ name: "启航", size: "61x46", url: "images/works/SetSail2021.jpg" },
{ name: "沐浴阳光", size: "102x68", url: "images/works/BathingInSunshine.JPG" },
{ name: "静", size: "55x38", url: "images/works/Peace2019.jpg", year: 2019 },
{ name: "婺源之晨", size: "55x38", url: "images/works/WuyuanMorning2019.jpg", year: 2019 },
{ name: "青岛渔港", size: "55x38", url: "images/works/TsingtaoHarbour2018.jpg", year: 2018 },
{ name: "青岛晨", size: "55x38", url: "images/works/MorningTsingtao2018.jpg", year: 2018 },
{ name: "云境", size: "38×56", url: "images/works/CloudWorld2018.jpg", year: 2018 },
{ name: "青岛山海", size: "55x38", url: "images/works/TsingtaoHillSea2018.jpg", year: 2018 },
{ name: "岗上古村", size: "54x68", url: "images/works/GangshangVillage2017.jpg", year: 2017 },
{ name: "泊", size: "34x58", url: "images/works/Beached2017.jpg", year: 2017 },
{ name: "泰宁云秋", size: "39x55", url: "images/works/TainingAutumnCloud2017.jpg", year: 2017 },
{ name: "秋日芦语", size: "68x105", url: "images/works/PhragmitesTalkInAutumn2017.jpg", year: 2017 },
{ name: "开春", size: "55x39", url: "images/works/NewSpring2017.jpg", year: 2017 },
{ name: "二月樱云唤渡船", size: "38x56", url: "images/works/BoatInFebClouds.jpg" },
{ name: "发小", size: "69x108", url: "images/works/ChildhoodFriends2015.jpg", year: 2015 },
{ url: "images/works/IMG_20190516_123509.jpg" },
{ name: "看太阳", size: "54x68", url: "images/works/LookAtSun.jpg" },
{ name: "庐山原居", size: "39x55", url: "images/works/LushanHouses.jpg" },
{ name: "云起匡庐", size: "39x55", url: "images/works/LushanInCloud.jpg" },
{ name: "庐山溪林", size: "68x46", url: "images/works/LushanXilin.jpg" },
{ name: "湄洲岛之乐", size: "54x39", url: "images/works/Meizhoudao.jpg" },
{ name: "晨渔", size: "38x56", url: "images/works/MorningFishing.jpg" },
{ name: "垄上", size: "55x78", url: "images/works/OnRidge.jpg" },
{ name: "夜不打烊", size: "61x46", url: "images/works/FantasticNight.jpeg" },
{ name: "穿汉服的小姑娘", size: "61x46", url: "images/works/HanClothingGirl.jpeg" },
{ name: "威海晨曲", size: "63x48", url: "images/works/MorningWeihai.jpeg" },
{ name: "风动南澳岛", size: "53x38", url: "images/works/NanaoIsland.jpeg" },
{ name: "新小学生", size: "38x53", url: "images/works/NewPupils.jpeg" },
{ name: "老巷童谣", size: "38x53", url: "images/works/NurseryRhymesLane.jpeg" },
{ name: "南粤的海", size: "53x38", url: "images/works/SeaNearSouthCanton.jpeg" },
{ name: "稚心亦素", size: "150x120", url: "images/works/SweetieAndChickens.jpeg" },
{ name: "婺源·古巡检司", size: "53x38", url: "images/works/WuyuanInspectorGeneral.jpeg" },
{ name: "遥远的右玉之一", size: "53x38", url: "images/works/Youyu1.jpeg" },
{ name: "遥远的右玉之二", size: "53x38", url: "images/works/Youyu2.jpeg" },
{ name: "遥远的右玉之三", size: "53x38", url: "images/works/Youyu3.jpeg" },
{ name: "船厂", size: "39x55", url: "images/works/Shipyard2015.jpg", year: 2015 },
{ name: "赣江边", size: "39x55", url: "images/works/GanRiverside2015.jpg", year: 2015 },
{ name: "古村", size: "55x39", url: "images/works/OldVillage2016.jpg", year: 2016 },
{ name: "庐山红别墅", size: "39×55", url: "images/works/LushanVilla2015.jpg", year: 2015 },
{ name: "桥", size: "39×55", url: "images/works/Bridge2015.jpg", year: 2015 },
{ name: "秋韵", size: "39×55", url: "images/works/AutumnBeauty2014.jpg", year: 2014 }
];
var defaultName = "作品";
var pageSize = 12;
var offset = 0;
function hidePopupView() {
document.getElementById("popup-view").style.display = "none";
}
function renderImage(containerEle, imageInfo) {
var imageEle = document.createElement("img");
imageEle.src = imageInfo.url;
var imageName = imageInfo.name;
var imageSize = imageInfo.size || "";
if (imageSize && imageSize.indexOf("x") > 0)
imageSize = imageSize.replace("x", "cm × ") + "cm";
if (imageInfo.year) {
if (imageSize && imageInfo.year) imageSize += " | ";
imageSize += "'" + imageInfo.year.toString();
}
if (imageName) {
if (imageSize) imageName += " (" + imageSize + ")";
} else {
imageName = defaultName;
}
imageEle.alt = imageName;
containerEle.appendChild(imageEle);
imageEle.addEventListener("click", function (ev) {
document.getElementById("popup-view-img").src = imageInfo.url;
document.getElementById("popup-view-img").alt = imageName;
document.getElementById("popup-view-title").innerHTML = imageInfo.name || defaultName;
document.getElementById("popup-view-desc").innerHTML = imageSize;
document.getElementById("popup-view").style.display = "";
});
}
function renderNextWave() {
var containerEle = document.getElementById("section-works-container");
for (var i = offset; i < Math.min(offset + pageSize, images.length); i++) {
var imageInfo = images[i];
if (!imageInfo) continue;
try {
renderImage(containerEle, imageInfo);
} catch (ex) { }
}
offset += pageSize;
document.getElementById("section-works-more").style.display = offset < images.length ? "" : "none";
}
renderNextWave();
document.getElementById("popup-view").addEventListener("click", hidePopupView);
document.getElementById("section-works-more").addEventListener("click", function () {
renderNextWave();
});
})();
</script>
</body>
</html>