Hugging Face's logo

Spaces:
simonduerr
/
pdb2vector
Running

App Files Community
simonduerr commited on
Commit
1013f57
·
verified ·
1 Parent(s): 77daddd

Update app.py

Browse files
Files changed (1) hide show
  1. app.py +57 -4
app.py CHANGED
@@ -21,10 +21,55 @@ def html_output(input_file):
21
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
22
  <title>Document</title>
23
  <script src="https://cdn.tailwindcss.com"></script>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
24
  </head>
25
  <body>
26
 
27
- <div class="flex container mx-auto">
28
  <div class="w-1/2">
29
 
30
 
@@ -157,7 +202,10 @@ def html_output(input_file):
157
  </div>
158
  </div>
159
  </div>
160
-
 
 
 
161
 
162
  <script type="text/javascript">
163
  function copySvgToClipboard() {
@@ -166,7 +214,9 @@ def html_output(input_file):
166
 
167
  // Copy the serialized SVG text to the clipboard
168
  navigator.clipboard.writeText(svgData).then(() => {
169
- alert("SVG text copied to clipboard!");
 
 
170
  }).catch(err => {
171
  console.error("Could not copy SVG text to clipboard: ", err);
172
  });
@@ -195,7 +245,10 @@ function copyPngToClipboard() {
195
  canvas.toBlob(blob => {
196
  const clipboardItem = [new ClipboardItem({ 'image/png': blob })];
197
  navigator.clipboard.write(clipboardItem).then(() => {
198
- alert("PNG with transparent background copied to clipboard!");
 
 
 
199
  }).catch(err => {
200
  console.error("Could not copy PNG to clipboard: ", err);
201
  });
 
21
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
22
  <title>Document</title>
23
  <script src="https://cdn.tailwindcss.com"></script>
24
+
25
+ <style>
26
+ #snackbar {
27
+ visibility: hidden;
28
+ color: #fff;
29
+ background-color: #333;
30
+ min-width: 250px;
31
+ margin-left: -125px;
32
+ border-radius: 2px;
33
+ padding: 16px;
34
+ text-align: center;
35
+ left: 50%;
36
+ bottom: 30px;
37
+ z-index: 1;
38
+ position: fixed;
39
+ }
40
+
41
+ /* This will be activated when the snackbar's class is 'show' which will be added through JS */
42
+ #snackbar.show {
43
+ visibility: visible;
44
+ -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
45
+ animation: fadein 0.5s, fadeout 0.5s 2.5s;
46
+ }
47
+
48
+ /* Animations for fading in and out */
49
+ @-webkit-keyframes fadein {
50
+ from {bottom: 0; opacity: 0;}
51
+ to {bottom: 30px; opacity: 1;}
52
+ }
53
+
54
+ @keyframes fadein {
55
+ from {bottom: 0; opacity: 0;}
56
+ to {bottom: 30px; opacity: 1;}
57
+ }
58
+
59
+ @-webkit-keyframes fadeout {
60
+ from {bottom: 30px; opacity: 1;}
61
+ to {bottom: 0; opacity: 0;}
62
+ }
63
+
64
+ @keyframes fadeout {
65
+ from {bottom: 30px; opacity: 1;}
66
+ to {bottom: 0; opacity: 0;}
67
+ }
68
+ </style>
69
  </head>
70
  <body>
71
 
72
+ <div class="flex container mx-auto max-w-3xl">
73
  <div class="w-1/2">
74
 
75
 
 
202
  </div>
203
  </div>
204
  </div>
205
+
206
+ <span id="snackbar">Copied to clipboard</span>
207
+
208
+
209
 
210
  <script type="text/javascript">
211
  function copySvgToClipboard() {
 
214
 
215
  // Copy the serialized SVG text to the clipboard
216
  navigator.clipboard.writeText(svgData).then(() => {
217
+ var sb = document.getElementById("snackbar");
218
+ sb.className = "show";
219
+ setTimeout(()=>{ sb.className = sb.className.replace("show", ""); }, 3000);
220
  }).catch(err => {
221
  console.error("Could not copy SVG text to clipboard: ", err);
222
  });
 
245
  canvas.toBlob(blob => {
246
  const clipboardItem = [new ClipboardItem({ 'image/png': blob })];
247
  navigator.clipboard.write(clipboardItem).then(() => {
248
+ var sb = document.getElementById("snackbar");
249
+ sb.className = "show";
250
+ setTimeout(()=>{ sb.className = sb.className.replace("show", ""); }, 3000);
251
+
252
  }).catch(err => {
253
  console.error("Could not copy PNG to clipboard: ", err);
254
  });