GarminSync/garminsync/web/templates/dashboard.html

{% extends "base.html" %}

{% block content %}
<div class="container">
    <div class="navigation"></div>
    
    <div class="layout-grid">
        <!-- Left Sidebar -->
        <div class="sidebar">
            <div class="card sync-card">
                <button id="sync-now-btn" class="btn btn-primary btn-large">
                    <i class="icon-sync"></i>
                    Sync Now
                </button>
                <div class="sync-status" id="sync-status">
                    Ready to sync
                </div>
            </div>
            
            <div class="card statistics-card">
                <h3>Statistics</h3>
                <div class="stat-item">
                    <label>Total Activities:</label>
                    <span id="total-activities">{{stats.total}}</span>
                </div>
                <div class="stat-item">
                    <label>Downloaded:</label>
                    <span id="downloaded-activities">{{stats.downloaded}}</span>
                </div>
                <div class="stat-item">
                    <label>Missing:</label>
                    <span id="missing-activities">{{stats.missing}}</span>
                </div>
            </div>
        </div>
        
        <!-- Right Content Area -->
        <div class="main-content">
            <div class="card log-display">
                <div class="card-header">
                    <h3>Log Data</h3>
                </div>
                <div class="log-content" id="log-content">
                    <!-- Real-time log updates will appear here -->
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block page_scripts %}
<script src="/static/home.js"></script>
{% endblock %}