Hugging Face's logo

Spaces:
sgch2023
/
ide-ui
Running

App Files Community
sgch2023 commited on
Commit
d9cca01
·
verified ·
1 Parent(s): 07cf521

这里改为数字 1 2 3 4 - Follow Up Deployment

Browse files
Files changed (1) hide show
  1. index.html +81 -358
index.html CHANGED
@@ -3,391 +3,114 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Smart IDE - Financial App Development</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
 
8
  <style>
9
- @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap');
10
-
11
- body {
12
- font-family: 'Inter', sans-serif;
13
- background-color: #1e1e1e;
14
- color: #ffffff;
15
- }
16
-
17
- .code-font {
18
- font-family: 'Consolas', 'Monaco', 'Andale Mono', monospace;
19
- }
20
-
21
- .blinking-cursor {
22
- animation: blink 1s step-end infinite;
23
- }
24
-
25
- @keyframes blink {
26
- from, to { opacity: 1; }
27
- 50% { opacity: 0; }
28
  }
29
-
30
- .tab-active {
31
- border-bottom: 2px solid #007acc;
32
- background-color: #1e1e1e;
33
  }
34
-
35
- .user-story-card:hover {
36
- transform: translateY(-2px);
37
- box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
38
  }
39
-
40
- .task-item:hover {
41
- background-color: #2a2d2e;
 
42
  }
43
  </style>
44
  </head>
45
- <body class="h-screen overflow-hidden">
46
- <!-- Main IDE Container -->
47
- <div class="flex flex-col h-full">
48
- <!-- Title Bar -->
49
- <div class="flex items-center justify-between bg-gray-800 px-4 py-2 border-b border-gray-700">
50
- <div class="flex items-center space-x-2">
51
- <div class="w-5 h-5 bg-blue-600 rounded-sm flex items-center justify-center">
52
- <span class="text-xs font-bold text-white">S</span>
53
- </div>
54
- <span class="text-gray-300 text-sm">Smart IDE - financial-app</span>
55
- </div>
56
- <div class="flex items-center space-x-4">
57
- <span class="text-gray-300 text-sm">−</span>
58
- <span class="text-gray-300 text-sm">□</span>
59
- <span class="text-gray-300 text-sm">×</span>
60
- </div>
61
- </div>
62
 
63
- <!-- Menu Bar -->
64
- <div class="flex bg-gray-800 px-4 py-1 text-gray-300 text-sm space-x-6">
65
- <span>文件</span>
66
- <span>编辑</span>
67
- <span>选择</span>
68
- <span>视图</span>
69
- <span>转到</span>
70
- <span>运行</span>
71
- <span>终端</span>
72
- <span>帮助</span>
73
- </div>
74
-
75
- <!-- Main Content Area -->
76
- <div class="flex flex-1 overflow-hidden">
77
- <!-- Activity Bar -->
78
- <div class="w-12 bg-gray-700 flex flex-col items-center py-4 space-y-6">
79
- <div class="w-full bg-blue-900 bg-opacity-70 border-l-2 border-blue-500 py-2 flex justify-center">
80
- <span class="text-lg">📁</span>
81
  </div>
82
- <div class="text-gray-400 text-lg cursor-pointer hover:text-white">🔍</div>
83
- <div class="text-gray-400 text-lg cursor-pointer hover:text-white">🔗</div>
84
- <div class="text-gray-400 text-lg cursor-pointer hover:text-white">▶️</div>
85
- <div class="text-gray-400 text-lg cursor-pointer hover:text-white">⬜</div>
86
- <div class="text-gray-400 text-lg cursor-pointer hover:text-white">🤖</div>
87
  </div>
