elegant-store.html - Site Store

The Elegant Site Store is a community-driven platform where users can submit, browse, and discover beautiful websites created by the BLACKICE community. It features real-time updates via Firebase and a modern glassmorphism design.

Overview

The Site Store provides:

Real-time website submission and display
Search functionality for finding sites
Firebase Realtime Database integration
Admin mode for site management
Glassmorphism UI with dark space theme
Responsive grid layout

Key Features

Submit Sites

Users can submit their own websites with title, URL, icon, and description through an elegant modal interface.

Real-time Updates

Firebase Realtime Database ensures instant updates when new sites are added or modified.

Search Filter

Live search functionality filters sites by title as you type.

Admin Controls

Admin mode (?admin=elite) enables editing and deletion of site entries.

User Interface

The header uses a floating “nav island” design:

.nav-island {
  position: sticky;
  top: 16px;
  background: rgba(10, 10, 12, 0.7);
  backdrop-filter: blur(16px);
  border-radius: 99px;  /* Pill shape */
  padding: 12px 24px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
}

Features:

Sticky positioning (stays at top when scrolling)
Glassmorphism with backdrop blur
Pill-shaped border radius
Gradient text logo
Submit button and back link

Search Interface

The search bar features a dark semi-transparent background with focus states that highlight with the accent color (#3b82f6).

<div class="controls">
  <div class="search-wrap">
    <input id="q" type="search" class="search-input" 
           placeholder="Search for inspiration..." />
  </div>
</div>

Site Card Design

Glass Card Structure

Glass Effect

Semi-transparent background with border creates floating glass appearance.

Icon Display

56x56px icon box with gradient background. Shows first letter if no image provided.

Hover Animation

Cards lift up and scale slightly on hover with smooth cubic-bezier transitions.

Visit Button

Translucent button with hover states opens site in new tab.

Card HTML Structure

<article class="card">
  <div class="card-header">
    <div class="icon-box">
      <!-- Image or first letter -->
    </div>
    <div class="meta">
      <h3>Site Title</h3>
      <p>Site description (2-line clamp)</p>
    </div>
    <!-- Admin buttons (if admin mode) -->
  </div>
  <div class="actions">
    <a href="url" target="_blank" class="visit-btn">Visit Site →</a>
  </div>
</article>

Firebase Integration

Database Configuration

const firebaseConfig = {
  apiKey: "AIzaSyAp9kCBsDLnQEmR7wWHXwt3FB2T1zDtiqU",
  authDomain: "h-90-8a7c5.firebaseapp.com",
  databaseURL: "https://h-90-8a7c5-default-rtdb.firebaseio.com",
  projectId: "h-90-8a7c5",
  storageBucket: "h-90-8a7c5.firebasestorage.app",
  messagingSenderId: "367196609301",
  appId: "1:367196609301:web:156e24c1b4532c26af671c"
};

Real-time Data Sync

Firebase Realtime Database Operations

Read (onValue):

onValue(ref(db, 'sites'), (snap) => {
  const data = snap.val();
  // Render sites in real-time
});

Write (push):

await push(ref(db, 'sites'), {
  title, url, image, description,
  timestamp: Date.now()
});

Update:

await update(ref(db, `sites/${id}`), {
  title: newTitle
});

Delete (remove):

await remove(ref(db, `sites/${id}`));

The submission drawer uses a full-screen overlay with centered content:

.drawer {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(8px);
  display: none;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.drawer.open {
  display: flex;
  opacity: 1;
}

Form Fields

Project Name

Required field for the site’s display name (e.g., “Portfolio v2”)

Live URL

Required URL field for the website address (https://…)

Icon URL

Optional field for square PNG/JPG icon image

Description

Required textarea for brief functionality description

Hosting Hint

The form includes a helpful hint: “No URL? Request hosting here” with a link to the HTML submission page (Htmlsub.html).

Submit Logic

$('do-submit').onclick = async () => {
  const title = $('f-title').value.trim();
  const url = $('f-url').value.trim();
  const image = $('f-img').value.trim();
  const description = $('f-desc').value.trim();

  if(!title || !url || !description) {
    return alert('Please fill in required fields.');
  }

  try {
    await push(ref(db, 'sites'), {
      title, url, image, description,
      timestamp: Date.now()
    });
    drawer.classList.remove('open');
    // Clear form fields
  } catch(e) {
    alert(e.message);
  }
};

Admin Mode

Accessing Admin Mode

Admin features are enabled by adding ?admin=elite to the URL:

https://site-url/elegant-store.html?admin=elite

Admin Controls

Edit Name

Blue chip button opens modal to update site title. Only title field is editable in admin mode.

Delete Site

Red chip button with confirmation dialog permanently removes site from database.

Admin can edit site names through a separate modal:

window.openEditModal = (id) => {
  const site = sitesCache.find(s => s.id === id);
  if(site) {
    editIdField.value = site.id;
    editInput.value = site.title || '';
    editDrawer.classList.add('open');
    setTimeout(() => editInput.focus(), 100);
  }
};

Delete Function

window.delSite = async (id) => {
  if(confirm('Delete this site permanently?')) {
    await remove(ref(db, `sites/${id}`));
  }
}

Design System

Color Variables

:root {
  /* Deep Space Theme */
  --bg: #050507;
  --glass-panel: rgba(255, 255, 255, 0.03);
  --glass-border: rgba(255, 255, 255, 0.08);
  --glass-highlight: rgba(255, 255, 255, 0.15);
  
  --text-main: #ededed;
  --text-muted: #888899;
  
  --accent: #3b82f6;  /* Blue */
  --danger: #ef4444;  /* Red */
  
  --radius: 16px;
  --font-family: 'Inter', sans-serif;
}

Glassmorphism Effects

The site extensively uses glassmorphism with semi-transparent backgrounds, blur effects, and subtle borders for a modern, futuristic appearance.

Key Glass Elements:

Navigation bar
Site cards
Modal backgrounds
Button backgrounds
Input fields

Ambient Background

body {
  background-image: 
    radial-gradient(circle at 50% 0%, rgba(59, 130, 246, 0.15), transparent 60%),
    radial-gradient(circle at 80% 20%, rgba(139, 92, 246, 0.1), transparent 50%);
  background-attachment: fixed;
}

Grid Layout

Responsive Grid

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 24px;
  padding-bottom: 60px;
}

@media (max-width: 600px) {
  .grid {
    grid-template-columns: 1fr;
  }
}

Behavior:

Desktop: Multiple columns (auto-fill with 320px minimum)
Tablet: 2-3 columns depending on screen width
Mobile: Single column stack

Search Functionality

Live Search Implementation

function render(list) {
  const q = $('q').value.toLowerCase();
  const filtered = q 
    ? list.filter(s => (s.title||'').toLowerCase().includes(q)) 
    : list;
  
  grid.innerHTML = filtered.map(s => {
    // Render filtered cards
  }).join('');
}

$('q').oninput = () => render(sitesCache);

Features:

Case-insensitive search
Real-time filtering as you type
Searches site titles only
Shows all sites when search is empty

Icon Handling

Fallback System

Icon Display Logic

With Image: Display provided icon image URL
Image Error: If image fails to load, show first letter of title
No Image: Show first letter of title in gradient box

const iconHTML = img 
  ? `<img src="${img}" class="icon-img" 
          onerror="this.style.display='none';this.parentNode.innerText='${letter}'">`
  : letter;

Button System

Modern Glass Buttons

Default Button

Glass panel background Border with glass-border color Hover: lift and brighten

Primary Button

Solid white background Black text for contrast Glow effect on hover

Admin Chips

Color-coded by action Delete: red theme Edit: blue theme

Button Styles

.btn {
  border: 1px solid var(--glass-border);
  background: var(--glass-panel);
  padding: 10px 20px;
  border-radius: 99px;  /* Pill shape */
  font-weight: 600;
  transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.btn:hover {
  background: var(--glass-highlight);
  transform: translateY(-1px);
}

.btn.primary {
  background: var(--text-main);
  color: #000;
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.2);
}

Site Sorting

Timestamp-Based Ordering

sitesCache = Object.entries(data)
  .map(([k,v]) => ({id:k, ...v}))
  .sort((a,b) => b.timestamp - a.timestamp);

Sites are automatically sorted by submission time, with newest sites appearing first.

Loading State

The page includes a skeleton loader while fetching data:

<article class="card">
  <div class="card-header">
    <div class="icon-box"></div>
    <div class="meta">
      <h3 style="background:var(--glass-border); color:transparent; 
                  border-radius:4px; width:120px">Loading</h3>
      <p style="background:var(--glass-border); color:transparent; 
                 border-radius:4px; margin-top:6px; width:180px">
        Loading description content.
      </p>
    </div>
  </div>
</article>

Responsive Behavior

Mobile Optimization (≤600px)

Navigation

Removes pill shape, uses full-width bar at top Removes top border for seamless look

Grid Layout

Single column layout Full-width cards Optimized touch targets

@media (max-width: 600px) {
  header { top: 0; margin-bottom: 24px; }
  .nav-island {
    border-radius: 0;
    border-top: none;
    border-left: none;
    border-right: none;
  }
  .grid { grid-template-columns: 1fr; }
}

File Location

source/elegant-store.html

Home Page - Portal home
Projects - All BLACKICE projects
Blog - Articles and updates

Best Practices

Submitting Sites

Use descriptive, clear titles
Provide valid HTTPS URLs
Use square icon images (recommended: 256x256px)
Write concise descriptions (1-2 sentences)

Site Quality

Ensure your site is live and accessible
Use professional icons or logos
Test your submission before adding
Keep descriptions accurate and updated

Admin Management

Only use admin mode when necessary
Confirm before deleting sites
Edit titles for clarity, not content changes
Moderate submissions for quality

Hosting Help

Use the hosting request link if you need a URL
External hosting (Vercel, Netlify) works perfectly
Ensure sites load quickly for good UX
Use CDNs for images when possible

Get Started

Features

Components

Pages

​elegant-store.html - Site Store

​Overview

​Key Features

Submit Sites

Real-time Updates

Search Filter

Admin Controls

​User Interface

​Navigation Bar (Island Design)

​Search Interface

​Site Card Design

​Glass Card Structure

Glass Effect

Icon Display

Hover Animation

Visit Button

​Card HTML Structure

​Firebase Integration

​Database Configuration

​Real-time Data Sync

​Submit Modal

​Modal Design

​Form Fields

Project Name

Live URL

Icon URL

Description

​Hosting Hint

​Submit Logic

​Admin Mode

​Accessing Admin Mode

​Admin Controls

Edit Name

Delete Site

​Edit Modal

​Delete Function

​Design System

​Color Variables

​Glassmorphism Effects

​Ambient Background

​Grid Layout

​Responsive Grid

​Search Functionality

​Live Search Implementation

​Icon Handling

​Fallback System

​Button System

​Modern Glass Buttons

Default Button

Primary Button

Admin Chips

​Button Styles

​Site Sorting

​Timestamp-Based Ordering

​Loading State

​Responsive Behavior

​Mobile Optimization (≤600px)

Navigation

Grid Layout

​File Location

​Related Pages

​Best Practices

Submitting Sites

Site Quality

Admin Management

Hosting Help

Build docs developers (and LLMs) love

elegant-store.html - Site Store

Overview

Key Features

User Interface

Navigation Bar (Island Design)

Search Interface

Site Card Design

Glass Card Structure

Card HTML Structure

Firebase Integration

Database Configuration

Real-time Data Sync

Submit Modal

Modal Design

Form Fields

Hosting Hint

Submit Logic

Admin Mode

Accessing Admin Mode

Admin Controls

Edit Modal

Delete Function

Design System

Color Variables

Glassmorphism Effects

Ambient Background

Grid Layout

Responsive Grid

Search Functionality

Live Search Implementation

Icon Handling

Fallback System

Button System

Modern Glass Buttons

Button Styles

Site Sorting

Timestamp-Based Ordering

Loading State

Responsive Behavior

Mobile Optimization (≤600px)

File Location

Related Pages

Best Practices