| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Twitter Sentiment Analysis</title> |
| <style> |
| * { |
| margin: 0; |
| padding: 0; |
| box-sizing: border-box; |
| } |
| |
| body { |
| font-family: 'Segoe UI', Arial, sans-serif; |
| margin: 0; |
| padding: 0; |
| color: #fff; |
| display: flex; |
| justify-content: center; |
| align-items: center; |
| min-height: 100vh; |
| background: #070b34; |
| overflow: hidden; |
| position: relative; |
| } |
| |
| .background-container { |
| position: absolute; |
| top: 0; |
| left: 0; |
| width: 100%; |
| height: 100%; |
| z-index: 0; |
| overflow: hidden; |
| } |
| |
| .particle { |
| position: absolute; |
| border-radius: 50%; |
| background: rgba(100, 200, 255, 0.5); |
| animation: float 15s infinite linear; |
| } |
| |
| @keyframes float { |
| 0% { |
| transform: translateY(100vh) translateX(0); |
| opacity: 0; |
| } |
| 10% { |
| opacity: 1; |
| } |
| 90% { |
| opacity: 1; |
| } |
| 100% { |
| transform: translateY(-20vh) translateX(20vw); |
| opacity: 0; |
| } |
| } |
| |
| .grid { |
| position: absolute; |
| width: 200%; |
| height: 200%; |
| top: -50%; |
| left: -50%; |
| background-image: |
| linear-gradient(rgba(50, 130, 255, 0.1) 1px, transparent 1px), |
| linear-gradient(90deg, rgba(50, 130, 255, 0.1) 1px, transparent 1px); |
| background-size: 20px 20px; |
| transform: perspective(500px) rotateX(60deg); |
| animation: grid-animation 20s infinite linear; |
| } |
| |
| @keyframes grid-animation { |
| 0% { |
| transform: perspective(500px) rotateX(60deg) translateY(0); |
| } |
| 100% { |
| transform: perspective(500px) rotateX(60deg) translateY(20px); |
| } |
| } |
| |
| .container { |
| background: rgba(15, 23, 42, 0.8); |
| -webkit-backdrop-filter: blur(10px); |
| backdrop-filter: blur(10px); |
| padding: 30px; |
| border-radius: 16px; |
| box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2), |
| 0 0 0 1px rgba(255, 255, 255, 0.1), |
| 0 0 40px rgba(58, 130, 246, 0.4); |
| max-width: 500px; |
| width: 100%; |
| position: relative; |
| z-index: 10; |
| border: 1px solid rgba(80, 150, 255, 0.3); |
| } |
| |
| h1 { |
| text-align: center; |
| color: #fff; |
| margin-bottom: 20px; |
| font-size: 28px; |
| text-shadow: 0 0 10px rgba(80, 150, 255, 0.5); |
| position: relative; |
| } |
| |
| h1::after { |
| content: ''; |
| position: absolute; |
| bottom: -10px; |
| left: 50%; |
| transform: translateX(-50%); |
| width: 80px; |
| height: 3px; |
| background: linear-gradient(90deg, #3b82f6, #60a5fa); |
| border-radius: 3px; |
| } |
| |
| form { |
| display: flex; |
| flex-direction: column; |
| } |
| |
| textarea { |
| resize: none; |
| padding: 15px; |
| margin-bottom: 20px; |
| border: 1px solid rgba(80, 150, 255, 0.3); |
| border-radius: 8px; |
| font-size: 16px; |
| width: 100%; |
| height: 120px; |
| background: rgba(15, 23, 42, 0.5); |
| color: #fff; |
| transition: all 0.3s ease; |
| box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1); |
| } |
| |
| textarea:focus { |
| outline: none; |
| border-color: #3b82f6; |
| box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3); |
| } |
| |
| textarea::placeholder { |
| color: rgba(255, 255, 255, 0.5); |
| } |
| |
| button { |
| background: linear-gradient(45deg, #3b82f6, #60a5fa); |
| color: white; |
| border: none; |
| padding: 12px; |
| border-radius: 8px; |
| font-size: 16px; |
| font-weight: 600; |
| cursor: pointer; |
| transition: all 0.3s ease; |
| position: relative; |
| overflow: hidden; |
| z-index: 1; |
| } |
| |
| button::before { |
| content: ''; |
| position: absolute; |
| top: 0; |
| left: -100%; |
| width: 100%; |
| height: 100%; |
| background: linear-gradient(45deg, #60a5fa, #93c5fd); |
| transition: all 0.4s ease; |
| z-index: -1; |
| } |
| |
| button:hover::before { |
| left: 0; |
| } |
| |
| button:hover { |
| transform: translateY(-2px); |
| box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); |
| } |
| |
| .result { |
| margin-top: 20px; |
| padding: 15px; |
| border: 1px solid rgba(80, 150, 255, 0.3); |
| background: rgba(15, 23, 42, 0.5); |
| border-radius: 8px; |
| transition: all 0.3s ease; |
| } |
| |
| .typing-effect::after { |
| content: '|'; |
| animation: blink 1s infinite; |
| } |
| |
| @keyframes blink { |
| 0%, 100% { opacity: 1; } |
| 50% { opacity: 0; } |
| } |
| |
| .glow { |
| position: absolute; |
| width: 150px; |
| height: 150px; |
| border-radius: 50%; |
| background: radial-gradient(circle, rgba(59, 130, 246, 0.2) 0%, rgba(59, 130, 246, 0) 70%); |
| pointer-events: none; |
| mix-blend-mode: screen; |
| z-index: 5; |
| transition: all 0.3s ease; |
| } |
| </style> |
| </head> |
| <body> |
| <div class="background-container"> |
| <div class="grid"></div> |
| </div> |
| |
| <div class="container"> |
| <h1>Twitter Sentiment Analysis</h1> |
| <form action="/predict" method="post"> |
| <textarea name="user_input" placeholder="Enter your tweet here..." required>{{ user_text | default('') }}</textarea> |
| <button type="submit">Analyze Sentiment</button> |
| </form> |
| {% if prediction_text %} |
| <div class="result"> |
| <strong class="typing-effect">{{ prediction_text }}</strong> |
| </div> |
| {% endif %} |
| </div> |
| |
| <div class="glow"></div> |
| |
| <script> |
| |
| const backgroundContainer = document.querySelector('.background-container'); |
| for (let i = 0; i < 20; i++) { |
| const particle = document.createElement('div'); |
| particle.classList.add('particle'); |
| |
| |
| const size = Math.random() * 15 + 5; |
| particle.style.width = `${size}px`; |
| particle.style.height = `${size}px`; |
| |
| |
| particle.style.left = `${Math.random() * 100}vw`; |
| particle.style.bottom = '0'; |
| |
| |
| const duration = Math.random() * 15 + 10; |
| particle.style.animationDuration = `${duration}s`; |
| |
| |
| const delay = Math.random() * 5; |
| particle.style.animationDelay = `${delay}s`; |
| |
| backgroundContainer.appendChild(particle); |
| } |
| |
| |
| const resultElement = document.querySelector('.typing-effect'); |
| if (resultElement) { |
| const text = resultElement.textContent; |
| resultElement.textContent = ''; |
| let i = 0; |
| |
| function typeWriter() { |
| if (i < text.length) { |
| resultElement.textContent += text.charAt(i); |
| i++; |
| setTimeout(typeWriter, 50); |
| } |
| } |
| |
| typeWriter(); |
| } |
| |
| |
| document.addEventListener('mousemove', (e) => { |
| const glow = document.querySelector('.glow'); |
| glow.style.left = `${e.clientX}px`; |
| glow.style.top = `${e.clientY}px`; |
| }); |
| |
| |
| const button = document.querySelector('button'); |
| button.addEventListener('mouseenter', () => { |
| button.style.transform = 'translateY(-2px)'; |
| }); |
| |
| button.addEventListener('mouseleave', () => { |
| button.style.transform = 'translateY(0)'; |
| }); |
| </script> |
| </body> |
| </html> |
