Hugging Face's logo

Spaces:
HTML-community
/
Ai-tier-maker
Running

App Files Community
Felguk commited on
Commit
3d70155
·
verified ·
1 Parent(s): ec25aef

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +306 -19
index.html CHANGED
@@ -1,19 +1,306 @@
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
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>AI Tier List</title>
7
+ <style>
8
+ /* General Styles */
9
+ body {
10
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
11
+ color: #ffffff;
12
+ margin: 0;
13
+ padding: 20px;
14
+ display: flex;
15
+ flex-direction: column;
16
+ align-items: center;
17
+ min-height: 100vh;
18
+ box-sizing: border-box;
19
+ overflow: hidden;
20
+ position: relative;
21
+ }
22
+
23
+ /* Galaxy Background */
24
+ .galaxy-bg {
25
+ position: fixed;
26
+ top: 0;
27
+ left: 0;
28
+ width: 100%;
29
+ height: 100%;
30
+ background: radial-gradient(circle, #000428, #004e92);
31
+ z-index: -1;
32
+ animation: moveStars 20s linear infinite;
33
+ }
34
+
35
+ @keyframes moveStars {
36
+ 0% { transform: scale(1); }
37
+ 50% { transform: scale(1.2); }
38
+ 100% { transform: scale(1); }
39
+ }
40
+
41
+ /* Dark Mode Background */
42
+ .dark-bg {
43
+ position: fixed;
44
+ top: 0;
45
+ left: 0;
46
+ width: 100%;
47
+ height: 100%;
48
+ background-color: #121212;
49
+ z-index: -1;
50
+ display: none;
51
+ }
52
+
53
+ h1 {
54
+ color: #ff6f61;
55
+ margin-bottom: 20px;
56
+ font-size: 2.5em;
57
+ text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
58
+ }
59
+
60
+ /* Container for Tier List and AI Thoughts */
61
+ .container {
62
+ display: flex;
63
+ gap: 20px;
64
+ width: 100%;
65
+ max-width: 1200px;
66
+ height: calc(100vh - 160px);
67
+ box-sizing: border-box;
68
+ }
69
+
70
+ /* Tier List Styles */
71
+ .tier-list {
72
+ flex: 3;
73
+ display: flex;
74
+ flex-direction: column;
75
+ gap: 8px;
76
+ overflow-y: auto;
77
+ padding-right: 10px;
78
+ }
79
+
80
+ .tier {
81
+ display: flex;
82
+ align-items: flex-start;
83
+ gap: 10px;
84
+ padding: 12px;
85
+ border: 2px solid rgba(255, 255, 255, 0.1);
86
+ background-color: rgba(30, 30, 30, 0.8);
87
+ border-radius: 12px;
88
+ backdrop-filter: blur(10px);
89
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
90
+ }
91
+
92
+ .tier-label {
93
+ font-weight: bold;
94
+ width: 40px;
95
+ text-align: center;
96
+ font-size: 1.4em;
97
+ color: #ff6f61;
98
+ background-color: rgba(51, 51, 51, 0.8);
99
+ padding: 8px;
100
+ border-radius: 8px;
101
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
102
+ }
103
+
104
+ .tier-content {
105
+ flex-grow: 1;
106
+ display: flex;
107
+ flex-wrap: wrap;
108
+ gap: 8px;
109
+ }
110
+
111
+ .item {
112
+ padding: 8px 12px;
113
+ border: 1px solid rgba(68, 68, 68, 0.5);
114
+ background-color: rgba(42, 42, 42, 0.8);
115
+ border-radius: 6px;
116
+ font-size: 0.9em;
117
+ color: #ffffff;
118
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
119
+ transition: transform 0.2s, box-shadow 0.2s;
120
+ }
121
+
122
+ .item:hover {
123
+ transform: translateY(-2px);
124
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
125
+ }
126
+
127
+ /* Input and Button Styles */
128
+ .input-section {
129
+ margin-bottom: 20px;
130
+ display: flex;
131
+ gap: 10px;
132
+ }
133
+
134
+ #input-box {
135
+ padding: 12px;
136
+ border: 2px solid rgba(68, 68, 68, 0.5);
137
+ background-color: rgba(30, 30, 30, 0.8);
138
+ color: #ffffff;
139
+ border-radius: 8px;
140
+ width: 300px;
141
+ font-size: 1em;
142
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
143
+ }
144
+
145
+ button {
146
+ padding: 12px 24px;
147
+ border: none;
148
+ background-color: #ff6f61;
149
+ color: #ffffff;
150
+ border-radius: 8px;
151
+ font-size: 1em;
152
+ cursor: pointer;
153
+ transition: background-color 0.3s, transform 0.2s;
154
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
155
+ }
156
+
157
+ button:hover {
158
+ background-color: #e65a50;
159
+ transform: translateY(-2px);
160
+ }
161
+
162
+ /* AI Thoughts Box */
163
+ #ai-thoughts {
164
+ flex: 1;
165
+ padding: 20px;
166
+ border: 2px solid rgba(68, 68, 68, 0.5);
167
+ background-color: rgba(30, 30, 30, 0.8);
168
+ border-radius: 12px;
169
+ max-width: 300px;
170
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
171
+ backdrop-filter: blur(10px);
172
+ overflow-y: auto;
173
+ }
174
+
175
+ #ai-thoughts strong {
176
+ color: #ff6f61;
177
+ font-size: 1.2em;
178
+ }
179
+
180
+ #ai-reasoning {
181
+ margin-top: 10px;
182
+ font-size: 0.9em;
183
+ line-height: 1.4;
184
+ color: #cccccc;
185
+ }
186
+
187
+ /* Settings Panel */
188
+ .settings-panel {
189
+ position: fixed;
190
+ top: 20px;
191
+ right: 20px;
192
+ display: flex;
193
+ flex-direction: column;
194
+ gap: 10px;
195
+ }
196
+
197
+ .settings-panel button {
198
+ padding: 8px 16px;
199
+ font-size: 0.9em;
200
+ background-color: rgba(30, 30, 30, 0.8);
201
+ border: 1px solid rgba(255, 255, 255, 0.1);
202
+ backdrop-filter: blur(10px);
203
+ }
204
+
205
+ .settings-panel button:hover {
206
+ background-color: rgba(50, 50, 50, 0.8);
207
+ }
208
+ </style>
209
+ </head>
210
+ <body>
211
+ <!-- Backgrounds -->
212
+ <div class="galaxy-bg"></div>
213
+ <div class="dark-bg"></div>
214
+
215
+ <!-- Settings Panel -->
216
+ <div class="settings-panel">
217
+ <button onclick="toggleBackground()">Switch Background</button>
218
+ <button onclick="toggleAITone()">Toggle AI Tone</button>
219
+ </div>
220
+
221
+ <h1>AI Tier List</h1>
222
+
223
+ <!-- Input Section -->
224
+ <div class="input-section">
225
+ <input type="text" id="input-box" placeholder="Enter a word or phrase">
226
+ <button onclick="rankItem()">Rank It!</button>
227
+ </div>
228
+
229
+ <!-- Container for Tier List and AI Thoughts -->
230
+ <div class="container">
231
+ <!-- Tier List -->
232
+ <div class="tier-list">
233
+ <div class="tier">
234
+ <div class="tier-label">S</div>
235
+ <div class="tier-content" id="tier-s"></div>
236
+ </div>
237
+ <div class="tier">
238
+ <div class="tier-label">A</div>
239
+ <div class="tier-content" id="tier-a"></div>
240
+ </div>
241
+ <div class="tier">
242
+ <div class="tier-label">B</div>
243
+ <div class="tier-content" id="tier-b"></div>
244
+ </div>
245
+ <div class="tier">
246
+ <div class="tier-label">C</div>
247
+ <div class="tier-content" id="tier-c"></div>
248
+ </div>
249
+ <div class="tier">
250
+ <div class="tier-label">D</div>
251
+ <div class="tier-content" id="tier-d"></div>
252
+ </div>
253
+ <div class="tier">
254
+ <div class="tier-label">E</div>
255
+ <div class="tier-content" id="tier-e"></div>
256
+ </div>
257
+ <div class="tier">
258
+ <div class="tier-label">F</div>
259
+ <div class="tier-content" id="tier-f"></div>
260
+ </div>
261
+ </div>
262
+
263
+ <!-- AI Thoughts Box -->
264
+ <div id="ai-thoughts">
265
+ <strong>AI Thoughts:</strong>
266
+ <div id="ai-reasoning">Enter something to see the AI's reasoning!</div>
267
+ </div>
268
+ </div>
269
+
270
+ <script>
271
+ let isGalaxyBackground = true;
272
+ let isAIPositive = true;
273
+
274
+ // Toggle Background
275
+ function toggleBackground() {
276
+ const galaxyBg = document.querySelector('.galaxy-bg');
277
+ const darkBg = document.querySelector('.dark-bg');
278
+ isGalaxyBackground = !isGalaxyBackground;
279
+ galaxyBg.style.display = isGalaxyBackground ? 'block' : 'none';
280
+ darkBg.style.display = isGalaxyBackground ? 'none' : 'block';
281
+ }
282
+
283
+ // Toggle AI Tone
284
+ function toggleAITone() {
285
+ isAIPositive = !isAIPositive;
286
+ alert(`AI Tone set to: ${isAIPositive ? 'Positive' : 'Negative'}`);
287
+ }
288
+
289
+ // Rank Item
290
+ async function rankItem() {
291
+ const input = document.getElementById('input-box').value;
292
+ if (!input) return;
293
+
294
+ const tiers = ['S', 'A', 'B', 'C', 'D', 'E', 'F'];
295
+ const randomTier = tiers[Math.floor(Math.random() * tiers.length)];
296
+ const tone = isAIPositive ? ['amazing', 'great', 'good', 'average', 'below average', 'poor', 'terrible'] : ['overrated', 'mediocre', 'okay', 'unimpressive', 'bad', 'awful', 'horrible'];
297
+ const reasoning = `"${input}" is ranked ${randomTier} because it is ${tone[tiers.indexOf(randomTier)]}.`;
298
+
299
+ const tierContent = document.getElementById(`tier-${randomTier.toLowerCase()}`);
300
+ tierContent.innerHTML += `<div class="item">${input}</div>`;
301
+
302
+ document.getElementById('ai-reasoning').innerText = reasoning;
303
+ }
304
+ </script>
305
+ </body>
306
+ </html>