diff --git a/converter.html b/converter.html
new file mode 100644
index 0000000..7d7eb1b
--- /dev/null
+++ b/converter.html
@@ -0,0 +1,161 @@
+<!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>
