src/templates/base.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>{% block title %}QuantVAT - Crypto Volume Analysis Tool{% endblock %}</title>
    <meta name="description" content="{% block description %}Quantitative Crypto Volume Analysis Tool for cross-market Spot/Futures analysis, tracking & automated data-driven reporting.{% endblock %}">
    <meta name="keywords" content="{% block keywords %}crypto, volume analysis, spot, cryptoquant, volume anomaly, futures, trading tool, VTMR, open interest, coinalyze, heisbuba{% endblock %}">
    
    <meta name="author" content="Buba">
    <meta name="robots" content="index, follow">

    <meta property="og:title" content="{% block og_title %}QuantVAT - Professional Volume Analysis Tool{% endblock %}">
    <meta property="og:description" content="{% block og_description %}Track Spot & Futures volume like a pro. Detect whale movements and track VTMR data.{% endblock %}">
    <meta property="og:url" content="https://quantvat.hf.space{{ request.path }}">
    <meta property="og:type" content="website">
    <meta property="og:site_name" content="QuantVAT">

    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:site" content="@heisbuba">
    <meta name="twitter:creator" content="@heisbuba">
    <meta name="twitter:title" content="{% block twitter_title %}{{ self.og_title() }}{% endblock %}">
    <meta name="twitter:description" content="{% block twitter_description %}{{ self.og_description() }}{% endblock %}">
    <link rel="icon" type="image/svg+xml" href="{{ url_for('static', filename='logo.svg') }}">
    <link rel="apple-touch-icon" href="{{ url_for('static', filename='icons/icon-512.png') }}"> 
    <link rel="manifest" href="/manifest.json">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <meta name="theme-color" content="#151a1e">
    <script>
        try { if (localStorage.getItem('qv-theme') === 'light') document.documentElement.setAttribute('data-theme', 'light'); } catch (e) {}
    </script>
    <script src="{{ url_for('static', filename='js/theme.js') }}" defer></script>

  <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 Tool for cross-market Spot/Futures analysis.",
  "offers": {
    "@type": "Offer",
    "price": "0",
    "priceCurrency": "USD"
  },
  "author": {
    "@type": "Person",
    "name": "Buba",
    "url": "https://x.com/heisbuba"
  }
}
  </script>
   <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&family=Inter:wght@400;500;600;800&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/shared_tokens.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/base.css') }}">
    {% block extra_css %}{% endblock %}
</head>
<body>

    <div class="header">
        <h1>
          <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 class="force-dark" 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="var(--bg-dark)"/>
      <path d="M380 380L430 430" stroke="var(--text-main)" stroke-width="32" stroke-linecap="round"/>
      <circle cx="256" cy="256" r="160" stroke="var(--text-main)" 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: var(--text-main); line-height: 1;">
        uant<span style="color: var(--accent-green);">VAT</span>
    </span>
</a>
   
