youtube-dl/lib/framework/templates/log.html

{% extends "base.html" %}
{% block content %}
<style>
    /* Unified Log Page Design (matches gds_dviewer) */
    .log-wrapper {
        max-width: 1400px;
        margin: 0 auto;
        padding: 20px;
    }
    
    .log-card {
        background: linear-gradient(145deg, rgba(20, 30, 48, 0.95), rgba(36, 59, 85, 0.9));
        border: 1px solid rgba(100, 150, 180, 0.25);
        border-radius: 12px;
        overflow: hidden;
    }

    .log-tabs {
        border-bottom: 1px solid rgba(100, 150, 180, 0.2);
        background: rgba(0, 0, 0, 0.2);
        padding: 10px 10px 0 10px;
        display: flex;
        gap: 6px;
    }

    .log-tab {
        color: #94a3b8;
        border: none;
        border-radius: 8px 8px 0 0;
        padding: 10px 20px;
        font-weight: 500;
        background: transparent;
        cursor: pointer;
        transition: all 0.2s;
    }

    .log-tab:hover {
        color: #e2e8f0;
        background: rgba(255, 255, 255, 0.05);
    }

    .log-tab.active {
        color: #7dd3fc;
        background: rgba(20, 30, 48, 0.95);
        border-bottom: 2px solid #7dd3fc;
    }

    .log-content {
        display: none;
    }

    .log-content.active {
        display: block;
    }

    .log-container {
        height: calc(100vh - 200px);
        min-height: 400px;
        overflow-y: auto;
        padding: 16px;
        font-family: 'SF Mono', 'Consolas', 'Monaco', monospace;
        font-size: 12px;
        line-height: 1.6;
        background: rgba(0, 0, 0, 0.3);
        color: #94a3b8;
    }

    .log-line-error { color: #f87171; }
    .log-line-warning { color: #fbbf24; }
    .log-line-info { color: #5eead4; }
    .log-line-debug { color: #94a3b8; }

    .controls-bar {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        padding: 12px 20px;
        background: rgba(0, 0, 0, 0.2);
        border-top: 1px solid rgba(100, 150, 180, 0.2);
        gap: 12px;
    }

    .btn-log {
        background: linear-gradient(180deg, rgba(45, 55, 72, 0.95), rgba(35, 45, 60, 0.98));
        border: 1px solid rgba(100, 150, 180, 0.25);
        color: #7dd3fc;
        padding: 6px 14px;
        font-size: 12px;
        cursor: pointer;
        border-radius: 6px;
    }

    .btn-log:hover {
        background: linear-gradient(180deg, rgba(55, 65, 82, 0.95), rgba(45, 55, 70, 0.98));
        color: #fff;
    }

    .log-switch {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .log-switch label {
        color: #94a3b8;
        font-size: 12px;
        font-weight: 500;
    }

    @media (max-width: 768px) {
        .log-wrapper {
            padding: 5px;
        }
        .log-container {
            height: calc(100vh - 180px);
            min-height: 300px;
            padding: 12px;
        }
    }
</style>

<div class="log-wrapper">
    <div class="log-card">
        <div class="log-tabs">
            <button class="log-tab active" data-tab="old">이전</button>
            <button class="log-tab" data-tab="new">실시간</button>
        </div>
        
        <div class="log-content active" id="tab-old">
            <div class="log-container" id="log-history"></div>
        </div>
        
        <div class="log-content" id="tab-new">
            <div class="log-container" id="log-realtime"></div>
            <div class="controls-bar">
                <div class="log-switch">
                    <label for="auto_scroll">자동 스크롤</label>
                    <input id="auto_scroll" name="auto_scroll" type="checkbox" checked>
                </div>
                <button id="clear" class="btn-log">리셋</button>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
function escapeHtml(text) {
    var div = document.createElement('div');
    div.appendChild(document.createTextNode(text));
    return div.innerHTML;
}

function formatLogLine(line) {
    var className = '';
    if (line.indexOf('ERROR') !== -1) className = 'log-line-error';
    else if (line.indexOf('WARNING') !== -1) className = 'log-line-warning';
    else if (line.indexOf('INFO') !== -1) className = 'log-line-info';
    else if (line.indexOf('DEBUG') !== -1) className = 'log-line-debug';
    return '<div class="' + className + '">' + escapeHtml(line) + '</div>';
}

// Tab switching
document.querySelectorAll('.log-tab').forEach(function(tab) {
    tab.addEventListener('click', function() {
        document.querySelectorAll('.log-tab').forEach(function(t) { t.classList.remove('active'); });
        document.querySelectorAll('.log-content').forEach(function(c) { c.classList.remove('active'); });
        this.classList.add('active');
        document.getElementById('tab-' + this.dataset.tab).classList.add('active');
    });
});

$(document).ready(function() {
    setWide();
    $('#loading').show();
});

var protocol = window.location.protocol;
var socket = io.connect(protocol + "//" + document.domain + ":" + location.port + "/log");

socket.emit("start", {'package':'{{package}}'});

socket.on('on_start', function(data) {
    var container = document.getElementById("log-history");
    var lines = data.data.split('\n');
    var html = '';
    for (var i = 0; i < lines.length; i++) {
        html += formatLogLine(lines[i]);
    }
    container.innerHTML = html || '<div style="text-align:center;color:#64748b;">로그가 비어 있습니다.</div>';
    container.scrollTop = container.scrollHeight;
    $('#loading').hide();
});

socket.on('add', function(data) {
    if (data.package == "{{package}}") {
        var chk = $('#auto_scroll').is(":checked");
        var container = document.getElementById("log-realtime");
        container.innerHTML += formatLogLine(data.data);
        if (chk) container.scrollTop = container.scrollHeight;
    }
});

$("#clear").click(function(e) {
    e.preventDefault(); 
    document.getElementById("log-realtime").innerHTML = '';
});
</script>
{% endblock %}