Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Newsletter Automation</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, #6B73FF 0%, #000DFF 100%); | |
| } | |
| .input-focus:focus { | |
| box-shadow: 0 0 0 3px rgba(107, 115, 255, 0.3); | |
| } | |
| .response-area { | |
| min-height: 400px; | |
| transition: all 0.3s ease; | |
| } | |
| .loader { | |
| border-top-color: #6B73FF; | |
| -webkit-animation: spinner 1.5s linear infinite; | |
| animation: spinner 1.5s linear infinite; | |
| } | |
| @-webkit-keyframes spinner { | |
| 0% { -webkit-transform: rotate(0deg); } | |
| 100% { -webkit-transform: rotate(360deg); } | |
| } | |
| @keyframes spinner { | |
| 0% { transform: rotate(0deg); } | |
| 100% { transform: rotate(360deg); } | |
| } | |
| .newsletter-counter { | |
| font-family: 'Courier New', monospace; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 min-h-screen"> | |
| <div class="container mx-auto px-4 py-8"> | |
| <header class="mb-10 text-center"> | |
| <h1 class="text-4xl font-bold text-gray-800 mb-2">Newsletter Automation</h1> | |
| <p class="text-gray-600 max-w-2xl mx-auto">Generate professional newsletters in seconds with AI. Just fill in the details and let our system do the rest!</p> | |
| </header> | |
| <div class="flex flex-col lg:flex-row gap-8 relative"> | |
| <!-- Left Column - Form --> | |
| <div class="w-full lg:w-1/2 bg-white rounded-xl shadow-md p-6 lg:sticky lg:top-8 lg:h-[calc(100vh-4rem)]"> | |
| <h2 class="text-2xl font-semibold text-gray-800 mb-6">Create Your Newsletter</h2> | |
| <form id="newsletterForm" class="space-y-6"> | |
| <div> | |
| <label for="topic" class="block text-sm font-medium text-gray-700 mb-1">Topic *</label> | |
| <input | |
| type="text" | |
| id="topic" | |
| name="topic" | |
| required | |
| placeholder="What's your newsletter about?" | |
| class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 input-focus transition duration-200" | |
| > | |
| </div> | |
| <div> | |
| <label for="tone" class="block text-sm font-medium text-gray-700 mb-1">Tone *</label> | |
| <select | |
| id="tone" | |
| name="tone" | |
| required | |
| class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 input-focus transition duration-200" | |
| > | |
| <option value="" disabled selected>Select a tone for your newsletter</option> | |
| <option value="Professional">Professional</option> | |
| <option value="Casual">Casual</option> | |
| <option value="Friendly">Friendly</option> | |
| <option value="Authoritative">Authoritative</option> | |
| <option value="Inspirational">Inspirational</option> | |
| <option value="Humorous">Humorous</option> | |
| <option value="Technical">Technical</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label for="audience" class="block text-sm font-medium text-gray-700 mb-1">Target Audience *</label> | |
| <input | |
| type="text" | |
| id="audience" | |
| name="audience" | |
| required | |
| placeholder="Who is your target audience?" | |
| class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 input-focus transition duration-200" | |
| > | |
| </div> | |
| <div> | |
| <label for="email" class="block text-sm font-medium text-gray-700 mb-1">Your Email *</label> | |
| <input | |
| type="email" | |
| id="email" | |
| name="email" | |
| required | |
| placeholder="Where should we send the newsletter?" | |
| class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 input-focus transition duration-200" | |
| > | |
| </div> | |
| <div class="pt-4"> | |
| <button | |
| type="submit" | |
| class="w-full gradient-bg text-white py-3 px-6 rounded-lg font-medium hover:opacity-90 transition duration-200 flex items-center justify-center" | |
| > | |
| <i class="fas fa-paper-plane mr-2"></i> Generate Newsletter | |
| </button> | |
| </div> | |
| <div class="mt-8 pt-6 border-t border-gray-200"> | |
| <div class="flex items-center justify-between"> | |
| <span class="text-sm font-medium text-gray-600">Newsletters Generated:</span> | |
| <span id="counter" class="text-xl font-bold text-blue-600 newsletter-counter">70</span> | |
| </div> | |
| </div> | |
| </form> | |
| </div> | |
| <!-- Right Column - Response --> | |
| <div class="w-full lg:w-1/2 lg:overflow-y-auto"> | |
| <div class="bg-white rounded-xl shadow-md p-6 min-h-full"> | |
| <h2 class="text-2xl font-semibold text-gray-800 mb-6">Your Newsletter</h2> | |
| <div id="responseArea" class="response-area bg-gray-50 rounded-lg p-4 border border-gray-200"> | |
| <div id="emptyState" class="flex flex-col items-center justify-center h-full text-center py-12"> | |
| <i class="fas fa-newspaper text-4xl text-gray-300 mb-4"></i> | |
| <h3 class="text-lg font-medium text-gray-500">Your newsletter will appear here</h3> | |
| <p class="text-gray-400 mt-1 max-w-md">Fill out the form and click "Generate Newsletter" to create your custom content.</p> | |
| </div> | |
| <div id="loadingState" class="hidden flex-col items-center justify-center h-full text-center py-12"> | |
| <div class="loader ease-linear rounded-full border-4 border-t-4 border-gray-200 h-12 w-12 mb-4"></div> | |
| <h3 class="text-lg font-medium text-gray-700">Generating your newsletter...</h3> | |
| <p class="text-gray-500 mt-1">This usually takes about 10-15 seconds.</p> | |
| </div> | |
| <div id="responseContent" class="hidden"> | |
| <div id="successAlert" class="bg-green-50 border-l-4 border-green-500 p-4 mb-4 rounded"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0"> | |
| <i class="fas fa-check-circle text-green-500"></i> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="text-sm text-green-700"> | |
| A copy of this newsletter has been sent to your email address! | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| <div id="newsletterContent" class="prose max-w-none"> | |
| <!-- Newsletter content will be inserted here --> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <footer class="mt-16 text-center text-gray-500 text-sm"> | |
| <p>Designed by Jamiu Sosanya | <a href="mailto:sosanyajamiu@gmail.com" class="text-blue-600 hover:underline">sosanyajamiu@gmail.com</a></p> | |
| </footer> | |
| </div> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const form = document.getElementById('newsletterForm'); | |
| const responseArea = document.getElementById('responseArea'); | |
| const emptyState = document.getElementById('emptyState'); | |
| const loadingState = document.getElementById('loadingState'); | |
| const responseContent = document.getElementById('responseContent'); | |
| const newsletterContent = document.getElementById('newsletterContent'); | |
| const counter = document.getElementById('counter'); | |
| let newsletterCount = 70; | |
| // Increment counter every 5 minutes to simulate usage | |
| setInterval(() => { | |
| newsletterCount++; | |
| counter.textContent = newsletterCount; | |
| }, 300000); | |
| form.addEventListener('submit', async function(e) { | |
| e.preventDefault(); | |
| // Get form values | |
| const topic = document.getElementById('topic').value; | |
| const tone = document.getElementById('tone').value; | |
| const audience = document.getElementById('audience').value; | |
| const email = document.getElementById('email').value; | |
| // Show loading state | |
| emptyState.classList.add('hidden'); | |
| loadingState.classList.remove('hidden'); | |
| responseContent.classList.add('hidden'); | |
| try { | |
| // Send data to webhook | |
| const response = await fetch('https://workflow.porifyx.com/webhook/e09efa68-9f7a-42d9-bbe3-3ed71e252f53', { | |
| method: 'POST', | |
| headers: { | |
| 'Content-Type': 'application/json', | |
| }, | |
| body: JSON.stringify({ | |
| topic, | |
| tone, | |
| audience, | |
| }) | |
| }); | |
| const text = await response.text(); | |
| // Hide loading state and show response | |
| loadingState.classList.add('hidden'); | |
| if (text) { | |
| // Format the response | |
| newsletterContent.innerHTML = formatNewsletter(text); | |
| responseContent.classList.remove('hidden'); | |
| // Increment counter | |
| newsletterCount++; | |
| counter.textContent = newsletterCount; | |
| } else { | |
| showError("Received an unexpected response format from the server."); | |
| } | |
| } catch (error) { | |
| loadingState.classList.add('hidden'); | |
| showError("Failed to generate newsletter. Please try again later."); | |
| console.error('Error:', error); | |
| } | |
| }); | |
| function formatNewsletter(content) { | |
| // Convert newlines to HTML line breaks and preserve whitespace | |
| let formatted = content.replace(/\n/g, '<br>'); | |
| return formatted; | |
| } | |
| function showError(message) { | |
| newsletterContent.innerHTML = ` | |
| <div class="bg-red-50 border-l-4 border-red-500 p-4 mb-4 rounded"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0"> | |
| <i class="fas fa-exclamation-circle text-red-500"></i> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="text-sm text-red-700"> | |
| ${message} | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| `; | |
| responseContent.classList.remove('hidden'); | |
| } | |
| }); | |
| </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=Teep002/security-scanner" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |