Skip to content

Commit

Permalink
init
Browse files Browse the repository at this point in the history
  • Loading branch information
@maojunxyz
maojunxyz committed Mar 28, 2024
0 parents commit d8401e5
Show file tree
Hide file tree
Showing 26 changed files with 4,697 additions and 0 deletions.
147 changes: 147 additions & 0 deletions Alphabet_matching.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,147 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>字母匹配游戏</title>
<!-- 引入 Tailwind CSS 样式表 -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
<style>
/* 自定义样式 */
#game-container {
display: grid;
grid-template-columns: repeat(6, 80px); /* 6x6 格式，可根据需要调整尺寸 */
gap: 10px;
}
.card {
width: 80px; /* 根据网格尺寸调整 */
height: 80px; /* 根据网格尺寸调整 */
font-size: 18px;
cursor: pointer;
transition: background-color 0.3s;
}
.card.highlighted {
background-color: #ccc; /* 修改高亮颜色为灰色 */
}
#timer {
text-align: center;
}
</style>
</head>
<body class="bg-gray-200 flex flex-col items-center h-screen">
<h1 class="text-3xl font-semibold mt-4">字母匹配游戏</h1>
<div id="tips" class="text-lg font-bold mt-4">找出相同字母进行匹配。</div>
<div id="timer" class="text-lg font-bold mt-4">计时: 0 秒</div>
<div id="game-container" class="mt-4"></div>

<script>
const letters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
const cards = [];
let letterIndex = 0; // 用于追踪字母的索引

for (let i = 0; i < 6 * 6 / 2; i++) {
const letter = letters[letterIndex];
cards.push(letter);
cards.push(letter);
letterIndex++;

// 如果字母用完了，重新从头开始
if (letterIndex === letters.length) {
letterIndex = 0;
}
}

let selectedCard = null; // 存储当前已选择的卡片
let matchedPairs = 0;
let timer = 0; // 计时器变量
let timerInterval; // 用于清除计时器的变量
let isMatching = false; // 标志，用于检查是否正在进行匹配动画

function startTimer() {
timerInterval = setInterval(() => {
if (!isMatching) {
timer++;
document.getElementById("timer").textContent = `计时: ${timer} 秒`;
}
}, 1000);
}

function stopTimer() {
clearInterval(timerInterval);
}

function shuffleArray(array) {
for (let i = array.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[array[i], array[j]] = [array[j], array[i]];
}
}

function createCard(value) {
const card = document.createElement("div");
card.className = "card bg-white rounded-lg flex justify-center items-center cursor-pointer";
card.style.fontSize = "18px";
card.style.color = "#000";
card.style.border = "2px solid #000";
card.textContent = value;
card.addEventListener("click", () => {
if (!card.classList.contains("matched") && card !== selectedCard && !isMatching) {
card.classList.add("highlighted");

if (!selectedCard) {
// 如果没有选择的卡片，则将当前卡片存储为已选择的卡片
selectedCard = card;
} else {
// 如果已经有选择的卡片，进行匹配
if (selectedCard.textContent === card.textContent) {
matchedPairs++;

selectedCard.classList.add("matched");
card.classList.add("matched");

selectedCard = null; // 重置已选择的卡片

if (matchedPairs === cards.length / 2) {
stopTimer(); // 停止计时
const timeInSeconds = timer;
alert(`恭喜！您完成了游戏，用时: ${timeInSeconds} 秒。`);
resetGame();
}
} else {
isMatching = true; // 开始匹配动画
setTimeout(() => {
selectedCard.classList.remove("highlighted");
card.classList.remove("highlighted");
selectedCard = null; // 重置已选择的卡片
isMatching = false; // 结束匹配动画
}, 1000);
}
}
}
});
return card;
}

function resetGame() {
selectedCard = null;
matchedPairs = 0;
timer = 0;
document.getElementById("timer").textContent = `计时: ${timer} 秒`;

const gameContainer = document.getElementById("game-container");
gameContainer.innerHTML = "";

shuffleArray(cards);

for (const cardValue of cards) {
const card = createCard(cardValue);
gameContainer.appendChild(card);
}

startTimer(); // 重新开始计时
}

