zipin commited on
Commit
9b5332b
·
verified ·
1 Parent(s): c541b29
Files changed (1) hide show
  1. index.html +50 -55
index.html CHANGED
@@ -65,15 +65,13 @@
65
  <div class="w-8 h-8 undefined-gradient rounded-full"></div>
66
  <span class="text-xl font-bold">ChromaticCanvas</span>
67
  </div>
68
-
69
  <div class="hidden md:flex space-x-8">
70
- <a href="#" class="color-transition hover:undefined-gradient hover:bg-clip-text hover:text-transparent font-medium">Home</a>
71
- <a href="#" class="color-transition hover:undefined-gradient-secondary hover:bg-clip-text hover:text-transparent font-medium">Gallery</a>
72
- <a href="#" class="color-transition hover:undefined-gradient-accent hover:bg-clip-text hover:text-transparent font-medium">Create</a>
73
- <a href="#" class="color-transition hover:text-gray-300 font-medium">About</a>
74
  </div>
75
-
76
- <button class="undefined-gradient px-6 py-2 rounded-full font-semibold color-transition hover:scale-105">
77
  Get Started
78
  </button>
79
  </div>
@@ -87,65 +85,63 @@
87
  <i data-feather="palette" class="w-12 h-12"></i>
88
  </div>
89
  </div>
90
-
91
  <h1 class="text-5xl md:text-7xl font-bold mb-6">
92
- Where <span class="undefined-gradient bg-clip-text text-transparent">Colors</span>
93
- <span class="undefined-gradient-secondary bg-clip-text text-transparent">Come</span>
94
- <span class="undefined-gradient-accent bg-clip-text text-transparent">Alive</span>
95
  </h1>
96
 
97
  <p class="text-xl md:text-2xl text-gray-300 mb-8 leading-relaxed">
98
- Experience the undefined beauty of color gradients in a symphony of visual harmony.
99
- Our platform transforms undefined color combinations into breathtaking digital art.
100
  </p>
101
 
102
  <div class="flex flex-col sm:flex-row gap-4 justify-center">
103
- <button class="undefined-gradient px-8 py-4 rounded-full font-semibold text-lg color-transition hover:scale-105 flex items-center justify-center gap-2">
104
  <i data-feather="play"></i>
105
- Start Creating
106
- </button>
107
- <button class="glass-effect px-8 py-4 rounded-full font-semibold text-lg color-transition hover:bg-white hover:bg-opacity-20 flex items-center justify-center gap-2">
108
  <i data-feather="eye"></i>
109
- View Gallery
110
- </button>
111
  </div>
112
- </div>
113
  </section>
114
 
115
  <!-- Features Section -->
116
  <section class="relative z-10 py-20 px-4">
117
  <div class="max-w-6xl mx-auto">
118
  <h2 class="text-4xl font-bold text-center mb-16">
119
- <span class="undefined-gradient bg-clip-text text-transparent">Undefined</span> Features
120
  </h2>
121
-
122
- <div class="grid md:grid-cols-3 gap-8">
123
  <!-- Feature 1 -->
124
  <div class="glass-effect p-8 rounded-2xl color-transition hover:scale-105">
125
  <div class="w-16 h-16 undefined-gradient rounded-xl flex items-center justify-center mb-6">
126
  <i data-feather="zap" class="w-8 h-8"></i>
127
  </div>
128
- <h3 class="text-2xl font-bold mb-4">Dynamic Gradients</h3>
129
- <p class="text-gray-300">Experience fluid color transitions that adapt to your creative vision in real-time.</p>
130
- </div>
131
 
132
  <!-- Feature 2 -->
133
  <div class="glass-effect p-8 rounded-2xl color-transition hover:scale-105">
134
  <div class="w-16 h-16 undefined-gradient-secondary rounded-xl flex items-center justify-center mb-6">
135
  <i data-feather="sliders" class="w-8 h-8"></i>
136
  </div>
137
- <h3 class="text-2xl font-bold mb-4">Infinite Combinations</h3>
138
- <p class="text-gray-300">Explore endless undefined color palettes that break traditional design boundaries.</p>
139
- </div>
140
 
141
  <!-- Feature 3 -->
142
  <div class="glass-effect p-8 rounded-2xl color-transition hover:scale-105">
143
  <div class="w-16 h-16 undefined-gradient-accent rounded-xl flex items-center justify-center mb-6">
144
  <i data-feather="cloud" class="w-8 h-8"></i>
145
  </div>
146
- <h3 class="text-2xl font-bold mb-4">Cloud Sync</h3>
147
- <p class="text-gray-300">Your undefined creations are automatically saved and synchronized across all devices.</p>
148
- </div>
149
  </div>
150
  </div>
151
  </section>
@@ -154,10 +150,9 @@
154
  <section class="relative z-10 py-20 px-4">
