Logical Expression Builder
    
        /* Basic styling for layout */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 20px;
    padding: 0;
    background-color: #f4f7fa;
}

.container {
    max-width: 900px;
    margin: 0 auto;
    padding: 30px;
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.vertical-line {
    width: 2px; /* 竖线的宽度 */
    background-color: #888; /* 竖线的颜色 */
    margin: 0 10px; /* 可选：设置左右的间距 */
	height: 20px;
}
#var-operation-section div {
	display: inline-block;
}
.section {
    margin-bottom: 25px;
}

.section h3 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 12px;
}

.expr-container {
    margin-bottom: 10px;
    display: flex;
    flex-wrap: wrap;
}

.expr-element {
    display: inline-block;
    margin: 5px;
    padding: 8px 12px;
    background-color: #e0f7fa;
    color: #00796b;
    cursor: pointer;
    border-radius: 6px;
    transition: background-color 0.2s, transform 0.2s;
    font-size: 16px;
}

.selected {
    background-color: #ffeb3b;
    color: #000;
}

.expr-element:hover {
    transform: scale(1.05);
}

.operator, .paren, .quick-operation {
    background-color: #ffccbc;
    cursor: pointer;
    border-radius: 6px;
    padding: 10px 16px;
    margin: 5px;
    transition: background-color 0.2s;
    font-size: 16px;
    border: none;
}

.operator:hover, .paren:hover, .expr-element:hover, .quick-operation:hover {
    background-color: #ff9800;
}

#expression-container {
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
    background-color: #e8f5e9;
    padding: 12px;
    border-radius: 6px;
}

#result {
    margin-top: 20px;
    padding: 12px;
    background-color: #f1f1f1;
    border-radius: 6px;
    font-weight: bold;
}

/* New styles for condition variables section */
.condition-container {
    margin-top: 20px;
    padding: 12px;
    background-color: #e8f5e9;
    border-radius: 6px;
}

.condition-variable {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
}

.condition-variable input {
    margin-left: 12px;
    padding: 8px;
    margin-right: 12px;
    flex-grow: 1;
    border-radius: 6px;
    border: 1px solid #ddd;
}

.condition-variable button {
    background-color: #f44336;
    color: white;
    padding: 6px 12px;
    border-radius: 6px;
    border: none;
    cursor: pointer;
}

.condition-variable button:hover {
    background-color: #e53935;
}

/* Buttons with icons */
.add-btn, .remove-btn, #reset-btn, #add-condition {
    padding: 8px 12px;
    font-size: 16px;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.2s, transform 0.2s;
    border: none;
	color: white;
}

.add-btn {
    background-color: #66bb6a;
    color: white;
}

.add-btn:hover {
    background-color: #388e3c;
    transform: scale(1.05);
}

.remove-btn {
    background-color: #e57373;
    color: white;
}

.remove-btn:hover {
    background-color: #d32f2f;
    transform: scale(1.05);
}

#reset-btn {
    background-color: #ff9800;
    color: white;
}
#reset-btn:hover {
    background-color: #f57c00;
    transform: scale(1.05);
}

#add-condition {
	background-color: #4caf50; /* 绿色背景 */
    color: white;
}
#add-condition:hover {
	background-color: #388e3c; 
    color: white;
}


/* Quick operation buttons styling (满足全部, 满足任一) */
.quick-operation {
    padding: 8px 15px;
    font-size: 14px;
    cursor: pointer;
    border: 1px solid #ccc;
    border-radius: 6px;
    background-color: #f0f0f0;
    transition: background-color 0.3s;
    
    align-items: center;
}

.quick-operation:hover {
    background-color: #e0e0e0;
}

.quick-operation span {
    margin-right: 8px;
}

/* Main operation buttons styling (且, 或) */
.operation {
    padding: 8px 15px;
    font-size: 14px;
    cursor: pointer;
    border: 1px solid #ccc;
    border-radius: 6px;
    background-color: #f0f0f0;
    transition: background-color 0.3s;
}

.operation:hover {
    background-color: #e0e0e0;
}

/* Reset button styling */
#reset-btn {
    padding: 8px 15px;
    font-size: 14px;
    cursor: pointer;
    border-radius: 6px;
    background-color: #f39c12;
    color: white;
    transition: background-color 0.3s;
}

