diff --git a/fortune_generator/js/fortune.js b/fortune_generator/js/fortune.js
index 6ab797f..bfe720c 100644
--- a/fortune_generator/js/fortune.js
+++ b/fortune_generator/js/fortune.js
@@ -296,50 +296,4 @@ function getLuck() {
Update();
}
-function copyResultImageToClipboard() {
- try {
- let $title = $('#title').clone().wrap('
', {
- text: 'Copied to clipboard!',
- css: {
- position: 'fixed',
- bottom: '20px',
- right: '20px',
- padding: '10px 20px',
- backgroundColor: 'rgba(0, 0, 0, 0.7)',
- color: '#fff',
- borderRadius: '5px',
- zIndex: 1000,
- }
- });
-
- $('body').append(notice);
-
- setTimeout(() => {
- notice.fadeOut(300, () => {
- notice.remove();
- });
- }, 3000);
-}
init_page();
diff --git a/fortune_generator/js/scripts.js b/fortune_generator/js/scripts.js
index 1163ae0..6672e64 100644
--- a/fortune_generator/js/scripts.js
+++ b/fortune_generator/js/scripts.js
@@ -4,4 +4,50 @@ darkModeIcon.onclick = () => {
darkModeIcon.classList.toggle('bx-sun');
document.body.classList.toggle('dark-mode');
};
-
\ No newline at end of file
+
+function copyResultImageToClipboard() {
+ try {
+ let $title = $('#title').clone().wrap('
');
+ $('#result-page').prepend($title.parent());
+
+ const backgroundColor = getComputedStyle($('.container')[0]).backgroundColor;
+ htmlToImage.toBlob($('#result-page')[0], {
+ skipFonts: true,
+ preferredFontFormat: 'woff2',
+ backgroundColor: backgroundColor, // Set background color dynamically
+ }).then(blob => {
+ navigator.clipboard.write([new ClipboardItem({ [blob.type]: blob })]);
+ showCopiedNotice();
+ $title.parent().remove();
+ }).catch(error => {
+ console.error('Error converting result page to image:', error);
+ $title.parent().remove();
+ });
+ } catch(error) {
+ console.error('Error copying result image to clipboard:', error);
+ }
+}
+
+function showCopiedNotice() {
+ const notice = $('
', {
+ text: 'Copied to clipboard!',
+ css: {
+ position: 'fixed',
+ bottom: '20px',
+ right: '20px',
+ padding: '10px 20px',
+ backgroundColor: 'rgba(0, 0, 0, 0.7)',
+ color: '#fff',
+ borderRadius: '5px',
+ zIndex: 1000,
+ }
+ });
+
+ $('body').append(notice);
+
+ setTimeout(() => {
+ notice.fadeOut(300, () => {
+ notice.remove();
+ });
+ }, 3000);
+}