Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <meta name="theme-color" content="#151a1e"> | |
| <title>QuantVAT - Quantitative Crypto Volume Analysis Toolkit</title> | |
| <meta name="description" content="Quantitative Crypto Volume Analysis Toolkit for cross-market Spot/Futures analysis, tracking & automated data-driven PDF reporting."> | |
| <meta property="og:title" content="QuantVAT: Crypto Volume Analysis Toolkit"> | |
| <meta property="og:description" content="Quantitative Crypto Volume Analysis Toolkit for cross-market Spot/Futures analysis, tracking & automated data-driven PDF reporting."> | |
| <meta property="og:url" content="https://quantvat.hf.space"> | |
| <link rel="manifest" href="/manifest.json"> | |
| <meta property="og:type" content="website"> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;800&display=swap" rel="stylesheet"> | |
| <script> | |
| if ('serviceWorker' in navigator) { | |
| window.addEventListener('load', () => { | |
| navigator.serviceWorker.register('/sw.js') | |
| .then(reg => console.log('QuantVAT: Service Worker Active')) | |
| .catch(err => console.error('PWA Registration Error', err)); | |
| }); | |
| } | |
| </script> | |
| <script type="application/ld+json"> | |
| { | |
| "@context": "https://schema.org", | |
| "@type": "SoftwareApplication", | |
| "name": "QuantVAT", | |
| "operatingSystem": "Web", | |
| "applicationCategory": "FinanceApplication", | |
| "description": "Quantitative Crypto Volume Analysis Toolkit for cross-market Spot/Futures analysis.", | |
| "offers": { | |
| "@type": "Offer", | |
| "price": "0", | |
| "priceCurrency": "USD" | |
| }, | |
| "author": { | |
| "@type": "Person", | |
| "name": "Buba", | |
| "url": "https://x.com/heisbuba" | |
| } | |
| } | |
| </script> | |
| <style> | |
| :root { | |
| --bg-main: #151a1e; | |
| --bg-glass: rgba(21, 26, 30, 0.90); | |
| --bg-card: #1e252a; | |
| --accent-green: #10b981; | |
| --accent-orange: #f59e0b; | |
| --text-white: #ffffff; | |
| --text-gray: #848e9c; | |
| --border: #2b3139; | |
| } | |
| body { | |
| margin: 0; | |
| font-family: 'Inter', sans-serif; | |
| background-color: var(--bg-main); | |
| color: var(--text-white); | |
| overflow-x: hidden; | |
| } | |
| a { text-decoration: none; transition: 0.2s; } | |
| ul { list-style: none; padding: 0; } | |
| /* --- MODERN NAVBAR --- */ | |
| .navbar { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 90px; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding: 0 5%; | |
| box-sizing: border-box; | |
| z-index: 1000; | |
| /* Initial State: Transparent */ | |
| background: transparent; | |
| border-bottom: 1px solid transparent; | |
| transition: all 0.3s ease-in-out; | |
| } | |
| /* The "Scrolled" State (Glassmorphism) */ | |
| .navbar.scrolled { | |
| height: 70px; | |
| background: rgba(21, 26, 30, 0.85); | |
| backdrop-filter: blur(16px); | |
| border-bottom: 1px solid rgba(255, 255, 255, 0.05); | |
| box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); | |
| } | |
| .logo { | |
| font-size: 1.4rem; | |
| font-weight: 800; | |
| color: var(--text-white); | |
| letter-spacing: -0.5px; | |
| } | |
| .logo span { color: var(--accent-green); } | |
| .nav-links { display: flex; gap: 40px; align-items: center; } | |
| .nav-links a { | |
| color: var(--text-gray); | |
| font-weight: 500; | |
| font-size: 0.9rem; | |
| position: relative; | |
| transition: color 0.3s; | |
| } | |
| /* Modern Hover Underline Animation */ | |
| .nav-links a::after { | |
| content: ''; | |
| position: absolute; | |
| width: 0; | |
| height: 2px; | |
| bottom: -5px; | |
| left: 0; | |
| background-color: var(--accent-green); | |
| transition: width 0.3s; | |
| } | |
| .nav-links a:hover { color: var(--text-white); } | |
| .nav-links a:hover::after { width: 100%; } | |
| .nav-actions { display: flex; gap: 15px; } | |
| .btn { | |
| padding: 10px 20px; | |
| border-radius: 8px; | |
| font-weight: 600; | |
| font-size: 0.9rem; | |
| cursor: pointer; | |
| border: none; | |
| display: inline-block; | |
| transition: transform 0.2s, opacity 0.2s; | |
| } | |
| .btn:hover { transform: translateY(-1px); opacity: 0.9; } | |
| .btn-login { | |
| color: var(--text-white); | |
| border: 1px solid var(--accent-green); | |
| background: transparent; | |
| } | |
| .btn-primary { | |
| background: var(--accent-green); | |
| color: #000; | |
| } | |
| /* --- MOBILE MENU (Full Screen Overlay) --- */ | |
| .hamburger { display: none; cursor: pointer; color: white; font-size: 1.5rem; } | |
| .mobile-menu { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 0; | |
| background: rgba(21, 26, 30, 0.98); | |
| backdrop-filter: blur(20px); | |
| overflow: hidden; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 30px; | |
| z-index: 1001; | |
| transition: height 0.4s cubic-bezier(0.4, 0, 0.2, 1); | |
| } | |
| .mobile-menu.active { height: 100vh; } | |
| .mobile-menu a { font-size: 1.2rem; font-weight: 600; color: var(--text-white); } | |
| .close-menu { position: absolute; top: 30px; right: 30px; font-size: 2rem; cursor: pointer; color: var(--text-gray); } | |
| /* --- HERO --- */ | |
| .hero { | |
| text-align: center; | |
| padding: 160px 20px 60px; | |
| background: radial-gradient(circle at top center, rgba(16, 185, 129, 0.08) 0%, transparent 60%); | |
| } | |
| .hero h1 { | |
| font-size: 3rem; | |
| font-weight: 800; | |
| margin-bottom: 20px; | |
| line-height: 1.1; | |
| color: var(--text-white); | |
| } | |
| .hero h1 span { color: var(--accent-green); } | |
| .hero p { | |
| font-size: 1.1rem; | |
| color: var(--text-gray); | |
| max-width: 650px; | |
| margin: 0 auto 40px; | |
| line-height: 1.6; | |
| } | |
| .hero-buttons { display: flex; gap: 20px; justify-content: center; } | |
| /* --- STATS SECTION --- */ | |
| .stats-container { | |
| display: flex; | |
| justify-content: center; | |
| gap: 50px; | |
| padding: 40px 20px; | |
| border-bottom: 1px solid var(--border); | |
| max-width: 800px; | |
| margin: 0 auto 60px; | |
| } | |
| .stat-item { text-align: center; } | |
| .stat-number { | |
| font-size: 2rem; | |
| font-weight: 800; | |
| color: var(--text-white); | |
| display: block; | |
| } | |
| .stat-label { | |
| color: var(--text-gray); | |
| font-size: 0.85rem; | |
| text-transform: uppercase; | |
| letter-spacing: 1px; | |
| margin-top: 5px; | |
| } | |
| /* --- FEATURES --- */ | |
| .section-title { | |
| text-align: center; | |
| font-size: 2rem; | |
| margin-bottom: 10px; | |
| color: var(--text-white); | |
| } | |
| .section-subtitle { | |
| text-align: center; | |
| color: var(--text-gray); | |
| margin-bottom: 50px; | |
| } | |
| .features { | |
| max-width: 1100px; | |
| margin: 0 auto; | |
| padding: 40px 20px 80px; | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); | |
| gap: 30px; | |
| } | |
| .feature-card { | |
| background: var(--bg-card); | |
| border: 1px solid var(--border); | |
| padding: 30px; | |
| border-radius: 12px; | |
| transition: transform 0.2s; | |
| } | |
| .feature-card:hover { | |
| transform: translateY(-5px); | |
| border-color: var(--accent-green); | |
| } | |
| .feature-icon { | |
| font-size: 1.8rem; | |
| margin-bottom: 20px; | |
| display: inline-block; | |
| padding: 12px; | |
| background: rgba(16, 185, 129, 0.1); | |
| border-radius: 8px; | |
| color: var(--accent-green); | |
| } | |
| .feature-card h3 { margin-top: 0; color: var(--text-white); } | |
| .feature-card p { color: var(--text-gray); line-height: 1.5; font-size: 0.95rem; } | |
| /* --- PRICING --- */ | |
| .pricing-section { | |
| padding: 80px 20px; | |
| background: linear-gradient(to bottom, var(--bg-main), #111518); | |
| text-align: center; | |
| } | |
| .pricing-card { | |
| background: var(--bg-card); | |
| border: 1px solid var(--accent-green); | |
| border-radius: 16px; | |
| padding: 50px 30px; | |
| max-width: 400px; | |
| margin: 0 auto; | |
| position: relative; | |
| box-shadow: 0 0 30px rgba(16, 185, 129, 0.1); | |
| } | |
| .badge { | |
| background: var(--accent-green); | |
| color: #000; | |
| padding: 5px 15px; | |
| border-radius: 20px; | |
| font-size: 0.75rem; | |
| font-weight: 700; | |
| position: absolute; | |
| top: -15px; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| letter-spacing: 0.5px; | |
| } | |
| .price { font-size: 3.5rem; font-weight: 800; color: var(--text-white); margin: 20px 0 5px; } | |
| .period { color: var(--text-gray); font-size: 1rem; } | |
| .feature-list { margin: 30px 0; text-align: left; padding-left: 20px; display: inline-block; } | |
| .feature-list li { margin-bottom: 12px; color: var(--text-gray); font-size: 0.95rem; } | |
| .feature-list li span { color: var(--accent-green); margin-right: 10px; font-weight: bold; } | |
| /* --- FOOTER --- */ | |
| .footer { | |
| background: transparent; | |
| border-top: 1px solid var(--border); | |
| padding: 40px 5%; | |
| margin-top: auto; | |
| text-align: center; | |
| font-size: 0.9rem; | |
| color: var(--text-dim); | |
| font-weight: 500; | |
| } | |
| .footer a { color: var(--accent-green); font-weight: 600; } | |
| .footer a:hover { opacity: 0.8; } | |
| /* --- MOBILE RESPONSIVE --- */ | |
| @media (max-width: 768px) { | |
| .nav-links, .nav-actions { display: none; } | |
| .hamburger { display: block; } | |
| .hero h1 { font-size: 1.8rem; } | |
| .hero-buttons { flex-direction: column; } | |
| .btn { width: 100%; text-align: center; box-sizing: border-box; } | |
| .mobile-menu .btn { | |
| width: 90%; | |
| max-width: 350px; | |
| margin: 0 auto; | |
| } | |
| .stats-container { flex-direction: column; gap: 30px; } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <nav class="navbar"> | |
| <a href="{{ url_for('main.home') if session.get('user_id') else url_for('main.index') }}" | |
| style="display: flex; align-items: center; gap: 0; text-decoration: none;"> | |
| <svg width="28" height="28" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg" | |
| style="margin-bottom: 2px; margin-right: -2px; flex-shrink: 0; forced-color-adjust: none;"> | |
| <rect width="512" height="512" rx="120" fill="#151a1e"/> | |
| <path d="M380 380L430 430" stroke="#ffffff" stroke-width="32" stroke-linecap="round"/> | |
| <circle cx="256" cy="256" r="160" stroke="#ffffff" stroke-width="32"/> | |
| <rect x="190" y="270" width="30" height="60" rx="4" fill="var(--accent-green)"/> | |
| <rect x="241" y="230" width="30" height="100" rx="4" fill="var(--accent-green)"/> | |
| <rect x="292" y="190" width="30" height="140" rx="4" fill="var(--accent-green)"/> | |
| </svg> | |
| <span style="font-weight: 800; font-size: 1.4rem; letter-spacing: -1px; color: #fff; line-height: 1;"> | |
| uant<span style="color: var(--accent-green);">VAT</span> | |
| </span> | |
| </a> | |
| <div class="nav-links"> | |
| <a href="#features">Features</a> | |
| <a href="#pricing">Pricing</a> | |
| <a href="https://github.com/heisbuba/quantvat" target="_blank" title="View Source Code on Github">Github β</a> | |
| <a href="https://x.com/quantvat" target="_blank">π (Twitter)</a> | |
| </div> | |
| <div class="nav-actions"> | |
| {% if session.get('user_id') %} | |
| <a href="{{ url_for('main.home') }}" class="btn btn-primary">Go to Dashboard β</a> | |
| {% else %} | |
| <a href="{{ url_for('auth.login') }}" class="btn btn-login">Log In</a> | |
| <a href="{{ url_for('auth.register') }}" class="btn btn-primary">Get Started</a> | |
| {% endif %} | |
| </div> | |
| <div class="hamburger" onclick="toggleMenu()">β°</div> | |
| </nav> | |
| <div class="mobile-menu" id="mobileMenu"> | |
| <div class="close-menu" onclick="toggleMenu()">Γ</div> | |
| <a href="{{ url_for('main.index') }}" onclick="toggleMenu()">Home</a> | |
| <a href="#features" onclick="toggleMenu()">Features</a> | |
| <a href="#pricing" onclick="toggleMenu()">Pricing</a> | |
| <a href="https://github.com/heisbuba/quantvat" target="_blank" title="View Source Code on Github">Github β</a> | |
| <a href="https://x.com/quantvat" target="_blank">π (Twitter)</a> | |
| <div style="width: 50%; height: 1px; background: var(--border); margin: 10px 0;"></div> | |
| {% if session.get('user_id') %} | |
| <a href="{{ url_for('main.home') }}" class="btn btn-primary">Go to Dashboard</a> | |
| {% else %} | |
| <a href="{{ url_for('auth.login') }}" class="btn btn-login" style="width: auto; padding: 10px 40px;">Log In</a> | |
| <a href="{{ url_for('auth.register') }}" class="btn btn-primary" style="width: auto; padding: 10px 40px;">Get Started</a> | |
| {% endif %} | |
| </div> | |
| <section class="hero"> | |
| <h1>Quantitative Crypto Volume Analysis Toolkit | |
| </h1> | |
| <p> | |
| Merge Spot and Futures data to perform cross-market analysis. Verify volume, track the VTMR metric, Funding Rate, OISS, and generate professional PDF reports in under 60 seconds. | |
| </p> | |
| <div class="hero-buttons"> | |
| {% if session.get('user_id') %} | |
| <a href="{{ url_for('main.home') }}" class="btn btn-primary" style="padding: 15px 40px; font-size: 1.1rem;"> | |
| Launch Dashboard β | |
| </a> | |
| {% else %} | |
| <a href="{{ url_for('auth.register') }}" class="btn btn-primary" style="padding: 15px 30px;"> | |
| Start Analysis Free | |
| </a> | |
| <a href="#features" class="btn btn-login" style="padding: 15px 30px;"> | |
| Learn Metrics | |
| </a> | |
| {% endif %} | |
| </div> | |
| </section> | |
| <div class="stats-container"> | |
| <div class="stat-item"> | |
| <span class="stat-number">6+</span> | |
| <span class="stat-label">Data Sources Verified</span> | |
| </div> | |
| <div class="stat-item"> | |
| <span class="stat-number">60s</span> | |
| <span class="stat-label">Analysis Speed</span> | |
| </div> | |
| <div class="stat-item"> | |
| <span class="stat-number">100%</span> | |
| <span class="stat-label">Private & Secure</span> | |
| </div> | |
| </div> | |
| <section id="features" class="features"> | |
| <div style="grid-column: 1 / -1; text-align: center; margin-bottom: 20px;"> | |
| <h2 class="section-title">QuantVAT Ecosystem</h2> | |
| <p class="section-subtitle">Easy to use "Bring Your Own Keys" environment for traders who require self-controlled data and manual API integration.</p> | |
| </div> | |
| <div class="feature-card"> | |
| <span class="feature-icon">π</span> | |
| <h3>VTMR Logic Engine</h3> | |
| <p>Tracks the <strong>Volume-to-MarketCap-Ratio</strong> to identify divergence between trading activity and market valuation. Useful for spotting high-potential opportunities before the crowd.</p> | |
| </div> | |
| <div class="feature-card"> | |
| <span class="feature-icon">β‘</span> | |
| <h3>OISS & Funding</h3> | |
| <p>Integrated <strong>Open Interest Signal Score</strong> and Funding Rate analysis. We filter out fake volume to show real money flow and crowd's sentiment.</p> | |
| </div> | |
| <div class="feature-card"> | |
| <span class="feature-icon">π§ </span> | |
| <h3>AI-Powered Trading Journal</h3> | |
| <p>A semi-automated trading journal system with an integrated <strong>AI Auditor</strong> that reviews your entries to help detect patterns in your execution and psychological stateβand is blunt about it. Your data remains secure in your Google Drive.</p> | |
| </div> | |
| <div class="feature-card"> | |
| <span class="feature-icon">π</span> | |
| <h3>Deep Diver Engine</h3> | |
| <p>A dedicated spot tokens browser and quantitative volumetric analysis engine. Analyze token metadata, price change percentage, <strong>VTPC, VTMR</strong>, and real-time velocity metrics to evaluate liquidity and price impact. Powered by CoinGecko.</p> | |
| </div> | |
| <div class="feature-card"> | |
| <span class="feature-icon">π</span> | |
| <h3>Automated Reporting</h3> | |
| <p>Generate clean, professional data-driven reports directly in your browser. Seamlessly transition to the <strong>Deep Diver</strong> engine for granular analysis, or archive your trade thesis for long-term edge refinement.</p> | |
| </div> | |
| <div class="feature-card"> | |
| <span class="feature-icon">π€</span> | |
| <h3>Open Source Core</h3> | |
| <p>100% Open Source code. Built for transparency, allowing users to verify the logic and contribute to the toolkit's development via GitHub.</p> | |
| </div> | |
| </section> | |
| <section id="pricing" class="pricing-section"> | |
| <h2 class="section-title">Free Access</h2> | |
| <p class="section-subtitle">Customizable tools provided free for the community with full data ownership.</p> | |
| <div class="pricing-card"> | |
| <div class="badge">v4.5.0 Available</div> | |
| <div class="price">$0<span class="period">/mo</span></div> | |
| <ul class="feature-list"> | |
| <li><span>β</span> <strong>Deep Diver:</strong> Spot Volumetric Analysis (VTPC/VTMR)</li> | |
| <li><span>β</span> <strong>AI Auditor:</strong> Blunt Psychological Trade Reviews</li> | |
| <li><span>β</span> <strong>BYOK Architecture:</strong> Use your own API keys</li> | |
| <li><span>β</span> <strong>Futures Fusion:</strong> Cross-Market Funding, OISS Scoring</li> | |
| <li><span>β</span> <strong>Data Privacy:</strong> Automated Google Drive Backups</li> | |
| <li><span>β</span> <strong>Reporting:</strong> Browser-based PDF Generation</li> | |
| </ul> | |
| {% if session.get('user_id') %} | |
| <a href="{{ url_for('main.home') }}" class="btn btn-primary" style="width: 100%; box-sizing: border-box;"> | |
| Go to Dashboard β | |
| </a> | |
| {% else %} | |
| <a href="{{ url_for('auth.register') }}" class="btn btn-primary" style="width: 100%; box-sizing: border-box;"> | |
| Create Free Account | |
| </a> | |
| {% endif %} | |
| </div> | |
| </section> | |
| <footer class="footer"> | |
| <p> | |
| © <span id="year"></span> | |
| <a href="{{ url_for('main.index') }}" title="Quantitative Crypto Volume Analysis Toolkit">QuantVAT</a>. Created by <a href="https://x.com/heisbuba" title="X @heisbuba" target="_blank">Buba</a> with Data curiosity. MIT Licensed. | |
| </p> | |
| </footer> | |
| <script> | |
| // Dynamic Sticky Navbar | |
| const navbar = document.querySelector('.navbar'); | |
| if (navbar) { | |
| window.addEventListener('scroll', function() { | |
| if (window.scrollY > 50) { | |
| navbar.classList.add('scrolled'); | |
| } else { | |
| navbar.classList.remove('scrolled'); | |
| } | |
| }, { | |
| passive: true | |
| }); | |
| } | |
| // Mobile Menu Toggle | |
| function toggleMenu() { | |
| const menu = document.getElementById('mobileMenu'); | |
| if (!menu) return; | |
| const isActive = menu.classList.toggle('active'); | |
| document.body.style.overflow = isActive ? 'hidden' : 'auto'; | |
| } | |
| // Auto Year | |
| const yearEl = document.getElementById('year'); | |
| if (yearEl) { | |
| yearEl.textContent = new Date().getFullYear(); | |
| } | |
| </script> | |
| {% include 'includes/partials/pwa_prompt.html' %} | |
| </body> | |
| </html> |