Spaces:
Running
Running
| <html lang="fa" dir="rtl"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>LinkWeaver AI - تولید لینک هوشمند</title> | |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.waves.min.js"></script> | |
| <link href="https://cdn.jsdelivr.net/gh/rastikerdar/vazir-font@v30.1.0/dist/font-face.css" rel="stylesheet" type="text/css"> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| fontFamily: { | |
| sans: ['Vazir', 'sans-serif'], | |
| }, | |
| extend: { | |
| colors: { | |
| primary: { | |
| 500: '#6366f1', | |
| 600: '#4f46e5', | |
| }, | |
| secondary: { | |
| 500: '#f59e0b', | |
| 600: '#d97706', | |
| } | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| body { | |
| font-family: 'Vazir', sans-serif; | |
| } | |
| #vanta-bg { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| z-index: -1; | |
| } | |
| .card-glass { | |
| background: rgba(255, 255, 255, 0.85); | |
| backdrop-filter: blur(10px); | |
| border-radius: 1rem; | |
| box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); | |
| } | |
| .tab-active { | |
| border-bottom: 3px solid; | |
| border-color: #6366f1; | |
| } | |
| .result-box { | |
| transition: all 0.3s ease; | |
| } | |
| .result-box:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 min-h-screen flex flex-col"> | |
| <div id="vanta-bg"></div> | |
| <!-- Header --> | |
| <header class="bg-white shadow-sm"> | |
| <div class="container mx-auto px-4 py-4 flex justify-between items-center"> | |
| <div class="flex items-center space-x-2 space-x-reverse"> | |
| <div class="w-10 h-10 bg-primary-500 rounded-full flex items-center justify-center text-white"> | |
| <i data-feather="link"></i> | |
| </div> | |
| <h1 class="text-xl font-bold text-gray-800">LinkWeaver AI</h1> | |
| </div> | |
| <nav class="hidden md:flex space-x-8 space-x-reverse"> | |
| <a href="#" class="text-primary-500 font-medium">خانه</a> | |
| <a href="#" class="text-gray-600 hover:text-primary-500">درباره ما</a> | |
| <a href="#" class="text-gray-600 hover:text-primary-500">مستندات</a> | |
| <a href="#" class="text-gray-600 hover:text-primary-500">تماس با ما</a> | |
| </nav> | |
| <button class="md:hidden text-gray-600"> | |
| <i data-feather="menu"></i> | |
| </button> | |
| </div> | |
| </header> | |
| <!-- Main Content --> | |
| <main class="flex-grow container mx-auto px-4 py-8"> | |
| <div class="max-w-4xl mx-auto"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">تولید لینک هوشمند با هوش مصنوعی</h2> | |
| <p class="text-lg text-gray-600 max-w-2xl mx-auto"> | |
| با استفاده از قوی‌ترین مدل‌های هوش مصنوعی، لینک‌های هوشمند خود را در چند ثانیه ایجاد کنید | |
| </p> | |
| </div> | |
| <!-- Tabs --> | |
| <div class="flex border-b border-gray-200 mb-8"> | |
| <button class="tab-btn py-3 px-6 font-medium text-gray-600 hover:text-primary-500 tab-active" data-tab="text"> | |
| <i data-feather="edit-2" class="w-5 h-5 ml-2"></i> | |
| متن | |
| </button> | |
| <button class="tab-btn py-3 px-6 font-medium text-gray-600 hover:text-primary-500" data-tab="url"> | |
| <i data-feather="link-2" class="w-5 h-5 ml-2"></i> | |
| آدرس اینترنتی | |
| </button> | |
| <button class="tab-btn py-3 px-6 font-medium text-gray-600 hover:text-primary-500" data-tab="file"> | |
| <i data-feather="upload" class="w-5 h-5 ml-2"></i> | |
| فایل | |
| </button> | |
| </div> | |
| <!-- Forms --> | |
| <div class="card-glass p-6 md:p-8 mb-8"> | |
| <!-- Text Form --> | |
| <form id="text-form" class="tab-content block"> | |
| <div class="mb-6"> | |
| <label for="text-input" class="block text-gray-700 font-medium mb-2">دستورالعمل خود را وارد کنید:</label> | |
| <textarea id="text-input" rows="5" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500" placeholder="مثال: لینک دانلود کتاب آموزش پایتون"></textarea> | |
| </div> | |
| <button type="submit" class="w-full bg-primary-500 hover:bg-primary-600 text-white font-medium py-3 px-6 rounded-lg transition duration-200 flex items-center justify-center"> | |
| <span id="text-submit-text">تولید لینک</span> | |
| <div id="text-spinner" class="hidden ml-3"> | |
| <div class="animate-spin rounded-full h-5 w-5 border-b-2 border-white"></div> | |
| </div> | |
| </button> | |
| </form> | |
| <!-- URL Form --> | |
| <form id="url-form" class="tab-content hidden"> | |
| <div class="mb-6"> | |
| <label for="url-input" class="block text-gray-700 font-medium mb-2">آدرس اینترنتی را وارد کنید:</label> | |
| <input type="url" id="url-input" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500" placeholder="مثال: https://example.com/document.pdf"> | |
| </div> | |
| <button type="submit" class="w-full bg-primary-500 hover:bg-primary-600 text-white font-medium py-3 px-6 rounded-lg transition duration-200 flex items-center justify-center"> | |
| <span id="url-submit-text">تولید لینک</span> | |
| <div id="url-spinner" class="hidden ml-3"> | |
| <div class="animate-spin rounded-full h-5 w-5 border-b-2 border-white"></div> | |
| </div> | |
| </button> | |
| </form> | |
| <!-- File Form --> | |
| <form id="file-form" class="tab-content hidden"> | |
| <div class="mb-6"> | |
| <label for="file-input" class="block text-gray-700 font-medium mb-2">فایل خود را آپلود کنید:</label> | |
| <div class="border-2 border-dashed border-gray-300 rounded-lg p-8 text-center"> | |
| <div class="flex flex-col items-center justify-center"> | |
| <i data-feather="upload-cloud" class="w-12 h-12 text-gray-400 mb-3"></i> | |
| <p class="text-gray-500 mb-2">فایل خود را اینجا رها کنید یا برای انتخاب کلیک کنید</p> | |
| <input type="file" id="file-input" class="hidden"> | |
| <label for="file-input" class="bg-gray-100 hover:bg-gray-200 text-gray-700 font-medium py-2 px-4 rounded-lg cursor-pointer transition duration-200"> | |
| انتخاب فایل | |
| </label> | |
| </div> | |
| <p id="file-name" class="text-sm text-gray-500 mt-3 hidden"></p> | |
| </div> | |
| </div> | |
| <button type="submit" class="w-full bg-primary-500 hover:bg-primary-600 text-white font-medium py-3 px-6 rounded-lg transition duration-200 flex items-center justify-center"> | |
| <span id="file-submit-text">تولید لینک</span> | |
| <div id="file-spinner" class="hidden ml-3"> | |
| <div class="animate-spin rounded-full h-5 w-5 border-b-2 border-white"></div> | |
| </div> | |
| </button> | |
| </form> | |
| </div> | |
| <!-- Results Section --> | |
| <div id="results-section" class="hidden"> | |
| <h3 class="text-xl font-bold text-gray-800 mb-6">لینک‌های تولید شده</h3> | |
| <div id="results-container" class="grid grid-cols-1 gap-4"> | |
| <!-- Results will be added here dynamically --> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <!-- Footer --> | |
| <footer class="bg-white border-t border-gray-200 py-8"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <div class="flex items-center space-x-2 space-x-reverse mb-4 md:mb-0"> | |
| <div class="w-8 h-8 bg-primary-500 rounded-full flex items-center justify-center text-white"> | |
| <i data-feather="link"></i> | |
| </div> | |
| <span class="font-medium">LinkWeaver AI</span> | |
| </div> | |
| <div class="flex space-x-6 space-x-reverse"> | |
| <a href="#" class="text-gray-600 hover:text-primary-500"> | |
| <i data-feather="github"></i> | |
| </a> | |
| <a href="#" class="text-gray-600 hover:text-primary-500"> | |
| <i data-feather="twitter"></i> | |
| </a> | |
| <a href="#" class="text-gray-600 hover:text-primary-500"> | |
| <i data-feather="instagram"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-200 mt-6 pt-6 text-center text-gray-500 text-sm"> | |
| <p>© 2023 LinkWeaver AI. تمامی حقوق محفوظ است.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Initialize Vanta.js background | |
| VANTA.WAVES({ | |
| el: "#vanta-bg", | |
| color: 0x6366f1, | |
| waveHeight: 20, | |
| shininess: 50, | |
| waveSpeed: 1.0, | |
| zoom: 0.8 | |
| }); | |
| // Initialize feather icons | |
| feather.replace(); | |
| // Tab switching | |
| const tabBtns = document.querySelectorAll('.tab-btn'); | |
| const tabContents = document.querySelectorAll('.tab-content'); | |
| tabBtns.forEach(btn => { | |
| btn.addEventListener('click', () => { | |
| const tabId = btn.getAttribute('data-tab'); | |
| // Update active tab button | |
| tabBtns.forEach(b => b.classList.remove('tab-active', 'text-primary-500')); | |
| btn.classList.add('tab-active', 'text-primary-500'); | |
| // Show selected tab content | |
| tabContents.forEach(content => content.classList.add('hidden')); | |
| document.getElementById(`${tabId}-form`).classList.remove('hidden'); | |
| }); | |
| }); | |
| // File input handling | |
| const fileInput = document.getElementById('file-input'); | |
| const fileNameDisplay = document.getElementById('file-name'); | |
| fileInput.addEventListener('change', (e) => { | |
| if (e.target.files.length > 0) { | |
| fileNameDisplay.textContent = `فایل انتخاب شده: ${e.target.files[0].name}`; | |
| fileNameDisplay.classList.remove('hidden'); | |
| } else { | |
| fileNameDisplay.classList.add('hidden'); | |
| } | |
| }); | |
| // Form submissions | |
| document.getElementById('text-form').addEventListener('submit', async (e) => { | |
| e.preventDefault(); | |
| const submitBtn = e.target.querySelector('button[type="submit"]'); | |
| const spinner = document.getElementById('text-spinner'); | |
| const submitText = document.getElementById('text-submit-text'); | |
| submitBtn.disabled = true; | |
| submitText.textContent = 'در حال پردازش...'; | |
| spinner.classList.remove('hidden'); | |
| // Simulate API call | |
| await new Promise(resolve => setTimeout(resolve, 2000)); | |
| // Show results | |
| showResults([ | |
| { | |
| title: "لینک دانلود کتاب آموزش پایتون", | |
| url: "https://example.com/python-book.pdf", | |
| type: "pdf", | |
| size: "2.4MB" | |
| }, | |
| { | |
| title: "ویدیو آموزش پایتون", | |
| url: "https://example.com/python-tutorial.mp4", | |
| type: "video", | |
| size: "156MB" | |
| } | |
| ]); | |
| submitBtn.disabled = false; | |
| submitText.textContent = 'تولید لینک'; | |
| spinner.classList.add('hidden'); | |
| }); | |
| document.getElementById('url-form').addEventListener('submit', async (e) => { | |
| e.preventDefault(); | |
| const submitBtn = e.target.querySelector('button[type="submit"]'); | |
| const spinner = document.getElementById('url-spinner'); | |
| const submitText = document.getElementById('url-submit-text'); | |
| const url = document.getElementById('url-input').value; | |
| submitBtn.disabled = true; | |
| submitText.textContent = 'در حال پردازش...'; | |
| spinner.classList.remove('hidden'); | |
| // Simulate API call | |
| await new Promise(resolve => setTimeout(resolve, 2000)); | |
| // Show results | |
| showResults([ | |
| { | |
| title: "دانلود سند با کیفیت بالا", | |
| url: "https://example.com/download/document.pdf", | |
| type: "pdf", | |
| size: "5.1MB" | |
| } | |
| ]); | |
| submitBtn.disabled = false; | |
| submitText.textContent = 'تولید لینک'; | |
| spinner.classList.add('hidden'); | |
| }); | |
| document.getElementById('file-form').addEventListener('submit', async (e) => { | |
| e.preventDefault(); | |
| const submitBtn = e.target.querySelector('button[type="submit"]'); | |
| const spinner = document.getElementById('file-spinner'); | |
| const submitText = document.getElementById('file-submit-text'); | |
| if (!fileInput.files.length) { | |
| alert('لطفاً یک فایل انتخاب کنید'); | |
| return; | |
| } | |
| submitBtn.disabled = true; | |
| submitText.textContent = 'در حال پردازش...'; | |
| spinner.classList.remove('hidden'); | |
| // Simulate API call | |
| await new Promise(resolve => setTimeout(resolve, 2000)); | |
| // Show results | |
| showResults([ | |
| { | |
| title: "لینک اشتراک‌گذاری فایل شما", | |
| url: "https://example.com/share/uploaded-file.pdf", | |
| type: "pdf", | |
| size: "3.8MB" | |
| } | |
| ]); | |
| submitBtn.disabled = false; | |
| submitText.textContent = 'تولید لینک'; | |
| spinner.classList.add('hidden'); | |
| }); | |
| // Show results function | |
| function showResults(results) { | |
| const resultsSection = document.getElementById('results-section'); | |
| const resultsContainer = document.getElementById('results-container'); | |
| // Clear previous results | |
| resultsContainer.innerHTML = ''; | |
| // Add new results | |
| results.forEach(result => { | |
| const resultCard = document.createElement('div'); | |
| resultCard.className = 'result-box bg-white rounded-lg shadow-md p-6 border border-gray-200'; | |
| resultCard.innerHTML = ` | |
| <div class="flex justify-between items-start mb-4"> | |
| <div class="flex items-center"> | |
| <div class="w-10 h-10 rounded-md bg-primary-100 flex items-center justify-center text-primary-500 mr-3"> | |
| <i data-feather="${getFileIcon(result.type)}"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-medium text-gray-800">${result.title}</h4> | |
| <p class="text-sm text-gray-500">${result.size}</p> | |
| </div> | |
| </div> | |
| <a href="${result.url}" target="_blank" class="text-primary-500 hover:text-primary-600"> | |
| <i data-feather="external-link"></i> | |
| </a> | |
| </div> | |
| <div class="flex items-center bg-gray-50 rounded-lg p-3"> | |
| <input type="text" value="${result.url}" class="flex-grow bg-transparent text-gray-700 text-sm overflow-x-auto" readonly> | |
| <button onclick="copyToClipboard('${result.url}')" class="text-gray-500 hover:text-primary-500 mr-3"> | |
| <i data-feather="copy"></i> | |
| </button> | |
| <a href="${result.url}" download class="bg-primary-500 hover:bg-primary-600 text-white text-sm font-medium py-1 px-3 rounded-lg transition duration-200"> | |
| دانلود | |
| </a> | |
| </div> | |
| `; | |
| resultsContainer.appendChild(resultCard); | |
| }); | |
| // Show results section | |
| resultsSection.classList.remove('hidden'); | |
| feather.replace(); | |
| } | |
| // Helper functions | |
| function getFileIcon(type) { | |
| const icons = { | |
| 'pdf': 'file-text', | |
| 'video': 'film', | |
| 'image': 'image', | |
| 'audio': 'music', | |
| 'archive': 'package', | |
| 'document': 'file-text', | |
| 'default': 'file' | |
| }; | |
| return icons[type] || icons.default; | |
| } | |
| function copyToClipboard(text) { | |
| navigator.clipboard.writeText(text).then(() => { | |
| alert('لینک کپی شد!'); | |
| }).catch(err => { | |
| console.error('Failed to copy: ', err); | |
| }); | |
| } | |
| </script> | |
| </body> | |
| </html> | |