🔨 AuctionsTable – Live Online Auctions & Bidding Platform
A modern, professional, single-page auction platform built with HTML, CSS, Bootstrap 5, jQuery, and SEO optimization. Fully responsive, feature-rich, and production-ready.
📋 Table of Contents
🎯 Overview
AuctionsTable is a modern, single-page auction platform built entirely with frontend technologies (HTML, CSS, JavaScript, jQuery, Bootstrap, and AJAX). It showcases simulated auctions with interactive bidding functionality, delivering a realistic auction experience without real-time backend integration.
The platform features a premium dark theme, smooth UI animations, an SEO-friendly structure, and a fully responsive design optimized for all devices.
Key Highlights
- ✨ Sleek Dark Theme: Black (#0a0a0f) + Professional Blue (#0d6efd)
- 🎬 Smooth Animations: Typing text, carousel fades, hover effects
- 📱 Fully Responsive: Mobile-first design with Bootstrap breakpoints
- ⚡ Lightweight: No unnecessary libraries (jQuery + Bootstrap only)
- 🔍 SEO Optimized: Meta tags, OG tags, JSON-LD, sitemap, robots.txt
- 🎨 Custom CSS: Linear gradients, filters, keyframes, premium scrollbar
✨ Features
Core Features
1. Hero Section with Carousel
- Bootstrap carousel with fade transition
- 3 locally-hosted WebP hero images
- Overlay with gradient background
- Typing animation (infinite loop)
- Call-to-action buttons
- Live statistics counters
2. Auction Categories
- 8 category cards (Electronics, Art, Jewelry, etc.)
- Hover effects with smooth transitions
- Responsive grid layout
- Icon and item count display
3. Active Auctions
- Filterable auction items (All, Electronics, Art, Jewelry, Vehicles)
- Real-time countdown timers (HH:MM:SS)
- Wishlist toggle (heart icon animation)
- Bootstrap Modal for item details
- 6 live auction items with image, title, bid amount
4. Item Details Modal
- Bootstrap modal popup
- Dynamic data population from data attributes
- Displays: Title, Image, Description, Current Bid
- "Place Bid" call-to-action button
5. Completed Auctions
- Bootstrap carousel (rotates through completed items)
- Winner information
- Final bid amounts
- Item details
6. Bid Section
- Dummy bid form with validation
- Input fields for bidder info and amount
- Submit button with loading state
- Success message display
7. About Us
- Company description
- Statistics (25+ years experience)
- About image with experience badge
- Key features list
8. Contact Us
- Contact form with validation
- Contact information cards
- Address, phone, email display
- Social media links
- Formspree API integration for backendless email delivery
- AJAX-powered submission for instant feedback (success/error) without page reload
9. Disclaimer
- Legal terms and conditions
- Platform policies
- Liability information
10. Authentication Modals (Login & Register)
- Login Modal: Email and password fields for user access
- Register Modal: Full registration form with validation
- Name, email, phone, password, confirm password fields
- Password strength indicator with progress bar
- Terms & Conditions checkbox
- Password Field Enhancements:
- Eye icon toggle for password visibility on all 3 password fields
- Smooth icon transitions (eye ↔ eye-slash)
- Styled button with hover effects and scale animation
- Professional styling with blue accent background
- Lost Password: Dedicated forgot password modal with email recovery
- Tab-based UI switching between Login and Register
11. Navigation & Footer
- Sticky navbar with active section highlighting
- Offcanvas mobile menu (opens from left)
- Comprehensive footer with links
- Newsletter signup form
- Social media icons
🏗️ Website Structure
Page Sections (Single Page, Sequential Order)
1. 🔨 NAVBAR (Sticky)
├── Logo & Branding
├── Desktop Navigation Links
└── Mobile Toggle (Offcanvas)
2. 🎬 HERO SECTION (#home)
├── Carousel Slideshow (3 images, fade transition)
├── Typing Animation Text
├── CTA Buttons (Explore / Bid Now)
└── Live Statistics (4 counters)
3. 🎯 CATEGORIES (#categories)
├── Section Badge
├── Title & Description
└── 8 Category Cards (Grid)
4. ⚡ ACTIVE AUCTIONS (#active-auctions)
├── Filter Buttons (All, Electronics, Art, etc.)
├── 6 Auction Items (Grid, 3-column)
├── Each Item Card:
│ ├── Image with hover overlay
│ ├── Wishlist button (heart icon)
│ ├── Title & description
│ ├── Current bid amount
│ ├── Countdown timer
│ └── "View Details" button (opens modal)
└── Item Details Modal (Bootstrap)
5. 🎪 COMPLETED AUCTIONS (#completed)
├── Section Badge
├── Title & Description
└── Carousel (rotates completed items)
6. 💰 BID SECTION (#bid)
├── Section Badge
├── Features List (left)
└── Bid Form (right)
├── Email input
├── Bid amount input
└── Submit button
7. ℹ️ ABOUT US (#about)
├── Image with badge (left)
└── Content (right)
├── Heading & description
├── 4 statistics boxes
└── "Get In Touch" button
8. 📧 CONTACT (#contact)
├── Contact Info Cards (left)
│ ├── Address
│ ├── Phone
│ └── Email
└── Contact Form (right)
├── Name, email, message fields
└── Submit button
9. ⚖️ DISCLAIMER (#disclaimer)
└── Legal content & policies
10. 👣 FOOTER
├── About & Social Links
├── Quick Links
├── Company Links
└── Newsletter Signup
File Structure
AuctionTable/
├── index.html # Main single-page HTML
├── README.md # This file
├── SECURITY.md # Security policy
├── LICENSE.txt # License information
├── robots.txt # SEO robots instructions
├── sitemap.xml # SEO sitemap
└── assets/
├── css/
│ └── style.css # All custom CSS
└── js/
└── script.js # All JavaScript/jQuery
💻 Tech Stack
Frontend
- HTML5: Semantic, structured markup
- CSS3: Custom styling with animations
- Bootstrap 5.3.2: Responsive grid, components, utilities
- jQuery 3.7.1: DOM manipulation, event handling
Design & Animation
- Linear Gradients: Section backgrounds
- CSS Filters: Image brightness, saturation
- Keyframe Animations: Cursor blink, hammer bounce, shimmer
- CSS Transitions: Smooth 0.35s cubic-bezier
- Transform Effects: Scale, rotate, translate
SEO & Metadata
- Meta Tags: Title, description, keywords, author
- Open Graph Tags: Social media sharing
- JSON-LD: Structured data (WebSite, Organization)
- Twitter Cards: Twitter sharing optimization
- Canonical Links: Duplicate content prevention
- sitemap.xml: Page map for search engines
- robots.txt: Crawler instructions
External Resources
- Google Fonts: Inter (body) + Orbitron (display)
- Bootstrap Icons: Icon library (1100+ icons)
- CDN: Bootstrap, jQuery via jsDelivr
- Local Assets: 24 WebP images optimized for web
🎨 Design Theme
Logo & Favicon
- Favicon: Professional SVG gavel icon representing the auction platform
- Loader Icon: Hammer emoji for the preloader animation
- Brand Colors: Blue (#0d6efd) and white on dark background
Color Palette
| Color | Hex | Usage |
|---|
| Dark Background | #0a0a0f | Main background |
| Card Background | #111118 | Card surfaces |
| Primary Blue | #0d6efd | Primary CTA, accents |
| Accent Blue | #3b82f6 | Alt accent color |
| Text White | #f0f0f5 | Primary text |
| Muted Text | rgba(240,240,245,0.5) | Secondary text |
Typography
- Body Font: Inter (300-900 weights)
- Clean, readable, professional
- Used for all body text
- Display Font: Orbitron (400-900 weights)
- Modern, tech-forward
- Used for headings, titles
Visual Features
-
Smooth Scrollbar
- Thin (6px width)
- Blue thumb with dark track
- Custom webkit styling
-
Selection Styling
- Blue background (#0d6efd)
- White text
- Premium feel
-
Box Shadows & Glow
- Subtle shadows on cards
- Text glow on headings
- Focus states on inputs
-
Gradients
gradient-1: Dark background gradientgradient-2: Card gradientgradient-blue: Blue accent gradient
🚀 Installation
Prerequisites
- Modern web browser (Chrome, Firefox, Safari, Edge)
- No build tools required (vanilla HTML/CSS/JS)
Setup
-
Clone or download the project
git clone https://github.com/ahmershahdev/auctions-table-onepage-frontend.git
cd auctions-table-onepage-frontend
-
Open in browser
- Simply open
index.html in your browser
- Or use a local server:
python -m http.server 8000
# Visit http://localhost:8000
-
View on live server (for development)
- VS Code: Install "Live Server" extension
- Right-click index.html → "Open with Live Server"
No Installation Required!
This is a static website - no npm packages, no build process, no database setup needed.
🔍 SEO & Metadata
Implemented SEO Features
Meta Tags
<title>AuctionsTable – Live Online Auctions & Bidding Platform</title>
<meta name="description" content="..." />
<meta name="keywords" content="auctions, online bidding, live auctions..." />
<meta name="robots" content="index, follow" />
<meta name="theme-color" content="#0d6efd" />
Open Graph (Social Sharing)
<meta property="og:type" content="website" />
<meta property="og:title" content="AuctionsTable..." />
<meta property="og:image" content="..." />
JSON-LD (Structured Data)
- WebSite schema
- Organization schema
- SearchAction schema
Twitter Card
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="..." />
Canonical Link
<link
rel="canonical"
href="https://auctionstable.ahmershah.dev/"
/>
Files
sitemap.xml: XML sitemap for search enginesrobots.txt: Crawler instructions and sitemap reference
⚙️ JavaScript Features
1. Preloader Animation
- Fade-out animation on page load
- Disables scrolling until loaded
- 2-second timeout fallback
2. Typing Animation
- Infinite loop through 5 different texts
- Character-by-character typing
- Auto-delete and cycle to next text
- Smooth timing (80ms type, 40ms delete)
3. Counter Animation
- Count-up from 0 to target number
- Triggers when preloader fades out
- Used for statistics display
- 30-frame animation (900ms total)
4. Auction Filter
- Click filter buttons to show/hide items
- Updates button styling (active state)
- Supports: All, Electronics, Art, Jewelry, Vehicles
5. Timer Countdown
- Decrements hours:minutes:seconds every 1 second
- Updates data attributes
- Displays in HH:MM:SS format
- Runs continuously
6. Wishlist Toggle
- Click heart icon to add/remove
- Toggles between empty and filled heart
- Changes button background color
- Smooth transition
7. Item Modal
- Bootstrap modal opens on "View Details" click
- Populates with data from button attributes
- Displays: Title, Image, Description, Current Bi