vonMungo/github-python-magic-wand

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>GitHub Python Importer</title>7    <script src="https://cdn.tailwindcss.com"></script>8    <script src="https://unpkg.com/feather-icons"></script>9    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>10    <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.dots.min.js"></script>11    <style>12        .code-block {13            font-family: 'Courier New', monospace;14            background-color: #1e293b;15            color: #f8fafc;16            border-radius: 0.5rem;17            padding: 1.5rem;18            overflow-x: auto;19        }20        .btn-hover-effect {21            transition: all 0.3s ease;22            transform: translateY(0);23        }24        .btn-hover-effect:hover {25            transform: translateY(-2px);26            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);27        }28    </style>29</head>30<body class="bg-gradient-to-br from-indigo-900 via-purple-900 to-gray-900 min-h-screen" id="vanta-bg">31    <div class="container mx-auto px-4 py-12">32        <div class="max-w-4xl mx-auto">33            <div class="text-center mb-12">34                <div class="inline-block bg-indigo-600/20 p-3 rounded-full mb-4">35                    <i data-feather="github" class="w-12 h-12 text-indigo-400"></i>36                </div>37                <h1 class="text-4xl md:text-5xl font-bold text-white mb-2">GitHub Python Magic Wand</h1>38                <p class="text-xl text-indigo-200 max-w-2xl mx-auto">Fetch and run Python code directly from GitHub repositories</p>39            </div>40 41            <div class="bg-white/10 backdrop-blur-md rounded-xl shadow-2xl overflow-hidden border border-white/20">42                <div class="p-6 md:p-8">43                    <div class="flex flex-col md:flex-row gap-6">44                        <div class="flex-1">45                            <h2 class="text-2xl font-semibold text-white mb-4">Import Python Code</h2>46                            <p class="text-indigo-100 mb-6">Enter a GitHub repository URL below to extract Python code and execute it (in a safe environment).</p>47                            <div class="space-y-4">48                                <div>49                                    <label class="block text-sm font-medium text-indigo-200 mb-1">GitHub Repository URL</label>50                                    <div class="flex">51                                        <input type="text" placeholder="https://github.com/username/repo" 52                                            class="flex-1 px-4 py-3 rounded-l-lg bg-gray-800 text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-indigo-500">53                                        <button class="btn-hover-effect bg-indigo-600 hover:bg-indigo-700 text-white px-6 py-3 rounded-r-lg font-medium flex items-center">54                                            <i data-feather="search" class="w-5 h-5 mr-2"></i> Fetch55                                        </button>56                                    </div>57                                </div>58 59                                <div class="border-t border-white/10 pt-4">60                                    <label class="block text-sm font-medium text-indigo-200 mb-2">Or Upload ZIP File</label>61                                    <div class="flex items-center justify-center w-full">62                                        <label for="dropzone-file" class="flex flex-col items-center justify-center w-full h-32 border-2 border-gray-300 border-dashed rounded-lg cursor-pointer bg-gray-700/50 hover:bg-gray-700/70">63                                            <div class="flex flex-col items-center justify-center pt-5 pb-6">64                                                <i data-feather="upload-cloud" class="w-8 h-8 mb-3 text-indigo-400"></i>65                                                <p class="mb-2 text-sm text-indigo-200">Click to upload or drag and drop</p>66                                                <p class="text-xs text-indigo-300">ZIP file containing GitHub repository</p>67                                            </div>68                                            <input id="dropzone-file" type="file" class="hidden" accept=".zip" />69                                        </label>70                                    </div>71                                </div>72                                73                                <div>74                                    <label class="block text-sm font-medium text-indigo-200 mb-1">File Path (optional)</label>75                                    <input type="text" placeholder="src/main.py" 76                                        class="w-full px-4 py-3 rounded-lg bg-gray-800 text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-indigo-500">77                                </div>78                            </div>79</div>80                        81                        <div class="flex-1">82                            <h2 class="text-2xl font-semibold text-white mb-4">How It Works</h2>83                            <div class="bg-gray-900/50 rounded-lg p-4 mb-4">84                                <div class="flex items-center space-x-2 text-indigo-400 mb-2">85                                    <i data-feather="info" class="w-5 h-5"></i>86                                    <span class="font-medium">Important Notes</span>87                                </div>88                                <ul class="text-indigo-100 space-y-2 text-sm">89                                    <li class="flex items-start">90                                        <i data-feather="check-circle" class="w-4 h-4 mt-0.5 mr-2 text-green-400"></i>91                                        <span>Only public repositories are supported</span>92                                    </li>93                                    <li class="flex items-start">94                                        <i data-feather="alert-triangle" class="w-4 h-4 mt-0.5 mr-2 text-yellow-400"></i>95                                        <span>Code runs in a sandboxed environment</span>96                                    </li>97                                    <li class="flex items-start">98                                        <i data-feather="lock" class="w-4 h-4 mt-0.5 mr-2 text-red-400"></i>99                                        <span>Never execute untrusted code locally</span>100                                    </li>101                                </ul>102                            </div>103                            104                            <div class="bg-white/5 border border-white/10 rounded-lg overflow-hidden">105                                <div class="bg-gray-800 px-4 py-2 text-sm text-gray-300 font-mono flex items-center">106                                    <span class="flex-1">Example Usage</span>107                                    <button class="text-indigo-400 hover:text-indigo-300">108                                        <i data-feather="copy" class="w-4 h-4"></i>109                                    </button>110                                </div>111                                <div class="p-4 text-sm">112                                    <div class="code-block">113                                        <span class="text-green-400"># Fetch a specific file</span><br>114                                        <span class="text-blue-400">import</span> requests<br><br>115                                        <span class="text-purple-400">url</span> = <span class="text-yellow-300">"https://github.com/user/repo/blob/main/script.py"</span><br>116                                        <span class="text-purple-400">response</span> = requests.<span class="text-blue-400">get</span>(url)<br>117                                        <span class="text-blue-400">exec</span>(response.text)118                                    </div>119                                </div>120                            </div>121                        </div>122                    </div>123                </div>124                125                <div class="bg-gray-900/50 px-6 py-4 border-t border-white/10">126                    <div class="flex flex-col md:flex-row md:items-center md:justify-between">127                        <div class="text-indigo-300 text-sm mb-2 md:mb-0">128                            <i data-feather="shield" class="inline w-4 h-4 mr-1"></i>129                            Secure execution environment130                        </div>131                        <div class="flex space-x-4">132                            <a href="#" class="text-indigo-400 hover:text-indigo-300 text-sm flex items-center">133                                <i data-feather="book" class="w-4 h-4 mr-1"></i> Docs134                            </a>135                            <a href="#" class="text-indigo-400 hover:text-indigo-300 text-sm flex items-center">136                                <i data-feather="github" class="w-4 h-4 mr-1"></i> GitHub137                            </a>138                            <a href="#" class="text-indigo-400 hover:text-indigo-300 text-sm flex items-center">139                                <i data-feather="help-circle" class="w-4 h-4 mr-1"></i> Support140                            </a>141                        </div>142                    </div>143                </div>144            </div>145            146            <div class="mt-12 grid grid-cols-1 md:grid-cols-3 gap-6">147                <div class="bg-white/5 backdrop-blur-sm rounded-xl p-6 border border-white/10 hover:border-indigo-400/30 transition-all">148                    <div class="bg-indigo-500/10 w-12 h-12 rounded-lg flex items-center justify-center mb-4">149                        <i data-feather="code" class="w-6 h-6 text-indigo-400"></i>150                    </div>151                    <h3 class="text-xl font-semibold text-white mb-2">Code Extraction</h3>152                    <p class="text-indigo-100">Easily extract Python code from any public GitHub repository with direct file support.</p>153                </div>154                155                <div class="bg-white/5 backdrop-blur-sm rounded-xl p-6 border border-white/10 hover:border-indigo-400/30 transition-all">156                    <div class="bg-indigo-500/10 w-12 h-12 rounded-lg flex items-center justify-center mb-4">157                        <i data-feather="shield" class="w-6 h-6 text-indigo-400"></i>158                    </div>159                    <h3 class="text-xl font-semibold text-white mb-2">Safe Execution</h3>160                    <p class="text-indigo-100">All code runs in an isolated environment to protect your system from malicious scripts.</p>161                </div>162                163                <div class="bg-white/5 backdrop-blur-sm rounded-xl p-6 border border-white/10 hover:border-indigo-400/30 transition-all">164                    <div class="bg-indigo-500/10 w-12 h-12 rounded-lg flex items-center justify-center mb-4">165                        <i data-feather="zap" class="w-6 h-6 text-indigo-400"></i>166                    </div>167                    <h3 class="text-xl font-semibold text-white mb-2">Quick Testing</h3>168                    <p class="text-indigo-100">Test GitHub Python scripts without cloning repositories or setting up environments.</p>169                </div>170            </div>171        </div>172    </div>173 174    <script>175        // File upload handler176        const fileInput = document.getElementById('dropzone-file');177        fileInput.addEventListener('change', (e) => {178            const file = e.target.files[0];179            if (file && file.name.endsWith('.zip')) {180                const formData = new FormData();181                formData.append('zipfile', file);182                183                // Show loading state184                const uploadIcon = document.querySelector('[data-feather="upload-cloud"]');185                feather.replace();186                187                fetch('/extract', {188                    method: 'POST',189                    body: formData190                })191                .then(response => response.json())192                .then(data => {193                    if (data.success) {194                        alert('Repository extracted successfully!');195                        // You can add code here to display the extracted files196                    } else {197                        alert('Error: ' + data.message);198                    }199                })200                .catch(error => {201                    console.error('Error:', error);202                    alert('Failed to upload and extract ZIP file');203                })204                .finally(() => {205                    // Reset the input206                    fileInput.value = '';207                    feather.replace();208                });209            }210        });211 212        // Initialize Vanta.js background213        VANTA.DOTS({214el: "#vanta-bg",215            mouseControls: true,216            touchControls: true,217            gyroControls: false,218            minHeight: 200.00,219            minWidth: 200.00,220            scale: 1.00,221            scaleMobile: 1.00,222            color: 0x5b5bff,223            color2: 0x9d4dff,224            backgroundColor: 0x111827,225            spacing: 20.00226        });227        228        // Initialize feather icons229        feather.replace();230    </script>231</body>232</html>233