88
-
89
- <!-- Sidebar -->
90
- <div class="w-64 bg-gray-800 flex flex-col overflow-y-auto">
91
- <div class="bg-gray-700 px-4 py-2 text-gray-300 font-medium">资源管理器</div>
92
-
93
- <!-- Quick Project Setup -->
94
- <div class="m-3 p-3 bg-gray-900 border border-gray-600 rounded">
95
- <div class="font-bold text-white mb-2">快速创建金融项目</div>
96
- <div class="text-xs text-gray-400 mb-2">选择模板快速开始</div>
97
-
98
- <div class="text-xs text-gray-300 mb-1">前端框架</div>
99
- <div class="flex space-x-2 mb-3">
100
- <div class="px-2 py-1 text-xs border border-green-500 text-green-500 rounded cursor-pointer hover:bg-green-500 hover:bg-opacity-10">Vue.js</div>
101
- <div class="px-2 py-1 text-xs border border-blue-400 text-blue-400 rounded cursor-pointer hover:bg-blue-400 hover:bg-opacity-10">React</div>
102
- </div>
103
-
104
- <div class="text-xs text-gray-300 mb-1">后端框架</div>
105
- <div class="flex flex-wrap gap-2">
106
- <div class="px-2 py-1 text-xs border border-green-600 text-green-600 rounded cursor-pointer hover:bg-green-600 hover:bg-opacity-10">Spring Boot</div>
107
- <div class="px-2 py-1 text-xs border border-green-400 text-green-400 rounded cursor-pointer hover:bg-green-400 hover:bg-opacity-10">Node.js</div>
108
- <div class="px-2 py-1 text-xs border border-blue-500 text-blue-500 rounded cursor-pointer hover:bg-blue-500 hover:bg-opacity-10">.NET Core</div>
109
- <div class="px-2 py-1 text-xs border border-purple-500 text-purple-500 rounded cursor-pointer hover:bg-purple-500 hover:bg-opacity-10">Django</div>
110
- </div>
111
-
112
- <div class="mt-3">
113
- <div class="text-xs text-yellow-400 mb-1">金融专用模板</div>
114
- <div class="flex flex-wrap gap-2">
115
- <div class="px-2 py-1 text-xs border border-yellow-500 text-yellow-500 rounded cursor-pointer hover:bg-yellow-500 hover:bg-opacity-10">支付系统</div>
116
- <div class="px-2 py-1 text-xs border border-yellow-400 text-yellow-400 rounded cursor-pointer hover:bg-yellow-400 hover:bg-opacity-10">风控系统</div>
117
- <div class="px-2 py-1 text-xs border border-yellow-300 text-yellow-300 rounded cursor-pointer hover:bg-yellow-300 hover:bg-opacity-10">账务系统</div>
118
- </div>
119
  </div>
120
  </div>
121
-
122
- <!-- Project Structure -->
123
- <div class="px-4 py-2">
124
- <div class="font-bold text-gray-300 mb-2">FINANCIAL-APP</div>
125
-
126
- <div class="text-sm text-gray-300 mb-1 flex items-center cursor-pointer">▼ 📁 frontend</div>
127
- <div class="pl-4">
128
- <div class="text-xs text-gray-400 mb-1 cursor-pointer">📁 src</div>
129
- <div class="pl-4">
130
- <div class="text-xs text-green-400 mb-1 cursor-pointer">📄 App.vue</div>
131
- <div class="text-xs text-yellow-400 mb-1 cursor-pointer">📄 main.js</div>
132
- <div class="text-xs text-gray-400 mb-1 cursor-pointer">📄 index.html</div>
133
- </div>
134
- <div class="text-xs text-gray-400 mb-1 cursor-pointer">📄 package.json</div>
135
- </div>
136
-
137
- <div class="text-sm text-gray-300 mb-1 flex items-center cursor-pointer">▼ 📁 backend</div>
138
- <div class="pl-4">
139
- <div class="text-xs text-gray-400 mb-1 cursor-pointer">📁 src</div>
140
- <div class="pl-4">
141
- <div class="text-xs text-green-600 mb-1 cursor-pointer">📄 AccountController.java</div>
142
- <div class="text-xs text-green-600 mb-1 cursor-pointer">📄 TransactionService.java</div>
143
- <div class="text-xs text-green-600 mb-1 cursor-pointer">📄 RiskAssessment.java</div>
144
- </div>
145
- <div class="text-xs text-gray-400 mb-1 cursor-pointer">📄 pom.xml</div>
146
- </div>
147
-
148
- <div class="text-sm text-gray-300 mb-1 flex items-center cursor-pointer">► 📁 docker</div>
149
- <div class="text-sm text-gray-300 mb-1 flex items-center cursor-pointer">📄 README.md</div>
150
  </div>
