Skip to content

Commit 49abfa9

Browse files
author
Yuma
committed
Implement thumbnail maker
1 parent b122aec commit 49abfa9

File tree

8 files changed

+12955
-0
lines changed

8 files changed

+12955
-0
lines changed

‎_sass/_global.scss

+4
Original file line numberDiff line numberDiff line change
@@ -359,3 +359,7 @@ table td {
359359
table thead th {
360360
background-color: #e8e8e8;
361361
}
362+
363+
.no-padding {
364+
padding: 0;
365+
}

‎_sass/_thumbnail_maker.scss

+109
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
.thumbnail-maker {
2+
max-width: 1500px;
3+
margin: auto;
4+
.title-block {
5+
padding: 2rem;
6+
.title {
7+
font-size: 2rem;
8+
font-weight: bold;
9+
}
10+
}
11+
12+
.thumbnail-preview {
13+
height: 60vh;
14+
position: relative;
15+
background:url(/img/thumbnail-maker/bg.svg) no-repeat center;
16+
background-size: cover;
17+
display:flex;
18+
align-items: center;
19+
margin: 0 6rem 3rem;
20+
21+
border-color: #046;
22+
border-width: 6px;
23+
border-style: dashed;
24+
25+
&::before{
26+
content:"";
27+
position: absolute;
28+
width: 80%;
29+
height: 80%;
30+
top: 10%;
31+
left: 10%;
32+
background:url(/img/thumbnail-maker/bg2.svg) no-repeat center;
33+
background-size: contain;
34+
}
35+
36+
.main-flex{
37+
width:100%;
38+
display:flex;
39+
flex-direction: column;
40+
align-items: center;
41+
z-index:10;
42+
margin-top: 3vw;
43+
}
44+
45+
.thema{
46+
width:15%;
47+
}
48+
49+
.logo{
50+
width:60%;
51+
}
52+
53+
.textarea-box{
54+
width: 90%;
55+
background: #faee00;
56+
border: 10px solid #2ba6e0;
57+
padding:0.5vw 1vw;
58+
border-radius: 5px;
59+
margin: 15px 0;
60+
}
61+
62+
textarea.message{
63+
width: 100%;
64+
height:54px;
65+
font-size: 42px;
66+
border: none;
67+
background:none;
68+
color: #2ba6e0;
69+
font-weight: bold;
70+
text-align:center;
71+
letter-spacing: .1em;
72+
line-height : 52px;
73+
overflow:hidden;
74+
resize: none;
75+
}
76+
77+
textarea.message:focus{
78+
outline:none;
79+
}
80+
81+
textarea.message::selection {
82+
background: #2ba6e0;
83+
color: #fff;
84+
}
85+
}
86+
87+
.btn {
88+
background-color: #faee00;
89+
border-color: #046;
90+
color: #046;
91+
border-width: 3px;
92+
border-style: solid;
93+
border-radius: 5px;
94+
font-size: 2rem;
95+
font-weight: bold;
96+
cursor: pointer;
97+
margin: 1rem 0;
98+
}
99+
100+
.inline-block {
101+
display: inline-block;
102+
}
103+
104+
.links {
105+
display: flex;
106+
flex-direction: column;
107+
padding: 0 6rem;
108+
}
109+
}

‎css/main.scss

+1
Original file line numberDiff line numberDiff line change
@@ -11,3 +11,4 @@ $navbar: 60px;
1111
@import '_top';
1212
@import '_page';
1313
@import '_post';
14+
@import '_thumbnail_maker';

‎img/thumbnail-maker/bg.svg

+3,789
Loading

‎img/thumbnail-maker/bg2.svg

+8,391
Loading

‎img/thumbnail-maker/logo.svg

+487
Loading

‎img/thumbnail-maker/theme.svg

+110
Loading

‎thumbnail-maker.html

+64
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
---
2+
layout: default
3+
---
4+
5+
<div class="thumbnail-maker">
6+
<div class="title-block">
7+
<h1 class="title">DojoCon Japan 2022 サムネイルメーカー</h1>
8+
</div>
9+
<div class="thumbnail-preview">
10+
<div class="main-flex">
11+
<img class="thema" src="/img/thumbnail-maker/theme.svg" alt="見渡す">
12+
<div class="textarea-box">
13+
<textarea id="message-box" class="message" spellcheck="false"
14+
placeholder="ここにテキストを入力"></textarea>
15+
</div>
16+
<img class="logo" src="/img/thumbnail-maker/logo.svg" alt="DojoConJapan2021 Decembar 18th/ONLINE">
17+
</div>
18+
</div>
19+
<div class="links">
20+
<a id="img-download-btn" class="btn inline-block" href="#">画像をダウンロード</a>
21+
<a id="img-show-btn" class="inline-block" href="#">ダウンロードできない場合はこちら</a>
22+
</div>
23+
</div>
24+
25+
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script>
26+
<script type="module">
27+
import { Base64 } from 'https://cdn.jsdelivr.net/npm/[email protected]/base64.mjs';
28+
29+
const textAreaHeightSet = (textarea) => {
30+
textarea.style.height = "42px";
31+
var wSclollHeight = parseInt(textarea.scrollHeight);
32+
33+
var wLineH = parseInt(textarea.style.lineHeight.replace(/px/, ''));
34+
35+
if(wSclollHeight < (wLineH * 1.)){wSclollHeight=(wLineH * 1);}
36+
37+
textarea.style.height = wSclollHeight + "px";
38+
}
39+
40+
const setImageDownloadURL = (textarea) => {
41+
const imgShowBtn = document.getElementById("img-show-btn");
42+
const text = Base64.encodeURI(textarea.value);
43+
imgShowBtn.href = `https://dcj2021-thumbnail-maker.ymsg.space/?text=${text}`;
44+
}
45+
46+
const downloadThumbnail = () => {
47+
const textarea = document.getElementById('message-box');
48+
const text = Base64.encodeURI(textarea.value);
49+
saveAs(`https://dcj2021-thumbnail-maker.ymsg.space/?text=${text}`, 'thumbnail.png');
50+
}
51+
52+
document.getElementById("message-box").addEventListener("input", (e) => {
53+
textAreaHeightSet(e.target);
54+
setImageDownloadURL(e.target);
55+
});
56+
document.getElementById("message-box").addEventListener("change", (e) => {
57+
textAreaHeightSet(e.target);
58+
setImageDownloadURL(e.target);
59+
});
60+
61+
document.getElementById("img-download-btn").addEventListener("click", (e) => {
62+
downloadThumbnail();
63+
});
64+
</script>

0 commit comments

Comments
 (0)