Skip to content

Commit feb3f8e

Browse files
dev-odfdev-odf
authored
Add files via upload
1 parent 97988a0 commit feb3f8e

File tree

1 file changed

+164
-0
lines changed

1 file changed

+164
-0
lines changed

‎search.html

Lines changed: 164 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,164 @@
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>Search Results</title>
7+
<style>
8+
body {
9+
font-family: Arial, sans-serif;
10+
margin: 0;
11+
height: 100vh;
12+
display: flex;
13+
justify-content: flex-start;
14+
align-items: flex-start;
15+
flex-direction: column;
16+
padding: 20px;
17+
overflow-y: auto;
18+
}
19+
20+
h1 {
21+
text-align: center;
22+
margin-bottom: 20px;
23+
}
24+
25+
.result {
26+
border: 1px solid #ddd;
27+
border-radius: 5px;
28+
padding: 10px;
29+
margin-bottom: 10px;
30+
background-color: #f9f9f9;
31+
}
32+
33+
.result a {
34+
color: #007BFF;
35+
text-decoration: none;
36+
}
37+
38+
.result a:hover {
39+
text-decoration: underline;
40+
}
41+
42+
.results-container {
43+
width: 100%;
44+
max-width: 800px;
45+
margin-top: 20px;
46+
}
47+
48+
.search-bar {
49+
margin-bottom: 20px;
50+
display: flex;
51+
justify-content: center;
52+
align-items: center;
53+
gap: 10px;
54+
width: 100%;
55+
}
56+
57+
.search-bar input {
58+
padding: 10px;
59+
width: 60%;
60+
font-size: 16px;
61+
border-radius: 5px;
62+
border: 1px solid #ddd;
63+
}
64+
65+
.search-bar button {
66+
padding: 10px 20px;
67+
font-size: 16px;
68+
background-color: #007BFF;
69+
color: white;
70+
border: none;
71+
border-radius: 5px;
72+
cursor: pointer;
73+
}
74+
75+
.search-bar button:hover {
76+
background-color: #0056b3;
77+
}
78+
79+
#current-query {
80+
text-align: center;
81+
margin-bottom: 10px;
82+
}
83+
84+
</style>
85+
</head>
86+
<body>
87+
<h1>Search Results</h1>
88+
89+
<!-- Search Bar Section -->
90+
<div class="search-bar">
91+
<input type="text" id="search-input" placeholder="Enter a new prompt">
92+
<button onclick="submitNewQuery()">Search</button>
93+
</div>
94+
95+
<!-- Current query display -->
96+
<div id="current-query"></div>
97+
98+
<div class="results-container" id="results"></div>
99+
100+
<script>
101+
// Function to get the query parameter from the URL
102+
function getQueryParam(name) {
103+
const urlParams = new URLSearchParams(window.location.search);
104+
return urlParams.get(name);
105+
}
106+
107+
// Function to fetch Google search results using the query
108+
async function fetchResults(query) {
109+
const resultsContainer = document.getElementById("results");
110+
111+
const apiKey = "AIzaSyB4MpRxz5-hXpCb7VFDt-QHYDFI2lNiG6Q"; // Replace with your Google API key
112+
const cx = "63a43ae7328c8467c"; // Replace with your Custom Search Engine ID
113+
const apiUrl = `https://www.googleapis.com/customsearch/v1?key=${apiKey}&cx=${cx}&q=${encodeURIComponent(query)}`;
114+
115+
resultsContainer.innerHTML = "Loading...";
116+
117+
try {
118+
const response = await fetch(apiUrl);
119+
const data = await response.json();
120+
121+
resultsContainer.innerHTML = "";
122+
123+
if (data.items && data.items.length > 0) {
124+
data.items.forEach(item => {
125+
const resultDiv = document.createElement("div");
126+
resultDiv.classList.add("result");
127+
resultDiv.innerHTML = `
128+
<a href="${item.link}" target="_blank">
129+
<h3>${item.title}</h3>
130+
</a>
131+
<p>${item.snippet}</p>
132+
`;
133+
resultsContainer.appendChild(resultDiv);
134+
});
135+
} else {
136+
resultsContainer.innerHTML = `<p>No results found for "${query}".</p>`;
137+
}
138+
} catch (error) {
139+
resultsContainer.innerHTML = `<p>Error fetching results. Please try again later.</p>`;
140+
console.error(error);
141+
}
142+
}
143+
144+
// Function to handle the new query submission
145+
function submitNewQuery() {
146+
const query = document.getElementById("search-input").value;
147+
if (query) {
148+
// Navigate to the new URL with the new query
149+
window.location.href = `https://opendevsflow.xyz/search?q=${encodeURIComponent(query)}`;
150+
}
151+
}
152+
153+
// Get the search query from the URL and fetch results
154+
const query = getQueryParam("q");
155+
if (query) {
156+
document.getElementById("search-input").value = query; // Show current prompt in the input field
157+
document.getElementById("current-query").innerText = `Current Query: ${query}`;
158+
fetchResults(query);
159+
} else {
160+
document.getElementById("results").innerHTML = "<p>No search query provided.</p>";
161+
}
162+
</script>
163+
</body>
164+
</html>

0 commit comments

Comments
 (0)