151
  </div>
152
-
153
- <!-- Main Editor Area -->
154
- <div class="flex-1 flex flex-col">
155
- <!-- Editor Tabs -->
156
- <div class="flex bg-gray-700 px-2">
157
- <div class="flex items-center px-4 py-2 bg-gray-900 border-b-2 border-blue-500 text-white text-sm">
158
- TransactionService.java
159
- <span class="ml-2 text-gray-400 hover:text-white">×</span>
160
- </div>
161
- <div class="flex items-center px-4 py-2 text-gray-400 hover:text-white text-sm">
162
- App.vue
163
- <span class="ml-2 text-gray-400 hover:text-white">×</span>
164
  </div>
165
  </div>
166
-
167
- <!-- Code Editor -->
168
- <div class="flex-1 bg-gray-900 overflow-auto p-2 code-font">
169
- <div class="flex">
170
- <!-- Line Numbers -->
171
- <div class="text-right pr-4 text-gray-500 select-none">
172
- <div>1</div>
173
- <div>2</div>
174
- <div>3</div>
175
- <div>4</div>
176
- <div>5</div>
177
- <div>6</div>
178
- <div>7</div>
179
- <div>8</div>
180
- <div>9</div>
181
- <div>10</div>
182
- <div>11</div>
183
- <div>12</div>
184
- <div>13</div>
185
- <div>14</div>
186
- <div>15</div>
187
- <div>16</div>
188
- <div>17</div>
189
- <div>18</div>
190
- <div>19</div>
191
- <div>20</div>
192
- </div>
193
-
194
- <!-- Code Content -->
195
- <div class="flex-1">
196
- <div><span class="text-purple-400">package</span> <span class="text-orange-400"> com.finance.service;</span></div>
197
- <div class="h-4"></div>
198
- <div><span class="text-purple-400">import</span> <span class="text-orange-400"> org.springframework.stereotype.Service;</span></div>
199
- <div><span class="text-purple-400">import</span> <span class="text-orange-400"> org.springframework.transaction.annotation.Transactional;</span></div>
200
- <div><span class="text-purple-400">import</span> <span class="text-orange-400"> java.math.BigDecimal;</span></div>
201
- <div class="h-4"></div>
202
- <div><span class="text-blue-300">@Service</span></div>
203
- <div><span class="text-blue-600">public</span> <span class="text-blue-600">class</span> <span class="text-teal-300"> TransactionService</span> <span class="text-gray-300">{</span></div>
204
- <div class="h-4"></div>
205
- <div class="ml-4"><span class="text-blue-300">@Transactional</span></div>
206
- <div class="ml-4"><span class="text-blue-600">public</span> <span class="text-blue-300">TransactionResponse</span> <span class="text-yellow-200">processPayment</span><span class="text-gray-300">(</span><span class="text-blue-300">PaymentRequest</span> <span class="text-gray-300">request</span><span class="text-gray-300">)</span> <span class="text-gray-300">{</span></div>
207
- <div class="ml-8"><span class="text-blue-600">if</span> <span class="text-gray-300">(</span><span class="text-blue-300">riskService</span><span class="text-gray-300">.</span><span class="text-yellow-200">isHighRisk</span><span class="text-gray-300">(</span><span class="text-blue-300">request</span><span class="text-gray-300">))</span> <span class="text-gray-300">{</span></div>
208
- <div class="ml-12"><span class="text-blue-600">throw</span> <span class="text-blue-600">new</span> <span class="text-blue-300">RiskValidationException</span><span class="text-gray-300">(</span><span class="text-orange-400">"Transaction flagged as high risk"</span><span class="text-gray-300">);</span></div>
209
- <div class="ml-8"><span class="text-gray-300">}</span></div>
210
- <div class="ml-8"><span class="text-blue-300">BigDecimal</span> <span class="text-gray-300">amount =</span> <span class="text-blue-300">request</span><span class="text-gray-300">.</span><span class="text-yellow-200">getAmount</span><span class="text-gray-300">();</span></div>
211
- <div class="ml-8"><span class="text-gray-300">// Process transaction logic here</span></div>
212
- <div class="ml-8"><span class="text-blue-600">return</span> <span class="text-blue-600">new</span> <span class="text-blue-300">TransactionResponse</span><span class="text-gray-300">(</span><span class="text-orange-400">"SUCCESS"</span><span class="text-gray-300">,</span> <span class="text-orange-400">"Transaction processed"</span><span class="text-gray-300">);</span></div>
213
- <div class="ml-4"><span class="text-gray-300">}</span></div>
214
- <div class="ml-4"><span class="text-blue-600">private</span> <span class="text-blue-300">void</span> <span class="text-yellow-200">logTransaction</span><span class="text-gray-300">(</span><span class="text-blue-300">String</span> <span class="text-gray-300">accountId,</span> <span class="text-blue-300">BigDecimal</span> <span class="text-gray-300">amount)</span> <span class="text-gray-300">{</span></div>
215
- <div class="ml-8"><span class="text-gray-300">// Audit logging implementation</span></div>
216
- <div class="ml-4"><span class="text-gray-300">}</span></div>
217
- <div><span class="text-gray-300">}</span></div>
218
- <div class="h-4"></div>
219
- <div class="relative">
220
- <span class="text-gray-300">// Cursor position</span>
221
- <span class="absolute ml-8 w-2 h-5 bg-white blinking-cursor"></span>
222
- </div>
223
- </div>
224
  </div>
