Spaces:

yeiayel
/

contentforge

Running

App Files Files Community

yeiayel commited on Apr 6, 2025

Commit

5bcbb30

verified ·

1 Parent(s): 08cbe4b

Add 1 files

Browse files

Files changed (1) hide show

index.html +221 -53

index.html CHANGED Viewed

@@ -6,6 +6,8 @@
     <title>SEO AutoBlog AI - Create SEO-Optimized Content in Minutes</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <style>
         .gradient-bg {
             background: linear-gradient(135deg, #6e8efb 0%, #a777e3 100%);
@@ -43,6 +45,29 @@
         .sidebar-open {
             transform: translateX(0);
         }
     </style>
 </head>
 <body class="bg-gray-50 font-sans">
@@ -285,7 +310,7 @@
                                 <span>Generate Titles & Outline</span>
                                 <i class="fas fa-arrow-right"></i>
                             </button>
-                        </div>
                     </div>
                 </div>
             </div>
@@ -301,7 +326,7 @@
                             <div class="title-option p-4 border-2 border-gray-200 rounded-lg cursor-pointer hover:border-purple-400 transition-all">
                                 <div class="flex items-start">
                                     <div class="mr-3 mt-1">
-                                        <input type="radio" name="titleOption" class="h-4 w-4 text-purple-600 focus:ring-purple-500">
                                     </div>
                                     <div>
                                         <h3 class="font-medium text-gray-800">The Ultimate Guide to Starting a Blog in 2024: Step-by-Step for Beginners</h3>
@@ -312,7 +337,7 @@
                             <div class="title-option p-4 border-2 border-gray-200 rounded-lg cursor-pointer hover:border-purple-400 transition-all">
                                 <div class="flex items-start">
                                     <div class="mr-3 mt-1">
-                                        <input type="radio" name="titleOption" class="h-4 w-4 text-purple-600 focus:ring-purple-500">
                                     </div>
                                     <div>
                                         <h3 class="font-medium text-gray-800">How to Start a Successful Blog: A Complete Beginner's Guide</h3>
@@ -323,7 +348,7 @@
                             <div class="title-option p-4 border-2 border-gray-200 rounded-lg cursor-pointer hover:border-purple-400 transition-all">
                                 <div class="flex items-start">
                                     <div class="mr-3 mt-1">
-                                        <input type="radio" name="titleOption" class="h-4 w-4 text-purple-600 focus:ring-purple-500">
                                     </div>
                                     <div>
                                         <h3 class="font-medium text-gray-800">Blogging 101: Everything You Need to Know to Start Your First Blog</h3>
@@ -334,7 +359,7 @@
                             <div class="title-option p-4 border-2 border-gray-200 rounded-lg cursor-pointer hover:border-purple-400 transition-all">
                                 <div class="flex items-start">
                                     <div class="mr-3 mt-1">
-                                        <input type="radio" name="titleOption" class="h-4 w-4 text-purple-600 focus:ring-purple-500">
                                     </div>
                                     <div>
                                         <h3 class="font-medium text-gray-800">From Idea to Launch: The Step-by-Step Process to Start a Blog That Grows</h3>
@@ -426,18 +451,30 @@
                         <div class="flex justify-between items-center mb-6">
                             <h2 class="text-xl font-bold text-gray-800">Generated Article</h2>
                             <div class="flex space-x-3">
-                                <button class="bg-gray-100 hover:bg-gray-200 text-gray-800 px-4 py-2 rounded-lg text-sm font-medium flex items-center">
-                                    <i class="fas fa-download mr-2"></i>
-                                    Export
-                                </button>
-                                <button class="bg-gray-100 hover:bg-gray-200 text-gray-800 px-4 py-2 rounded-lg text-sm font-medium flex items-center">
                                     <i class="fas fa-edit mr-2"></i>
                                     Edit
                                 </button>
                             </div>
                         </div>
-                        <div class="mb-6">
                             <h1 class="text-3xl font-bold text-gray-900 mb-4">The Ultimate Guide to Starting a Blog in 2024: Step-by-Step for Beginners</h1>
                             <div class="flex items-center text-sm text-gray-500 space-x-4 mb-6">
                                 <span><i class="fas fa-clock mr-1"></i> 12 min read</span>
@@ -544,17 +581,70 @@
                             </div>
                         </div>
                         <div class="flex justify-between">
                             <button id="backToStep3" class="bg-gray-200 hover:bg-gray-300 text-gray-800 px-6 py-3 rounded-lg font-medium">
                                 <i class="fas fa-arrow-left mr-2"></i>
                                 Back
                             </button>
                             <div class="flex space-x-3">
-                                <button class="bg-gray-200 hover:bg-gray-300 text-gray-800 px-6 py-3 rounded-lg font-medium">
                                     <i class="fas fa-redo mr-2"></i>
                                     Regenerate
                                 </button>
-                                <button class="bg-purple-600 hover:bg-purple-700 text-white px-6 py-3 rounded-lg font-medium">
                                     <i class="fas fa-save mr-2"></i>
                                     Save & Publish
                                 </button>
@@ -572,8 +662,8 @@
             <div class="w-16 h-16 mx-auto mb-4 rounded-full bg-purple-100 flex items-center justify-center">
                 <i class="fas fa-spinner fa-spin text-purple-600 text-2xl"></i>
             </div>
-            <h3 class="text-xl font-medium text-gray-800 mb-2">Generating Content</h3>
-            <p class="text-gray-600 mb-4">Our AI is crafting your perfect article. This may take a minute...</p>
             <div class="w-full bg-gray-200 rounded-full h-1.5">
                 <div id="progressBar" class="bg-purple-600 h-1.5 rounded-full" style="width: 0%"></div>
             </div>
@@ -581,6 +671,20 @@
         </div>
     </div>
     <script>
         // DOM Elements
         const sidebar = document.getElementById('sidebar');
@@ -597,9 +701,29 @@
         const step3 = document.getElementById('step3');
         const step4 = document.getElementById('step4');
         const loadingModal = document.getElementById('loadingModal');
         const progressBar = document.getElementById('progressBar');
         const progressText = document.getElementById('progressText');
         const titleOptions = document.querySelectorAll('.title-option');
         // Toggle sidebar on mobile
         sidebarToggle.addEventListener('click', () => {
@@ -612,9 +736,28 @@
             sidebar.classList.remove('sidebar-open');
         });
         // Navigation between steps
         generateKeywordsBtn.addEventListener('click', () => {
-            showLoadingModal();
             setTimeout(() => {
                 hideLoadingModal();
                 step1.classList.add('hidden');
@@ -629,7 +772,7 @@
         });
         generateTitlesBtn.addEventListener('click', () => {
-            showLoadingModal();
             setTimeout(() => {
                 hideLoadingModal();
                 step2.classList.add('hidden');
@@ -644,7 +787,13 @@
         });
         generateContentBtn.addEventListener('click', () => {
-            showLoadingModal();
             simulateProgress();
             setTimeout(() => {
                 hideLoadingModal();
@@ -656,6 +805,11 @@
                 document.querySelectorAll('.flex-1.text-center div')[3].classList.add('bg-purple-600', 'text-white');
                 document.querySelectorAll('.flex-1.text-center p')[3].classList.remove('text-gray-600');
                 document.querySelectorAll('.flex-1.text-center p')[3].classList.add('text-purple-600');
             }, 8000);
         });
@@ -720,40 +874,54 @@
             });
         });
-        // Loading modal functions
-        function showLoadingModal() {
-            loadingModal.classList.remove('hidden');
-            progressBar.style.width = '0%';
-            progressText.textContent = 'Initializing AI models...';
-        }
-        function hideLoadingModal() {
-            loadingModal.classList.add('hidden');
-        }
-        function simulateProgress() {
-            let progress = 0;
-            const interval = setInterval(() => {
-                progress += 5;
-                progressBar.style.width = `${progress}%`;
-                if (progress <= 20) {
-                    progressText.textContent = 'Analyzing keywords...';
-                } else if (progress <= 40) {
-                    progressText.textContent = 'Researching topic...';
-                } else if (progress <= 60) {
-                    progressText.textContent = 'Generating outline...';
-                } else if (progress <= 80) {
-                    progressText.textContent = 'Writing content...';
-                } else {
-                    progressText.textContent = 'Finalizing article...';
-                }
-                if (progress >= 100) {
-                    clearInterval(interval);
-                }
-            }, 300);
-        }
-    </script>
-<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=yeiayel/contentforge" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
-</html>

     <title>SEO AutoBlog AI - Create SEO-Optimized Content in Minutes</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/mammoth/1.4.0/mammoth.browser.min.js"></script>
     <style>
         .gradient-bg {
             background: linear-gradient(135deg, #6e8efb 0%, #a777e3 100%);
         .sidebar-open {
             transform: translateX(0);
         }
+        .social-share-btn {
+            transition: all 0.3s ease;
+        }
+        .social-share-btn:hover {
+            transform: scale(1.05);
+        }
+        .copy-btn {
+            transition: all 0.2s ease;
+        }
+        .copy-btn:active {
+            transform: scale(0.95);
+        }
+        .export-dropdown {
+            opacity: 0;
+            visibility: hidden;
+            transform: translateY(10px);
+            transition: all 0.2s ease;
+        }
+        .export-dropdown.show {
+            opacity: 1;
+            visibility: visible;
+            transform: translateY(0);
+        }
     </style>
 </head>
 <body class="bg-gray-50 font-sans">
                                 <span>Generate Titles & Outline</span>
                                 <i class="fas fa-arrow-right"></i>
                             </button>
+                            </div>
                     </div>
                 </div>
             </div>
                             <div class="title-option p-4 border-2 border-gray-200 rounded-lg cursor-pointer hover:border-purple-400 transition-all">
                                 <div class="flex items-start">
                                     <div class="mr-3 mt-1">
+                                        <input type="radio" name="titleOption" class="h-4 w-4 text-purple-600 focus:ring-purple-500" value="The Ultimate Guide to Starting a Blog in 2024: Step-by-Step for Beginners">
                                     </div>
                                     <div>
                                         <h3 class="font-medium text-gray-800">The Ultimate Guide to Starting a Blog in 2024: Step-by-Step for Beginners</h3>
                             <div class="title-option p-4 border-2 border-gray-200 rounded-lg cursor-pointer hover:border-purple-400 transition-all">
                                 <div class="flex items-start">
                                     <div class="mr-3 mt-1">
+                                        <input type="radio" name="titleOption" class="h-4 w-4 text-purple-600 focus:ring-purple-500" value="How to Start a Successful Blog: A Complete Beginner's Guide">
                                     </div>
                                     <div>
                                         <h3 class="font-medium text-gray-800">How to Start a Successful Blog: A Complete Beginner's Guide</h3>
                             <div class="title-option p-4 border-2 border-gray-200 rounded-lg cursor-pointer hover:border-purple-400 transition-all">
                                 <div class="flex items-start">
                                     <div class="mr-3 mt-1">
+                                        <input type="radio" name="titleOption" class="h-4 w-4 text-purple-600 focus:ring-purple-500" value="Blogging 101: Everything You Need to Know to Start Your First Blog">
                                     </div>
                                     <div>
                                         <h3 class="font-medium text-gray-800">Blogging 101: Everything You Need to Know to Start Your First Blog</h3>
                             <div class="title-option p-4 border-2 border-gray-200 rounded-lg cursor-pointer hover:border-purple-400 transition-all">
                                 <div class="flex items-start">
                                     <div class="mr-3 mt-1">
+                                        <input type="radio" name="titleOption" class="h-4 w-4 text-purple-600 focus:ring-purple-500" value="From Idea to Launch: The Step-by-Step Process to Start a Blog That Grows">
                                     </div>
                                     <div>
                                         <h3 class="font-medium text-gray-800">From Idea to Launch: The Step-by-Step Process to Start a Blog That Grows</h3>
                         <div class="flex justify-between items-center mb-6">
                             <h2 class="text-xl font-bold text-gray-800">Generated Article</h2>
                             <div class="flex space-x-3">
+                                <div class="relative">
+                                    <button id="exportBtn" class="bg-gray-100 hover:bg-gray-200 text-gray-800 px-4 py-2 rounded-lg text-sm font-medium flex items-center">
+                                        <i class="fas fa-download mr-2"></i>
+                                        Export
+                                    </button>
+                                    <div id="exportDropdown" class="export-dropdown absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg z-10 py-1">
+                                        <a href="#" class="export-option block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" data-type="pdf"><i class="fas fa-file-pdf mr-2 text-red-500"></i> PDF</a>
+                                        <a href="#" class="export-option block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" data-type="docx"><i class="fas fa-file-word mr-2 text-blue-500"></i> Word</a>
+                                        <a href="#" class="export-option block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" data-type="txt"><i class="fas fa-file-alt mr-2 text-gray-500"></i> Text</a>
+                                        <a href="#" class="export-option block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" data-type="md"><i class="fab fa-markdown mr-2 text-purple-500"></i> Markdown</a>
+                                    </div>
+                                </div>
+                                <button id="editBtn" class="bg-gray-100 hover:bg-gray-200 text-gray-800 px-4 py-2 rounded-lg text-sm font-medium flex items-center">
                                     <i class="fas fa-edit mr-2"></i>
                                     Edit
                                 </button>
+                                <button id="copyBtn" class="bg-gray-100 hover:bg-gray-200 text-gray-800 px-4 py-2 rounded-lg text-sm font-medium flex items-center copy-btn">
+                                    <i class="fas fa-copy mr-2"></i>
+                                    Copy
+                                </button>
                             </div>
                         </div>
+                        <div id="articleContent" class="mb-6">
                             <h1 class="text-3xl font-bold text-gray-900 mb-4">The Ultimate Guide to Starting a Blog in 2024: Step-by-Step for Beginners</h1>
                             <div class="flex items-center text-sm text-gray-500 space-x-4 mb-6">
                                 <span><i class="fas fa-clock mr-1"></i> 12 min read</span>
                             </div>
                         </div>
+                        <!-- Social Media Sharing -->
+                        <div class="bg-gray-50 p-6 rounded-lg mb-6">
+                            <h3 class="text-lg font-medium text-gray-800 mb-4">Share Your Article</h3>
+                            <p class="text-gray-600 mb-4">Generate social media posts for your article with one click:</p>
+                            <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
+                                <button class="social-share-btn bg-blue-500 hover:bg-blue-600 text-white px-4 py-3 rounded-lg flex items-center justify-center" data-platform="twitter">
+                                    <i class="fab fa-twitter mr-2"></i>
+                                    Generate Twitter Post
+                                </button>
+                                <button class="social-share-btn bg-blue-700 hover:bg-blue-800 text-white px-4 py-3 rounded-lg flex items-center justify-center" data-platform="facebook">
+                                    <i class="fab fa-facebook-f mr-2"></i>
+                                    Generate Facebook Post
+                                </button>
+                                <button class="social-share-btn bg-pink-600 hover:bg-pink-700 text-white px-4 py-3 rounded-lg flex items-center justify-center" data-platform="instagram">
+                                    <i class="fab fa-instagram mr-2"></i>
+                                    Generate Instagram Post
+                                </button>
+                            </div>
+                            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                                <button class="social-share-btn bg-blue-400 hover:bg-blue-500 text-white px-4 py-3 rounded-lg flex items-center justify-center" data-platform="linkedin">
+                                    <i class="fab fa-linkedin-in mr-2"></i>
+                                    Generate LinkedIn Post
+                                </button>
+                                <button class="social-share-btn bg-red-500 hover:bg-red-600 text-white px-4 py-3 rounded-lg flex items-center justify-center" data-platform="pinterest">
+                                    <i class="fab fa-pinterest-p mr-2"></i>
+                                    Generate Pinterest Post
+                                </button>
+                            </div>
+                        </div>
+                        <!-- Generated Social Media Posts (Hidden Initially) -->
+                        <div id="socialPostsContainer" class="hidden">
+                            <div class="bg-white border border-gray-200 rounded-lg p-6 mb-6">
+                                <div class="flex justify-between items-center mb-4">
+                                    <h3 class="text-lg font-medium text-gray-800" id="socialPlatformName">Twitter Post</h3>
+                                    <div class="flex space-x-2">
+                                        <button class="copy-social-btn bg-gray-100 hover:bg-gray-200 text-gray-800 px-3 py-1 rounded text-sm">
+                                            <i class="fas fa-copy mr-1"></i> Copy
+                                        </button>
+                                        <button class="close-social-btn bg-gray-100 hover:bg-gray-200 text-gray-800 px-3 py-1 rounded text-sm">
+                                            <i class="fas fa-times mr-1"></i> Close
+                                        </button>
+                                    </div>
+                                </div>
+                                <div id="socialPostContent" class="bg-gray-50 p-4 rounded">
+                                    <p class="text-gray-800" id="socialPostText"></p>
+                                    <div id="socialPostMedia" class="mt-3"></div>
+                                </div>
+                            </div>
+                        </div>
                         <div class="flex justify-between">
                             <button id="backToStep3" class="bg-gray-200 hover:bg-gray-300 text-gray-800 px-6 py-3 rounded-lg font-medium">
                                 <i class="fas fa-arrow-left mr-2"></i>
                                 Back
                             </button>
                             <div class="flex space-x-3">
+                                <button id="regenerateBtn" class="bg-gray-200 hover:bg-gray-300 text-gray-800 px-6 py-3 rounded-lg font-medium">
                                     <i class="fas fa-redo mr-2"></i>
                                     Regenerate
                                 </button>
+                                <button id="publishBtn" class="bg-purple-600 hover:bg-purple-700 text-white px-6 py-3 rounded-lg font-medium">
                                     <i class="fas fa-save mr-2"></i>
                                     Save & Publish
                                 </button>
             <div class="w-16 h-16 mx-auto mb-4 rounded-full bg-purple-100 flex items-center justify-center">
                 <i class="fas fa-spinner fa-spin text-purple-600 text-2xl"></i>
             </div>
+            <h3 class="text-xl font-medium text-gray-800 mb-2" id="loadingTitle">Generating Content</h3>
+            <p class="text-gray-600 mb-4" id="loadingMessage">Our AI is crafting your perfect article. This may take a minute...</p>
             <div class="w-full bg-gray-200 rounded-full h-1.5">
                 <div id="progressBar" class="bg-purple-600 h-1.5 rounded-full" style="width: 0%"></div>
             </div>
         </div>
     </div>
+    <!-- Success Modal -->
+    <div id="successModal" class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+        <div class="bg-white rounded-xl p-8 max-w-md w-full text-center">
+            <div class="w-16 h-16 mx-auto mb-4 rounded-full bg-green-100 flex items-center justify-center">
+                <i class="fas fa-check text-green-600 text-2xl"></i>
+            </div>
+            <h3 class="text-xl font-medium text-gray-800 mb-2">Success!</h3>
+            <p class="text-gray-600 mb-6" id="successMessage">Your article has been generated successfully.</p>
+            <button id="successModalClose" class="bg-purple-600 hover:bg-purple-700 text-white px-6 py-2 rounded-lg font-medium">
+                Continue
+            </button>
+        </div>
+    </div>
     <script>
         // DOM Elements
         const sidebar = document.getElementById('sidebar');
         const step3 = document.getElementById('step3');
         const step4 = document.getElementById('step4');
         const loadingModal = document.getElementById('loadingModal');
+        const loadingTitle = document.getElementById('loadingTitle');
+        const loadingMessage = document.getElementById('loadingMessage');
         const progressBar = document.getElementById('progressBar');
         const progressText = document.getElementById('progressText');
+        const successModal = document.getElementById('successModal');
+        const successMessage = document.getElementById('successMessage');
+        const successModalClose = document.getElementById('successModalClose');
         const titleOptions = document.querySelectorAll('.title-option');
+        const exportBtn = document.getElementById('exportBtn');
+        const exportDropdown = document.getElementById('exportDropdown');
+        const exportOptions = document.querySelectorAll('.export-option');
+        const articleContent = document.getElementById('articleContent');
+        const editBtn = document.getElementById('editBtn');
+        const copyBtn = document.getElementById('copyBtn');
+        const regenerateBtn = document.getElementById('regenerateBtn');
+        const publishBtn = document.getElementById('publishBtn');
+        const socialShareBtns = document.querySelectorAll('.social-share-btn');
+        const socialPostsContainer = document.getElementById('socialPostsContainer');
+        const socialPlatformName = document.getElementById('socialPlatformName');
+        const socialPostText = document.getElementById('socialPostText');
+        const socialPostMedia = document.getElementById('socialPostMedia');
+        const copySocialBtn = document.querySelector('.copy-social-btn');
+        const closeSocialBtn = document.querySelector('.close-social-btn');
         // Toggle sidebar on mobile
         sidebarToggle.addEventListener('click', () => {
             sidebar.classList.remove('sidebar-open');
         });
+        // Export dropdown toggle
+        exportBtn.addEventListener('click', (e) => {
+            e.stopPropagation();
+            exportDropdown.classList.toggle('show');
+        });
+        // Close export dropdown when clicking outside
+        document.addEventListener('click', (e) => {
+            if (!exportBtn.contains(e.target) && !exportDropdown.contains(e.target)) {
+                exportDropdown.classList.remove('show');
+            }
+        });
         // Navigation between steps
         generateKeywordsBtn.addEventListener('click', () => {
+            const topic = document.getElementById('topic').value.trim();
+            if (!topic) {
+                alert('Please enter a topic for your article');
+                return;
+            }
+            showLoadingModal('Analyzing Topic', 'Our AI is analyzing your topic and finding the best keywords...');
             setTimeout(() => {
                 hideLoadingModal();
                 step1.classList.add('hidden');
         });
         generateTitlesBtn.addEventListener('click', () => {
+            showLoadingModal('Generating Titles', 'Our AI is creating compelling title options for your article...');
             setTimeout(() => {
                 hideLoadingModal();
                 step2.classList.add('hidden');
         });
         generateContentBtn.addEventListener('click', () => {
+            const selectedTitle = document.querySelector('input[name="titleOption"]:checked');
+            if (!selectedTitle) {
+                alert('Please select a title for your article');
+                return;
+            }
+            showLoadingModal('Writing Article', 'Our AI is writing your complete article based on your selected title and outline...');
             simulateProgress();
             setTimeout(() => {
                 hideLoadingModal();
                 document.querySelectorAll('.flex-1.text-center div')[3].classList.add('bg-purple-600', 'text-white');
                 document.querySelectorAll('.flex-1.text-center p')[3].classList.remove('text-gray-600');
                 document.querySelectorAll('.flex-1.text-center p')[3].classList.add('text-purple-600');
+                // Update article title with selected title
+                document.querySelector('#articleContent h1').textContent = selectedTitle.value;
+                showSuccessModal('Your article has been generated successfully! You can now export, share, or publish it.');
             }, 8000);
         });
             });
         });
+        // Export functionality
+        exportOptions.forEach(option => {
+            option.addEventListener('click', function(e) {
+                e.preventDefault();
+                const type = this.getAttribute('data-type');
+                exportArticle(type);
+                exportDropdown.classList.remove('show');
+            });
+        });
+        function exportArticle(type) {
+            showLoadingModal('Exporting Article', `Preparing your article for export as ${type.toUpperCase()}...`);
+            setTimeout(() => {
+                const element = document.getElementById('articleContent');
+                const articleTitle = document.querySelector('#articleContent h1').textContent;
+                switch(type) {
+                    case 'pdf':
+                        const pdfOpts = {
+                            margin: 10,
+                            filename: `${articleTitle}.pdf`,
+                            image: { type: 'jpeg', quality: 0.98 },
+                            html2canvas: { scale: 2 },
+                            jsPDF: { unit: 'mm', format: 'a4', orientation: 'portrait' }
+                        };
+                        html2pdf().set(pdfOpts).from(element).save();
+                        break;
+                    case 'docx':
+                        // For DOCX export, we'll create a simple HTML version that can be saved as Word
+                        const htmlContent = `
+                            <!DOCTYPE html>
+                            <html>
+                            <head>
+                                <meta charset="UTF-8">
+                                <title>${articleTitle}</title>
+                                <style>
+                                    body { font-family: Arial, sans-serif; line-height: 1.6; }
+                                    h1 { color: #2d3748; }
+                                    h2 { color: #4a5568; margin-top: 24px; }
+                                    p { margin-bottom: 16px; }
+                                    ul, ol { margin-left: 24px; }
+                                    .pro-tip { background: #ebf8ff; padding: 12px; border-left: 4px solid #4299e1; margin: 16px 0; }
+                                </style>
+                            </head>
+                            <body>
+                                ${element.innerHTML}
+                            <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=yeiayel/contentforge" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+                            </html>