CID-FUNNY-LOGIN-JS Tutorial-php.cn

CID-FUNNY-LOGIN

Mary-Kate Olsen

Release： 2024-12-23 17:41:21

Original

768 people have browsed it

CID-Themed Login System ??

This project presents a fun, CID-themed login system where users are entertained with iconic CID meme videos upon successful login. It offers a unique and engaging user experience by integrating CID-themed elements throughout the application.

Features

? CID-Themed: Enjoy the nostalgic CID series with themed memes and videos.
? Credential Check: Validate login with predefined username and password.
?️ Video Playback: Plays a specific video on successful login.
⚠️ Custom Alerts: Utilizes SweetAlert for custom, stylish pop-up messages.
? Audio Control: Plays background music with an option to pause.
? Session Management: Manages user sessions to control video playback.
? Responsive Design: Fully responsive, providing a seamless experience on all devices. ## Videos
Timelaspe of CID FUNNY LOGIN CREATION :
CID FUNNY LOGIN Full Video : ## Images

Developed By

MAYANK CHAWDHARI ## Special Thanks to
Kishan Kumar
Vedant ## User Guide

Predefined Credentials

Username: Admin
Password: 12345678

Authentication and Video Playback

Enter Credentials: Input the predefined username and password.
Play Video: On successful login, a full-screen video will play.
Session Management: The user's authentication status is stored, allowing for conditional video playback.
Redirect and Audio Control: After the video ends, the user is redirected back, and any playing audio is stopped.

Changing Authentication for Specific Videos

To play different videos based on authentication:

Edit the Auth Variable: In the JavaScript code, locate the auth variable. Set its value to 1 or 0 based on the condition.

   const auth = 1; // or 0

Copy after login

Specify Video Source: Update the video source paths for different auth values.

   if (auth === 1) {
       fullScreenVideo.src = '2.mp4'; // Path to video for auth = 1
   } else {
       fullScreenVideo.src = '1.mp4'; // Path to video for auth = 0
   }

Copy after login

Implementation

Custom Pop-Up Alerts

SweetAlert: Stylish pop-up messages for user notifications.

  Swal.fire({
      text: 'Please fill out all fields!',
      position: 'top-end',
      timerProgressBar: true,
      showConfirmButton: false,
      width: '250px',
      timer: 3000,
      backdrop: false
  });

Copy after login

Full-Screen Video Playback

HTML Video Element:

  <video>



<ul>
<li>
<strong>JavaScript to Handle Video Playback and Redirection:</strong>
</li>
</ul>

<pre class="brush:php;toolbar:false">  fullScreenVideo.addEventListener('ended', function() {
      stopAllAudio();
      window.location.href = 'login.html';
  });

Copy after login