Spaces:

ppaihack
/

ZAuth

Sleeping

ZAuth / client /static /createAccount.html

Martin Natale

feat: Update front

974696d 7 months ago

10.6 kB

	<!DOCTYPE html>
	<html lang="fr">

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Zauth - Create Account</title>
	<script src="https://cdn.tailwindcss.com"></script>
	<script src="https://unpkg.com/scrollreveal"></script>
	<link href="https://fonts.googleapis.com/css2?family=GeistMono:wght@400;700&family=Playfair+Display:wght@400;700&family=Inter:wght@300;400;500&display=swap" rel="stylesheet">
	<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
	<link rel="stylesheet" href="/static/css/styles.css">
	</head>

	<body class="bg-gray-900 text-white min-h-screen flex flex-col" style="background-image: url('/static/images/background.jpg');">

	<!-- Header Aligné en Haut à Gauche -->
	<header class="container mx-auto p-6">
	<h1 class="text-4xl font-bold text-left text-white icon-geistmono">Zauth.</h1>
	</header>

	<main class="flex-grow container mx-auto p-6 flex flex-col lg:flex-row items-center justify-center space-y-8 lg:space-y-0 lg:space-x-12">

	<!-- Section Vidéo avec ScrollReveal -->
	<div class="max-w-md w-full p-6 lg:p-0 lg:w-1/2 flex flex-col items-center video-reveal">
	<div class="relative">
	<video id="video-preview" autoplay muted class="w-full max-w-md max-h-md aspect-square bg-black rounded-full object-cover shadow-2xl ring-4 ring-gray-300 ring-opacity-50 hover:ring-blue-500 hover:ring-opacity-75 transition-all duration-300 ease-in-out transform hover:scale-105"></video>

	<!-- Indicateur d'Enregistrement -->
	<div id="rec-indicator" class="hidden absolute top-2 right-2 w-4 h-4 bg-red-600 rounded-full animate-pulse"></div>
	</div>

	<!-- Bouton Démarrer l'Enregistrement -->
	<div class="text-center mt-6">
	<button type="button" id="start-recording" class="bg-red-600 hover:bg-red-700 text-white font-bold w-16 h-16 rounded-full flex items-center justify-center animate-pulse hover:scale-110 active:scale-95 transition-all duration-300 ease-in-out">
	<i class="fas fa-video"></i>
	</button>
	</div>
	</div>

	<!-- Section Formulaire avec ScrollReveal -->
	<div class="max-w-md w-full bg-gray-800/40 backdrop-blur-md rounded-xl shadow-lg p-6 lg:w-1/2 transform transition-all duration-300 hover:scale-102 hover:shadow-md form-reveal">
	<form id="create-account-form" method="POST" action="/submitAccount" class="space-y-6" enctype="multipart/form-data">
	<div>
	<label for="email" class="block text-sm font-medium text-gray-300 icon-geistmono">Email Address</label>
	<input type="email" id="email" name="email" required class="w-full px-4 py-3 mt-2 bg-gray-700 text-white rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 transition duration-300 ease-in-out">
	</div>
	<button type="submit" class="w-full bg-green-600 hover:bg-green-700 text-white font-bold py-3 px-4 rounded-lg transition-all duration-300 ease-in-out transform hover:scale-102 icon-geistmono">
	Create Account 🔐
	</button>
	</form>
	<div id="error-message" class="mt-4 text-center text-red-500"></div>
	</div>
	</main>

	<!-- <footer class="bg-gray-800 p-4 text-center">
	<p>© 2023 TechMart. Tous droits réservés.</p>
	</footer> -->

	<script>
	document.addEventListener('DOMContentLoaded', function() {
	// Animation pour la section vidéo avec un zoom-in et glissement vers le haut
	ScrollReveal().reveal('.video-reveal', {
	duration: 1200, // Durée de l'animation
	scale: 0.9, // Zoom initial (90%)
	distance: '30px', // Glissement vers le haut
	origin: 'bottom', // Animation qui part du bas
	opacity: 0, // Apparition progressive
	easing: 'ease-in-out', // Transition fluide
	delay: 200 // Délai avant le début
	});

	// Animation pour la section formulaire avec un glissement depuis la droite
	ScrollReveal().reveal('.form-reveal', {
	duration: 1200, // Durée de l'animation
	distance: '60px', // Distance de glissement depuis la droite
	origin: 'right', // Animation qui part de la droite
	opacity: 0, // Apparition progressive
	easing: 'ease-in-out', // Transition fluide
	delay: 400 // Délai un peu plus long pour que l'effet soit coordonné
	});

	// Animation pour le header "Zauth."
	ScrollReveal().reveal('header h1', {
	duration: 1000,
	origin: 'left',
	distance: '50px',
	opacity: 0,
	easing: 'ease-in-out',
	delay: 100
	});

	// Appelle la fonction de caméra et remplissage de l'email après le chargement de la page
	fillEmailFromUrl();
	startCamera();
	});

	// Ajoutez cette fonction au début du script
	function fillEmailFromUrl() {
	const urlParams = new URLSearchParams(window.location.search);
	const email = urlParams.get('email');
	if (email) {
	document.getElementById('email').value = decodeURIComponent(email);
	}
	}

	// Appelez cette fonction lorsque la page se charge
	window.onload = function () {
	fillEmailFromUrl();
	startCamera();
	};

	let mediaRecorder;
	let recordedChunks = [];
	let stream;
	let isRecording = false;
	const recIndicator = document.getElementById('rec-indicator');

	// Fonction pour démarrer la caméra
	async function startCamera() {
	const videoPreview = document.getElementById('video-preview');

	if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
	try {
	stream = await navigator.mediaDevices.getUserMedia({ video: true });
	videoPreview.srcObject = stream;
	} catch (error) {
	console.error('Erreur lors de l\'accès à la caméra:', error);
	document.getElementById('error-message').innerText = 'Erreur lors de l\'accès à la caméra. Veuillez vérifier vos permissions.';
	}
	} else {
	document.getElementById('error-message').innerText = 'Votre navigateur ne supporte pas l\'accès à la caméra.';
	}
	}

	document.getElementById('start-recording').addEventListener('click', function () {
	if (stream) {
	if (!isRecording) {
	// Démarrer l'enregistrement
	mediaRecorder = new MediaRecorder(stream);
	recordedChunks = [];

	mediaRecorder.ondataavailable = function (event) {
	if (event.data.size > 0) {
	recordedChunks.push(event.data);
	}
	};

	mediaRecorder.start();
	isRecording = true;
	recIndicator.classList.remove('hidden');

	// Ajouter une classe d'animation plus subtile pour indiquer que l'enregistrement est en cours
	this.classList.remove('bg-red-600', 'hover:bg-red-700');
	this.classList.add('bg-red-700', 'animate-pulse');
	this.innerHTML = '<i class="fas fa-stop-circle"></i>';

	// Arrêter automatiquement après 5 secondes
	setTimeout(() => {
	if (isRecording) {
	stopRecording();
	}
	}, 5000);
	} else {
	// Arrêter l'enregistrement
	stopRecording();
	}
	} else {
	document.getElementById('error-message').innerText = 'Camera is not accessible. Please refresh the page.';
	}
	});

	function stopRecording() {
	mediaRecorder.stop();
	isRecording = false;
	recIndicator.classList.add('hidden');

	// Remettre le bouton à son état initial (pulsation désactivée et retour au style initial)
	const recordButton = document.getElementById('start-recording');
	recordButton.classList.remove('bg-red-700', 'animate-pulse');
	recordButton.classList.add('bg-red-600', 'hover:bg-red-700');
	recordButton.innerHTML = '<i class="fas fa-video"></i>';
	}

	document.getElementById('create-account-form').addEventListener('submit', async function (event) {
	event.preventDefault();

	const email = document.getElementById('email').value;

	// Créer un objet FormData pour envoyer la vidéo et l'email
	const formData = new FormData();
	formData.append('email', email);

	// Créer un Blob de la vidéo enregistrée et l'ajouter au formData
	const blob = new Blob(recordedChunks, { type: 'video/webm' });
	formData.append('video', blob, 'video_user.webm');

	try {
	const response = await fetch('/submitAccount', {
	method: 'POST',
	body: formData
	});

	if (response.ok) {
	window.location.href = '/index';
	} else {
	const errorData = await response.json();
	document.getElementById('error-message').innerText = `Error occurred while creating the account: ${errorData.detail \|\| 'Unknown error'}`;
	}
	} catch (error) {
	document.getElementById('error-message').innerText = 'Une erreur est survenue. Veuillez réessayer.';
	console.error('Error while submitting the form:', error);
	}
	});
	</script>
	</body>

	</html>