# TechVault - Electronics Inventory Management System

## Project Overview

TechVault is a fully functional electronics inventory management system with a professional web interface. The system manages inventory for iPhones, Android phones, HP laptops, and various tech gadgets like smartwatches.

## Website Structure

### Pages (4 pages as required)

1. **index.html** - Home/Welcome Page
   - Introduction to TechVault
   - Featured products showcase
   - Category navigation
   - Rollover image effect demo
   - Invisible border layout table for categories

2. **products.html** - Products & Inventory Page
   - Complete product inventory with visible borders table
   - 12 products with prices and stock information
   - Featured product cards
   - Hyperlinked product images
   - Product details and "Add to Cart" functionality

3. **cart.html** - Shopping Cart & Checkout
   - Cart items display with data table (visible borders)
   - Order summary with layout table (invisible borders)
   - Comprehensive checkout form with:
     - 2 Text fields (first name, last name)
     - 2 Radio buttons (shipping method)
     - 2 Checkboxes (insurance, gift wrap, newsletter, terms)
   - Promo code field
   - Order notes textarea

4. **contact.html** - Contact Us & Support
   - Contact information (phone, email, address)
   - Contact form with:
     - 2 Text fields (name, email)
     - 2 Radio buttons (inquiry subject)
     - 2 Checkboxes (contact method, newsletter)
   - FAQ section
   - Social media links

## CSS Features

### External Stylesheet (styles.css)
- Professional color scheme with teal (#1abc9c) accent
- Responsive design with media queries
- Comprehensive form styling
- Table styling for both visible and invisible borders
- Navigation menu with hover effects
- Product card styling with shadows and transitions

## Required Elements Checklist

### ✓ Links
- **Absolute Links**: Links to external sites (Facebook, Twitter, Apple.com, etc.)
- **Relative Links**: Navigation between pages (index.html, products.html, cart.html, contact.html)

### ✓ Images (4 types implemented)
1. **Rollover Image**: phone.jpg - scales on hover with border color change
2. **Hyperlinked Image**: Product images (iphone.jpg, android.jpg, laptop.jpg, smartwatch.jpg) - clickable image links
3. **Styled Image with Box Model & Positioning**: featured-image class on index.html with:
   - Padding (15px)
   - Border (5px solid #e74c3c)
   - Margin (20px auto)
   - Background-color
   - Box-shadow with inset
   - Positioning properties

### ✓ Tables (2 tables)
1. **Data Table with Visible Borders** (class="data-table"):
   - Inventory table on products.html
   - Cart items table on cart.html
   - 2px solid borders on all cells
   - Alternating row colors
   - Hover effects

2. **Layout Table with Invisible Borders** (class="layout-table"):
   - Category showcase on index.html
   - Order summary on cart.html
   - No borders (border: none)
   - Used for content organization

### ✓ Forms (cart.html & contact.html)
**Cart Form includes:**
- Text Fields: first name, last name, email, phone, promo code
- Radio Buttons: shipping method (3 options)
- Checkboxes: insurance, gift wrap, newsletter, terms agreement

**Contact Form includes:**
- Text Fields: name, email, phone, order number
- Radio Buttons: inquiry subject (5 options)
- Checkboxes: contact method (3 options), follow-up, newsletter, survey
- Textarea: message field

### ✓ Styling
- Professional CSS with consistent color scheme
- Hover effects on links and buttons
- Form validation styling
- Responsive design
- Box model concepts: margin, padding, border, background
- Positioning: relative, absolute positioning on featured image
- Text formatting: different font sizes, weights, colors

### ✓ Navigation
- Sticky navigation bar on every page
- Active page highlighting
- Breadcrumb navigation for location awareness
- Consistent navigation structure across all pages
- Clear visual feedback on hover

### ✓ Page Titles
All pages have proper titles (no "Untitled Document"):
- "TechVault - Electronics Inventory Management System"
- "Products - TechVault Electronics Inventory"
- "Shopping Cart - TechVault Electronics Inventory"
- "Contact Us - TechVault Electronics Inventory"

## File Structure

```
Electronics-Inventory/
├── index.html          (Home page)
├── products.html       (Products/Inventory page)
├── cart.html          (Shopping Cart page)
├── contact.html       (Contact Us page)
├── styles.css         (External stylesheet)
├── README.txt         (This file)
└── images/
    ├── phone.jpg      (Rollover image)
    ├── iphone.jpg     (Hyperlinked product image)
    ├── android.jpg    (Hyperlinked product image)
    ├── laptop.jpg     (Hyperlinked product image)
    └── smartwatch.jpg (Featured styled image)
```

## How to Use

### Local Testing
1. Save all files to a directory on your computer
2. Open index.html in a web browser
3. Navigate through all pages using the navigation menu
4. Test all form submissions (they will navigate to a thank-you placeholder)
5. Hover over images to see rollover effects
6. Click product images to test hyperlinks

### Testing Checklist
- [ ] All 4 pages load correctly
- [ ] Navigation menu works on every page
- [ ] All links (absolute and relative) are functional
- [ ] Forms can be filled out
- [ ] Rollover image effect works (phone.jpg)
- [ ] Product images are clickable
- [ ] Featured image displays with proper styling
- [ ] Both table types display correctly
- [ ] Page titles appear in browser tabs
- [ ] Responsive design works on different screen sizes

### Deployment to Free Hosting

For free hosting services like Geocity, Tripod, Angelfire, or Google Sites:

1. **Create Account**: Sign up at your chosen hosting service
2. **Upload Files**: Use FTP or the web interface to upload:
   - All .html files
   - styles.css
   - images/ folder with all image files
3. **Set Index Page**: Most hosts automatically set index.html as the home page
4. **Test Online**: Visit your hosted URL and verify all functionality

#### Popular Free Hosting Options:
- **Geocities (Yahoo)**: https://geocities.com/
- **Tripod**: https://www.tripod.com/
- **Angelfire**: https://www.angelfire.com/
- **Google Sites**: https://sites.google.com/
- **Netlify**: https://www.netlify.com/
- **GitHub Pages**: https://pages.github.com/

## Functionality Details

### Product Inventory
- iPhone 15 Pro Max, iPhone 15
- Samsung Galaxy S24 Ultra, S24
- Google Pixel 8 Pro
- HP Pavilion 15, HP Envy x360, HP OMEN 17
- Apple Watch Series 9, Samsung Galaxy Watch 6, Garmin Epix
- AirPods Pro

### Features
- Real product prices and specifications
- Stock availability tracking
- Shopping cart with order summary
- Multiple shipping options
- Promo code input field
- Order notes textarea
- Customer inquiry form
- FAQ section

## Browser Compatibility
- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)
- Mobile browsers (responsive design)

## Notes
- All SVG images display immediately without external dependencies
- Forms have proper validation (required fields marked with *)
- Consistent styling throughout the entire site
- Professional appearance suitable for e-commerce
- Accessibility features included (proper labels, semantic HTML)

---

**Created**: January 2025
**Requirement**: Web Design Project - Electronics Inventory System
**Status**: Complete and Ready for Deployment