Système de connexion sur le thème CID ??
Ce projet présente un système de connexion amusant sur le thème du CID où les utilisateurs se divertissent avec des vidéos mèmes emblématiques du CID une fois leur connexion réussie. Il offre une expérience utilisateur unique et engageante en intégrant des éléments sur le thème CID dans toute l'application.
Caractéristiques
-
? Thème CID : Profitez de la série nostalgique CID avec des mèmes et des vidéos thématiques.
-
? Vérification des informations d'identification : Validez la connexion avec un nom d'utilisateur et un mot de passe prédéfinis.
-
?️ Lecture vidéo : Lit une vidéo spécifique en cas de connexion réussie.
-
⚠️ Alertes personnalisées : Utilise SweetAlert pour des messages contextuels personnalisés et élégants.
-
? Contrôle audio : Lit une musique de fond avec une option de pause.
-
? Gestion des sessions : Gère les sessions utilisateur pour contrôler la lecture vidéo.
-
? Conception réactive : Entièrement réactif, offrant une expérience transparente sur tous les appareils.
## Vidéos
- Timelaspe de CRÉATION DE CONNEXION DRÔLE CID :
- CONNEXION DRÔLE CID Vidéo complète :
## Images
Développé par
-
MAYANK CHAWDHARI
## Un merci spécial à
- Kishan Kumar
-
Védant
## Guide de l'utilisateur
Informations d'identification prédéfinies
-
Nom d'utilisateur : Administrateur
-
Mot de passe :12345678
Authentification et lecture vidéo
-
Entrez les informations d'identification : Saisissez le nom d'utilisateur et le mot de passe prédéfinis.
-
Lire la vidéo : Une fois la connexion réussie, une vidéo en plein écran sera lue.
-
Gestion de session : Le statut d'authentification de l'utilisateur est stocké, permettant la lecture vidéo conditionnelle.
-
Redirection et contrôle audio : Une fois la vidéo terminée, l'utilisateur est redirigé vers l'arrière et toute lecture audio est arrêtée.
Modification de l'authentification pour des vidéos spécifiques
Pour lire différentes vidéos en fonction de l'authentification :
-
Modifiez la variable d'authentification :
Dans le code JavaScript, localisez la variable auth. Définissez sa valeur sur 1 ou 0 en fonction de la condition.
const auth = 1; // or 0
Copier après la connexion
-
Spécifiez la source vidéo :
Mettez à jour les chemins de source vidéo pour différentes valeurs d'authentification.
if (auth === 1) {
fullScreenVideo.src = '2.mp4'; // Path to video for auth = 1
} else {
fullScreenVideo.src = '1.mp4'; // Path to video for auth = 0
}
Copier après la connexion
Mise en œuvre
Alertes contextuelles personnalisées
-
SweetAlert : Messages contextuels élégants pour les notifications des utilisateurs.
Swal.fire({
text: 'Please fill out all fields!',
position: 'top-end',
timerProgressBar: true,
showConfirmButton: false,
width: '250px',
timer: 3000,
backdrop: false
});
Copier après la connexion
Lecture vidéo en plein écran
<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';
});
Copier après la connexion
-
Mise en page réactive :
Assure la compatibilité entre différents appareils pour une expérience utilisateur transparente.
Profitez du système de connexion sur le thème du CID et améliorez l'engagement des utilisateurs de votre application avec des moments CID emblématiques ! ??
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!