diff --git a/.gitignore b/.gitignore index dd44972..62ae7c8 100644 --- a/.gitignore +++ b/.gitignore @@ -1 +1,2 @@ *.md +.DS_Store diff --git a/README.md b/README.md index 150d1d9..31e6b01 100644 --- a/README.md +++ b/README.md @@ -1,62 +1,211 @@ -# Concept Bootstrap 4 Admin Dashboard Template -**Concept** is a responsive Bootstrap 4 admin template. It provides you with a collection of ready to use code snippets and utilities, custom pages, loads of charts, 4 different dashboard variations, a collection of applications and some useful widgets. Preview of this awesome admin template available here: https://colorlib.com/polygon/concept/index.html +# Concept - Modern Bootstrap 5 Admin Dashboard Template -# Preview +**Concept** is a cutting-edge, responsive Bootstrap 5 admin dashboard template that combines elegant design with powerful functionality. Built with the latest web technologies including Bootstrap 5.3.7, Vite, and modern JavaScript, this template provides everything you need to create stunning admin interfaces, analytics dashboards, and web applications. + +## 🚀 Built with Latest Technologies ### Screenshot -![Concept admin dashboard template preview](https://colorlib.com/wp/wp-content/uploads/sites/2/concept-free-admin-dashboard-panel.jpg) - -### Demo Site: [[Here]](https://colorlib.com/polygon/concept/index.html) - -### TOC -- [Built With](#built-with) -- [Changelog](#changelog) -- [Authors](#authors) -- [License](#license) - -### Built With - -- Peity Charts -- Sparklines -- Scrollbar -- TouchSpin -- Data Table -- JsTree -- Skycons -- Password Meter -- PDF Viewer -- Mapael -- jvectormap -- RangeSlider -- Cropper -- Data Map -- CodeMirror -- Chosen -- C3 And D3 -- datetimepicker -- x-editable -- dropzonejs -- form Validation -- masked input -- mockjax -- lobibox -- summernote -- editable - -### Changelog -#### V 1.0.0 -Initial Release -### Authors -[Colorlib](https://colorlib.com) - -### More info -- [Bootstrap dashboards](https://colorlib.com/wp/free-bootstrap-admin-dashboard-templates/) -- [Free Admin Templates](https://colorlib.com/wp/free-admin-templates/) -- [Free HTML templates](https://colorlib.com/wp/free-html-website-templates/) -- [Bootstrap Templates](https://colorlib.com/wp/templates/) -- [Free WordPress Themes](https://colorlib.com/wp/free-wordpress-themes/) - -### License - -Concept is licensed under The MIT License (MIT). Which means that you can use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the final products. But you always need to state that Colorlib is the original author of this template. +![Concept Bootstrap 5 Admin Dashboard](concept-bootstrap-5-admin-dashboard.png) + +### Demo Site: [[Live Preview]](https://colorlib.com/polygon/concept/index.html) + +## ✨ Key Features + +- **Bootstrap 5.3.7**: Latest stable version with all new components and utilities +- **Vite Build System**: Lightning-fast HMR (Hot Module Replacement) for instant development feedback +- **Pure JavaScript**: No jQuery dependency - modern vanilla JS for optimal performance +- **SCSS Architecture**: Organized, maintainable styles with variables and mixins +- **Handlebars Templating**: Reusable components and layouts for rapid development +- **Mobile-First Design**: Fully responsive across all devices and screen sizes +- **Modern UI Components**: Contemporary design with smooth animations and transitions +- **Dark Mode Ready**: Structured for easy dark theme implementation + +## 📦 What's Included + +### Multiple Dashboard Variants +- **E-commerce Dashboard** - Track sales, orders, and customer metrics +- **Finance Dashboard** - Monitor financial KPIs and transactions +- **Sales Dashboard** - Analyze sales performance and trends +- **Influencer Dashboard** - Social media analytics and engagement metrics + +### Rich UI Components +- Modern Cards with hover effects +- Bootstrap 5 Buttons with custom styles +- Interactive Progress Bars & Spinners +- Tooltips, Popovers & Modals +- Advanced Forms with validation +- Responsive Tables with sorting +- Custom Badges & Alerts + +### Built-in Applications +- **Real-time Chat Interface** - WhatsApp-style messaging UI +- **Calendar Application** - Event management system +- **Email/Inbox** - Complete mail interface +- **User Management** - User lists and profiles +- **Activity Timeline** - Track system events +- **Settings Panel** - Configuration interface + +### Data Visualization +- Chart.js for modern charts +- C3 & D3 for advanced visualizations +- Morris Charts for simple graphs +- Sparkline for inline charts +- Real-time data updates + +## 🛠️ Technology Stack + +### Core +- **Bootstrap 5.3.7** - Latest CSS framework +- **Vite 7.0** - Next-gen frontend tooling +- **Handlebars** - Powerful templating +- **SCSS** - Advanced stylesheets +- **ES6+ JavaScript** - Modern JS features + +### Included Libraries +- FontAwesome 7 Icons +- Chart.js 4.5 +- DataTables 2.3 +- FullCalendar 6 +- Tom Select +- SortableJS +- And 20+ more... + +## 🚀 Quick Start + +### Prerequisites +- Node.js 16+ and npm + +### Installation + +1. Clone the repository +```bash +git clone https://github.com/yourusername/concept-dashboard.git +cd concept-dashboard +``` + +2. Navigate to the project +```bash +cd concept-modern +``` + +3. Install dependencies +```bash +npm install +``` + +4. Start development server +```bash +npm run dev +``` + +5. Build for production +```bash +npm run build +``` + +## 📁 Project Structure + +``` +concept-modern/ +├── src/ +│ ├── assets/ # Images and static files +│ ├── js/ # JavaScript modules +│ │ ├── app.js # Main application file +│ │ ├── components/ # Reusable JS components +│ │ └── pages/ # Page-specific scripts +│ ├── scss/ # SCSS stylesheets +│ │ ├── main.scss # Main stylesheet +│ │ ├── components/ # Component styles +│ │ └── pages/ # Page-specific styles +│ ├── pages/ # HTML pages +│ ├── partials/ # Reusable Handlebars partials +│ └── index.html # Main entry point +├── dist/ # Production build output +├── vite.config.js # Vite configuration +└── package.json # Project dependencies +``` + +## 🎨 Discover Premium Admin Templates + +### [Colorlib](https://colorlib.com) - Premium Quality Templates & Resources + +Colorlib is one of the largest and most trusted template resources, offering an extensive collection of free and premium templates. They have amazing curated collections specifically for admin dashboards: + +- 📊 **[Free Bootstrap Admin Dashboard Templates](https://colorlib.com/wp/free-bootstrap-admin-dashboard-templates/)** - 40+ carefully selected free admin templates +- 💼 **[Bootstrap 5 Admin Templates](https://colorlib.com/wp/bootstrap-5-admin-dashboard/)** - Modern templates built with latest Bootstrap +- 🎯 **[React Admin Templates](https://colorlib.com/wp/react-admin-dashboard-templates/)** - For React-based applications +- 📱 **[Responsive Admin Templates](https://colorlib.com/wp/responsive-admin-dashboard-templates/)** - Mobile-first admin panels +- ⚡ **[Free HTML5 Admin Templates](https://colorlib.com/wp/free-html5-admin-dashboard-templates/)** - Clean, modern designs + +**Why Choose Colorlib:** +- ✅ Trusted by millions of developers worldwide +- ✅ High-quality, production-ready templates +- ✅ Regular updates and new releases +- ✅ Excellent documentation and support +- ✅ SEO-optimized and performance-focused + +Visit [Colorlib.com](https://colorlib.com) to explore their amazing collection! + +### [DashboardPack](https://dashboardpack.com) - Premium Dashboard Templates + +DashboardPack specializes in high-quality, production-ready admin dashboard templates with a focus on modern design and exceptional developer experience: + +- 🎨 **Stunning Designs** - Carefully crafted UI/UX for the best user experience +- 🔧 **Developer Friendly** - Clean code structure with detailed documentation +- 📊 **Rich Components** - Advanced charts, tables, and data visualization tools +- 🌓 **Dark Mode Included** - Built-in light/dark theme switching +- 📱 **Fully Responsive** - Pixel-perfect on all devices +- 🚀 **Regular Updates** - Stay current with latest design trends +- 💎 **Premium Quality** - Professional-grade templates for serious projects + +Explore premium dashboards at [DashboardPack.com](https://dashboardpack.com)! + +## 🎯 Perfect For + +- SaaS Applications +- E-commerce Platforms +- Analytics Dashboards +- CRM Systems +- Project Management Tools +- Financial Applications +- Social Media Dashboards +- IoT Monitoring Systems +- Healthcare Management +- Educational Platforms + +## 💻 Browser Support + +- Chrome (latest) +- Firefox (latest) +- Safari (latest) +- Edge (latest) +- Opera (latest) + +## 📚 Documentation & Support + +- Comprehensive documentation included +- Code examples and snippets +- Component library reference +- Integration guides +- Regular updates and bug fixes + +## 👥 Authors + +- [Colorlib](https://colorlib.com) - Original design and development +- Open Source Community - Continuous improvements and updates + +## 📄 License + +Concept is licensed under The MIT License (MIT). You can use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the final products. But you always need to state that Colorlib is the original author of this template. + +--- + +

+ Made with ❤️ by Colorlib +
+ Discover more amazing templates: +
+ Free Admin Templates • + Premium Dashboards +