225
  </div>
226
-
227
- <!-- Enhanced DevOps Panel -->
228
- <div class="h-64 bg-gray-900 border-t border-gray-700 flex flex-col">
229
- <!-- DevOps Tabs -->
230
- <div class="flex bg-gray-800 px-4 py-2 space-x-4 overflow-x-auto">
231
- <div class="px-3 py-1 bg-blue-600 rounded text-white text-xs flex items-center cursor-pointer">
232
- 📋 需求管理
233
- </div>
234
- <div class="px-3 py-1 text-gray-300 hover:text-white rounded text-xs flex items-center cursor-pointer">
235
- 🏗️ 架构设计
236
- </div>
237
- <div class="px-3 py-1 text-gray-300 hover:text-white rounded text-xs flex items-center cursor-pointer">
238
- 🧪 测试用例
239
- </div>
240
- <div class="px-3 py-1 text-gray-300 hover:text-white rounded text-xs flex items-center cursor-pointer">
241
- 👁️ 代码评审
242
- </div>
243
- <div class="px-3 py-1 text-gray-300 hover:text-white rounded text-xs flex items-center cursor-pointer">
244
- 🔒 安全扫描
245
- </div>
246
- <div class="px-3 py-1 text-gray-300 hover:text-white rounded text-xs flex items-center cursor-pointer">
247
- ⚙️ CI/CD
248
- </div>
249
- <div class="px-3 py-1 text-gray-300 hover:text-white rounded text-xs flex items-center cursor-pointer">
250
- 📦 容器
251
- </div>
252
- <div class="px-3 py-1 text-gray-300 hover:text-white rounded text-xs flex items-center cursor-pointer">
253
- ☁️ 部署
254
- </div>
255
- <div class="px-3 py-1 text-gray-300 hover:text-white rounded text-xs flex items-center cursor-pointer">
256
- 📊 日志
257
- </div>
258
- <div class="px-3 py-1 text-gray-300 hover:text-white rounded text-xs flex items-center cursor-pointer">
259
- 📈 监控
260
  </div>
 
261
  </div>
