File size: 5,040 Bytes
b2e74cb
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
// Main JavaScript for DroidDrop

class DroidDropApp {
    constructor() {
        this.init();
    }

    init() {
        this.setupEventListeners();
        this.initializeComponents();
        this.loadEmulators();
    }

    setupEventListeners() {
        // Launch emulator buttons
        document.addEventListener('click', (e) => {
            if (e.target.closest('button') && e.target.closest('button').textContent.includes('Launch Emulator')) {
                this.handleEmulatorLaunch(e);
            }
        });

        // Smooth scroll for anchor links
        document.addEventListener('click', (e) => {
            if (e.target.matches('a[href^="#"]')) {
                e.preventDefault();
                const target = document.querySelector(e.target.getAttribute('href'));
                if (target) {
                    target.scrollIntoView({ behavior: 'smooth' });
                }
            }
        });
    }

    initializeComponents() {
        // Initialize any third-party libraries or components
        console.log('DroidDrop initialized');
    }

    async loadEmulators() {
        try {
            // In a real implementation, this would fetch from an API
            const emulators = await this.fetchEmulators();
            this.renderEmulators(emulators);
        } catch (error) {
            console.error('Failed to load emulators:', error);
        }
    }

    async fetchEmulators() {
        // Mock data - in production, this would be an API call
        return [
            {
                id: 1,
                name: 'Pixel 6 Pro',
                androidVersion: 'Android 13',
                resolution: '1440x3120px',
                ram: '4GB',
                image: 'http://static.photos/technology/640x360/1',
                popular: true
            },
            {
                id: 2,
                name: 'Samsung Galaxy S23',
                androidVersion: 'Android 14',
                resolution: '1080x2340px',
                ram: '8GB',
                image: 'http://static.photos/technology/640x360/2',
                popular: false
            },
            {
                id: 3,
                name: 'OnePlus 11',
                androidVersion: 'Android 12',
                resolution: '1440x3216px',
                ram: '6GB',
                image: 'http://static.photos/technology/640x360/3',
                popular: false
            }
        ];
    }

    renderEmulators(emulators) {
        // This would update the emulator cards with dynamic data
        console.log('Emulators loaded:', emulators);
    }

    handleEmulatorLaunch(event) {
        const button = event.target.closest('button');
        const card = button.closest('.bg-white');
        const deviceName = card.querySelector('h3').textContent;

        // Show loading state
        const originalText = button.textContent;
        button.innerHTML = '<div class="loading-spinner mx-auto"></div>';
        button.disabled = true;

        // Simulate emulator launch
        setTimeout(() => {
            button.innerHTML = originalText;
            button.disabled = false;
            
            // Show success message
            this.showNotification(`Launching ${deviceName} emulator...`, 'success');
            
            // In a real implementation, this would redirect to the emulator page
            // window.location.href = `/emulator/${deviceName.toLowerCase().replace(/\s+/g, '-')}`;
        }, 2000);
    }

    showNotification(message, type = 'info') {
        // Create and show a toast notification
        const notification = document.createElement('div');
        notification.className = `fixed top-4 right-4 p-4 rounded-lg shadow-lg z-50 transform transition-all duration-300 ${
            type === 'success' ? 'bg-green-500 text-white' : 
            type === 'error' ? 'bg-red-500 text-white' : 
            'bg-blue-500 text-white'
        }`;
        notification.textContent = message;
        
        document.body.appendChild(notification);
        
        // Remove after 3 seconds
        setTimeout(() => {
            notification.remove();
        }, 3000);
    }
}

// Initialize the app when DOM is loaded
document.addEventListener('DOMContentLoaded', () => {
    new DroidDropApp();
});

// Utility functions
const utils = {
    formatDeviceName: (name) => {
        return name.replace(/\s+/g, '-').toLowerCase();
    },

    getRandomColor: () => {
        const colors = ['blue', 'purple', 'green', 'red', 'yellow'];
        return colors[Math.floor(Math.random() * colors.length)];
    },

    debounce: (func, wait) => {
        let timeout;
        return function executedFunction(...args) {
            const later = () => {
                clearTimeout(timeout);
                func(...args);
            };
            clearTimeout(timeout);
            timeout = setTimeout(later, wait);
        };
    }
};

// Export for use in other modules
window.DroidDropApp = DroidDropApp;
window.utils = utils;