Spaces:

deepak191z
/

debugService2

Paused

App Files Files Community

deepak191z commited on Apr 2, 2025

Commit

9dae746

verified ·

1 Parent(s): ce6c0f3

Create view/index.html

Browse files

Files changed (1) hide show

view/index.html +320 -0

view/index.html ADDED Viewed

	@@ -0,0 +1,320 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>APK Debug</title>
+    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
+    <style>
+        #dropZone:hover {
+            background-color: #2d3748;
+            border-color: #d69e2e;
+        }
+        #progressBar {
+            transition: width 0.3s ease-in-out;
+        }
+        .loader {
+            border: 4px solid #f3f3f3;
+            border-top: 4px solid #d69e2e;
+            border-radius: 50%;
+            width: 48px;
+            height: 48px;
+            animation: spin 1s linear infinite;
+        }
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+        .container {
+            max-width: 1200px;
+            width: 100%;
+        }
+        @media (max-width: 640px) {
+            .container {
+                padding-left: 1rem;
+                padding-right: 1rem;
+            }
+            #dropZone {
+                padding: 1.5rem;
+            }
+        }
+    </style>
+</head>
+<body class="bg-gray-900 text-white min-h-screen flex flex-col">
+    <!-- Header -->
+    <header class="bg-gray-800 p-4 shadow-md">
+        <div class="container mx-auto flex justify-between items-center">
+            <h1 class="text-xl font-bold">APKDebug</h1>
+            <div class="text-sm bg-gray-700 px-3 py-1 rounded">VIP User</div>
+        </div>
+    </header>
+    <!-- Main Content -->
+    <main class="flex-1 container mx-auto p-4">
+        <!-- Tabs -->
+        <div class="flex space-x-2 mb-4">
+            <button id="uploadTab" class="flex-1 bg-yellow-600 text-white py-2 rounded-t-lg">Upload</button>
+            <button id="howItWorksTab" class="flex-1 bg-gray-700 text-white py-2 rounded-t-lg">How It Works</button>
+        </div>
+        <!-- Upload Section -->
+        <section id="uploadSection" class="bg-gray-800 p-6 rounded-b-lg rounded-tr-lg">
+            <div id="dropZone" class="border-2 border-dashed border-gray-500 p-6 text-center cursor-pointer">
+                <div class="flex justify-center mb-2">
+                    <svg class="w-8 h-8 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"></path>
+                    </svg>
+                </div>
+                <p class="text-gray-400">Click to upload or drag and drop</p>
+                <p class="text-gray-500 text-sm">Supported file: .APK</p>
+                <input type="file" id="fileInput" class="hidden" accept=".apk">
+            </div>
+            <p id="fileNameDisplay" class="mt-2 text-sm text-gray-400 text-center"></p>
+            <button id="submitBtn" class="mt-4 w-full bg-yellow-600 text-white py-2 rounded flex items-center justify-center">
+                <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path>
+                </svg>
+                Debug APK
+            </button>
+            <div id="progressContainer" class="mt-4 hidden">
+                <div class="w-full bg-gray-600 rounded-full h-2.5">
+                    <div id="progressBar" class="bg-yellow-600 h-2.5 rounded-full transition-all duration-300" style="width: 0%"></div>
+                </div>
+                <p id="progressText" class="text-sm text-gray-400 mt-1 text-center"></p>
+            </div>
+        </section>
+        <!-- Overlay for Processing -->
+        <div id="processingOverlay" class="fixed inset-0 bg-black bg-opacity-50 backdrop-blur-sm flex items-center justify-center hidden">
+            <div class="text-center">
+                <div class="loader border-t-4 border-yellow-600 rounded-full w-12 h-12 animate-spin mx-auto"></div>
+                <p class="mt-4 text-gray-300">Processing... Time remaining: <span id="timeLeft">2:00</span></p>
+            </div>
+        </div>
+        <!-- How It Works Section -->
+        <section id="howItWorksSection" class="bg-gray-800 p-6 rounded-b-lg rounded-tr-lg hidden">
+            <h3 class="text-lg font-semibold text-gray-300">How It Works</h3>
+            <p class="mt-2 text-gray-400">1. Upload your APK file by dragging it into the box or clicking to select.</p>
+            <p class="mt-1 text-gray-400">2. Click "Debug APK" and wait for the processing to complete.</p>
+            <p class="mt-1 text-gray-400">3. Download your debugged file from the Recent App Uploads section.</p>
+        </section>
+        <!-- Recent Uploads -->
+        <section class="mt-6">
+            <h3 class="text-lg font-semibold text-gray-300">Recent App Uploads</h3>
+            <div class="mt-2">
+                <input type="text" id="searchUploads" placeholder="Search uploads..." class="w-full bg-gray-700 text-gray-300 p-2 rounded">
+            </div>
+            <div id="recentUploads" class="mt-2 space-y-2">
+                <!-- Recent uploads will be populated by JavaScript -->
+            </div>
+        </section>
+        <!-- Error Alert -->
+        <div id="errorAlert" class="fixed bottom-4 left-1/2 transform -translate-x-1/2 bg-red-900 border border-red-700 text-red-300 px-4 py-3 rounded hidden">
+            <span id="errorMessage"></span>
+        </div>
+    <script>
+        document.addEventListener('DOMContentLoaded', () => {
+            const dropZone = document.getElementById('dropZone');
+            const fileInput = document.getElementById('fileInput');
+            const submitBtn = document.getElementById('submitBtn');
+            const progressContainer = document.getElementById('progressContainer');
+            const progressBar = document.getElementById('progressBar');
+            const progressText = document.getElementById('progressText');
+            const processingOverlay = document.getElementById('processingOverlay');
+            const timeLeft = document.getElementById('timeLeft');
+            const errorAlert = document.getElementById('errorAlert');
+            const errorMessage = document.getElementById('errorMessage');
+            const fileNameDisplay = document.getElementById('fileNameDisplay');
+            const uploadTab = document.getElementById('uploadTab');
+            const howItWorksTab = document.getElementById('howItWorksTab');
+            const uploadSection = document.getElementById('uploadSection');
+            const howItWorksSection = document.getElementById('howItWorksSection');
+            const recentUploads = document.getElementById('recentUploads');
+            const searchUploads = document.getElementById('searchUploads');
+            // Tab Switching
+            uploadTab.addEventListener('click', () => {
+                uploadTab.classList.add('bg-yellow-600');
+                uploadTab.classList.remove('bg-gray-700');
+                howItWorksTab.classList.add('bg-gray-700');
+                howItWorksTab.classList.remove('bg-yellow-600');
+                uploadSection.classList.remove('hidden');
+                howItWorksSection.classList.add('hidden');
+            });
+            howItWorksTab.addEventListener('click', () => {
+                howItWorksTab.classList.add('bg-yellow-600');
+                howItWorksTab.classList.remove('bg-gray-700');
+                uploadTab.classList.add('bg-gray-700');
+                uploadTab.classList.remove('bg-yellow-600');
+                howItWorksSection.classList.remove('hidden');
+                uploadSection.classList.add('hidden');
+            });
+            // Drag and Drop
+            dropZone.addEventListener('click', () => fileInput.click());
+            dropZone.addEventListener('dragover', (e) => {
+                e.preventDefault();
+                dropZone.classList.add('border-yellow-600');
+            });
+            dropZone.addEventListener('dragleave', () => dropZone.classList.remove('border-yellow-600'));
+            dropZone.addEventListener('drop', (e) => {
+                e.preventDefault();
+                dropZone.classList.remove('border-yellow-600');
+                fileInput.files = e.dataTransfer.files;
+                displayFileName();
+            });
+            fileInput.addEventListener('change', () => {
+                displayFileName();
+            });
+            // Submit Handler
+            submitBtn.addEventListener('click', () => {
+                if (!fileInput.files.length) {
+                    showError('Please select a file');
+                    return;
+                }
+                const file = fileInput.files[0];
+                if (file.size > 500 * 1024 * 1024) {
+                    showError('File size exceeds 500MB limit');
+                    return;
+                }
+                const formData = new FormData();
+                formData.append('file', file);
+                progressContainer.classList.remove('hidden');
+                progressText.textContent = 'Uploading...';
+                const xhr = new XMLHttpRequest();
+                xhr.open('POST', '/process/debug', true);
+                xhr.upload.onprogress = (event) => {
+                    if (event.lengthComputable) {
+                        const percent = Math.round((event.loaded * 100) / event.total);
+                        progressBar.style.width = `${percent}%`;
+                        progressText.textContent = `Uploading: ${percent}%`;
+                        if (percent === 100) {
+                            setTimeout(() => {
+                                progressContainer.classList.add('hidden');
+                                processingOverlay.classList.remove('hidden');
+                                startTimer();
+                            }, 500);
+                        }
+                    }
+                };
+                xhr.onload = () => {
+                    if (xhr.status === 200) {
+                        clearInterval(timerInterval);
+                        processingOverlay.classList.add('hidden');
+                        const blob = new Blob([xhr.response], { type: 'application/vnd.android.package-archive' });
+                        const url = window.URL.createObjectURL(blob);
+                        const filename = xhr.getResponseHeader('content-disposition')?.split('filename=')[1]?.replace(/"/g, '') || `${file.name}_debugged.apk`;
+                        addRecentUpload(file.name, filename, url);
+                    } else {
+                        const error = JSON.parse(xhr.responseText || '{}');
+                        showError(error.error || 'Failed to debug APK');
+                        resetUI();
+                    }
+                };
+                xhr.onerror = () => {
+                    showError('An error occurred while uploading the file');
+                    resetUI();
+                };
+                xhr.responseType = 'blob';
+                xhr.send(formData);
+            });
+            // Timer function
+            let timerInterval;
+            function startTimer() {
+                let time = 120; // 2 minutes
+                timerInterval = setInterval(() => {
+                    const minutes = Math.floor(time / 60);
+                    const seconds = time % 60;
+                    timeLeft.textContent = `${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;
+                    time--;
+                    if (time < 0) clearInterval(timerInterval);
+                }, 1000);
+            }
+            // Display file name
+            function displayFileName() {
+                if (fileInput.files.length > 0) {
+                    fileNameDisplay.textContent = `Selected file: ${fileInput.files[0].name}`;
+                } else {
+                    fileNameDisplay.textContent = '';
+                }
+            }
+            // Add to recent uploads
+            function addRecentUpload(originalName, processedName, downloadUrl) {
+                const uploadItem = document.createElement('div');
+                uploadItem.className = 'bg-gray-700 p-3 rounded flex justify-between items-center';
+                const date = new Date().toLocaleDateString('en-US', { month: 'numeric', day: 'numeric', year: 'numeric' });
+                uploadItem.innerHTML = `
+                    <div class="flex items-center">
+                        <img src="https://img.icons8.com/color/40/000000/android-os.png" alt="Android Icon" class="w-10 h-10 mr-3">
+                        <div>
+                            <p class="text-gray-300">${originalName}</p>
+                            <p class="text-gray-500 text-sm">Uploaded on ${date}</p>
+                        </div>
+                    </div>
+                    <a href="${downloadUrl}" download="${processedName}" class="bg-yellow-600 text-white px-3 py-1 rounded text-sm">
+                        Download
+                    </a>
+                `;
+                recentUploads.prepend(uploadItem);
+                if (recentUploads.children.length > 5) {
+                    recentUploads.removeChild(recentUploads.children[recentUploads.children.length - 1]);
+                }
+            }
+            // Search uploads
+            searchUploads.addEventListener('input', (e) => {
+                const searchTerm = e.target.value.toLowerCase();
+                const items = recentUploads.children;
+                for (let item of items) {
+                    const fileName = item.querySelector('p').textContent.toLowerCase();
+                    item.style.display = fileName.includes(searchTerm) ? '' : 'none';
+                }
+            });
+            // UI Helpers
+            function showError(message) {
+                errorAlert.classList.remove('hidden');
+                errorMessage.textContent = message;
+                setTimeout(() => errorAlert.classList.add('hidden'), 5000);
+            }
+            function resetUI() {
+                progressContainer.classList.add('hidden');
+                processingOverlay.classList.add('hidden');
+                progressBar.style.width = '0%';
+                progressText.textContent = '';
+                fileNameDisplay.textContent = '';
+            }
+        });
+    </script>
+</body>
+</html>