Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>AI System Instructor Sandbox</title> | |
| <style> | |
| body { font-family: system-ui, Arial, sans-serif; max-width: 600px; margin: 40px auto; padding: 20px; background: #0f172a; color: #f8fafc; } | |
| .card { background: #1e293b; padding: 30px; border-radius: 12px; border: 1px solid #334155; box-shadow: 0 10px 15px -3px rgba(0,0,0,0.3); } | |
| h2 { margin-top: 0; color: #38bdf8; font-size: 24px; text-align: center; } | |
| p { color: #94a3b8; font-size: 14px; text-align: center; margin-bottom: 25px; } | |
| label { display: block; font-weight: bold; margin-bottom: 8px; color: #e2e8f0; font-size: 14px; } | |
| textarea { width: 100%; padding: 12px; background: #0f172a; color: #fff; border: 1px solid #475569; border-radius: 6px; box-sizing: border-box; font-size: 14px; margin-bottom: 20px; font-family: monospace; resize: vertical; } | |
| input[type="text"] { width: 100%; padding: 14px; background: #0f172a; color: #fff; border: 1px solid #475569; border-radius: 6px; box-sizing: border-box; font-size: 16px; margin-bottom: 25px; } | |
| button { width: 100%; padding: 16px; background: #0284c7; color: white; border: none; border-radius: 6px; font-size: 16px; font-weight: bold; cursor: pointer; transition: background 0.2s; } | |
| button:hover { background: #0369a1; } | |
| .tip { font-size: 12px; color: #64748b; margin-top: 15px; text-align: left; background: #111827; padding: 10px; border-radius: 6px; border-left: 3px solid #0284c7; } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="card"> | |
| <h2>🤖 Custom SI Chatbot Portal</h2> | |
| <p>Bypasses static security locks by routing through an unrestricted runtime.</p> | |
| <!-- Field 1: The System Instructor Rules --> | |
| <label for="si_prompt">1. Define System Instructor (SI) Rules:</label> | |
| <textarea id="si_prompt" rows="5">You are an expert programming mentor. Always respond with concise code blocks and explain them in bullet points using a friendly tone.</textarea> | |
| <!-- Field 2: The User Message --> | |
| <label for="user_message">2. Type Your Message or Question:</label> | |
| <input type="text" id="user_message" placeholder="e.g., How do I reverse a string in Python?" value="Hello!"> | |
| <!-- Action Button --> | |
| <button onclick="launchChat()">Initialize Chat Session</button> | |
| <div class="tip"> | |
| <strong>💡 How this works:</strong> Clicking the button uses standard JavaScript to combine your SI instructions and your prompt into a public text package, breaking out of the broken static container instantly. | |
| </div> | |
| </div> | |
| <script> | |
| function launchChat() { | |
| const siText = document.getElementById("si_prompt").value.trim(); | |
| const userText = document.getElementById("user_message").value.trim(); | |
| if (!userText) { | |
| alert("Please type a message first."); | |
| return; | |
| } | |
| // Combine instructions using clear text parsing | |
| const completeInstructions = "SYSTEM INSTRUCTIONS:\n" + siText + "\n\nUSER QUESTION:\n" + userText; | |
| // Safe URL encoding to build a functional cross-origin bridge | |
| const targetUrl = "https://duckduckgo.com" + encodeURIComponent(completeInstructions) + "&ia=chat"; | |
| // Escape the restricted iframe block natively | |
| window.open(targetUrl, "_blank"); | |
| } | |
| </script> | |
| </body> | |
| </html> | |