diff --git a/README.md b/README.md index eb97689..e7ab9fe 100644 --- a/README.md +++ b/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 \ No newline at end of file +**C+N Hosting** - Simple, Affordable Hosting for Real People \ No newline at end of file diff --git a/TECHNICAL.md b/TECHNICAL.md new file mode 100644 index 0000000..4f991bf --- /dev/null +++ b/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 diff --git a/script.js b/script.js index a61e1f7..ea5eecf 100644 --- a/script.js +++ b/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'); } }); }); diff --git a/styles.css b/styles.css index 57e26f3..82dc3f4 100644 --- a/styles.css +++ b/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; } \ No newline at end of file