#reset-btn:hover {
    background-color: #e67e22;
}


    





    
    
        条件关系
        
            c1
        
    

    
    
        
             满足全部
             满足任一
        
		
        
             且
             或
        
		
		
		 重置
    

    
    
        关系效果
        
    

    
    
        最终表达式
        
    

    
    
        条件变量定义
        
            
                c1
                
                 删除
            
        
         新增
    




    let selectedElements = []; // Stores the current selected elements or expressions
    let currentExpression = ""; // Stores the current expression as a string
    let variableCount = 1; // Variable count starts at 1 (c1)

    const expressionContainer = document.getElementById('expression-container');
    const resultContainer = document.getElementById('result');
    const conditionVariablesContainer = document.getElementById('condition-variables');
    const variablesContainer = document.getElementById('variables');

    // Function to render the current expression
    function renderExpression() {
        expressionContainer.innerHTML = '';
        const elements = currentExpression.split(' ').map(el => {
            const div = document.createElement('div');
            div.classList.add('expr-element');
            div.textContent = el;
            return div;
        });
        elements.forEach(div => expressionContainer.appendChild(div));
        updateResult();
    }

    // Function to update the result container
    function updateResult() {
        resultContainer.textContent = currentExpression;
    }

    // Handle selection of variables (c1, c2, etc.)
    variablesContainer.addEventListener('click', function (e) {
        if (e.target && e.target.classList.contains('expr-element')) {
            const value = e.target.getAttribute('data-value');
            const element = e.target;

            // Toggle selected class
            if (element.classList.contains('selected')) {
                element.classList.remove('selected');
                const index = selectedElements.indexOf(value);
                if (index !== -1) {
                    selectedElements.splice(index, 1);
                }
            } else {
                element.classList.add('selected');
                selectedElements.push(value);
            }
            updateCurrentExpression();
            renderExpression();
        }
    });

    // Handle the operation buttons (&&, ||)
    document.getElementById('operation-buttons').addEventListener('click', function (e) {
        if (e.target && e.target.classList.contains('operation')) {
            const operator = e.target.getAttribute('data-op');
            if (selectedElements.length >= 2) {
                // Add the operator between the last two elements
                const lastElement = selectedElements.pop();
                const secondLastElement = selectedElements.pop();
                selectedElements.push(`(${secondLastElement} ${operator} ${lastElement})`);
                updateCurrentExpression();
                renderExpression();
            }
        }
    });

    // Handle the quick operation buttons (满足全部, 满足任一)
    document.getElementById('quick-buttons').addEventListener('click', function (e) {
        if (e.target && e.target.classList.contains('quick-operation')) {
            const quickOp = e.target.getAttribute('data-op');
            if (selectedElements.length >= 1) {
                if (quickOp === 'all') {
                    currentExpression = selectedElements.join(' && ');
                } else if (quickOp === 'any') {
                    currentExpression = selectedElements.join(' || ');
                }
                currentExpression = `(${currentExpression})`; // Wrap the result in parentheses
                renderExpression();
            }
        }
    });

    // Update the current expression string based on the selected elements
    function updateCurrentExpression() {
        currentExpression = selectedElements.join(' ');
    }

    // Add a new condition variable
    function addCondition() {
        if (variableCount c${variableCount}
                
                 删除            `;
            conditionVariablesContainer.appendChild(newCondition);

            // Add the new variable to the selection list (variables container)
            const newVariable = document.createElement('div');
            newVariable.classList.add('expr-element');
            newVariable.setAttribute('data-value', `c${variableCount}`);
            newVariable.textContent = `c${variableCount}`;
            variablesContainer.appendChild(newVariable);
        } else {
            alert("最多只能有 10 个变量");
        }
    }

    // Remove a condition variable
    function removeCondition(index) {
        const conditionElement = document.querySelector(`.condition-variable[data-index="${index}"]`);
        conditionElement.remove();

        // Also remove the corresponding variable element from the selection list
        const variableElement = document.querySelector(`.expr-element[data-value="c${index}"]`);
        variableElement.remove();

        // Decrease variable count and prevent less than 1 condition variable
        if (variableCount > 1) {
            variableCount--;
        } else {
            alert("至少需要保留一个变量");
        }
    }

    // Initialize: Ensure at least one variable is present
    document.addEventListener('DOMContentLoaded', function () {
        if (variableCount === 1) {
            const conditionElement = document.createElement('div');
            conditionElement.classList.add('condition-variable');
            conditionElement.setAttribute('data-index', '1');
            conditionVariablesContainer.appendChild(conditionElement);
        }
    });


	// Function to reset the expression and selections
    function resetExpression() {
        // Clear selected elements
        selectedElements = [];
        currentExpression = "";

        // Reset the appearance of the selected elements
        const selectedElems = document.querySelectorAll('.expr-element.selected');
        selectedElems.forEach(elem => {
            elem.classList.remove('selected');
        });

        // Clear the expression container and result
        expressionContainer.innerHTML = '';
        resultContainer.textContent = '';

        // Optionally, reset the condition variables back to c1 if needed
		// 这里不变，变化了反而麻烦。
        
        
             -->
                c1 -->
                 -->
                删除条件 -->
            
        
        
            c1 -->
        
    }