please change everything like design and everything by look make my project look absolute amazing and professional and keep the backend work intact and please make it look realistic and kinda cool , so this project stand out from other project that was there in other candidate resume , you are free to change the design what so ever and change the entity of this project like new design new font new voice new animation new message , and keep in mind if if i click on predict it must show the beautiful message weather we should give insaurance or not , and you can add multiple pages you are free to do any thing at front end side , you are inspired by lots of different design all over the internet so please make this project an state of art project and please i have made 4 different files for html,css,js , app.py so be like that you also have to create 4 different so it can integrate with my project seamlessly and nicely ,you can make my front inspired by nature if you want to add image free to do so and other change as you like , rewrite the whole new code for me
my html ->"
InsuranceIQ - AI-Powered Vehicle Insurance Predictor<!-- Floating particles -->
<div class="particles-container" id="particlesContainer"></div>
<!-- Holographic Elements -->
<div class="holographic-grid"></div>
<!-- Cyber cursor -->
<div class="cyber-cursor" id="cyberCursor">
<div class="cursor-core"></div>
<div class="cursor-ring"></div>
</div>
<!-- Background Audio Toggle -->
<div class="audio-toggle" id="audioToggle">
<i class="fas fa-volume-up" id="audioIcon"></i>
</div>
<!-- Main Container -->
<div class="main-container">
<!-- Hero Section -->
<div class="hero-section">
<div class="logo-container">
<div class="logo-hologram">
<i class="fas fa-brain"></i>
</div>
<h1 class="main-title">
<span class="title-main">Insurance</span>
<span class="title-accent">IQ</span>
</h1>
<div class="subtitle-container">
<p class="subtitle typing-text" id="subtitleText"></p>
<div class="pulse-indicator"></div>
</div>
</div>
</div>
<!-- Stats Counter -->
<div class="stats-container">
<div class="stat-item">
<div class="stat-number" data-target="127849">0</div>
<div class="stat-label">Predictions Made</div>
</div>
<div class="stat-item">
<div class="stat-number" data-target="98.7">0</div>
<div class="stat-label">% Accuracy</div>
</div>
<div class="stat-item">
<div class="stat-number" data-target="1247">0</div>
<div class="stat-label">Happy Clients</div>
</div>
</div>
<!-- Fortune Cookie Messages -->
<div class="fortune-container" id="fortuneContainer">
<div class="fortune-message" id="fortuneMessage">
<i class="fas fa-quote-left"></i>
<span id="fortuneText">Your future insurance needs are written in data...</span>
<i class="fas fa-quote-right"></i>
</div>
</div>
<!-- Neural Network Visualization -->
<div class="neural-network" id="neuralNetwork">
<canvas id="networkCanvas"></canvas>
<div class="network-status">
<span class="status-dot"></span>
<span>AI Neural Network Active</span>
</div>
</div>
<!-- Form Container -->
<div class="form-container-wrapper">
<div class="form-header">
<h2>
<i class="fas fa-robot"></i>
Let AI Predict Your Insurance Future
</h2>
<p class="form-description">
Our advanced machine learning algorithm analyzes millions of data points to predict your insurance likelihood with incredible precision. Experience the future of insurance today.
</p>
</div>
<form method="post" action="/" id="predictionForm" class="cyber-form">
<div class="form-grid">
<!-- Personal Information Section -->
<div class="form-section">
<h3 class="section-title">
<span class="section-icon"><i class="fas fa-user-circle"></i></span>
Personal Profile
</h3>
<div class="form-group">
<label for="Gender" class="cyber-label">
<i class="fas fa-venus-mars"></i>
<span>Gender Identity</span>
<div class="label-glow"></div>
</label>
<div class="select-wrapper">
<select id="Gender" name="Gender" required class="cyber-select">
<option value="">Select Your Gender</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
<div class="select-arrow">
<i class="fas fa-chevron-down"></i>
</div>
</div>
<div class="field-particles"></div>
</div>
<div class="form-group">
<label for="Age" class="cyber-label">
<i class="fas fa-birthday-cake"></i>
<span>Age Matrix</span>
<div class="label-glow"></div>
</label>
<input type="number" id="Age" name="Age" required
placeholder="Enter your age" min="18" max="100" class="cyber-input">
<div class="input-trail"></div>
</div>
<div class="form-group">
<label for="Driving_License" class="cyber-label">
<i class="fas fa-id-card"></i>
<span>License Authorization</span>
<div class="label-glow"></div>
</label>
<div class="toggle-wrapper">
<input type="hidden" id="Driving_License" name="Driving_License" value="0">
<div class="cyber-toggle" id="licenseToggle">
<div class="toggle-slider"></div>
<span class="toggle-text-off">No License</span>
<span class="toggle-text-on">Licensed</span>
</div>
</div>
</div>
</div>
<!-- Location & History Section -->
<div class="form-section">
<h3 class="section-title">
<span class="section-icon"><i class="fas fa-map-marker-alt"></i></span>
Location & History
</h3>
<div class="form-group">
<label for="Region_Code" class="cyber-label">
<i class="fas fa-globe-americas"></i>
<span>Region Code</span>
<div class="label-glow"></div>
</label>
<input type="number" step="0.01" id="Region_Code" name="Region_Code" required
placeholder="Geographic region identifier" class="cyber-input">
<div class="input-trail"></div>
</div>
<div class="form-group">
<label for="Previously_Insured" class="cyber-label">
<i class="fas fa-shield-alt"></i>
<span>Insurance History</span>
<div class="label-glow"></div>
</label>
<div class="toggle-wrapper">
<input type="hidden" id="Previously_Insured" name="Previously_Insured" value="0">
<div class="cyber-toggle" id="insuranceToggle">
<div class="toggle-slider"></div>
<span class="toggle-text-off">First Time</span>
<span class="toggle-text-on">Previously Insured</span>
</div>
</div>
</div>
<div class="form-group">
<label for="Vintage" class="cyber-label">
<i class="fas fa-clock"></i>
<span>Customer Vintage (Days)</span>
<div class="label-glow"></div>
</label>
<input type="number" id="Vintage" name="Vintage" required
placeholder="Days as customer" class="cyber-input">
<div class="input-trail"></div>
</div>
</div>
<!-- Financial & Policy Section -->
<div class="form-section">
<h3 class="section-title">
<span class="section-icon"><i class="fas fa-dollar-sign"></i></span>
Financial Matrix
</h3>
<div class="form-group">
<label for="Annual_Premium" class="cyber-label">
<i class="fas fa-money-bill-wave"></i>
<span>Annual Premium Value</span>
<div class="label-glow"></div>
</label>
<input type="number" step="0.01" id="Annual_Premium" name="Annual_Premium" required
placeholder="Premium amount" class="cyber-input">
<div class="input-trail"></div>
<div class="premium-indicator" id="premiumIndicator">
<span class="indicator-text">Premium Level: <span id="premiumLevel">Standard</span></span>
</div>
</div>
<div class="form-group">
<label for="Policy_Sales_Channel" class="cyber-label">
<i class="fas fa-shopping-cart"></i>
<span>Sales Channel ID</span>
<div class="label-glow"></div>
</label>
<input type="number" step="0.01" id="Policy_Sales_Channel" name="Policy_Sales_Channel" required
placeholder="Channel identifier" class="cyber-input">
<div class="input-trail"></div>
</div>
</div>
<!-- Vehicle Information Section -->
<div class="form-section">
<h3 class="section-title">
<span class="section-icon"><i class="fas fa-car"></i></span>
Vehicle Profile
</h3>
<div class="form-group">
<label for="Vehicle_Age" class="cyber-label">
<i class="fas fa-car-side"></i>
<span>Vehicle Age Category</span>
<div class="label-glow"></div>
</label>
<div class="select-wrapper">
<select id="Vehicle_Age" name="Vehicle_Age" required class="cyber-select">
<option value="">Select Vehicle Age</option>
<option value="< 1 Year">๐ Brand New (< 1 Year)</option>
<option value="1-2 Year">๐ Recent (1-2 Years)</option>
<option value="> 2 Years">๐ Mature (> 2 Years)</option>
</select>
<div class="select-arrow">
<i class="fas fa-chevron-down"></i>
</div>
</div>
</div>
<div class="form-group">
<label for="Vehicle_Damage" class="cyber-label">
<i class="fas fa-tools"></i>
<span>Damage History</span>
<div class="label-glow"></div>
</label>
<div class="damage-selector">
<input type="hidden" id="Vehicle_Damage" name="Vehicle_Damage" value="">
<div class="damage-option" data-value="No">
<div class="damage-icon">
<i class="fas fa-shield-check"></i>
</div>
<span>Pristine</span>
</div>
<div class="damage-option" data-value="Yes">
<div class="damage-icon">
<i class="fas fa-exclamation-triangle"></i>
</div>
<span>Has Damage</span>
</div>
</div>
</div>
</div>
</div>
<!-- Action Buttons -->
<div class="action-section">
<div class="ai-status">
<div class="ai-indicator">
<div class="ai-pulse"></div>
<span>AI Ready</span>
</div>
</div>
<div class="button-group">
<button type="submit" class="cyber-btn cyber-btn-primary" id="predictBtn">
<div class="btn-bg"></div>
<div class="btn-content">
<i class="fas fa-brain"></i>
<span>Activate AI Prediction</span>
</div>
<div class="btn-particles"></div>
</button>
<button type="button" class="cyber-btn cyber-btn-secondary" id="trainBtn">
<div class="btn-bg"></div>
<div class="btn-content">
<i class="fas fa-cogs"></i>
<span>Train Neural Network</span>
</div>
<div class="btn-particles"></div>
</button>
</div>
</div>
</form>
</div>
<!-- Enhanced Result Display -->
{% if context and context != "Rendering" %}
<div class="result-container" id="resultContainer">
<div class="result-header">
<h2>
<i class="fas fa-robot"></i>
AI Insurance Recommendation
</h2>
<div class="result-badge {% if 'Yes' in context %}recommended{% else %}not-recommended{% endif %}">
{% if 'Yes' in context %}
<i class="fas fa-check-circle"></i>
INSURANCE APPROVED
{% else %}
<i class="fas fa-times-circle"></i>
INSURANCE NOT RECOMMENDED
{% endif %}
</div>
</div>
<div class="result-content">
<div class="result-visual">
{% if "Yes" in context %}
<div class="result-icon positive">
<div class="icon-wrapper">
<i class="fas fa-shield-check"></i>
</div>
<div class="pulse-ring"></div>
</div>
<div class="result-message positive">
<h3>โ
Insurance Approved</h3>
<p class="decision-text">Based on our AI analysis, we're pleased to recommend insurance coverage for this vehicle.</p>
<div class="decision-reasons">
<h4>Why we recommend:</h4>
<ul>
<li><i class="fas fa-check"></i> Favorable risk profile detected</li>
<li><i class="fas fa-check"></i> Strong eligibility indicators</li>
<li><i class="fas fa-check"></i> Meets underwriting criteria</li>
</ul>
</div>
<div class="next-steps">
<p><strong>Next Step:</strong> Proceed with policy issuance</p>
</div>
</div>
{% else %}
<div class="result-icon negative">
<div class="icon-wrapper">
<i class="fas fa-shield-alt"></i>
</div>
<div class="pulse-ring"></div>
</div>
<div class="result-message negative">
<h3>โ Insurance Not Recommended</h3>
<p class="decision-text">Our AI analysis indicates this vehicle doesn't meet current underwriting criteria.</p>
<div class="decision-reasons">
<h4>Primary factors:</h4>
<ul>
<li><i class="fas fa-info-circle"></i> Higher risk profile detected</li>
<li><i class="fas fa-info-circle"></i> Does not meet eligibility requirements</li>
<li><i class="fas fa-info-circle"></i> Review recommended in 6 months</li>
</ul>
</div>
<div class="next-steps">
<p><strong>Alternative:</strong> Consider basic liability coverage or reassess later</p>
</div>
</div>
{% endif %}
</div>
<div class="result-stats">
<div class="confidence-card">
<h4>AI Confidence Level</h4>
<div class="confidence-meter">
<div class="meter-labels">
<span>Low</span>
<span>High</span>
</div>
<div class="meter">
<div class="meter-fill" style="width: {% if 'Yes' in context %}87%{% else %}23%{% endif %}"></div>
</div>
<div class="confidence-percentage">
<span class="percentage">{% if 'Yes' in context %}87%{% else %}23%{% endif %}</span>
<span>Confidence</span>
</div>
</div>
</div>
<div class="risk-assessment">
<h4>Risk Assessment</h4>
<div class="risk-level {% if 'Yes' in context %}low-risk{% else %}high-risk{% endif %}">
{% if 'Yes' in context %}
<i class="fas fa-chart-line"></i>
<span>Low Risk</span>
{% else %}
<i class="fas fa-chart-bar"></i>
<span>High Risk</span>
{% endif %}
</div>
</div>
</div>
</div>
<div class="result-footer">
<p class="disclaimer">
<i class="fas fa-info-circle"></i>
This AI recommendation is based on machine learning analysis and should be reviewed by a licensed insurance agent.
</p>
<button class="cyber-btn cyber-btn-secondary" onclick="resetForm()">
<i class="fas fa-redo"></i>
Analyze Another Vehicle
</button>
</div>
</div>
{% endif %}
<!-- Loading Overlay -->
<div class="loading-overlay" id="loadingOverlay">
<div class="loading-content">
<div class="neural-loader">
<div class="neural-node"></div>
<div class="neural-node"></div>
<div class="neural-node"></div>
<div class="neural-connections"></div>
</div>
<h3 id="loadingText">Initializing AI Neural Network...</h3>
<div class="loading-progress">
<div class="progress-bar" id="progressBar"></div>
</div>
<p class="loading-details" id="loadingDetails">Analyzing data patterns...</p>
</div>
</div>
<!-- Notification System -->
<div class="notification-container" id="notificationContainer"></div>
</div>
<!-- Background Audio (Subtle Ambient) -->
<audio id="ambientAudio" loop>
<source src="data:audio/wav;base64,UklGRnoGAABXQVZFZm10IBAAAAABAAEAQB8AAEAfAAABAAgAZGF0YQoGAACBhYqFbF1fdJivrJBhNjVgodDbq2EcBj+a2/LDciVFLIHO8tiJNwgZaLvt559NEAxQp+PwtmMcBjiR1/LMeSwFJHfH8N2QQAoUXrTp66hVFApGn+DyvmwhCSuBzvLZiTYIG2m98OScTgwO" type="audio/wav">
</audio>
<script src="/static/js/script.js"></script>
my css ->"@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Inter:wght@300;400;500;600;700&display=swap');
- { margin: 0; padding: 0; box-sizing: border-box; }
:root { --primary: #4361ee; --secondary: #3a0ca3; --accent: #4cc9f0; --light: #f8f9fa; --dark: #0a0a0a; --success: #00ff88; --danger: #ff0055; --warning: #ffaa00; --neon-blue: #00e5ff; --neon-purple: #d500f9; --neon-green: #76ff03; --cyber-bg: rgba(0, 0, 0, 0.95); --glass: rgba(255, 255, 255, 0.05); --glass-border: rgba(255, 255, 255, 0.1); --shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.8); --glow: 0 0 20px; }
/* Base Styles */ body { font-family: 'Inter', sans-serif; background: radial-gradient(circle at 20% 50%, #120458 0%, #000000 50%, #1a0b3d 100%); color: var(--light); overflow-x: hidden; min-height: 100vh; cursor: none; position: relative; }
body::before { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(circle at 80% 20%, rgba(67, 97, 238, 0.1) 0%, transparent 50%), radial-gradient(circle at 20% 80%, rgba(76, 201, 240, 0.1) 0%, transparent 50%), radial-gradient(circle at 40% 40%, rgba(247, 37, 133, 0.05) 0%, transparent 50%); z-index: -3; animation: backgroundPulse 10s ease-in-out infinite; }
@keyframes backgroundPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.8; } }
/* Matrix Rain Effect */ .matrix-rain { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -2; opacity: 0.1; }
.matrix-column { position: absolute; top: -100%; font-family: 'Orbitron', monospace; font-size: 14px; color: var(--neon-green); animation: matrixFall linear infinite; text-shadow: 0 0 10px var(--neon-green); }
@keyframes matrixFall { to { transform: translateY(100vh); } }
/* Particles */ .particles-container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
.particle { position: absolute; width: 2px; height: 2px; background: var(--accent); border-radius: 50%; animation: particleFloat linear infinite; box-shadow: 0 0 6px var(--accent); }
@keyframes particleFloat { 0% { transform: translateY(100vh) translateX(0); opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { transform: translateY(-10vh) translateX(100px); opacity: 0; } }
/* Holographic Grid */ .holographic-grid { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(90deg, transparent 0%, rgba(76, 201, 240, 0.03) 50%, transparent 100%), linear-gradient(0deg, transparent 0%, rgba(67, 97, 238, 0.03) 50%, transparent 100%); background-size: 100px 100px; z-index: -1; animation: gridShift 20s linear infinite; }
@keyframes gridShift { 0% { transform: translate(0, 0); } 100% { transform: translate(100px, 100px); } }
/* Cyber Cursor */ .cyber-cursor { position: fixed; width: 20px; height: 20px; pointer-events: none; z-index: 10000; mix-blend-mode: difference; }
.cursor-core { width: 8px; height: 8px; background: var(--neon-blue); border-radius: 50%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); animation: cursorPulse 2s infinite; }
.cursor-ring { width: 20px; height: 20px; border: 1px solid var(--neon-purple); border-radius: 50%; position: absolute; animation: cursorRing 1s ease-out infinite; }
@keyframes cursorPulse { 0%, 100% { transform: translate(-50%, -50%) scale(1); } 50% { transform: translate(-50%, -50%) scale(1.5); } }
@keyframes cursorRing { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(2); opacity: 0; } }
/* Audio Toggle */ .audio-toggle { position: fixed; top: 20px; right: 20px; width: 50px; height: 50px; background: var(--glass); border: 1px solid var(--glass-border); border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; backdrop-filter: blur(10px); z-index: 1000; transition: all 0.3s ease; box-shadow: var(--glow) var(--accent); }
.audio-toggle:hover { transform: scale(1.1); box-shadow: var(--glow) var(--neon-blue); }
.audio-toggle.muted { opacity: 0.5; box-shadow: var(--glow) var(--danger); }
/* Main Container */ .main-container { max-width: 1400px; margin: 0 auto; padding: 20px; position: relative; z-index: 1; }
/* Hero Section */ .hero-section { text-align: center; padding: 60px 0; position: relative; }
.logo-container { position: relative; display: inline-block; }
.logo-hologram { width: 120px; height: 120px; background: var(--glass); border: 2px solid var(--neon-blue); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 30px; font-size: 3rem; color: var(--neon-blue); animation: logoFloat 4s ease-in-out infinite; backdrop-filter: blur(20px); box-shadow: var(--glow) var(--neon-blue), inset 0 0 50px rgba(76, 201, 240, 0.1); cursor: pointer; transition: all 0.3s ease; }
.logo-hologram:hover { transform: scale(1.1) rotateY(180deg); box-shadow: var(--glow) var(--neon-purple), inset 0 0 80px rgba(213, 0, 249, 0.2); }
.logo-hologram.easter-egg-active { animation: logoFloat 4s ease-in-out infinite, rainbowGlow 2s linear infinite; }
@keyframes logoFloat { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-20px); } }
@keyframes rainbowGlow { 0% { box-shadow: var(--glow) #ff0000; } 16.66% { box-shadow: var(--glow) #ff8800; } 33.33% { box-shadow: var(--glow) #ffff00; } 50% { box-shadow: var(--glow) #00ff00; } 66.66% { box-shadow: var(--glow) #0088ff; } 83.33% { box-shadow: var(--glow) #8800ff; } 100% { box-shadow: var(--glow) #ff0088; } }
.main-title { font-family: 'Orbitron', monospace; font-size: 4rem; font-weight: 900; margin-bottom: 20px; text-shadow: 0 0 10px var(--neon-blue), 0 0 20px var(--neon-blue), 0 0 40px var(--neon-blue); }
.title-main { color: var(--light); }
.title-accent { background: linear-gradient(45deg, var(--neon-blue), var(--neon-purple)); -webkit-background-clip: text; background-clip: text; color: transparent; animation: titleGlow 3s ease-in-out infinite; }
@keyframes titleGlow { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.5); } }
.subtitle-container { position: relative; display: flex; align-items: center; justify-content: center; gap: 15px; }
.typing-text { font-size: 1.4rem; color: var(--accent); min-height: 2rem; font-weight: 500; }
.pulse-indicator { width: 12px; height: 12px; background: var(--success); border-radius: 50%; animation: pulse 1.5s infinite; box-shadow: 0 0 10px var(--success); }
@keyframes pulse { 0% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.5); opacity: 0.5; } 100% { transform: scale(1); opacity: 1; } }
/* Stats Container */ .stats-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 30px; padding: 40px 0; margin: 40px 0; }
.stat-item { text-align: center; padding: 30px; background: var(--glass); border: 1px solid var(--glass-border); border-radius: 20px; backdrop-filter: blur(10px); transition: all 0.3s ease; position: relative; overflow: hidden; }
.stat-item::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(76, 201, 240, 0.1), transparent); transition: 0.5s; }
.stat-item:hover::before { left: 100%; }
.stat-item:hover { transform: translateY(-10px); box-shadow: var(--glow) var(--accent); }
.stat-number { font-family: 'Orbitron', monospace; font-size: 3rem; font-weight: 700; color: var(--neon-green); margin-bottom: 10px; text-shadow: 0 0 10px var(--neon-green); }
.stat-label { color: var(--light); font-size: 1rem; opacity: 0.8; }
/* Fortune Container */ .fortune-container { background: var(--glass); border: 1px solid var(--neon-purple); border-radius: 15px; padding: 25px; margin: 40px 0; text-align: center; backdrop-filter: blur(15px); box-shadow: var(--glow) var(--neon-purple); position: relative; overflow: hidden; }
.fortune-container::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: conic-gradient(from 0deg, transparent, var(--neon-purple), transparent); animation: fortuneRotate 10s linear infinite; z-index: -1; }
@keyframes fortuneRotate { 100% { transform: rotate(360deg); } }
.fortune-message { font-size: 1.3rem; color: var(--light); font-style: italic; position: relative; z-index: 1; background: var(--cyber-bg); padding: 20px; border-radius: 10px; }
.fortune-message i { color: var(--neon-purple); margin: 0 10px; }
#fortuneText { transition: opacity 0.5s ease; }
/* Neural Network Visualization */ .neural-network { position: relative; height: 200px; margin: 40px 0; background: var(--glass); border: 1px solid var(--glass-border); border-radius: 15px; backdrop-filter: blur(10px); overflow: hidden; }
#networkCanvas { width: 100%; height: 100%; opacity: 0.6; }
.network-status { position: absolute; top: 15px; left: 15px; display: flex; align-items: center; gap: 10px; font-size: 0.9rem; color: var(--success); }
.status-dot { width: 8px; height: 8px; background: var(--success); border-radius: 50%; animation: pulse 1s infinite; }
/* Form Styles */ .form-container-wrapper { background: var(--glass); border: 1px solid var(--glass-border); border-radius: 25px; padding: 40px; backdrop-filter: blur(15px); box-shadow: var(--shadow); margin: 40px 0; position: relative; overflow: hidden; }
.form-container-wrapper::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 2px; background: linear-gradient(90deg, var(--neon-blue), var(--neon-purple), var(--neon-green)); animation: borderFlow 3s linear infinite; }
@keyframes borderFlow { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
.form-header { text-align: center; margin-bottom: 40px; }
.form-header h2 { font-family: 'Orbitron', monospace; font-size: 2.5rem; color: var(--light); margin-bottom: 15px; text-shadow: 0 0 10px var(--neon-blue); }
.form-header h2 i { color: var(--neon-blue); margin-right: 15px; }
.form-description { font-size: 1.1rem; color: var(--light); opacity: 0.9; max-width: 800px; margin: 0 auto; line-height: 1.6; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; margin-bottom: 40px; }
.form-section { background: rgba(255, 255, 255, 0.02); border: 1px solid var(--glass-border); border-radius: 15px; padding: 25px; position: relative; }
.section-title { font-family: 'Orbitron', monospace; font-size: 1.3rem; color: var(--accent); margin-bottom: 20px; display: flex; align-items: center; gap: 10px; }
.section-icon { display: flex; align-items: center; justify-content: center; width: 35px; height: 35px; background: var(--glass); border-radius: 50%; border: 1px solid var(--accent); }
.form-group { margin-bottom: 25px; position: relative; }
.cyber-label { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font-weight: 600; color: var(--light); position: relative; cursor: pointer; }
.cyber-label i { color: var(--accent); font-size: 1.1rem; }
.label-glow { position: absolute; bottom: -2px; left: 0; width: 0%; height: 2px; background: var(--neon-blue); transition: width 0.3s ease; }
.cyber-label:hover .label-glow { width: 100%; }
.cyber-input, .cyber-select { width: 100%; padding: 15px 20px; background: rgba(255, 255, 255, 0.05); border: 2px solid transparent; border-radius: 10px; color: var(--light); font-size: 1rem; transition: all 0.3s ease; backdrop-filter: blur(10px); font-family: 'Inter', sans-serif; }
.cyber-input:focus, .cyber-select:focus { outline: none; border-color: var(--neon-blue); background: rgba(255, 255, 255, 0.1); box-shadow: var(--glow) var(--neon-blue), inset 0 0 20px rgba(76, 201, 240, 0.1); }
.cyber-input::placeholder { color: rgba(255, 255, 255, 0.5); font-style: italic; }
.input-trail { position: absolute; bottom: 0; left: 0; width: 0%; height: 2px; background: linear-gradient(90deg, var(--neon-blue), var(--neon-purple)); transition: width 0.3s ease; }
.cyber-input:focus + .input-trail { width: 100%; }
/* Select Wrapper */ .select-wrapper { position: relative; }
.select-arrow { position: absolute; right: 15px; top: 50%; transform: translateY(-50%); color: var(--accent); pointer-events: none; transition: transform 0.3s ease; }
.cyber-select:focus + .select-arrow { transform: translateY(-50%) rotate(180deg); }
.cyber-select option { background: var(--dark); color: var(--light); padding: 10px; }
/* Toggle Switches */ .toggle-wrapper { display: flex; justify-content: center; }
.cyber-toggle { width: 200px; height: 50px; background: rgba(255, 255, 255, 0.05); border: 2px solid var(--glass-border); border-radius: 25px; position: relative; cursor: pointer; transition: all 0.3s ease; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; backdrop-filter: blur(10px); }
.toggle-slider { position: absolute; width: 70px; height: 40px; background: linear-gradient(45deg, var(--danger), #ff6b6b); border-radius: 20px; left: 5px; transition: all 0.4s ease; box-shadow: var(--glow) var(--danger); }
.cyber-toggle.active .toggle-slider { left: 125px; background: linear-gradient(45deg, var(--success), #51cf66); box-shadow: var(--glow) var(--success); }
.toggle-text-off, .toggle-text-on { font-size: 0.9rem; font-weight: 600; z-index: 2; position: relative; transition: all 0.3s ease; }
.toggle-text-off { color: var(--light); }
.toggle-text-on { color: rgba(255, 255, 255, 0.5); }
.cyber-toggle.active .toggle-text-off { color: rgba(255, 255, 255, 0.5); }
.cyber-toggle.active .toggle-text-on { color: var(--light); }
/* Damage Selector */ .damage-selector { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.damage-option { padding: 20px; background: rgba(255, 255, 255, 0.05); border: 2px solid var(--glass-border); border-radius: 15px; text-align: center; cursor: pointer; transition: all 0.3s ease; backdrop-filter: blur(10px); }
.damage-option:hover { transform: translateY(-5px); border-color: var(--accent); box-shadow: var(--glow) var(--accent); }
.damage-option.active { border-color: var(--success); background: rgba(0, 255, 136, 0.1); box-shadow: var(--glow) var(--success); }
.damage-icon { font-size: 2rem; margin-bottom: 10px; color: var(--accent); }
.damage-option.active .damage-icon { color: var(--success); }
/* Premium Indicator */ .premium-indicator { margin-top: 10px; padding: 10px; background: rgba(255, 255, 255, 0.05); border-radius: 8px; text-align: center; font-size: 0.9rem; }
/* Action Section */ .action-section { text-align: center; padding: 30px 0; border-top: 1px solid var(--glass-border); margin-top: 30px; }
.ai-status { margin-bottom: 30px; }
.ai-indicator { display: inline-flex; align-items: center; gap: 10px; padding: 10px 20px; background: var(--glass); border: 1px solid var(--success); border-radius: 25px; backdrop-filter: blur(10px); color: var(--success); font-weight: 600; }
.ai-pulse { width: 12px; height: 12px; background: var(--success); border-radius: 50%; animation: pulse 1.5s infinite; }
.button-group { display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; }
/* Cyber Buttons */ .cyber-btn { position: relative; padding: 0; border: none; background: transparent; cursor: pointer; font-family: 'Orbitron', monospace; font-size: 1rem; font-weight: 600; overflow: hidden; min-width: 220px; height: 60px; transition: all 0.3s ease; }
.btn-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(45deg, var(--primary), var(--secondary)); border-radius: 30px; transition: all 0.3s ease; }
.cyber-btn-secondary .btn-bg { background: linear-gradient(45deg, var(--success), #16c79a); }
.btn-content { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; gap: 10px; height: 100%; color: var(--light); padding: 0 30px; }
.btn-particles { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
.cyber-btn:hover { transform: translateY(-3px); }
.cyber-btn:hover .btn-bg { box-shadow: var(--glow) var(--primary), 0 10px 30px rgba(67, 97, 238, 0.4); }
.cyber-btn-secondary:hover .btn-bg { box-shadow: var(--glow) var(--success), 0 10px 30px rgba(0, 255, 136, 0.4); }
.cyber-btn:disabled { opacity: 0.7; cursor: not-allowed; transform: none; }
/* Enhanced Result Styles */ .result-container { background: var(--glass); border: 2px solid; border-radius: 25px; padding: 30px; margin: 40px 0; backdrop-filter: blur(20px); animation: resultSlideIn 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275); position: relative; overflow: hidden; }
.result-container::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(45deg, transparent 0%, rgba(76, 201, 240, 0.05) 50%, transparent 100%); z-index: -1; }
.result-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; padding-bottom: 20px; border-bottom: 1px solid var(--glass-border); }
.result-header h2 { font-family: 'Orbitron', monospace; font-size: 2rem; color: var(--light); text-shadow: 0 0 10px var(--neon-blue); }
.result-header h2 i { color: var(--neon-blue); margin-right: 15px; }
.result-badge { padding: 12px 24px; border-radius: 25px; font-family: 'Orbitron', monospace; font-weight: 700; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 1px; display: flex; align-items: center; gap: 8px; animation: badgePulse 2s infinite; }
.result-badge.recommended { background: linear-gradient(45deg, var(--success), #00cc88); color: var(--dark); box-shadow: var(--glow) var(--success); }
.result-badge.not-recommended { background: linear-gradient(45deg, var(--danger), #ff3366); color: var(--light); box-shadow: var(--glow) var(--danger); }
@keyframes badgePulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
.result-content { display: grid; grid-template-columns: 2fr 1fr; gap: 40px; margin-bottom: 30px; }
.result-visual { display: flex; gap: 25px; align-items: flex-start; }
.result-icon { position: relative; flex-shrink: 0; }
.icon-wrapper { width: 100px; height: 100px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 2.5rem; position: relative; z-index: 2; }
.result-icon.positive .icon-wrapper { background: linear-gradient(135deg, var(--success), #00cc88); color: var(--dark); box-shadow: var(--glow) var(--success); }
.result-icon.negative .icon-wrapper { background: linear-gradient(135deg, var(--danger), #ff3366); color: var(--light); box-shadow: var(--glow) var(--danger); }
.pulse-ring { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 120px; height: 120px; border: 2px solid; border-radius: 50%; animation: pulseRing 2s infinite; }
.result-icon.positive .pulse-ring { border-color: var(--success); }
.result-icon.negative .pulse-ring { border-color: var(--danger); }
@keyframes pulseRing { 0% { width: 120px; height: 120px; opacity: 1; } 100% { width: 200px; height: 200px; opacity: 0; } }
.result-message h3 { font-family: 'Orbitron', monospace; font-size: 1.8rem; margin-bottom: 15px; }
.result-message.positive h3 { color: var(--success); text-shadow: 0 0 10px rgba(0, 255, 136, 0.5); }
.result-message.negative h3 { color: var(--danger); text-shadow: 0 0 10px rgba(255, 0, 85, 0.5); }
.decision-text { font-size: 1.2rem; line-height: 1.6; margin-bottom: 20px; color: var(--light); }
.decision-reasons { margin: 25px 0; padding: 20px; background: rgba(255, 255, 255, 0.05); border-radius: 15px; border-left: 4px solid var(--accent); }
.decision-reasons h4 { color: var(--accent); margin-bottom: 15px; font-family: 'Orbitron', monospace; }
.decision-reasons ul { list-style: none; padding: 0; }
.decision-reasons li { padding: 8px 0; display: flex; align-items: center; gap: 10px; color: var(--light); }
.decision-reasons li i { width: 20px; }
.result-message.positive .decision-reasons li i { color: var(--success); }
.result-message.negative .decision-reasons li i { color: var(--danger); }
.next-steps { padding: 15px; background: rgba(255, 255, 255, 0.08); border-radius: 10px; border: 1px solid var(--glass-border); }
.next-steps p { margin: 0; color: var(--light); font-weight: 500; }
/* Result Stats */ .result-stats { display: flex; flex-direction: column; gap: 25px; }
.confidence-card, .risk-assessment { background: rgba(255, 255, 255, 0.05); border: 1px solid var(--glass-border); border-radius: 15px; padding: 25px; backdrop-filter: blur(10px); }
.confidence-card h4, .risk-assessment h4 { color: var(--accent); margin-bottom: 20px; font-family: 'Orbitron', monospace; text-align: center; }
.meter-labels { display: flex; justify-content: space-between; margin-bottom: 10px; font-size: 0.9rem; color: var(--light); opacity: 0.8; }
.meter { height: 12px; background: rgba(255, 255, 255, 0.1); border-radius: 6px; overflow: hidden; margin-bottom: 15px; position: relative; }
.meter-fill { height: 100%; background: linear-gradient(90deg, var(--danger), var(--warning), var(--success)); border-radius: 6px; transition: width 1.5s ease-in-out; position: relative; }
.meter-fill::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent); animation: meterShine 2s infinite; }
@keyframes meterShine { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
.confidence-percentage { text-align: center; }
.percentage { font-family: 'Orbitron', monospace; font-size: 2rem; font-weight: 700; color: var(--neon-green); text-shadow: 0 0 10px var(--neon-green); display: block; }
.confidence-percentage span:last-child { color: var(--light); opacity: 0.8; font-size: 0.9rem; }
.risk-level { padding: 15px; border-radius: 10px; text-align: center; font-family: 'Orbitron', monospace; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; display: flex; align-items: center; justify-content: center; gap: 10px; }
.risk-level.low-risk { background: linear-gradient(45deg, rgba(0, 255, 136, 0.2), transparent); color: var(--success); border: 1px solid var(--success); box-shadow: var(--glow) var(--success); }
.risk-level.high-risk { background: linear-gradient(45deg, rgba(255, 0, 85, 0.2), transparent); color: var(--danger); border: 1px solid var(--danger); box-shadow: var(--glow) var(--danger); }
/* Result Footer */ .result-footer { border-top: 1px solid var(--glass-border); padding-top: 25px; text-align: center; }
.disclaimer { color: var(--light); opacity: 0.7; font-size: 0.9rem; margin-bottom: 20px; display: flex; align-items: center; justify-content: center; gap: 10px; }
.disclaimer i { color: var(--accent); }
/* Loading Overlay */ .loading-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.95); z-index: 10000; display: none; align-items: center; justify-content: center; backdrop-filter: blur(20px); }
.loading-overlay.active { display: flex; animation: overlayFadeIn 0.3s ease; }
@keyframes overlayFadeIn { from { opacity: 0; } to { opacity: 1; } }
.loading-content { text-align: center; max-width: 400px; }
.neural-loader { position: relative; width: 150px; height: 150px; margin: 0 auto 30px; }
.neural-node { position: absolute; width: 20px; height: 20px; background: var(--neon-blue); border-radius: 50%; box-shadow: var(--glow) var(--neon-blue); animation: neuralPulse 2s infinite; }
.neural-node:nth-child(1) { top: 0; left: 50%; transform: translateX(-50%); animation-delay: 0s; }
.neural-node:nth-child(2) { bottom: 0; left: 25%; animation-delay: 0.5s; }
.neural-node:nth-child(3) { bottom: 0; right: 25%; animation-delay: 1s; }
@keyframes neuralPulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.5); opacity: 0.7; } }
.neural-connections { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(135deg, transparent 48%, var(--neon-purple) 50%, transparent 52%), linear-gradient(45deg, transparent 48%, var(--neon-green) 50%, transparent 52%); animation: connectionFlow 3s linear infinite; opacity: 0.6; }
@keyframes connectionFlow { 0% { opacity: 0.3; } 50% { opacity: 0.8; } 100% { opacity: 0.3; } }
#loadingText { font-family: 'Orbitron', monospace; font-size: 1.5rem; color: var(--neon-blue); margin-bottom: 20px; text-shadow: 0 0 10px var(--neon-blue); }
.loading-progress { width: 300px; height: 6px; background: rgba(255, 255, 255, 0.1); border-radius: 3px; overflow: hidden; margin: 20px auto; }
.progress-bar { height: 100%; width: 0%; background: linear-gradient(90deg, var(--neon-blue), var(--neon-purple), var(--neon-green)); border-radius: 3px; transition: width 0.8s ease; animation: progressGlow 2s infinite; }
@keyframes progressGlow { 0%, 100% { box-shadow: 0 0 5px var(--neon-blue); } 50% { box-shadow: 0 0 20px var(--neon-blue); } }
.loading-details { color: var(--light); opacity: 0.8; font-size: 1rem; margin-top: 15px; }
/* Notification System */ .notification-container { position: fixed; top: 20px; right: 20px; z-index: 10001; max-width: 400px; }
.notification { background: var(--glass); border-left: 4px solid var(--accent); border-radius: 10px; padding: 20px; margin-bottom: 15px; backdrop-filter: blur(15px); box-shadow: var(--shadow); transform: translateX(450px); transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); opacity: 0; position: relative; overflow: hidden; }
.notification.show { transform: translateX(0); opacity: 1; }
.notification.success { border-left-color: var(--success); box-shadow: var(--glow) var(--success); }
.notification.error { border-left-color: var(--danger); box-shadow: var(--glow) var(--danger); }
.notification.info { border-left-color: var(--accent); box-shadow: var(--glow) var(--accent); }
.notification-content { display: flex; justify-content: space-between; align-items: center; }
.notification-close { background: none; border: none; color: var(--light); font-size: 1.5rem; cursor: pointer; opacity: 0.7; transition: opacity 0.3s ease; padding: 0; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; }
.notification-close:hover { opacity: 1; }
/* Field Particles */ .field-particles { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; overflow: hidden; opacity: 0; transition: opacity 0.3s ease; }
.form-group:hover .field-particles { opacity: 1; }
.field-particles::before { content: ''; position: absolute; width: 2px; height: 2px; background: var(--accent); border-radius: 50%; animation: fieldParticleFloat 3s linear infinite; box-shadow: 0 0 6px var(--accent); }
@keyframes fieldParticleFloat { 0% { transform: translateY(100%) translateX(0); opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { transform: translateY(-10%) translateX(20px); opacity: 0; } }
/* Confetti Animation */ .confetti { position: fixed; width: 10px; height: 10px; background: var(--success); top: -20px; opacity: 0.8; animation: confettiFall 3s linear forwards; z-index: 10000; }
@keyframes confettiFall { 0% { transform: translateY(0) rotate(0deg); opacity: 1; } 100% { transform: translateY(100vh) rotate(360deg); opacity: 0; } }
/* Responsive Design */ @media (max-width: 1200px) { .main-title { font-size: 3rem; }
.form-grid {
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
}
@media (max-width: 968px) { .result-content { grid-template-columns: 1fr; gap: 30px; }
.result-visual {
flex-direction: column;
text-align: center;
}
.result-header {
flex-direction: column;
gap: 20px;
text-align: center;
}
}
@media (max-width: 768px) { body { cursor: auto; }
.cyber-cursor {
display: none;
}
.main-container {
padding: 10px;
}
.hero-section {
padding: 40px 0;
}
.main-title {
font-size: 2.5rem;
}
.typing-text {
font-size: 1.2rem;
}
.stats-container {
grid-template-columns: 1fr;
gap: 20px;
}
.form-container-wrapper {
padding: 25px;
}
.form-grid {
grid-template-columns: 1fr;
gap: 20px;
}
.button-group {
flex-direction: column;
align-items: center;
}
.cyber-btn {
min-width: 280px;
}
.result-container {
padding: 20px;
}
.result-header h2 {
font-size: 1.5rem;
}
.result-message h3 {
font-size: 1.4rem;
}
.icon-wrapper {
width: 80px;
height: 80px;
font-size: 2rem;
}
.neural-loader {
width: 100px;
height: 100px;
}
.loading-progress {
width: 250px;
}
.notification-container {
max-width: 350px;
right: 10px;
top: 10px;
}
.audio-toggle {
top: 10px;
right: 10px;
width: 40px;
height: 40px;
}
}
@media (max-width: 480px) { .main-title { font-size: 2rem; }
.subtitle-container {
flex-direction: column;
gap: 10px;
}
.form-container-wrapper {
padding: 20px;
}
.cyber-btn {
min-width: 250px;
height: 50px;
}
.btn-content {
font-size: 0.9rem;
padding: 0 20px;
}
.logo-hologram {
width: 80px;
height: 80px;
font-size: 2rem;
}
.stat-number {
font-size: 2.5rem;
}
.fortune-message {
font-size: 1.1rem;
padding: 15px;
}
}
/* Accessibility */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
.matrix-rain, .particles-container, .holographic-grid {
display: none;
}
}
/* High contrast mode */ @media (prefers-contrast: high) { :root { --glass: rgba(255, 255, 255, 0.1); --glass-border: rgba(255, 255, 255, 0.3); }
.cyber-input, .cyber-select {
border-color: var(--light);
}
.cyber-btn .btn-bg {
border: 2px solid var(--light);
}
}
/* Print styles */ @media print { .matrix-rain, .particles-container, .holographic-grid, .cyber-cursor, .audio-toggle, .loading-overlay, .notification-container { display: none !important; }
body {
background: white;
color: black;
}
.main-container {
background: white;
}
}
/* Custom scrollbar */ ::-webkit-scrollbar { width: 12px; }
::-webkit-scrollbar-track { background: var(--dark); border-radius: 6px; }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--neon-blue), var(--neon-purple)); border-radius: 6px; box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5); }
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, var(--neon-purple), var(--neon-green)); }
/* Loading states for body */ body.loaded { animation: bodyFadeIn 1s ease-out; }
@keyframes bodyFadeIn { from { opacity: 0; } to { opacity: 1; } }
/* Result Slide In Animation */ @keyframes resultSlideIn { from { opacity: 0; transform: translateY(50px) scale(0.9); } to { opacity: 1; transform: translateY(0) scale(1); } }"
my js ->"// ===================== // INSURANCE IQ MANAGER // =====================
class InsuranceIQManager { constructor() { this.isInitialized = false; this.currentPrediction = null; }
async initialize() {
try {
console.log('๐ Initializing InsuranceIQ AI System...');
await this.simulateAIInit();
this.isInitialized = true;
this.updateSystemStatus('AI System Active', 95);
this.showNotification('๐ค AI Neural Network Initialized Successfully', 'success');
return true;
} catch (error) {
console.error('AI Init Failed:', error);
this.showNotification('โ ๏ธ AI System Initialization Failed', 'error');
return false;
}
}
async simulateAIInit() {
return new Promise(resolve => {
setTimeout(() => {
console.log('โ
AI Neural Network simulation ready');
resolve();
}, 1500);
});
}
showNotification(message, type) {
const container = document.getElementById('notificationContainer');
if (!container) return;
const notification = document.createElement('div');
notification.className = `notification ${type}`;
notification.innerHTML = `
<div class="notification-content">
<span>${message}</span>
<button class="notification-close">×</button>
</div>
`;
container.appendChild(notification);
setTimeout(() => {
notification.classList.add('show');
}, 100);
const closeBtn = notification.querySelector('.notification-close');
closeBtn.addEventListener('click', () => {
notification.classList.remove('show');
setTimeout(() => {
if (notification.parentNode) {
container.removeChild(notification);
}
}, 300);
});
setTimeout(() => {
if (notification.parentNode) {
notification.classList.remove('show');
setTimeout(() => {
if (notification.parentNode) {
container.removeChild(notification);
}
}, 300);
}
}, 5000);
}
}
// ===================== // GLOBAL VARIABLES // =====================
const insuranceManager = new InsuranceIQManager(); const fortuneMessages = [ "Your data tells a story of infinite possibilities...", "The AI sees patterns humans cannot comprehend...", "In the matrix of probability, your path is illuminated...", "Machine learning whispers secrets of the future...", "Your digital footprint reveals hidden truths...", "The neural network dances with your destiny...", "Algorithms align to decode your insurance fate...", "In the realm of big data, all futures converge...", "The AI oracle awaits your command...", "Your profile resonates with the frequency of fortune..." ];
const subtitleTexts = [ "AI-Powered Insurance Prediction", "Machine Learning at Your Service", "Decode Your Insurance Future", "Neural Networks Never Lie", "Data Science Meets Destiny" ];
let currentSubtitleIndex = 0; let currentCharIndex = 0; let isDeleting = false;
// ===================== // INITIALIZATION // =====================
document.addEventListener('DOMContentLoaded', async function() { console.log('๐ Initializing InsuranceIQ...');
setTimeout(() => {
document.body.classList.add('loaded');
}, 500);
await insuranceManager.initialize();
setupEventListeners();
initializeAnimations();
console.log('โ
InsuranceIQ initialized successfully');
});
// ===================== // EVENT LISTENERS - SIMPLIFIED // =====================
function setupEventListeners() { const predictionForm = document.getElementById('predictionForm'); if (predictionForm) { predictionForm.addEventListener('submit', handleFormSubmit); }
const trainBtn = document.getElementById('trainBtn');
if (trainBtn) {
trainBtn.addEventListener('click', handleTrainModel);
}
setupAudioControls();
setupInteractiveToggles();
setupDamageSelector();
setupPremiumIndicator();
setupInputValidation();
}
function setupInteractiveToggles() { const licenseToggle = document.getElementById('licenseToggle'); if (licenseToggle) { licenseToggle.addEventListener('click', function() { this.classList.toggle('active'); const hiddenInput = document.getElementById('Driving_License'); if (hiddenInput) { hiddenInput.value = this.classList.contains('active') ? '1' : '0'; } }); }
const insuranceToggle = document.getElementById('insuranceToggle');
if (insuranceToggle) {
insuranceToggle.addEventListener('click', function() {
this.classList.toggle('active');
const hiddenInput = document.getElementById('Previously_Insured');
if (hiddenInput) {
hiddenInput.value = this.classList.contains('active') ? '1' : '0';
}
});
}
}
function setupDamageSelector() { document.querySelectorAll('.damage-option').forEach(option => { option.addEventListener('click', function() { document.querySelectorAll('.damage-option').forEach(opt => opt.classList.remove('active')); this.classList.add('active'); const damageInput = document.getElementById('Vehicle_Damage'); if (damageInput) { damageInput.value = this.getAttribute('data-value'); } }); }); }
function setupPremiumIndicator() { const premiumInput = document.getElementById('Annual_Premium'); if (premiumInput) { premiumInput.addEventListener('input', function() { const value = parseFloat(this.value) || 0; const indicator = document.getElementById('premiumLevel'); if (!indicator) return;
if (value < 10000) {
indicator.textContent = 'Basic';
indicator.style.color = '#4ade80';
} else if (value < 30000) {
indicator.textContent = 'Standard';
indicator.style.color = '#fca311';
} else {
indicator.textContent = 'Premium';
indicator.style.color = '#f72585';
}
});
}
}
function setupInputValidation() { const inputs = document.querySelectorAll('input[type="number"]'); inputs.forEach(input => { input.addEventListener('blur', function() { const value = parseFloat(this.value); const min = parseFloat(this.min) || 0; const max = parseFloat(this.max) || Infinity;
if (this.value && (value < min || value > max)) {
this.style.borderColor = 'var(--danger)';
insuranceManager.showNotification(`โ ๏ธ ${this.name} should be between ${min} and ${max}`, 'error');
} else {
this.style.borderColor = '';
}
});
});
}
function setupAudioControls() { const audioToggle = document.getElementById('audioToggle'); const ambientAudio = document.getElementById('ambientAudio'); let isAudioPlaying = false;
if (audioToggle && ambientAudio) {
audioToggle.addEventListener('click', function() {
if (isAudioPlaying) {
ambientAudio.pause();
this.innerHTML = '<i class="fas fa-volume-mute"></i>';
this.classList.add('muted');
} else {
ambientAudio.play().catch(e => {
console.log('Audio play failed:', e);
});
this.innerHTML = '<i class="fas fa-volume-up"></i>';
this.classList.remove('muted');
}
isAudioPlaying = !isAudioPlaying;
});
}
}
// ===================== // SIMPLIFIED FORM HANDLING // =====================
async function handleFormSubmit(e) { e.preventDefault(); console.log('๐ Form submission started...');
if (!insuranceManager.isInitialized) {
insuranceManager.showNotification('๐ค Initializing AI System...', 'info');
await insuranceManager.initialize();
}
const loadingOverlay = document.getElementById('loadingOverlay');
const loadingText = document.getElementById('loadingText');
const progressBar = document.getElementById('progressBar');
if (loadingOverlay) loadingOverlay.classList.add('active');
try {
// Enhanced loading sequence with beautiful messages
const loadingSteps = [
{ text: '๐ Analyzing Personal Profile...', progress: 20 },
{ text: '๐ Processing Vehicle Information...', progress: 40 },
{ text: '๐ Calculating Risk Factors...', progress: 60 },
{ text: '๐ค Running AI Prediction Algorithm...', progress: 80 },
{ text: 'โจ Generating Final Recommendation...', progress: 100 }
];
for (let i = 0; i < loadingSteps.length; i++) {
if (loadingText) loadingText.textContent = loadingSteps[i].text;
if (progressBar) progressBar.style.width = `${loadingSteps[i].progress}%`;
await new Promise(resolve => setTimeout(resolve, 800));
}
// Show success message before form submission
insuranceManager.showNotification('โ
AI Analysis Complete! Generating recommendation...', 'success');
// Allow user to see the success message before submitting
setTimeout(() => {
if (loadingOverlay) loadingOverlay.classList.remove('active');
// DIRECT FORM SUBMISSION - NO MORE METHOD NOT ALLOWED!
e.target.submit();
}, 1500);
} catch (error) {
console.error('Prediction processing failed:', error);
insuranceManager.showNotification('โ Analysis Failed. Please check your inputs and try again.', 'error');
if (loadingOverlay) loadingOverlay.classList.remove('active');
}
}
async function handleTrainModel() { const trainBtn = document.getElementById('trainBtn'); if (!trainBtn) return;
const originalHTML = trainBtn.innerHTML;
trainBtn.disabled = true;
trainBtn.innerHTML = '<div class="btn-bg"></div><div class="btn-content"><i class="fas fa-spinner fa-spin"></i><span>Training Neural Network...</span></div>';
try {
insuranceManager.showNotification('๐ง Starting Neural Network Training...', 'info');
// Simulate training process with beautiful messages
const trainingSteps = [
'๐ Loading training dataset...',
'โ๏ธ Configuring neural layers...',
'๐ Processing 50,000+ data points...',
'๐ฏ Optimizing model accuracy...',
'โ
Validating results...'
];
for (let step of trainingSteps) {
insuranceManager.showNotification(step, 'info');
await new Promise(resolve => setTimeout(resolve, 2000));
}
insuranceManager.showNotification('๐ Neural Network Training Complete! Model accuracy: 98.7%', 'success');
// Show celebration effect
celebrateTrainingCompletion();
} catch (error) {
insuranceManager.showNotification('โ Training Failed. Please try again.', 'error');
} finally {
trainBtn.disabled = false;
trainBtn.innerHTML = originalHTML;
}
}
// ===================== // HELPER FUNCTIONS // =====================
function resetForm() { const form = document.getElementById('predictionForm'); if (form) { form.reset(); // Reset toggles document.querySelectorAll('.cyber-toggle').forEach(toggle => { toggle.classList.remove('active'); }); // Reset damage selector document.querySelectorAll('.damage-option').forEach(option => { option.classList.remove('active'); }); }
// Scroll to top
window.scrollTo({ top: 0, behavior: 'smooth' });
insuranceManager.showNotification('๐ Form reset. Ready for new analysis!', 'info');
}
// Celebration effect for training completion function celebrateTrainingCompletion() { const container = document.querySelector('.main-container'); if (!container) return;
for (let i = 0; i < 20; i++) {
const confetti = document.createElement('div');
confetti.className = 'confetti';
confetti.style.left = Math.random() * 100 + '%';
confetti.style.animationDelay = Math.random() * 2 + 's';
confetti.style.background = ['var(--success)', 'var(--accent)', 'var(--neon-purple)', 'var(--warning)'][Math.floor(Math.random() * 4)];
container.appendChild(confetti);
setTimeout(() => {
if (confetti.parentNode) {
container.removeChild(confetti);
}
}, 3000);
}
}
// ===================== // ANIMATIONS & EFFECTS (Keep your existing animations) // =====================
function initializeAnimations() { createMatrixRain(); createParticles(); initNeuralNetwork(); startTypingEffect(); startFortuneRotation(); initCyberCursor(); startStatsCounter(); }
function createMatrixRain() { const matrixRain = document.getElementById('matrixRain'); if (!matrixRain) return;
const chars = '01ใขใคใฆใจใชใซใญใฏใฑใณใตใทในใปใฝใฟใใใใใใใใใใใใใใใใใ ใกใขใคใฆใจใฉใชใซใฌใญใฏใฒใณ';
for (let i = 0; i < 50; i++) {
const column = document.createElement('div');
column.className = 'matrix-column';
column.style.left = Math.random() * 100 + '%';
column.style.animationDelay = Math.random() * 2 + 's';
column.style.animationDuration = (Math.random() * 3 + 2) + 's';
for (let j = 0; j < 20; j++) {
const char = document.createElement('span');
char.textContent = chars[Math.floor(Math.random() * chars.length)];
char.style.opacity = Math.random();
column.appendChild(char);
}
matrixRain.appendChild(column);
}
}
function createParticles() { const container = document.getElementById('particlesContainer'); if (!container) return;
for (let i = 0; i < 100; i++) {
const particle = document.createElement('div');
particle.className = 'particle';
particle.style.left = Math.random() * 100 + '%';
particle.style.top = Math.random() * 100 + '%';
particle.style.animationDelay = Math.random() * 10 + 's';
particle.style.animationDuration = (Math.random() * 20 + 10) + 's';
container.appendChild(particle);
}
}
function initNeuralNetwork() { const canvas = document.getElementById('networkCanvas'); if (!canvas) return;
const ctx = canvas.getContext('2d');
function resizeCanvas() {
canvas.width = canvas.offsetWidth;
canvas.height = canvas.offsetHeight;
}
resizeCanvas();
window.addEventListener('resize', resizeCanvas);
const nodes = [];
const connections = [];
for (let i = 0; i < 15; i++) {
nodes.push({
x: Math.random() * canvas.width,
y: Math.random() * canvas.height,
vx: (Math.random() - 0.5) * 0.5,
vy: (Math.random() - 0.5) * 0.5,
radius: Math.random() * 3 + 2
});
}
for (let i = 0; i < nodes.length; i++) {
for (let j = i + 1; j < nodes.length; j++) {
if (Math.random() > 0.7) {
connections.push({
from: i,
to: j,
strength: Math.random()
});
}
}
}
function animate() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
nodes.forEach(node => {
node.x += node.vx;
node.y += node.vy;
if (node.x < 0 || node.x > canvas.width) node.vx *= -1;
if (node.y < 0 || node.y > canvas.height) node.vy *= -1;
ctx.beginPath();
ctx.arc(node.x, node.y, node.radius, 0, Math.PI * 2);
ctx.fillStyle = `rgba(76, 201, 240, ${0.7})`;
ctx.fill();
ctx.beginPath();
ctx.arc(node.x, node.y, node.radius * 3, 0, Math.PI * 2);
const gradient = ctx.createRadialGradient(
node.x, node.y, node.radius,
node.x, node.y, node.radius * 3
);
gradient.addColorStop(0, 'rgba(76, 201, 240, 0.3)');
gradient.addColorStop(1, 'rgba(76, 201, 240, 0)');
ctx.fillStyle = gradient;
ctx.fill();
});
connections.forEach(conn => {
const from = nodes[conn.from];
const to = nodes[conn.to];
const distance = Math.sqrt((from.x - to.x) ** 2 + (from.y - to.y) ** 2);
if (distance < 200) {
ctx.beginPath();
ctx.moveTo(from.x, from.y);
ctx.lineTo(to.x, to.y);
ctx.strokeStyle = `rgba(76, 201, 240, ${0.2 * conn.strength})`;
ctx.lineWidth = conn.strength;
ctx.stroke();
}
});
requestAnimationFrame(animate);
}
animate();
}
function startTypingEffect() { function typeWriter() { const subtitleElement = document.getElementById('subtitleText'); if (!subtitleElement) return;
const currentText = subtitleTexts[currentSubtitleIndex];
if (!isDeleting) {
subtitleElement.textContent = currentText.substring(0, currentCharIndex + 1);
currentCharIndex++;
if (currentCharIndex === currentText.length) {
isDeleting = true;
setTimeout(typeWriter, 2000);
} else {
setTimeout(typeWriter, 100);
}
} else {
subtitleElement.textContent = currentText.substring(0, currentCharIndex - 1);
currentCharIndex--;
if (currentCharIndex === 0) {
isDeleting = false;
currentSubtitleIndex = (currentSubtitleIndex + 1) % subtitleTexts.length;
setTimeout(typeWriter, 500);
} else {
setTimeout(typeWriter, 50);
}
}
}
typeWriter();
}
function startFortuneRotation() { let currentFortuneIndex = 0; function rotateFortune() { const fortuneText = document.getElementById('fortuneText'); if (!fortuneText) return;
fortuneText.style.opacity = '0';
setTimeout(() => {
currentFortuneIndex = (currentFortuneIndex + 1) % fortuneMessages.length;
fortuneText.textContent = fortuneMessages[currentFortuneIndex];
fortuneText.style.opacity = '1';
}, 500);
}
setInterval(rotateFortune, 4000);
}
function initCyberCursor() { const cyberCursor = document.getElementById('cyberCursor'); if (!cyberCursor) return;
let mouseX = 0, mouseY = 0;
let cursorX = 0, cursorY = 0;
document.addEventListener('mousemove', (e) => {
mouseX = e.clientX;
mouseY = e.clientY;
});
function animateCursor() {
const dx = mouseX - cursorX;
const dy = mouseY - cursorY;
cursorX += dx * 0.1;
cursorY += dy * 0.1;
cyberCursor.style.transform = `translate(${cursorX}px, ${cursorY}px)`;
requestAnimationFrame(animateCursor);
}
animateCursor();
}
function startStatsCounter() { function animateCounter(element, target, duration = 2000) { let start = 0; const increment = target / (duration / 16);
function updateCounter() {
start += increment;
if (start < target) {
element.textContent = Math.floor(start);
requestAnimationFrame(updateCounter);
} else {
element.textContent = target;
}
}
updateCounter();
}
const observerOptions = {
threshold: 0.5,
rootMargin: '0px 0px -50px 0px'
};
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const statNumbers = entry.target.querySelectorAll('.stat-number');
statNumbers.forEach(stat => {
const target = parseFloat(stat.getAttribute('data-target'));
animateCounter(stat, target);
});
observer.unobserve(entry.target);
}
});
}, observerOptions);
const statsContainer = document.querySelector('.stats-container');
if (statsContainer) {
observer.observe(statsContainer);
}
}"
my app.py ->"import os import random from fastapi import FastAPI, Request, HTTPException from fastapi.middleware.cors import CORSMiddleware from fastapi.responses import HTMLResponse, RedirectResponse from fastapi.staticfiles import StaticFiles from fastapi.templating import Jinja2Templates import uvicorn
Configuration from environment variables with defaults
APP_HOST = os.getenv("APP_HOST", "0.0.0.0") APP_PORT = int(os.getenv("PORT", "5000")) DEBUG = os.getenv("DEBUG", "false").lower() == "true"
Global ML availability flag
ML_AVAILABLE = False ML_ERROR = None
print("๐ Checking for ML modules...")
try: from src.constants import APP_HOST as ML_HOST, APP_PORT as ML_PORT print("โ ML constants imported successfully") except ImportError as e: print(f"โ ๏ธ ML constants import warning: {e}")
try: from src.pipline.prediction_pipeline import VehicleData, VehicleDataClassifier from src.pipline.training_pipeline import TrainPipeline ML_AVAILABLE = True print("โ ML modules imported successfully") except ImportError as e: ML_ERROR = str(e) print(f"๐ถ Running in demo mode - ML modules not available: {e}")
Initialize FastAPI application
app = FastAPI( title="InsuranceIQ AI", description="AI-Powered Vehicle Insurance Predictor", version="1.0.0", docs_url="/docs", redoc_url="/redoc" )
Mount static files
app.mount("/static", StaticFiles(directory="static"), name="static")
Set up templates
templates = Jinja2Templates(directory="templates")
CORS configuration
app.add_middleware( CORSMiddleware, allow_origins=[""], allow_credentials=True, allow_methods=[""], allow_headers=["*"], )
class DataForm: """Enhanced DataForm class with robust error handling"""
def __init__(self, request: Request):
self.request = request
self.errors = []
async def validate_and_extract(self):
"""Validate and extract form data with comprehensive error handling"""
try:
form_data = await self.request.form()
# Define field validations
validations = [
("Gender", self._safe_str, "Male"),
("Age", self._safe_int_range, (25, 18, 100)),
("Driving_License", self._safe_int_range, (1, 0, 1)),
("Region_Code", self._safe_float_range, (28.0, 0.0, 100.0)),
("Previously_Insured", self._safe_int_range, (0, 0, 1)),
("Annual_Premium", self._safe_float_range, (2630.0, 0.0, 1000000.0)),
("Policy_Sales_Channel", self._safe_float_range, (26.0, 0.0, 200.0)),
("Vintage", self._safe_int_range, (217, 0, 1000)),
("Vehicle_Age", self._safe_str, "< 1 Year"),
("Vehicle_Damage", self._safe_str, "Yes")
]
# Process all fields
for field_name, validator, default in validations:
try:
value = form_data.get(field_name)
if field_name == "Vehicle_Damage":
setattr(self, field_name, "Yes" if value == "Yes" else "No")
else:
setattr(self, field_name, validator(value, default))
except Exception as e:
self.errors.append(f"Field {field_name}: {str(e)}")
setattr(self, field_name, default[0] if isinstance(default, tuple) else default)
return len(self.errors) == 0
except Exception as e:
self.errors.append(f"Form processing error: {str(e)}")
return False
def _safe_str(self, value, default):
"""Safe string conversion"""
if value in [None, "", "NA", "null", "undefined"]:
return default
return str(value).strip()
def _safe_int_range(self, value, default_config):
"""Safe integer conversion with range validation"""
default, min_val, max_val = default_config
try:
if value in [None, "", "NA", "null", "undefined"]:
return default
num = int(float(value))
if min_val is not None and num < min_val:
return min_val
if max_val is not None and num > max_val:
return max_val
return num
except (ValueError, TypeError):
return default
def _safe_float_range(self, value, default_config):
"""Safe float conversion with range validation"""
default, min_val, max_val = default_config
try:
if value in [None, "", "NA", "null", "undefined"]:
return default
num = float(value)
if min_val is not None and num < min_val:
return min_val
if max_val is not None and num > max_val:
return max_val
return num
except (ValueError, TypeError):
return default
============================================
FIXED ROUTES - BOTH GET AND POST FOR ROOT
============================================
@app.get("/", response_class=HTMLResponse) @app.post("/", response_class=HTMLResponse) async def index(request: Request): """Render the main application page - handles both GET and POST"""
# If it's a POST request, process the form
if request.method == "POST":
return await handle_prediction(request)
# If it's a GET request, just render the page
return templates.TemplateResponse(
"vehicledata.html",
{
"request": request,
"context": "Rendering",
"ml_available": ML_AVAILABLE
}
)
async def handle_prediction(request: Request): """Handle prediction logic for POST requests""" try: # Process form data form = DataForm(request) is_valid = await form.validate_and_extract()
if not is_valid and form.errors:
print(f"Form validation errors: {form.errors}")
# Prepare vehicle data
vehicle_data_dict = {
"Gender": form.Gender,
"Age": form.Age,
"Driving_License": form.Driving_License,
"Region_Code": form.Region_Code,
"Previously_Insured": form.Previously_Insured,
"Vehicle_Age": form.Vehicle_Age,
"Vehicle_Damage": 1 if form.Vehicle_Damage == "Yes" else 0,
"Annual_Premium": form.Annual_Premium,
"Policy_Sales_Channel": form.Policy_Sales_Channel,
"Vintage": form.Vintage
}
prediction_result = None
confidence = 0.0
ml_successful = ML_AVAILABLE # Start with global ML availability
# Try ML prediction if available
if ML_AVAILABLE:
try:
# Create VehicleData object
vehicle_data = VehicleData(**vehicle_data_dict)
# Make prediction
model_predictor = VehicleDataClassifier()
result = model_predictor.predict(vehicle_data)
# Determine prediction result
prediction_value = result.get("prediction", 0)
prediction_result = "Response-Yes" if prediction_value == 1 else "Response-No"
confidence = result.get("confidence", random.uniform(0.85, 0.95) if prediction_result == "Response-Yes" else random.uniform(0.15, 0.35))
print(f"๐ฏ AI Prediction: {prediction_result} (Confidence: {confidence:.2f})")
ml_successful = True
except Exception as e:
print(f"โ ML prediction failed, falling back to demo: {e}")
ml_successful = False # ML failed for this request
# Fallback to demo mode if ML modules fail or aren't available
if not ML_AVAILABLE or not ml_successful or prediction_result is None:
# Smart demo mode based on input data
risk_score = 0
# Calculate risk factors
if form.Vehicle_Damage == "Yes":
risk_score += 2
if form.Age < 25:
risk_score += 1
if form.Previously_Insured == 0:
risk_score += 1
if form.Annual_Premium > 50000:
risk_score -= 1
# Determine prediction based on risk
if risk_score <= 1:
prediction_result = "Response-Yes"
confidence = round(random.uniform(0.75, 0.95), 2)
else:
prediction_result = "Response-No"
confidence = round(random.uniform(0.65, 0.85), 2)
print(f"๐ฏ Demo Prediction: {prediction_result} (Risk Score: {risk_score}, Confidence: {confidence:.2f})")
# Return the enhanced result page
return templates.TemplateResponse(
"vehicledata.html",
{
"request": request,
"context": prediction_result,
"prediction_data": {
"value": 1 if prediction_result == "Response-Yes" else 0,
"confidence": confidence,
"mode": "AI" if ml_successful else "Demo"
},
"ml_available": ML_AVAILABLE
}
)
except Exception as e:
print(f"โ Prediction error: {e}")
import traceback
traceback.print_exc()
return templates.TemplateResponse(
"vehicledata.html",
{
"request": request,
"context": "Error",
"error_message": "Our AI system is temporarily unavailable. Please try again in a moment.",
"ml_available": ML_AVAILABLE
}
)
@app.get("/train") async def train_route(): """Endpoint to train the machine learning model""" if not ML_AVAILABLE: raise HTTPException( status_code=503, detail="ML modules not available - running in demo mode" )
try:
train_pipeline = TrainPipeline()
train_pipeline.run_pipeline()
return {
"status": "success",
"message": "Training completed successfully!",
"model_accuracy": "98.7%"
}
except Exception as e:
raise HTTPException(status_code=500, detail=f"Training failed: {str(e)}")
@app.get("/predict") async def predict_get(): """Handle GET requests to /predict - redirect to home""" return RedirectResponse(url="/", status_code=303)
@app.post("/predict") async def predict_route(request: Request): """Alternative prediction endpoint""" return await handle_prediction(request)
@app.get("/health") async def health_check(): """Comprehensive health check endpoint for CI/CD and monitoring""" health_status = { "status": "healthy", "service": "InsuranceIQ AI", "version": "1.0.0", "ml_available": ML_AVAILABLE, "ml_error": ML_ERROR if not ML_AVAILABLE else None, "environment": "production" }
# Add additional checks if needed
try:
# Check if templates are accessible
templates.get_template("vehicledata.html")
health_status["templates"] = "ok"
except Exception as e:
health_status["templates"] = f"error: {str(e)}"
health_status["status"] = "degraded"
return health_status
@app.get("/info") async def info(): """Service information endpoint""" return { "service": "InsuranceIQ AI", "version": "1.0.0", "description": "AI-Powered Vehicle Insurance Predictor", "status": "operational", "ml_mode": "AI" if ML_AVAILABLE else "Demo", "supported_features": ["insurance_prediction", "risk_assessment"] }
if name == "main": print(f"๐ Starting InsuranceIQ AI Server...") print(f"๐ Host: {APP_HOST}") print(f"๐ Port: {APP_PORT}") print(f"๐ค ML Mode: {'AI' if ML_AVAILABLE else 'Demo'}") print(f"๐ Debug: {DEBUG}")
# Run the application
uvicorn.run(
"app:app",
host=APP_HOST,
port=APP_PORT,
reload=DEBUG,
log_level="info" if DEBUG else "warning"
)"
make the front an state of art , please make the animation frontend look absolutely stunning , and give a message either if we click on predict or train i have make this project in python 3.11 version so rewrite the whole new code for me