Changes to searchly1.scroll.pub

root

22 days ago

Initial commit

body.html

Changed around line 1
+ 
+   Searchly
+ 
+ 
+   
+     
+     
+     
+   
+   
+ 
+ 
+   Searchly - Inspired by simplicity
+ 

index.scroll

Changed around line 1
+ buildHtml
+ baseUrl https://searchly.scroll.pub
+ metaTags
+ editButton /edit.html
+ title Searchly - A Simple Search Engine
+ style.css
+ body.html
+ script.js

prompt.json

Changed around line 1
+ {
+   "id": "e27a4b89-73ef-43ae-b7aa-93dbeddb6945",
+   "object": "chat.completion",
+   "created": 1735615078,
+   "model": "deepseek-chat",
+   "choices": [
+     {
+       "index": 0,
+       "message": {
+         "role": "assistant",
+         "content": "---domain---\nsearchly.scroll.pub\n---index.scroll---\nbuildHtml\nbaseUrl https://searchly.scroll.pub\nmetaTags\neditButton /edit.html\ntitle Searchly - A Simple Search Engine\nstyle.css\nbody.html\nscript.js\n---body.html---\n\n  Searchly\n\n\n  \n    \n    
\n    \n  
\n  
\n\n\n  Searchly - Inspired by simplicity
\n\n---style.css---\n:root {\n  --primary-color: #4285f4;\n  --secondary-color: #34a853;\n  --background-color: #f8f9fa;\n  --text-color: #202124;\n  --border-color: #dfe1e5;\n}\n\n* {\n  margin: 0;\n  padding: 0;\n  box-sizing: border-box;\n}\n\nbody {\n  font-family: 'Arial', sans-serif;\n  background-color: var(--background-color);\n  color: var(--text-color);\n  min-height: 100vh;\n  display: flex;\n  flex-direction: column;\n}\n\nheader {\n  text-align: center;\n  padding: 2rem 0;\n}\n\nh1 {\n  color: var(--primary-color);\n  font-size: 3rem;\n  font-weight: bold;\n}\n\n.search-container {\n  max-width: 600px;\n  margin: 2rem auto;\n  position: relative;\n}\n\n#search-input {\n  width: 100%;\n  padding: 1rem;\n  border: 1px solid var(--border-color);\n  border-radius: 24px;\n  font-size: 1rem;\n  outline: none;\n  transition: all 0.3s ease;\n}\n\n#search-input:focus {\n  border-color: var(--primary-color);\n  box-shadow: 0 0 8px rgba(66, 133, 244, 0.3);\n}\n\n#suggestions {\n  position: absolute;\n  width: 100%;\n  background: white;\n  border: 1px solid var(--border-color);\n  border-top: none;\n  border-radius: 0 0 24px 24px;\n  z-index: 100;\n  display: none;\n}\n\n.suggestion-item {\n  padding: 0.5rem 1rem;\n  cursor: pointer;\n  transition: background-color 0.2s;\n}\n\n.suggestion-item:hover {\n  background-color: var(--background-color);\n}\n\n#search-button {\n  display: block;\n  margin: 1rem auto;\n  padding: 0.75rem 2rem;\n  background-color: var(--primary-color);\n  color: white;\n  border: none;\n  border-radius: 24px;\n  font-size: 1rem;\n  cursor: pointer;\n  transition: background-color 0.3s;\n}\n\n#search-button:hover {\n  background-color: var(--secondary-color);\n}\n\n#results {\n  max-width: 800px;\n  margin: 2rem auto;\n  padding: 0 1rem;\n}\n\n.result-item {\n  margin-bottom: 1.5rem;\n}\n\n.result-title {\n  color: var(--primary-color);\n  font-size: 1.2rem;\n  text-decoration: none;\n}\n\n.result-title:hover {\n  text-decoration: underline;\n}\n\n.result-snippet {\n  color: var(--text-color);\n  margin-top: 0.5rem;\n}\n\nfooter {\n  text-align: center;\n  padding: 1rem;\n  margin-top: auto;\n}\n\n@media (max-width: 768px) {\n  h1 {\n    font-size: 2rem;\n  }\n\n  .search-container {\n    padding: 0 1rem;\n  }\n}\n---script.js---\nconst searchInput = document.getElementById('search-input');\nconst suggestionsDiv = document.getElementById('suggestions');\nconst searchButton = document.getElementById('search-button');\nconst resultsDiv = document.getElementById('results');\n\nconst dummySuggestions = [\n  'JavaScript tutorials',\n  'CSS animations',\n  'HTML5 features',\n  'Web development trends',\n  'Responsive design techniques',\n  'Frontend frameworks',\n  'Backend development',\n  'Full stack development',\n  'Web accessibility guidelines',\n  'Progressive web apps'\n];\n\nconst dummyResults = [\n  {\n    title: 'JavaScript Tutorial - W3Schools',\n    url: '#',\n    snippet: 'JavaScript is the programming language of the Web. JavaScript is easy to learn. This tutorial will teach you JavaScript from basic to advanced.'\n  },\n  {\n    title: 'Learn JavaScript - freeCodeCamp',\n    url: '#',\n    snippet: 'Learn JavaScript and Javascript arrays to build interactive websites and pages that adapt to every device. Add dynamic behavior, store information, and handle requests and responses.'\n  },\n  {\n    title: 'The Modern JavaScript Tutorial',\n    url: '#',\n    snippet: 'How it\\'s done now. From the basics to advanced topics with simple, but detailed explanations. Main course contains 2 parts which cover JavaScript as a programming language and working with a browser.'\n  }\n];\n\nsearchInput.addEventListener('input', () => {\n  const query = searchInput.value.toLowerCase();\n  if (query.length > 0) {\n    const filteredSuggestions = dummySuggestions.filter(suggestion =>\n      suggestion.toLowerCase().includes(query)\n    );\n    showSuggestions(filteredSuggestions);\n  } else {\n    hideSuggestions();\n  }\n});\n\nfunction showSuggestions(suggestions) {\n  suggestionsDiv.innerHTML = suggestions\n    .map(suggestion => `${suggestion}
`)\n    .join('');\n  suggestionsDiv.style.display = 'block';\n}\n\nfunction hideSuggestions() {\n  suggestionsDiv.style.display = 'none';\n}\n\nsuggestionsDiv.addEventListener('click', (e) => {\n  if (e.target.classList.contains('suggestion-item')) {\n    searchInput.value = e.target.textContent;\n    hideSuggestions();\n    performSearch();\n  }\n});\n\nsearchButton.addEventListener('click', performSearch);\n\nfunction performSearch() {\n  const query = searchInput.value;\n  if (query) {\n    // Simulate search results\n    resultsDiv.innerHTML = dummyResults\n      .map(result => `\n        \n          ${result.title}\n          ${result.snippet}
\n        
\n      `)\n      .join('');\n  } else {\n    resultsDiv.innerHTML = 'Please enter a search term.
';\n  }\n}\n---end---"
+       },
+       "logprobs": null,
+       "finish_reason": "stop"
+     }
+   ],
+   "usage": {
+     "prompt_tokens": 252,
+     "completion_tokens": 1452,
+     "total_tokens": 1704,
+     "prompt_cache_hit_tokens": 0,
+     "prompt_cache_miss_tokens": 252
+   },
+   "system_fingerprint": "fp_f1afce2943"
+ }

readme.scroll

Changed around line 1

+ # searchly1.scroll.pub

+ Website generated by DeepSeek from prompt: 创建一个模仿谷歌的搜索网站，输入词后要有 sug,点击搜索要显示结果

script.js

Changed around line 1
+ const searchInput = document.getElementById('search-input');
+ const suggestionsDiv = document.getElementById('suggestions');
+ const searchButton = document.getElementById('search-button');
+ const resultsDiv = document.getElementById('results');
+ 
+ const dummySuggestions = [
+   'JavaScript tutorials',
+   'CSS animations',
+   'HTML5 features',
+   'Web development trends',
+   'Responsive design techniques',
+   'Frontend frameworks',
+   'Backend development',
+   'Full stack development',
+   'Web accessibility guidelines',
+   'Progressive web apps'
+ ];
+ 
+ const dummyResults = [
+   {
+     title: 'JavaScript Tutorial - W3Schools',
+     url: '#',
+     snippet: 'JavaScript is the programming language of the Web. JavaScript is easy to learn. This tutorial will teach you JavaScript from basic to advanced.'
+   },
+   {
+     title: 'Learn JavaScript - freeCodeCamp',
+     url: '#',
+     snippet: 'Learn JavaScript and Javascript arrays to build interactive websites and pages that adapt to every device. Add dynamic behavior, store information, and handle requests and responses.'
+   },
+   {
+     title: 'The Modern JavaScript Tutorial',
+     url: '#',
+     snippet: 'How it\'s done now. From the basics to advanced topics with simple, but detailed explanations. Main course contains 2 parts which cover JavaScript as a programming language and working with a browser.'
+   }
+ ];
+ 
+ searchInput.addEventListener('input', () => {
+   const query = searchInput.value.toLowerCase();
+   if (query.length > 0) {
+     const filteredSuggestions = dummySuggestions.filter(suggestion =>
+       suggestion.toLowerCase().includes(query)
+     );
+     showSuggestions(filteredSuggestions);
+   } else {
+     hideSuggestions();
+   }
+ });
+ 
+ function showSuggestions(suggestions) {
+   suggestionsDiv.innerHTML = suggestions
+     .map(suggestion => `${suggestion}
`)
+     .join('');
+   suggestionsDiv.style.display = 'block';
+ }
+ 
+ function hideSuggestions() {
+   suggestionsDiv.style.display = 'none';
+ }
+ 
+ suggestionsDiv.addEventListener('click', (e) => {
+   if (e.target.classList.contains('suggestion-item')) {
+     searchInput.value = e.target.textContent;
+     hideSuggestions();
+     performSearch();
+   }
+ });
+ 
+ searchButton.addEventListener('click', performSearch);
+ 
+ function performSearch() {
+   const query = searchInput.value;
+   if (query) {
+     // Simulate search results
+     resultsDiv.innerHTML = dummyResults
+       .map(result => `
+         
+           ${result.title}
+           ${result.snippet}
+         
+       `)
+       .join('');
+   } else {
+     resultsDiv.innerHTML = 'Please enter a search term.
';
+   }
+ }

style.css

Changed around line 1
+ :root {
+   --primary-color: #4285f4;
+   --secondary-color: #34a853;
+   --background-color: #f8f9fa;
+   --text-color: #202124;
+   --border-color: #dfe1e5;
+ }
+ 
+ * {
+   margin: 0;
+   padding: 0;
+   box-sizing: border-box;
+ }
+ 
+ body {
+   font-family: 'Arial', sans-serif;
+   background-color: var(--background-color);
+   color: var(--text-color);
+   min-height: 100vh;
+   display: flex;
+   flex-direction: column;
+ }
+ 
+ header {
+   text-align: center;
+   padding: 2rem 0;
+ }
+ 
+ h1 {
+   color: var(--primary-color);
+   font-size: 3rem;
+   font-weight: bold;
+ }
+ 
+ .search-container {
+   max-width: 600px;
+   margin: 2rem auto;
+   position: relative;
+ }
+ 
+ #search-input {
+   width: 100%;
+   padding: 1rem;
+   border: 1px solid var(--border-color);
+   border-radius: 24px;
+   font-size: 1rem;
+   outline: none;
+   transition: all 0.3s ease;
+ }
+ 
+ #search-input:focus {
+   border-color: var(--primary-color);
+   box-shadow: 0 0 8px rgba(66, 133, 244, 0.3);
+ }
+ 
+ #suggestions {
+   position: absolute;
+   width: 100%;
+   background: white;
+   border: 1px solid var(--border-color);
+   border-top: none;
+   border-radius: 0 0 24px 24px;
+   z-index: 100;
+   display: none;
+ }
+ 
+ .suggestion-item {
+   padding: 0.5rem 1rem;
+   cursor: pointer;
+   transition: background-color 0.2s;
+ }
+ 
+ .suggestion-item:hover {
+   background-color: var(--background-color);
+ }
+ 
+ #search-button {
+   display: block;
+   margin: 1rem auto;
+   padding: 0.75rem 2rem;
+   background-color: var(--primary-color);
+   color: white;
+   border: none;
+   border-radius: 24px;
+   font-size: 1rem;
+   cursor: pointer;
+   transition: background-color 0.3s;
+ }
+ 
+ #search-button:hover {
+   background-color: var(--secondary-color);
+ }
+ 
+ #results {
+   max-width: 800px;
+   margin: 2rem auto;
+   padding: 0 1rem;
+ }
+ 
+ .result-item {
+   margin-bottom: 1.5rem;
+ }
+ 
+ .result-title {
+   color: var(--primary-color);
+   font-size: 1.2rem;
+   text-decoration: none;
+ }
+ 
+ .result-title:hover {
+   text-decoration: underline;
+ }
+ 
+ .result-snippet {
+   color: var(--text-color);
+   margin-top: 0.5rem;
+ }
+ 
+ footer {
+   text-align: center;
+   padding: 1rem;
+   margin-top: auto;
+ }
+ 
+ @media (max-width: 768px) {
+   h1 {
+     font-size: 2rem;
+   }
+ 
+   .search-container {
+     padding: 0 1rem;
+   }
+ }