-
Notifications
You must be signed in to change notification settings - Fork 17
/
index.html
142 lines (130 loc) · 4.04 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>Poster in canvas</title>
<style>
body {
padding: 0;
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
.container {
padding-top: 20px;
}
.poster {
width: 460px;
margin-bottom: 15px;
position: relative;
}
.poster img {
display: block;
width: 100%;
height: auto;
}
.poster:hover .btn-download {
opacity: 1;
}
.btn-download {
position: absolute;
transition: opacity .6s;
z-index: 100;
opacity: 0;
top: 50%;
left: 50%;
background: rgb(87, 123, 255);
width: 88px;
height: 40px;
margin-top: -20px;
margin-left: -44px;
text-align: center;
line-height: 40px;
border-radius: 8px;
color: #fff;
font-weight: 600;
cursor: pointer;
}
</style>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap-grid.min.css"
rel="stylesheet">
<link rel="stylesheet" href="//at.alicdn.com/t/font_579509_p15123txqmh.css">
<script src="dist/poster.min.js"></script>
</head>
<body>
<div class="container">
<h1 style="text-align: center">Canvas poster</h1>
<div class="row no-gutters">
<div class="col-lg-4 col-md-6 poster poster-en">
<a class="btn-download" download="poster1.jpg">
<i class=" icon icon-download"></i>
</a>
</div>
<div class="col-lg-4 col-md-6 poster poster-ch">
<a class="btn-download" download="poster2.jpg">
<i class=" icon icon-download"></i>
</a>
</div>
<div class="col-lg-4 col-md-6 poster poster-jp">
<a class="btn-download" download="poster3.jpg">
<i class=" icon icon-download"></i>
</a>
</div>
</div>
</div>
<script>
poster.init(
{
banner: './images/mountain.jpg',
selector: '.poster-en',
title: 'Nothing is impossible',
titleStyle:
{
font: 'bold italic 50px Arial',
color: 'rgba(66, 66, 66, 1)'
},
content: 'Nothing is impossible; there are ways that lead to everything, and if we had sufficient will we should always have sufficient means. It is often merely for an excuse that we say things are impossible.',
contentStyle:
{
font: 'italic 24px Arial',
lineHeight: 1.2,
position: 'center',
color: 'rgba(88, 88, 88, 1)'
},
logo: '16px.io',
logoStyle:
{
color: 'rgba(0, 0, 120, 1)'
},
description: 'Developing the most beautiful and elegant theme',
callback: download
})
poster.init(
{
banner: './images/dream.png',
selector: '.poster-ch',
title: '没有不可能',
content: '没有不可能的事；每件事都有方法，且如果有充足的意愿，我们永远都会有充足的方法。通常我们只是因为一个借口而说某件事不可能。',
logo: '16px.io',
description: '专注开发最漂亮、最优雅的主题',
callback: download
})
poster.init(
{
banner: './images/home.jpg',
selector: '.poster-jp',
title: '不可能である',
content: '不可能なことはありません。一つの事にも方法があり、十分な意思があれば、私たちはいつまでも十分な方法があります。普通はただ一つの言い訳のためにあることは不可能だと言います。',
logo: '16px.io',
description: '最も美しい、最も優雅なテーマを開発する',
callback: download
})
function download(container)
{
const $btn = container.querySelector('.btn-download')
const $img = container.querySelector('img')
$btn.setAttribute('href', $img.getAttribute('src'))
}
</script>
</body>
</html>