155
  <div class="max-w-6xl mx-auto">
156
  <h2 class="text-4xl font-bold text-center mb-16">
157
- The <span class="undefined-gradient-secondary bg-clip-text text-transparent">Undefined</span> Spectrum
158
  </h2>
159
-
160
- <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
161
  <div class="aspect-square undefined-gradient rounded-2xl color-transition hover:scale-110"></div>
162
  <div class="aspect-square undefined-gradient-secondary rounded-2xl color-transition hover:scale-110"></div>
163
  <div class="aspect-square undefined-gradient-accent rounded-2xl color-transition hover:scale-110"></div>
@@ -174,31 +169,31 @@
174
  <div class="flex items-center space-x-2 mb-4">
175
  <div class="w-8 h-8 undefined-gradient rounded-full"></div>
176
  <span class="text-xl font-bold">ChromaticCanvas</span>
177
- </div>
178
- <p class="text-gray-300">Where undefined colors create defined beauty.</p>
179
- </div>
180
 
181
- <div>
182
- <h4 class="font-semibold mb-4">Explore</h4>
183
  <ul class="space-y-2 text-gray-300">
184
- <li><a href="#" class="color-transition hover:text-white">Gallery</a></li>
185
- <li><a href="#" class="color-transition hover:text-white">Templates</a></li>
186
- <li><a href="#" class="color-transition hover:text-white">Community</a></li>
187
  </ul>
188
- </div>
189
 
190
- <div>
191
- <h4 class="font-semibold mb-4">Resources</h4>
192
  <ul class="space-y-2 text-gray-300">
193
- <li><a href="#" class="color-transition hover:text-white">Documentation</a></li>
194
- <li><a href="#" class="color-transition hover:text-white">Tutorials</a></li>
195
  <li><a href="#" class="color-transition hover:text-white">API</a></li>
196
  </ul>
197
- </div>
198
 
199
- <div>
200
- <h4 class="font-semibold mb-4">Connect</h4>
201
- <div class="flex space-x-4">
202
  <a href="#" class="w-10 h-10 glass-effect rounded-full flex items-center justify-center color-transition hover:undefined-gradient">
203
  <i data-feather="twitter"></i>
204
  </a>
@@ -212,9 +207,9 @@
212
  </div>
213
  </div>
214
 
215
- <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400">
216
- <p>&copy; 2024 Chromatic Canvas. All rights reserved. Embrace the undefined.</p>
217
- </div>
218
  </div>
219
  </footer>
220
 
 
65
  <div class="w-8 h-8 undefined-gradient rounded-full"></div>
66
  <span class="text-xl font-bold">ChromaticCanvas</span>
67
  </div>
 
68
  <div class="hidden md:flex space-x-8">
69
+ <a href="index.html" class="color-transition hover:undefined-gradient hover:bg-clip-text hover:text-transparent font-medium">首页</a>
70
+ <a href="gallery.html" class="color-transition hover:undefined-gradient-secondary hover:bg-clip-text hover:text-transparent font-medium">画廊</a>
71
+ <a href="create.html" class="color-transition hover:undefined-gradient-accent hover:bg-clip-text hover:text-transparent font-medium">创作</a>
72
+ <a href="about.html" class="color-transition hover:text-gray-300 font-medium">关于</a>
73
  </div>
74
+ <button class="undefined-gradient px-6 py-2 rounded-full font-semibold color-transition hover:scale-105">
 
75
  Get Started
76
  </button>
77
  </div>
 
85
  <i data-feather="palette" class="w-12 h-12"></i>
86
  </div>
87
  </div>
 
88
  <h1 class="text-5xl md:text-7xl font-bold mb-6">
89
+ 色彩<span class="undefined-gradient bg-clip-text text-transparent">绽放</span>
90
+ <span class="undefined-gradient-secondary bg-clip-text text-transparent">无限</span>
91
+ <span class="undefined-gradient-accent bg-clip-text text-transparent">可能</span>
92
  </h1>
93
 
94
  <p class="text-xl md:text-2xl text-gray-300 mb-8 leading-relaxed">
95
+ 体验色彩渐变的无限美感,在视觉和谐的交响曲中感受色彩的魔力。
96
+ 我们的平台将无限色彩组合转化为令人惊叹的数字艺术。
97
  </p>
98
 
99
  <div class="flex flex-col sm:flex-row gap-4 justify-center">
100
+ <a href="create.html" class="undefined-gradient px-8 py-4 rounded-full font-semibold text-lg color-transition hover:scale-105 flex items-center justify-center gap-2">
101
  <i data-feather="play"></i>
102
+ 开始创作
103
+ </a>
104
+ <a href="gallery.html" class="glass-effect px-8 py-4 rounded-full font-semibold text-lg color-transition hover:bg-white hover:bg-opacity-20 flex items-center justify-center gap-2">
105
  <i data-feather="eye"></i>
