-
Notifications
You must be signed in to change notification settings - Fork 0
/
brand.js
146 lines (132 loc) · 8.49 KB
/
brand.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
document.getElementById('nicheForm').addEventListener('submit', function(event) {
event.preventDefault(); // Prevent form submission
const niche = document.getElementById('niche').value;
const brandGrid = document.getElementById('brandGrid');
const collaborationResults = document.getElementById('collaborationResults');
// Clear previous results
brandGrid.innerHTML = '';
// Define brand suggestions based on niche
const brands = {
tech: [
{ name: 'Tech Innovators', contact: '[email protected]', criteria: 'Must have 10k+ followers', img: 'brand1.png' },
{ name: 'Gadget World', contact: '[email protected]', criteria: 'Tech reviews required', img: 'brand2.png' },
{ name: 'Future Tech', contact: '[email protected]', criteria: 'Must post tech tutorials', img: 'brand3.jpg' },
{ name: 'Smart Home Co.', contact: '[email protected]', criteria: 'Focus on home automation', img: 'brand4.jpg' },
{ name: 'Wearable Tech', contact: '[email protected]', criteria: 'Must feature wearable devices', img: 'brand5.png' }
],
fashion: [
{ name: 'Chic Styles', contact: '[email protected]', criteria: 'Must have a fashion blog', img: 'brand6.jpg' },
{ name: 'Fashion Hub', contact: '[email protected]', criteria: 'Must post outfit ideas', img: 'brand7.jpg' },
{ name: 'Trendy Threads', contact: '[email protected]', criteria: 'Focus on sustainable fashion', img: 'brand8.jpg' },
{ name: 'Glamour Boutique', contact: '[email protected]', criteria: 'Must have a strong Instagram presence', img: 'brand9.png' },
{ name: 'Style Savvy', contact: '[email protected]', criteria: 'Must feature seasonal trends', img: 'brand10.png' }
],
food: [
{ name: 'Gourmet Delights', contact: '[email protected]', criteria: 'Must post recipes', img: 'brand11.jpg' },
{ name: 'Healthy Eats', contact: '[email protected]', criteria: 'Focus on healthy living', img: 'brand12.png' },
{ name: 'Snack Attack', contact: '[email protected]', criteria: 'Must feature snack reviews', img: 'brand13.webp' },
{ name: 'Culinary Creations', contact: '[email protected]', criteria: 'Must have cooking tutorials', img: 'brand14.png' },
{ name: 'Beverage Bliss', contact: '[email protected]', criteria: 'Focus on drink recipes', img: 'brand15.png' }
],
lifestyle: [
{ name: 'Daily Life', contact: '[email protected]', criteria: 'Must post lifestyle tips', img: 'brand31.png' },
{ name: 'Home Decor', contact: '[email protected]', criteria: 'Focus on home decor inspiration', img: 'brand32.jpg' },
{ name: 'Wellness Wisdom', contact: '[email protected]', criteria: 'Must post wellness advice', img: 'brand33.png' },
{ name: 'Personal Growth', contact: '[email protected]', criteria: 'Must feature personal development', img: 'brand34.jpg' },
{ name: 'Relationship Goals', contact: '[email protected]', criteria: 'Focus on relationship advice', img: 'brand35.png' }
],
beauty: [
{ name: 'Beauty Buzz', contact: '[email protected]', criteria: 'Must post beauty tutorials', img: 'brand36.jpg' },
{ name: 'Skincare Savvy', contact: '[email protected]', criteria: 'Focus on skincare routines', img: 'brand37.avif' },
{ name: 'Makeup Mastery', contact: '[email protected]', criteria: 'Must feature makeup tutorials', img: 'brand38.jpg' },
{ name: 'Hair Care Hub', contact: '[email protected]', criteria: 'Must post hair care tips', img: 'brand39.avif' },
{ name: 'Nail Artistry', contact: '[email protected]', criteria: 'Focus on nail art designs', img: 'brand40.jpg' }
],
parenting: [
{ name: 'Parenting Pro', contact: '[email protected]', criteria: 'Must post parenting tips', img: 'brand41.jpg' },
{ name: 'Kids\' Corner', contact: '[email protected]', criteria: 'Focus on kids\' activities', img: 'brand42.jpg' },
{ name: 'Family Fun', contact: '[email protected]', criteria: 'Must feature family bonding ideas', img: 'brand43.jpg' },
{ name: 'Baby Bliss', contact: '[email protected]', criteria: 'Must post baby care tips', img: 'brand44.avif' },
{ name: 'Toddler Tales', contact: '[email protected]', criteria: 'Focus on toddler development', img: 'brand45.jpg' }
],
finance: [
{ name: 'Financial Freedom', contact: '[email protected]', criteria: 'Must post financial tips', img: 'brand46.png' },
{ name: 'Investment Insights', contact: '[email protected]', criteria: 'Focus on investment strategies', img: 'brand47.png' },
{ name: 'Money Matters', contact: '[email protected]', criteria: 'Must feature money management advice', img: 'brand48.png' },
{ name: 'Wealth Wisdom', contact: '[email protected]', criteria: 'Must post wealth-building strategies', img: 'brand49.jpg' },
{ name: 'Credit Counsel', contact: '[email protected]', criteria: 'Focus on credit management', img: 'brand50.webp' }
]
};
const selectedBrands = brands[niche];
if (!selectedBrands) {
collaborationResults.style.display = 'block';
brandGrid.innerHTML = '<p>No brands found for the selected niche.</p>';
return;
}
// Create slides for each brand
selectedBrands.forEach((brand, index) => {
const slide = document.createElement('div');
slide.classList.add('brand-slide');
if (index === 0) slide.classList.add('active'); // Show the first slide by default
slide.innerHTML = `
<img src="${brand.img}" alt="${brand.name}">
<h3 class="animated-piece">${brand.name}</h3>
<p class="animated-piece">Contact: ${brand.contact}</p>
<p class="animated-piece">Criteria: ${brand.criteria}</p>
`;
brandGrid.appendChild(slide);
});
// Display the slideshow
collaborationResults.style.display = 'block';
// Slideshow functionality
// Slideshow functionality
let currentIndex = 0;
const slides = document.querySelectorAll('.brand-slide');
const prevButton = document.createElement('button');
const nextButton = document.createElement('button');
prevButton.textContent = '❮';
nextButton.textContent = '❯';
// Function to show the current slide
function showSlide(index) {
slides.forEach((slide, i) => {
slide.classList.remove('active');
if (i === index) {
slide.classList.add('active');
slide.style.display = 'flex'; // Show the active slide
setTimeout(() => {
slide.style.opacity = 1; // Fade in effect
}, 10); // Small timeout to allow the display change to take effect
} else {
slide.style.opacity = 0; // Fade out effect
setTimeout(() => {
slide.style.display = 'none'; // Hide non-active slides
}, 500); // Match this duration with the CSS transition duration
}
});
}
// Event listeners for navigation buttons
prevButton.addEventListener('click', () => {
currentIndex = (currentIndex - 1 + slides.length) % slides.length;
showSlide(currentIndex);
updateButtons();
});
nextButton.addEventListener('click', () => {
currentIndex = (currentIndex + 1) % slides.length;
showSlide(currentIndex);
updateButtons();
});
// Create navigation buttons container
const navButtons = document.createElement('div');
navButtons.classList.add('nav-buttons');
navButtons.appendChild(prevButton);
navButtons.appendChild(nextButton);
collaborationResults.appendChild(navButtons);
// Function to update button states
function updateButtons() {
prevButton.disabled = currentIndex === 0;
nextButton.disabled = currentIndex === slides.length - 1;
}
// Initialize the slideshow
showSlide(currentIndex); // Show the first slide
updateButtons(); // Initialize button states
});