resetGame();
</script>
</body>
</html>
225 changes: 225 additions & 0 deletions Log_Multi-Keyword_Filtering_Highlighting_Script_Generator.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,225 @@
<!DOCTYPE html>
<html>
<head>
<title>日志多关键字过滤+高亮脚本生成器</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
</head>
<body class="bg-gray-100 p-8">
<div class="max-w-3xl mx-auto bg-white p-6 rounded shadow">
<h1 class="text-2xl font-semibold mb-4">日志多关键字过滤+高亮脚本生成器</h1>
<p>填写以下选项，然后点击“生成脚本”以创建脚本：</p>

<div class="mb-4">
<label for="log-file" class="block text-sm font-medium text-gray-700">日志文件路径：</label>
<input type="text" id="log-file" class="mt-1 p-1 border rounded w-full" placeholder="/var/log/syslog">
</div>

<div class="mb-4">
<label for="keywords" class="block text-sm font-medium text-gray-700">关键词（逗号分隔）：</label>
<textarea id="keywords" class="mt-1 p-1 border rounded w-full h-16 required-field" placeholder="商户号,项目号,调用时间"></textarea>
</div>

<div class="mb-4">
<label for="colored-keywords" class="block text-sm font-medium text-gray-700">需要上色的关键词（逗号分隔）：</label>
<textarea id="colored-keywords" class="mt-1 p-1 border rounded w-full h-16" placeholder="商户号,项目号,调用时间"></textarea>
</div>

<div class="mb-4">
<label for="color-selector" class="block text-sm font-medium text-gray-700">选择颜色：</label>
<select id="color-selector" class="mt-1 p-1 border rounded w-full">
<option value="red">红色</option>
<option value="green">绿色</option>
<option value="yellow">黄色</option>
<option value="blue">蓝色</option>
<option value="purple">紫色</option>
<option value="cyan">青色</option>
<option value="white">白色</option>
<option value="black">黑色</option>
<option value="orange">橙色</option>
<option value="pink">粉色</option>
<option value="brown">棕色</option>
<option value="lime">酸橙色</option>
<option value="fuchsia">洋红色</option>
<option value="indigo">靛蓝色</option>
</select>
<button onclick="addColor()" class="mt-2 bg-indigo-500 text-white px-2 py-1 rounded hover:bg-indigo-600 focus:outline-none focus:ring focus:ring-indigo-300">添加颜色</button>
</div>

<div class="mb-4" id="color-list">
<!-- 这里将显示已选择的颜色 -->
</div>

<div class="mb-4">
<label for="context-before" class="block text-sm font-medium text-gray-700">前几行：</label>
<input type="number" id="context-before" class="mt-1 p-1 border rounded w-full" value="10" min="0">
</div>

<div class="mb-4">
<label for="context-after" class="block text-sm font-medium text-gray-700">后几行：</label>
<input type="number" id="context-after" class="mt-1 p-1 border rounded w-full" value="12" min="0">
</div>

<button onclick="generateScript()" class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 focus:outline-none focus:ring focus:ring-blue-300">生成脚本</button>

<h2 class="text-xl font-semibold mt-6">生成的脚本：</h2>
<textarea id="generated-script" class="mt-2 p-2 border rounded w-full h-32" readonly></textarea>

<button onclick="copyToClipboard()" class="bg-green-500 text-white px-4 py-2 rounded hover:bg-green-600 focus:outline-none focus:ring focus:ring-green-300 mt-2">复制脚本</button>

<div id="message" class="mt-4 text-sm text-green-700 hidden"></div>
</div>

<script>
const selectedColors = [];

const colorNameMap = {
red: '红色',
green: '绿色',
yellow: '黄色',
blue: '蓝色',
purple: '紫色',
cyan: '青色',
white: '白色',
black: '黑色',
orange: '橙色',
pink: '粉色',
brown: '棕色',
lime: '酸橙色',
fuchsia: '洋红色',
indigo: '靛蓝色'
};

function showMessage(message) {
const messageDiv = document.getElementById('message');
messageDiv.textContent = message;
messageDiv.classList.remove('hidden');
setTimeout(() => {
messageDiv.classList.add('hidden');
messageDiv.textContent = '';
}, 3000);
}

