Spaces:

SilentShado
/

anycoder-e404f3ce

Running

File size: 13,821 Bytes

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>BlueSearch | Explore the Void</title>
  <style>
    /* --- RESET & VARIABLES --- */
    :root {
      --bg-deep: #0f172a;
      --bg-gradient: radial-gradient(circle at top, #1e293b, #020617);
      --primary: #3b82f6;
      --primary-hover: #60a5fa;
      --accent: #0ea5e9;
      --glass: rgba(255, 255, 255, 0.05);
      --glass-border: rgba(255, 255, 255, 0.1);
      --text-main: #f8fafc;
      --text-muted: #94a3b8;
      --font-sans: system-ui, -apple-system, sans-serif;
      --font-mono: 'Courier New', Courier, monospace;
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      background: var(--bg-deep);
      background-image: var(--bg-gradient);
      color: var(--text-main);
      font-family: var(--font-sans);
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      overflow-x: hidden;
    }

    /* --- BACKGROUND ANIMATION --- */
    .bg-orb {
      position: absolute;
      border-radius: 50%;
      filter: blur(80px);
      z-index: -1;
      opacity: 0.4;
      animation: floatOrb 10s infinite ease-in-out;
    }

    .orb-1 {
      width: 300px;
      height: 300px;
      background: var(--primary);
      top: -50px;
      left: -50px;
    }

    .orb-2 {
      width: 400px;
      height: 400px;
      background: #4f46e5;
      bottom: -100px;
      right: -100px;
      animation-delay: -5s;
    }

    @keyframes floatOrb {
      0%, 100% { transform: translate(0, 0); }
      50% { transform: translate(30px, 50px); }
    }

    /* --- HEADER --- */
    header {
      padding: 1.5rem 2rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      position: relative;
      z-index: 10;
    }

    .brand {
      font-weight: 800;
      font-size: 1.5rem;
      letter-spacing: -0.05em;
      display: flex;
      align-items: center;
      gap: 12px;
      color: white;
    }

    .brand span {
      color: var(--primary);
    }

    .anycoder-link {
      font-size: 0.85rem;
      color: var(--text-muted);
      text-decoration: none;
      padding: 0.5rem 1rem;
      border: 1px solid var(--glass-border);
      border-radius: 20px;
      transition: all 0.3s ease;
      background: var(--glass);
      backdrop-filter: blur(5px);
    }

    .anycoder-link:hover {
      background: var(--primary);
      color: white;
      border-color: var(--primary);
      box-shadow: 0 0 20px rgba(59, 130, 246, 0.4);
    }

    /* --- MAIN CONTENT --- */
    main {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 2rem;
      position: relative;
      z-index: 1;
    }

    /* Search Container */
    .search-container {
      width: 100%;
      max-width: 700px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2rem;
    }

    .logo-area {
      text-align: center;
      margin-bottom: 1rem;
    }

    .logo-area h1 {
      font-size: 4rem;
      font-weight: 900;
      background: linear-gradient(135deg, #fff 0%, var(--primary) 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      margin-bottom: 0.5rem;
      letter-spacing: -2px;
    }

    .logo-area p {
      color: var(--text-muted);
      font-size: 1.1rem;
    }

    /* Search Bar Styling */
    .search-wrapper {
      width: 100%;
      position: relative;
      group: 'search';
    }

    .search-bar {
      width: 100%;
      padding: 1.2rem 1.5rem;
      padding-right: 4rem; /* Space for button */
      font-size: 1.1rem;
      background: rgba(15, 23, 42, 0.6);
      border: 1px solid var(--glass-border);
      border-radius: 50px;
      color: white;
      outline: none;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
      backdrop-filter: blur(10px);
    }

    .search-bar:focus {
      background: rgba(15, 23, 42, 0.9);
      border-color: var(--primary);
      box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.15), 0 10px 15px -3px rgba(0, 0, 0, 0.3);
      transform: translateY(-2px);
    }

    .search-btn {
      position: absolute;
      right: 10px;
      top: 50%;
      transform: translateY(-50%);
      width: 44px;
      height: 44px;
      border-radius: 50%;
      border: none;
      background: var(--primary);
      color: white;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.2s ease;
    }

    .search-btn:hover {
      background: var(--primary-hover);
      transform: translateY(-50%) scale(1.1);
    }

    .search-btn:active {
      transform: translateY(-50%) scale(0.95);
    }

    /* Results Area */
    .results-container {
      width: 100%;
      margin-top: 2rem;
      opacity: 0;
      transform: translateY(20px);
      transition: all 0.5s ease;
      pointer-events: none; /* Hidden initially */
    }

    .results-container.active {
      opacity: 1;
      transform: translateY(0);
      pointer-events: all;
    }

    .result-stats {
      font-size: 0.85rem;
      color: var(--text-muted);
      margin-bottom: 1rem;
      padding-left: 1rem;
    }

    .result-item {
      background: var(--glass);
      border: 1px solid var(--glass-border);
      padding: 1.5rem;
      border-radius: 12px;
      margin-bottom: 1rem;
      transition: transform 0.2s ease, background 0.2s ease;
      cursor: pointer;
      animation: slideIn 0.4s ease forwards;
      opacity: 0;
    }

    .result-item:hover {
      background: rgba(255, 255, 255, 0.08);
      transform: translateX(5px);
      border-color: rgba(59, 130, 246, 0.3);
    }

    .result-link {
      color: var(--primary);
      font-size: 0.9rem;
      margin-bottom: 0.25rem;
      display: block;
      text-decoration: none;
    }

    .result-title {
      color: var(--text-main);
      font-size: 1.25rem;
      font-weight: 600;
      margin-bottom: 0.5rem;
      display: block;
    }

    .result-snippet {
      color: var(--text-muted);
      font-size: 0.95rem;
      line-height: 1.5;
    }

    /* Loading Spinner */
    .loader {
      display: none;
      width: 24px;
      height: 24px;
      border: 3px solid rgba(255,255,255,0.3);
      border-radius: 50%;
      border-top-color: #fff;
      animation: spin 1s ease-in-out infinite;
    }

    @keyframes spin {
      to { transform: rotate(360deg); }
    }

    @keyframes slideIn {
      to { opacity: 1; transform: translateY(0); }
    }

    /* Footer */
    footer {
      padding: 1.5rem;
      text-align: center;
      color: var(--text-muted);
      font-size: 0.85rem;
      border-top: 1px solid var(--glass-border);
      background: rgba(2, 6, 23, 0.5);
    }

    /* Responsive */
    @media (max-width: 600px) {
      .logo-area h1 { font-size: 3rem; }
      .search-bar { padding: 1rem; font-size: 1rem; }
      header { padding: 1rem; }
    }
  </style>
</head>

<body>

  <!-- Background Elements -->
  <div class="bg-orb orb-1"></div>
  <div class="bg-orb orb-2"></div>

  <header>
    <div class="brand">
      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <circle cx="11" cy="11" r="8"></circle>
        <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
      </svg>
      BLUE<span>SEARCH</span>
    </div>
    <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="anycoder-link">
      Built with anycoder
    </a>
  </header>

  <main>
    <div class="search-container">
      
      <div class="logo-area">
        <h1>BlueSearch</h1>
        <p>Explore the digital void</p>
      </div>

      <div class="search-wrapper">
        <input type="text" class="search-bar" id="searchInput" placeholder="Search for projects, ideas, or data..." autocomplete="off">
        <button class="search-btn" id="searchBtn">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
            <circle cx="11" cy="11" r="8"></circle>
            <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
          </svg>
          <div class="loader" id="loader"></div>
        </button>
      </div>

      <div class="results-container" id="resultsContainer">
        <div class="result-stats" id="resultStats"></div>
        <div id="resultsList">
          <!-- Results injected here -->
        </div>
      </div>

    </div>
  </main>

  <footer>
    &copy; 2023 BlueSearch Engine. Privacy focused. Secure.
  </footer>

  <script>
    // Mock Database for the Search Engine
    const database = [
      {
        title: "Project Alpha: Neural Networks",
        url: "https://example.com/alpha",
        snippet: "Advanced neural network architecture designed for real-time data processing and pattern recognition in blue-themed environments."
      },
      {
        title: "Blue Ocean Strategy",
        url: "https://example.com/strategy",
        snippet: "A marketing metaphor that refers to the creation of a new market space, or 'Blue Ocean', rather than competing in an existing industry."
      },
      {
        title: "CSS Grid & Flexbox Mastery",
        url: "https://example.com/css-guide",
        snippet: "The ultimate guide to modern CSS layout techniques. Learn how to build responsive grids without frameworks."
      },
      {
        title: "JavaScript ES6+ Features",
        url: "https://example.com/js-es6",
        snippet: "Explore arrow functions, destructuring, template literals, and promises. Modernize your codebase today."
      },
      {
        title: "Cybersecurity Protocols 2024",
        url: "https://example.com/security",
        snippet: "New standards for encryption and data protection. Essential reading for system administrators."
      },
      {
        title: "The History of the Internet",
        url: "https://example.com/history",
        snippet: "From ARPANET to the World Wide Web. A comprehensive timeline of the digital revolution."
      },
      {
        title: "Minimalist UI Design Principles",
        url: "https://example.com/ui-design",
        snippet: "Less is more. How to create stunning user interfaces using whitespace, typography, and color theory."
      },
      {
        title: "Quantum Computing Basics",
        url: "https://example.com/quantum",
        snippet: "Understanding qubits, superposition, and entanglement. The future of computing is here."
      }
    ];

    const searchInput = document.getElementById('searchInput');
    const searchBtn = document.getElementById('searchBtn');
    const resultsContainer = document.getElementById('resultsContainer');
    const resultsList = document.getElementById('resultsList');
    const resultStats = document.getElementById('resultStats');
    const loader = document.getElementById('loader');
    const searchIcon = searchBtn.querySelector('svg');

    // Function to perform search
    function performSearch() {
      const query = searchInput.value.toLowerCase().trim();
      
      if (!query) return;

      // UI State: Loading
      searchIcon.style.display = 'none';
      loader.style.display = 'block';
      resultsContainer.classList.remove('active');
      resultsList.innerHTML = '';

      // Simulate network delay
      setTimeout(() => {
        // Filter database
        const results = database.filter(item => 
          item.title.toLowerCase().includes(query) || 
          item.snippet.toLowerCase().includes(query)
        );

        // UI State: Results
        loader.style.display = 'none';
        searchIcon.style.display = 'block';
        
        if (results.length > 0) {
          resultStats.textContent = `About ${results.length} results found (0.42 seconds)`;
          
          results.forEach((item, index) => {
            const resultHTML = `
              <div class="result-item" style="animation-delay: ${index * 0.1}s">
                <a href="${item.url}" class="result-link">${item.url}</a>
                <a href="${item.url}" class="result-title">${highlightMatch(item.title, query)}</a>
                <p class="result-snippet">${highlightMatch(item.snippet, query)}</p>
              </div>
            `;
            resultsList.innerHTML += resultHTML;
          });
        } else {
          resultStats.textContent = `No results found for "${query}"`;
          resultsList.innerHTML = `
            <div class="result-item">
              <p class="result-snippet">Try searching for "CSS", "Blue", "JavaScript", or "Security".</p>
            </div>
          `;
        }

        resultsContainer.classList.add('active');
      }, 600); // 600ms simulated delay
    }

    // Helper to highlight search terms
    function highlightMatch(text, query) {
      const regex = new RegExp(`(${query})`, 'gi');
      return text.replace(regex, '<span style="color: var(--primary-hover); font-weight:bold;">$1</span>');
    }

    // Event Listeners
    searchBtn.addEventListener('click', performSearch);
    
    searchInput.addEventListener('keypress', (e) => {
      if (e.key === 'Enter') {
        performSearch();
      }
    });

    // Optional: Real-time search as you type (debounced)
    let timeout = null;
    searchInput.addEventListener('input', () => {
      clearTimeout(timeout);
      if(searchInput.value.length > 0) {
        timeout = setTimeout(performSearch, 800);
      } else {
        resultsContainer.classList.remove('active');
      }
    });

  </script>
</body>

</html>