diff --git a/index.html b/index.html
index 2d63162..d8e55f2 100644
--- a/index.html
+++ b/index.html
@@ -3,19 +3,20 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>简约之美 - 网页设计</title>
+    <title>极简美学 - 艺术化网页设计</title>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
     <style>
         * {
             margin: 0;
             padding: 0;
             box-sizing: border-box;
-            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            font-family: 'Noto Sans SC', sans-serif;
         }
         
         body {
-            background: linear-gradient(135deg, #6e8efb, #a777e3);
-            color: #333;
+            background: linear-gradient(135deg, #0f2027, #203a43, #2c5364);
+            color: #f8f8f8;
             min-height: 100vh;
             display: flex;
             flex-direction: column;
@@ -23,188 +24,500 @@
             justify-content: center;
             padding: 20px;
             line-height: 1.6;
+            overflow-x: hidden;
+            position: relative;
+        }
+        
+        /* 背景装饰元素 */
+        .bg-decoration {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            z-index: -1;
+            overflow: hidden;
+        }
+        
+        .decoration-circle {
+            position: absolute;
+            border-radius: 50%;
+            opacity: 0.1;
+            background: linear-gradient(135deg, #6e8efb, #a777e3);
+            animation: float 15s infinite ease-in-out;
+        }
+        
+        .circle-1 {
+            width: 300px;
+            height: 300px;
+            top: -100px;
+            left: -100px;
+            animation-delay: 0s;
+        }
+        
+        .circle-2 {
+            width: 200px;
+            height: 200px;
+            bottom: -50px;
+            right: -50px;
+            animation-delay: -5s;
+        }
+        
+        .circle-3 {
+            width: 150px;
+            height: 150px;
+            top: 50%;
+            left: 70%;
+            animation-delay: -10s;
+        }
+        
+        @keyframes float {
+            0%, 100% { transform: translate(0, 0) scale(1); }
+            25% { transform: translate(20px, 30px) scale(1.05); }
+            50% { transform: translate(-15px, 15px) scale(0.95); }
+            75% { transform: translate(-20px, -10px) scale(1.02); }
         }
         
         .container {
-            max-width: 800px;
+            max-width: 900px;
             width: 100%;
-            background: rgba(255, 255, 255, 0.95);
-            border-radius: 20px;
-            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
+            background: rgba(255, 255, 255, 0.08);
+            border-radius: 25px;
+            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
+            backdrop-filter: blur(15px);
+            border: 1px solid rgba(255, 255, 255, 0.1);
             overflow: hidden;
             text-align: center;
-            padding: 40px;
-            backdrop-filter: blur(10px);
-            animation: fadeIn 1s ease-out;
+            padding: 50px 40px;
+            animation: fadeIn 1.5s ease-out;
+            position: relative;
+            z-index: 1;
         }
         
         @keyframes fadeIn {
-            from { opacity: 0; transform: translateY(20px); }
-            to { opacity: 1; transform: translateY(0); }
+            from { opacity: 0; transform: translateY(30px) scale(0.95); }
+            to { opacity: 1; transform: translateY(0) scale(1); }
         }
         
         h1 {
-            color: #6e8efb;
-            margin-bottom: 20px;
-            font-size: 2.5rem;
+            font-size: 3.5rem;
             font-weight: 700;
+            margin-bottom: 20px;
+            background: linear-gradient(to right, #6e8efb, #a777e3, #fc466b);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            text-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
+            letter-spacing: 1px;
+        }
+        
+        .subtitle {
+            font-size: 1.4rem;
+            color: #ccc;
+            margin-bottom: 40px;
+            font-weight: 300;
         }
         
         .divider {
-            height: 4px;
-            width: 80px;
+            height: 3px;
+            width: 100px;
             background: linear-gradient(to right, #6e8efb, #a777e3);
-            margin: 0 auto 25px;
-            border-radius: 2px;
+            margin: 0 auto 40px;
+            border-radius: 3px;
+            position: relative;
         }
         
-        p.lead {
-            font-size: 1.4rem;
-            color: #555;
-            margin-bottom: 30px;
-            line-height: 1.8;
+        .divider::before, .divider::after {
+            content: '';
+            position: absolute;
+            width: 10px;
+            height: 10px;
+            border-radius: 50%;
+            background: #6e8efb;
+            top: -3.5px;
+        }
+        
+        .divider::before {
+            left: 0;
+        }
+        
+        .divider::after {
+            right: 0;
         }
         
         .content-box {
-            background: linear-gradient(135deg, #f8f9fa, #e9ecef);
-            border-radius: 15px;
-            padding: 25px;
-            margin: 30px 0;
-            border-left: 5px solid #6e8efb;
+            background: rgba(255, 255, 255, 0.05);
+            border-radius: 20px;
+            padding: 30px;
+            margin: 40px 0;
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            position: relative;
+            overflow: hidden;
+            transition: transform 0.3s ease, box-shadow 0.3s ease;
+        }
+        
+        .content-box:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
+        }
+        
+        .content-box::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 5px;
+            height: 100%;
+            background: linear-gradient(to bottom, #6e8efb, #a777e3);
         }
         
         .original-text {
-            font-size: 1.8rem;
-            color: #6e8efb;
+            font-size: 2.2rem;
             font-weight: 300;
             font-style: italic;
-            padding: 15px;
-            background: rgba(110, 142, 251, 0.1);
-            border-radius: 10px;
+            padding: 20px;
+            background: rgba(255, 255, 255, 0.1);
+            border-radius: 15px;
             display: inline-block;
-            margin: 20px 0;
+            margin: 25px 0;
+            border: 1px solid rgba(255, 255, 255, 0.15);
+            transition: all 0.3s ease;
+            cursor: pointer;
+        }
+        
+        .original-text:hover {
+            background: rgba(255, 255, 255, 0.15);
+            transform: scale(1.03);
+        }
+        
+        .quote-icon {
+            font-size: 1.5rem;
+            margin: 0 10px;
+            color: #6e8efb;
+            vertical-align: middle;
         }
         
         .features {
-            display: flex;
-            flex-wrap: wrap;
-            justify-content: center;
-            gap: 20px;
-            margin: 40px 0;
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+            gap: 25px;
+            margin: 50px 0;
         }
         
         .feature {
-            flex: 1;
-            min-width: 200px;
-            background: white;
-            padding: 20px;
-            border-radius: 15px;
-            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
-            transition: transform 0.3s ease;
+            background: rgba(255, 255, 255, 0.07);
+            padding: 30px 25px;
+            border-radius: 20px;
+            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
+            transition: all 0.3s ease;
+            border: 1px solid rgba(255, 255, 255, 0.1);
         }
         
         .feature:hover {
-            transform: translateY(-5px);
+            transform: translateY(-8px);
+            background: rgba(255, 255, 255, 0.1);
+            box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
         }
         
         .feature i {
-            font-size: 2.5rem;
-            color: #6e8efb;
-            margin-bottom: 15px;
+            font-size: 3rem;
+            margin-bottom: 20px;
+            background: linear-gradient(to right, #6e8efb, #a777e3);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
         }
         
         .feature h3 {
-            color: #555;
-            margin-bottom: 10px;
+            font-size: 1.4rem;
+            margin-bottom: 15px;
+            color: #fff;
         }
         
+        .feature p {
+            color: #ccc;
+            font-size: 1rem;
+            line-height: 1.6;
+        }
+        
+        .interactive-section {
+            margin: 40px 0;
+            padding: 30px;
+            background: rgba(255, 255, 255, 0.05);
+            border-radius: 20px;
+            border: 1px solid rgba(255, 255, 255, 0.1);
+        }
+        
+        .color-toggle {
+            display: inline-flex;
+            background: rgba(255, 255, 255, 0.1);
+            padding: 10px;
+            border-radius: 50px;
+            margin: 20px 0;
+        }
+        
+        .color-btn {
+            width: 40px;
+            height: 40px;
+            border-radius: 50%;
+            margin: 0 10px;
+            cursor: pointer;
+            border: 2px solid transparent;
+            transition: all 0.3s ease;
+        }
+        
+        .color-btn.active {
+            border-color: white;
+            transform: scale(1.1);
+        }
+        
+        .color-1 { background: linear-gradient(135deg, #0f2027, #203a43, #2c5364); }
+        .color-2 { background: linear-gradient(135deg, #3a1c71, #d76d77, #ffaf7b); }
+        .color-3 { background: linear-gradient(135deg, #1a2a6c, #b21f1f, #fdbb2d); }
+        .color-4 { background: linear-gradient(135deg, #00416a, #e4e5e6); }
+        
         footer {
-            margin-top: 40px;
-            color: white;
+            margin-top: 50px;
+            color: #aaa;
             text-align: center;
             font-size: 0.9rem;
-            opacity: 0.8;
         }
         
         .social-links {
             display: flex;
             justify-content: center;
-            gap: 15px;
-            margin-top: 15px;
+            gap: 20px;
+            margin-top: 20px;
         }
         
         .social-links a {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            width: 45px;
+            height: 45px;
+            border-radius: 50%;
+            background: rgba(255, 255, 255, 0.1);
             color: white;
-            font-size: 1.5rem;
-            transition: transform 0.3s ease;
+            font-size: 1.2rem;
+            transition: all 0.3s ease;
         }
         
         .social-links a:hover {
-            transform: scale(1.2);
+            background: linear-gradient(to right, #6e8efb, #a777e3);
+            transform: translateY(-3px);
         }
         
+        /* 响应式设计 */
         @media (max-width: 768px) {
             .container {
-                padding: 25px;
+                padding: 30px 20px;
             }
             
             h1 {
-                font-size: 2rem;
+                font-size: 2.5rem;
             }
             
-            p.lead {
-                font-size: 1.1rem;
+            .subtitle {
+                font-size: 1.2rem;
+            }
+            
+            .original-text {
+                font-size: 1.8rem;
             }
             
             .features {
-                flex-direction: column;
+                grid-template-columns: 1fr;
+            }
+        }
+        
+        /* 粒子效果 */
+        .particles {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            z-index: -1;
+        }
+        
+        .particle {
+            position: absolute;
+            border-radius: 50%;
+            background: rgba(255, 255, 255, 0.3);
+            animation: float-particle 15s infinite linear;
+        }
+        
+        @keyframes float-particle {
+            0% {
+                transform: translateY(0) translateX(0) rotate(0deg);
+                opacity: 0;
+            }
+            10% {
+                opacity: 1;
+            }
+            90% {
+                opacity: 1;
+            }
+            100% {
+                transform: translateY(-100vh) translateX(100px) rotate(360deg);
+                opacity: 0;
             }
         }
     </style>
 </head>
 <body>
+    <!-- 背景装饰 -->
+    <div class="bg-decoration">
+        <div class="decoration-circle circle-1"></div>
+        <div class="decoration-circle circle-2"></div>
+        <div class="decoration-circle circle-3"></div>
+    </div>
+    
+    <!-- 粒子背景 -->
+    <div class="particles" id="particles"></div>
+    
     <div class="container">
-        <h1>简约之美</h1>
+        <h1>极简美学</h1>
+        <p class="subtitle">简约之中见非凡，空灵之处显意境</p>
+        
         <div class="divider"></div>
-        <p class="lead">有时候，最简单的设计反而能创造出最强大的视觉冲击</p>
         
         <div class="content-box">
-            <p>原始内容被优雅地重新设计：</p>
+            <p>原始内容被重新赋予艺术生命：</p>
             <div class="original-text">
-                <i class="fas fa-quote-left"></i> 啥都没有 <i class="fas fa-quote-right"></i>
+                <i class="fas fa-quote-left quote-icon"></i> 啥都没有 <i class="fas fa-quote-right quote-icon"></i>
             </div>
-            <p>但我们为它增添了美感和目的</p>
+            <p>在极简主义中，空白本身就是一种设计语言</p>
         </div>
         
         <div class="features">
             <div class="feature">
                 <i class="fas fa-paint-brush"></i>
-                <h3>现代设计</h3>
-                <p>采用最新的UI设计趋势，创造视觉吸引力</p>
+                <h3>现代美学</h3>
+                <p>采用最新的玻璃态设计，融合微交互与动效</p>
             </div>
             <div class="feature">
                 <i class="fas fa-mobile-alt"></i>
-                <h3>响应式布局</h3>
-                <p>在任何设备上都能完美展示</p>
+                <h3>全响应式</h3>
+                <p>在任何设备上都能提供完美的视觉体验</p>
             </div>
             <div class="feature">
                 <i class="fas fa-bolt"></i>
-                <h3>性能优化</h3>
-                <p>快速加载，流畅动画，卓越体验</p>
+                <h3>极致性能</h3>
+                <p>精心优化的代码确保流畅的动画与快速加载</p>
             </div>
         </div>
         
-        <p class="lead">简约不简单，少即是多</p>
+        <div class="interactive-section">
+            <h3>选择主题色彩</h3>
+            <div class="color-toggle">
+                <div class="color-btn color-1 active" data-theme="default"></div>
+                <div class="color-btn color-2" data-theme="sunset"></div>
+                <div class="color-btn color-3" data-theme="fire"></div>
+                <div class="color-btn color-4" data-theme="silver"></div>
+            </div>
+            <p>点击上方色块切换页面主题色彩</p>
+        </div>
+        
+        <p class="subtitle">少即是多，空即是满，无即是有</p>
     </div>
     
     <footer>
-        <p>© 2023 简约网页设计 | 保留所有权利</p>
+        <p>© 2023 极致简约美学 | 设计于当下，着眼于未来</p>
         <div class="social-links">
             <a href="#"><i class="fab fa-twitter"></i></a>
-            <a href="#"><i class="fab fa-facebook"></i></a>
             <a href="#"><i class="fab fa-instagram"></i></a>
+            <a href="#"><i class="fab fa-dribbble"></i></a>
             <a href="#"><i class="fab fa-github"></i></a>
         </div>
     </footer>
+    
+    <script>
+        // 创建粒子背景
+        function createParticles() {
+            const particlesContainer = document.getElementById('particles');
+            const particleCount = 30;
+            
+            for (let i = 0; i < particleCount; i++) {
+                const particle = document.createElement('div');
+                particle.classList.add('particle');
+                
+                // 随机大小和位置
+                const size = Math.random() * 10 + 2;
+                const posX = Math.random() * 100;
+                const duration = Math.random() * 10 + 10;
+                const delay = Math.random() * -20;
+                
+                particle.style.width = `${size}px`;
+                particle.style.height = `${size}px`;
+                particle.style.left = `${posX}%`;
+                particle.style.animationDuration = `${duration}s`;
+                particle.style.animationDelay = `${delay}s`;
+                
+                particlesContainer.appendChild(particle);
+            }
+        }
+        
+        // 主题切换功能
+        function setupThemeToggle() {
+            const colorButtons = document.querySelectorAll('.color-btn');
+            
+            colorButtons.forEach(button => {
+                button.addEventListener('click', function() {
+                    // 移除所有active类
+                    colorButtons.forEach(btn => btn.classList.remove('active'));
+                    
+                    // 添加active类到当前按钮
+                    this.classList.add('active');
+                    
+                    // 根据选择切换主题
+                    const theme = this.getAttribute('data-theme');
+                    changeTheme(theme);
+                });
+            });
+        }
+        
+        // 切换主题函数
+        function changeTheme(theme) {
+            const body = document.body;
+            
+            // 移除所有可能的主题类
+            body.classList.remove('theme-sunset', 'theme-fire', 'theme-silver');
+            
+            // 根据主题添加对应的类
+            if (theme !== 'default') {
+                body.classList.add(`theme-${theme}`);
+            }
+            
+            // 根据主题更新背景渐变
+            switch(theme) {
+                case 'sunset':
+                    body.style.background = 'linear-gradient(135deg, #3a1c71, #d76d77, #ffaf7b)';
+                    break;
+                case 'fire':
+                    body.style.background = 'linear-gradient(135deg, #1a2a6c, #b21f1f, #fdbb2d)';
+                    break;
+                case 'silver':
+                    body.style.background = 'linear-gradient(135deg, #00416a, #e4e5e6)';
+                    break;
+                default:
+                    body.style.background = 'linear-gradient(135deg, #0f2027, #203a43, #2c5364)';
+            }
+        }
+        
+        // 初始化
+        document.addEventListener('DOMContentLoaded', function() {
+            createParticles();
+            setupThemeToggle();
+            
+            // 为原始文本添加点击动画
+            const originalText = document.querySelector('.original-text');
+            originalText.addEventListener('click', function() {
+                this.style.transform = 'scale(1.1)';
+                setTimeout(() => {
+                    this.style.transform = 'scale(1)';
+                }, 300);
+            });
+        });
+    </script>
 </body>
 </html>
\ No newline at end of file
