views.py
# views.py
import csv
from django.shortcuts import render
from django.http import HttpResponse
from django.core.paginator import Paginator
from .models import Signal

def signal_list(request):
    signals = Signal.objects.all()

    # Get filter parameters from GET request
    symbol_filter = request.GET.get('symbol', '')
    date_from = request.GET.get('date_from', '')
    date_to = request.GET.get('date_to', '')
    price_change_min = request.GET.get('price_change_min', '')
    price_change_max = request.GET.get('price_change_max', '')
    run_date_from = request.GET.get('run_date_from', '')
    run_date_to = request.GET.get('run_date_to', '')

    # Apply filters
    if symbol_filter:
        signals = signals.filter(symbol__icontains=symbol_filter)
    if date_from:
        signals = signals.filter(timestamp__gte=date_from)
    if date_to:
        signals = signals.filter(timestamp__lte=date_to)
    if run_date_from:
        signals = signals.filter(run_date__date__gte=run_date_from)
    if run_date_to:
        signals = signals.filter(run_date__date__lte=run_date_to)
    if price_change_min:
        signals = signals.filter(price_change_24h__gte=price_change_min)
    if price_change_max:
        signals = signals.filter(price_change_24h__lte=price_change_max)

    # Order signals
    signals = signals.order_by('-run_date')

    # Separate signals by type
    buy_signals = signals.filter(signal_type='BUY')
    sell_signals = signals.filter(signal_type='SELL')
    sideways_signals = signals.filter(signal_type='SIDEWAYS')
    no_signal_signals = signals.filter(signal_type='NO_SIGNAL')

    # Apply pagination
    paginator_buy = Paginator(buy_signals, 50)
    paginator_sell = Paginator(sell_signals, 50)
    paginator_sideways = Paginator(sideways_signals, 50)
    paginator_no_signal = Paginator(no_signal_signals, 50)

    page_number_buy = request.GET.get('page_buy')
    page_number_sell = request.GET.get('page_sell')
    page_number_sideways = request.GET.get('page_sideways')
    page_number_no_signal = request.GET.get('page_no_signal')

    buy_signals_page = paginator_buy.get_page(page_number_buy)
    sell_signals_page = paginator_sell.get_page(page_number_sell)
    sideways_signals_page = paginator_sideways.get_page(page_number_sideways)
    no_signal_signals_page = paginator_no_signal.get_page(page_number_no_signal)

    context = {
        'buy_signals': buy_signals_page,
        'sell_signals': sell_signals_page,
        'sideways_signals': sideways_signals_page,
        'no_signal_signals': no_signal_signals_page,
        'symbol_filter': symbol_filter,
        'date_from': date_from,
        'date_to': date_to,
        'run_date_from': run_date_from,
        'run_date_to': run_date_to,
        'price_change_min': price_change_min,
        'price_change_max': price_change_max,
    }

    return render(request, 'signal_list.html', context)

def export_signals(request):
    signals = Signal.objects.all()

    # Apply the same filters as in signal_list
    symbol_filter = request.GET.get('symbol', '')
    date_from = request.GET.get('date_from', '')
    date_to = request.GET.get('date_to', '')
    price_change_min = request.GET.get('price_change_min', '')
    price_change_max = request.GET.get('price_change_max', '')
    run_date_from = request.GET.get('run_date_from', '')
    run_date_to = request.GET.get('run_date_to', '')

    # Apply filters
    if symbol_filter:
        signals = signals.filter(symbol__icontains=symbol_filter)
    if date_from:
        signals = signals.filter(timestamp__gte=date_from)
    if date_to:
        signals = signals.filter(timestamp__lte=date_to)
    if run_date_from:
        signals = signals.filter(run_date__date__gte=run_date_from)
    if run_date_to:
        signals = signals.filter(run_date__date__lte=run_date_to)
    if price_change_min:
        signals = signals.filter(price_change_24h__gte=price_change_min)
    if price_change_max:
        signals = signals.filter(price_change_24h__lte=price_change_max)

    # Create the HttpResponse object with CSV header
    response = HttpResponse(content_type='text/csv')
    response['Content-Disposition'] = 'attachment; filename="signals.csv"'

    writer = csv.writer(response)
    writer.writerow([
        'Run Date', 'Timestamp', 'Symbol', 'Price', '24h Price Change', 'Signal Type',
        'Stop Loss', 'Take Profit', 'Support', 'Resistance'
    ])

    for signal in signals:
        writer.writerow([
            signal.run_date,
            signal.timestamp,
            signal.symbol,
            signal.price,
            signal.price_change_24h,
            signal.signal_type,
            signal.stop_loss or '',
            signal.take_profit or '',
            signal.support or '',
            signal.resistance or '',
        ])

    return response