262
-
263
- <!-- Requirements Management Content -->
264
- <div class="flex-1 p-4 overflow-auto">
265
- <div class="text-white font-medium mb-4">金融交易系统需求管理</div>
266
-
267
- <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mb-4">
268
- <!-- User Story Card 1 -->
269
- <div class="user-story-card bg-gray-800 p-3 rounded border border-gray-600 cursor-pointer transition-all duration-200">
270
- <div class="flex justify-between items-start">
271
- <div class="font-medium text-white">用户故事: 支付处理流程</div>
272
- <div class="text-xs px-2 py-1 bg-blue-600 rounded">高优先级</div>
273
- </div>
274
- <div class="text-xs text-gray-400 mt-1">作为用户，我希望能够安全地完成支付，以便完成交易</div>
275
- <div class="flex justify-between items-center mt-3">
276
- <div class="text-xs text-green-400">开发中</div>
277
- <button class="text-xs bg-blue-600 hover:bg-blue-700 px-2 py-1 rounded" onclick="breakdownTasks(this)">拆解任务</button>
278
- </div>
279
-
280
- <!-- Tasks (initially hidden) -->
281
- <div class="task-list hidden mt-2 space-y-2">
282
- <div class="task-item bg-gray-700 px-2 py-1 rounded text-xs flex items-center justify-between">
283
- <span>实现支付接口</span>
284
- <span class="text-green-400">✓</span>
285
- </div>
286
- <div class="task-item bg-gray-700 px-2 py-1 rounded text-xs flex items-center justify-between">
287
- <span>集成风控检查</span>
288
- <span class="text-yellow-400">🔄</span>
289
- </div>
290
- <div class="task-item bg-gray-700 px-2 py-1 rounded text-xs flex items-center">
291
- <span>添加交易日志</span>
292
- </div>
293
- </div>
294
- </div>
295
-
296
- <!-- User Story Card 2 -->
297
- <div class="user-story-card bg-gray-800 p-3 rounded border border-gray-600 cursor-pointer transition-all duration-200">
298
- <div class="flex justify-between items-start">
299
- <div class="font-medium text-white">用户故事: 账户余额查询</div>
300
- <div class="text-xs px-2 py-1 bg-yellow-600 rounded">中优先级</div>
301
- </div>
302
- <div class="text-xs text-gray-400 mt-1">作为用户，我希望能够实时查询我的账户余额，以便了解资金状况</div>
303
- <div class="flex justify-between items-center mt-3">
304
- <div class="text-xs text-yellow-400">待开发</div>
305
- <button class="text-xs bg-blue-600 hover:bg-blue-700 px-2 py-1 rounded" onclick="breakdownTasks(this)">拆解任务</button>
306
- </div>
307
-
308
- <!-- Tasks (initially hidden) -->
309
- <div class="task-list hidden mt-2 space-y-2">
310
- <div class="task-item bg-gray-700 px-2 py-1 rounded text-xs flex items-center">
311
- <span>设计账户查询API</span>
312
- </div>
313
- <div class="task-item bg-gray-700 px-2 py-1 rounded text-xs flex items-center">
314
- <span>实现数据库查询</span>
315
- </div>
316
- <div class="task-item bg-gray-700 px-2 py-1 rounded text-xs flex items-center">
317
- <span>添加权限验证</span>
318
- </div>
319
- </div>
320
- </div>
321
-
322
- <!-- User Story Card 3 -->
323
- <div class="user-story-card bg-gray-800 p-3 rounded border border-gray-600 cursor-pointer transition-all duration-200">
324
- <div class="flex justify-between items-start">
325
- <div class="font-medium text-white">用户故事: 交易历史</div>
326
- <div class="text-xs px-2 py-1 bg-purple-600 rounded">低优先级</div>
327
- </div>
328
- <div class="text-xs text-gray-400 mt-1">作为用户，我希望能够查看我的交易历史记录，以便进行财务对账</div>
329
- <div class="flex justify-between items-center mt-3">
330
- <div class="text-xs text-gray-400">待规划</div>
331
- <button class="text-xs bg-blue-600 hover:bg-blue-700 px-2 py-1 rounded" onclick="breakdownTasks(this)">拆解任务</button>
332
- </div>
333
- </div>
334
  </div>