106
+ 浏览画廊
107
+ </a>
108
  </div>
109
+ </div>
110
  </section>
111
 
112
  <!-- Features Section -->
113
  <section class="relative z-10 py-20 px-4">
114
  <div class="max-w-6xl mx-auto">
115
  <h2 class="text-4xl font-bold text-center mb-16">
116
+ <span class="undefined-gradient bg-clip-text text-transparent">无限</span> 特色功能
117
  </h2>
118
+ <div class="grid md:grid-cols-3 gap-8">
 
119
  <!-- Feature 1 -->
120
  <div class="glass-effect p-8 rounded-2xl color-transition hover:scale-105">
121
  <div class="w-16 h-16 undefined-gradient rounded-xl flex items-center justify-center mb-6">
122
  <i data-feather="zap" class="w-8 h-8"></i>
123
  </div>
124
+ <h3 class="text-2xl font-bold mb-4">动态渐变</h3>
125
+ <p class="text-gray-300">体验流畅的色彩过渡,实时适应您的创作愿景。</p>
126
+ </div>
127
 
128
  <!-- Feature 2 -->
129
  <div class="glass-effect p-8 rounded-2xl color-transition hover:scale-105">
130
  <div class="w-16 h-16 undefined-gradient-secondary rounded-xl flex items-center justify-center mb-6">
131
  <i data-feather="sliders" class="w-8 h-8"></i>
132
  </div>
133
+ <h3 class="text-2xl font-bold mb-4">无限组合</h3>
134
+ <p class="text-gray-300">探索无限色彩调色板,打破传统设计界限。</p>
135
+ </div>
136
 
137
  <!-- Feature 3 -->
138
  <div class="glass-effect p-8 rounded-2xl color-transition hover:scale-105">
139
  <div class="w-16 h-16 undefined-gradient-accent rounded-xl flex items-center justify-center mb-6">
140
  <i data-feather="cloud" class="w-8 h-8"></i>
141
  </div>
142
+ <h3 class="text-2xl font-bold mb-4">云端同步</h3>
143
+ <p class="text-gray-300">您的创作将自动保存并在所有设备间同步。</p>
144
+ </div>
145
  </div>
146
  </div>
147
  </section>
 
150
  <section class="relative z-10 py-20 px-4">
151
  <div class="max-w-6xl mx-auto">
152
  <h2 class="text-4xl font-bold text-center mb-16">
153
+ <span class="undefined-gradient-secondary bg-clip-text text-transparent">无限</span> 色彩光谱
154
  </h2>
155
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
 
156
  <div class="aspect-square undefined-gradient rounded-2xl color-transition hover:scale-110"></div>
157
  <div class="aspect-square undefined-gradient-secondary rounded-2xl color-transition hover:scale-110"></div>
158
  <div class="aspect-square undefined-gradient-accent rounded-2xl color-transition hover:scale-110"></div>
 
169
  <div class="flex items-center space-x-2 mb-4">
170
  <div class="w-8 h-8 undefined-gradient rounded-full"></div>
171
  <span class="text-xl font-bold">ChromaticCanvas</span>
172
+ </div
173
+ <p class="text-gray-300">无限色彩创造无限美丽。</p>
174
+ </div>
175
 
176
+ <div
177
+ <h4 class="font-semibold mb-4">探索</h4>
178
  <ul class="space-y-2 text-gray-300">
179
+ <li><a href="gallery.html" class="color-transition hover:text-white">画廊</a></li>
180
+ <li><a href="#" class="color-transition hover:text-white">模板</a></li>
181
+ <li><a href="#" class="color-transition hover:text-white">社区</a></li>
182
  </ul>
183
+ </div>
184
 
185
+ <div
186
+ <h4 class="font-semibold mb-4">资源</h4>
187
  <ul class="space-y-2 text-gray-300">
188
+ <li><a href="#" class="color-transition hover:text-white">文档</a></li>
189
+ <li><a href="#" class="color-transition hover:text-white">教程</a></li>
190
  <li><a href="#" class="color-transition hover:text-white">API</a></li>
191
  </ul>
192
+ </div>
193
 
194
+ <div
195
+ <h4 class="font-semibold mb-4">联系</h4>
196
+ <div class="flex space-x-4">
197
  <a href="#" class="w-10 h-10 glass-effect rounded-full flex items-center justify-center color-transition hover:undefined-gradient">
198
  <i data-feather="twitter"></i>
199
  </a>
 
207
  </div>
208
  </div>
209
 
210
+ <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400"
211
+ <p>&copy; 2024 Chromatic Canvas. 保留所有权利。拥抱无限可能。</p>
212
+ </div>
213
  </div>
214
  </footer>
215