urls.py
from django.urls import path
from . import views
from .views import signal_list

urlpatterns = [
    #path('', views.home, name='home'),
    #path('home/', views.home, name='home'),
    path('signals/', views.signal_list, name='signal_list'),
    path('export/', views.export_signals, name='export_signals'),
]

<!-- templates/signal_list.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Trading Signals</title>
    <style>
        /* Styling for tabs /
        .tab {
            overflow: hidden;
            border: 1px solid #ccc;
            background-color: #f1f1f1;
            width: 80%;
            margin: auto;
        }
        .tab button {
            background-color: inherit;
            float: left;
            border: none;
            outline: none;
            cursor: pointer;
            padding: 14px 16px;
            transition: background-color 0.3s;
            font-size: 17px;
        }
        .tab button:hover {
            background-color: #ddd;
        }
        .tab button.active {
            background-color: #ccc;
        }
        
        / Style the content */
        .tabcontent {
            display: none;
            padding: 6px 12px;
            border-top: none;
            width: 80%;
            margin: auto;
        }
        
        table {
            width: 100%;
            border-collapse: collapse;
        }
        th, td {
            border: 1px solid rgb(14, 11, 182);
            padding: 8px;
            text-align: center;
        }
        th {
            background-color: #f2f2f2;
        }
        .filter-form {
            width: 80%;
            margin: auto;
            margin-bottom: 20px;
            border: 1px solid #ccc;
            padding: 10px;
        }
        .filter-form div {
            margin-bottom: 10px;
        }
        .filter-form label {
            margin-right: 5px;
        }
        .filter-form input {
            margin-right: 15px;
        }
    </style>
    
</head>
<body>
    <h1 style="text-align: center;">Trading Signals</h1>

    <form method="get" action="{% url 'export_signals' %}" class="filter-form">
        <!-- Include the same filters in the export request -->
        <!-- Hidden inputs to pass the filter parameters -->
        <input type="hidden" name="symbol" value="{{ symbol_filter }}">
        <input type="hidden" name="date_from" value="{{ date_from }}">
        <input type="hidden" name="date_to" value="{{ date_to }}">
        <input type="hidden" name="run_date_from" value="{{ run_date_from }}">
        <input type="hidden" name="run_date_to" value="{{ run_date_to }}">
        <input type="hidden" name="price_change_min" value="{{ price_change_min }}">
        <input type="hidden" name="price_change_max" value="{{ price_change_max }}">
    
        <button type="submit">Export CSV</button>
    </form>

    <!-- Filter Form -->
    <form method="get" class="filter-form">
        <div>
            <label for="symbol">Symbol:</label>
            <input type="text" id="symbol" name="symbol" value="{{ symbol_filter }}">
            <label for="date_from">Date From:</label>
            <input type="date" id="date_from" name="date_from" value="{{ date_from }}">
            <label for="date_to">Date To:</label>
            <input type="date" id="date_to" name="date_to" value="{{ date_to }}">
        </div>
        <div>
            <label for="price_change_min">24h Price Change Min:</label>
            <input type="number" step="any" id="price_change_min" name="price_change_min" value="{{ price_change_min }}">
            <label for="price_change_max">24h Price Change Max:</label>
            <input type="number" step="any" id="price_change_max" name="price_change_max" value="{{ price_change_max }}">
            <button type="submit">Filter</button>
        </div>
    </form>
    <div class="tab">
        <button class="tablinks" onclick="openTab(event, 'Buy')">Buy Signals</button>
        <button class="tablinks" onclick="openTab(event, 'Sell')">Sell Signals</button>
        <button class="tablinks" onclick="openTab(event, 'Sideways')">Sideways Signals</button>
        <button class="tablinks" onclick="openTab(event, 'NoSignal')">No Signal</button>
    </div>
