| 40 |
0 |
0 |
40 |
A |
T |
0 |
1734958800 |
0 |
|
0 |
N |
0 |
0 |
activity |
en |
Suppliers |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Suppliers</title>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Poppins', sans-serif;
margin: 0;
padding: 0;
}
.search-container {
text-align: center;
padding: 20px;
background: white;
box-shadow: 0 5px 15px rgba(0,0,0,0.05);
margin-bottom: 20px;
}
.continent-filters {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
padding: 15px;
margin-bottom: 20px;
}
.continent-btn {
padding: 10px 20px;
border-radius: 50px;
background: white;
border: 2px solid #28A745;
color: #28A745;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}
.continent-btn:hover, .continent-btn.active {
background: #28A745;
color: white;
transform: translateY(-2px);
box-shadow: 0 6px 12px rgba(0,0,0,0.1);
}
.vendor-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 20px;
padding: 20px;
max-width: 1200px;
margin: 0 auto;
min-height: 300px;
position: relative;
}
.vendor-item {
display: flex;
align-items: center;
background: white;
border-radius: 16px;
box-shadow: 0 10px 30px rgba(0,0,0,0.05);
overflow: hidden;
transition: all 0.3s ease;
text-decoration: none;
position: relative;
}
.vendor-item:hover {
transform: translateY(-5px);
box-shadow: 0 15px 35px rgba(0,0,0,0.1);
}
.vendor-item::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 5px;
background: linear-gradient(90deg, #28A745, #70ab4b);
}
.vendor-logo {
flex-shrink: 0;
width: 100px;
height: 100px;
display: flex;
justify-content: center;
align-items: center;
padding: 15px;
}
.vendor-logo img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
border-radius: 8px;
}
.vendor-info {
padding: 20px;
flex-grow: 1;
}
.vendor-info h3 {
margin: 0 0 5px 0;
color: #333;
font-size: 18px;
}
.vendor-info p {
margin: 0;
color: #6b7280;
font-size: 14px;
}
.pagination {
display: flex;
justify-content: center;
margin: 30px 0;
gap: 10px;
}
.pagination button {
padding: 10px 20px;
border-radius: 50px;
border: none;
background: #28A745;
color: white;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
}
.pagination button:disabled {
background: #e0e0e0;
cursor: not-allowed;
}
#search-box {
padding: 12px 20px;
border-radius: 50px;
border: 2px solid #e0e0e0;
font-size: 16px;
width: 60%;
max-width: 500px;
outline: none;
transition: all 0.3s ease;
}
#search-box:focus {
border-color: #28A745;
}
.search-btn {
padding: 12px 25px;
border-radius: 50px;
background: #28A745;
color: white;
border: none;
font-weight: 600;
cursor: pointer;
margin-left: 10px;
transition: all 0.3s ease;
}
.search-btn:hover {
background: #218838;
transform: translateY(-2px);
}
.no-results {
text-align: center;
padding: 40px;
grid-column: 1 / -1;
color: #6b7280;
}
/* Modern Spinner Styles */
.loader-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.9);
display: flex;
justify-content: center;
align-items: center;
z-index: 100;
border-radius: 16px;
}
.modern-spinner {
width: 50px;
height: 50px;
display: inline-block;
border: 3px solid rgba(40, 167, 69, 0.3);
border-radius: 50%;
border-top-color: #28A745;
animation: spin 1s ease-in-out infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
.loader-content {
text-align: center;
}
.loader-text {
margin-top: 15px;
color: #28A745;
font-weight: 500;
}
</style>
</head>
<body>
<div style="
border-radius:30px;
text-align: center;
padding: 80px 20px;
color: white;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
position: relative;
margin-bottom: 30px;
" id="header-bg">
<h1 style="font-family: 'Poppins', sans-serif; font-size:50px; color:white; margin: 0; position: relative; z-index: 2; text-shadow: 2px 2px 4px rgba(0,0,0,0.5);">Suppliers</h1>
<p style="color:white; font-size: 20px; position: relative; z-index: 2; text-shadow: 1px 1px 3px rgba(0,0,0,0.5);">Find suppliers from around the world</p>
<div style="
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius:30px;
background-color: rgba(0,0,0,0.4);
z-index: 1;
"></div>
</div>
<div class="search-container" style="border-radius:30px;">
<input type="text" id="search-box" placeholder="Search suppliers...">
<button class="search-btn" onclick="fetchCompanies(1)">Search</button>
</div>
<div class="continent-filters" id="continent-filters">
<button class="continent-btn" onclick="filterByContinent('')">All</button>
<button class="continent-btn" onclick="filterByContinent('Africa')">Africa</button>
<button class="continent-btn" onclick="filterByContinent('Asia')">Asia</button>
<button class="continent-btn" onclick="filterByContinent('Europe')">Europe</button>
<button class="continent-btn" onclick="filterByContinent('North America')">North America</button>
<button class="continent-btn" onclick="filterByContinent('South America')">South America</button>
<button class="continent-btn" onclick="filterByContinent('Oceania')">Oceania</button>
</div>
<div class="vendor-list" id="company-list"></div>
<div class="pagination" id="pagination"></div>
<script>
const iconImages = [
'https://backendapi.gonje.com/public/gonje-storage/public/images/cart.svg',
'https://backendapi.gonje.com/public/gonje-storage/public/images/cheers-in-love.svg',
'https://backendapi.gonje.com/public/gonje-storage/public/images/cherry.svg',
'https://backendapi.gonje.com/public/gonje-storage/public/images/desert.svg',
'https://backendapi.gonje.com/public/gonje-storage/public/images/handbag.svg',
'https://backendapi.gonje.com/public/gonje-storage/public/images/grocery.svg',
'https://backendapi.gonje.com/public/gonje-storage/public/images/ice-cream.svg',
'https://backendapi.gonje.com/public/gonje-storage/public/images/fridge-meals.svg',
'https://backendapi.gonje.com/public/gonje-storage/public/images/fridge-items.svg',
'https://backendapi.gonje.com/public/gonje-storage/public/images/fridge-sushi.svg',
'https://backendapi.gonje.com/public/gonje-storage/public/images/fridge-pasta.svg',
'https://backendapi.gonje.com/public/gonje-storage/public/images/fridge-meal.svg'
];
// Food/restaurant related background images from Unsplash
const headerBackgrounds = [
'https://images.unsplash.com/photo-1517248135467-4c7edcad34c4?ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80',
'https://images.unsplash.com/photo-1555396273-367ea4eb4db5?ixlib=rb-1.2.1&auto=format&fit=crop&w=1934&q=80',
'https://images.unsplash.com/photo-1424847651672-bf20a4b0982b?ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80',
'https://images.unsplash.com/photo-1537047902294-62a40c20a6ae?ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80',
'https://images.unsplash.com/photo-1466978913421-dad2ebd01d17?ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80',
'https://images.unsplash.com/photo-1559847844-5315695dadae?ixlib=rb-1.2.1&auto=format&fit=crop&w=1940&q=80',
'https://images.unsplash.com/photo-1514933651103-005eec06c04b?ixlib=rb-1.2.1&auto=format&fit=crop&w=1934&q=80',
'https://images.unsplash.com/photo-1544025162-d76694265947?ixlib=rb-1.2.1&auto=format&fit=crop&w=1949&q=80'
];
let currentContinent = '';
let isLoading = false;
function getRandomImage() {
return iconImages[Math.floor(Math.random() * iconImages.length)];
}
function setRandomHeaderBackground() {
const randomBg = headerBackgrounds[Math.floor(Math.random() * headerBackgrounds.length)];
document.getElementById('header-bg').style.backgroundImage = `url('${randomBg}')`;
}
function showLoader() {
isLoading = true;
const companyList = document.getElementById('company-list');
companyList.innerHTML = `
<div class="loader-overlay">
<div class="loader-content">
<div class="modern-spinner"></div>
<div class="loader-text">Searching suppliers...</div>
</div>
</div>
`;
}
function hideLoader() {
isLoading = false;
const loader = document.querySelector('.loader-overlay');
if (loader) {
loader.remove();
}
}
function filterByContinent(continent) {
currentContinent = continent;
fetchCompanies(1);
// Update active button state
const buttons = document.querySelectorAll('.continent-btn');
buttons.forEach(btn => {
if (btn.textContent === continent || (continent === '' && btn.textContent === 'All')) {
btn.classList.add('active');
} else {
btn.classList.remove('active');
}
});
}
function fetchCompanies(page = 1) {
if (isLoading) return;
showLoader();
const searchBox = document.getElementById('search-box');
const searchQuery = searchBox.value.trim();
const continentQuery = currentContinent ? `&continent=${encodeURIComponent(currentContinent)}` : '';
const url = `/get_companies.php?page=${page}&search=${encodeURIComponent(searchQuery)}${continentQuery}`;
fetch(url)
.then(response => response.json())
.then(data => {
hideLoader();
const companyList = document.getElementById('company-list');
const pagination = document.getElementById('pagination');
companyList.innerHTML = '';
pagination.innerHTML = '';
if (data.status === 'ok' && data.data.length > 0) {
data.data.forEach(company => {
const vendorItem = document.createElement('a');
vendorItem.classList.add('vendor-item');
vendorItem.href = company.storefront_url;
let logoContent;
if (company.logo_url) {
logoContent = `<img src="${company.logo_url}" alt="${company.company_name} Logo">`;
} else {
logoContent = `<img src="${getRandomImage()}" alt="Default Icon">`;
}
vendorItem.innerHTML = `
<div class="vendor-logo">${logoContent}</div>
<div class="vendor-info">
<h3>${company.company_name}</h3>
<p>${company.country}</p>
</div>
`;
companyList.appendChild(vendorItem);
});
const totalPages = data.pagination.total_pages;
const currentPage = data.pagination.current_page;
if (totalPages > 1) {
const prevButton = document.createElement('button');
prevButton.textContent = 'Previous';
prevButton.disabled = currentPage === 1;
prevButton.addEventListener('click', () => fetchCompanies(currentPage - 1));
const nextButton = document.createElement('button');
nextButton.textContent = 'Next';
nextButton.disabled = currentPage === totalPages;
nextButton.addEventListener('click', () => fetchCompanies(currentPage + 1));
const pageInfo = document.createElement('span');
pageInfo.style.margin = '0 15px';
pageInfo.style.display = 'flex';
pageInfo.style.alignItems = 'center';
pageInfo.textContent = `Page ${currentPage} of ${totalPages}`;
pagination.appendChild(prevButton);
pagination.appendChild(pageInfo);
pagination.appendChild(nextButton);
}
} else {
companyList.innerHTML = `
<div class="no-results">
<h3>No suppliers found</h3>
<p>Try adjusting your search or filter criteria</p>
</div>
`;
}
})
.catch(error => {
hideLoader();
console.error('Error:', error);
document.getElementById('company-list').innerHTML = `
<div class="no-results">
<h3>Error loading suppliers</h3>
<p>Please try again later</p>
</div>
`;
});
}
// Initialize with all suppliers
window.onload = () => {
setRandomHeaderBackground();
fetchCompanies();
document.getElementById('search-box').addEventListener('keypress', (e) => {
if (e.key === 'Enter') {
fetchCompanies(1);
}
});
};
</script>
</body>
</html> |
suppliers |
suppliers |
suppliers |
|
suppliers |
|
|
|
|
|
|