Hugging Face's logo

Spaces:
bbc123321
/
proxypirate-browser
Running

App Files Community
proxypirate-browser
File size: 4,813 Bytes 
ddb34b2
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
 
class CustomQuickLinks extends HTMLElement {
    connectedCallback() {
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                :host {
                    display: block;
                }
                .quick-links-container {
                    background-color: rgba(31, 41, 55, 0.8);
                    border-radius: 0.75rem;
                    padding: 1.5rem;
                    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
                }
                .links-title {
                    font-size: 1.125rem;
                    font-weight: 600;
                    margin-bottom: 1rem;
                    display: flex;
                    align-items: center;
                }
                .links-icon {
                    margin-right: 0.5rem;
                    color: #60a5fa;
                }
                .links-grid {
                    display: grid;
                    grid-template-columns: repeat(2, 1fr);
                    gap: 0.75rem;
                }
                .link-item {
                    display: flex;
                    align-items: center;
                    padding: 0.75rem;
                    border-radius: 0.5rem;
                    background-color: rgba(55, 65, 81, 0.8);
                    transition: background-color 0.2s;
                    cursor: pointer;
                }
                .link-item:hover {
                    background-color: rgba(75, 85, 99, 0.8);
                }
                .link-icon {
                    margin-right: 0.75rem;
                    color: #60a5fa;
                }
                .link-text {
                    font-size: 0.875rem;
                }
                .proxy-badge {
                    margin-left: auto;
                    font-size: 0.625rem;
                    padding: 0.125rem 0.375rem;
                    border-radius: 9999px;
                    background-color: rgba(59, 130, 246, 0.1);
                    color: #60a5fa;
                }
            </style>
            <div class="quick-links-container">
                <h3 class="links-title">
                    <i data-feather="zap" class="links-icon"></i>
                    Quick Links
                </h3>
                
                <div class="links-grid">
                    <div class="link-item" data-url="https://www.google.com">
                        <i data-feather="search" class="link-icon"></i>
                        <span class="link-text">Google</span>
                    </div>
                    <div class="link-item" data-url="https://www.youtube.com" data-proxy="true">
                        <i data-feather="youtube" class="link-icon"></i>
                        <span class="link-text">YouTube</span>
                        <span class="proxy-badge">Proxy</span>
                    </div>
                    <div class="link-item" data-url="https://www.wikipedia.org">
                        <i data-feather="book" class="link-icon"></i>
                        <span class="link-text">Wikipedia</span>
                    </div>
                    <div class="link-item" data-url="https://www.reddit.com" data-proxy="true">
                        <i data-feather="message-square" class="link-icon"></i>
                        <span class="link-text">Reddit</span>
                        <span class="proxy-badge">Proxy</span>
                    </div>
                    <div class="link-item" data-url="https://www.twitter.com">
                        <i data-feather="twitter" class="link-icon"></i>
                        <span class="link-text">Twitter</span>
                    </div>
                    <div class="link-item" data-url="https://www.github.com">
                        <i data-feather="github" class="link-icon"></i>
                        <span class="link-text">GitHub</span>
                    </div>
                </div>
            </div>
        `;
        
        // Add click handlers for quick links
        const linkItems = this.shadowRoot.querySelectorAll('.link-item');
        linkItems.forEach(item => {
            item.addEventListener('click', () => {
                const url = item.getAttribute('data-url');
                const useProxy = item.hasAttribute('data-proxy');
                
                this.dispatchEvent(new CustomEvent('quick-link-click', {
                    detail: {
                        url: url,
                        useProxy: useProxy
                    },
                    bubbles: true,
                    composed: true
                }));
            });
        });
    }
}

customElements.define('custom-quick-links', CustomQuickLinks);