vn-stock-analysis-app/templates/home.html

{% extends "base.html" %}

{% block title %}Trang chủ VNINDEX - Phân tích thị trường chứng khoán Việt Nam{% endblock %}

{% block og_title %}Trang chủ VNINDEX - Phân tích thị trường chứng khoán Việt Nam{% endblock %}
{% block twitter_title %}Trang chủ VNINDEX - Phân tích thị trường chứng khoán Việt Nam{% endblock %}

{% block head %}
<style>
    .chart-container {
        position: relative;
        height: 50vh;
        width: 100%;
        background: #fff;
        border-radius: 8px;
        padding: 20px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.08);
        margin-bottom: 30px;
    }
    .info-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 20px;
    }
    .info-card {
        background: #fff;
        border-radius: 8px;
        padding: 20px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    }
    .info-card h3 {
        margin-top: 0;
        border-bottom: 1px solid #eee;
        padding-bottom: 10px;
        margin-bottom: 15px;
    }
    .info-card ul {
        list-style: none;
        padding: 0;
    }
    .info-card ul li {
        display: flex;
        justify-content: space-between;
        padding: 8px 0;
        border-bottom: 1px solid #f0f0f0;
    }
    .info-card ul li:last-child {
        border-bottom: none;
    }
    .info-card .label {
        font-weight: 600;
        color: #555;
    }
    .info-card .value {
        color: #1a2332;
    }
    .ai-analysis-card {
        background: #e3f2fd;
        padding: 20px;
        border-radius: 8px;
        margin-top: 20px;
    }
    .ai-analysis-card h3 {
        text-align: center;
        color: #0d47a1;
    }
    #vnindex-groq-form {
        display: flex;
        gap: 10px;
        margin-bottom: 15px;
    }
    #vnindex-groq-form input[type="text"] {
        flex-grow: 1;
        border: 1px solid #ccc;
        padding: 8px 12px;
        border-radius: 4px;
    }
    #vnindex-groq-form button {
        background-color: #1976d2;
        color: white;
        border: none;
        padding: 8px 16px;
        border-radius: 4px;
        cursor: pointer;
        transition: background-color 0.2s;
    }
    #vnindex-groq-form button:hover {
        background-color: #1565c0;
    }
    #vnindex-groq-result {
        background-color: #fff;
        padding: 15px;
        border-radius: 4px;
        min-height: 50px;
        white-space: pre-wrap;
        font-family: monospace;
    }
</style>
{% endblock %}

{% block header_title %}
    Tổng quan thị trường - VNINDEX - Phân tích bằng AI
{% endblock %}

{% block content %}
<div class="chart-container">
    <canvas id="vnindexMainChart"></canvas>
</div>

<div class="chart-grid">
    <canvas id="priceChart"></canvas>
    <canvas id="volumeChart"></canvas>
    <canvas id="pvChart"></canvas>
    <canvas id="mfiChart"></canvas>
</div>

<div class="info-grid">
    <div class="info-card">
        <h3><i class="fas fa-wave-square"></i> Mức Fibonacci</h3>
        {% if vnindex_fibonacci_levels %}
            <ul>
                {% for level in vnindex_fibonacci_levels %}
                    <li>{{ level }}</li>
                {% endfor %}
            </ul>
        {% else %}
            <p>Không có dữ liệu Fibonacci.</p>
        {% endif %}
    </div>

    <div class="info-card">
        <h3><i class="fas fa-chart-pie"></i> Mẫu hình nến</h3>
        {% if vnindex_pattern_results %}
            <ul>
                {% for pattern, last_date in vnindex_pattern_results.items() if last_date %}
                    <li><span class="label">{{ pattern }}</span> <span class="value">{{ last_date.strftime('%d-%m-%Y') }}</span></li>
                {% endfor %}
            </ul>
        {% else %}
            <p>Không tìm thấy mẫu hình nến nào.</p>
        {% endif %}
    </div>
</div>

<div class="ai-analysis-card">
    <h3><i class="fas fa-robot"></i> Phân tích với AI (Groq)</h3>
    <form id="vnindex-groq-form">
        <input type="hidden" name="symbol" value="VNINDEX">
        <input type="text" name="question" placeholder="Nhập câu hỏi về xu hướng, dòng tiền... (tùy chọn)">
        <button type="submit">Phân tích</button>
        <span id="vnindex-ai-loading" class="spinner" style="display:none;"></span>
    </form>
    <div id="vnindex-groq-result">
        {{ groq_ai_result|safe if groq_ai_result else 'Kết quả phân tích sẽ hiển thị ở đây.' }}
    </div>
</div>

<div class="info-card" style="margin-top: 30px;">
    <h3><i class="fas fa-newspaper"></i> Tin tức thị trường</h3>
    <div class="ai-analysis-card" style="background-color: #f0f4f8; margin-bottom: 20px;">
        <h4 style="text-align: center; color: #333;">Tổng hợp và Phân tích tin tức bằng AI</h4>
        <div id="news-analysis-result" style="white-space: pre-wrap; font-family: sans-serif; font-size: 14px; color: #444;">
            {{ news_analysis|safe if news_analysis else 'Không có phân tích tin tức.' }}
        </div>
    </div>
    
    {% if news_items %}
        <ul class="news-list">
            {% for item in news_items %}
                <li class="news-item">
                    <a href="{{ item.link }}" target="_blank" rel="noopener noreferrer">{{ item.title }}</a>
                </li>
            {% endfor %}
        </ul>
    {% else %}
        <p>Không có tin tức để hiển thị.</p>
    {% endif %}
</div>

<style>
.news-list {
    list-style: none;
    padding: 0;
    max-height: 400px;
    overflow-y: auto;
}
.news-item {
    padding: 10px 5px;
    border-bottom: 1px solid #eee;
}
.news-item:last-child {
    border-bottom: none;
}
.news-item a {
    text-decoration: none;
    color: #337ab7;
    font-weight: 500;
}
.news-item a:hover {
    text-decoration: underline;
    color: #23527c;
}
</style>
{% endblock %}

{% block scripts %}
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-chart-financial"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-annotation"></script>
<script type="module" src="{{ url_for('static', filename='js/home.js') }}"></script>
{% endblock %}