</h1>
        <div style="display: flex; align-items: center; gap: 5px;">
            <button type="button" id="theme-toggle" class="icon-btn theme-toggle" aria-pressed="false" aria-label="Switch to light theme" title="Switch to light theme">
                <svg class="icon-sun" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>
                <svg class="icon-moon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
            </button>

            <a href="{{ url_for('main.help_page') }}" class="icon-btn" title="Help">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
            </a>

            {% if session.get('user_id') %}
                {% if request.endpoint != 'main.setup' %}
                    <a href="{{ url_for('main.settings') }}" class="icon-btn" title="Settings">
                       <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                         <circle cx="12" cy="12" r="3"/>
                          <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06-.06a2 2 0 0 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06-.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51h.09a1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06-.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1Z"/>
                        </svg>
                     </a>
                {% endif %}
                
                <a href="{{ url_for('auth.logout') }}" class="icon-btn logout-btn" title="Logout">
                       <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><polyline points="16 17 21 12 16 7"></polyline><line x1="21" y1="12" x2="9" y2="12"></line></svg>
                   </a>
            {% endif %}
        </div>
    </div>

    <main>
        {% block content %}{% endblock %}
        
         <div class="back-nav-container">
    {%- if session.get('user_id') and request.endpoint not in ['main.home', 'main.setup', 'auth.login', 'auth.register', 'auth.reset_password', 'main.help_page'] -%}
        <a href="{{ url_for('main.home') }}" class="btn btn-links back-nav-btn">← BACK TO DASHBOARD</a>
    
    {%- elif request.endpoint == 'main.help_page' -%}
        {%- if session.get('user_id') -%}
            {%- if is_setup_complete -%}
                <a href="{{ url_for('main.home') }}" class="help-btn help-nav-btn back-nav-btn">← BACK TO DASHBOARD</a>
            {%- else -%}
                <a href="{{ url_for('main.setup') }}" class="help-btn help-nav-btn back-nav-btn">← BACK TO SETUP WIZARD</a>
            {%- endif -%}
        {%- else -%}
            {%- if request.referrer and 'register' in request.referrer -%}
                <a href="{{ url_for('auth.register') }}" class="help-btn help-nav-btn back-nav-btn">← BACK TO REGISTER</a>
            {%- elif request.referrer and 'reset-password' in request.referrer -%}
                 <a href="{{ url_for('auth.reset_password') }}" class="help-btn help-nav-btn back-nav-btn">← BACK TO RESET PASSWORD</a>
            {%- else -%}
                <a href="{{ url_for('auth.login') }}" class="help-btn help-nav-btn back-nav-btn">← BACK TO LOGIN</a>
            {%- endif -%}
        {%- endif -%}
    
    {%- elif request.endpoint == 'main.privacy_policy' -%}
        {%- if session.get('user_id') -%}
            {%- if is_setup_complete -%}
                <a href="{{ url_for('main.home') }}" class="help-btn help-nav-btn back-nav-btn">← BACK TO DASHBOARD</a>
            {%- else -%}
                <a href="{{ url_for('main.setup') }}" class="help-btn help-nav-btn back-nav-btn">← BACK TO SETUP WIZARD</a>
            {%- endif -%}
        {%- else -%}
            {%- if request.referrer and 'register' in request.referrer -%}
                <a href="{{ url_for('auth.register') }}" class="help-btn help-nav-btn back-nav-btn">← BACK TO REGISTER</a>
            {%- elif request.referrer and 'reset-password' in request.referrer -%}
                 <a href="{{ url_for('auth.reset_password') }}" class="help-btn help-nav-btn back-nav-btn">← BACK TO RESET PASSWORD</a>
            {%- else -%}
                <a href="{{ url_for('auth.login') }}" class="help-btn help-nav-btn back-nav-btn">← BACK TO LOGIN</a>
            {%- endif -%}
        {%- endif -%}
    {%- endif -%}
</div>
    </main>

    <footer class="footer">
    <p>
        &copy; 2026
        <a href="{{ url_for('main.index') }}" title="Quantitative Crypto Volume Analysis Tool">QuantVAT</a>. 
        Created by <a href="https://x.com/heisbuba" title="X @heisbuba" target="_blank">Buba</a> with curiosity.
    </p>
</footer>
{% if request.endpoint in ['auth.login', 'auth.register', 'main.settings'] %}
<script>
    function toggleFieldVisibility(inputId, btn) {
        const input = document.getElementById(inputId);
        const iconEye = btn.querySelector('.icon-eye');
        const iconEyeOff = btn.querySelector('.icon-eye-off');

        if (input.type === "password") {
            input.type = "text";
            iconEye.style.display = "none";
            iconEyeOff.style.display = "block";
        } else {
            input.type = "password";
            iconEye.style.display = "block";
            iconEyeOff.style.display = "none";
        }
    }
</script>
{% endif %}
</body>
</html>