News
coming events code
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Events Page</title>
<style>
.main-container {
display: grid;
grid-template-columns: 250px 1fr;
gap: 30px;
}
.event-content
{
background: #f3f6f8;
}
.header {
grid-column: 1 / -1;
margin-bottom: 30px;
}
.header h1 {
color: #205798;
font-size: 40px;
font-weight: 500;
margin-bottom: 16px;
margin-left: 23.3rem;
font-family: ‘optim’;
}
.results-info {
margin-bottom: 20px;
}
.tabs {
/* border-bottom: 1px solid #ddd; */
padding-bottom: 10px;
margin-bottom: 20px;
margin-left: 23.4rem;
font-size: 17px;
font-family: inter;
font-weight: 500;
color: #00000000 !important;
}
.tabs a {
text-decoration: none;
color: #000;
padding: 10px 0;
margin-right: 5px;
font-size: 16px;
}
.tabs span {
color: #666;
margin: 0 10px;
}
.tabs a.active {
color: #205798;
padding-bottom: 8px;
}
.filter-section {
background: white !important;
padding: 20px;
height: fit-content;
top: -8rem;
position: relative;
background: none;
left: 42px;
}
.filter-section h3 {
color: #205798;
font-size: 25px;
margin-bottom: 20px;
font-family: ‘optim’;
}
.input-group {
margin-bottom: 20px;
}
.input-group label {
color: #205798;
display: block;
font-family: “optim”, Sans-serif !important;
font-size: 18px;
font-weight: 500;
margin-bottom: 10px;
}
.dropdown-group {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.dropdown {
width: 100%;
padding: 8px;
border: 1px solid #E5E5E5;
border-radius: 4px;
font-size: 14px;
color: #333;
}
.content-section {
min-height: 500px;
display: flex;
flex-direction: column;
padding-left: 85px;
width: 100%;
margin-top: -2rem;
background-color:
#Fff;
margin-left: 11px;
}
}
.results-info {
margin-bottom: 20px;
color: #666;
font-size: 14px;
/*left: 57px;*/
top: -2rem;
position: relative;
}
.events-list {
display: flex;
flex-direction: column;
gap: 30px;
flex-grow: 1;
}
.event-card {
display: grid;
grid-template-columns: 240px 1fr;
height: auto;
/*border: 1px solid #000;*/
overflow: hidden;
transition: transform 0.3s ease;
background: #fff;
box-shadow: 0 2px 4px rgba(255, 255, 255, 0.1);
}
.event-image {
width: 240px;
height: 300px !important;
object-fit: cover;
}
.event-content {
padding: 20px;
display: flex;
flex-direction: column;
gap: 12px;
}
.event-content h3 {
color: #205798;
font-size: 16px;
line-height: 1.4;
margin: 0;
font-family: ‘Inter’;
font-size: 18px !important;
}
.event-description {
color: #000000;
font-size: 18px;
line-height: 1.5;
margin: 0;
font-family: ‘Inter’;
}
.event-date {
color: #666;
font-size: 14px;
margin: 0;
}
.event-buttons {
display: flex;
gap: 10px;
margin-top: 12px;
}
.event-button {
padding: 8px 16px;
border-radius: 0px !important;
font-size: 17px;
cursor: pointer;
transition: all 0.3s ease;
font-weight: 500;
}
.register-button {
background-color: #205798;
color: white;
border: none;
padding:12px 20px;
}
.register-button:hover {
background-color: #1a3366;
}
.calendar-button {
background-color: white;
color: #205798;
border: 1px solid #205798;
}
.calendar-button:hover {
background-color: #f0f0f0;
}
.pagination {
display: flex;
justify-content: flex-end;
gap: 10px;
margin-top: 30px;
padding: 20px 0;
}
.pagination button {
padding: 8px 12px;
border: 1px solid #ddd;
background: white;
cursor: pointer;
border-radius: 4px;
min-width: 40px;
font-size: 14px;
color:#000;
}
/*.pagination button:hover {*/
/* background: #f5f5f5;*/
/*}*/
.pagination button.active {
background: #205798;
color: white;
border-color: #205798;
}
.no-events {
text-align: center;
padding: 40px;
color: #666;
font-size: 14px;
}
@media (max-width: 768px)
{
.main-container {
grid-template-columns: 1fr;
padding: 15px;
}
.header h1 {
margin-left: 0;
text-align: center;
font-size: 32px;
}
.tabs {
margin-left: 0;
display: flex;
justify-content: center;
gap: 15px;
}
.filter-section {
position: static;
left: 0;
top: 0;
padding: 20px 0;
margin-bottom: 30px;
}
.filter-section h3 {
text-align: center;
}
.content-section {
padding-left: 0;
width: 100%;
}
.results-info {
position: static;
text-align: center;
margin: 20px 0;
}
.events-list {
display: grid;
grid-template-columns: 1fr;
gap: 30px;
padding: 0;
}
.event-card {
width: 100%;
height: auto;
margin: 0 auto;
max-width: 100%;
grid-template-columns: 1fr;
}
.event-image {
width: 100%;
height: 200px !important;
}
.event-content {
padding: 15px;
}
.event-buttons {
flex-direction: column;
gap: 10px;
}
.event-button {
width: 100%;
}
.pagination {
justify-content: center;
}
}
@media (max-width: 480px)
{
.header h1 {
font-size: 28px;
}
.tabs a {
font-size: 14px;
}
.dropdown-group {
grid-template-columns: 1fr;
}
}
</style>
</head>
<body>
<div class=”main-container”>
<div class=”header”>
<h1>Events</h1>
<div class=”tabs”>
<a href=”#” data-tab=”upcoming”>Upcoming Events</a>
<span>|</span>
<a href=”#” class=”active” data-tab=”past”>Past Events</a>
</div>
</div>
<div class=”filter-section”>
<h3>Filter by search</h3>
<div class=”date-inputs”>
<div class=”input-group”>
<label>From</label>
<div class=”dropdown-group”>
<select id=”fromYear” class=”dropdown”>
<option value=””>Year</option>
</select>
<select id=”fromMonth” class=”dropdown”>
<option value=””>Month</option>
</select>
</div>
</div>
<div class=”input-group”>
<label>To</label>
<div class=”dropdown-group”>
<select id=”toYear” class=”dropdown”>
<option value=””>Year</option>
</select>
<select id=”toMonth” class=”dropdown”>
<option value=””>Month</option>
</select>
</div>
</div>
</div>
</div>
<div class=”content-section”>
<div class=”results-info”>1-2 of 60 items</div>
<div class=”events-list” id=”eventsList”>
<!– Events will be populated by JavaScript –>
</div>
<div class=”pagination” id=”pagination”>
<!– Pagination will be populated by JavaScript –>
</div>
</div>
</div>
<script>
// Sample events data
const eventsData = [
{
id: 1,
title: “C.R.I. Pumps at the 30th Indian Plumbing Conference & Expo”,
description: “We are proud to showcase our advanced pumping solutions and innovative technologies, redefining efficiency and reliability in the plumbing industry.”,
date: “2024-12-05”,
image: “/wp-content/uploads/2024/12/Event-1.png”
},
{
id: 2,
title: “Empowering the Future: C.R.I. Solar Hosts Successful First Dealer Meet in Jaipur”,
description: “We also marked a significant milestone by launching the Retail Business for C.R.I. Solar Pumping Systems Shoppy.”,
date: “2024-12-04”,
image: “/wp-content/uploads/2024/12/Event-2.png”
},
{
id: 3,
title: “Join C.R.I. at Paperex 2024: Innovating the Paper Industry!”,
description: “At C.R.I., we contribute to the future of the paper industry with our innovative fluid management solutions and sustainable technologies.”,
date: “2024-12-03”,
image: “/wp-content/uploads/2024/12/Event-3.png”
},
{
id: 4,
title: “C.R.I. Pumps at KRISHI MELA: Advancing Agriculture with Innovation!”,
description: “C.R.I. Pumps participated in the KRISHI MELA @ GKVK BENGALURU! Discover our cutting-edge pumping solutions.”,
date: “2024-11-15”,
image: “/wp-content/uploads/2024/12/Event-4.png”
}
];
// Global variables
let currentPage = 1;
const eventsPerPage = 2;
let filteredEvents = […eventsData];
let currentTab = ‘past’; // Default to ‘past’ tab
// Format date for display
function formatDate(dateString) {
const date = new Date(dateString);
return date.toLocaleDateString(‘en-US’, {
day: ‘numeric’,
month: ‘long’,
year: ‘numeric’
});
}
// Populate dropdowns
function populateDropdowns() {
const months = [
‘January’, ‘February’, ‘March’, ‘April’, ‘May’, ‘June’,
‘July’, ‘August’, ‘September’, ‘October’, ‘November’, ‘December’
];
const currentYear = new Date().getFullYear();
const yearSelects = document.querySelectorAll(‘select[id$=”Year”]’);
const monthSelects = document.querySelectorAll(‘select[id$=”Month”]’);
yearSelects.forEach(select => {
for (let i = currentYear – 5; i <= currentYear + 5; i++) {
const option = document.createElement(‘option’);
option.value = i;
option.textContent = i;
select.appendChild(option);
}
});
monthSelects.forEach(select => {
months.forEach((month, index) => {
const option = document.createElement(‘option’);
option.value = index + 1;
option.textContent = month;
select.appendChild(option);
});
});
}
// Filter events
function filterEvents() {
const fromMonth = document.getElementById(‘fromMonth’).value;
const fromYear = document.getElementById(‘fromYear’).value;
const toMonth = document.getElementById(‘toMonth’).value;
const toYear = document.getElementById(‘toYear’).value;
const today = new Date();
filteredEvents = eventsData.filter(event => {
const eventDate = new Date(event.date);
let passesDateFilter = true;
let passesTabFilter = true;
if (fromMonth && fromYear) {
const fromDate = new Date(fromYear, fromMonth – 1);
passesDateFilter = passesDateFilter && eventDate >= fromDate;
}
if (toMonth && toYear) {
const toDate = new Date(toYear, toMonth – 1);
passesDateFilter = passesDateFilter && eventDate <= toDate;
}
if (currentTab === ‘upcoming’) {
passesTabFilter = eventDate >= today;
} else {
passesTabFilter = eventDate < today;
}
return passesDateFilter && passesTabFilter;
});
// Sort events by date (descending for “past” and ascending for “upcoming”)
filteredEvents.sort((a, b) => {
const dateA = new Date(a.date);
const dateB = new Date(b.date);
return currentTab === ‘past’ ? dateB – dateA : dateA – dateB;
});
currentPage = 1;
renderEvents();
renderPagination();
updateResultsInfo();
}
// Render events
function renderEvents() {
const eventsList = document.getElementById(‘eventsList’);
const startIndex = (currentPage – 1) * eventsPerPage;
const endIndex = startIndex + eventsPerPage;
const eventsToShow = filteredEvents.slice(startIndex, endIndex);
eventsList.innerHTML = ”;
if (eventsToShow.length === 0) {
eventsList.innerHTML = ‘<div class=”no-events”>No events found</div>’;
return;
}
eventsToShow.forEach(event => {
const eventCard = `
<div class=”event-card”>
<img src=”${event.image}” alt=”${event.title}” class=”event-image”>
<div class=”event-content”>
<h3>${event.title}</h3>
<p class=”event-description”>${event.description}</p>
<div class=”event-date”>${formatDate(event.date)}</div>
<div class=”event-buttons”>
<button class=”event-button register-button” onclick=”registerEvent(${event.id})”>Register Now</button>
<button class=”event-button calendar-button” onclick=”addToCalendar(${event.id})”>Add to Calendar</button>
</div>
</div>
</div>
`;
eventsList.innerHTML += eventCard;
});
}
// Render pagination
function renderPagination() {
const pagination = document.getElementById(‘pagination’);
const totalPages = Math.ceil(filteredEvents.length / eventsPerPage);
pagination.innerHTML = ”;
if (totalPages <= 1) return;
for (let i = 1; i <= totalPages; i++) {
const button = document.createElement(‘button’);
button.textContent = i;
button.classList.toggle(‘active’, i === currentPage);
button.addEventListener(‘click’, () => {
currentPage = i;
renderEvents();
renderPagination();
updateResultsInfo();
});
pagination.appendChild(button);
}
}
// Update results info
function updateResultsInfo() {
const startIndex = (currentPage – 1) * eventsPerPage + 1;
const endIndex = Math.min(startIndex + eventsPerPage – 1, filteredEvents.length);
const total = filteredEvents.length;
document.querySelector(‘.results-info’).textContent =
`${startIndex}-${endIndex} of ${total} items`;
}
// Initialize the page
document.addEventListener(‘DOMContentLoaded’, function () {
populateDropdowns();
// Add event listeners for filters
document.querySelectorAll(‘select’).forEach(select => {
select.addEventListener(‘change’, filterEvents);
});
// Add event listeners for tabs
document.querySelectorAll(‘.tabs a’).forEach(tab => {
tab.addEventListener(‘click’, (e) => {
e.preventDefault();
document.querySelectorAll(‘.tabs a’).forEach(t => t.classList.remove(‘active’));
tab.classList.add(‘active’);
currentTab = tab.dataset.tab;
filterEvents();
});
});
// Render default tab
document.querySelector(`.tabs a[data-tab=”${currentTab}”]`).classList.add(‘active’);
filterEvents(); // Show default events
});
</script>
</body>
</html>