335
-
336
- <div class="flex space-x-3">
337
- <button class="text-xs bg-blue-600 hover:bg-blue-700 px-3 py-1 rounded flex items-center">
338
- <span class="mr-1">+</span> 新建用户故事
339
- </button>
340
- <button class="text-xs bg-gray-700 hover:bg-gray-600 px-3 py-1 rounded flex items-center">
341
- <span class="mr-1">📊</span> 需求分析报告
342
- </button>
343
- <button class="text-xs bg-gray-700 hover:bg-gray-600 px-3 py-1 rounded flex items-center">
344
- <span class="mr-1">🔄</span> 同步JIRA
345
- </button>
346
  </div>
 
347
  </div>
348
  </div>
349
  </div>
350
  </div>
351
-
352
- <!-- Status Bar -->
353
- <div class="flex justify-between items-center bg-blue-600 px-4 py-1 text-xs text-white">
354
- <div class="flex items-center space-x-4">
355
- <span>🔗 main</span>
356
- <span>✓</span>
357
- <span>0 ⚠ 0 ❌</span>
358
- </div>
359
- <div class="flex items-center space-x-4">
360
- <span>Ln 8, Col 24</span>
361
- <span>UTF-8</span>
362
- <span>Java</span>
363
- </div>
364
- </div>
365
  </div>
366
-
367
- <script>
368
- // Function to toggle task breakdown visibility
369
- function breakdownTasks(button) {
370
- const card = button.closest('.user-story-card');
371
- const taskList = card.querySelector('.task-list');
372
- taskList.classList.toggle('hidden');
373
-
374
- if (taskList.classList.contains('hidden')) {
375
- button.textContent = '拆解任务';
376
- } else {
377
- button.textContent = '收起任务';
378
- }
379
- }
380
-
381
- // Make user story cards clickable to toggle task breakdown
382
- document.querySelectorAll('.user-story-card').forEach(card => {
383
- card.addEventListener('click', (e) => {
384
- // Don't trigger if clicking on the breakdown button
385
- if (!e.target.closest('button')) {
386
- const button = card.querySelector('button');
387
- if (button) breakdownTasks(button);
388
- }
389
- });
390
- });
391
- </script>
392
  <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=sgch2023/ide-ui" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
393
  </html>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Smart IDE Feature Tips</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
  <style>
10
+ @keyframes float {
11
+ 0%, 100% { transform: translateY(0); }
12
+ 50% { transform: translateY(-10px); }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
13
  }
14
+ .float-animation {
15
+ animation: float 4s ease-in-out infinite;
 
 
16
  }
17
+ .tip-card:hover {
18
+ transform: translateY(-5px);
19
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
 
20
  }
21
+ .gradient-text {
22
+ background-clip: text;
23
+ -webkit-background-clip: text;
24
+ color: transparent;
25
  }
26
  </style>
27
  </head>
28
+ <body class="bg-gray-50 min-h-screen py-12 px-4 sm:px-6 lg:px-8">
29
+ <div class="max-w-7xl mx-auto">
30
+ <h1 class="text-4xl font-bold text-center mb-12 text-gray-800">Smart IDE Key Features</h1>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
31
 
32
+ <div class="space-y-4 max-w-4xl mx-auto">
33
+ <!-- Tip 1 -->
34
+ <div class="flex items-center bg-gradient-to-r from-blue-50 to-blue-100 rounded-lg p-3 shadow-sm hover:shadow-md transition-shadow duration-300">
35
+ <div class="flex-shrink-0 mr-3">
36
+ <div class="w-10 h-10 rounded-full bg-gradient-to-r from-blue-500 to-indigo-600 text-white flex items-center justify-center">
37
+ <span class="text-lg font-bold">1</span>
38
+ </div>
39
+ </div>
40
+ <div>
41
+ <h3 class="text-base font-semibold text-gray-800">一键生成项目骨架</h3>
 
 
 
 
 
 
 
 
42
  </div>
 
 
 
 
 
43
  </div>
