Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>AI Tier List</title> | |
| <style> | |
| /* General Styles */ | |
| body { | |
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; | |
| color: #ffffff; | |
| margin: 0; | |
| padding: 20px; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| min-height: 100vh; | |
| box-sizing: border-box; | |
| overflow: hidden; | |
| position: relative; | |
| } | |
| /* Galaxy Background */ | |
| .galaxy-bg { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: radial-gradient(circle, #000428, #004e92); | |
| z-index: -1; | |
| animation: moveStars 20s linear infinite; | |
| } | |
| @keyframes moveStars { | |
| 0% { transform: scale(1); } | |
| 50% { transform: scale(1.2); } | |
| 100% { transform: scale(1); } | |
| } | |
| /* Dark Mode Background */ | |
| .dark-bg { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background-color: #121212; | |
| z-index: -1; | |
| display: none; | |
| } | |
| h1 { | |
| color: #ff6f61; | |
| margin-bottom: 20px; | |
| font-size: 2.5em; | |
| text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); | |
| } | |
| /* Container for Tier List and AI Thoughts */ | |
| .container { | |
| display: flex; | |
| gap: 20px; | |
| width: 100%; | |
| max-width: 1200px; | |
| height: calc(100vh - 160px); | |
| box-sizing: border-box; | |
| } | |
| /* Tier List Styles */ | |
| .tier-list { | |
| flex: 3; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 8px; | |
| overflow-y: auto; | |
| padding-right: 10px; | |
| } | |
| .tier { | |
| display: flex; | |
| align-items: flex-start; | |
| gap: 10px; | |
| padding: 12px; | |
| border: 2px solid rgba(255, 255, 255, 0.1); | |
| background-color: rgba(30, 30, 30, 0.8); | |
| border-radius: 12px; | |
| backdrop-filter: blur(10px); | |
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); | |
| } | |
| .tier-label { | |
| font-weight: bold; | |
| width: 40px; | |
| text-align: center; | |
| font-size: 1.4em; | |
| color: #ff6f61; | |
| background-color: rgba(51, 51, 51, 0.8); | |
| padding: 8px; | |
| border-radius: 8px; | |
| box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); | |
| } | |
| .tier-content { | |
| flex-grow: 1; | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 8px; | |
| } | |
| .item { | |
| padding: 8px 12px; | |
| border: 1px solid rgba(68, 68, 68, 0.5); | |
| background-color: rgba(42, 42, 42, 0.8); | |
| border-radius: 6px; | |
| font-size: 0.9em; | |
| color: #ffffff; | |
| box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); | |
| transition: transform 0.2s, box-shadow 0.2s; | |
| } | |
| .item:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); | |
| } | |
| /* Input and Button Styles */ | |
| .input-section { | |
| margin-bottom: 20px; | |
| display: flex; | |
| gap: 10px; | |
| } | |
| #input-box { | |
| padding: 12px; | |
| border: 2px solid rgba(68, 68, 68, 0.5); | |
| background-color: rgba(30, 30, 30, 0.8); | |
| color: #ffffff; | |
| border-radius: 8px; | |
| width: 300px; | |
| font-size: 1em; | |
| box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); | |
| } | |
| button { | |
| padding: 12px 24px; | |
| border: none; | |
| background-color: #ff6f61; | |
| color: #ffffff; | |
| border-radius: 8px; | |
| font-size: 1em; | |
| cursor: pointer; | |
| transition: background-color 0.3s, transform 0.2s; | |
| box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); | |
| } | |
| button:hover { | |
| background-color: #e65a50; | |
| transform: translateY(-2px); | |
| } | |
| /* AI Thoughts Box */ | |
| #ai-thoughts { | |
| flex: 1; | |
| padding: 20px; | |
| border: 2px solid rgba(68, 68, 68, 0.5); | |
| background-color: rgba(30, 30, 30, 0.8); | |
| border-radius: 12px; | |
| max-width: 300px; | |
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); | |
| backdrop-filter: blur(10px); | |
| overflow-y: auto; | |
| } | |
| #ai-thoughts strong { | |
| color: #ff6f61; | |
| font-size: 1.2em; | |
| } | |
| #ai-reasoning { | |
| margin-top: 10px; | |
| font-size: 0.9em; | |
| line-height: 1.4; | |
| color: #cccccc; | |
| } | |
| /* Settings Panel */ | |
| .settings-panel { | |
| position: fixed; | |
| top: 20px; | |
| right: 20px; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 10px; | |
| } | |
| .settings-panel button { | |
| padding: 8px 16px; | |
| font-size: 0.9em; | |
| background-color: rgba(30, 30, 30, 0.8); | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| backdrop-filter: blur(10px); | |
| } | |
| .settings-panel button:hover { | |
| background-color: rgba(50, 50, 50, 0.8); | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Backgrounds --> | |
| <div class="galaxy-bg"></div> | |
| <div class="dark-bg"></div> | |
| <!-- Settings Panel --> | |
| <div class="settings-panel"> | |
| <button onclick="toggleBackground()">Switch Background</button> | |
| <button onclick="toggleAITone()">Toggle AI Tone</button> | |
| </div> | |
| <h1>AI Tier List</h1> | |
| <!-- Input Section --> | |
| <div class="input-section"> | |
| <input type="text" id="input-box" placeholder="Enter a word or phrase"> | |
| <button onclick="rankItem()">Rank It!</button> | |
| </div> | |
| <!-- Container for Tier List and AI Thoughts --> | |
| <div class="container"> | |
| <!-- Tier List --> | |
| <div class="tier-list"> | |
| <div class="tier"> | |
| <div class="tier-label">S</div> | |
| <div class="tier-content" id="tier-s"></div> | |
| </div> | |
| <div class="tier"> | |
| <div class="tier-label">A</div> | |
| <div class="tier-content" id="tier-a"></div> | |
| </div> | |
| <div class="tier"> | |
| <div class="tier-label">B</div> | |
| <div class="tier-content" id="tier-b"></div> | |
| </div> | |
| <div class="tier"> | |
| <div class="tier-label">C</div> | |
| <div class="tier-content" id="tier-c"></div> | |
| </div> | |
| <div class="tier"> | |
| <div class="tier-label">D</div> | |
| <div class="tier-content" id="tier-d"></div> | |
| </div> | |
| <div class="tier"> | |
| <div class="tier-label">E</div> | |
| <div class="tier-content" id="tier-e"></div> | |
| </div> | |
| <div class="tier"> | |
| <div class="tier-label">F</div> | |
| <div class="tier-content" id="tier-f"></div> | |
| </div> | |
| </div> | |
| <!-- AI Thoughts Box --> | |
| <div id="ai-thoughts"> | |
| <strong>AI Thoughts:</strong> | |
| <div id="ai-reasoning">Enter something to see the AI's reasoning!</div> | |
| </div> | |
| </div> | |
| <script> | |
| let isGalaxyBackground = true; | |
| let isAIPositive = true; | |
| // Toggle Background | |
| function toggleBackground() { | |
| const galaxyBg = document.querySelector('.galaxy-bg'); | |
| const darkBg = document.querySelector('.dark-bg'); | |
| isGalaxyBackground = !isGalaxyBackground; | |
| galaxyBg.style.display = isGalaxyBackground ? 'block' : 'none'; | |
| darkBg.style.display = isGalaxyBackground ? 'none' : 'block'; | |
| } | |
| // Toggle AI Tone | |
| function toggleAITone() { | |
| isAIPositive = !isAIPositive; | |
| alert(`AI Tone set to: ${isAIPositive ? 'Positive' : 'Negative'}`); | |
| } | |
| // Rank Item | |
| async function rankItem() { | |
| const input = document.getElementById('input-box').value; | |
| if (!input) return; | |
| const tiers = ['S', 'A', 'B', 'C', 'D', 'E', 'F']; | |
| const randomTier = tiers[Math.floor(Math.random() * tiers.length)]; | |
| const tone = isAIPositive ? ['amazing', 'great', 'good', 'average', 'below average', 'poor', 'terrible'] : ['overrated', 'mediocre', 'okay', 'unimpressive', 'bad', 'awful', 'horrible']; | |
| const reasoning = `"${input}" is ranked ${randomTier} because it is ${tone[tiers.indexOf(randomTier)]}.`; | |
| const tierContent = document.getElementById(`tier-${randomTier.toLowerCase()}`); | |
| tierContent.innerHTML += `<div class="item">${input}</div>`; | |
| document.getElementById('ai-reasoning').innerText = reasoning; | |
| } | |
| </script> | |
| </body> | |
| </html> |