<!-- Tab content -->
    <div id="Buy" class="tabcontent">
        <h2>Buy Signals</h2>
        {% include 'signal_table.html' with signals=buy_signals %}
    </div>

    <div id="Sell" class="tabcontent">
        <h2>Sell Signals</h2>
        {% include 'signal_table.html' with signals=sell_signals %}
    </div>

    <div id="Sideways" class="tabcontent">
        <h2>Sideways Signals</h2>
        {% include 'signal_table.html' with signals=sideways_signals %}
    </div>

    <div id="NoSignal" class="tabcontent">
        <h2>No Signal</h2>
        {% include 'signal_table.html' with signals=no_signal_signals %}
    </div>

   
    <script>
        function openTab(evt, tabName) {
            var i, tabcontent, tablinks;
            
            // Hide all tabcontent
            tabcontent = document.getElementsByClassName("tabcontent");
            for (i = 0; i < tabcontent.length; i++) {
                tabcontent[i].style.display = "none";
            }
            
            // Remove 'active' class from all tablinks
            tablinks = document.getElementsByClassName("tablinks");
            for (i = 0; i< tablinks.length; i++){
                tablinks[i].className = tablinks[i].className.replace(" active","");
            }
            
            // Show the selected tabcontent, and mark the button as active
            document.getElementById(tabName).style.display = "block";
            evt.currentTarget.className += " active";
        }
        
        // Set default open tab
        document.addEventListener('DOMContentLoaded', function(){
            document.querySelector('.tablinks').click();
        });
        document.addEventListener('DOMContentLoaded', function(){
            const getCellValue = (tr, idx) => tr.children[idx].innerText || tr.children[idx].textContent;

            const comparer = (idx, asc) => (a, b) => ((v1, v2) => 
                v1 !== '' && v2 !== '' && !isNaN(v1) && !isNaN(v2) ? v1 - v2 : v1.toString().localeCompare(v2)
            )(getCellValue(asc ? a : b, idx), getCellValue(asc ? b : a, idx));

            document.querySelectorAll('th').forEach(th => th.addEventListener('click', (() => {
                const table = th.closest('table');
                Array.from(table.querySelectorAll('tbody tr'))
                    .sort(comparer(Array.from(th.parentNode.children).indexOf(th), this.asc = !this.asc))
                    .forEach(tr => table.querySelector('tbody').appendChild(tr) );
            })));
        });
        
        // Fetch updated data every 5 seconds
        setInterval(() => {
            fetch('{% url "signal_list" %}')
                .then(response => response.text())
                .then(html => {
                    let parser = new DOMParser();
                    let newDocument = parser.parseFromString(html, 'text/html');
                    // Update each tab's table body
                    ['Buy', 'Sell', 'Hold'].forEach(tabName => {
                        let newTableBody = newDocument.querySelector('#' + tabName + ' tbody');
                        let currentTableBody = document.querySelector('#' + tabName + ' tbody');
                        if (newTableBody && currentTableBody) {
                            currentTableBody.innerHTML = newTableBody.innerHTML;
                        }
                    });
                })
                .catch(error => console.error('Error fetching update:', error));
        }, 5000);  // Update every 5 seconds
    </script>
</body>
</html>

