| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Python Playground</title> |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <script src="https://unpkg.com/feather-icons"></script> |
| <style> |
| .code-block { |
| font-family: 'Courier New', monospace; |
| background-color: #f8f8f8; |
| border-radius: 4px; |
| padding: 16px; |
| overflow-x: auto; |
| } |
| .python-keyword { color: #0000ff; } |
| .python-string { color: #a31515; } |
| .python-comment { color: #008000; } |
| .python-builtin { color: #795e26; } |
| </style> |
| </head> |
| <body class="bg-gray-50 min-h-screen"> |
| <div class="container mx-auto px-4 py-8"> |
| <header class="mb-12"> |
| <div class="flex items-center justify-between"> |
| <div class="flex items-center space-x-4"> |
| <div class="w-12 h-12 rounded-full bg-yellow-400 flex items-center justify-center text-white"> |
| <i data-feather="code" class="w-6 h-6"></i> |
| </div> |
| <h1 class="text-3xl font-bold text-gray-800">Python Playground</h1> |
| </div> |
| <a href="builder.html" class="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 flex items-center"> |
| <i data-feather="layout" class="w-4 h-4 mr-2"></i> |
| Site Builder |
| </a> |
| </div> |
| <p class="mt-2 text-gray-600">Explore and run Python code directly in your browser</p> |
| </header> |
|
|
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-8"> |
| <div class="bg-white rounded-xl shadow-md p-6"> |
| <h2 class="text-xl font-semibold mb-4 text-gray-800">Code Editor</h2> |
| <textarea id="python-code" class="w-full h-96 p-4 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 font-mono" spellcheck="false"> |
| # Trainable Chat Bot |
| knowledge_base = {} |
|
|
| def train_bot(): |
| print("\nBot: Teach me something new!") |
| question = input("You say: ") |
| answer = input("I respond: ") |
| knowledge_base[question.lower()] = answer |
| print("Bot: Got it! I've learned something new.") |
|
|
| def save_knowledge(): |
| with open('bot_knowledge.txt', 'w') as f: |
| for q, a in knowledge_base.items(): |
| f.write(f"{q}|{a}\n") |
| print("Bot: My knowledge has been saved!") |
|
|
| def load_knowledge(): |
| try: |
| with open('bot_knowledge.txt', 'r') as f: |
| for line in f: |
| q, a = line.strip().split('|') |
| knowledge_base[q] = a |
| except FileNotFoundError: |
| pass |
|
|
| def chat_bot(): |
| load_knowledge() |
| print("Bot: Hi there! I'm a trainable BotBuddy. Type 'train' to teach me or 'quit' to exit.") |
| |
| while True: |
| message = input("\nYou: ").lower() |
| |
| if message == 'quit': |
| save_knowledge() |
| print("Bot: Goodbye! Thanks for chatting.") |
| break |
| elif message == 'train': |
| train_bot() |
| elif message in knowledge_base: |
| print(f"Bot: {knowledge_base[message]}") |
| else: |
| print("Bot: I don't know how to respond to that. Type 'train' to teach me!") |
|
|
| chat_bot() |
| </textarea> |
| <div class="mt-4 flex space-x-3"> |
| <button id="run-btn" class="px-6 py-2 bg-green-500 text-white rounded-lg hover:bg-green-600 flex items-center"> |
| <i data-feather="play" class="w-4 h-4 mr-2"></i> |
| Run Code |
| </button> |
| <button id="clear-btn" class="px-6 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 flex items-center"> |
| <i data-feather="trash-2" class="w-4 h-4 mr-2"></i> |
| Clear |
| </button> |
| </div> |
| <div class="mt-4 bg-blue-50 p-4 rounded-lg"> |
| <h3 class="font-medium text-blue-800 mb-2">How to use this bot:</h3> |
| <ul class="list-disc pl-5 space-y-1 text-blue-700"> |
| <li>Type normal messages to chat</li> |
| <li>Type 'train' to teach the bot new responses</li> |
| <li>Type 'quit' to end the session</li> |
| <li>The bot saves everything you teach it!</li> |
| </ul> |
| </div> |
| </div> |
|
|
| <div class="bg-white rounded-xl shadow-md p-6"> |
| <h2 class="text-xl font-semibold mb-4 text-gray-800">Output</h2> |
| <div id="output" class="h-96 bg-black text-green-400 p-4 rounded-lg overflow-y-auto font-mono"> |
| <p class="text-gray-400">Your output will appear here...</p> |
| </div> |
| <div class="mt-4"> |
| <h3 class="text-lg font-medium mb-2 text-gray-700">Python Resources</h3> |
| <ul class="space-y-2"> |
| <li><a href="https://docs.python.org/3/" target="_blank" class="text-blue-500 hover:underline">Python Documentation</a></li> |
| <li><a href="https://realpython.com/" target="_blank" class="text-blue-500 hover:underline">Real Python Tutorials</a></li> |
| <li><a href="https://www.pythoncheatsheet.org/" target="_blank" class="text-blue-500 hover:underline">Python Cheat Sheet</a></li> |
| </ul> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="mt-12 bg-white rounded-xl shadow-md p-6"> |
| <h2 class="text-xl font-semibold mb-4 text-gray-800">Example Snippets</h2> |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"> |
| <div class="border border-gray-200 rounded-lg p-4"> |
| <h3 class="font-medium text-gray-800 mb-2">Fibonacci Sequence</h3> |
| <div class="code-block"> |
| <span class="python-keyword">def</span> fib(n):<br> |
| <span class="python-keyword">if</span> n <= <span class="python-builtin">1</span>:<br> |
| <span class="python-keyword">return</span> n<br> |
| <span class="python-keyword">return</span> fib(n-<span class="python-builtin">1</span>) + fib(n-<span class="python-builtin">2</span>)<br><br> |
| <span class="python-comment"># Print first 10 Fibonacci numbers</span><br> |
| <span class="python-keyword">for</span> i <span class="python-keyword">in</span> <span class="python-builtin">range</span>(<span class="python-builtin">10</span>):<br> |
| <span class="python-builtin">print</span>(fib(i)) |
| </div> |
| </div> |
| <div class="border border-gray-200 rounded-lg p-4"> |
| <h3 class="font-medium text-gray-800 mb-2">List Comprehension</h3> |
| <div class="code-block"> |
| <span class="python-comment"># Squares of even numbers</span><br> |
| numbers = [<span class="python-builtin">1</span>, <span class="python-builtin">2</span>, <span class="python-builtin">3</span>, <span class="python-builtin">4</span>, <span class="python-builtin">5</span>, <span class="python-builtin">6</span>]<br> |
| squares = [x**<span class="python-builtin">2</span> <span class="python-keyword">for</span> x <span class="python-keyword">in</span> numbers <span class="python-keyword">if</span> x % <span class="python-builtin">2</span> == <span class="python-builtin">0</span>]<br><br> |
| <span class="python-builtin">print</span>(squares) <span class="python-comment"># Output: [4, 16, 36]</span> |
| </div> |
| </div> |
| <div class="border border-gray-200 rounded-lg p-4"> |
| <h3 class="font-medium text-gray-800 mb-2">API Request</h3> |
| <div class="code-block"> |
| <span class="python-keyword">import</span> requests<br><br> |
| <span class="python-comment"># Fetch data from JSONPlaceholder API</span><br> |
| response = requests.get(<span class="python-string">"https://jsonplaceholder.typicode.com/todos/1"</span>)<br> |
| data = response.json()<br><br> |
| <span class="python-builtin">print</span>(<span class="python-string">"Todo:"</span>, data[<span class="python-string">"title"</span>])<br> |
| <span class="python-builtin">print</span>(<span class="python-string">"Completed:"</span>, data[<span class="python-string">"completed"</span>]) |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| <script> |
| // Initialize feather icons |
| feather.replace(); |
| |
| // Run Python code |
| document.getElementById('run-btn').addEventListener('click', function() { |
| const code = document.getElementById('python-code').value; |
| const outputDiv = document.getElementById('output'); |
| |
| try { |
| // In a real implementation, you would send this to a backend Python interpreter |
| // For demo purposes, we'll simulate some output |
| outputDiv.innerHTML = ''; |
| |
| // Simulate different types of output |
| if (code.includes('print(')) { |
| if (code.includes("train_bot()")) { |
| outputDiv.innerHTML += '<p class="text-green-400">Bot: Teach me something new!</p>'; |
| outputDiv.innerHTML += '<p class="text-blue-400">You say: hello</p>'; |
| outputDiv.innerHTML += '<p class="text-blue-400">I respond: Hi there!</p>'; |
| outputDiv.innerHTML += '<p class="text-green-400">Bot: Got it! I\'ve learned something new.</p>'; |
| outputDiv.innerHTML += '<p class="text-blue-400">You: hello</p>'; |
| outputDiv.innerHTML += '<p class="text-green-400">Bot: Hi there!</p>'; |
| } else { |
| outputDiv.innerHTML += '<p class="text-green-400">Bot: Hi there! I\'m a trainable BotBuddy. Type \'train\' to teach me or \'quit\' to exit.</p>'; |
| outputDiv.innerHTML += '<p class="text-blue-400">You: hello</p>'; |
| outputDiv.innerHTML += '<p class="text-green-400">Bot: Hi there!</p>'; |
| outputDiv.innerHTML += '<p class="text-blue-400">You: quit</p>'; |
| outputDiv.innerHTML += '<p class="text-green-400">Bot: Goodbye! Thanks for chatting.</p>'; |
| } |
| } else if (code.includes('fib(')) { |
| outputDiv.innerHTML += '<p class="text-green-400">0</p><p class="text-green-400">1</p><p class="text-green-400">1</p><p class="text-green-400">2</p><p class="text-green-400">3</p><p class="text-green-400">5</p><p class="text-green-400">8</p><p class="text-green-400">13</p><p class="text-green-400">21</p><p class="text-green-400">34</p>'; |
| } else if (code.includes('requests.get(')) { |
| outputDiv.innerHTML += '<p class="text-green-400">Todo: delectus aut autem</p><p class="text-green-400">Completed: false</p>'; |
| } else { |
| outputDiv.innerHTML += '<p class="text-green-400">Code executed successfully (simulated)</p>'; |
| } |
| } catch (error) { |
| outputDiv.innerHTML = `<p class="text-red-400">Error: ${error.message}</p>`; |
| } |
| }); |
| |
| // Clear output |
| document.getElementById('clear-btn').addEventListener('click', function() { |
| document.getElementById('output').innerHTML = '<p class="text-gray-400">Your output will appear here...</p>'; |
| }); |
| </script> |
| </body> |
| </html> |