44
+
45
+ <!-- Tip 2 -->
46
+ <div class="flex items-center bg-gradient-to-r from-purple-50 to-purple-100 rounded-lg p-3 shadow-sm hover:shadow-md transition-shadow duration-300">
47
+ <div class="flex-shrink-0 mr-3">
48
+ <div class="w-10 h-10 rounded-full bg-gradient-to-r from-purple-500 to-pink-500 text-white flex items-center justify-center">
49
+ <span class="text-lg font-bold">2</span>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
50
  </div>
51
  </div>
52
+ <div>
53
+ <h3 class="text-base font-semibold text-gray-800">智能补全与代码生成</h3>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
54
  </div>
55
  </div>
56
+
57
+ <!-- Tip 3 -->
58
+ <div class="flex items-center bg-gradient-to-r from-green-50 to-green-100 rounded-lg p-3 shadow-sm hover:shadow-md transition-shadow duration-300">
59
+ <div class="flex-shrink-0 mr-3">
60
+ <div class="w-10 h-10 rounded-full bg-gradient-to-r from-green-500 to-teal-500 text-white flex items-center justify-center">
61
+ <span class="text-lg font-bold">3</span>
 
 
 
 
 
 
62
  </div>
63
  </div>
64
+ <div>
65
+ <h3 class="text-base font-semibold text-gray-800">自然语言生成代码</h3>
66
+ </div>
67
+ </div>
68
+
69
+ <!-- Tip 4 -->
70
+ <div class="flex items-center bg-gradient-to-r from-orange-50 to-orange-100 rounded-lg p-3 shadow-sm hover:shadow-md transition-shadow duration-300">
71
+ <div class="flex-shrink-0 mr-3">
72
+ <div class="w-10 h-10 rounded-full bg-gradient-to-r from-orange-500 to-red-500 text-white flex items-center justify-center">
73
+ <span class="text-lg font-bold">4</span>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
74
  </div>
75
  </div>
76
+ <div>
77
+ <h3 class="text-base font-semibold text-gray-800">全流程 DevOps 工具</h3>
78
+ </div>
79
+ </div>
80
+ </div>
81
+
82
+ <div class="mt-16 text-center">
83
+ <h2 class="text-3xl font-bold mb-6 gradient-text bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500">Why Choose Our Smart IDE?</h2>
84
+ <div class="max-w-3xl mx-auto bg-white rounded-xl shadow-md overflow-hidden p-6">
85
+ <p class="text-gray-700 mb-4">Our intelligent development environment revolutionizes coding by combining AI-powered assistance with comprehensive DevOps capabilities.</p>
86
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mt-6">
87
+ <div class="flex flex-col items-center">
88
+ <div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center mb-2">
89
+ <i class="fas fa-clock text-blue-500"></i>
90
+ </div>
91
+ <span class="text-sm font-medium text-gray-700">80% Faster Setup</span>
92
+ </div>
93
+ <div class="flex flex-col items-center">
94
+ <div class="w-12 h-12 rounded-full bg-purple-100 flex items-center justify-center mb-2">
95
+ <i class="fas fa-code text-purple-500"></i>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
96
  </div>
97
+ <span class="text-sm font-medium text-gray-700">60% Less Code</span>
98
  </div>
99
+ <div class="flex flex-col items-center">
100
+ <div class="w-12 h-12 rounded-full bg-green-100 flex items-center justify-center mb-2">
101
+ <i class="fas fa-bug text-green-500"></i>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
102
  </div>
103
+ <span class="text-sm font-medium text-gray-700">50% Fewer Bugs</span>
104
+ </div>
105
+ <div class="flex flex-col items-center">
106
+ <div class="w-12 h-12 rounded-full bg-orange-100 flex items-center justify-center mb-2">
107
+ <i class="fas fa-shipping-fast text-orange-500"></i>
 
 
 
 
 
 
108
  </div>
109
+ <span class="text-sm font-medium text-gray-700">3x Faster Deployments</span>
110
  </div>
111
  </div>
112
  </div>
113
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
114
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
115
  <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=sgch2023/ide-ui" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
116
  </html>