Hugging Face's logo

Spaces:
vericudebuget
/
AIselector
Running

App Files Community
vericudebuget commited on
Commit
9af5e68
·
verified ·
1 Parent(s): 9a65a2f

Create index.html

Browse files
Files changed (1) hide show
  1. index.html +285 -19
index.html CHANGED
@@ -1,19 +1,285 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22> </text></svg>">
5
+ <meta charset="UTF-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>AI Website Selector</title>
8
+ <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
9
+ <style>
10
+ @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap');
11
+
12
+ :root {
13
+ --primary-dark: #0a192f;
14
+ --primary-light: #172a45;
15
+ --accent: #64ffda;
16
+ --text: #ccd6f6;
17
+ --text-secondary: #8892b0;
18
+ }
19
+
20
+ * {
21
+ margin: 0;
22
+ padding: 0;
23
+ box-sizing: border-box;
24
+ font-family: 'Montserrat', sans-serif;
25
+ }
26
+
27
+ body {
28
+ background-color: var(--primary-dark);
29
+ color: var(--text);
30
+ min-height: 100vh;
31
+ padding: 2rem;
32
+ }
33
+
34
+ .container {
35
+ max-width: 1200px;
36
+ margin: 0 auto;
37
+ }
38
+
39
+ header {
40
+ text-align: center;
41
+ margin-bottom: 3rem;
42
+ }
43
+
44
+ h1 {
45
+ font-size: 2.5rem;
46
+ margin-bottom: 1rem;
47
+ color: var(--accent);
48
+ }
49
+
50
+ .grid {
51
+ display: grid;
52
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
53
+ gap: 2rem;
54
+ }
55
+
56
+ .card {
57
+ background-color: var(--primary-light);
58
+ border-radius: 10px;
59
+ padding: 1.5rem;
60
+ transition: transform 0.3s ease, box-shadow 0.3s ease;
61
+ cursor: pointer;
62
+ position: relative;
63
+ overflow: hidden;
64
+ }
65
+
66
+ .card:hover {
67
+ transform: translateY(-5px);
68
+ box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
69
+ }
70
+
71
+ .card::before {
72
+ content: '';
73
+ position: absolute;
74
+ top: 0;
75
+ left: 0;
76
+ width: 100%;
77
+ height: 4px;
78
+ background: var(--accent);
79
+ transform: scaleX(0);
80
+ transition: transform 0.3s ease;
81
+ }
82
+
83
+ .card:hover::before {
84
+ transform: scaleX(1);
85
+ }
86
+
87
+ .card-content {
88
+ display: flex;
89
+ flex-direction: column;
90
+ gap: 1rem;
91
+ }
92
+
93
+ .card-header {
94
+ display: flex;
95
+ align-items: center;
96
+ gap: 1rem;
97
+ }
98
+
99
+ .icon {
100
+ width: 40px;
101
+ height: 40px;
102
+ border-radius: 8px;
103
+ display: flex;
104
+ align-items: center;
105
+ justify-content: center;
106
+ background-color: var(--primary-dark);
107
+ }
108
+
109
+ .icon i {
110
+ font-size: 1.5rem;
111
+ color: var(--accent);
112
+ }
113
+
114
+ .card h2 {
115
+ font-size: 1.25rem;
116
+ font-weight: 600;
117
+ }
118
+
119
+ .card p {
120
+ color: var(--text-secondary);
121
+ font-size: 0.9rem;
122
+ line-height: 1.5;
123
+ }
124
+
125
+ .visit-btn {
126
+ display: inline-block;
127
+ padding: 0.75rem 1.5rem;
128
+ background-color: transparent;
129
+ border: 1px solid var(--accent);
130
+ color: var(--accent);
131
+ text-decoration: none;
132
+ border-radius: 5px;
133
+ font-weight: 500;
134
+ transition: background-color 0.3s ease;
135
+ text-align: center;
136
+ margin-top: auto;
137
+ }
138
+
139
+ .visit-btn:hover {
140
+ background-color: rgba(100, 255, 218, 0.1);
141
+ }
142
+
143
+ @media (max-width: 768px) {
144
+ body {
145
+ padding: 1rem;
146
+ }
147
+
148
+ h1 {
149
+ font-size: 2rem;
150
+ }
151
+
152
+ .grid {
153
+ grid-template-columns: 1fr;
154
+ }
155
+ }
156
+ </style>
157
+ </head>
158
+ <body>
159
+ <div class="container">
160
+ <header>
161
+ <h1>AI Website Selector</h1>
162
+ <p>Choose your preferred AI platform</p>
163
+ </header>
164
+
165
+ <div class="grid">
166
+ <div class="card" onclick="window.location.href='https://www.hailuo.ai/'">
167
+ <div class="card-content">
168
+ <div class="card-header">
169
+ <div class="icon">
170
+ <i class="fas fa-robot"></i>
171
+ </div>
172
+ <h2>Hailuo AI</h2>
173
+ </div>
174
+ <p>Advanced AI platform for natural language processing and generation</p>
175
+ <a href="https://www.hailuo.ai/" class="visit-btn">Visit Platform</a>
176
+ </div>
177
+ </div>
178
+
179
+ <div class="card" onclick="window.location.href='https://chat.deepseek.com/'">
180
+ <div class="card-content">
181
+ <div class="card-header">
182
+ <div class="icon">
183
+ <i class="fas fa-brain"></i>
184
+ </div>
185
+ <h2>DeepSeek</h2>
186
+ </div>
187
+ <p>Intelligent conversational AI for deep learning and problem-solving</p>
188
+ <a href="https://chat.deepseek.com/" class="visit-btn">Visit Platform</a>
189
+ </div>
190
+ </div>
191
+
192
+ <div class="card" onclick="window.location.href='https://chatgpt.com/'">
193
+ <div class="card-content">
194
+ <div class="card-header">
195
+ <div class="icon">
196
+ <i class="fas fa-comment-dots"></i>
197
+ </div>
198
+ <h2>ChatGPT</h2>
199
+ </div>
200
+ <p>OpenAI's powerful language model for interactive conversations</p>
201
+ <a href="https://chatgpt.com/" class="visit-btn">Visit Platform</a>
202
+ </div>
203
+ </div>
204
+
205
+ <div class="card" onclick="window.location.href='https://claude.ai/new'">
206
+ <div class="card-content">
207
+ <div class="card-header">
208
+ <div class="icon">
209
+ <i class="fas fa-lightbulb"></i>
210
+ </div>
211
+ <h2>Claude</h2>
212
+ </div>
213
+ <p>Anthropic's advanced AI assistant for comprehensive task handling</p>
214
+ <a href="https://claude.ai/new" class="visit-btn">Visit Platform</a>
215
+ </div>
216
+ </div>
217
+
218
+ <div class="card" onclick="window.location.href='https://cloud.sambanova.ai/'">
219
+ <div class="card-content">
220
+ <div class="card-header">
221
+ <div class="icon">
222
+ <i class="fas fa-cloud"></i>
223
+ </div>
224
+ <h2>SambaNova</h2>
225
+ </div>
226
+ <p>Enterprise AI solutions for accelerated computing and ML</p>
227
+ <a href="https://cloud.sambanova.ai/" class="visit-btn">Visit Platform</a>
228
+ </div>
229
+ </div>
230
+
231
+ <div class="card" onclick="window.location.href='https://console.groq.com/playground'">
232
+ <div class="card-content">
233
+ <div class="card-header">
234
+ <div class="icon">
235
+ <i class="fas fa-microchip"></i>
236
+ </div>
237
+ <h2>Groq</h2>
238
+ </div>
239
+ <p>High-performance AI computing platform for rapid inference</p>
240
+ <a href="https://console.groq.com/playground" class="visit-btn">Visit Platform</a>
241
+ </div>
242
+ </div>
243
+
244
+ <div class="card" onclick="window.location.href='https://aistudio.google.com/u/0/prompts/new_chat'">
245
+ <div class="card-content">
246
+ <div class="card-header">
247
+ <div class="icon">
248
+ <i class="fab fa-google"></i>
249
+ </div>
250
+ <h2>Google AI Studio</h2>
251
+ </div>
252
+ <p>Google's AI platform for developing and testing language models</p>
253
+ <a href="https://aistudio.google.com/u/0/prompts/new_chat" class="visit-btn">Visit Platform</a>
254
+ </div>
255
+ </div>
256
+
257
+ <div class="card" onclick="window.location.href='https://convolite.github.io/professional.html'">
258
+ <div class="card-content">
259
+ <div class="card-header">
260
+ <div class="icon">
261
+ <i class="fas fa-code"></i>
262
+ </div>
263
+ <h2>Convolite</h2>
264
+ </div>
265
+ <p>Professional AI tools and services for developers</p>
266
+ <a href="https://convolite.github.io/professional.html" class="visit-btn">Visit Platform</a>
267
+ </div>
268
+ </div>
269
+
270
+ <div class="card" onclick="window.location.href='https://duckduckgo.com/?q=DuckDuckGo+AI+Chat&ia=chat&duckai=1'">
271
+ <div class="card-content">
272
+ <div class="card-header">
273
+ <div class="icon">
274
+ <i class="fas fa-duck"></i>
275
+ </div>
276
+ <h2>DuckDuckGo AI</h2>
277
+ </div>
278
+ <p>Privacy-focused AI chat and search platform</p>
279
+ <a href="https://duckduckgo.com/?q=DuckDuckGo+AI+Chat&ia=chat&duckai=1" class="visit-btn">Visit Platform</a>
280
+ </div>
281
+ </div>
282
+ </div>
283
+ </div>
284
+ </body>
285
+ </html>