Skip to main content

​
Home.html - Portal Interface

The Home.html page is the main entry point for BLACKICE Portal, providing a Vue.js-powered search interface with multi-engine support and direct navigation to all portal features.

​
Overview

The home page serves as the central hub of the BLACKICE Portal, featuring:
  • Multi-engine search functionality (Brave, Google, DuckDuckGo, Bing, and more)
  • Responsive search interface with real-time engine switching
  • Direct links to AI tools, productivity apps, and developer utilities
  • Modern gradient design with glassmorphism UI elements

​
Key Features

Smart Search

Search across multiple engines with a single interface. Supports Brave, Google, DuckDuckGo, Bing, Yahoo, Perplexity, and Wikipedia.

Vue.js Powered

Built with Vue 3 using reactive components and computed properties for smooth interactions.

Engine Selector

Dropdown selector lets users switch between search engines on the fly. The current engine name is displayed for clarity.

Developer Mode

Built-in developer mode accessible through the interface for advanced users.

​
Page Structure

​
HTML Architecture

<div class="blackice-portal-wrapper">
  <div class="main-container">
    <div class="hero-section">
      <!-- Title and branding -->
      <div class="search-wrapper">
        <select class="engine-selector">
          <!-- Search engine options -->
        </select>
        <input type="text" class="search-input" />
        <div class="search-actions">
          <button class="search-button">Search</button>
        </div>
      </div>
    </div>
  </div>
</div>

​
Search Engines Supported

The home page integrates with these search engines:
  • Brave - Privacy-focused search (default)
  • Google - Comprehensive web search
  • DuckDuckGo - Privacy-respecting search
  • Bing - Microsoft’s search engine
  • Yahoo - Classic search portal
  • Perplexity - AI-powered search
  • Wikipedia - Encyclopedia search

​
User Interface Elements

​
Search Wrapper

The main search interface includes:
  • Engine Selector: Dropdown menu with visual engine names
  • Search Input: Text field with keyboard shortcuts (Enter to search)
  • Search Button: Initiates search with current query and engine

​
Navigation

Users can navigate from the home page to:
  • Projects showcase (projects.html)
  • Blog section (blog/ directory)
  • Site store (elegant-store.html)
  • Development tools and utilities

​
Technical Implementation

​
Vue.js Setup

The page uses Vue 3 with the Composition API, implementing reactive state management for search queries and engine selection.
Key Vue Features:
  • ref() for reactive search query and selected engine index
  • computed() for derived current engine state
  • onMounted() lifecycle hook for initialization
  • Event handlers for search submission

​
Search Functionality

const engines = [
  { name: 'Brave', value: 'brave', url: 'https://search.brave.com/search' },
  { name: 'Google', value: 'google', url: 'https://www.google.com/search' },
  // ... more engines
];

function handleSearch() {
  const query = searchQuery.value;
  const engine = currentEngine.value;
  window.open(`${engine.url}?q=${encodeURIComponent(query)}`, '_blank');
}

​
Styling & Design

The home page features a modern design system:
  • Gradient Background: Multi-color gradient (purple to blue) for visual appeal
  • Glassmorphism: Translucent elements with backdrop blur
  • Responsive Layout: Adapts to mobile, tablet, and desktop screens
  • Smooth Animations: Hover effects and transitions on interactive elements

​
Color Scheme

Primary

Purple gradient (#975af4 → #2f7cf8 → #78aafa → #934cff)

Background

Dark theme (#161a20) for better contrast

Text

Light gray (#bab9b9) for readability

​
Integration with Portal

​
Module System

The page uses ES modules with import maps: 
"imports": {
  "vue": "https://cdn.jsdelivr.net/npm/vue@3/dist/vue.runtime.esm-browser.prod.js",
  "react": "https://esm.sh/react",
  "react-dom": "https://esm.sh/react-dom",
  "livecodes/vue": "https://cdn.jsdelivr.net/npm/[email protected]/vue.js"
}

​
SEO & Metadata

The page includes comprehensive metadata:
  • Title: “BlackICE Portal — AI, Productivity & Web Tools Platform”
  • Description: Platform overview for search engines
  • Schema.org: Structured data for software application
  • Author: BlackICE organization
The page uses JSON-LD structured data to help search engines understand the portal as a productivity web application.

​
User Experience Flow

  1. Landing: User arrives at Home.html
  2. Engine Selection: Choose preferred search engine from dropdown
  3. Query Entry: Type search query in input field
  4. Search Execution: Click search or press Enter
  5. Results: New tab opens with search results from selected engine
  6. Navigation: Access other portal features via navigation links

​
File Location

source/Home.html

​
Related Pages

​
Best Practices

Using the Home Page

  • Default search engine is Brave for privacy
  • Press Enter in search field for quick searches
  • Use the engine selector to try different search providers
  • The interface adapts to your screen size automatically

Build docs developers (and LLMs) love

Get started for freeTalk to us