Maison > interface Web > js tutoriel > CID-FUNNY-CONNEXION

CID-FUNNY-CONNEXION

Mary-Kate Olsen
Libérer: 2024-12-23 17:41:21
original
713 Les gens l'ont consulté

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 CID-FUNNY-CONNEXION

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

  1. Entrez les informations d'identification : Saisissez le nom d'utilisateur et le mot de passe prédéfinis.
  2. Lire la vidéo : Une fois la connexion réussie, une vidéo en plein écran sera lue.
  3. Gestion de session : Le statut d'authentification de l'utilisateur est stocké, permettant la lecture vidéo conditionnelle.
  4. 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 :

  1. 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
  1. 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

  • Élément vidéo HTML :
  <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!

source:dev.to
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal