داشبورد تحلیل توییتر

I'll create a Persian-language Twitter analysis dashboard with all the requested features. Here's the complete implementation: داشبورد تحلیل توییتر * { font-family: 'Vazirmatn', sans-serif; margin: 0; padding: 0; box-sizing: border-box; } body { background-color: #f5f7fa; color: #333; } .login-container { max-width: 400px; margin: 100px auto; padding: 30px; background: white; border-radius: 8px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); } .login-container h1 { text-align: center; margin-bottom: 20px; color: #2c3e50; } .form-group { margin-bottom: 20px; } .form-group label { display: block; margin-bottom: 8px; font-weight: 500; } .form-group input { width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 4px; font-size: 16px; } button { width: 100%; padding: 12px; background-color: #3498db; color: white; border: none; border-radius: 4px; font-size: 16px; cursor: pointer; transition: background-color 0.3s; } button:hover { background-color: #2980b9; } .navbar { background-color: #2c3e50; padding: 15px 0; } .navbar ul { list-style: none; display: flex; justify-content: center; gap: 30px; } .navbar a { color: white; text-decoration: none; font-size: 16px; transition: color 0.3s; } .navbar a:hover { color: #3498db; } .navbar li.active a { color: #3498db; } .content { padding: 30px; } .content h1 { margin-bottom: 30px; color: #2c3e50; } .tweet-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; } .tweet-card { background: white; border-radius: 8px; padding: 20px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); transition: transform 0.3s, box-shadow 0.3s; } .tweet-card:hover { transform: translateY(-5px); box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); } .user-info { display: flex; align-items: center; margin-bottom: 15px; } .user-avatar { width: 50px; height: 50px; border-radius: 50%; margin-left: 15px; object-fit: cover; } .tweet-text { margin-bottom: 15px; line-height: 1.6; } .comment { padding: 12px; background-color: #f0f8ff; border-radius: 6px; border-right: 3px solid #3498db; } @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .tweet-card { animation: fadeIn 0.5s ease-out forwards; opacity: 0; } .tweet-card:nth-child(1) { animation-delay: 0.1s; } .tweet-card:nth-child(2) { animation-delay: 0.2s; } .tweet-card:nth-child(3) { animation-delay: 0.3s; } .tweet-card:nth-child(4) { animation-delay: 0.4s; } .tweet-card:nth-child(5) { animation-delay: 0.5s; } document.addEventListener('DOMContentLoaded', function() { const loginForm = document.getElementById('loginForm'); const loginContainer = document.getElementById('loginContainer'); const dashboard = document.getElementById('dashboard'); const logoutBtn = document.getElementById('logout'); const tweetGrid = document.getElementById('tweetGrid'); // Sample data - in a real app this would come from an API const sampleTweets = [ { username: "elonmusk", avatar: "https://pbs.twimg.com/profile_images/1683325380441128960/yRsRRjGO_400x400.jpg", tweet: "The future of AI is exciting!", comment: "آینده هوش مصنوعی واقعاً هیجان‌انگیز است! این فناوری پتانسیل تغییر جهان را دارد." }, { username: "BillGates", avatar: "https://pbs.twimg.com/profile_images/1564398871996174336/M-hffw5a_400x400.jpg", tweet: "Working on new climate change solutions.", comment: "تلاش‌های شما در زمینه تغییرات آب‌وهوایی بسیار قابل تقدیر است. امیدوارم این راه‌حل‌ها تأثیرگذار باشند." } ]; // Login functionality loginForm.addEventListener('submit', function(e) { e.preventDefault(); const username = document.getElementById('username').value; const password = document.getElementById('password').value; if (username === 'admin' && password === 'admin') { loginContainer.style.display = 'none'; dashboard.style.display = 'block'; loadTweets(); } else { alert('نام کاربری یا رمز عبور اشتباه است'); } }); // Logout functionality logoutBtn.addEventListener('click', function() { dashboard.style.display = 'none'; loginContainer.style.display = 'block'; document.getElementById('username').value = ''; document.getElementById('password').value = ''; }); // Load tweets into the grid function loadTweets() { tweetGrid.innerHTML = ''; sampleTweets.forEach(tweet => { const tweetCard = document.createElement('div'); tweetCard.className = 'tweet-card'; tweetCard.innerHTML = `

@${tweet.username}

${tweet.tweet}

${tweet.comment}

`; tweetGrid.appendChild(tweetCard); }); } // In a real app, you would fetch data from your backend // function fetchTweets() { // fetch('/api/tweets') // .then(response => response.json()) // .then(data => { // // Process and display tweets // }) // .catch(error => console.error('Error:', error)); // } }); const express = require('express'); const bodyParser = require('body-parser'); const app = express(); app.use(bodyParser.json()); // Simple login endpoint app.post('/api/login', (req, res) => { const { username, password } = req.body; if (username === 'admin' && password === 'admin') { res.json({ success: true }); } else { res.status(401).json({ success: false, message: 'Invalid credentials' }); } }); // Webhook endpoint for Make.com to update tweets app.post('/api/webhook', (req, res) => { const tweets = req.body.tweets; // In a real app, you would save these to a database console.log('Received new tweets:', tweets); res.json({ success: true }); }); // Get tweets endpoint app.get('/api/tweets', (req, res) => { // In a real app, fetch from database const sampleTweets = [ { username: "elonmusk", avatar: "https://pbs.twimg.com/profile_images/1683325380441128960/yRsRRjGO_400x400.jpg", tweet: "The future of AI is exciting!", comment: "آینده هوش مصنوعی واقعاً هیجان‌انگیز است! این فناوری پتانسیل تغییر جهان را دارد." } ]; res.json(sampleTweets); }); const PORT = process.env.PORT || 3000; app.listen(PORT, () => { console.log(`Server running on port ${PORT}`); }); Make.com (Integromat) Configuration Instructions: 1. Google Sheets Module (Read Users) - Connect to your Google account - Select the spreadsheet containing the 16 Twitter usernames - Configure to read all rows 2. Twitter Scraping (Alternative to API) - Use HTTP module to call a scraping service like: https://nitter.net/[username]/rss - Or use a dedicated scraping tool like ScraperAPI - Configure pagination to get last 5 tweets per user 3. AI Comment Generation - For each tweet, use HTTP module to call: - OpenAI API (GPT-4) - Or another AI service like Grok - Request body should include tweet text and prompt in Persian: "Generate a positive, friendly comment in modern Persian for this tweet" 4. Data Storage - Use JSON module to format the data: { "username": "...", "tweet": "...", "comment": "..." } - Store in a database or JSON file 5. Webhook Trigger - Use HTTP module to call your dashboard's webhook: POST /api/webhook - Send the formatted data in the request body 6. Scheduling - Set the scenario to run: - On demand (via button) - Or daily at a specific time Error Handling: - Add error handling modules after each step - Configure retries for failed operations - Set up email/SMS notifications for failures

ورود به سیستم

تحلیل آخرین توییت‌ها

@${tweet.username}