Skip to content

Added share button on each event card #107

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 1 commit into from
Closed

Added share button on each event card #107

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@
<link rel="stylesheet" href="./assets/customcursor.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.1/css/all.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<script src="https://kit.fontawesome.com/4cf6385dfa.js" crossorigin="anonymous"></script>
<title>Eventica</title>
</head>
Expand Down
52 changes: 51 additions & 1 deletion script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,13 +76,63 @@ function createEventCard(event, isPastEvent = false) {
<p class="${isPastEvent ? 'past-event-time' : 'event-time'}">${event.time || 'Time not specified'}</p>
<p class="${isPastEvent ? 'past-event-location' : 'event-location'}">${event.location || 'Location not specified'}</p>
<p class="${isPastEvent ? 'past-event-description' : 'event-description'}">${event.description || 'No description available'}</p>
<a href="${event.website || '#'}" target="_blank" rel="noopener noreferrer" class="${buttonClass}">${buttonText}</a>
<div class="button-container">
<a href="${event.website || '#'}" target="_blank" rel="noopener noreferrer" class="${buttonClass}">${buttonText}</a>
<a href="#" class="${buttonClass}" onclick="toggleSharePopup(event, '${event.title}', '${event.website || '#'}'); return false;">Share</a>
</div>
<div class="share-popup" id="share-popup-${event.title.replace(/\s+/g, '-').toLowerCase()}">
<button class="close-btn" onclick="toggleSharePopup(event, '${event.title}')">
<i class="fas fa-times"></i>
</button>
<button onclick="copyLink('${event.website || '#'}')">
<i class="fas fa-link"></i> Copy Link
</button>
<button onclick="window.open('https://wa.me/?text=${encodeURIComponent(event.title + ' ' + event.website)}', '_blank')">
<i class="fab fa-whatsapp" style="color: #25D366;"></i> WhatsApp
</button>
<button onclick="window.open('https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(event.website)}', '_blank')">
<i class="fab fa-facebook" style="color: #1877F2;"></i> Facebook
</button>
<button onclick="window.open('https://twitter.com/intent/tweet?url=${encodeURIComponent(event.website)}&text=${encodeURIComponent(event.title)}', '_blank')">
<i class="fab fa-x-twitter" style="color: #000;"></i> X (Twitter)
</button>
<button onclick="window.open('mailto:?subject=${encodeURIComponent(event.title)}&body=${encodeURIComponent(event.website)}')">
<i class="fas fa-envelope" style="color: #D44638;"></i> Email
</button>
</div>
>
</div>
</a>
</div>
`;
}

function toggleSharePopup(event, title) {
event.preventDefault();
const popup = document.getElementById(`share-popup-${title.replace(/\s+/g, '-').toLowerCase()}`);

if (popup.classList.contains('show')) {
popup.classList.remove('show');
popup.classList.add('hide');
setTimeout(() => popup.style.display = 'none', 300);
} else {
popup.style.display = 'block';
setTimeout(() => {
popup.classList.remove('hide');
popup.classList.add('show');
}, 10);
}
}

function copyLink(url) {
navigator.clipboard.writeText(url).then(() => {
alert('Link copied to clipboard!');
}).catch(err => {
console.error('Failed to copy: ', err);
});
}


// Function to populate event grids
function populateEventGrids(events) {
// Filter past and upcoming events using isEventPast function
Expand Down
105 changes: 99 additions & 6 deletions style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -636,20 +636,21 @@ body.dark-mode footer {
}

.register-button {
width: 60%;
width: auto; /* Adjust width dynamically */
border-radius: 1rem;
border: none;
color: #ffffff !important;
background-color: var(--primary-color);
font-size: 1rem;
padding: 0.5rem 1rem;
position: relative;
left: 30%;
bottom: 0;
padding: 0.5rem 1.5rem; /* Increased padding for better spacing */
text-decoration: none;
transition: background-color 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
}


.register-button:hover {
background-color: #686969;
}
Expand Down Expand Up @@ -1253,4 +1254,96 @@ footer {
break-inside: avoid;
page-break-inside: avoid;
}
}
}


/* Button container to align buttons side by side */
.button-container {
display: flex;
gap: 12px;
justify-content: center; /* Center align buttons */
margin-top: 12px;
}


/* Modern Share Popup */
.share-popup {
display: none;
position: absolute;
background: rgba(255, 255, 255, 0.95);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
border-radius: 12px;
padding: 16px;
top: 50px;
left: 50%;
transform: translateX(-50%);
z-index: 100;
min-width: 220px;
backdrop-filter: blur(8px);
transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}

/* Show popup with fade-in effect */
.share-popup.show {
display: block;
opacity: 1;
transform: translateX(-50%) translateY(0);
}

/* Hide popup */
.share-popup.hide {
opacity: 0;
transform: translateX(-50%) translateY(-10px);
}

/* Styling for share buttons inside popup */
.share-popup button {
display: flex;
align-items: center;
gap: 12px;
width: 100%;
padding: 10px 14px;
border: none;
background: #f9f9f9;
cursor: pointer;
font-size: 14px;
font-weight: 500;
border-radius: 8px;
transition: background 0.3s ease-in-out;
color: #333;
}

.share-popup button:hover {
background: #e0e0e0;
}

/* Icons */
.share-popup button i {
font-size: 18px;
color: #007bff;
}

/* Close button */
.share-popup .close-btn {
position: absolute;
top: 8px;
right: 8px;
background: transparent;
border: none;
font-size: 18px;
cursor: pointer;
color: #666;
}

.share-popup .close-btn:hover {
color: #000;
}

/* Responsive adjustments */
@media (max-width: 600px) {
.share-popup {
width: 90%;
left: 5%;
transform: none;
}
}