function generateScript() {
const logFile = document.getElementById('log-file').value;
const keywords = escapeSpecialChars(document.getElementById('keywords').value).split(',');
const coloredKeywords = escapeSpecialChars(document.getElementById('colored-keywords').value).split(',');
const contextBefore = document.getElementById('context-before').value;
const contextAfter = document.getElementById('context-after').value;

const logFileInput = document.getElementById('log-file');
const keywordsInput = document.getElementById('keywords');
const coloredKeywordsInput = document.getElementById('colored-keywords');

logFileInput.classList.remove('border-red-500');
keywordsInput.classList.remove('border-red-500');

if (logFile === '' || keywords.length === 0 || keywordsInput.value.trim() === '') {
if (logFile === '') {
logFileInput.classList.add('border-red-500');
}
if (keywords.length === 0 || keywordsInput.value.trim() === '') {
keywordsInput.classList.add('border-red-500');
}
showMessage('请填写必填项！');
return;
}

const selectedColorNames = selectedColors.map(color => colorNameMap[color]);
const colorMapping = {};
coloredKeywords.forEach((keyword, index) => {
colorMapping[keyword] = selectedColorNames[index % selectedColorNames.length];
});

const coloredKeywordsPattern = coloredKeywords.join('|');
const script = `tailf ${logFile} | grep -E -B${contextBefore} -A${contextAfter} '${keywords.join('|')}' --line-buffered | perl -pe '${generateColorScript(coloredKeywords, selectedColors)}'`;
document.getElementById('generated-script').value = script;
showMessage('脚本已生成！');
}

function escapeSpecialChars(text) {
return text.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
}

function getColorCode(color) {
switch (color) {
case 'red': return 31;
case 'green': return 32;
case 'yellow': return 33;
case 'blue': return 34;
case 'purple': return 35;
case 'cyan': return 36;
case 'white': return 37;
case 'black': return 30;
case 'orange': return 202; // 更新橙色颜色码
case 'pink': return 218; // 更新粉色颜色码
case 'brown': return 130; // 更新棕色颜色码
case 'indigo': return 61; // 更新靛蓝色颜色码
case 'lime': return 118; // 更新酸橙色颜色码
case 'fuchsia': return 201; // 更新洋红色颜色码
default: return 37;
}
}

function copyToClipboard() {
const textarea = document.getElementById('generated-script');
if (textarea.value) {
textarea.select();
document.execCommand('copy');
showMessage('脚本已复制到剪贴板！');
} else {
showMessage('没有可复制的脚本！');
}
}

function addColor() {
const colorSelector = document.getElementById('color-selector');
const selectedColor = colorSelector.options[colorSelector.selectedIndex].value;
selectedColors.push(selectedColor);
updateColorList();
}

function updateColorList() {
const colorList = document.getElementById('color-list');
colorList.innerHTML = selectedColors.map((color, index) => {
return `
<div class="mt-1">
<span class="inline-block w-4 h-4 rounded-full mr-1" style="background-color: ${color};"></span>
${colorNameMap[color]}
<button onclick="removeColor('${color}')" class="bg-red-500 text-white px-2 py-1 rounded ml-2 hover:bg-red-600 focus:outline-none focus:ring focus:ring-red-300">删除</button>
<button onclick="replaceColor('${color}', ${index})" class="bg-purple-500 text-white px-2 py-1 rounded ml-2 hover:bg-purple-600 focus:outline-none focus:ring focus:ring-purple-300">替换</button>
</div>
`;
}).join('');
}

function getColorClassName(color) {
return `bg-${color}-500`;
}

function removeColor(color) {
const index = selectedColors.indexOf(color);
if (index !== -1) {
selectedColors.splice(index, 1);
updateColorList();
}
}

function replaceColor(color, index) {
const colorSelector = document.getElementById('color-selector');
const selectedIndex = colorSelector.selectedIndex;
selectedColors.splice(index, 1, colorSelector.options[selectedIndex].value);
updateColorList();
}

function generateColorScript(coloredKeywords, selectedColors) {
let script = "";
for (let i = 0; i < coloredKeywords.length; i++) {
const coloredKeyword = coloredKeywords[i];
const color = selectedColors[i % selectedColors.length];
script += `s/(${coloredKeyword})/\\e[1;${getColorCode(color)}m$1\\e[0m/g;`;
}
return script;
}
</script>
</body>
</html>
Loading

0 comments on commit d8401e5

Please sign in to comment.