HTML-community/Ai-tier-maker
0
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 Background275 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 Tone284 function toggleAITone() {285 isAIPositive = !isAIPositive;286 alert(`AI Tone set to: ${isAIPositive ? 'Positive' : 'Negative'}`);287 }288 289 // Rank Item290 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>