SimpleSearch

A very simple navigational search homepage with a background using Bing's image API and support for adding search engines on your own.

You can customize your own bookmark page by modifying the search engine and bookmarks in app.js. The project also provides a worker.js file, which you can deploy and host for free using Cloudflare Workers.

Features

• Multiple Search Engines: Support switching between Google, Bing, Baidu, DuckDuckGo, Yahoo, StartPage, Ask, SearXNG, FeloAI, Yandex, and Metaso
• Glass Morphism UI: Modern frosted glass design with daily Bing wallpapers
• Smart Caching: Background images are cached locally to reduce API calls
• Collapsible Bookmarks: Organized bookmark categories with expand/collapse functionality
• Keyboard Shortcuts:
  • Alt+S: Focus search input
  • Alt+1-9: Quick select search engines
  • Escape: Clear search input
• Accessibility: Full ARIA labels, keyboard navigation, and screen reader support
• Responsive Design: Compatible with various screen sizes from mobile to desktop
• Local Storage: Remembers your default search engine and bookmark category states
• Loading States: Smooth loading animations and error handling
• Version Display: Shows current version with GitHub link

Tech Stack

• HTML5/CSS3
• JavaScript
• Tailwind CSS + Flowbite UI
• Glass Morphism

Online Preview

https://es-v.github.io/SimpleSearch/

Interface Preview

Version History

You can check the APP_VERSION in app.js file to see it.

• v1.0.0: Initial release with basic functionality as shown in screenshots

• v1.1.0: Added support for more search engines

• v2.0.0: Changed bookmarks and search engines to be dynamically generated

• v2.0.1: Added the worker.js file, now you can deploy it in Cloudflare Workers

• v2.0.2: Changed bookmarks and search engines to be dynamically generated

• v2.0.3: Now bookmark categories can also be auto-generated. You just need to add new categories under bookmarks, including the name and the SVG code for the icon. If you use worker.js, pay attention to escaping the backticks (`).

• v2.0.4: Major improvements:

  • Fixed duplicate code and removed redundant setupBookmarkCategories() function
  • Added keyboard shortcuts (Alt+S, Alt+1-9, Escape)
  • Improved error handling for background and icon loading

• v2.1.0: Major improvements:

  • Remove unused CSS and JavaScript
  • 38% reduction in HTML files

Project Structure

worker.js             # Cloudflare Workers
index.html            # Main Page
Dockerfile            # Dockerfile
nginx.conf            # Nginx Conf
assets/
  img/                # Icon
    web.svg
    ...
  js/
    app.js            # Application Logic

Customized

Add a new search engine

Add a new search engine configuration to the searchEngines object in app.js:

const searchEngines = {
    //...
    newengine: {
        name: 'newengine',
        url: 'https://www.newengine.com/search',
        paramName: 'q',
        logo: 'https://www.newengine.com/favicon.ico'
    },
    //...
};

Then, buttons and icons will be dynamically generated on the HTML page.

Add new bookmark

Add a new bookmark item under the appropriate bookmark category:

const bookmarks = {
    //...
    favorite: [
        name: 'Favorite',
        icon: '<svg>...</svg>'
        {
            name: 'newTab',
            url: 'https://newTab.com',
            img: 'https://newTab.com/favicon.ico'
        },
    //...
    ],
//...
}

Then, buttons and icons will be dynamically generated on the HTML page.

License

MIT