-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcard.html
181 lines (159 loc) · 8.09 KB
/
card.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
<!Doctype html>
<html lang="ko">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="naver-site-verification" content="3871ac8aaf7c40aa5e48caedff9d7120fc8e4bd1" />
<meta name="title" content="2022 마지막 추억을 만들어봐요!/card">
<meta name="subject" content="2022: 원하는 사람과, 원하는 추억/card">
<meta name="description" content="2022: 마지막 추억을 만들어봐요!/card" />
<meta name="keywords" content="2022, 2023, 새로운 시작, 끝, 추억, 우정, 친구, 사진, 폴라로이드, 카메라, 2022: 마지막 추억을 만들어봐요!, 2022: 원하는 사람과, 원하는 추억, 2022, memories, 2022memories, 카드, card">
<meta name="author" content="Gugo-le">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/snow.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="/jquery/jquery.js"></script>
<title>2022: 원하는 사람과, 원하는 추억</title>
</head>
<!-- snow effect -->
<div class="snowflake"></div>
<div class="snowflake"></div>
<div class="snowflake"></div>
<div class="snowflake"></div>
<div class="snowflake"></div>
<div class="snowflake"></div>
<div class="snowflake"></div>
<div class="snowflake"></div>
<div class="snowflake"></div>
<div class="snowflake"></div>
<div class="snowflake"></div>
<div class="snowflake"></div>
<div class="snowflake"></div>
<div class="snowflake"></div>
<div class="snowflake"></div>
<div class="snowflake"></div>
<div class="snowflake"></div>
<div class="snowflake"></div>
<div class="snowflake"></div>
<div class="snowflake"></div>
<div class="snowflake"></div>
<div class="snowflake"></div>
<div class="snowflake"></div>
<div class="snowflake"></div>
<div class="snowflake"></div>
<div class="snowflake"></div>
<div class="snowflake"></div>
<div class="snowflake"></div>
<div class="snowflake"></div>
<div class="snowflake"></div>
<div class="snowflake"></div>
<div class="snowflake"></div>
<div class="snowflake"></div>
<div class="snowflake"></div>
<div class="snowflake"></div>
<div class="snowflake"></div>
<div class="snowflake"></div>
<div class="snowflake"></div>
<div class="snowflake"></div>
<div class="snowflake"></div>
<div class="snowflake"></div>
<div class="snowflake"></div>
<div class="snowflake"></div>
<div class="snowflake"></div>
<div class="snowflake"></div>
<div class="snowflake"></div>
<div class="snowflake"></div>
<div class="snowflake"></div>
<div class="snowflake"></div>
<div class="snowflake"></div>
<div class="body">
<p class="banner">2022: 원하는 사람과, 원하는 추억</p>
<label class="save_btn"><a class="hover" href='javascript:void(0);' onclick="PrintDiv($('#savebox'));">추억 다운로드하기</a></label>
<div class="cardpage">
<div class="polarea">
<div id="savebox" class="savebox">
<div class="box">
<canvas id="canvas" width="260" height="350"></canvas>
<img id="img1" class="front" src="/img/frame2.png">
</div>
<br>
<div class="txt" id='result'></div>
<canvas id="bar2"></canvas>
</div>
</div>
<br>
<div class="btnarea">
<span class="type">필터  </span>
<button class="redbtn" onclick="toggleImg1()"></button>
<button class="greenbtn" onclick="toggleImg2()"></button>
<button class="yellowbtn" onclick="toggleImg3()"></button>
<button class="blackbtn" onclick="toggleImg4()"></button>
<br><br>
<span class="type">이미지  </span>
<button class="onbtn" onclick="imgon()">ON</button>
<button class="offbtn" onclick="imgoff()">OFF</button>
<br>
<br><input class="txtinput" placeholder="텍스트를 입력하세요" id='name' onkeyup='printName()' />
</div>
<div class="modal">
<div class="modal_body">
<video id="video" width="400" height="450" autoplay playsinline></video>
<button id="videoshot"><i class="camera" style="width: auto;">📷</i></button>
</div>
</div>
<label class="btn-open-popup">사진 찍기</label>
<div class="re">
<label class="reshot" onclick="location.href='../card.html'">다시 찍기</label>
<input id="clip_target" type="text" value="" style="position:absolute;top:-9999em;" />
<br><br>
</div>
<footer class="footer pt-5 container d-flex justify-content-center">
<div>
<p class="author-contact">GITHUB:
<a href="https://github.com/Gugo-le">Gugo-le</a>
</p>
<p class="author-contact">EMAIL: [email protected]</p>
<p class="authoe-contact">SPON: 한국 조커이한
<a href="https://www.youtube.com/channel/UCpbgxb-908UOpbqujxIySmQ">이한</a>은 누구일까?</p>
<p class="author--">----------------------------------------------------------</p>
</div>
</footer>
<a class="clipboardBtn" href="" onclick="">
<p class="copytxt">링크 복사</p>
</a>
<input id="clip_target" type="text" value="" style="position:absolute;top:-9999em;" />
<p class="dev">이미지 저장이 어려운 경우<br>크롬 브라우저 혹은 화면 캡처를 이용해주세요 </p>
<p class="dev">dev | <a href="https://github.com/Gugo-le">구현승</a><br>designer | <a href="https://instagram.com/k_a_aa_n?igshid=MDM4ZDc5MmU=">노강은</a></p>
<p class="dev">Copyright © 2022 Gugo & k_a_aa_n?</p>
<br><br>
</div>
<div class="ad-banner300">
<ins class="kakao_ad_area" style="display:none;" data-ad-unit="DAN-Wy5nIBWQfoicFsbB" data-ad-width="300" data-ad-height="250"></ins>
<script type="text/javascript" src="//t1.daumcdn.net/kas/static/ba.min.js" async></script>
</div>
<div class="ad-banner300">
<ins class="kakao_ad_area" style="display:none;" data-ad-unit="DAN-qPd2NrxwJ5QxoCWS" data-ad-width="300" data-ad-height="250"></ins>
<script type="text/javascript" src="//t1.daumcdn.net/kas/static/ba.min.js" async></script>
</div>
<div class="ad-banner320">
<ins class="kakao_ad_area" style="display:none;" data-ad-unit="DAN-fysuD0YRKO70MLin" data-ad-width="320" data-ad-height="100"></ins>
<script type="text/javascript" src="//t1.daumcdn.net/kas/static/ba.min.js" async></script>
</div>
<div class="ad-banner320">
<ins class="kakao_ad_area" style="display:none;" data-ad-unit="DAN-ErC1oD1KwqGpR3tH" data-ad-width="320" data-ad-height="100"></ins>
<script type="text/javascript" src="//t1.daumcdn.net/kas/static/ba.min.js" async></script>
</div>
<audio src="music/mainch.mp3" controls autoplay loop hidden="true" />
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-5474525447203395" crossorigin="anonymous"></script>
<script src="https://html2canvas.hertzen.com/dist/html2canvas.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="js/imgupload.js"></script>
<script src="js/camera.js"></script>
<script src="js/modal.js"></script>
</body>
</html>