src/templates/dashboard/help.html

{% extends "base.html" %}

{% block title %}Help & Resources - QuantVAT{% endblock %}
{% block description %}Documentation, setup guides, and community resources for the Quantitative Crypto Volume Analysis Toolkit.{% endblock %}
{% block og_title %}Help & Resources - QuantVAT{% endblock %} 
{% block og_description %}Documentation, setup guides, and community resources for the Quantitative Crypto Volume Analysis Toolkit.{% endblock %} 
{% block keywords %}help page, crypto dashboard, cryptovat, trading tools{% endblock %} 
{% block extra_css %}
<style>
    /* --- TYPOGRAPHY FIXES --- */
    .card p {
        color: #94a3b8;
        line-height: 1.6;
        font-size: 0.95rem;
        margin-bottom: 15px;
    }

    .card strong {
        color: #f1f5f9;
        font-weight: 700;
    }
    
    /* --- RESOURCE GRID --- */
    .grid-social {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 15px;
        margin-top: 20px;
    }

    /* --- SOFT BLUE BUTTONS --- */
    .btn-resource {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        width: 100%;
        padding: 14px;
        
        background: rgba(59, 130, 246, 0.08); 
        border: 1px solid rgba(59, 130, 246, 0.2); 
        color: #e2e8f0;
        
        font-weight: 500;
        border-radius: 8px;
        transition: all 0.2s ease;
        box-sizing: border-box;
        margin-bottom: 15px;
        font-size: 0.95rem;
        text-decoration: none;
    }

    .btn-resource:hover {
        background: rgba(59, 130, 246, 0.15);
        border-color: #3b82f6;
        color: #ffffff;
        transform: translateY(-2px);
    }

    .grid-social .btn-resource {
        margin-bottom: 0;
    }
    
    /* --- LIST STYLING --- */
    .guide-list {
        padding-left: 20px;
        margin: 0;
        color: #94a3b8;
    }
    .guide-list li {
        margin-bottom: 12px;
        line-height: 1.6;
    }

    @media (max-width: 600px) {
        .grid-social { grid-template-columns: 1fr; }
    }
</style>
{% endblock %}

{% block content %}
<div class="container">
    <h1 style="display:flex; align-items:center; gap:10px;">
        <span>📚</span> Help & Information
    </h1>
    
    <div class="card">
        <h2 style="color: var(--accent-green);">About QuantVAT</h2>
        <p>
         <strong>Quantitative Crypto Volume Analysis Toolkit</strong> is an ecosystem built for data-driven traders. It tracks volumetric activity, performing cross-market analysis by fusing Spot and Futures data. In addition, it features the <strong>Deep Diver Engine</strong> for spot analysis and a semi-automated <strong>Trading Journal</strong> with blunt AI auditing.
         </p>
    </div>

    <div class="card">
        <h2 style="color: var(--accent-green);">Quick Start Guide</h2>
        <ol class="guide-list">
            <li><strong>Register & Login:</strong> Create your account. It is easy, fast, and free.</li>
            <li><strong>Setup Wizard:</strong> Configure your API keys (CoinMarketCap, etc.) once.</li>
            <li><strong>Spot Scan:</strong> Tap to identify volume-weighted spot tokens in the last 24 hours.</li>
            <li><strong>Futures Data:</strong> Export PDF from CoinAlyze and upload it here.</li>
            <li><strong>Cross-Analysis:</strong> The engine fuses data to generate your OISS score.</li>
            <li><strong>Report:</strong> Download your professional PDF report instantly.</li>
        </ol>
    </div>

    <div class="card">
        <h2 style="color: var(--accent-green);">Learn & Connect</h2>   
        <a href="https://github.com/heisbuba/quantvat" class="btn-resource" target="_blank">
            <span>📖</span> Github Documentation
        </a> 
        <h3 style="font-size:1rem; color:#94a3b8; margin: 25px 0 15px;">Follow Project</h3>
        <div class="grid-social">
            <a href="https://x.com/quantvat" class="btn-resource" target="_blank">
              <span>𝕏</span> Twitter</a>
           </div>
    </div>
   
</div>
{% endblock %}