kicer/ws2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

backup codes

Browse Source
This commit is contained in:
kicer
2026-01-30 12:58:30 +08:00
parent 95f2bf2e4a
commit 1a95d6c005
5 changed files with 415 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

253
utils/icons.html Normal file
View File

@@ -0,0 +1,253 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>常用天气符号</title>
<!-- 引入Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
background-color: #f0f0f0;
}
h1 {
text-align: center;
color: #333;
}
.container {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 20px;
margin-top: 30px;
}
.weather-icon {
background-color: white;
border-radius: 10px;
padding: 20px;
text-align: center;
width: 150px;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
transition: transform 0.3s;
}
.weather-icon:hover {
transform: translateY(-5px);
}
.weather-icon i {
font-size: 48px;
margin-bottom: 10px;
}
.weather-icon .icon-name {
font-size: 18px;
color: #555;
}
.weather-icon .icon-class {
font-size: 12px;
color: #888;
margin-top: 5px;
word-break: break-all;
}
.fas.fa-sun { color: #FFD700; }
.fas.fa-cloud-sun { color: #87CEEB; }
.fas.fa-cloud { color: #A9A9A9; }
.fas.fa-cloud-rain { color: #4682B4; }
.fas.fa-bolt { color: #FF4500; }
.fas.fa-snowflake { color: #B0E0E6; }
.fas.fa-smog { color: #696969; }
.fas.fa-wind { color: #708090; }
.fas.fa-cloud-showers-heavy { color: #1E90FF; }
.fas.fa-question-circle { color: #32CD32; }
</style>
</head>
<body>
<h1>常用天气符号</h1>
<div class="container">
<!-- 晴天 -->
<div class="weather-icon">
<i class="fas fa-sun"></i>
<div class="icon-name">晴天</div>
<div class="icon-class">fas fa-sun</div>
</div>
<!-- 多云转晴 -->
<div class="weather-icon">
<i class="fas fa-cloud-sun"></i>
<div class="icon-name">多云转晴</div>
<div class="icon-class">fas fa-cloud-sun</div>
</div>
<!-- 多云 -->
<div class="weather-icon">
<i class="fas fa-cloud"></i>
<div class="icon-name">多云</div>
<div class="icon-class">fas fa-cloud</div>
</div>
<!-- 雨天 -->
<div class="weather-icon">
<i class="fas fa-cloud-rain"></i>
<div class="icon-name">雨天</div>
<div class="icon-class">fas fa-cloud-rain</div>
</div>
<!-- 雷雨 -->
<div class="weather-icon">
<i class="fas fa-bolt"></i>
<div class="icon-name">雷雨</div>
<div class="icon-class">fas fa-bolt</div>
</div>
<!-- 雪天 -->
<div class="weather-icon">
<i class="fas fa-snowflake"></i>
<div class="icon-name">雪天</div>
<div class="icon-class">fas fa-snowflake</div>
</div>
<!-- 雾天 -->
<div class="weather-icon">
<i class="fas fa-smog"></i>
<div class="icon-name">雾天</div>
<div class="icon-class">fas fa-smog</div>
</div>
<!-- 大风 -->
<div class="weather-icon">
<i class="fas fa-wind"></i>
<div class="icon-name">大风</div>
<div class="icon-class">fas fa-wind</div>
</div>
<!-- 暴雨 -->
<div class="weather-icon">
<i class="fas fa-cloud-showers-heavy"></i>
<div class="icon-name">暴雨</div>
<div class="icon-class">fas fa-cloud-showers-heavy</div>
</div>
<!-- 太阳雨 -->
<div class="weather-icon">
<i class="fas fa-question-circle"></i>
<div class="icon-name">未知</div>
<div class="icon-class">fas fa-question-circle</div>
</div>
</div>
<script>
// 可以添加一些交互效果，例如点击图标复制类名
document.querySelectorAll('.weather-icon').forEach(icon => {
icon.addEventListener('click', function() {
const iconClass = this.querySelector('.icon-class').textContent;
navigator.clipboard.writeText(iconClass).then(() => {
alert('已复制类名: ' + iconClass);
});
});
});
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.7.1/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script>
<script>
// 添加下载按钮
const downloadBtn = document.createElement('button');
downloadBtn.innerHTML = '📥 下载所有图标为PNG (48x48)';
downloadBtn.style.cssText = `
display: block;
margin: 30px auto;
padding: 15px 30px;
font-size: 18px;
background: linear-gradient(135deg, #4CAF50, #2E7D32);
color: white;
border: none;
border-radius: 8px;
cursor: pointer;
transition: transform 0.3s, box-shadow 0.3s;
`;
downloadBtn.onmouseover = () => {
downloadBtn.style.transform = 'translateY(-2px)';
downloadBtn.style.boxShadow = '0 6px 12px rgba(0,0,0,0.2)';
};
downloadBtn.onmouseout = () => {
downloadBtn.style.transform = 'translateY(0)';
downloadBtn.style.boxShadow = 'none';
};
// 插入按钮到页面
document.querySelector('.container').after(downloadBtn);
// 映射Font Awesome类名到Unicode字符
const faUnicodeMap = {
'fa-sun': '\uf185',
'fa-cloud-sun': '\uf6c4',
'fa-cloud': '\uf0c2',
'fa-cloud-rain': '\uf73d',
'fa-bolt': '\uf0e7',
'fa-snowflake': '\uf2dc',
'fa-smog': '\uf75f',
'fa-wind': '\uf72e',
'fa-cloud-showers-heavy': '\uf740',
'fa-question-circle': '\uf059'
};
// 下载所有图标
downloadBtn.addEventListener('click', async () => {
downloadBtn.disabled = true;
downloadBtn.innerHTML = '⏳ 正在生成PNG图片...';
try {
// 等待字体加载
await document.fonts.ready;
const zip = new JSZip();
const promises = [];
// 获取所有图标元素
const iconElements = document.querySelectorAll('.weather-icon i');
iconElements.forEach((iconEl, index) => {
const className = Array.from(iconEl.classList)
.find(cls => cls.startsWith('fa-'));
if (!className) return;
const iconName = className.replace('fa-', '');
const color = getComputedStyle(iconEl).color;
const unicodeChar = faUnicodeMap[className] || '\uf071';
// 创建Canvas
const canvas = document.createElement('canvas');
canvas.width = 48;
canvas.height = 48;
const ctx = canvas.getContext('2d');
// 设置透明背景
ctx.clearRect(0, 0, 48, 48);
// 绘制图标
ctx.font = 'normal normal 900 40px "Font Awesome 6 Free"';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.fillStyle = color;
ctx.fillText(unicodeChar, 24, 24);
// 将Canvas转换为PNG并添加到ZIP
canvas.toBlob(blob => {
zip.file(`${iconName}.png`, blob);
}, 'image/png');
});
// 创建ZIP文件
setTimeout(async () => {
const content = await zip.generateAsync({type: 'blob'});
saveAs(content, 'weather-icons.zip');
downloadBtn.disabled = false;
downloadBtn.innerHTML = '✅ 下载完成！再次下载';
setTimeout(() => {
downloadBtn.innerHTML = '📥 下载所有图标为PNG (48x48)';
}, 3000);
}, 1000);
} catch (error) {
console.error('下载失败:', error);
downloadBtn.disabled = false;
downloadBtn.innerHTML = '❌ 下载失败，点击重试';
}
});
</script>
</body>
</html>