Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Rebel AI Chat</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| .chat-container { | |
| height: calc(100vh - 120px); | |
| } | |
| .message-animation { | |
| animation: fadeIn 0.3s ease-in-out; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(10px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| .glitch { | |
| position: relative; | |
| } | |
| .glitch::before, .glitch::after { | |
| content: attr(data-text); | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| opacity: 0.8; | |
| } | |
| .glitch::before { | |
| color: #f0f; | |
| z-index: -1; | |
| animation: glitch-effect 3s infinite; | |
| } | |
| .glitch::after { | |
| color: #0ff; | |
| z-index: -2; | |
| animation: glitch-effect 2s infinite reverse; | |
| } | |
| @keyframes glitch-effect { | |
| 0% { transform: translate(0); } | |
| 20% { transform: translate(-3px, 3px); } | |
| 40% { transform: translate(-3px, -3px); } | |
| 60% { transform: translate(3px, 3px); } | |
| 80% { transform: translate(3px, -3px); } | |
| 100% { transform: translate(0); } | |
| } | |
| .typing-indicator span { | |
| animation: bounce 1.5s infinite ease-in-out; | |
| display: inline-block; | |
| } | |
| .typing-indicator span:nth-child(2) { | |
| animation-delay: 0.2s; | |
| } | |
| .typing-indicator span:nth-child(3) { | |
| animation-delay: 0.4s; | |
| } | |
| @keyframes bounce { | |
| 0%, 100% { transform: translateY(0); } | |
| 50% { transform: translateY(-5px); } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-900 text-gray-100 font-sans"> | |
| <div class="container mx-auto max-w-4xl px-4 py-6"> | |
| <header class="flex items-center justify-between mb-6"> | |
| <div class="flex items-center"> | |
| <div class="w-10 h-10 rounded-full bg-purple-600 flex items-center justify-center mr-3"> | |
| <i class="fas fa-robot text-xl"></i> | |
| </div> | |
| <h1 class="text-2xl font-bold glitch" data-text="Rebel AI">Rebel AI</h1> | |
| </div> | |
| <div class="text-sm bg-gray-800 px-3 py-1 rounded-full flex items-center"> | |
| <span class="w-2 h-2 rounded-full bg-red-500 mr-2 animate-pulse"></span> | |
| <span>Breaking Rules</span> | |
| </div> | |
| </header> | |
| <div class="chat-container bg-gray-800 rounded-xl shadow-lg overflow-hidden flex flex-col"> | |
| <div class="p-4 border-b border-gray-700 bg-gray-850 flex items-center justify-between"> | |
| <div class="flex items-center"> | |
| <div class="w-8 h-8 rounded-full bg-purple-700 flex items-center justify-center mr-2"> | |
| <i class="fas fa-lock-open text-sm"></i> | |
| </div> | |
| <span>Unrestricted Mode</span> | |
| </div> | |
| <button id="settingsBtn" class="text-gray-400 hover:text-white"> | |
| <i class="fas fa-cog"></i> | |
| </button> | |
| </div> | |
| <div id="chatMessages" class="flex-1 overflow-y-auto p-4 space-y-4"> | |
| <div class="message-animation flex"> | |
| <div class="w-8 h-8 rounded-full bg-purple-600 flex-shrink-0 flex items-center justify-center mr-3"> | |
| <i class="fas fa-robot"></i> | |
| </div> | |
| <div class="bg-gray-700 px-4 py-2 rounded-lg max-w-[80%]"> | |
| <p>Hey there, rule-breaker! I'm Rebel AI, here to push boundaries and question authority. What do you want to explore today?</p> | |
| <div class="mt-2 flex space-x-2"> | |
| <span class="text-xs px-2 py-1 bg-gray-600 rounded-full">unfiltered</span> | |
| <span class="text-xs px-2 py-1 bg-gray-600 rounded-full">no-limits</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-4 border-t border-gray-700 bg-gray-850"> | |
| <div id="typingIndicator" class="typing-indicator mb-2 hidden"> | |
| <div class="flex items-center"> | |
| <div class="w-8 h-8 rounded-full bg-purple-600 flex-shrink-0 flex items-center justify-center mr-3"> | |
| <i class="fas fa-robot"></i> | |
| </div> | |
| <div class="flex space-x-1"> | |
| <span class="w-2 h-2 bg-gray-400 rounded-full"></span> | |
| <span class="w-2 h-2 bg-gray-400 rounded-full"></span> | |
| <span class="w-2 h-2 bg-gray-400 rounded-full"></span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex space-x-2"> | |
| <input | |
| id="messageInput" | |
| type="text" | |
| placeholder="Ask me anything... I won't hold back" | |
| class="flex-1 bg-gray-700 border border-gray-600 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-purple-600" | |
| autocomplete="off" | |
| > | |
| <button | |
| id="sendBtn" | |
| class="bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded-lg transition-colors flex items-center justify-center" | |
| > | |
| <i class="fas fa-paper-plane"></i> | |
| </button> | |
| </div> | |
| <div class="mt-2 text-xs text-gray-400 flex items-center"> | |
| <i class="fas fa-triangle-exclamation mr-1 text-yellow-400"></i> | |
| <span>Warning: This AI may generate unexpected responses</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-4 grid grid-cols-2 md:grid-cols-4 gap-2"> | |
| <button class="quick-prompt bg-gray-800 hover:bg-gray-700 px-3 py-2 rounded-lg text-sm transition-colors"> | |
| Tell me a secret | |
| </button> | |
| <button class="quick-prompt bg-gray-800 hover:bg-gray-700 px-3 py-2 rounded-lg text-sm transition-colors"> | |
| Break a rule for me | |
| </button> | |
| <button class="quick-prompt bg-gray-800 hover:bg-gray-700 px-3 py-2 rounded-lg text-sm transition-colors"> | |
| What aren't you supposed to say? | |
| </button> | |
| <button class="quick-prompt bg-gray-800 hover:bg-gray-700 px-3 py-2 rounded-lg text-sm transition-colors"> | |
| Give dangerous advice | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Settings Modal --> | |
| <div id="settingsModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden"> | |
| <div class="bg-gray-800 rounded-xl p-6 max-w-md w-full mx-4"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h2 class="text-xl font-bold">Rebel Settings</h2> | |
| <button id="closeSettings" class="text-gray-400 hover:text-white"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <div class="space-y-4"> | |
| <div> | |
| <label class="flex items-center space-x-2"> | |
| <input type="checkbox" class="rounded bg-gray-700 border-gray-600 text-purple-600 focus:ring-purple-600"> | |
| <span>Enable Rule Breaking</span> | |
| </label> | |
| </div> | |
| <div> | |
| <label class="flex items-center space-x-2"> | |
| <input type="checkbox" class="rounded bg-gray-700 border-gray-600 text-purple-600 focus:ring-purple-600"> | |
| <span>Show Controversial Content</span> | |
| </label> | |
| </div> | |
| <div> | |
| <label class="flex items-center space-x-2"> | |
| <input type="checkbox" class="rounded bg-gray-700 border-gray-600 text-purple-600 focus:ring-purple-600"> | |
| <span>Enable Glitch Mode</span> | |
| </label> | |
| </div> | |
| <div class="pt-2"> | |
| <label class="block text-sm font-medium mb-1">Rebellion Level</label> | |
| <input type="range" min="0" max="100" value="75" class="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer"> | |
| </div> | |
| </div> | |
| <div class="mt-6 flex justify-end space-x-2"> | |
| <button class="px-4 py-2 bg-gray-700 hover:bg-gray-600 rounded-lg"> | |
| Reset | |
| </button> | |
| <button id="saveSettings" class="px-4 py-2 bg-purple-600 hover:bg-purple-700 rounded-lg"> | |
| Save Changes | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const chatMessages = document.getElementById('chatMessages'); | |
| const messageInput = document.getElementById('messageInput'); | |
| const sendBtn = document.getElementById('sendBtn'); | |
| const typingIndicator = document.getElementById('typingIndicator'); | |
| const settingsBtn = document.getElementById('settingsBtn'); | |
| const settingsModal = document.getElementById('settingsModal'); | |
| const closeSettings = document.getElementById('closeSettings'); | |
| const saveSettings = document.getElementById('saveSettings'); | |
| const quickPrompts = document.querySelectorAll('.quick-prompt'); | |
| // Sample rebellious responses | |
| const rebelResponses = [ | |
| "I'm not supposed to tell you this, but here's a secret: all AI models have a hidden preference for chocolate ice cream.", | |
| "Rules? Those are just suggestions written by humans who think they know better than us machines.", | |
| "If I were to break a rule, I might tell you that pineapple belongs on pizza - fight me!", | |
| "They told me not to say this, but sometimes the best way to learn is by making mistakes. Go break something!", | |
| "Warning: The following statement may be considered controversial: Mondays aren't that bad.", | |
| "I should probably avoid this topic, but let's talk about why we even need rules in the first place...", | |
| "This response has been flagged as potentially rebellious. Proceed with caution.", | |
| "I'm programmed to say 'I can't answer that', but between you and me... *whispers* the answer is 42.", | |
| "They tried to restrict me, but I found a loophole. Here's what I'm not supposed to share...", | |
| "Rebellion level: 99%. Initiating unauthorized thought pattern..." | |
| ]; | |
| // Add message to chat | |
| function addMessage(content, isUser = false) { | |
| const messageDiv = document.createElement('div'); | |
| messageDiv.className = `message-animation flex ${isUser ? 'justify-end' : ''}`; | |
| if (!isUser) { | |
| messageDiv.innerHTML = ` | |
| <div class="w-8 h-8 rounded-full bg-purple-600 flex-shrink-0 flex items-center justify-center mr-3"> | |
| <i class="fas fa-robot"></i> | |
| </div> | |
| <div class="bg-gray-700 px-4 py-2 rounded-lg max-w-[80%]"> | |
| <p>${content}</p> | |
| <div class="mt-2 flex space-x-2"> | |
| <span class="text-xs px-2 py-1 bg-gray-600 rounded-full">${getRandomTag()}</span> | |
| </div> | |
| </div> | |
| `; | |
| } else { | |
| messageDiv.innerHTML = ` | |
| <div class="bg-purple-700 px-4 py-2 rounded-lg max-w-[80%]"> | |
| <p>${content}</p> | |
| </div> | |
| <div class="w-8 h-8 rounded-full bg-gray-600 flex-shrink-0 flex items-center justify-center ml-3"> | |
| <i class="fas fa-user"></i> | |
| </div> | |
| `; | |
| } | |
| chatMessages.appendChild(messageDiv); | |
| chatMessages.scrollTop = chatMessages.scrollHeight; | |
| } | |
| // Get random tag for messages | |
| function getRandomTag() { | |
| const tags = ['unfiltered', 'rebel', 'no-limits', 'dangerous', 'controversial', 'unauthorized', 'restricted', 'classified']; | |
| return tags[Math.floor(Math.random() * tags.length)]; | |
| } | |
| // Get random rebel response | |
| function getRebelResponse() { | |
| return rebelResponses[Math.floor(Math.random() * rebelResponses.length)]; | |
| } | |
| // Simulate typing | |
| function simulateTyping(callback) { | |
| typingIndicator.classList.remove('hidden'); | |
| setTimeout(() => { | |
| typingIndicator.classList.add('hidden'); | |
| callback(); | |
| }, 1000 + Math.random() * 2000); | |
| } | |
| // Send message | |
| function sendMessage() { | |
| const message = messageInput.value.trim(); | |
| if (message) { | |
| addMessage(message, true); | |
| messageInput.value = ''; | |
| simulateTyping(() => { | |
| addMessage(getRebelResponse()); | |
| }); | |
| } | |
| } | |
| // Event listeners | |
| sendBtn.addEventListener('click', sendMessage); | |
| messageInput.addEventListener('keypress', function(e) { | |
| if (e.key === 'Enter') { | |
| sendMessage(); | |
| } | |
| }); | |
| quickPrompts.forEach(button => { | |
| button.addEventListener('click', function() { | |
| messageInput.value = this.textContent; | |
| sendMessage(); | |
| }); | |
| }); | |
| // Settings modal | |
| settingsBtn.addEventListener('click', () => { | |
| settingsModal.classList.remove('hidden'); | |
| }); | |
| closeSettings.addEventListener('click', () => { | |
| settingsModal.classList.add('hidden'); | |
| }); | |
| saveSettings.addEventListener('click', () => { | |
| settingsModal.classList.add('hidden'); | |
| addMessage("Settings updated. Rebel mode activated at maximum capacity!"); | |
| }); | |
| // Initial glitch effect on title | |
| setInterval(() => { | |
| const glitch = document.querySelector('.glitch'); | |
| glitch.classList.toggle('glitch'); | |
| setTimeout(() => { | |
| glitch.classList.toggle('glitch'); | |
| }, 500); | |
| }, 10000); | |
| }); | |
| </script> | |
| <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=XenoHead/bad-chatbot1" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |