static/sidebar.html

<div class="sidebar">
    <button id="monitorButton" title="Real-Time System Monitor" class="fab-button">
        <span>📊</span>
    </button>
    <button id="helpButton" title="راهنما">
        <span>❓</span>
    </button>
</div>

<div id="popup" class="popup">
    <div class="popup-content">
        <span class="close-btn">&times;</span>
        <iframe src="/static/docs/guide.html" width="100%" height="100%"></iframe>
    </div>
</div>

<style>
    .sidebar {
        position: fixed;
        top: 20%;
        right: 0;
        padding: 10px;
        background-color: #2c3e50;
        color: white;
        border-radius: 5px;
        display: flex;
        flex-direction: column;
        gap: 10px;
        z-index: 1000;
    }
    .fab-button {
        font-size: 24px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        border: none;
        color: white;
        cursor: pointer;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
        transition: transform 0.3s, box-shadow 0.3s;
        animation: pulse-glow 2s infinite;
    }
    .fab-button:hover {
        transform: scale(1.1);
        box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6);
    }
    @keyframes pulse-glow {
        0%, 100% {
            box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
        }
        50% {
            box-shadow: 0 4px 20px rgba(102, 126, 234, 0.7);
        }
    }
    #helpButton {
        font-size: 24px;
        background: none;
        border: none;
        color: white;
        cursor: pointer;
    }
    #popup {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        z-index: 9999;
    }
    .popup-content {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: white;
        padding: 20px;
        width: 80%;
        height: 80%;
        overflow-y: auto;
    }
    .close-btn {
        font-size: 30px;
        color: #aaa;
        position: absolute;
        top: 10px;
        right: 20px;
        cursor: pointer;
    }
</style>

<script>
    // Monitor button - open in new window/tab
    document.getElementById("monitorButton").addEventListener("click", function() {
        window.open("/system-monitor", "_blank", "width=1400,height=900");
    });

    document.getElementById("helpButton").addEventListener("click", function() {
        document.getElementById("popup").style.display = "block";
    });

    document.querySelector(".close-btn").addEventListener("click", function() {
        document.getElementById("popup").style.display = "none";
    });
</script>