162 lines
5.2 KiB
HTML
162 lines
5.2 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<title>CM to Inch & Feet Converter</title>
|
||
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
||
|
|
<link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
|
||
|
|
|
||
|
|
<!-- 配置Tailwind自定义主题 -->
|
||
|
|
<script>
|
||
|
|
tailwind.config = {
|
||
|
|
theme: {
|
||
|
|
extend: {
|
||
|
|
colors: {
|
||
|
|
primary: '#3B82F6',
|
||
|
|
secondary: '#10B981',
|
||
|
|
neutral: '#F3F4F6',
|
||
|
|
dark: '#1F2937'
|
||
|
|
},
|
||
|
|
fontFamily: {
|
||
|
|
inter: ['Inter', 'system-ui', 'sans-serif'],
|
||
|
|
},
|
||
|
|
},
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style type="text/tailwindcss">
|
||
|
|
@layer utilities {
|
||
|
|
.content-auto {
|
||
|
|
content-visibility: auto;
|
||
|
|
}
|
||
|
|
.converter-shadow {
|
||
|
|
box-shadow: 0 10px 25px -5px rgba(59, 130, 246, 0.1), 0 8px 10px -6px rgba(59, 130, 246, 0.1);
|
||
|
|
}
|
||
|
|
.input-focus {
|
||
|
|
@apply focus:border-primary focus:ring-2 focus:ring-primary/20 focus:outline-none;
|
||
|
|
}
|
||
|
|
.result-animate {
|
||
|
|
transition: all 0.3s ease-out;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body class="font-inter bg-gradient-to-br from-blue-50 to-indigo-50 min-h-screen flex items-center justify-center p-4">
|
||
|
|
<div class="w-full max-w-md">
|
||
|
|
<!-- 转换器卡片 -->
|
||
|
|
<div class="bg-white rounded-2xl converter-shadow p-8 mb-6 transform hover:-translate-y-1 transition-all duration-300">
|
||
|
|
<div class="text-center mb-8">
|
||
|
|
<h1 class="text-[clamp(1.5rem,3vw,2rem)] font-bold text-dark mb-2">
|
||
|
|
<i class="fa fa-exchange text-primary mr-2"></i>Unit Converter
|
||
|
|
</h1>
|
||
|
|
<p class="text-gray-500">Convert Centimeters to Inches & Feet</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 输入区域 -->
|
||
|
|
<div class="mb-6">
|
||
|
|
<label for="cm-input" class="block text-sm font-medium text-gray-700 mb-1">Centimeters (cm)</label>
|
||
|
|
<div class="relative">
|
||
|
|
<span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500">
|
||
|
|
<i class="fa fa-arrows-h"></i>
|
||
|
|
</span>
|
||
|
|
<input
|
||
|
|
type="number"
|
||
|
|
id="cm-input"
|
||
|
|
placeholder="Enter value in cm"
|
||
|
|
class="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg input-focus transition-all"
|
||
|
|
autocomplete="off"
|
||
|
|
>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 转换按钮 -->
|
||
|
|
<button id="convert-btn" class="w-full bg-primary hover:bg-primary/90 text-white font-medium py-3 px-4 rounded-lg transition-all flex items-center justify-center mb-8">
|
||
|
|
<i class="fa fa-calculator mr-2"></i> Convert
|
||
|
|
</button>
|
||
|
|
|
||
|
|
<!-- 结果区域 -->
|
||
|
|
<div id="results" class="opacity-0 result-animate">
|
||
|
|
<div class="bg-neutral rounded-xl p-5 mb-4">
|
||
|
|
<div class="flex justify-between items-center">
|
||
|
|
<span class="text-gray-600">Inches (in):</span>
|
||
|
|
<span id="inch-result" class="font-semibold text-dark"></span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="bg-neutral rounded-xl p-5">
|
||
|
|
<div class="flex justify-between items-center">
|
||
|
|
<span class="text-gray-600">Feet & Inches:</span>
|
||
|
|
<span id="feet-result" class="font-semibold text-dark"></span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 信息卡片 -->
|
||
|
|
<div class="bg-white/80 backdrop-blur-sm rounded-xl p-4 text-center text-sm text-gray-600">
|
||
|
|
<p>1 inch = 2.54 cm | 1 foot = 30.48 cm</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
// 获取DOM元素
|
||
|
|
const cmInput = document.getElementById('cm-input');
|
||
|
|
const convertBtn = document.getElementById('convert-btn');
|
||
|
|
const resultsDiv = document.getElementById('results');
|
||
|
|
const inchResult = document.getElementById('inch-result');
|
||
|
|
const feetResult = document.getElementById('feet-result');
|
||
|
|
|
||
|
|
// 转换函数
|
||
|
|
function convertCm() {
|
||
|
|
const cm = parseFloat(cmInput.value);
|
||
|
|
|
||
|
|
// 验证输入
|
||
|
|
if (isNaN(cm) || cm < 0) {
|
||
|
|
alert('Please enter a valid positive number');
|
||
|
|
cmInput.focus();
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
// 执行转换
|
||
|
|
const inches = cm / 2.54;
|
||
|
|
const feet = Math.floor(inches / 12);
|
||
|
|
const remainingInches = inches % 12;
|
||
|
|
|
||
|
|
// 显示结果
|
||
|
|
inchResult.textContent = inches.toFixed(3) + ' in';
|
||
|
|
feetResult.textContent = `${feet}' ${remainingInches.toFixed(3)}"`;
|
||
|
|
|
||
|
|
// 显示结果区域并添加动画
|
||
|
|
resultsDiv.classList.remove('opacity-0');
|
||
|
|
resultsDiv.classList.add('opacity-100');
|
||
|
|
|
||
|
|
// 添加结果区域的动画效果
|
||
|
|
resultsDiv.style.transform = 'scale(1.02)';
|
||
|
|
setTimeout(() => {
|
||
|
|
resultsDiv.style.transform = 'scale(1)';
|
||
|
|
}, 200);
|
||
|
|
}
|
||
|
|
|
||
|
|
// 事件监听
|
||
|
|
convertBtn.addEventListener('click', convertCm);
|
||
|
|
|
||
|
|
// 支持回车键转换
|
||
|
|
cmInput.addEventListener('keypress', (e) => {
|
||
|
|
if (e.key === 'Enter') {
|
||
|
|
convertCm();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
// 输入时清除结果
|
||
|
|
cmInput.addEventListener('input', () => {
|
||
|
|
if (cmInput.value === '') {
|
||
|
|
resultsDiv.classList.remove('opacity-100');
|
||
|
|
resultsDiv.classList.add('opacity-0');
|
||
|
|
}
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|