flitrx commited on
Commit
0d505ec
·
verified ·
1 Parent(s): 0d66fe6

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +355 -19
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Ns
3
- emoji: 🚀
4
- colorFrom: blue
5
- colorTo: indigo
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: ns
3
+ emoji: 🐳
4
+ colorFrom: green
5
+ colorTo: yellow
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,355 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>NeonSearch - Futuristic Google Scraper</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
9
+ <style>
10
+ @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&family=Rajdhani:wght@300;500;700&display=swap');
11
+
12
+ :root {
13
+ --neon-blue: #00f3ff;
14
+ --neon-pink: #ff00ff;
15
+ --neon-purple: #9d00ff;
16
+ --dark-bg: #0a0a12;
17
+ --darker-bg: #050508;
18
+ --card-bg: #12121a;
19
+ }
20
+
21
+ body {
22
+ font-family: 'Rajdhani', sans-serif;
23
+ background-color: var(--dark-bg);
24
+ color: #e0e0e0;
25
+ min-height: 100vh;
26
+ }
27
+
28
+ h1, h2, h3 {
29
+ font-family: 'Orbitron', sans-serif;
30
+ }
31
+
32
+ .neon-text {
33
+ text-shadow: 0 0 5px var(--neon-blue), 0 0 10px var(--neon-blue);
34
+ color: var(--neon-blue);
35
+ }
36
+
37
+ .neon-pink {
38
+ text-shadow: 0 0 5px var(--neon-pink), 0 0 10px var(--neon-pink);
39
+ color: var(--neon-pink);
40
+ }
41
+
42
+ .neon-purple {
43
+ text-shadow: 0 0 5px var(--neon-purple), 0 0 10px var(--neon-purple);
44
+ color: var(--neon-purple);
45
+ }
46
+
47
+ .search-input {
48
+ background-color: var(--card-bg);
49
+ border: 1px solid #2a2a3a;
50
+ transition: all 0.3s ease;
51
+ }
52
+
53
+ .search-input:focus {
54
+ border-color: var(--neon-blue);
55
+ box-shadow: 0 0 10px rgba(0, 243, 255, 0.5);
56
+ }
57
+
58
+ .search-btn {
59
+ background: linear-gradient(45deg, var(--neon-purple), var(--neon-blue));
60
+ transition: all 0.3s ease;
61
+ }
62
+
63
+ .search-btn:hover {
64
+ box-shadow: 0 0 15px rgba(0, 243, 255, 0.7);
65
+ transform: translateY(-2px);
66
+ }
67
+
68
+ .result-card {
69
+ background-color: var(--card-bg);
70
+ border-left: 3px solid var(--neon-blue);
71
+ transition: all 0.3s ease;
72
+ }
73
+
74
+ .result-card:hover {
75
+ transform: translateY(-5px);
76
+ box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
77
+ border-left: 3px solid var(--neon-pink);
78
+ }
79
+
80
+ .pagination-btn {
81
+ background-color: var(--card-bg);
82
+ transition: all 0.3s ease;
83
+ }
84
+
85
+ .pagination-btn:hover {
86
+ background-color: var(--neon-purple);
87
+ color: white;
88
+ }
89
+
90
+ .active-page {
91
+ background-color: var(--neon-blue);
92
+ color: white;
93
+ }
94
+
95
+ .glow {
96
+ animation: glow 2s infinite alternate;
97
+ }
98
+
99
+ @keyframes glow {
100
+ from {
101
+ box-shadow: 0 0 5px var(--neon-blue);
102
+ }
103
+ to {
104
+ box-shadow: 0 0 20px var(--neon-blue);
105
+ }
106
+ }
107
+
108
+ .loading-dots::after {
109
+ content: '.';
110
+ animation: dots 1.5s steps(5, end) infinite;
111
+ }
112
+
113
+ @keyframes dots {
114
+ 0%, 20% {
115
+ color: rgba(0,0,0,0);
116
+ text-shadow: .25em 0 0 rgba(0,0,0,0), .5em 0 0 rgba(0,0,0,0);
117
+ }
118
+ 40% {
119
+ color: var(--neon-blue);
120
+ text-shadow: .25em 0 0 rgba(0,0,0,0), .5em 0 0 rgba(0,0,0,0);
121
+ }
122
+ 60% {
123
+ text-shadow: .25em 0 0 var(--neon-blue), .5em 0 0 rgba(0,0,0,0);
124
+ }
125
+ 80%, 100% {
126
+ text-shadow: .25em 0 0 var(--neon-blue), .5em 0 0 var(--neon-blue);
127
+ }
128
+ }
129
+ </style>
130
+ </head>
131
+ <body class="bg-gray-900">
132
+ <div class="container mx-auto px-4 py-8">
133
+ <!-- Header -->
134
+ <header class="text-center mb-12">
135
+ <h1 class="text-5xl font-bold neon-text mb-4">Neon<span class="neon-pink">Search</span></h1>
136
+ <p class="text-xl text-gray-400">The future of search is here</p>
137
+ <div class="w-24 h-1 bg-gradient-to-r from-purple-600 to-blue-500 mx-auto mt-4 rounded-full glow"></div>
138
+ </header>
139
+
140
+ <!-- Search Form -->
141
+ <div class="max-w-3xl mx-auto mb-16">
142
+ <form id="searchForm" class="flex flex-col md:flex-row gap-4">
143
+ <input
144
+ type="text"
145
+ id="searchQuery"
146
+ placeholder="Enter your search query..."
147
+ class="flex-grow px-6 py-4 rounded-lg search-input text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
148
+ required
149
+ >
150
+ <button
151
+ type="submit"
152
+ class="px-8 py-4 rounded-lg text-white font-bold uppercase tracking-wider search-btn flex items-center justify-center"
153
+ >
154
+ <i class="fas fa-search mr-2"></i> Search
155
+ </button>
156
+ </form>
157
+ </div>
158
+
159
+ <!-- Results Section -->
160
+ <div id="resultsSection" class="hidden">
161
+ <div class="flex justify-between items-center mb-6">
162
+ <h2 class="text-2xl font-bold neon-text">Search Results</h2>
163
+ <div id="resultCount" class="text-gray-400"></div>
164
+ </div>
165
+
166
+ <div id="searchResults" class="space-y-6 mb-8"></div>
167
+
168
+ <!-- Pagination -->
169
+ <div id="pagination" class="flex justify-center gap-2 mt-8"></div>
170
+ </div>
171
+
172
+ <!-- Loading Indicator -->
173
+ <div id="loadingIndicator" class="hidden text-center py-12">
174
+ <div class="inline-block text-4xl neon-text loading-dots">Processing</div>
175
+ </div>
176
+
177
+ <!-- Error Message -->
178
+ <div id="errorMessage" class="hidden text-center py-12">
179
+ <div class="inline-block text-2xl neon-pink">
180
+ <i class="fas fa-exclamation-triangle mr-2"></i>
181
+ <span id="errorText">An error occurred</span>
182
+ </div>
183
+ </div>
184
+ </div>
185
+
186
+ <footer class="bg-gray-800 py-6 mt-12">
187
+ <div class="container mx-auto px-4 text-center text-gray-400">
188
+ <p>Powered by Google Custom Search JSON API</p>
189
+ <p class="mt-2 text-sm">© 2023 NeonSearch - All rights reserved</p>
190
+ </div>
191
+ </footer>
192
+
193
+ <script>
194
+ const API_KEY = 'AIzaSyC1fp0n6L7A77Al5-ANoWHeXKtnJp8-bEs';
195
+ const CSE_ID = '919fdda0dd9034703';
196
+ let currentPage = 1;
197
+ let currentQuery = '';
198
+ let totalResults = 0;
199
+ const resultsPerPage = 10;
200
+
201
+ document.getElementById('searchForm').addEventListener('submit', function(e) {
202
+ e.preventDefault();
203
+ currentQuery = document.getElementById('searchQuery').value.trim();
204
+ if (currentQuery) {
205
+ currentPage = 1;
206
+ searchGoogle(currentQuery, currentPage);
207
+ }
208
+ });
209
+
210
+ function searchGoogle(query, page) {
211
+ // Show loading, hide other sections
212
+ document.getElementById('loadingIndicator').classList.remove('hidden');
213
+ document.getElementById('resultsSection').classList.add('hidden');
214
+ document.getElementById('errorMessage').classList.add('hidden');
215
+
216
+ const startIndex = (page - 1) * resultsPerPage + 1;
217
+ const url = `https://www.googleapis.com/customsearch/v1?q=${encodeURIComponent(query)}&key=${API_KEY}&cx=${CSE_ID}&start=${startIndex}`;
218
+
219
+ fetch(url)
220
+ .then(response => {
221
+ if (!response.ok) {
222
+ throw new Error('Network response was not ok');
223
+ }
224
+ return response.json();
225
+ })
226
+ .then(data => {
227
+ if (data.error) {
228
+ throw new Error(data.error.message || 'API error occurred');
229
+ }
230
+
231
+ totalResults = parseInt(data.searchInformation.totalResults) || 0;
232
+ displayResults(data.items || []);
233
+ updatePagination();
234
+
235
+ // Show results, hide loading
236
+ document.getElementById('loadingIndicator').classList.add('hidden');
237
+ document.getElementById('resultsSection').classList.remove('hidden');
238
+ })
239
+ .catch(error => {
240
+ console.error('Error:', error);
241
+ document.getElementById('loadingIndicator').classList.add('hidden');
242
+ document.getElementById('errorMessage').classList.remove('hidden');
243
+ document.getElementById('errorText').textContent = error.message || 'Failed to fetch results';
244
+ });
245
+ }
246
+
247
+ function displayResults(items) {
248
+ const resultsContainer = document.getElementById('searchResults');
249
+ const resultCountElement = document.getElementById('resultCount');
250
+
251
+ resultsContainer.innerHTML = '';
252
+
253
+ if (items.length === 0) {
254
+ resultsContainer.innerHTML = `
255
+ <div class="text-center py-12 text-gray-400">
256
+ <i class="fas fa-search-minus text-4xl mb-4"></i>
257
+ <p class="text-xl">No results found for your query</p>
258
+ </div>
259
+ `;
260
+ resultCountElement.textContent = '0 results';
261
+ return;
262
+ }
263
+
264
+ resultCountElement.textContent = `${totalResults.toLocaleString()} results`;
265
+
266
+ items.forEach(item => {
267
+ const resultElement = document.createElement('div');
268
+ resultElement.className = 'result-card p-6 rounded-lg hover:shadow-lg';
269
+
270
+ const title = item.title || 'No title';
271
+ const link = item.link || '#';
272
+ const snippet = item.snippet || 'No description available.';
273
+ const displayLink = new URL(link).hostname.replace('www.', '');
274
+
275
+ resultElement.innerHTML = `
276
+ <h3 class="text-xl font-bold mb-2">
277
+ <a href="${link}" class="text-blue-400 hover:text-blue-300 hover:underline" target="_blank" rel="noopener">${title}</a>
278
+ </h3>
279
+ <div class="text-green-400 text-sm mb-2">${displayLink}</div>
280
+ <p class="text-gray-300">${snippet}</p>
281
+ `;
282
+
283
+ resultsContainer.appendChild(resultElement);
284
+ });
285
+ }
286
+
287
+ function updatePagination() {
288
+ const paginationContainer = document.getElementById('pagination');
289
+ paginationContainer.innerHTML = '';
290
+
291
+ if (totalResults <= resultsPerPage) return;
292
+
293
+ const totalPages = Math.ceil(totalResults / resultsPerPage);
294
+ const maxVisiblePages = 5;
295
+ let startPage, endPage;
296
+
297
+ if (totalPages <= maxVisiblePages) {
298
+ startPage = 1;
299
+ endPage = totalPages;
300
+ } else {
301
+ const halfVisible = Math.floor(maxVisiblePages / 2);
302
+ if (currentPage <= halfVisible + 1) {
303
+ startPage = 1;
304
+ endPage = maxVisiblePages;
305
+ } else if (currentPage >= totalPages - halfVisible) {
306
+ startPage = totalPages - maxVisiblePages + 1;
307
+ endPage = totalPages;
308
+ } else {
309
+ startPage = currentPage - halfVisible;
310
+ endPage = currentPage + halfVisible;
311
+ }
312
+ }
313
+
314
+ // Previous button
315
+ if (currentPage > 1) {
316
+ const prevButton = document.createElement('button');
317
+ prevButton.className = 'px-4 py-2 rounded-lg pagination-btn';
318
+ prevButton.innerHTML = '<i class="fas fa-chevron-left mr-1"></i> Prev';
319
+ prevButton.addEventListener('click', () => {
320
+ currentPage--;
321
+ searchGoogle(currentQuery, currentPage);
322
+ window.scrollTo({ top: 0, behavior: 'smooth' });
323
+ });
324
+ paginationContainer.appendChild(prevButton);
325
+ }
326
+
327
+ // Page numbers
328
+ for (let i = startPage; i <= endPage; i++) {
329
+ const pageButton = document.createElement('button');
330
+ pageButton.className = `px-4 py-2 rounded-lg pagination-btn ${i === currentPage ? 'active-page' : ''}`;
331
+ pageButton.textContent = i;
332
+ pageButton.addEventListener('click', () => {
333
+ currentPage = i;
334
+ searchGoogle(currentQuery, currentPage);
335
+ window.scrollTo({ top: 0, behavior: 'smooth' });
336
+ });
337
+ paginationContainer.appendChild(pageButton);
338
+ }
339
+
340
+ // Next button
341
+ if (currentPage < totalPages) {
342
+ const nextButton = document.createElement('button');
343
+ nextButton.className = 'px-4 py-2 rounded-lg pagination-btn';
344
+ nextButton.innerHTML = 'Next <i class="fas fa-chevron-right ml-1"></i>';
345
+ nextButton.addEventListener('click', () => {
346
+ currentPage++;
347
+ searchGoogle(currentQuery, currentPage);
348
+ window.scrollTo({ top: 0, behavior: 'smooth' });
349
+ });
350
+ paginationContainer.appendChild(nextButton);
351
+ }
352
+ }
353
+ </script>
354
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=flitrx/ns" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
355
+ </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ make a site that scrapes google according to the users input qeuery and uses API key: AIzaSyC1fp0n6L7A77Al5-ANoWHeXKtnJp8-bEs and CSE_ID: 919fdda0dd9034703 This site shoudl have a techy futuristic and modern sleek feel with medium-dark colors accented with neon bright text