From 310a5da94f96c71316f1c21183be71b11d4f5f44 Mon Sep 17 00:00:00 2001
From: xiaomai <xiaomai@ramatex.com.my>
Date: Thu, 11 Sep 2025 11:11:57 +0800
Subject: [PATCH] refactor(ui): replace neon theme with asymmetrical layout

Completely redesigns the webpage, moving from a centered, neon-futuristic aesthetic to a modern, asymmetrical grid layout. This change aims to create a more dynamic and visually engaging user experience.

- Layout: Implemented a CSS Grid with distinct sections for header, sidebar, and main content.
- Styling: Replaced the neon color palette and fonts with a new theme using Montserrat and Playfair Display.
- Interactivity: Removed the theme color switcher and replaced static neon effects with scroll-triggered fade-in animations.
---
 index.html | 906 +++++++++++++++++++++--------------------------------
 1 file changed, 356 insertions(+), 550 deletions(-)
diff --git a/index.html b/index.html
index d5195fe..6bbf89b 100644
--- a/index.html
+++ b/index.html
@@ -3,9 +3,9 @@
 <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=Orbitron:wght@400;500;700;900&family=Rajdhani:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;600;700;800&family=Playfair+Display:wght@400;700;800&display=swap" rel="stylesheet">
     <style>
         * {
             margin: 0;
@@ -14,368 +14,351 @@
         }
         
         :root {
-            --neon-blue: #00f3ff;
-            --neon-pink: #ff00ff;
-            --neon-purple: #bd00ff;
-            --neon-green: #39ff14;
-            --dark-bg: #0a0a12;
-            --dark-card: #12121f;
-            --light-text: #e6e6ff;
-            --transition: all 0.3s ease;
+            --primary: #2563eb;
+            --secondary: #8b5cf6;
+            --accent: #ec4899;
+            --dark: #0f172a;
+            --light: #f8fafc;
+            --gray: #94a3b8;
+            --transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
         }
         
         body {
-            background: var(--dark-bg);
-            color: var(--light-text);
+            background: linear-gradient(135deg, var(--dark), #1e293b);
+            color: var(--light);
             min-height: 100vh;
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            justify-content: center;
-            padding: 20px;
+            font-family: 'Montserrat', sans-serif;
             line-height: 1.6;
             overflow-x: hidden;
-            position: relative;
-            font-family: 'Rajdhani', sans-serif;
+            padding: 20px;
         }
         
-        /* 霓虹网格背景 */
-        .neon-grid {
-            position: absolute;
+        /* 非对称网格布局 */
+        .layout-grid {
+            display: grid;
+            grid-template-columns: 1fr 1.5fr;
+            grid-template-rows: auto auto auto;
+            gap: 30px;
+            max-width: 1400px;
+            margin: 0 auto;
+        }
+        
+        /* 网格区域定义 */
+        .header {
+            grid-column: 1 / 3;
+            grid-row: 1;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 20px 0;
+            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+        }
+        
+        .sidebar {
+            grid-column: 1;
+            grid-row: 2 / 4;
+            background: rgba(15, 23, 42, 0.7);
+            border-radius: 20px;
+            padding: 40px;
+            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
+            backdrop-filter: blur(10px);
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+        }
+        
+        .main-content {
+            grid-column: 2;
+            grid-row: 2;
+            background: rgba(15, 23, 42, 0.7);
+            border-radius: 20px;
+            padding: 40px;
+            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
+            backdrop-filter: blur(10px);
+            border: 1px solid rgba(255, 255, 255, 0.1);
+        }
+        
+        .feature-section {
+            grid-column: 2;
+            grid-row: 3;
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 20px;
+        }
+        
+        /* 装饰元素 */
+        .floating-shapes {
+            position: fixed;
             top: 0;
             left: 0;
             width: 100%;
             height: 100%;
-            z-index: -3;
-            overflow: hidden;
-            opacity: 0.3;
+            pointer-events: none;
+            z-index: -1;
         }
         
-        .grid-line {
-            position: absolute;
-            background: rgba(0, 243, 255, 0.1);
-        }
-        
-        .horizontal {
-            width: 100%;
-            height: 1px;
-        }
-        
-        .vertical {
-            width: 1px;
-            height: 100%;
-        }
-        
-        /* 霓虹灯效果装饰 */
-        .neon-circle {
+        .shape {
             position: absolute;
             border-radius: 50%;
-            border: 2px solid var(--neon-blue);
-            box-shadow: 0 0 10px var(--neon-blue), 0 0 20px var(--neon-blue);
             opacity: 0.1;
-            animation: pulse 6s infinite alternate;
+            filter: blur(40px);
         }
         
-        .circle-1 {
-            width: 300px;
-            height: 300px;
+        .shape-1 {
+            width: 400px;
+            height: 400px;
+            background: var(--primary);
             top: -100px;
             left: -100px;
-            animation-delay: 0s;
         }
         
-        .circle-2 {
-            width: 200px;
-            height: 200px;
+        .shape-2 {
+            width: 300px;
+            height: 300px;
+            background: var(--accent);
             bottom: -50px;
             right: -50px;
-            animation-delay: -2s;
-            border-color: var(--neon-pink);
-            box-shadow: 0 0 10px var(--neon-pink), 0 0 20px var(--neon-pink);
         }
         
-        @keyframes pulse {
-            0% { opacity: 0.05; transform: scale(0.95); }
-            100% { opacity: 0.2; transform: scale(1.05); }
-        }
-        
-        .container {
-            max-width: 1100px;
-            width: 100%;
-            background: rgba(18, 18, 31, 0.8);
-            border-radius: 16px;
-            box-shadow: 
-                0 0 0 1px rgba(0, 243, 255, 0.1),
-                0 0 30px rgba(0, 243, 255, 0.1);
-            backdrop-filter: blur(10px);
-            border: 1px solid rgba(0, 243, 255, 0.2);
-            overflow: hidden;
-            text-align: center;
-            padding: 50px 40px;
-            position: relative;
-            z-index: 1;
-        }
-        
-        .neon-border {
-            position: absolute;
-            top: 10px;
-            left: 10px;
-            right: 10px;
-            bottom: 10px;
-            border: 1px solid rgba(0, 243, 255, 0.3);
-            border-radius: 12px;
-            pointer-events: none;
-            box-shadow: 0 0 15px rgba(0, 243, 255, 0.2);
-            animation: borderGlow 3s infinite alternate;
-        }
-        
-        @keyframes borderGlow {
-            0% { box-shadow: 0 0 15px rgba(0, 243, 255, 0.2); }
-            100% { box-shadow: 0 0 25px rgba(0, 243, 255, 0.4), 0 0 40px rgba(0, 243, 255, 0.1); }
-        }
-        
-        h1 {
-            font-family: 'Orbitron', sans-serif;
-            font-size: 4rem;
-            font-weight: 700;
-            margin-bottom: 20px;
-            color: var(--neon-blue);
-            text-shadow: 0 0 10px var(--neon-blue);
-            letter-spacing: 2px;
-            position: relative;
-        }
-        
-        .subtitle {
-            font-size: 1.5rem;
-            color: var(--light-text);
-            margin-bottom: 40px;
-            font-weight: 300;
-            letter-spacing: 3px;
-            text-transform: uppercase;
-        }
-        
-        .divider {
-            height: 2px;
+        .shape-3 {
             width: 200px;
-            background: linear-gradient(to right, transparent, var(--neon-blue), transparent);
-            margin: 0 auto 40px;
+            height: 200px;
+            background: var(--secondary);
+            top: 50%;
+            left: 70%;
+        }
+        
+        /* 标题样式 */
+        .logo {
+            font-family: 'Playfair Display', serif;
+            font-size: 2.5rem;
+            font-weight: 800;
+            background: linear-gradient(to right, var(--primary), var(--accent));
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+        }
+        
+        .nav-links {
+            display: flex;
+            gap: 30px;
+        }
+        
+        .nav-links a {
+            color: var(--light);
+            text-decoration: none;
+            font-weight: 500;
+            transition: var(--transition);
             position: relative;
         }
         
-        .divider::before, .divider::after {
-            content: '◆';
+        .nav-links a::after {
+            content: '';
             position: absolute;
-            top: -10px;
-            color: var(--neon-blue);
-            font-size: 20px;
-        }
-        
-        .divider::before {
+            bottom: -5px;
             left: 0;
-        }
-        
-        .divider::after {
-            right: 0;
-        }
-        
-        .content-box {
-            background: rgba(0, 243, 255, 0.05);
-            border-radius: 12px;
-            padding: 30px;
-            margin: 40px 0;
-            border: 1px solid rgba(0, 243, 255, 0.1);
-            position: relative;
-            overflow: hidden;
+            width: 0;
+            height: 2px;
+            background: linear-gradient(to right, var(--primary), var(--accent));
             transition: var(--transition);
         }
         
-        .content-box:hover {
-            transform: translateY(-5px);
-            box-shadow: 0 5px 20px rgba(0, 243, 255, 0.2);
+        .nav-links a:hover::after {
+            width: 100%;
+        }
+        
+        /* 侧边栏内容 */
+        .sidebar-content {
+            text-align: right;
+        }
+        
+        .sidebar-title {
+            font-family: 'Playfair Display', serif;
+            font-size: 3.5rem;
+            font-weight: 800;
+            margin-bottom: 20px;
+            line-height: 1.2;
+        }
+        
+        .sidebar-subtitle {
+            font-size: 1.2rem;
+            color: var(--gray);
+            margin-bottom: 40px;
+        }
+        
+        .sidebar-cta {
+            display: inline-block;
+            padding: 15px 35px;
+            background: linear-gradient(to right, var(--primary), var(--secondary));
+            color: white;
+            text-decoration: none;
+            border-radius: 30px;
+            font-weight: 600;
+            transition: var(--transition);
+            box-shadow: 0 5px 15px rgba(37, 99, 235, 0.3);
+        }
+        
+        .sidebar-cta:hover {
+            transform: translateY(-3px);
+            box-shadow: 0 8px 20px rgba(37, 99, 235, 0.4);
+        }
+        
+        /* 主内容区域 */
+        .content-box {
+            margin-bottom: 40px;
+        }
+        
+        .content-title {
+            font-size: 1.8rem;
+            margin-bottom: 20px;
+            color: var(--light);
+            font-weight: 700;
         }
         
         .original-text {
-            font-family: 'Orbitron', sans-serif;
+            font-family: 'Playfair Display', serif;
             font-size: 2.5rem;
-            font-weight: 500;
-            padding: 25px 40px;
-            background: rgba(0, 0, 0, 0.3);
-            border-radius: 8px;
+            font-weight: 700;
+            font-style: italic;
+            padding: 25px;
+            background: rgba(0, 0, 0, 0.2);
+            border-radius: 15px;
             display: inline-block;
-            margin: 30px 0;
-            border: 1px solid var(--neon-pink);
-            box-shadow: 0 0 15px rgba(255, 0, 255, 0.3);
-            position: relative;
-            transition: var(--transition);
-            cursor: pointer;
-            color: var(--neon-pink);
-            text-shadow: 0 0 8px var(--neon-pink);
-        }
-        
-        .original-text:hover {
-            transform: scale(1.03);
-            box-shadow: 0 0 25px rgba(255, 0, 255, 0.5);
+            margin: 20px 0;
+            border-left: 4px solid var(--accent);
+            transform: skewX(-5deg);
         }
         
         .quote-icon {
             font-size: 1.8rem;
-            margin: 0 15px;
-            color: var(--neon-pink);
+            margin: 0 10px;
+            color: var(--accent);
             vertical-align: middle;
-            text-shadow: 0 0 8px var(--neon-pink);
         }
         
-        .features {
-            display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
-            gap: 25px;
-            margin: 50px 0;
-        }
-        
-        .feature {
-            background: rgba(18, 18, 31, 0.9);
-            padding: 30px 25px;
-            border-radius: 12px;
-            box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
+        /* 特性卡片 */
+        .feature-card {
+            background: rgba(15, 23, 42, 0.7);
+            border-radius: 15px;
+            padding: 25px;
+            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
             transition: var(--transition);
-            border: 1px solid rgba(0, 243, 255, 0.1);
-            position: relative;
-            overflow: hidden;
-        }
-        
-        .feature::before {
-            content: '';
-            position: absolute;
-            top: 0;
-            left: 0;
-            width: 3px;
+            border: 1px solid rgba(255, 255, 255, 0.1);
             height: 100%;
-            background: linear-gradient(to bottom, var(--neon-blue), var(--neon-purple));
-            opacity: 0;
-            transition: var(--transition);
         }
         
-        .feature:hover::before {
-            opacity: 1;
+        .feature-card:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
         }
         
-        .feature:hover {
-            transform: translateY(-8px);
-            box-shadow: 0 10px 25px rgba(0, 243, 255, 0.2);
-        }
-        
-        .feature i {
-            font-size: 2.8rem;
-            margin-bottom: 20px;
-            color: var(--neon-blue);
-            text-shadow: 0 0 10px var(--neon-blue);
-        }
-        
-        .feature h3 {
-            font-size: 1.5rem;
+        .feature-card i {
+            font-size: 2.5rem;
             margin-bottom: 15px;
-            color: var(--light-text);
-            font-family: 'Orbitron', sans-serif;
+            color: var(--primary);
         }
         
-        .feature p {
-            color: #a0a0cc;
-            font-size: 1.1rem;
+        .feature-card h3 {
+            font-size: 1.4rem;
+            margin-bottom: 15px;
+            color: var(--light);
+        }
+        
+        .feature-card p {
+            color: var(--gray);
+            font-size: 1rem;
             line-height: 1.6;
         }
         
-        .interactive-section {
-            margin: 40px 0;
-            padding: 30px;
-            background: rgba(18, 18, 31, 0.9);
-            border-radius: 12px;
-            border: 1px solid rgba(0, 243, 255, 0.1);
-            position: relative;
+        /* 响应式设计 */
+        @media (max-width: 1200px) {
+            .layout-grid {
+                grid-template-columns: 1fr;
+            }
+            
+            .header, .sidebar, .main-content, .feature-section {
+                grid-column: 1;
+            }
+            
+            .sidebar {
+                grid-row: 2;
+            }
+            
+            .main-content {
+                grid-row: 3;
+            }
+            
+            .feature-section {
+                grid-row: 4;
+            }
         }
         
-        .interactive-section::before {
-            content: '◆ ◆ ◆';
-            position: absolute;
-            top: -15px;
-            left: 50%;
-            transform: translateX(-50%);
-            color: var(--neon-blue);
-            font-size: 20px;
-            background: var(--dark-bg);
-            padding: 0 20px;
+        @media (max-width: 768px) {
+            .feature-section {
+                grid-template-columns: 1fr;
+            }
+            
+            .header {
+                flex-direction: column;
+                gap: 20px;
+            }
+            
+            .nav-links {
+                flex-wrap: wrap;
+                justify-content: center;
+            }
+            
+            .sidebar-title {
+                font-size: 2.8rem;
+            }
+            
+            .original-text {
+                font-size: 2rem;
+            }
         }
         
-        .color-palette {
-            display: flex;
-            justify-content: center;
-            flex-wrap: wrap;
-            gap: 15px;
-            margin: 25px 0;
+        /* 动画效果 */
+        @keyframes fadeInUp {
+            from {
+                opacity: 0;
+                transform: translateY(30px);
+            }
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
         }
         
-        .color-option {
-            width: 50px;
-            height: 50px;
-            border-radius: 50%;
-            cursor: pointer;
-            transition: var(--transition);
-            border: 2px solid transparent;
-            position: relative;
-            overflow: hidden;
-            box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
+        .animate {
+            animation: fadeInUp 0.8s ease-out forwards;
         }
         
-        .color-option.active {
-            transform: scale(1.15);
-            border-color: var(--light-text);
-            box-shadow: 0 0 15px currentColor;
+        .delay-1 {
+            animation-delay: 0.2s;
         }
         
-        .color-option::after {
-            content: '✓';
-            position: absolute;
-            top: 50%;
-            left: 50%;
-            transform: translate(-50%, -50%);
-            color: white;
-            font-size: 1.5rem;
-            opacity: 0;
-            transition: var(--transition);
+        .delay-2 {
+            animation-delay: 0.4s;
         }
         
-        .color-option.active::after {
-            opacity: 1;
+        .delay-3 {
+            animation-delay: 0.6s;
         }
         
-        .theme-1 { background: var(--neon-blue); }
-        .theme-2 { background: var(--neon-pink); }
-        .theme-3 { background: var(--neon-purple); }
-        .theme-4 { background: var(--neon-green); }
-        
+        /* 页脚 */
         footer {
-            margin-top: 60px;
-            color: #a0a0cc;
             text-align: center;
-            font-size: 1rem;
-            position: relative;
-        }
-        
-        footer::before {
-            content: '';
-            position: absolute;
-            top: -30px;
-            left: 50%;
-            transform: translateX(-50%);
-            width: 200px;
-            height: 1px;
-            background: linear-gradient(to right, transparent, var(--neon-blue), transparent);
+            margin-top: 80px;
+            padding: 40px 0;
+            color: var(--gray);
+            border-top: 1px solid rgba(255, 255, 255, 0.1);
         }
         
         .social-links {
             display: flex;
             justify-content: center;
             gap: 20px;
-            margin-top: 25px;
+            margin-top: 20px;
         }
         
         .social-links a {
@@ -385,315 +368,138 @@
             width: 50px;
             height: 50px;
             border-radius: 50%;
-            background: rgba(18, 18, 31, 0.9);
-            color: var(--neon-blue);
+            background: rgba(255, 255, 255, 0.1);
+            color: var(--light);
             font-size: 1.3rem;
             transition: var(--transition);
-            position: relative;
-            overflow: hidden;
-            border: 1px solid rgba(0, 243, 255, 0.2);
         }
         
         .social-links a:hover {
-            color: var(--neon-pink);
+            background: linear-gradient(to right, var(--primary), var(--secondary));
             transform: translateY(-5px);
-            box-shadow: 0 0 15px rgba(255, 0, 255, 0.3);
-            border-color: rgba(255, 0, 255, 0.3);
-        }
-        
-        /* 响应式设计 */
-        @media (max-width: 1200px) {
-            h1 {
-                font-size: 3.5rem;
-            }
-            
-            .original-text {
-                font-size: 2.2rem;
-            }
-        }
-        
-        @media (max-width: 992px) {
-            h1 {
-                font-size: 3rem;
-            }
-            
-            .subtitle {
-                font-size: 1.3rem;
-            }
-            
-            .original-text {
-                font-size: 2rem;
-                padding: 20px 30px;
-            }
-        }
-        
-        @media (max-width: 768px) {
-            .container {
-                padding: 40px 25px;
-            }
-            
-            h1 {
-                font-size: 2.5rem;
-            }
-            
-            .subtitle {
-                font-size: 1.1rem;
-            }
-            
-            .original-text {
-                font-size: 1.8rem;
-                padding: 15px 25px;
-            }
-            
-            .features {
-                grid-template-columns: 1fr;
-            }
-            
-            .color-option {
-                width: 45px;
-                height: 45px;
-            }
-            
-            .social-links a {
-                width: 45px;
-                height: 45px;
-                font-size: 1.2rem;
-            }
-        }
-        
-        /* 霓虹文字效果 */
-        .neon-text {
-            text-shadow: 
-                0 0 5px currentColor,
-                0 0 10px currentColor,
-                0 0 20px currentColor,
-                0 0 40px currentColor;
-        }
-        
-        /* 霓虹按钮效果 */
-        .neon-btn {
-            display: inline-block;
-            padding: 12px 30px;
-            margin: 20px 10px;
-            background: transparent;
-            color: var(--neon-blue);
-            border: 2px solid var(--neon-blue);
-            border-radius: 30px;
-            font-family: 'Orbitron', sans-serif;
-            font-size: 1.1rem;
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            cursor: pointer;
-            transition: var(--transition);
-            box-shadow: 
-                0 0 10px rgba(0, 243, 255, 0.3),
-                inset 0 0 10px rgba(0, 243, 255, 0.1);
-            text-shadow: 0 0 5px var(--neon-blue);
-        }
-        
-        .neon-btn:hover {
-            background: var(--neon-blue);
-            color: var(--dark-bg);
-            box-shadow: 
-                0 0 20px var(--neon-blue),
-                0 0 40px var(--neon-blue),
-                inset 0 0 20px rgba(255, 255, 255, 0.3);
-            text-shadow: none;
         }
     </style>
 </head>
 <body>
-    <!-- 霓虹网格背景 -->
-    <div class="neon-grid"></div>
+    <!-- 装饰形状 -->
+    <div class="floating-shapes">
+        <div class="shape shape-1"></div>
+        <div class="shape shape-2"></div>
+        <div class="shape shape-3"></div>
+    </div>
     
-    <!-- 霓虹圆圈装饰 -->
-    <div class="neon-circle circle-1"></div>
-    <div class="neon-circle circle-2"></div>
-    
-    <div class="container">
-        <div class="neon-border"></div>
+    <!-- 主布局网格 -->
+    <div class="layout-grid">
+        <!-- 头部 -->
+        <header class="header animate">
+            <div class="logo">Asymmetry</div>
+            <nav class="nav-links">
+                <a href="#">首页</a>
+                <a href="#">关于</a>
+                <a href="#">服务</a>
+                <a href="#">作品</a>
+                <a href="#">联系</a>
+            </nav>
+        </header>
         
-        <h1 class="neon-text" style="color: var(--neon-blue)">霓虹极简</h1>
-        <p class="subtitle">未来主义美学与简约设计的完美融合</p>
+        <!-- 侧边栏 -->
+        <aside class="sidebar animate delay-1">
+            <div class="sidebar-content">
+                <h1 class="sidebar-title">创新非对称布局设计</h1>
+                <p class="sidebar-subtitle">打破传统网格，创造视觉张力与动态平衡</p>
+                <a href="#" class="sidebar-cta">探索更多</a>
+            </div>
+        </aside>
         
-        <div class="divider"></div>
-        
-        <div class="content-box">
-            <p>原始内容被赋予未来感：</p>
-            <div class="original-text neon-text">
-                <i class="fas fa-quote-left quote-icon"></i> 啥都没有 <i class="fas fa-quote-right quote-icon"></i>
+        <!-- 主内容 -->
+        <main class="main-content animate delay-2">
+            <div class="content-box">
+                <h2 class="content-title">重新定义网页美学</h2>
+                <p>我们打破了传统的对称布局，采用大胆的非对称设计，创造独特的视觉层次和动态平衡。</p>
             </div>
-            <p>在数字时代，极简主义获得了新的表达形式</p>
-        </div>
-        
-        <div class="features">
-            <div class="feature">
-                <i class="fas fa-microchip"></i>
-                <h3>科技美学</h3>
-                <p>融合赛博朋克元素与未来主义设计语言，创造数字时代的视觉体验</p>
-            </div>
-            <div class="feature">
-                <i class="fas fa-lightbulb"></i>
-                <h3>霓虹光影</h3>
-                <p>使用发光效果和鲜艳色彩，营造充满未来感的视觉氛围</p>
-            </div>
-            <div class="feature">
-                <i class="fas fa-code"></i>
-                <h3>数字简约</h3>
-                <p>在复杂的技术中寻找简约之美，创造清晰而有力的设计表达</p>
-            </div>
-        </div>
-        
-        <div class="interactive-section">
-            <h3>选择霓虹色彩</h3>
-            <div class="color-palette">
-                <div class="color-option theme-1 active" data-theme="blue"></div>
-                <div class="color-option theme-2" data-theme="pink"></div>
-                <div class="color-option theme-3" data-theme="purple"></div>
-                <div class="color-option theme-4" data-theme="green"></div>
-            </div>
-            <p>点击上方色块切换霓虹主题色彩</p>
             
-            <div class="neon-btn-container">
-                <button class="neon-btn">探索更多</button>
-                <button class="neon-btn" style="color: var(--neon-pink); border-color: var(--neon-pink); box-shadow: 0 0 10px rgba(255, 0, 255, 0.3), inset 0 0 10px rgba(255, 0, 255, 0.1); text-shadow: 0 0 5px var(--neon-pink);">了解更多</button>
+            <div class="content-box">
+                <h2 class="content-title">原始内容的新生</h2>
+                <div class="original-text">
+                    <i class="fas fa-quote-left quote-icon"></i> 啥都没有 <i class="fas fa-quote-right quote-icon"></i>
+                </div>
+                <p>在非对称设计中，空白和内容同样重要，创造视觉焦点和流动感。</p>
             </div>
-        </div>
+        </main>
         
-        <p class="subtitle">简约是终极的复杂</p>
+        <!-- 特性区域 -->
+        <section class="feature-section animate delay-3">
+            <div class="feature-card">
+                <i class="fas fa-paint-brush"></i>
+                <h3>视觉层次</h3>
+                <p>通过大小、颜色和位置的变化，创建清晰的视觉层次结构，引导用户视线流动。</p>
+            </div>
+            
+            <div class="feature-card">
+                <i class="fas fa-mobile-alt"></i>
+                <h3>动态平衡</h3>
+                <p>非对称布局通过视觉权重的分配实现动态平衡，创造更有机的视觉体验。</p>
+            </div>
+            
+            <div class="feature-card">
+                <i class="fas fa-lightbulb"></i>
+                <h3>创新表达</h3>
+                <p>打破传统网格限制，为内容提供更具创意和表现力的展示方式。</p>
+            </div>
+            
+            <div class="feature-card">
+                <i class="fas fa-eye"></i>
+                <h3>视觉焦点</h3>
+                <p>通过非对称布局突出重要内容，创建明确的视觉焦点和用户路径。</p>
+            </div>
+        </section>
     </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-instagram"></i></a>
+            <a href="#"><i class="fab fa-dribbble"></i></a>
             <a href="#"><i class="fab fa-github"></i></a>
-            <a href="#"><i class="fab fa-linkedin"></i></a>
         </div>
     </footer>
     
     <script>
-        // 创建网格背景
-        function createGrid() {
-            const gridContainer = document.querySelector('.neon-grid');
+        // 添加滚动动画效果
+        document.addEventListener('DOMContentLoaded', function() {
+            const animatedElements = document.querySelectorAll('.animate');
             
-            // 创建水平线
-            for (let i = 0; i <= 100; i += 5) {
-                const line = document.createElement('div');
-                line.classList.add('grid-line', 'horizontal');
-                line.style.top = `${i}%`;
-                gridContainer.appendChild(line);
-            }
+            // 初始隐藏所有动画元素
+            animatedElements.forEach(element => {
+                element.style.opacity = '0';
+            });
             
-            // 创建垂直线
-            for (let i = 0; i <= 100; i += 5) {
-                const line = document.createElement('div');
-                line.classList.add('grid-line', 'vertical');
-                line.style.left = `${i}%`;
-                gridContainer.appendChild(line);
-            }
-        }
-        
-        // 主题切换功能
-        function setupThemeToggle() {
-            const colorOptions = document.querySelectorAll('.color-option');
-            
-            colorOptions.forEach(option => {
-                option.addEventListener('click', function() {
-                    // 移除所有active类
-                    colorOptions.forEach(opt => opt.classList.remove('active'));
+            // 添加滚动事件监听器
+            window.addEventListener('scroll', function() {
+                animatedElements.forEach(element => {
+                    const elementTop = element.getBoundingClientRect().top;
+                    const elementBottom = element.getBoundingClientRect().bottom;
                     
-                    // 添加active类到当前选项
-                    this.classList.add('active');
-                    
-                    // 根据选择切换主题
-                    const theme = this.getAttribute('data-theme');
-                    changeTheme(theme);
+                    // 如果元素在视口中
+                    if (elementTop < window.innerHeight - 100 && elementBottom > 0) {
+                        element.style.animationPlayState = 'running';
+                        element.style.opacity = '1';
+                    }
                 });
             });
-        }
-        
-        // 切换主题函数
-        function changeTheme(theme) {
-            const root = document.documentElement;
-            const title = document.querySelector('h1');
-            const originalText = document.querySelector('.original-text');
-            const quoteIcons = document.querySelectorAll('.quote-icon');
-            const neonBtns = document.querySelectorAll('.neon-btn');
             
-            // 根据主题更新CSS变量
-            switch(theme) {
-                case 'pink':
-                    root.style.setProperty('--neon-blue', '#ff00ff');
-                    root.style.setProperty('--neon-pink', '#ff00ff');
-                    root.style.setProperty('--neon-purple', '#ff00ff');
-                    title.style.color = '#ff00ff';
-                    originalText.style.color = '#ff00ff';
-                    originalText.style.borderColor = '#ff00ff';
-                    originalText.style.boxShadow = '0 0 15px rgba(255, 0, 255, 0.3)';
-                    quoteIcons.forEach(icon => icon.style.color = '#ff00ff');
-                    quoteIcons.forEach(icon => icon.style.textShadow = '0 0 8px #ff00ff');
-                    break;
-                case 'purple':
-                    root.style.setProperty('--neon-blue', '#bd00ff');
-                    root.style.setProperty('--neon-pink', '#bd00ff');
-                    root.style.setProperty('--neon-purple', '#bd00ff');
-                    title.style.color = '#bd00ff';
-                    originalText.style.color = '#bd00ff';
-                    originalText.style.borderColor = '#bd00ff';
-                    originalText.style.boxShadow = '0 0 15px rgba(189, 0, 255, 0.3)';
-                    quoteIcons.forEach(icon => icon.style.color = '#bd00ff');
-                    quoteIcons.forEach(icon => icon.style.textShadow = '0 0 8px #bd00ff');
-                    break;
-                case 'green':
-                    root.style.setProperty('--neon-blue', '#39ff14');
-                    root.style.setProperty('--neon-pink', '#39ff14');
-                    root.style.setProperty('--neon-purple', '#39ff14');
-                    title.style.color = '#39ff14';
-                    originalText.style.color = '#39ff14';
-                    originalText.style.borderColor = '#39ff14';
-                    originalText.style.boxShadow = '0 0 15px rgba(57, 255, 20, 0.3)';
-                    quoteIcons.forEach(icon => icon.style.color = '#39ff14');
-                    quoteIcons.forEach(icon => icon.style.textShadow = '0 0 8px #39ff14');
-                    break;
-                default:
-                    root.style.setProperty('--neon-blue', '#00f3ff');
-                    root.style.setProperty('--neon-pink', '#ff00ff');
-                    root.style.setProperty('--neon-purple', '#bd00ff');
-                    title.style.color = '#00f3ff';
-                    originalText.style.color = '#ff00ff';
-                    originalText.style.borderColor = '#ff00ff';
-                    originalText.style.boxShadow = '0 0 15px rgba(255, 0, 255, 0.3)';
-                    quoteIcons.forEach(icon => icon.style.color = '#ff00ff');
-                    quoteIcons.forEach(icon => icon.style.textShadow = '0 0 8px #ff00ff');
-            }
-        }
-        
-        // 初始化
-        document.addEventListener('DOMContentLoaded', function() {
-            createGrid();
-            setupThemeToggle();
+            // 触发初始滚动检查
+            window.dispatchEvent(new Event('scroll'));
             
             // 为原始文本添加点击动画
             const originalText = document.querySelector('.original-text');
             originalText.addEventListener('click', function() {
-                this.style.transform = 'scale(1.05)';
+                this.style.transform = 'skewX(-5deg) scale(1.05)';
                 setTimeout(() => {
-                    this.style.transform = 'scale(1)';
+                    this.style.transform = 'skewX(-5deg) scale(1)';
                 }, 300);
             });
-            
-            // 为按钮添加点击效果
-            const buttons = document.querySelectorAll('.neon-btn');
-            buttons.forEach(button => {
-                button.addEventListener('click', function() {
-                    this.style.transform = 'scale(0.95)';
-                    setTimeout(() => {
-                        this.style.transform = 'scale(1)';
-                    }, 300);
-                });
-            });
         });
     </script>
 </body>
