KJolt/pythonic-hello-world-printer
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>Python Hello World</title>7 <script src="https://cdn.tailwindcss.com"></script>8 <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>9 <script src="https://unpkg.com/feather-icons"></script>10 <style>11 .code-container {12 background-color: #1e293b;13 border-radius: 0.5rem;14 padding: 1.5rem;15 font-family: 'Courier New', monospace;16 color: #f8fafc;17 overflow-x: auto;18 }19 .code-keyword {20 color: #7dd3fc;21 }22 .code-string {23 color: #86efac;24 }25 .code-comment {26 color: #64748b;27 font-style: italic;28 }29 </style>30</head>31<body class="bg-gray-900 text-gray-100 min-h-screen flex flex-col items-center justify-center p-4">32 <div class="max-w-2xl w-full">33 <div class="flex items-center mb-6">34 <i data-feather="code" class="text-emerald-400 mr-3"></i>35 <h1 class="text-3xl font-bold text-emerald-400">Pythonic Hello World Printer</h1>36 </div>37 38 <div class="bg-gray-800 rounded-xl p-6 shadow-xl">39 <div class="flex items-center mb-4">40 <div class="h-3 w-3 bg-red-500 rounded-full mr-2"></div>41 <div class="h-3 w-3 bg-yellow-500 rounded-full mr-2"></div>42 <div class="h-3 w-3 bg-green-500 rounded-full"></div>43 <span class="ml-auto text-sm text-gray-400">hello_world.py</span>44 </div>45 46 <div class="code-container">47 <pre><code><span class="code-comment"># Simple Python program to print "Hello, World!"</span>48<span class="code-comment"># Follows Python best practices with clear structure</span>49 50<span class="code-keyword">def</span> <span class="text-purple-300">main</span>():51 <span class="code-comment"># Print the classic greeting to console</span>52 <span class="code-keyword">print</span>(<span class="code-string">"Hello, World!"</span>)53 54<span class="code-keyword">if</span> __name__ == <span class="code-string">"__main__"</span>:55 main()</code></pre>56 </div>57 58 <div class="mt-6 bg-gray-700 rounded-lg p-4">59 <div class="flex items-center mb-2">60 <i data-feather="terminal" class="text-amber-400 mr-2"></i>61 <h3 class="font-mono text-amber-400">Output</h3>62 </div>63 <div class="bg-gray-800 rounded px-4 py-2 font-mono text-green-300">64 Hello, World!65 </div>66 </div>67 </div>68 69 <div class="mt-8 text-center text-gray-400 text-sm">70 <p>Run this code in any Python environment to see the magic!</p>71 <div class="mt-2 flex justify-center space-x-4">72 <a href="#" class="text-emerald-400 hover:text-emerald-300 transition flex items-center">73 <i data-feather="download" class="mr-1"></i> Download74 </a>75 <a href="#" class="text-blue-400 hover:text-blue-300 transition flex items-center">76 <i data-feather="copy" class="mr-1"></i> Copy Code77 </a>78 </div>79 </div>80 </div>81 82 <script>83 feather.replace();84 85 // Simple animation for the code block86 document.querySelectorAll('.code-container pre').forEach((el, i) => {87 el.style.opacity = '0';88 setTimeout(() => {89 anime({90 targets: el,91 opacity: 1,92 duration: 800,93 easing: 'easeOutQuad'94 });95 }, i * 100);96 });97 </script>98</body>99</html>100