my personal website!
meowing.zip
website
changing the alert to a toast when my button gets clicked and copies to your clipboard
+82
-2
+10
-2
index.html
+10
-2
index.html
···
13
13
type="text/css"
14
14
href="https://cdn.jsdelivr.net/npm/@phosphor-icons/web@2.1.1/src/fill/style.css"
15
15
/>
16
-
<script>function copyMyButton(){navigator.clipboard.writeText('<a href="https://meowing.zip"><img src="https://meowing.zip/assets/88x31/button.png" alt="meowing.zip"></a>'),alert("copied button html to ur clipboard!!")}</script>
16
+
<script>
17
+
function copyButton() {
18
+
navigator.clipboard.writeText('<a href="https://meowing.zip"><img src="https://meowing.zip/assets/88x31/button.png" alt="meowing.zip"></a>');
19
+
var x = document.getElementById("copy-toast");
20
+
x.className = "show";
21
+
setTimeout(function(){ x.className = x.className.replace("show", ""); }, 3000);
22
+
}
23
+
</script>
17
24
</head>
18
25
<link rel="stylesheet" href="styles.css">
19
26
<footer>
···
113
120
<a style="font-size: 12px; color: var(--subtext);"><small>feel free to add mine (hotlinking is ok!, click the button to copy the html)</small></a>
114
121
</div>
115
122
<div class="my-button" style="padding: 5px;">
116
-
<a onclick="copyMyButton()"><img class="web-button" src="./assets/88x31/button.png" alt="my cool ass button"></a>
123
+
<a onclick="copyButton()"><img class="web-button" src="./assets/88x31/button.png" alt="my cool ass button"></a>
117
124
</div>
118
125
</div>
119
126
<a style="color: var(--accent); padding: 10px;" href="https://git.gay/meowmaxing/website"><small>website source!</small></a>
120
127
<a style="color: var(--accent); padding: 10px;"><small>last modified: 2026-04-18T01:03:26Z</small></a>
128
+
<span id="copy-toast"><i style="margin-right: 5px; color: light-dark(#40a02b, #a6e3a1)" class="ph ph-clipboard-text"></i>copied to clipboard!</span>
121
129
</body>
122
130
<a rel="me" href="https://fuzzies.wtf/@gayfamicom"></a>
123
131
<a rel="me" href="https://app.wafrn.net/blog/gayfamicom"></a>
+72
styles.css
+72
styles.css
···
37
37
--divider-color: light-dark(#8839ef, #9ca0b0);
38
38
--accent: light-dark(#8839ef, #cba6f7);
39
39
}
40
+
#copy-toast {
41
+
visibility: hidden;
42
+
color: var(--foreground);
43
+
background-color: var(--crust);
44
+
margin-left: -125px;
45
+
border-radius: 12px;
46
+
border: 2px dashed var(--accent);
47
+
padding: 12px;
48
+
text-align: center;
49
+
left: 50%;
50
+
top: 30px;
51
+
z-index: 1;
52
+
position: fixed;
53
+
opacity: 0.8;
54
+
}
55
+
56
+
/* This will be activated when the snackbar's class is 'show' which will be added through JS */
57
+
#copy-toast.show {
58
+
visibility: visible;
59
+
-webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
60
+
animation: fadein 0.5s, fadeout 0.5s 2.5s;
61
+
opacity: 0.8;
62
+
}
63
+
64
+
/* Animations for fading in and out */
65
+
@-webkit-keyframes fadein {
66
+
from {
67
+
top: 0;
68
+
opacity: 0;
69
+
}
70
+
71
+
to {
72
+
top: 30px;
73
+
opacity: 0.8;
74
+
}
75
+
}
76
+
77
+
@keyframes fadein {
78
+
from {
79
+
top: 0;
80
+
opacity: 0;
81
+
}
82
+
83
+
to {
84
+
top: 30px;
85
+
opacity: 0.8;
86
+
}
87
+
}
88
+
89
+
@-webkit-keyframes fadeout {
90
+
from {
91
+
top: 30px;
92
+
opacity: 0.8;
93
+
}
94
+
95
+
to {
96
+
top: 0;
97
+
opacity: 0;
98
+
}
99
+
}
100
+
101
+
@keyframes fadeout {
102
+
from {
103
+
top: 30px;
104
+
opacity: 0.8;
105
+
}
106
+
107
+
to {
108
+
top: 0;
109
+
opacity: 0;
110
+
}
111
+
}
40
112
button {
41
113
font-family: "Iosevka Aile", monospace;
42
114
font-size: 17px;