\ No newline at end of file diff --git a/concept-bootstrap-5-admin-dashboard.png b/concept-bootstrap-5-admin-dashboard.png new file mode 100644 index 0000000..225cc28 Binary files /dev/null and b/concept-bootstrap-5-admin-dashboard.png differ diff --git a/concept-modern/package-lock.json b/concept-modern/package-lock.json index 0834ddb..a8d1e26 100644 --- a/concept-modern/package-lock.json +++ b/concept-modern/package-lock.json @@ -1,12 +1,12 @@ { "name": "concept-modern", - "version": "2.0.0", + "version": "2.0.1", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "concept-modern", - "version": "2.0.0", + "version": "2.0.1", "dependencies": { "@fortawesome/fontawesome-free": "^7.0.0", "@fullcalendar/bootstrap5": "^6.1.18", diff --git a/concept-modern/src/js/pages/checkout.js b/concept-modern/src/js/pages/checkout.js new file mode 100644 index 0000000..7e59e34 --- /dev/null +++ b/concept-modern/src/js/pages/checkout.js @@ -0,0 +1,231 @@ +// Checkout Page functionality +export function initializeCheckout() { + // Form validation + initializeFormValidation(); + + // Payment method handling + handlePaymentMethodChange(); + + // Promo code + handlePromoCode(); + + // Card number formatting + initializeCardFormatting(); + + // Checkout steps + initializeCheckoutSteps(); +} + +// Initialize form validation +function initializeFormValidation() { + const forms = document.querySelectorAll('form'); + + forms.forEach(form => { + form.addEventListener('submit', function(event) { + event.preventDefault(); + event.stopPropagation(); + + if (form.checkValidity()) { + // Process form + console.log('Form is valid'); + } + + form.classList.add('was-validated'); + }); + }); +} + +// Handle payment method changes +function handlePaymentMethodChange() { + const paymentRadios = document.querySelectorAll('input[name="paymentMethod"]'); + + paymentRadios.forEach(radio => { + radio.addEventListener('change', function() { + // Hide all payment forms + document.getElementById('creditCardForm').style.display = 'none'; + document.getElementById('paypalForm').style.display = 'none'; + document.getElementById('applePayForm').style.display = 'none'; + + // Show selected payment form + switch(this.id) { + case 'creditCard': + document.getElementById('creditCardForm').style.display = 'block'; + break; + case 'paypal': + document.getElementById('paypalForm').style.display = 'block'; + break; + case 'applePay': + document.getElementById('applePayForm').style.display = 'block'; + break; + } + }); + }); +} + +// Handle promo code +function handlePromoCode() { + const promoButton = document.querySelector('#promoCode + button'); + if (promoButton) { + promoButton.addEventListener('click', function() { + const promoCode = document.getElementById('promoCode').value; + + if (promoCode) { + // Simulate promo code validation + if (promoCode.toUpperCase() === 'SAVE10') { + applyDiscount(10); + showNotification('Promo code applied! 10% discount', 'success'); + } else { + showNotification('Invalid promo code', 'error'); + } + } + }); + } +} + +// Apply discount +function applyDiscount(percentage) { + const subtotal = 1648.00; + const discount = subtotal * (percentage / 100); + const newTotal = subtotal - discount + 15.00 + 149.67; // Including shipping and tax + + // Update UI (in real app, would recalculate properly) + console.log(`Applied ${percentage}% discount: -$${discount.toFixed(2)}`); +} + +// Initialize card number formatting +function initializeCardFormatting() { + const cardNumberInput = document.getElementById('cardNumber'); + const expiryInput = document.getElementById('expiry'); + const cvvInput = document.getElementById('cvv'); + + if (cardNumberInput) { + cardNumberInput.addEventListener('input', function(e) { + let value = e.target.value.replace(/\s/g, ''); + let formattedValue = value.match(/.{1,4}/g)?.join(' ') || value; + e.target.value = formattedValue; + + // Detect card type + detectCardType(value); + }); + } + + if (expiryInput) { + expiryInput.addEventListener('input', function(e) { + let value = e.target.value.replace(/\D/g, ''); + if (value.length >= 2) { + value = value.substring(0, 2) + '/' + value.substring(2, 4); + } + e.target.value = value; + }); + } + + if (cvvInput) { + cvvInput.addEventListener('input', function(e) { + e.target.value = e.target.value.replace(/\D/g, '').substring(0, 4); + }); + } +} + +// Detect card type +function detectCardType(number) { + const cardIcons = document.querySelectorAll('.input-group-text i'); + + // Reset all icons + cardIcons.forEach(icon => { + icon.style.opacity = '0.3'; + }); + + // Detect and highlight card type + if (number.startsWith('4')) { + // Visa + document.querySelector('.fa-cc-visa').style.opacity = '1'; + } else if (number.startsWith('5') || number.startsWith('2')) { + // Mastercard + document.querySelector('.fa-cc-mastercard').style.opacity = '1'; + } else if (number.startsWith('3')) { + // Amex + document.querySelector('.fa-cc-amex').style.opacity = '1'; + } +} + +// Initialize checkout steps +function initializeCheckoutSteps() { + const steps = document.querySelectorAll('.step'); + let currentStep = 1; // Starting at shipping + + // Add click handlers for completed steps + steps.forEach((step, index) => { + if (step.classList.contains('active') && index < currentStep) { + step.style.cursor = 'pointer'; + step.addEventListener('click', function() { + goToStep(index); + }); + } + }); +} + +// Go to specific step +function goToStep(stepIndex) { + console.log('Going to step:', stepIndex); + // In real app, would handle step navigation +} + +// Complete order +window.completeOrder = function() { + // Validate all forms + const shippingForm = document.getElementById('shippingForm'); + const isValid = shippingForm.checkValidity(); + + if (!isValid) { + shippingForm.classList.add('was-validated'); + showNotification('Please fill in all required fields', 'error'); + return; + } + + // Show loading state + const button = event.target; + const originalText = button.innerHTML; + button.innerHTML = 'Processing...'; + button.disabled = true; + + // Simulate order processing + setTimeout(() => { + button.innerHTML = originalText; + button.disabled = false; + + // Show success + showNotification('Order completed successfully!', 'success'); + + // Redirect to order confirmation + setTimeout(() => { + window.location.href = '/'; + }, 2000); + }, 2000); +}; + +// Show notification +function showNotification(message, type = 'info') { + const alertClass = type === 'error' ? 'danger' : type; + const alertHtml = ` + + `; + + document.body.insertAdjacentHTML('beforeend', alertHtml); + + setTimeout(() => { + const alert = document.querySelector('.alert'); + if (alert) { + alert.remove(); + } + }, 5000); +} + +// Initialize on DOM ready +if (document.readyState === 'loading') { + document.addEventListener('DOMContentLoaded', initializeCheckout); +} else { + initializeCheckout(); +} \ No newline at end of file diff --git a/concept-modern/src/js/pages/influencer-finder.js b/concept-modern/src/js/pages/influencer-finder.js new file mode 100644 index 0000000..b3a8a20 --- /dev/null +++ b/concept-modern/src/js/pages/influencer-finder.js @@ -0,0 +1,292 @@ +// Influencer Finder Page functionality +export function initializeInfluencerFinder() { + // Initialize search functionality + initializeSearch(); + + // Initialize filters + initializeFilters(); + + // Initialize favorite toggle + initializeFavorites(); + + // Initialize tooltips + initializeTooltips(); + + // Initialize social stats animation + initializeSocialStats(); +} + +// Initialize search functionality +function initializeSearch() { + const searchForm = document.querySelector('.influencer-search-form'); + if (searchForm) { + searchForm.addEventListener('submit', function(e) { + e.preventDefault(); + const searchInput = this.querySelector('input[type="search"]'); + const searchTerm = searchInput.value.trim(); + + if (searchTerm) { + performSearch(searchTerm); + } + }); + } +} + +// Perform search +function performSearch(searchTerm) { + console.log('Searching for:', searchTerm); + + // Show loading state + const influencerCards = document.querySelectorAll('.influencer-card'); + influencerCards.forEach(card => { + card.style.opacity = '0.5'; + card.style.pointerEvents = 'none'; + }); + + // Simulate search + setTimeout(() => { + influencerCards.forEach(card => { + card.style.opacity = '1'; + card.style.pointerEvents = 'auto'; + }); + + showNotification(`Found ${influencerCards.length} influencers matching "${searchTerm}"`, 'success'); + }, 1000); +} + +// Initialize filters +function initializeFilters() { + // Sort by change + const sortBy = document.getElementById('sortBy'); + if (sortBy) { + sortBy.addEventListener('change', function() { + applySort(this.value); + }); + } + + // Rating filter + const ratingInputs = document.querySelectorAll('input[name="rating"]'); + ratingInputs.forEach(input => { + input.addEventListener('change', function() { + console.log('Rating filter:', this.value); + }); + }); + + // Platform filters + const platformCheckboxes = document.querySelectorAll('.platform-filter input[type="checkbox"]'); + platformCheckboxes.forEach(checkbox => { + checkbox.addEventListener('change', function() { + updateFilterCount(); + }); + }); + + // Category filters + const categoryCheckboxes = document.querySelectorAll('.category-filter input[type="checkbox"]'); + categoryCheckboxes.forEach(checkbox => { + checkbox.addEventListener('change', function() { + updateFilterCount(); + }); + }); +} + +// Apply sorting +function applySort(sortType) { + console.log('Sorting by:', sortType); + + const container = document.querySelector('.col-xl-9'); + const cards = Array.from(document.querySelectorAll('.influencer-card')); + + // Sort cards based on type + cards.sort((a, b) => { + switch(sortType) { + case 'followers': + return getFollowerCount(b) - getFollowerCount(a); + case 'engagement': + return Math.random() - 0.5; // Random for demo + case 'rating': + return getRating(b) - getRating(a); + case 'recent': + return Math.random() - 0.5; // Random for demo + default: + return 0; + } + }); + + // Reorder cards in DOM + cards.forEach(card => { + container.appendChild(card); + }); +} + +// Get follower count from card (simplified) +function getFollowerCount(card) { + const stats = card.querySelectorAll('.social-stat span.fw-bold'); + let total = 0; + stats.forEach(stat => { + const value = stat.textContent; + const num = parseFloat(value); + const multiplier = value.includes('M') ? 1000000 : value.includes('K') ? 1000 : 1; + total += num * multiplier; + }); + return total; +} + +// Get rating from card +function getRating(card) { + const stars = card.querySelectorAll('.rating-star .fas.fa-star'); + return stars.length; +} + +// Update filter count +function updateFilterCount() { + const activeFilters = document.querySelectorAll('.filter-sidebar input[type="checkbox"]:checked').length; + console.log('Active filters:', activeFilters); +} + +// Initialize favorites +function initializeFavorites() { + document.addEventListener('click', function(e) { + if (e.target.closest('.btn-outline-secondary') && e.target.closest('.influencer-actions')) { + const btn = e.target.closest('.btn-outline-secondary'); + toggleFavorite(btn); + } + + if (e.target.closest('.btn-warning') && e.target.closest('.influencer-actions')) { + const btn = e.target.closest('.btn-warning'); + toggleFavorite(btn); + } + }); +} + +// Toggle favorite status +function toggleFavorite(button) { + const icon = button.querySelector('i'); + const isFavorite = button.classList.contains('btn-warning'); + + if (isFavorite) { + button.classList.remove('btn-warning'); + button.classList.add('btn-outline-secondary'); + icon.classList.remove('fas'); + icon.classList.add('far'); + button.setAttribute('data-bs-original-title', 'Add to favorites'); + showNotification('Removed from favorites', 'info'); + } else { + button.classList.remove('btn-outline-secondary'); + button.classList.add('btn-warning'); + icon.classList.remove('far'); + icon.classList.add('fas'); + button.setAttribute('data-bs-original-title', 'Remove from favorites'); + showNotification('Added to favorites', 'success'); + } +} + +// Initialize tooltips +function initializeTooltips() { + const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]')); + tooltipTriggerList.map(function (tooltipTriggerEl) { + return new bootstrap.Tooltip(tooltipTriggerEl); + }); +} + +// Initialize social stats animation +function initializeSocialStats() { + const observer = new IntersectionObserver((entries) => { + entries.forEach(entry => { + if (entry.isIntersecting) { + animateSocialStats(entry.target); + observer.unobserve(entry.target); + } + }); + }, { threshold: 0.5 }); + + document.querySelectorAll('.user-social-box').forEach(box => { + observer.observe(box); + }); +} + +// Animate social stats +function animateSocialStats(box) { + const stats = box.querySelectorAll('.social-stat span.fw-bold'); + + stats.forEach((stat, index) => { + setTimeout(() => { + stat.style.transform = 'scale(1.2)'; + setTimeout(() => { + stat.style.transform = 'scale(1)'; + }, 200); + }, index * 100); + }); +} + +// Apply filters (global function) +window.applyFilters = function() { + // Collect all filter values + const filters = { + sortBy: document.getElementById('sortBy').value, + rating: document.querySelector('input[name="rating"]:checked').value, + platforms: Array.from(document.querySelectorAll('.platform-filter input:checked')).map(cb => cb.id), + categories: Array.from(document.querySelectorAll('.category-filter input:checked')).map(cb => cb.id), + ageRange: document.getElementById('ageRange').value, + followerRange: document.getElementById('followerRange').value + }; + + console.log('Applying filters:', filters); + + // Show loading + const cards = document.querySelectorAll('.influencer-card'); + cards.forEach(card => card.style.opacity = '0.5'); + + // Simulate filter application + setTimeout(() => { + cards.forEach(card => card.style.opacity = '1'); + showNotification('Filters applied successfully', 'success'); + }, 500); +}; + +// Reset filters (global function) +window.resetFilters = function() { + // Reset sort + document.getElementById('sortBy').value = 'followers'; + + // Reset rating + document.getElementById('ratingAll').checked = true; + + // Reset age and follower range + document.getElementById('ageRange').value = ''; + document.getElementById('followerRange').value = ''; + + // Reset checkboxes to defaults + const defaultChecked = ['facebook', 'instagram', 'twitter', 'youtube', 'lifestyle', 'fitness']; + document.querySelectorAll('.filter-sidebar input[type="checkbox"]').forEach(cb => { + cb.checked = defaultChecked.includes(cb.id); + }); + + showNotification('Filters reset', 'info'); +}; + +// Show notification +function showNotification(message, type = 'info') { + const alertClass = type === 'error' ? 'danger' : type; + const alertHtml = ` + + `; + + document.body.insertAdjacentHTML('beforeend', alertHtml); + + setTimeout(() => { + const alert = document.querySelector('.alert'); + if (alert) { + alert.remove(); + } + }, 3000); +} + +// Initialize on DOM ready +if (document.readyState === 'loading') { + document.addEventListener('DOMContentLoaded', initializeInfluencerFinder); +} else { + initializeInfluencerFinder(); +} \ No newline at end of file diff --git a/concept-modern/src/js/pages/influencer-profile.js b/concept-modern/src/js/pages/influencer-profile.js new file mode 100644 index 0000000..bc000e6 --- /dev/null +++ b/concept-modern/src/js/pages/influencer-profile.js @@ -0,0 +1,247 @@ +// Influencer Profile Page functionality +export function initializeInfluencerProfile() { + // Initialize tabs + initializeTabs(); + + // Initialize campaign metrics + initializeCampaignMetrics(); + + // Initialize message form + initializeMessageForm(); + + // Initialize tooltips + initializeTooltips(); + + // Initialize rating animations + initializeRatingAnimations(); +} + +// Initialize tabs +function initializeTabs() { + const tabButtons = document.querySelectorAll('[data-bs-toggle="pill"]'); + + tabButtons.forEach(button => { + button.addEventListener('shown.bs.tab', function (e) { + // Tab changed event + const targetTab = e.target.getAttribute('data-bs-target'); + console.log('Switched to tab:', targetTab); + + // Animate content on tab change + const tabContent = document.querySelector(targetTab); + if (tabContent) { + animateTabContent(tabContent); + } + }); + }); +} + +// Animate tab content +function animateTabContent(content) { + content.style.opacity = '0'; + content.style.transform = 'translateY(10px)'; + + setTimeout(() => { + content.style.transition = 'all 0.3s ease'; + content.style.opacity = '1'; + content.style.transform = 'translateY(0)'; + }, 50); +} + +// Initialize campaign metrics animations +function initializeCampaignMetrics() { + const observer = new IntersectionObserver((entries) => { + entries.forEach(entry => { + if (entry.isIntersecting) { + animateMetrics(entry.target); + observer.unobserve(entry.target); + } + }); + }, { threshold: 0.5 }); + + // Observe all metric cards + document.querySelectorAll('.campaign-metric').forEach(metric => { + observer.observe(metric); + }); + + // Observe stat cards + document.querySelectorAll('.card-body h1').forEach(stat => { + observer.observe(stat); + }); +} + +// Animate metrics +function animateMetrics(element) { + const value = element.querySelector('h5, h1'); + if (!value) return; + + const finalValue = value.textContent; + const isNumeric = /^\d+k?$/i.test(finalValue); + + if (isNumeric) { + const numericValue = parseFloat(finalValue); + const suffix = finalValue.includes('k') ? 'k' : ''; + let currentValue = 0; + const increment = numericValue / 30; + const timer = setInterval(() => { + currentValue += increment; + if (currentValue >= numericValue) { + currentValue = numericValue; + clearInterval(timer); + } + value.textContent = Math.round(currentValue) + suffix; + }, 30); + } + + // Scale animation + element.style.transform = 'scale(1.1)'; + setTimeout(() => { + element.style.transform = 'scale(1)'; + }, 300); +} + +// Initialize message form +function initializeMessageForm() { + const form = document.getElementById('messageForm'); + if (!form) return; + + form.addEventListener('submit', function(e) { + e.preventDefault(); + + // Get form data + const formData = { + name: document.getElementById('yourName').value, + email: document.getElementById('yourEmail').value, + subject: document.getElementById('subject').value, + message: document.getElementById('message').value + }; + + // Show loading state + const submitBtn = form.querySelector('button[type="submit"]'); + const originalHtml = submitBtn.innerHTML; + submitBtn.innerHTML = 'Sending...'; + submitBtn.disabled = true; + + // Simulate sending message + setTimeout(() => { + // Reset button + submitBtn.innerHTML = originalHtml; + submitBtn.disabled = false; + + // Show success message + showNotification('Message sent successfully! Michael will get back to you soon.', 'success'); + + // Reset form + form.reset(); + + // Switch to reviews tab + const reviewsTab = document.getElementById('reviews-tab'); + if (reviewsTab) { + reviewsTab.click(); + } + }, 2000); + }); +} + +// Initialize tooltips +function initializeTooltips() { + const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]')); + tooltipTriggerList.map(function (tooltipTriggerEl) { + return new bootstrap.Tooltip(tooltipTriggerEl); + }); +} + +// Initialize rating animations +function initializeRatingAnimations() { + const ratingBlocks = document.querySelectorAll('.rating-star'); + + const observer = new IntersectionObserver((entries) => { + entries.forEach(entry => { + if (entry.isIntersecting) { + animateRatingStars(entry.target); + observer.unobserve(entry.target); + } + }); + }, { threshold: 0.5 }); + + ratingBlocks.forEach(block => { + observer.observe(block); + }); +} + +// Animate rating stars +function animateRatingStars(ratingBlock) { + const stars = ratingBlock.querySelectorAll('i'); + stars.forEach((star, index) => { + setTimeout(() => { + star.style.transform = 'scale(0)'; + star.style.transition = 'transform 0.3s ease'; + + setTimeout(() => { + star.style.transform = 'scale(1.2)'; + setTimeout(() => { + star.style.transform = 'scale(1)'; + }, 150); + }, 50); + }, index * 100); + }); +} + +// Handle package selection +document.addEventListener('click', function(e) { + if (e.target.matches('.pricing-card .btn')) { + e.preventDefault(); + const card = e.target.closest('.pricing-card'); + const packageName = card.querySelector('.card-header h4').textContent; + const price = card.querySelector('.card-body h1').textContent; + + showNotification(`Selected ${packageName} package (${price}/month). Redirecting to checkout...`, 'info'); + } +}); + +// Show notification +function showNotification(message, type = 'info') { + const alertClass = type === 'error' ? 'danger' : type; + const alertHtml = ` + + `; + + document.body.insertAdjacentHTML('beforeend', alertHtml); + + setTimeout(() => { + const alert = document.querySelector('.alert'); + if (alert) { + alert.remove(); + } + }, 5000); +} + +// Social channel hover effects +document.addEventListener('DOMContentLoaded', function() { + const socialLinks = document.querySelectorAll('.social-channels a'); + + socialLinks.forEach(link => { + link.addEventListener('mouseenter', function() { + const icon = this.querySelector('i'); + if (icon) { + icon.style.transform = 'scale(1.2) rotate(5deg)'; + } + }); + + link.addEventListener('mouseleave', function() { + const icon = this.querySelector('i'); + if (icon) { + icon.style.transform = 'scale(1) rotate(0)'; + } + }); + }); +}); + +// Initialize on DOM ready +if (document.readyState === 'loading') { + document.addEventListener('DOMContentLoaded', initializeInfluencerProfile); +} else { + initializeInfluencerProfile(); +} \ No newline at end of file diff --git a/concept-modern/src/js/pages/product-single.js b/concept-modern/src/js/pages/product-single.js new file mode 100644 index 0000000..4a6f31f --- /dev/null +++ b/concept-modern/src/js/pages/product-single.js @@ -0,0 +1,238 @@ +// Product Single Page functionality +export function initializeProductSingle() { + // Initialize star rating for review + initializeStarRating(); + + // Handle add to cart + const addToCartBtn = document.querySelector('.btn-primary.btn-lg'); + if (addToCartBtn && addToCartBtn.textContent.includes('Add to Cart')) { + addToCartBtn.addEventListener('click', handleAddToCart); + } + + // Handle buy now + const buyNowBtn = document.querySelector('.btn-success.btn-lg'); + if (buyNowBtn) { + buyNowBtn.addEventListener('click', handleBuyNow); + } + + // Handle wishlist + const wishlistBtn = document.querySelector('.btn-outline-secondary.btn-lg'); + if (wishlistBtn) { + wishlistBtn.addEventListener('click', toggleWishlist); + } + + // Handle review form submission + const reviewForm = document.getElementById('reviewForm'); + if (reviewForm) { + reviewForm.addEventListener('submit', handleReviewSubmit); + } + + // Storage option price updates + const storageOptions = document.querySelectorAll('input[name="storage"]'); + storageOptions.forEach(option => { + option.addEventListener('change', updatePrice); + }); + + // Initialize product image zoom (optional enhancement) + initializeImageZoom(); +} + +// Initialize star rating +function initializeStarRating() { + const stars = document.querySelectorAll('.star-rating i'); + let selectedRating = 0; + + stars.forEach(star => { + star.addEventListener('click', function() { + selectedRating = parseInt(this.getAttribute('data-rating')); + updateStarDisplay(selectedRating); + }); + + star.addEventListener('mouseenter', function() { + const rating = parseInt(this.getAttribute('data-rating')); + updateStarDisplay(rating); + }); + }); + + document.querySelector('.star-rating').addEventListener('mouseleave', function() { + updateStarDisplay(selectedRating); + }); + + function updateStarDisplay(rating) { + stars.forEach((star, index) => { + if (index < rating) { + star.classList.remove('far'); + star.classList.add('fas', 'text-warning'); + } else { + star.classList.remove('fas', 'text-warning'); + star.classList.add('far'); + } + }); + } +} + +// Handle add to cart +function handleAddToCart() { + const productName = document.querySelector('.product-info h1').textContent; + const quantity = document.getElementById('quantity').value; + const color = document.querySelector('input[name="color"]:checked').nextElementSibling.textContent; + const storage = document.querySelector('input[name="storage"]:checked').nextElementSibling.textContent; + + const cartItem = { + name: productName, + quantity: quantity, + color: color, + storage: storage, + price: getCurrentPrice() + }; + + // In real app, would add to cart state/backend + console.log('Adding to cart:', cartItem); + + showNotification(`${productName} added to cart!`, 'success'); + updateCartCounter(); +} + +// Handle buy now +function handleBuyNow() { + const productName = document.querySelector('.product-info h1').textContent; + + // In real app, would redirect to checkout with product + console.log('Buy now:', productName); + + // For demo, just show notification + showNotification('Redirecting to checkout...', 'info'); + + // Simulate redirect + setTimeout(() => { + window.location.href = '/pages/ecommerce/checkout.html'; + }, 1500); +} + +// Toggle wishlist +function toggleWishlist(e) { + const btn = e.currentTarget; + const icon = btn.querySelector('i'); + const productName = document.querySelector('.product-info h1').textContent; + + if (icon.classList.contains('far')) { + icon.classList.remove('far'); + icon.classList.add('fas', 'text-danger'); + showNotification(`${productName} added to wishlist!`, 'success'); + } else { + icon.classList.remove('fas', 'text-danger'); + icon.classList.add('far'); + showNotification(`${productName} removed from wishlist!`, 'info'); + } +} + +// Handle review submission +function handleReviewSubmit(e) { + e.preventDefault(); + + const rating = document.querySelectorAll('.star-rating .fas').length; + const title = document.getElementById('reviewTitle').value; + const text = document.getElementById('reviewText').value; + const name = document.getElementById('reviewName').value; + const email = document.getElementById('reviewEmail').value; + + if (rating === 0) { + showNotification('Please select a rating', 'warning'); + return; + } + + const review = { + rating: rating, + title: title, + text: text, + name: name, + email: email, + date: new Date().toISOString() + }; + + // In real app, would submit to backend + console.log('Submitting review:', review); + + // Close modal + const modal = bootstrap.Modal.getInstance(document.getElementById('reviewModal')); + modal.hide(); + + // Reset form + e.target.reset(); + document.querySelectorAll('.star-rating i').forEach(star => { + star.classList.remove('fas', 'text-warning'); + star.classList.add('far'); + }); + + showNotification('Thank you for your review!', 'success'); +} + +// Update price based on storage selection +function updatePrice() { + const basePrice = 1199; + const storagePrices = { + '256GB': 0, + '512GB': 200, + '1TB': 600 + }; + + const selectedStorage = document.querySelector('input[name="storage"]:checked').nextElementSibling.textContent; + const newPrice = basePrice + (storagePrices[selectedStorage] || 0); + + document.querySelector('.price h3').textContent = `$${newPrice.toFixed(2)}`; +} + +// Get current price +function getCurrentPrice() { + return document.querySelector('.price h3').textContent; +} + +// Initialize image zoom (basic implementation) +function initializeImageZoom() { + const mainImage = document.getElementById('mainImage'); + if (!mainImage) return; + + mainImage.addEventListener('mouseenter', function() { + this.style.cursor = 'zoom-in'; + }); + + mainImage.addEventListener('click', function() { + // In real app, would open lightbox or zoom modal + console.log('Image zoom clicked'); + }); +} + +// Update cart counter +function updateCartCounter() { + const cartCounter = document.querySelector('.cart-counter'); + if (cartCounter) { + const currentCount = parseInt(cartCounter.textContent) || 0; + cartCounter.textContent = currentCount + 1; + } +} + +// Show notification +function showNotification(message, type = 'info') { + const alertHtml = ` + + `; + + document.body.insertAdjacentHTML('beforeend', alertHtml); + + setTimeout(() => { + const alert = document.querySelector('.alert'); + if (alert) { + alert.remove(); + } + }, 3000); +} + +// Initialize on DOM ready +if (document.readyState === 'loading') { + document.addEventListener('DOMContentLoaded', initializeProductSingle); +} else { + initializeProductSingle(); +} \ No newline at end of file diff --git a/concept-modern/src/js/pages/products.js b/concept-modern/src/js/pages/products.js new file mode 100644 index 0000000..aecf5ef --- /dev/null +++ b/concept-modern/src/js/pages/products.js @@ -0,0 +1,277 @@ +// E-commerce Products Page functionality +export function initializeProducts() { + // Initialize tooltips + const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]')); + tooltipTriggerList.map(function (tooltipTriggerEl) { + return new bootstrap.Tooltip(tooltipTriggerEl); + }); + + // Product search functionality + const searchInput = document.getElementById('productSearch'); + if (searchInput) { + searchInput.addEventListener('keyup', debounce(function(e) { + const searchTerm = e.target.value.toLowerCase(); + filterProducts(searchTerm); + }, 300)); + } + + // Category filter + const categoryFilter = document.getElementById('categoryFilter'); + if (categoryFilter) { + categoryFilter.addEventListener('change', function() { + applyFilters(); + }); + } + + // Sort functionality + const sortBy = document.getElementById('sortBy'); + if (sortBy) { + sortBy.addEventListener('change', function() { + sortProducts(this.value); + }); + } + + // Add to cart buttons + document.addEventListener('click', function(e) { + if (e.target.closest('.btn-primary') && e.target.textContent.includes('Add to Cart')) { + e.preventDefault(); + const productCard = e.target.closest('.product-card'); + const productName = productCard.querySelector('.card-title a').textContent; + addToCart(productName); + } + }); + + // Wishlist buttons + document.addEventListener('click', function(e) { + if (e.target.closest('.product-actions .btn')) { + const btn = e.target.closest('.btn'); + if (btn.querySelector('.fa-heart')) { + e.preventDefault(); + toggleWishlist(btn); + } + } + }); + + // Add product form + const addProductForm = document.getElementById('addProductForm'); + if (addProductForm) { + addProductForm.addEventListener('submit', function(e) { + e.preventDefault(); + handleAddProduct(); + }); + } + + // Quick view functionality + document.addEventListener('click', function(e) { + if (e.target.closest('.product-actions .btn')) { + const btn = e.target.closest('.btn'); + if (btn.querySelector('.fa-eye')) { + e.preventDefault(); + const productCard = btn.closest('.product-card'); + showQuickView(productCard); + } + } + }); +} + +// Debounce helper +function debounce(func, wait) { + let timeout; + return function executedFunction(...args) { + const later = () => { + clearTimeout(timeout); + func(...args); + }; + clearTimeout(timeout); + timeout = setTimeout(later, wait); + }; +} + +// Filter products by search term +function filterProducts(searchTerm) { + const productCards = document.querySelectorAll('.product-card'); + productCards.forEach(card => { + const productName = card.querySelector('.card-title').textContent.toLowerCase(); + const productDescription = card.querySelector('.text-muted.small').textContent.toLowerCase(); + + if (productName.includes(searchTerm) || productDescription.includes(searchTerm)) { + card.parentElement.style.display = ''; + } else { + card.parentElement.style.display = 'none'; + } + }); +} + +// Apply all filters +function applyFilters() { + const category = document.getElementById('categoryFilter').value; + const searchTerm = document.getElementById('productSearch').value.toLowerCase(); + + const productCards = document.querySelectorAll('.product-card'); + productCards.forEach(card => { + let show = true; + + // Apply search filter + if (searchTerm) { + const productName = card.querySelector('.card-title').textContent.toLowerCase(); + const productDescription = card.querySelector('.text-muted.small').textContent.toLowerCase(); + show = productName.includes(searchTerm) || productDescription.includes(searchTerm); + } + + // Apply category filter (would need data attributes on cards in real implementation) + if (category && show) { + // In a real app, you'd check the product's category + // For demo purposes, we'll just show all for now + } + + card.parentElement.style.display = show ? '' : 'none'; + }); +} + +// Sort products +function sortProducts(sortType) { + const container = document.querySelector('.row').parentElement; + const productCols = Array.from(container.querySelectorAll('.col-xl-3.col-lg-4')); + + productCols.sort((a, b) => { + const priceA = parseFloat(a.querySelector('.h5.text-primary').textContent.replace('$', '')); + const priceB = parseFloat(b.querySelector('.h5.text-primary').textContent.replace('$', '')); + const nameA = a.querySelector('.card-title a').textContent; + const nameB = b.querySelector('.card-title a').textContent; + + switch(sortType) { + case 'price-low': + return priceA - priceB; + case 'price-high': + return priceB - priceA; + case 'newest': + // In real app, would sort by date + return 0; + case 'rating': + // In real app, would sort by rating + return 0; + default: + return nameA.localeCompare(nameB); + } + }); + + // Re-append sorted elements + productCols.forEach(col => container.appendChild(col)); +} + +// Add to cart +function addToCart(productName) { + // Show success notification + const alertHtml = ` + + `; + + document.body.insertAdjacentHTML('beforeend', alertHtml); + + // Auto-dismiss after 3 seconds + setTimeout(() => { + const alert = document.querySelector('.alert'); + if (alert) { + const bsAlert = new bootstrap.Alert(alert); + bsAlert.close(); + } + }, 3000); + + // Update cart counter (if exists) + updateCartCounter(); +} + +// Toggle wishlist +function toggleWishlist(btn) { + const icon = btn.querySelector('i'); + const productCard = btn.closest('.product-card'); + const productName = productCard.querySelector('.card-title a').textContent; + + if (icon.classList.contains('far')) { + // Add to wishlist + icon.classList.remove('far'); + icon.classList.add('fas', 'text-danger'); + showNotification(`${productName} added to wishlist!`, 'success'); + } else { + // Remove from wishlist + icon.classList.remove('fas', 'text-danger'); + icon.classList.add('far'); + showNotification(`${productName} removed from wishlist!`, 'info'); + } +} + +// Handle add product +function handleAddProduct() { + const formData = { + name: document.getElementById('productName').value, + category: document.getElementById('productCategory').value, + price: document.getElementById('productPrice').value, + stock: document.getElementById('productStock').value, + sku: document.getElementById('productSKU').value, + description: document.getElementById('productDescription').value + }; + + // In real app, would send to server + console.log('Adding product:', formData); + + // Close modal + const modal = bootstrap.Modal.getInstance(document.getElementById('addProductModal')); + modal.hide(); + + // Reset form + document.getElementById('addProductForm').reset(); + + // Show success message + showNotification('Product added successfully!', 'success'); +} + +// Show quick view +function showQuickView(productCard) { + const productName = productCard.querySelector('.card-title a').textContent; + const price = productCard.querySelector('.h5.text-primary').textContent; + const description = productCard.querySelector('.text-muted.small').textContent; + + // In a real app, this would open a modal with full product details + console.log('Quick view for:', productName); + showNotification(`Quick view: ${productName}`, 'info'); +} + +// Update cart counter +function updateCartCounter() { + // In real app, would update actual cart count + const cartCounter = document.querySelector('.cart-counter'); + if (cartCounter) { + const currentCount = parseInt(cartCounter.textContent) || 0; + cartCounter.textContent = currentCount + 1; + } +} + +// Show notification +function showNotification(message, type = 'info') { + const alertHtml = ` + + `; + + document.body.insertAdjacentHTML('beforeend', alertHtml); + + setTimeout(() => { + const alert = document.querySelector('.alert'); + if (alert) { + alert.remove(); + } + }, 3000); +} + +// Initialize on DOM ready +if (document.readyState === 'loading') { + document.addEventListener('DOMContentLoaded', initializeProducts); +} else { + initializeProducts(); +} \ No newline at end of file diff --git a/concept-modern/src/pages/apps/influencer-finder.html b/concept-modern/src/pages/apps/influencer-finder.html new file mode 100644 index 0000000..e07f32e --- /dev/null +++ b/concept-modern/src/pages/apps/influencer-finder.html @@ -0,0 +1,643 @@ +{{> layouts/main title="Influencer Finder" activeMenu="influencer" activePage="influencer-finder"}} + +{{#*inline "content"}} +
+ + {{> layouts/header}} + + + {{> layouts/sidebar activeMenu="influencer" activePage="influencer-finder"}} + + +
+
+
+ +
+
+
+

Influencer Finder

+

Discover and connect with influencers that match your brand's needs across various social media platforms.

+
+ +
+
+
+
+ + +
+
+
+
+
+
+ + +
+
+
+
+
+
+ +
+ +
+ +
+
+
+
+
+
+ Henry Barbara +
+
+
+

Henry Barbara

+
+ + + + + + 14 Reviews +
+
+
+

+ Salt Lake City, UT + Male + 29 Years Old +

+
+ Fitness + Life Style + Gym + Crossfit +
+
+
+
+
+
+
+ + View Profile +
+
+
+
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+
+
+ + +
+
+
+
+
+
+ Louis Mstara +
+
+
+

Louis Mstara

+
+ + + + + + 22 Reviews +
+
+
+

+ Avenal, CA, USA + Female + 24 Years Old +

+
+ Fashion + Beauty + Travel + Lifestyle +
+
+
+
+
+
+
+ + View Profile +
+
+
+
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+
+
+ + +
+
+
+
+
+
+ Nichole Oliver +
+
+
+

Nichole Oliver

+
+ + + + + + 18 Reviews +
+
+
+

+ 98 Richland Avenue, USA + Male + 34 Years Old +

+
+ Business + Tech + Startup + Finance +
+
+
+
+
+
+
+ + View Profile +
+
+
+
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+
+
+ + +
+
+
+
+
+
+ Pallavi Johnson +
+
+
+

Pallavi Johnson

+
+ + + + + + 32 Reviews +
+
+
+

+ 4427 Wines Lane, USA + Female + 29 Years Old +

+
+ Food + Cooking + Recipes + Healthy Living +
+
+
+
+
+
+
+ + View Profile +
+
+
+
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+
+
+ + + +
+ + +
+
+
+
Filter Results
+ + +
+ + +
+ + +
+ +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+
+ + +
+ +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+
+ + +
+ +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+
+ + +
+ + +
+ + +
+ + +
+ + +
+ + +
+
+
+
+
+
+
+ + + {{> layouts/footer}} +
+
+ + + + + +{{/inline}} + +{{> layouts/base}} \ No newline at end of file diff --git a/concept-modern/src/pages/apps/influencer-profile.html b/concept-modern/src/pages/apps/influencer-profile.html new file mode 100644 index 0000000..a3d2fb1 --- /dev/null +++ b/concept-modern/src/pages/apps/influencer-profile.html @@ -0,0 +1,633 @@ +{{> layouts/main title="Influencer Profile" activeMenu="influencer" activePage="influencer-profile"}} + +{{#*inline "content"}} +
+ + {{> layouts/header}} + + + {{> layouts/sidebar activeMenu="influencer" activePage="influencer-profile"}} + + +
+
+
+ +
+
+
+

Influencer Profile

+

View detailed information about influencer campaigns, packages, reviews, and engagement metrics.

+
+ +
+
+
+
+ +
+ +
+ +
+
+
+ Michael J. Christy +
+
+

Michael J. Christy

+

Project Manager @Influence

+
+
+ +
+
Contact Information
+ +
+ +
+
Rating
+

4.8

+
+ + + + + +
+

14 Reviews

+
+ +
+
Social Channels
+ +
+ +
+
Categories
+
+ Fitness + Life Style + Gym +
+
+
+
+ + +
+
+ + + + +
+ +
+ +
+

My Campaign Stats

+
+
+
+
+
+

9

+

Campaign Invitations

+
+
+
+
+
+
+

35

+

Finished Campaigns

+
+
+
+
+
+
+

8

+

Accepted Campaigns

+
+
+
+
+
+
+

1

+

Declined Campaigns

+
+
+
+
+ + +
+

Campaign List

+
+ + +
+
+
+ +
+

Slack Marketing Campaign 2025

+
+ + + Draft Due: 24 Jan 2025 + + + + Publish: 30 Feb 2025 + + + + Ends: 30 May 2025 + +
+
+
+
+
+
+
+
+
45k
+ Total Reach +
+
+
+
+
29k
+ Total Views +
+
+
+
+
5k
+ Total Clicks +
+
+
+
+
4k
+ Engagement +
+
+
+
+
2k
+ Conversion +
+
+
+
+
+ + +
+
+
+ +
+

Dribbble Design Contest 2025

+
+ + + Draft Due: 28 Jan 2025 + + + + Publish: 20 March 2025 + + + + Ends: 10 July 2025 + +
+
+
+
+
+
+
+
+
35k
+ Total Reach +
+
+
+
+
45k
+ Total Views +
+
+
+
+
8k
+ Total Clicks +
+
+
+
+
10k
+ Engagement +
+
+
+
+
3k
+ Conversion +
+
+
+
+
+ + +
+
+
+ +
+

Dropbox Business Solutions

+
+ + + Draft Due: 05 Feb 2025 + + + + Publish: 14 May 2025 + + + + Ends: 16 Aug 2025 + +
+
+
+
+
+
+
+
+
40k
+ Total Reach +
+
+
+
+
35k
+ Total Views +
+
+
+
+
5k
+ Total Clicks +
+
+
+
+
15k
+ Engagement +
+
+
+
+
14k
+ Conversion +
+
+
+
+
+
+ + +
+
+

My Packages

+
+
+ +
+
+
+

Basic

+
+
+

$150

+

Per Month Platform

+
+
+
    +
  • Facebook, Instagram, Pinterest, Snapchat
    • +
  • Guaranteed follower growth for increased brand awareness
    • +
  • Daily updates on chosen platforms
    • +
  • Stronger customer service through daily interaction
    • +
  • Monthly progress report
    • +
  • 1 Million Followers
    • +
+
+ Get Started +
+
+
+
+ + +
+
+
+ Popular +
+
+

Standard

+
+
+

$350

+

Per Month Platform

+
+
+
    +
  • Everything in Basic plan
    • +
  • 2 Blog Posts & 3 Social Posts
    • +
  • 5 Million Followers
    • +
  • Growth Result Analytics
    • +
  • Priority Support
    • +
  • Content Calendar
    • +
+
+ Get Started +
+
+
+
+ + +
+
+
+

Premium

+
+
+

$550

+

Per Month Platform

+
+
+
    +
  • Everything in Standard plan
    • +
  • 4 Blog Posts & 6 Social Posts
    • +
  • Unlimited Followers
    • +
  • Advanced Analytics Dashboard
    • +
  • Dedicated Account Manager
    • +
  • Custom Strategy Development
    • +
+
+ Contact Us +
+
+
+
+
+
+ + +
+
+
Campaign Reviews
+
+ +
+
+ + + + + +
+

"Quisque lobortis vestibulum elit, vel fermentum elit pretium et. Nullam id ultrices odio. Cras id nulla mollis, molestie diam eu, facilisis tortor. Mauris ultrices lectus laoreet commodo hendrerit. Nullam varius arcu sed aliquam imperdiet. Etiam ut luctus augue."

+
+ Tabitha C. Campbell + - Tech Innovations Inc. +
+
+ + +
+
+ + + + + +
+

"Maecenas rutrum viverra augue. Nulla in eros vitae ante ullamcorper congue. Praesent tristique massa ac arcu dapibus tincidunt. Mauris arcu mi, lacinia et ipsum vel, sollicitudin laoreet risus."

+
+ Luise M. Michet + - Digital Marketing Pro +
+
+ + +
+
+ + + + + +
+

"Cras non rutrum neque. Sed lacinia ex elit, vel viverra nisl faucibus eu. Aenean faucibus neque vestibulum condimentum maximus. In id porttitor nisi. Quisque sit amet commodo arcu, cursus pharetra elit. Nam tincidunt lobortis augueat euismod ante sodales non."

+
+ Gloria S. Castillo + - Creative Agency LLC +
+
+ + +
+
+ + + + + +
+

"Vestibulum cursus felis vel arcu convallis, viverra commodo felis bibendum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin non auctor est, sed lacinia velit. Orci varius natoque penatibus et magnis dis parturient montes nascetur ridiculus mus."

+
+ Virgina G. Lightfoot + - Fashion Brand Co. +
+
+ + +
+
+ + + + + +
+

"Integer pretium laoreet mi ultrices tincidunt. Suspendisse eget risus nec sapien malesuada ullamcorper eu ac sapien. Maecenas nulla orci, varius ac tincidunt non, ornare a sem. Aliquam sed massa volutpat, aliquet nibh sit amet, tincidunt ex. Donec interdum pharetra dignissim."

+
+ Ruby B. Matheny + - StartUp Ventures +
+
+
+
+ + + +
+ + +
+
+
Send Message to Michael
+
+
+
+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+
+
+
+
+
+
+
+
+
+
+
+ + + {{> layouts/footer}} +
+
+ + + +{{/inline}} + +{{> layouts/base}} \ No newline at end of file diff --git a/concept-modern/src/pages/ecommerce/checkout.html b/concept-modern/src/pages/ecommerce/checkout.html new file mode 100644 index 0000000..a290324 --- /dev/null +++ b/concept-modern/src/pages/ecommerce/checkout.html @@ -0,0 +1,378 @@ +{{> layouts/main title="Checkout" activeMenu="ecommerce" activePage="checkout"}} + +{{#*inline "content"}} +
+ + {{> layouts/header}} + + + {{> layouts/sidebar activeMenu="ecommerce" activePage="checkout"}} + + +
+
+
+ +
+
+
+

Checkout

+

Complete your purchase by providing shipping and payment information.

+
+ +
+
+
+
+ + +
+
+
+
+
+ +
+
Cart
+
+
+
+ +
+
Shipping
+
+
+
+ +
+
Payment
+
+
+
+ +
+
Confirm
+
+
+
+
+ +
+ +
+ +
+
+
Shipping Information
+
+
+
+
+
+ + +
+
+ + +
+
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+
+ + +
+
+ + +
+
+ + +
+
+ +
+ +
+ + +
+ +
+ + +
+
+
+
+ + +
+
+
Payment Information
+
+
+
+
+ + +
+
+ + +
+
+ + +
+
+ +
+
+ + + Full name as displayed on card +
+ +
+ +
+ + + + + + +
+
+ +
+
+ + +
+
+ + +
+
+
+ + + + +
+
+
+ + +
+
+
+
Order Summary
+
+
+ +
+
+
+ Product +
+
iPhone 15 Pro Max
+ 512GB, Natural Titanium +
Qty: 1
+
+
+ $1,399 +
+ +
+
+ Product +
+
AirPods Pro
+ 2nd Generation +
Qty: 1
+
+
+ $249 +
+
+ +
+ + +
+ +
+ + +
+
+ +
+ + +
+
+ Subtotal + $1,648.00 +
+
+ Shipping + $15.00 +
+
+ Tax + $149.67 +
+
+
+ Total + $1,812.67 +
+
+ + + +
+ + + Secure checkout powered by SSL encryption + +
+
+
+ + +
+
+
We Accept
+
+ + + + +
+
+
+
+ + Free Shipping +
+
+ + 30-Day Returns +
+
+ + Secure Checkout +
+
+
+
+
+
+
+
+ + + {{> layouts/footer}} +
+
+ + + + + +{{/inline}} + +{{> layouts/base}} \ No newline at end of file diff --git a/concept-modern/src/pages/ecommerce/product-single.html b/concept-modern/src/pages/ecommerce/product-single.html new file mode 100644 index 0000000..b23bf40 --- /dev/null +++ b/concept-modern/src/pages/ecommerce/product-single.html @@ -0,0 +1,574 @@ +{{> layouts/main title="Product Details" activeMenu="ecommerce" activePage="product-single"}} + +{{#*inline "content"}} +
+ + {{> layouts/header}} + + + {{> layouts/sidebar activeMenu="ecommerce" activePage="product-single"}} + + +
+
+
+ +
+
+
+

Product Details

+

View detailed product information, specifications, and customer reviews.

+
+ +
+
+
+
+ + +
+
+
+
+
+ +
+
+
+ Product +
+
+ Thumb 1 + Thumb 2 + Thumb 3 + Thumb 4 +
+
+
+ + +
+
+

Apple iPhone 15 Pro Max

+
+
+ + + + + + (4.5) +
+ | + 125 Reviews + | + In Stock +
+ +
+

$1,199.00

+ $1,399.00 + -14% OFF +
+ +

The iPhone 15 Pro Max features a strong and light titanium design with a 6.7-inch Super Retina XDR display. It's powered by the A17 Pro chip with pro-level GPU performance.

+ + +
+
+ +
+ + + + + + + + + + + +
+
+ +
+ +
+ + + + + + + + +
+
+ +
+ +
+ + + +
+
+
+ + +
+ + + +
+ + +
+

SKU: APL-IP15PM-512

+

Category: Electronics, Smartphones

+

Tags: + iPhone + Apple + 5G + Pro Camera +

+
+
+
+
+
+
+
+
+ + +
+
+
+
+ +
+
+
+ +
+
Product Description
+

The iPhone 15 Pro Max is forged in titanium and features the groundbreaking A17 Pro chip, a customizable Action button, and the most powerful iPhone camera system ever.

+ +
Key Features:
+
    +
  • 6.7-inch Super Retina XDR display with ProMotion
    • +
  • A17 Pro chip with 6-core GPU
    • +
  • Pro camera system (48MP Main, 12MP Ultra Wide, 12MP 5x Telephoto)
    • +
  • Up to 29 hours of video playback
    • +
  • USB-C connector with USB 3 support
    • +
  • Emergency SOS via satellite
    • +
  • Crash Detection
    • +
+ +
What's in the Box:
+
    +
  • iPhone 15 Pro Max
    • +
  • USB-C Charge Cable (1m)
    • +
  • Documentation
    • +
+
+ + +
+
Technical Specifications
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Display6.7-inch (diagonal) all-screen OLED display, 2796×1290-pixel resolution at 460 ppi
ChipA17 Pro chip, 6-core CPU with 2 performance and 4 efficiency cores, 6-core GPU, 16-core Neural Engine
CameraPro camera system: 48MP Main, 12MP Ultra Wide, 12MP 5x Telephoto
Video Recording4K video recording at 24/25/30/60 fps, ProRes video recording
Battery LifeVideo playback: Up to 29 hours, Audio playback: Up to 95 hours
Dimensions159.9 × 76.7 × 8.25 mm
Weight221 grams
Water ResistanceIP68 (maximum depth of 6 meters up to 30 minutes)
+
+
+ + +
+
+
+
Customer Reviews
+
+

4.5

+
+ + + + + +
+

Based on 125 reviews

+
+ + +
+
+ 5 + +
+
+
+ 65% +
+
+ 4 + +
+
+
+ 20% +
+
+ 3 + +
+
+
+ 10% +
+
+ 2 + +
+
+
+ 3% +
+
+ 1 + +
+
+
+ 2% +
+
+ + +
+ +
+ +
+
+
+
+ John Doe +
+ + + + + +
+
+ 2 days ago +
+

Amazing phone! The camera quality is outstanding and the titanium build feels premium. Battery life is excellent too.

+
+ +
+
+
+ Jane Smith +
+ + + + + +
+
+ 1 week ago +
+

Great upgrade from my iPhone 13. The Action button is very useful. Only complaint is the price, but you get what you pay for.

+
+ +
+
+
+ Mike Johnson +
+ + + + + +
+
+ 2 weeks ago +
+

The A17 Pro chip is incredibly fast. Gaming performance is console-level. The 5x zoom camera is a game changer for photography.

+
+
+ + +
+
+
+
+
+
+
+
+ + +
+
+
+
+
Related Products
+
+
+
+
+
+
+ Product +
+
+
+ iPhone 15 Pro +
+
+ + + + + +
+
+ $999 + +
+
+
+
+ +
+
+
+ Product +
+
+
+ AirPods Pro +
+
+ + + + + +
+
+ $249 + +
+
+
+
+ +
+
+
+ Product +
+
+
+ MagSafe Charger +
+
+ + + + + +
+
+ $39 + +
+
+
+
+ +
+
+
+
+ +
+
+
+
+ iPhone Case +
+
+ + + + + +
+
+ $59 + +
+
+
+
+
+
+
+
+
+
+
+ + + {{> layouts/footer}} +
+
+ + + + + + + + +{{/inline}} + +{{> layouts/base}} \ No newline at end of file diff --git a/concept-modern/src/pages/ecommerce/products.html b/concept-modern/src/pages/ecommerce/products.html new file mode 100644 index 0000000..c9aa903 --- /dev/null +++ b/concept-modern/src/pages/ecommerce/products.html @@ -0,0 +1,578 @@ +{{> layouts/main title="Products" activeMenu="ecommerce" activePage="products"}} + +{{#*inline "content"}} +
+ + {{> layouts/header}} + + + {{> layouts/sidebar activeMenu="ecommerce" activePage="products"}} + + +
+
+
+ +
+
+
+

Products

+

Browse and manage your product catalog with advanced filtering and search capabilities.

+
+ +
+
+
+
+ + +
+
+
+
+
+
+
+ + +
+
+
+
+ + + +
+
+
+
+
+
+
+ + +
+
+
+
+
+
Total Products
+

2,386

+
+
+ +
+
+
+
+
+
+
+
+
Active Products
+

1,953

+
+
+ +
+
+
+
+
+
+
+
+
Out of Stock
+

147

+
+
+ +
+
+
+
+
+
+
+
+
Categories
+

24

+
+
+ +
+
+
+
+
+ + +
+ +
+
+
+ Product + -20% +
+ + +
+
+
+
+ Apple iPhone 15 Pro +
+
+ + + + + + (125) +
+

Latest flagship smartphone with advanced features

+
+
+ $999 + $1,199 +
+ In Stock +
+
+
+ +
+
+
+ + +
+
+
+ Product + New +
+ + +
+
+
+
+ MacBook Pro 16" +
+
+ + + + + + (89) +
+

Professional laptop with M3 Pro chip

+
+
+ $2,499 +
+ In Stock +
+
+
+ +
+
+
+ + +
+
+
+ Product +
+ + +
+
+
+
+ Sony WH-1000XM5 +
+
+ + + + + + (156) +
+

Premium noise-canceling headphones

+
+
+ $399 +
+ Low Stock +
+
+
+ +
+
+
+ + +
+
+
+ Product + Hot +
+ + +
+
+
+
+ Samsung Galaxy S24 +
+
+ + + + + + (98) +
+

Android flagship with AI features

+
+
+ $899 +
+ Out of Stock +
+
+
+ +
+
+
+ + +
+
+
+
+ +
+
+ + +
+
+
+
+ Dell XPS 13 +
+
+ + + + + + (67) +
+

Ultra-portable laptop with stunning display

+
+
+ $1,299 +
+ In Stock +
+
+
+ +
+
+
+ +
+
+
+
+ +
+ Popular +
+ + +
+
+
+
+ iPad Pro 12.9" +
+
+ + + + + + (203) +
+

Professional tablet with M2 chip

+
+
+ $1,099 +
+ In Stock +
+
+
+ +
+
+
+ +
+
+
+
+ +
+
+ + +
+
+
+
+ Canon EOS R6 +
+
+ + + + + + (45) +
+

Full-frame mirrorless camera

+
+
+ $2,499 +
+ In Stock +
+
+
+ +
+
+
+ +
+
+
+
+ +
+ -15% +
+ + +
+
+
+
+ PlayStation 5 +
+
+ + + + + + (512) +
+

Next-gen gaming console

+
+
+ $425 + $499 +
+ Low Stock +
+
+
+ +
+
+
+
+ + +
+
+ +
+
+
+
+ + + {{> layouts/footer}} +
+
+ + + + + + +{{/inline}} + +{{> layouts/base}} \ No newline at end of file diff --git a/concept-modern/src/partials/layouts/sidebar.hbs b/concept-modern/src/partials/layouts/sidebar.hbs index 4c5a8df..eff7bbc 100644 --- a/concept-modern/src/partials/layouts/sidebar.hbs +++ b/concept-modern/src/partials/layouts/sidebar.hbs @@ -107,6 +107,30 @@ + +
  • + + E-Commerce + New + + +
    • +
  • Features
    • @@ -161,6 +185,26 @@ + +
  • + + Influencer + + +
    • +
  • System
    • diff --git a/concept-modern/src/scss/main.scss b/concept-modern/src/scss/main.scss index 31573a0..901b9c3 100644 --- a/concept-modern/src/scss/main.scss +++ b/concept-modern/src/scss/main.scss @@ -27,11 +27,15 @@ // Pages @import "pages/dashboard"; @import "pages/influencer"; +@import "pages/influencer-finder"; @import "pages/calendar"; @import "pages/chat"; @import "pages/settings"; @import "pages/users"; @import "pages/timeline"; +@import "pages/products"; +@import "pages/product-single"; +@import "pages/checkout"; // Utilities @import "utilities/scrollbar"; \ No newline at end of file diff --git a/concept-modern/src/scss/pages/_checkout.scss b/concept-modern/src/scss/pages/_checkout.scss new file mode 100644 index 0000000..229bb6b --- /dev/null +++ b/concept-modern/src/scss/pages/_checkout.scss @@ -0,0 +1,181 @@ +// Checkout Page Styles + +// Checkout steps +.checkout-steps { + display: flex; + justify-content: space-between; + margin-bottom: 2rem; + position: relative; + + &::before { + content: ''; + position: absolute; + top: 25px; + left: 0; + right: 0; + height: 2px; + background: #e9ecef; + z-index: 0; + } + + .step { + flex: 1; + text-align: center; + position: relative; + z-index: 1; + + .step-icon { + width: 50px; + height: 50px; + margin: 0 auto; + background: #e9ecef; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + font-size: 1.25rem; + color: #6c757d; + transition: all 0.3s ease; + } + + .step-title { + margin-top: 0.5rem; + font-size: 0.875rem; + color: #6c757d; + transition: color 0.3s ease; + } + + &.active { + .step-icon { + background: $primary; + color: white; + box-shadow: 0 2px 10px rgba($primary, 0.3); + } + + .step-title { + color: $primary; + font-weight: 500; + } + } + + &.completed { + .step-icon { + background: $success; + color: white; + + i { + display: none; + } + + &::after { + content: '\f00c'; + font-family: 'Font Awesome 5 Free'; + font-weight: 900; + } + } + + .step-title { + color: $success; + } + } + } +} + +// Order items +.order-item { + img { + border-radius: 0.25rem; + object-fit: cover; + } +} + +// Payment methods +.payment-methods { + .form-check { + padding: 0.75rem 1rem; + border: 1px solid #e9ecef; + border-radius: 0.25rem; + transition: all 0.2s ease; + + &:hover { + background-color: #f8f9fa; + } + + .form-check-input:checked ~ .form-check-label { + color: $primary; + font-weight: 500; + } + } +} + +// Payment icons +.payment-icons { + i { + transition: opacity 0.2s ease; + opacity: 0.6; + + &:hover { + opacity: 1; + } + } +} + +// Card form +#creditCardForm { + .input-group-text { + background: white; + + i { + transition: opacity 0.2s ease; + opacity: 0.3; + } + } +} + +// Trust badges +.trust-badges { + .fas { + font-size: 1.5rem; + color: $primary; + } +} + +// Responsive adjustments +@media (max-width: 991.98px) { + .checkout-steps { + .step-title { + font-size: 0.75rem; + } + + .step-icon { + width: 40px; + height: 40px; + font-size: 1rem; + } + } +} + +@media (max-width: 575.98px) { + .checkout-steps { + &::before { + display: none; + } + + .step { + .step-title { + display: none; + } + } + } + + .order-item { + .d-flex { + flex-direction: column; + text-align: center; + + img { + margin: 0 auto 0.5rem !important; + } + } + } +} \ No newline at end of file diff --git a/concept-modern/src/scss/pages/_influencer-finder.scss b/concept-modern/src/scss/pages/_influencer-finder.scss new file mode 100644 index 0000000..c7b1603 --- /dev/null +++ b/concept-modern/src/scss/pages/_influencer-finder.scss @@ -0,0 +1,286 @@ +// Influencer Finder Page Styles + +// Search form +.influencer-search-form { + .input-group { + .form-control { + border-right: 0; + + &:focus { + box-shadow: none; + border-color: #ced4da; + } + } + + .btn { + border-left: 0; + padding: 0.5rem 1.5rem; + } + } +} + +// Influencer cards +.influencer-card { + transition: all 0.3s ease; + border: 1px solid #e9ecef; + + &:hover { + transform: translateY(-2px); + box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08); + } + + .card-body { + padding: 1.5rem; + } +} + +// Influencer profile section +.influencer-profile { + .user-avatar { + flex-shrink: 0; + } + + .user-avatar-xl { + width: 80px; + height: 80px; + object-fit: cover; + } + + .influencer-info { + h3 { + font-size: 1.375rem; + font-weight: 600; + margin-bottom: 0; + } + + .rating-star { + font-size: 0.875rem; + } + } + + .influencer-details { + p { + font-size: 0.875rem; + color: #6c757d; + + i { + font-size: 0.75rem; + } + } + + .badge { + font-weight: normal; + padding: 0.35em 0.75em; + font-size: 0.75rem; + + &:hover { + background-color: $primary !important; + color: white !important; + } + } + } +} + +// Influencer actions +.influencer-actions { + .btn { + font-size: 0.875rem; + padding: 0.375rem 1rem; + + &.btn-outline-secondary { + border-color: #dee2e6; + + &:hover { + background-color: #ffc107; + border-color: #ffc107; + color: white; + + i { + color: white; + } + } + } + } +} + +// Social stats box +.user-social-box { + background-color: #f8f9fa; + margin: 0 -1.5rem; + padding: 1rem 1.5rem; + + .social-stat { + i { + font-size: 1.25rem; + margin-bottom: 0.25rem; + display: block; + } + + span { + font-size: 0.875rem; + color: #495057; + transition: transform 0.2s ease; + display: inline-block; + } + + &:hover span { + transform: scale(1.1); + } + } +} + +// Filter sidebar +.filter-sidebar { + position: sticky; + top: 1rem; + + .card-title { + font-size: 1.125rem; + margin-bottom: 1rem; + } + + .form-label { + font-size: 0.875rem; + margin-bottom: 0.75rem; + color: #495057; + } + + .form-select, + .form-control { + font-size: 0.875rem; + } + + .form-check { + margin-bottom: 0.5rem; + + .form-check-label { + font-size: 0.875rem; + cursor: pointer; + + i { + width: 16px; + text-align: center; + } + } + } + + .rating-filter { + .form-check-label { + display: flex; + align-items: center; + + i { + font-size: 0.75rem; + margin-right: 1px; + } + + .text-muted { + margin-left: 0.5rem; + } + } + } +} + +// Pagination +.pagination { + .page-link { + color: #495057; + border-radius: 0.25rem; + margin: 0 2px; + + &:hover { + background-color: #e9ecef; + border-color: #dee2e6; + } + + &:focus { + box-shadow: none; + } + } + + .page-item.active .page-link { + background-color: $primary; + border-color: $primary; + } +} + +// Mobile responsive adjustments +@media (max-width: 991.98px) { + .influencer-profile { + .influencer-info h3 { + font-size: 1.125rem; + } + } + + .influencer-actions { + .btn { + font-size: 0.75rem; + padding: 0.25rem 0.75rem; + } + } + + .filter-sidebar { + position: static; + margin-bottom: 2rem; + } +} + +@media (max-width: 767.98px) { + .influencer-profile { + flex-direction: column; + text-align: center; + + .user-avatar { + margin-bottom: 1rem; + } + + .influencer-info { + text-align: center; + + h3 { + font-size: 1rem; + } + } + } + + .user-social-box { + .row { + font-size: 0.75rem; + } + + .social-stat { + i { + font-size: 1rem; + } + + span { + font-size: 0.75rem; + } + } + } +} + +// Animation for social stats +@keyframes statPulse { + 0% { + transform: scale(1); + } + 50% { + transform: scale(1.1); + } + 100% { + transform: scale(1); + } +} + +.social-stat { + animation: statPulse 2s ease-in-out infinite; + animation-delay: calc(var(--stat-index) * 0.2s); + + &:nth-child(1) { --stat-index: 0; } + &:nth-child(2) { --stat-index: 1; } + &:nth-child(3) { --stat-index: 2; } + &:nth-child(4) { --stat-index: 3; } + &:nth-child(5) { --stat-index: 4; } + &:nth-child(6) { --stat-index: 5; } +} \ No newline at end of file diff --git a/concept-modern/src/scss/pages/_product-single.scss b/concept-modern/src/scss/pages/_product-single.scss new file mode 100644 index 0000000..b57cb4b --- /dev/null +++ b/concept-modern/src/scss/pages/_product-single.scss @@ -0,0 +1,222 @@ +// Product Single Page Styles + +.product-images { + .main-image { + text-align: center; + background: #f8f9fa; + padding: 2rem; + border-radius: 0.5rem; + + img { + max-height: 500px; + width: auto; + cursor: zoom-in; + transition: transform 0.3s ease; + + &:hover { + transform: scale(1.05); + } + } + } + + .image-thumbnails { + overflow-x: auto; + white-space: nowrap; + padding: 0.5rem 0; + + img { + cursor: pointer; + transition: all 0.2s ease; + opacity: 0.6; + border: 2px solid transparent; + + &:hover { + opacity: 1; + border-color: $primary; + } + + &.active { + opacity: 1; + border-color: $primary; + } + } + } +} + +.product-info { + .rating { + font-size: 1.125rem; + } + + .price { + h3 { + font-size: 2rem; + font-weight: 600; + } + + del { + font-size: 1.25rem; + } + } + + .product-options { + .btn-check:checked + .btn { + background-color: $primary; + color: white; + border-color: $primary; + } + + .input-group { + .form-control { + border-left: 0; + border-right: 0; + + &:focus { + box-shadow: none; + border-color: #ced4da; + } + } + } + } + + .product-meta { + border-top: 1px solid #e9ecef; + padding-top: 1rem; + margin-top: 2rem; + + .badge { + font-weight: normal; + padding: 0.35em 0.65em; + + &:hover { + background-color: $primary !important; + color: white !important; + } + } + } +} + +// Product tabs +.nav-tabs { + .nav-link { + color: #495057; + border: 0; + border-bottom: 2px solid transparent; + padding: 0.75rem 1.5rem; + + &:hover { + border-color: transparent; + color: $primary; + } + + &.active { + color: $primary; + background-color: transparent; + border-color: transparent; + border-bottom-color: $primary; + } + } +} + +// Reviews section +.rating-breakdown { + .progress { + background-color: #e9ecef; + } +} + +.review-item { + .rating { + font-size: 0.875rem; + } +} + +// Star rating widget +.star-rating { + font-size: 1.5rem; + + i { + cursor: pointer; + color: #ddd; + transition: color 0.2s ease; + + &:hover, + &.fas { + color: #ffc107; + } + } +} + +// Related products +.product-card { + transition: transform 0.2s ease, box-shadow 0.2s ease; + + &:hover { + transform: translateY(-5px); + box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1); + } + + .card-header { + border: 0; + background: #f8f9fa; + + img { + transition: transform 0.3s ease; + } + + &:hover img { + transform: scale(1.05); + } + } + + .placeholder-image { + transition: background-color 0.2s ease; + + &:hover { + background-color: darken(#f8f9fa, 5%) !important; + } + } +} + +// Responsive adjustments +@media (max-width: 991.98px) { + .product-info { + margin-top: 2rem; + } + + .product-options { + .color-options, + .storage-options { + flex-wrap: wrap; + + .btn { + margin-bottom: 0.5rem; + } + } + } +} + +@media (max-width: 575.98px) { + .product-images { + .main-image { + padding: 1rem; + + img { + max-height: 300px; + } + } + } + + .price h3 { + font-size: 1.5rem; + } + + .d-flex.gap-2 { + flex-direction: column; + + > * { + width: 100%; + margin-bottom: 0.5rem; + } + } +} \ No newline at end of file diff --git a/concept-modern/src/scss/pages/_products.scss b/concept-modern/src/scss/pages/_products.scss new file mode 100644 index 0000000..9d8480f --- /dev/null +++ b/concept-modern/src/scss/pages/_products.scss @@ -0,0 +1,205 @@ +// E-commerce Products Page Styles + +.dashboard-ecommerce { + // Product card styles + .product-card { + transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out; + overflow: hidden; + + &:hover { + transform: translateY(-5px); + box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); + + .product-actions { + opacity: 1; + visibility: visible; + } + } + + .card-header { + position: relative; + overflow: hidden; + border-bottom: 0; + + img { + transition: transform 0.3s ease-in-out; + } + + &:hover img { + transform: scale(1.05); + } + } + + .placeholder-image { + transition: background-color 0.2s ease-in-out; + + &:hover { + background-color: darken(#f8f9fa, 5%) !important; + } + } + + .product-actions { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + display: flex; + gap: 0.5rem; + opacity: 0; + visibility: hidden; + transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out; + + .btn { + background: rgba(255, 255, 255, 0.9); + backdrop-filter: blur(5px); + border: 1px solid rgba(0, 0, 0, 0.1); + + &:hover { + background: white; + transform: translateY(-2px); + } + } + } + + .card-title { + font-size: 1rem; + + a { + transition: color 0.2s ease-in-out; + + &:hover { + color: $primary !important; + } + } + } + + .badge { + font-size: 0.75rem; + padding: 0.35em 0.65em; + } + + .card-footer { + border-top: 1px solid rgba(0, 0, 0, 0.05); + + .btn { + transition: all 0.2s ease-in-out; + + &:hover { + transform: translateY(-1px); + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); + } + + &:disabled { + cursor: not-allowed; + } + } + } + } + + // Filter section + .form-select { + min-width: 150px; + + @media (max-width: 575.98px) { + min-width: 100%; + margin-bottom: 0.5rem; + } + } + + // Search input + .input-group { + .form-control { + border-right: 0; + + &:focus { + border-color: #ced4da; + box-shadow: none; + + + .btn { + border-color: $primary; + } + } + } + + .btn { + border-left: 0; + transition: all 0.2s ease-in-out; + } + } + + // Stats cards + .card-body { + .fa-2x { + opacity: 0.3; + transition: opacity 0.2s ease-in-out; + } + + &:hover .fa-2x { + opacity: 0.5; + } + } + + // Rating stars + .fa-star, + .fa-star-half-alt { + font-size: 0.875rem; + } + + // Pagination + .pagination { + .page-link { + color: #495057; + border-radius: 0.25rem; + margin: 0 2px; + + &:hover { + background-color: #f8f9fa; + border-color: #dee2e6; + } + + &:focus { + box-shadow: none; + } + } + + .page-item { + &.active .page-link { + background-color: $primary; + border-color: $primary; + } + + &.disabled .page-link { + background-color: transparent; + } + } + } + + // Modal styles + .modal-content { + border: 0; + box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1); + } + + // Responsive adjustments + @media (max-width: 991.98px) { + .product-card { + .card-title { + font-size: 0.9rem; + } + + .text-muted.small { + font-size: 0.8rem; + } + } + } + + @media (max-width: 575.98px) { + .d-flex.gap-2 { + flex-direction: column; + + > * { + width: 100%; + } + } + } +} \ No newline at end of file diff --git a/concept-modern/vite.config.js b/concept-modern/vite.config.js index 4092a9e..5dae003 100644 --- a/concept-modern/vite.config.js +++ b/concept-modern/vite.config.js @@ -58,10 +58,15 @@ export default defineConfig({ // Tables 'general-tables': resolve(__dirname, 'src/pages/tables/general-tables.html'), 'data-tables': resolve(__dirname, 'src/pages/tables/data-tables.html'), + // E-Commerce + 'products': resolve(__dirname, 'src/pages/ecommerce/products.html'), + 'product-single': resolve(__dirname, 'src/pages/ecommerce/product-single.html'), + 'checkout': resolve(__dirname, 'src/pages/ecommerce/checkout.html'), // Apps 'calendar': resolve(__dirname, 'src/pages/calendar.html'), 'chat': resolve(__dirname, 'src/pages/chat.html'), 'inbox': resolve(__dirname, 'src/pages/inbox.html'), + 'influencer-finder': resolve(__dirname, 'src/pages/apps/influencer-finder.html'), // Settings 'settings': resolve(__dirname, 'src/pages/settings.html'), // User Management