Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>IPL Player Auction Price Prediction - Dilpreet's AI Model</title> | |
| <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet"> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap'); | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| :root { | |
| --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| --secondary-gradient: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); | |
| --success-gradient: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); | |
| --cricket-orange: #ff6b35; | |
| --cricket-blue: #004e89; | |
| --text-dark: #2c3e50; | |
| --text-light: #ffffff; | |
| --glass-bg: rgba(255, 255, 255, 0.15); | |
| --glass-border: rgba(255, 255, 255, 0.2); | |
| } | |
| body { | |
| font-family: 'Poppins', sans-serif; | |
| background: var(--primary-gradient); | |
| min-height: 100vh; | |
| position: relative; | |
| overflow-x: hidden; | |
| } | |
| /* Advanced Background Animation */ | |
| .animated-bg { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| z-index: -1; | |
| overflow: hidden; | |
| } | |
| .particle { | |
| position: absolute; | |
| background: rgba(255, 255, 255, 0.1); | |
| border-radius: 50%; | |
| animation: float-particles 15s infinite linear; | |
| } | |
| .particle:nth-child(odd) { | |
| background: rgba(255, 107, 53, 0.1); | |
| animation-duration: 20s; | |
| } | |
| .particle:nth-child(1) { width: 20px; height: 20px; left: 10%; animation-delay: 0s; } | |
| .particle:nth-child(2) { width: 15px; height: 15px; left: 20%; animation-delay: 2s; } | |
| .particle:nth-child(3) { width: 25px; height: 25px; left: 30%; animation-delay: 4s; } | |
| .particle:nth-child(4) { width: 18px; height: 18px; left: 40%; animation-delay: 6s; } | |
| .particle:nth-child(5) { width: 22px; height: 22px; left: 50%; animation-delay: 8s; } | |
| .particle:nth-child(6) { width: 16px; height: 16px; left: 60%; animation-delay: 10s; } | |
| .particle:nth-child(7) { width: 24px; height: 24px; left: 70%; animation-delay: 12s; } | |
| .particle:nth-child(8) { width: 19px; height: 19px; left: 80%; animation-delay: 14s; } | |
| @keyframes float-particles { | |
| 0% { | |
| transform: translateY(100vh) rotate(0deg); | |
| opacity: 0; | |
| } | |
| 10% { | |
| opacity: 1; | |
| } | |
| 90% { | |
| opacity: 1; | |
| } | |
| 100% { | |
| transform: translateY(-100px) rotate(360deg); | |
| opacity: 0; | |
| } | |
| } | |
| /* Cricket Stadium Background Effect */ | |
| .stadium-lights { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| z-index: -1; | |
| pointer-events: none; | |
| } | |
| .light-beam { | |
| position: absolute; | |
| width: 200px; | |
| height: 200px; | |
| border-radius: 50%; | |
| background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%); | |
| animation: stadium-lights 8s ease-in-out infinite alternate; | |
| } | |
| .light-beam:nth-child(1) { top: 10%; left: 15%; animation-delay: 0s; } | |
| .light-beam:nth-child(2) { top: 15%; right: 20%; animation-delay: 2s; } | |
| .light-beam:nth-child(3) { bottom: 20%; left: 25%; animation-delay: 4s; } | |
| .light-beam:nth-child(4) { bottom: 25%; right: 15%; animation-delay: 6s; } | |
| @keyframes stadium-lights { | |
| 0% { opacity: 0.3; transform: scale(1); } | |
| 100% { opacity: 0.8; transform: scale(1.2); } | |
| } | |
| /* Developer Info Card - Enhanced */ | |
| .dev-info { | |
| position: fixed; | |
| top: 25px; | |
| left: 25px; | |
| background: var(--glass-bg); | |
| backdrop-filter: blur(25px); | |
| border-radius: 20px; | |
| padding: 20px; | |
| box-shadow: 0 15px 50px rgba(0, 0, 0, 0.1); | |
| z-index: 1000; | |
| border: 1px solid var(--glass-border); | |
| transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); | |
| transform-origin: top left; | |
| } | |
| .dev-info:hover { | |
| transform: translateY(-5px) scale(1.02); | |
| box-shadow: 0 25px 60px rgba(0, 0, 0, 0.2); | |
| background: rgba(255, 255, 255, 0.25); | |
| } | |
| .dev-info h3 { | |
| color: var(--text-light); | |
| margin-bottom: 12px; | |
| font-size: 18px; | |
| font-weight: 700; | |
| text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| } | |
| .dev-info p { | |
| color: rgba(255, 255, 255, 0.9); | |
| font-size: 13px; | |
| margin: 8px 0; | |
| display: flex; | |
| align-items: center; | |
| transition: all 0.3s ease; | |
| padding: 5px; | |
| border-radius: 8px; | |
| } | |
| .dev-info p:hover { | |
| background: rgba(255, 255, 255, 0.1); | |
| transform: translateX(5px); | |
| } | |
| .dev-info a { | |
| color: #ffd700; | |
| text-decoration: none; | |
| transition: all 0.3s ease; | |
| font-weight: 500; | |
| } | |
| .dev-info a:hover { | |
| color: #fff; | |
| text-shadow: 0 0 10px #ffd700; | |
| } | |
| .icon { | |
| margin-right: 10px; | |
| width: 16px; | |
| height: 16px; | |
| filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3)); | |
| } | |
| /* Main Container - Enhanced */ | |
| .container { | |
| position: relative; | |
| z-index: 10; | |
| max-width: 700px; | |
| margin: 0 auto; | |
| padding: 50px 20px; | |
| min-height: 100vh; | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: center; | |
| } | |
| .main-card { | |
| background: var(--glass-bg); | |
| backdrop-filter: blur(30px); | |
| border-radius: 30px; | |
| padding: 50px; | |
| box-shadow: 0 25px 80px rgba(0, 0, 0, 0.15); | |
| border: 1px solid var(--glass-border); | |
| animation: slideUp 1s cubic-bezier(0.175, 0.885, 0.32, 1.275); | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .main-card::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: -100%; | |
| width: 100%; | |
| height: 100%; | |
| background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent); | |
| animation: card-shimmer 3s infinite; | |
| } | |
| @keyframes card-shimmer { | |
| 0% { left: -100%; } | |
| 50% { left: -100%; } | |
| 100% { left: 100%; } | |
| } | |
| @keyframes slideUp { | |
| from { | |
| opacity: 0; | |
| transform: translateY(100px) scale(0.8); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0) scale(1); | |
| } | |
| } | |
| /* Header Section */ | |
| .header-section { | |
| text-align: center; | |
| margin-bottom: 40px; | |
| position: relative; | |
| } | |
| h1 { | |
| font-size: 3.5rem; | |
| font-weight: 800; | |
| background: linear-gradient(135deg, #fff, #ffd700, #ff6b35); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| margin-bottom: 15px; | |
| text-shadow: 0 5px 20px rgba(0, 0, 0, 0.3); | |
| animation: glow 2s ease-in-out infinite alternate; | |
| position: relative; | |
| } | |
| @keyframes glow { | |
| from { filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.5)); } | |
| to { filter: drop-shadow(0 0 20px rgba(255, 215, 0, 0.8)); } | |
| } | |
| .subtitle { | |
| color: rgba(255, 255, 255, 0.9); | |
| font-size: 1.3rem; | |
| font-weight: 400; | |
| margin-bottom: 20px; | |
| text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); | |
| } | |
| .cricket-stats { | |
| display: flex; | |
| justify-content: center; | |
| gap: 30px; | |
| margin: 20px 0; | |
| flex-wrap: wrap; | |
| } | |
| .stat-item { | |
| background: rgba(255, 255, 255, 0.1); | |
| padding: 12px 20px; | |
| border-radius: 15px; | |
| backdrop-filter: blur(10px); | |
| border: 1px solid rgba(255, 255, 255, 0.2); | |
| transition: all 0.3s ease; | |
| } | |
| .stat-item:hover { | |
| transform: translateY(-3px); | |
| background: rgba(255, 255, 255, 0.2); | |
| box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); | |
| } | |
| .stat-item i { | |
| color: #ffd700; | |
| margin-right: 8px; | |
| font-size: 1.2rem; | |
| } | |
| .stat-item span { | |
| color: white; | |
| font-weight: 600; | |
| } | |
| /* Form Styling - Enhanced */ | |
| .form-container { | |
| position: relative; | |
| } | |
| .form-group { | |
| margin-bottom: 30px; | |
| position: relative; | |
| } | |
| .form-group label { | |
| display: block; | |
| margin-bottom: 12px; | |
| color: var(--text-light); | |
| font-weight: 600; | |
| font-size: 1.1rem; | |
| text-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| } | |
| .form-group label i { | |
| color: #ffd700; | |
| font-size: 1.3rem; | |
| filter: drop-shadow(0 0 5px #ffd700); | |
| } | |
| .input-wrapper { | |
| position: relative; | |
| } | |
| input[type="number"] { | |
| width: 100%; | |
| padding: 18px 25px; | |
| border: 2px solid rgba(255, 255, 255, 0.3); | |
| border-radius: 20px; | |
| font-size: 1.1rem; | |
| font-weight: 500; | |
| background: rgba(255, 255, 255, 0.1); | |
| color: white; | |
| backdrop-filter: blur(10px); | |
| transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); | |
| box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.1); | |
| } | |
| input[type="number"]::placeholder { | |
| color: rgba(255, 255, 255, 0.6); | |
| font-weight: 400; | |
| } | |
| input[type="number"]:focus { | |
| outline: none; | |
| border-color: #ffd700; | |
| background: rgba(255, 255, 255, 0.2); | |
| box-shadow: | |
| inset 0 2px 10px rgba(0, 0, 0, 0.1), | |
| 0 0 25px rgba(255, 215, 0, 0.3), | |
| 0 5px 20px rgba(0, 0, 0, 0.2); | |
| transform: translateY(-2px); | |
| } | |
| .input-icon { | |
| position: absolute; | |
| right: 20px; | |
| top: 50%; | |
| transform: translateY(-50%); | |
| color: rgba(255, 255, 255, 0.5); | |
| font-size: 1.2rem; | |
| transition: all 0.3s ease; | |
| } | |
| input[type="number"]:focus + .input-icon { | |
| color: #ffd700; | |
| filter: drop-shadow(0 0 5px #ffd700); | |
| } | |
| /* Button Styling - Enhanced */ | |
| .predict-btn { | |
| width: 100%; | |
| padding: 20px; | |
| background: linear-gradient(135deg, #ff6b35, #f7931e, #ffd700); | |
| color: white; | |
| border: none; | |
| border-radius: 20px; | |
| font-size: 1.3rem; | |
| font-weight: 700; | |
| cursor: pointer; | |
| transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); | |
| box-shadow: | |
| 0 10px 30px rgba(255, 107, 53, 0.4), | |
| inset 0 1px 0 rgba(255, 255, 255, 0.2); | |
| position: relative; | |
| overflow: hidden; | |
| text-transform: uppercase; | |
| letter-spacing: 1px; | |
| text-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); | |
| } | |
| .predict-btn::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: -100%; | |
| width: 100%; | |
| height: 100%; | |
| background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent); | |
| transition: left 0.6s ease; | |
| } | |
| .predict-btn:hover::before { | |
| left: 100%; | |
| } | |
| .predict-btn:hover { | |
| transform: translateY(-5px) scale(1.02); | |
| box-shadow: | |
| 0 20px 50px rgba(255, 107, 53, 0.6), | |
| inset 0 1px 0 rgba(255, 255, 255, 0.3); | |
| background: linear-gradient(135deg, #ff8a65, #ffb74d, #fff176); | |
| } | |
| .predict-btn:active { | |
| transform: translateY(-2px) scale(1.01); | |
| } | |
| .predict-btn i { | |
| margin-right: 10px; | |
| font-size: 1.4rem; | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0% { transform: scale(1); } | |
| 50% { transform: scale(1.1); } | |
| 100% { transform: scale(1); } | |
| } | |
| /* Result Display - Enhanced */ | |
| .result { | |
| margin-top: 40px; | |
| padding: 30px; | |
| background: var(--success-gradient); | |
| color: white; | |
| border-radius: 25px; | |
| text-align: center; | |
| box-shadow: | |
| 0 15px 40px rgba(79, 172, 254, 0.4), | |
| inset 0 1px 0 rgba(255, 255, 255, 0.2); | |
| animation: resultSlide 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275); | |
| border: 2px solid rgba(255, 255, 255, 0.2); | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .result::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.1) 50%, transparent 70%); | |
| animation: result-shine 2s infinite; | |
| } | |
| @keyframes result-shine { | |
| 0% { transform: translateX(-100%); } | |
| 100% { transform: translateX(100%); } | |
| } | |
| @keyframes resultSlide { | |
| from { | |
| opacity: 0; | |
| transform: scale(0.5) rotate(-10deg); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: scale(1) rotate(0deg); | |
| } | |
| } | |
| .result h2 { | |
| font-size: 1.8rem; | |
| font-weight: 700; | |
| margin: 0; | |
| text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); | |
| position: relative; | |
| z-index: 1; | |
| } | |
| .result .result-icon { | |
| font-size: 2.5rem; | |
| margin-bottom: 15px; | |
| animation: bounce 1s infinite; | |
| display: block; | |
| } | |
| @keyframes bounce { | |
| 0%, 20%, 50%, 80%, 100% { transform: translateY(0); } | |
| 40% { transform: translateY(-10px); } | |
| 60% { transform: translateY(-5px); } | |
| } | |
| /* Cricket Decorations - Enhanced */ | |
| .cricket-decoration { | |
| position: absolute; | |
| font-size: 4rem; | |
| opacity: 0.1; | |
| animation: float-decoration 8s ease-in-out infinite; | |
| z-index: 1; | |
| } | |
| .cricket-decoration:nth-child(1) { | |
| top: 10%; | |
| right: 5%; | |
| color: #ffd700; | |
| animation-delay: 0s; | |
| } | |
| .cricket-decoration:nth-child(2) { | |
| bottom: 15%; | |
| left: 5%; | |
| color: #ff6b35; | |
| animation-delay: 2s; | |
| } | |
| .cricket-decoration:nth-child(3) { | |
| top: 50%; | |
| right: 2%; | |
| color: #4facfe; | |
| animation-delay: 4s; | |
| } | |
| @keyframes float-decoration { | |
| 0%, 100% { | |
| transform: translateY(0px) rotate(0deg); | |
| opacity: 0.1; | |
| } | |
| 50% { | |
| transform: translateY(-20px) rotate(180deg); | |
| opacity: 0.2; | |
| } | |
| } | |
| /* Loading Animation */ | |
| .loading { | |
| background: linear-gradient(135deg, #667eea, #764ba2) ; | |
| position: relative; | |
| } | |
| .loading::after { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent); | |
| animation: loading-shimmer 1.5s infinite; | |
| } | |
| @keyframes loading-shimmer { | |
| 0% { transform: translateX(-100%); } | |
| 100% { transform: translateX(100%); } | |
| } | |
| /* Responsive Design - Enhanced */ | |
| @media (max-width: 768px) { | |
| .dev-info { | |
| position: relative; | |
| margin: 20px; | |
| transform: none; | |
| } | |
| .dev-info:hover { | |
| transform: translateY(-2px) scale(1.01); | |
| } | |
| .container { | |
| padding: 30px 15px; | |
| } | |
| .main-card { | |
| padding: 30px 25px; | |
| } | |
| h1 { | |
| font-size: 2.5rem; | |
| } | |
| .subtitle { | |
| font-size: 1.1rem; | |
| } | |
| .cricket-stats { | |
| gap: 15px; | |
| } | |
| .stat-item { | |
| padding: 8px 15px; | |
| } | |
| .cricket-decoration { | |
| display: none; | |
| } | |
| } | |
| @media (max-width: 480px) { | |
| h1 { | |
| font-size: 2rem; | |
| } | |
| .main-card { | |
| padding: 25px 20px; | |
| } | |
| .cricket-stats { | |
| flex-direction: column; | |
| align-items: center; | |
| gap: 10px; | |
| } | |
| } | |
| /* Success/Error States */ | |
| .success-state { | |
| animation: successPulse 0.6s ease-out; | |
| } | |
| @keyframes successPulse { | |
| 0% { transform: scale(1); } | |
| 50% { transform: scale(1.05); } | |
| 100% { transform: scale(1); } | |
| } | |
| .error-state { | |
| background: linear-gradient(135deg, #ff6b6b, #ee5a52) ; | |
| animation: errorShake 0.6s ease-out; | |
| } | |
| @keyframes errorShake { | |
| 0%, 100% { transform: translateX(0); } | |
| 25% { transform: translateX(-10px); } | |
| 75% { transform: translateX(10px); } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Animated Background --> | |
| <div class="animated-bg"> | |
| <div class="particle"></div> | |
| <div class="particle"></div> | |
| <div class="particle"></div> | |
| <div class="particle"></div> | |
| <div class="particle"></div> | |
| <div class="particle"></div> | |
| <div class="particle"></div> | |
| <div class="particle"></div> | |
| </div> | |
| <!-- Stadium Lights Effect --> | |
| <div class="stadium-lights"> | |
| <div class="light-beam"></div> | |
| <div class="light-beam"></div> | |
| <div class="light-beam"></div> | |
| <div class="light-beam"></div> | |
| </div> | |
| <!-- Developer Info Card --> | |
| <div class="dev-info"> | |
| <h3><i class="fas fa-code"></i>Developer Info</h3> | |
| <p> | |
| <i class="fas fa-user icon"></i> | |
| Dilpreet | |
| </p> | |
| <p> | |
| <i class="fas fa-phone icon"></i> | |
| 8544817896 | |
| </p> | |
| <p> | |
| <i class="fas fa-envelope icon"></i> | |
| dilpreetballi62@gmail.com | |
| </p> | |
| <p> | |
| <i class="fab fa-google icon"></i> | |
| <a href="https://colab.research.google.com/drive/1XGHL6GFy5HOiKZeleHQ2QMeVcfJlihye?usp=sharing" target="_blank"> | |
| Colab Notebook | |
| </a> | |
| </p> | |
| </div> | |
| <!-- Main Container --> | |
| <div class="container"> | |
| <!-- Cricket Decorations --> | |
| <div class="cricket-decoration"><i class="fas fa-baseball-ball"></i></div> | |
| <div class="cricket-decoration"><i class="fas fa-trophy"></i></div> | |
| <div class="cricket-decoration"><i class="fas fa-medal"></i></div> | |
| <div class="main-card"> | |
| <!-- Header Section --> | |
| <div class="header-section"> | |
| <h1>🏏 IPL PREDICTOR</h1> | |
| <p class="subtitle">AI-Powered Cricket Analytics & Player Performance Prediction</p> | |
| <div class="cricket-stats"> | |
| <div class="stat-item"> | |
| <i class="fas fa-brain"></i> | |
| <span>ML Powered</span> | |
| </div> | |
| <div class="stat-item"> | |
| <i class="fas fa-chart-line"></i> | |
| <span>Real-time</span> | |
| </div> | |
| <div class="stat-item"> | |
| <i class="fas fa-accuracy"></i> | |
| <span>High Accuracy</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Prediction Form --> | |
| <div class="form-container"> | |
| <form action="/predict" method="POST" id="predictionForm"> | |
| <div class="form-group"> | |
| <label for="unnamed"> | |
| <i class="fas fa-chart-bar"></i> | |
| Player Performance Metric | |
| </label> | |
| <div class="input-wrapper"> | |
| <input type="number" step="any" name="unnamed" id="unnamed" | |
| placeholder="Enter performance value..." required> | |
| <i class="fas fa-chart-line input-icon"></i> | |
| </div> | |
| </div> | |
| <div class="form-group"> | |
| <label for="price"> | |
| <i class="fas fa-rupee-sign"></i> | |
| Player Price (in Crores) | |
| </label> | |
| <div class="input-wrapper"> | |
| <input type="number" step="any" name="price" id="price" | |
| placeholder="Enter price in crores..." required> | |
| <i class="fas fa-money-bill-wave input-icon"></i> | |
| </div> | |
| </div> | |
| <button type="submit" class="predict-btn" id="predictBtn"> | |
| <i class="fas fa-magic"></i> | |
| Generate Prediction | |
| </button> | |
| </form> | |
| </div> | |
| <!-- Results Section --> | |
| {% if prediction_text %} | |
| <div class="result" id="resultSection"> | |
| <i class="fas fa-trophy result-icon"></i> | |
| <h2>{{ prediction_text }}</h2> | |
| </div> | |
| {% endif %} | |
| </div> | |
| </div> | |
| <script> | |
| // Enhanced JavaScript for better interactivity | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const form = document.getElementById('predictionForm'); | |
| const inputs = document.querySelectorAll('input[type="number"]'); | |
| const predictBtn = document.getElementById('predictBtn'); | |
| // Input Animation Effects | |
| inputs.forEach(input => { | |
| input.addEventListener('focus', function() { | |
| this.parentElement.parentElement.classList.add('focused'); | |
| this.style.transform = 'scale(1.02)'; | |
| }); | |
| input.addEventListener('blur', function() { | |
| this.parentElement.parentElement.classList.remove('focused'); | |
| this.style.transform = 'scale(1)'; | |
| }); | |
| input.addEventListener('input', function() { | |
| if (this.value) { | |
| this.style.borderColor = '#4facfe'; | |
| this.style.background = 'rgba(79, 172, 254, 0.1)'; | |
| } else { | |
| this.style.borderColor = 'rgba(255, 255, 255, 0.3)'; | |
| this.style.background = 'rgba(255, 255, 255, 0.1)'; | |
| } | |
| }); | |
| }); | |
| // Form Submission with Loading Animation | |
| form.addEventListener('submit', function(e) { | |
| predictBtn.classList.add('loading'); | |
| predictBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Analyzing Data...'; | |
| predictBtn.disabled = true; | |
| // Add processing animation to form | |
| const formContainer = document.querySelector('.form-container'); | |
| formContainer.style.filter = 'blur(2px)'; | |
| formContainer.style.opacity = '0.7'; | |
| }); | |
| // Particle Effect on Click | |
| predictBtn.addEventListener('click', function(e) { | |
| createParticleEffect(e.clientX, e.clientY); | |
| }); | |
| function createParticleEffect(x, y) { | |
| for (let i = 0; i < 10; i++) { | |
| const particle = document.createElement('div'); | |
| particle.style.position = 'fixed'; | |
| particle.style.width = '6px'; | |
| particle.style.height = '6px'; | |
| particle.style.background = '#ffd700'; | |
| particle.style.borderRadius = '50%'; | |
| particle.style.left = x + 'px'; | |
| particle.style.top = y + 'px'; | |
| particle.style.zIndex = '10000'; | |
| particle.style.pointerEvents = 'none'; | |
| document.body.appendChild(particle); | |
| const angle = (Math.PI * 2 * i) / 10; | |
| const velocity = 50 + Math.random() * 50; | |
| particle.animate([ | |
| { | |
| transform: 'translate(0, 0) scale(1)', | |
| opacity: 1 | |
| }, | |
| { | |
| transform: `translate(${Math.cos(angle) * velocity}px, ${Math.sin(angle) * velocity}px) scale(0)`, | |
| opacity: 0 | |
| } | |
| ], { | |
| duration: 800, | |
| easing: 'cubic-bezier(0.25, 0.46, 0.45, 0.94)' | |
| }).onfinish = () => particle.remove(); | |
| } | |
| } | |
| // Smooth scroll for mobile | |
| if (window.innerWidth <= 768) { | |
| const devInfo = | |