<!-- signal_table.html -->
<table>
    <thead>
        <tr>
            <th>#</th>
            <th>Run Date</th>
            <th>Timestamp</th>
            <th>Symbol</th>
            <th>Price</th>
            <th>24h Price Change</th>
            <th>Signal Type</th>
            <th>Stop Loss</th>
            <th>Take Profit</th>
            <th>Support</th>
            <th>Resistance</th>
        </tr>
    </thead>
    <tbody>
        {% for signal in signals %}
            <tr>
                <td>{{ forloop.counter }}</td>
                <td>{{ signal.run_date|date:"Y-m-d H:i:s" }}</td>
                <td>{{ signal.timestamp|date:"Y-m-d H:i:s" }}</td>
                <td>{{ signal.symbol }}</td>
                <td>{{ signal.price }}</td>
                <td>{{ signal.price_change_24h|default:"N/A" }}</td>
                <td>{{ signal.signal_type }}</td>
                <td>{{ signal.stop_loss|default:"-" }}</td>
                <td>{{ signal.take_profit|default:"-" }}</td>
                <td>{{ signal.support|default:"-" }}</td>
                <td>{{ signal.resistance|default:"-" }}</td>
            </tr>
        {% empty %}
            <tr>
                <td colspan="11">No Signals Available</td>
            </tr>
        {% endfor %}
    </tbody>
</table>
<!-- Pagination Controls -->
{% if signals.has_other_pages %}
    <div class="pagination">
        <span>
            Page {{ signals.number }} of {{ signals.paginator.num_pages }}
        </span>
        {% if signals.has_previous %}
            <a href="?{% for key, value in request.GET.items %}{% if key != page_param %}{{ key }}={{ value|urlencode }}&{% endif %}{% endfor %}{{ page_param }}={{ signals.previous_page_number }}">Previous</a>
        {% endif %}
        {% for num in signals.paginator.page_range %}
            {% if signals.number == num %}
                <strong>{{ num }}</strong>
            {% else %}
                <a href="?{% for key, value in request.GET.items %}{% if key != page_param %}{{ key }}={{ value|urlencode }}&{% endif %}{% endfor %}{{ page_param }}={{ num }}">{{ num }}</a>
            {% endif %}
        {% endfor %}
        {% if signals.has_next %}
            <a href="?{% for key, value in request.GET.items %}{% if key != page_param %}{{ key }}={{ value|urlencode }}&{% endif %}{% endfor %}{{ page_param }}={{ signals.next_page_number }}">Next</a>
        {% endif %}
    </div>
{% endif %}
I want you to change the above code so that I can see different pages on the website. I want a homepage to show links to go to the three different pages with signals, that is Buy Signals, Sell Signals and Sideways. The three buttons should be on the same line but spaced enough. Please write different html for each page. Under those buttons we should have a price chart to show realtime price movements for all the symbols that we fetched for analysis. The default symbol should be BTCUSDT, but have option to change and choose any symbol. If possible please add the technical indicators option so that I can also do manual analysis. Under the chart, please include two columns for top gainers and top lossers to represent the top 5 symbols with biggest gains in 24 hours in terms of percentage, and top 5 lossers. The theme should be black, pink, blue and white colours. You can play around with them to make a visually appealing website. Also, add any other functionalities that will make user experience to be smooth and memorable.
Buy Signals Page: It should have two tabs in that same page, first tab is "very bullish", this should be for signals that have been confirmed using different timeframes and different set of indicators, meaning all signs indicate bullish. The second tab should be just "bullish" for signals that are bullish on just one timeframe, or only bullish using one set of technical indicators but the other set show otherwise. For each signal, there should be a link to open the symbol in the chart created in homepage. Also at the top there should be a button to go back to homepage. 
Sell Signals page: It should be similar to Buy Signals page but the tabs should be "very bearish"  and "bearish". All other functionalities should be the same as Buy Signals page including a button to get back to homepage.
Sideways page: Also should have same functionalities.