Fix plan button email autofill

README.md

@@ -1,14 +1,15 @@
 # C+N Hosting Website
 
-A modern, minimalist website for C+N Hosting (Chris + Neon Hosting) featuring a sleek black background with neon accents and professional hosting services presentation.
+A modern, pay-as-you-go web hosting website featuring affordable plans starting at $2/month. Built for gamers, small projects, and anyone who needs simple, reliable hosting without enterprise pricing.
 
 ## 🎨 Design Features
 
 - **Minimalist Design**: Clean, modern interface with black background
-- **Neon Accents**: Cyan and magenta gradient highlights for visual appeal
+- **Neon Accents**: Orange (#FF8C00) and pink (#FFB6C1) highlights for visual appeal  
 - **Responsive Layout**: Fully responsive design that works on all devices
-- **Interactive Elements**: Smooth animations, hover effects, and particle animations
-- **Professional Branding**: C+T Hosting branding throughout
+- **Interactive Elements**: Smooth animations, hover effects, and visual feedback
+- **Professional Branding**: C+N Hosting branding with custom logo design
+- **Accessibility**: Built with Atkinson Hyperlegible font for better readability
 
 ## 🚀 Quick Start
 
@@ -48,22 +49,25 @@ cn-hosting-website/
 
 ## 🎯 Website Sections
 
-1. **Hero Section**: Eye-catching introduction with animated server icons
-2. **Services**: Three hosting tiers (Shared, VPS, Dedicated)
-3. **Pricing**: Three pricing plans with feature comparisons
-4. **Contact**: Contact form and company information
-5. **Footer**: Links and social media connections
+1. **Hero Section**: Eye-catching introduction with animated server icons and "Pay As You Go" messaging
+2. **Who We Are For**: Targeted audience section highlighting gamers, small projects, and backup storage needs
+3. **Services**: Three simple plans (Starter, Growing, Pro) with clear feature lists
+4. **Pricing**: Three transparent pricing tiers ($2, $5, $10 per month) with no hidden fees
+5. **Contact**: Smart contact form with plan selection auto-fill and Discord/email support
+6. **Disclaimer**: Honest transparency about being a small operation
+7. **Footer**: Quick links, support options, and social connections
 
 ## 🎨 Customization
 
 ### Colors
 The website uses a consistent color scheme:
-- **Primary**: Black (#000000)
-- **Accent**: Cyan (#00ffff) and Magenta (#ff00ff)
+- **Primary**: Black (#000000) background
+- **Accent**: Orange (#FF8C00) and Pink (#FFB6C1)
+- **Success**: Green (#00ff88) for highlights and CTAs
 - **Text**: White (#ffffff) and light gray (#cccccc)
 
 ### Fonts
-- **Primary**: Inter (Google Fonts)
+- **Primary**: Atkinson Hyperlegible (Google Fonts) - chosen for excellent readability
 - **Icons**: Font Awesome 6.0
 
 ### Key Features to Customize
@@ -82,12 +86,19 @@ The website is fully responsive and includes:
 
 ## 🔧 Technical Features
 
+- **Smart Form Auto-fill**: Clicking pricing plans auto-fills contact form with:
+  - Plan selection in subject line
+  - Email persistence using localStorage
+  - Intelligent field focusing based on what's empty
+  - Visual highlighting of fields needing attention
+  - Pre-filled message templates
 - **Smooth Scrolling**: Navigation links smoothly scroll to sections
-- **Form Validation**: Contact form with email validation
+- **Form Validation**: Contact form with email validation and persistence
 - **Animations**: Intersection Observer for scroll-triggered animations
-- **Particle Effects**: Floating particles in the hero section
-- **Mobile Navigation**: Collapsible hamburger menu
+- **Mobile Navigation**: Auto-hiding navbar on scroll with hamburger menu
 - **Loading Animations**: Smooth page load transitions
+- **Notification System**: User-friendly feedback messages
+- **Typing Effect**: Animated hero title on page load
 
 ## 🌐 Deployment
 
@@ -102,14 +113,38 @@ To deploy this website:
 
 ## 📞 Support
 
-For questions or customization requests, please contact:
-- Email: hello@cnhosting.com
-- Phone: +1 (555) 123-4567
+For questions or support, please contact:
+- Discord: that_neon
+- Email: baconsgigaserver@gmail.com
+- Discord Server: https://discord.gg/FVTtydJ965
 
 ## 📄 License
 
 This project is licensed under the MIT License.
 
+## 💡 Special Features
+
+### Email Auto-fill System
+When users click on a pricing plan's "Choose Plan" button:
+1. The contact form subject is automatically filled with the selected plan details
+2. If the user has previously submitted the form, their email is saved and can be reused
+3. Empty fields are highlighted with a green pulsing animation
+4. Smart focus management guides users through the form
+5. Pre-filled message templates for quick inquiries
+
+### Target Audience Focus
+The website specifically caters to:
+- **Gamers** needing affordable game servers
+- **Small Projects** requiring simple hosting without complexity
+- **Backup Storage** users wanting reliable, cheap storage
+
+### Pricing Philosophy
+- No contracts
+- No hidden fees
+- Pay only for what you use
+- Start at just $2/month
+- Scale up when needed
+
 ---
 
-**C+N Hosting** - Premium Web Hosting Solutions
+**C+N Hosting** - Simple, Affordable Hosting for Real People

TECHNICAL.md

@@ -0,0 +1,111 @@
+# Technical Documentation - C+N Hosting Website
+
+## Architecture Overview
+
+This is a single-page application (SPA) built with vanilla HTML, CSS, and JavaScript. The website uses a simple Node.js server for local development but can be deployed as static files.
+
+## File Structure
+
+```
+├── index.html          # Main HTML structure
+├── styles.css          # All styling and animations
+├── script.js           # Client-side JavaScript functionality
+├── server.js           # Express.js development server
+├── package.json        # Node.js dependencies
+├── README.md           # User-facing documentation
+└── TECHNICAL.md        # This file
+```
+
+## Key Technologies
+
+- **Frontend**: Vanilla HTML5, CSS3, JavaScript (ES6+)
+- **Fonts**: Atkinson Hyperlegible (Google Fonts)
+- **Icons**: Font Awesome 6.0
+- **Development Server**: Express.js
+- **Storage**: localStorage for email persistence
+
+## JavaScript Features
+
+### 1. Email Auto-fill System
+Triggered when pricing plan buttons are clicked. Auto-fills contact form with:
+- Plan name and price in subject
+- Smart field focusing
+- Email persistence with localStorage
+- Visual feedback animations
+
+### 2. Mobile Navigation
+- Auto-hiding navbar on scroll
+- Hamburger menu toggle
+- Close on outside click
+- Smooth scroll behavior
+
+### 3. Form Validation
+- Email regex validation
+- Required field checking
+- Success/error notifications
+- Form reset after submission
+
+### 4. Notification System
+- Dynamic notification creation
+- Auto-dismiss after 5 seconds
+- Multiple notification types (success, error, info)
+- Slide-in animations
+
+## CSS Architecture
+
+### Color Scheme
+- Primary Background: #000000
+- Accent Orange: #FF8C00
+- Accent Pink: #FFB6C1
+- Success Green: #00ff88
+- Text Primary: #ffffff
+- Text Secondary: #cccccc
+
+### Key Animations
+1. **Pulse Highlight** - Used for form field emphasis with scale and shadow animation
+2. **Hero Parallax** - Subtle vertical translation on scroll
+3. **Typing Effect** - Character-by-character reveal for hero title
+
+### Responsive Breakpoints
+- Mobile: < 768px
+- Tablet: 768px - 1024px
+- Desktop: > 1024px
+
+## Performance Optimizations
+
+1. Intersection Observer for lazy animations
+2. Debounced scroll events for navbar behavior
+3. CSS animations preferred over JavaScript
+4. Minimal dependencies (only Font Awesome external)
+
+## Browser Support
+
+- Modern browsers (Chrome, Firefox, Safari, Edge)
+- ES6+ JavaScript features used
+- CSS Grid and Flexbox for layouts
+- No IE11 support
+
+## Security Considerations
+
+1. Form Validation: Client-side only (server-side needed for production)
+2. localStorage: Used for email only (no sensitive data)
+3. External Resources: Font Awesome CDN (consider self-hosting)
+
+## Deployment Notes
+
+### Static Hosting
+Remove server.js and package.json, deploy only:
+- index.html
+- styles.css
+- script.js
+
+### Node.js Hosting
+Use included server.js with environment variable for port.
+
+## Future Enhancements
+
+1. Form Backend: Integrate with email service (SendGrid, Mailgun)
+2. Analytics: Add privacy-friendly analytics (Plausible, Fathom)
+3. A11y: Add ARIA labels and keyboard navigation improvements
+4. Performance: Implement service worker for offline support
+5. SEO: Add meta tags and structured data

script.js

@@ -136,6 +136,13 @@ window.addEventListener('scroll', () => {
 // Contact form handling
 const contactForm = document.querySelector('.contact-form');
 if (contactForm) {
+    // Auto-restore saved email on page load
+    const savedEmail = localStorage.getItem('userEmail');
+    const emailInput = contactForm.querySelector('input[type="email"]');
+    if (savedEmail && emailInput) {
+        emailInput.value = savedEmail;
+    }
+
     contactForm.addEventListener('submit', function(e) {
         e.preventDefault();
 
@@ -157,6 +164,9 @@ if (contactForm) {
             return;
         }
 
+        // Save email for future use
+        localStorage.setItem('userEmail', email);
+
         // Simulate form submission
         showNotification('Message sent successfully! We\'ll get back to you soon.', 'success');
         this.reset();
@@ -372,9 +382,66 @@ document.addEventListener('DOMContentLoaded', () => {
             const planName = card.querySelector('.pricing-header h3')?.textContent.trim();
             const price = card.querySelector('.price .amount')?.textContent.trim();
             const subjectInput = document.querySelector('#contact input[placeholder="Subject"]');
+            const emailInput = document.querySelector('#contact input[type="email"]');
+            const nameInput = document.querySelector('#contact input[placeholder="Your Name"]');
+
             if (subjectInput && planName && price) {
-                subjectInput.value = `$${price} ${planName} Plan`;
-                subjectInput.focus();
+                // Auto-fill subject with plan details
+                subjectInput.value = `Interest in ${planName} Plan ($${price}/month)`;
+
+                // Focus on the name field if it's empty, otherwise focus on email if it's empty
+                if (nameInput && !nameInput.value) {
+                    nameInput.focus();
+                    // Add visual highlight with animation
+                    nameInput.classList.add('highlight-field');
+                    setTimeout(() => {
+                        nameInput.classList.remove('highlight-field');
+                    }, 2000);
+                } else if (emailInput && !emailInput.value) {
+                    // Check if we have a saved email
+                    const savedEmail = localStorage.getItem('userEmail');
+                    if (savedEmail) {
+                        // Ask user if they want to use saved email
+                        if (confirm(`Use your saved email: ${savedEmail}?`)) {
+                            emailInput.value = savedEmail;
+                            // Move to message field
+                            const messageArea = document.querySelector('#contact textarea');
+                            if (messageArea) {
+                                messageArea.focus();
+                                if (!messageArea.value) {
+                                    messageArea.value = `Hi, I'm interested in the ${planName} plan. Could you please provide more information about getting started?`;
+                                }
+                            }
+                        } else {
+                            emailInput.focus();
+                            // Add visual highlight with animation
+                            emailInput.classList.add('highlight-field');
+                            setTimeout(() => {
+                                emailInput.classList.remove('highlight-field');
+                            }, 2000);
+                        }
+                    } else {
+                        emailInput.focus();
+                        // Add visual highlight with animation
+                        emailInput.classList.add('highlight-field');
+                        setTimeout(() => {
+                            emailInput.classList.remove('highlight-field');
+                        }, 2000);
+                    }
+                } else {
+                    // If both are filled, focus on the message area
+                    const messageArea = document.querySelector('#contact textarea');
+                    if (messageArea) {
+                        messageArea.focus();
+                        // Pre-fill with a helpful message template
+                        if (!messageArea.value) {
+                            messageArea.value = `Hi, I'm interested in the ${planName} plan. Could you please provide more information about getting started?`;
+                        }
+                    }
+                }
+
+                // Show a helpful notification
+                showNotification(`Selected ${planName} plan - Please fill in your contact details`, 'info');
             }
         });
     });

styles.css

@@ -1063,4 +1063,33 @@ section {
         width: 100px;
         height: 100px;
     }
+}
+
+/* Enhanced form field highlighting for auto-fill */
+.form-group input.highlight-field,
+.form-group textarea.highlight-field {
+    animation: pulseHighlight 0.5s ease;
+    border-color: #00ff88 !important;
+    box-shadow: 0 0 20px rgba(0, 255, 136, 0.3) !important;
+}
+
+@keyframes pulseHighlight {
+    0% {
+        transform: scale(1);
+        box-shadow: 0 0 0 rgba(0, 255, 136, 0.3);
+    }
+    50% {
+        transform: scale(1.02);
+        box-shadow: 0 0 20px rgba(0, 255, 136, 0.5);
+    }
+    100% {
+        transform: scale(1);
+        box-shadow: 0 0 20px rgba(0, 255, 136, 0.3);
+    }
+}
+
+/* Visual feedback for plan selection buttons */
+.pricing-card .btn:active {
+    transform: scale(0.95);
+    transition: transform 0.1s ease;
 }