Microsoft Hosts Picker 💊
================================================
FILE: requirements.txt
================================================
ping3==4.0.4
================================================
FILE: script.js
================================================
document.addEventListener('DOMContentLoaded', () => {
const features = document.querySelectorAll('.feature');
const quickStart = document.querySelector('.quick-start');
// 计算特性卡片动画的总持续时间
const lastFeatureDelay = 0.6; // 最后一个特性卡片的延迟
const featureAnimationDuration = 0.6; // 每个特性卡片的动画持续时间
const totalFeatureAnimationTime = lastFeatureDelay + featureAnimationDuration;
const zhBtn = document.getElementById('zh-btn');
const enBtn = document.getElementById('en-btn');
function setLanguage(lang) {
document.querySelectorAll('[data-en]').forEach(elem => {
elem.textContent = elem.getAttribute(`data-${lang}`);
});
if (lang === 'en') {
zhBtn.classList.remove('active');
enBtn.classList.add('active');
document.documentElement.lang = 'en';
} else {
enBtn.classList.remove('active');
zhBtn.classList.add('active');
document.documentElement.lang = 'zh-CN';
}
}
zhBtn.addEventListener('click', () => setLanguage('zh'));
enBtn.addEventListener('click', () => setLanguage('en'));
// 自动检测浏览器语言
const userLang = navigator.language || navigator.userLanguage;
setLanguage(userLang.startsWith('zh') ? 'zh' : 'en');
// 设置版权年份
const copyrightYearsSpan = document.getElementById('copyright-years');
const startYear = 2021;
const currentYear = new Date().getFullYear();
copyrightYearsSpan.textContent = startYear === currentYear ? startYear : `${startYear}-${currentYear}`;
// 获取 GitHub star 数量
fetch('https://api.github.com/repos/ButaiKirin/MicrosoftHostsPicker')
.then(response => response.json())
.then(data => {
const starCount = document.getElementById('star-count');
starCount.textContent = data.stargazers_count;
})
.catch(error => console.error('Error fetching GitHub stats:', error));
});
================================================
FILE: style.css
================================================
:root {
--bg-color: #F3F9FF;
--primary-color: #e87a90;
--secondary-color: #ffe8ea;
--text-color: #F596AA;
--accent-color: #e15e83;
--accent-color-rgb: 232, 48, 21;
}
body {
font-family: 'Noto Sans SC', 'Noto Sans JP', sans-serif;
background-color: var(--bg-color);
color: var(--text-color);
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.container {
background-color: white;
border-radius: 24px;
padding: 2rem;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
text-align: center;
max-width: 800px;
width: 90%;
transition: all 0.3s ease;
}
.container:hover {
transform: translateY(-5px);
box-shadow: 0 12px 48px rgba(0, 0, 0, 0.15);
}
.title {
color: var(--primary-color);
font-size: 2.5rem;
margin-bottom: 0.5rem;
animation: fadeInDown 1s ease-out;
}
.description {
color: var(--text-color);
font-size: 1.2rem;
margin-bottom: 1rem;
animation: fadeInUp 1s ease-out 0.5s both;
}
.language-switch {
margin-bottom: 2rem;
animation: fadeInUp 0.6s ease-out 0.8s both;
}
.language-switch button {
background-color: transparent;
border: 1px solid var(--primary-color);
color: var(--primary-color);
padding: 0.5rem 1rem;
margin: 0 0.5rem;
border-radius: 20px;
cursor: pointer;
transition: all 0.3s ease;
}
.language-switch button.active {
background-color: var(--primary-color);
color: white;
}
.language-switch button:hover {
transform: translateY(-2px);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.features {
display: flex;
justify-content: space-around;
margin-bottom: 2rem;
}
.feature {
flex: 1;
margin: 0 1rem;
padding: 1.5rem;
background-color: var(--secondary-color);
border-radius: 16px;
transition: all 0.3s ease;
animation: fadeInUp 0.6s ease-out backwards;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}
.feature:hover {
transform: translateY(-5px);
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.25);
}
.emoji {
font-size: 3rem;
margin-bottom: 1rem;
}
.feature h3 {
color: var(--primary-color);
margin-bottom: 0.5rem;
}
.feature p {
color: var(--text-color);
}
.cta-button {
display: inline-block;
background-color: var(--accent-color);
color: white;
padding: 1rem 2rem;
border-radius: 30px;
text-decoration: none;
font-weight: bold;
font-size: 1.2rem;
transition: all 0.3s ease;
animation:
fadeInUp 0.6s ease-out 1s both,
pulse 2s infinite;
position: relative;
overflow: hidden;
}
.cta-button::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: linear-gradient(
to right,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0.3) 50%,
rgba(255, 255, 255, 0) 100%
);
transform: rotate(45deg);
animation: shimmer 3s infinite;
}
.cta-button:hover {
background-color: #C62700;
transform: translateY(-3px);
box-shadow: 0 6px 12px rgba(var(--accent-color-rgb), 0.3);
}
.cta-button:active {
transform: translateY(-1px);
box-shadow: 0 3px 6px rgba(var(--accent-color-rgb), 0.2);
}
footer {
margin-top: 2rem;
font-size: 0.9rem;
color: var(--text-color);
text-align: center;
}
footer a {
color: var(--primary-color);
text-decoration: none;
}
footer a:hover {
text-decoration: underline;
}
@keyframes fadeInDown {
from {
opacity: 0;
transform: translateY(-20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes pulse {
0% {
box-shadow: 0 0 0 0 rgba(var(--accent-color-rgb), 0.4);
}
70% {
box-shadow: 0 0 0 15px rgba(var(--accent-color-rgb), 0);
}
100% {
box-shadow: 0 0 0 0 rgba(var(--accent-color-rgb), 0);
}
}
@keyframes shimmer {
0% {
background-position: -100% 0;
}
100% {
background-position: 100% 0;
}
}
@media (max-width: 768px) {
.features {
flex-direction: column;
}
.feature {
margin: 1rem 0;
}
}
.feature:nth-child(1) {
animation-delay: 0.2s;
}
.feature:nth-child(2) {
animation-delay: 0.4s;
}
.feature:nth-child(3) {
animation-delay: 0.6s;
}
.features {
margin-bottom: 3rem;
}
.quick-start {
margin-top: 3rem;
}
.steps ul, .usage-tips ul {
list-style-type: none;
padding-left: 0;
margin: 0;
}
.steps li, .usage-tips li {
margin-bottom: 1rem;
}
.github-stats {
display: flex;
justify-content: center;
margin: 1rem 0;
animation: fadeIn 1s ease-out;
}
.github-stars {
display: inline-flex;
align-items: center;
background-color: #f0f0f0;
color: #333;
padding: 0.5rem 1rem;
border-radius: 20px;
text-decoration: none;
font-size: 0.9rem;
transition: all 0.3s ease;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.github-stars:hover {
background-color: #e0e0e0;
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}
.github-stars svg {
margin-right: 0.5rem;
fill: #f1e05a;
}
.action-buttons {
display: flex;
justify-content: center;
gap: 1rem;
margin-top: 2rem;
}
.cta-button {
display: inline-block;
padding: 0.8rem 1.5rem;
border-radius: 30px;
text-decoration: none;
font-weight: bold;
font-size: 1rem;
transition: all 0.3s ease;
text-align: center;
}
.download-button {
background-color: var(--accent-color);
color: white;
}
.download-button:hover {
background-color: #C62700;
transform: translateY(-3px);
box-shadow: 0 4px 8px rgba(232, 48, 21, 0.3);
}
.github-button {
background-color: #f0f0f0;
color: #333;
}
.github-button:hover {
background-color: #e0e0e0;
transform: translateY(-3px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.action-buttons {
animation: fadeInUp 0.6s ease-out 1s both;
}