Made Tinder-like UI on matching page

[aya0221]

Updates in the Tinder Card Script:

• Initialization of Cards: Implemented initCards() to dynamically assign styles and properties to the Tinder cards.

  • Sets zIndex, transform, and opacity for each card.
  • Disables the 'love' button if a card is already liked.

• Swipe Handling: Integrated Hammer.js for swipe functionalities.

  • Added class toggling for 'tinder_love' and 'tinder_nope' based on swipe direction.
  • Configured dynamic styling for swipe effects (translation and rotation).

• End of Swipe: Added logic to handle the end of a swipe gesture.

  • Determines whether to keep or remove the card from the view.
  • Applies transformation for card exit animation.
  • Recalls initCards() to reset the state after a card is swiped away.

• Button Listeners: Created createButtonListener() function.

  • Handles 'nope' and 'love' button clicks to programmatically swipe cards.

• Event Listeners: Added event listeners for 'nope' and 'love' buttons.

Updates to Countdown Timer Script:

• Refactored Timer Functionality: Replaced the original getTimeUntilMidnight() function with updateCountdown().

  • This new function calculates the time until midnight and directly updates the countdown timer's inner HTML.
  • Resolved issues with innerText by utilizing innerHTML, ensuring smoother updates.

• Real-Time Updates: Enhanced the countdown timer to update every second using setInterval(updateCountdown, 1000).

  • Provides a more accurate and dynamic countdown experience.