Hugging Face's logo

Spaces:
Docfile
/
Attaque2
Sleeping

App Files Community
Attaque2 / templates /index.html
Docfile's picture
Docfile
Update templates/index.html
de8c46c verified
raw
history blame contribute delete
22.9 kB
 <!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>StudyGen - Générateur de Flashcards & Quiz</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--primary-blue: #2563eb;
--light-blue: #3b82f6;
--extra-light-blue: #eff6ff;
--white: #ffffff;
--gray-50: #f9fafb;
--gray-100: #f3f4f6;
--gray-300: #d1d5db;
--gray-600: #4b5563;
--gray-800: #1f2937;
--success: #10b981;
--error: #ef4444;
--shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
--shadow-lg: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
background: linear-gradient(135deg, var(--extra-light-blue) 0%, var(--white) 50%, var(--gray-50) 100%);
min-height: 100vh;
padding: 0;
color: var(--gray-800);
line-height: 1.6;
}
.container {
max-width: 100%;
padding: 20px 16px;
min-height: 100vh;
}
.header {
text-align: center;
margin-bottom: 32px;
padding: 20px 0;
}
.header h1 {
font-size: 2.5rem;
font-weight: 800;
background: linear-gradient(135deg, var(--primary-blue), var(--light-blue));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: 8px;
}
.header p {
color: var(--gray-600);
font-size: 1.1rem;
font-weight: 500;
}
.main-card {
background: var(--white);
border-radius: 24px;
padding: 24px;
box-shadow: var(--shadow);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
margin-bottom: 20px;
transform: translateY(0);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.main-card:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-lg);
}
.form-group {
margin-bottom: 24px;
}
label {
display: block;
margin-bottom: 8px;
font-weight: 600;
color: var(--gray-800);
font-size: 0.95rem;
}
input[type="text"] {
width: 100%;
padding: 16px 20px;
border: 2px solid var(--gray-100);
border-radius: 16px;
font-size: 1rem;
transition: all 0.3s ease;
background: var(--gray-50);
color: var(--gray-800);
outline: none;
}
input[type="text"]:focus {
border-color: var(--primary-blue);
background: var(--white);
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
transform: translateY(-1px);
}
.type-selector {
display: flex;
gap: 12px;
margin-bottom: 24px;
}
.type-option {
flex: 1;
position: relative;
}
.type-option input[type="radio"] {
display: none;
}
.type-option label {
display: flex;
flex-direction: column;
align-items: center;
padding: 20px 16px;
border: 2px solid var(--gray-200);
border-radius: 16px;
cursor: pointer;
transition: all 0.3s ease;
background: var(--white);
text-align: center;
margin-bottom: 0;
}
.type-option label:hover {
border-color: var(--light-blue);
transform: translateY(-2px);
}
.type-option input[type="radio"]:checked + label {
border-color: var(--primary-blue);
background: linear-gradient(135deg, var(--primary-blue), var(--light-blue));
color: var(--white);
box-shadow: var(--shadow);
}
.type-option i {
font-size: 2rem;
margin-bottom: 8px;
transition: transform 0.3s ease;
}
.type-option input[type="radio"]:checked + label i {
transform: scale(1.1);
}
.type-option span {
font-weight: 600;
font-size: 0.9rem;
}
.generate-btn {
width: 100%;
background: linear-gradient(135deg, var(--primary-blue), var(--light-blue));
color: var(--white);
border: none;
padding: 18px 24px;
border-radius: 16px;
font-size: 1.1rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.generate-btn:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-lg);
}
.generate-btn:active {
transform: translateY(0);
}
.generate-btn:disabled {
opacity: 0.7;
cursor: not-allowed;
transform: none;
}
.generate-btn .btn-text {
transition: opacity 0.3s ease;
}
.generate-btn .spinner {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
opacity: 0;
transition: opacity 0.3s ease;
}
.generate-btn.loading .btn-text {
opacity: 0;
}
.generate-btn.loading .spinner {
opacity: 1;
}
.spinner {
width: 24px;
height: 24px;
border: 3px solid rgba(255, 255, 255, 0.3);
border-radius: 50%;
border-top-color: var(--white);
animation: spin 1s ease-in-out infinite;
}
@keyframes spin {
to { transform: translate(-50%, -50%) rotate(360deg); }
}
.results-container {
margin-top: 24px;
}
/* Styles pour le retournement des flashcards */
.flashcard-container {
perspective: 1000px;
margin-bottom: 16px;
}
.flashcard {
position: relative;
min-height: 150px;
transform-style: preserve-3d;
transition: transform 0.6s;
cursor: pointer;
}
.flashcard.is-flipped {
transform: rotateY(180deg);
}
.flashcard-front, .flashcard-back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 24px;
border-radius: 20px;
background: var(--white);
box-shadow: var(--shadow);
border-left: 4px solid var(--primary-blue);
}
.flashcard-back {
transform: rotateY(180deg);
border-left-color: var(--success);
}
.flashcard h3 {
color: var(--primary-blue);
margin-bottom: 12px;
font-size: 1.1rem;
font-weight: 600;
text-align: center;
}
.flashcard .answer {
color: var(--gray-600);
text-align: center;
}
.flashcard-front::after {
content: 'Cliquez pour révéler';
position: absolute;
bottom: 15px;
font-size: 0.8rem;
color: var(--gray-300);
font-style: italic;
}
.quiz-question {
background: var(--white);
border-radius: 20px;
padding: 24px;
margin-bottom: 16px;
box-shadow: var(--shadow);
border-left: 4px solid var(--primary-blue);
transition: transform 0.3s ease;
}
.quiz-question:hover {
transform: translateX(4px);
}
.quiz-question h3 {
color: var(--primary-blue);
margin-bottom: 12px;
font-size: 1.1rem;
font-weight: 600;
}
.quiz-options {
margin: 16px 0;
}
.quiz-option {
padding: 12px 16px;
margin: 8px 0;
border: 2px solid var(--gray-100);
border-radius: 12px;
cursor: pointer;
transition: all 0.3s ease;
background: var(--white);
}
/* Désactive le clic une fois la réponse donnée */
.quiz-question.answered .quiz-option {
pointer-events: none;
opacity: 0.8;
}
.quiz-option:hover {
border-color: var(--light-blue);
background: var(--extra-light-blue);
}
.quiz-option.correct {
border-color: var(--success);
background: #f0fdf4;
color: #059669;
font-weight: bold;
}
.quiz-option.incorrect {
border-color: var(--error);
background: #fef2f2;
color: #dc2626;
}
.quiz-question.answered .quiz-option.correct {
opacity: 1;
}
.quiz-explanation {
margin-top: 16px;
padding: 16px;
background: var(--extra-light-blue);
border-radius: 12px;
border-left: 4px solid var(--primary-blue);
}
.error-message {
background: #fef2f2;
color: var(--error);
padding: 16px 20px;
border-radius: 12px;
border: 1px solid #fecaca;
margin-top: 16px;
text-align: center;
font-weight: 500;
}
.success-message {
background: #f0fdf4;
color: var(--success);
padding: 16px 20px;
border-radius: 12px;
border: 1px solid #bbf7d0;
margin-top: 16px;
text-align: center;
font-weight: 500;
}
.floating-elements {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: -1;
}
.floating-circle {
position: absolute;
border-radius: 50%;
background: linear-gradient(135deg, rgba(37, 99, 235, 0.1), rgba(59, 130, 246, 0.05));
animation: float 6s ease-in-out infinite;
}
.floating-circle:nth-child(1) {
width: 80px;
height: 80px;
top: 10%;
left: 10%;
animation-delay: 0s;
}
.floating-circle:nth-child(2) {
width: 120px;
height: 120px;
top: 60%;
right: 10%;
animation-delay: 2s;
}
.floating-circle:nth-child(3) {
width: 100px;
height: 100px;
bottom: 20%;
left: 20%;
animation-delay: 4s;
}
@keyframes float {
0%, 100% { transform: translateY(0px) rotate(0deg); }
50% { transform: translateY(-20px) rotate(180deg); }
}
/* Animations d'entrée */
.fade-in {
animation: fadeIn 0.5s ease-out forwards;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Responsive optimizations */
@media (min-width: 640px) {
.container {
max-width: 640px;
margin: 0 auto;
padding: 40px 24px;
}
.type-selector {
gap: 16px;
}
.main-card {
padding: 32px;
}
}
/* Accessibilité et focus states améliorés */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
</style>
</head>
<body>
<!-- Éléments flottants décoratifs -->
<div class="floating-elements">
<div class="floating-circle"></div>
<div class="floating-circle"></div>
<div class="floating-circle"></div>
</div>
<div class="container">
<div class="header">
<h1><i class="fas fa-graduation-cap"></i> StudyGen</h1>
<p>Créez des flashcards et quiz personnalisés en quelques secondes</p>
</div>
<div class="main-card">
<form id="generateForm">
<div class="form-group">
<label for="topic">
<i class="fas fa-lightbulb"></i> Sujet d'étude
</label>
<input
type="text"
id="topic"
name="topic"
placeholder="Ex: Les révolutions françaises, Python, Anatomie..."
required
>
</div>
<div class="form-group">
<label>
<i class="fas fa-tools"></i> Type de contenu
</label>
<div class="type-selector">
<div class="type-option">
<input type="radio" id="flashcards" name="type" value="flashcards" checked>
<label for="flashcards">
<i class="fas fa-clone"></i>
<span>Flashcards</span>
</label>
</div>
<div class="type-option">
<input type="radio" id="quiz" name="type" value="quiz">
<label for="quiz">
<i class="fas fa-question-circle"></i>
<span>Quiz</span>
</label>
</div>
</div>
</div>
<button type="submit" class="generate-btn" id="generateBtn">
<span class="btn-text">
<i class="fas fa-magic"></i> Générer le contenu
</span>
<div class="spinner"></div>
</button>
</form>
</div>
<div id="results" class="results-container"></div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const form = document.getElementById('generateForm');
const generateBtn = document.getElementById('generateBtn');
const resultsContainer = document.getElementById('results');
form.addEventListener('submit', async function(e) {
e.preventDefault();
const topic = document.getElementById('topic').value.trim();
const type = document.querySelector('input[name="type"]:checked').value;
if (!topic) {
showMessage('Veuillez entrer un sujet d\'étude.', 'error');
return;
}
generateBtn.classList.add('loading');
generateBtn.disabled = true;
resultsContainer.innerHTML = '';
try {
// MODIFICATION : L'appel au backend a été restauré.
// La fonction de simulation a été supprimée.
const response = await fetch('/generate', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ topic, type })
});
const data = await response.json();
if (data.success) {
displayResults(data[type], type);
showMessage(`${type === 'flashcards' ? 'Flashcards' : 'Quiz'} généré avec succès !`, 'success');
} else {
showMessage(data.error || 'Une erreur est survenue lors de la génération.', 'error');
}
} catch (error) {
console.error('Erreur:', error);
showMessage('Erreur de connexion. Veuillez réessayer.', 'error');
} finally {
generateBtn.classList.remove('loading');
generateBtn.disabled = false;
}
});
function displayResults(data, type) {
resultsContainer.innerHTML = '';
if (type === 'flashcards') {
// Logique d'affichage pour les flashcards retournables
data.forEach((item, index) => {
const flashcardContainer = document.createElement('div');
flashcardContainer.className = 'flashcard-container fade-in';
flashcardContainer.style.animationDelay = `${index * 0.1}s`;
flashcardContainer.innerHTML = `
<div class="flashcard" onclick="this.classList.toggle('is-flipped')">
<div class="flashcard-front">
<h3><i class="fas fa-question"></i> ${item.question}</h3>
</div>
<div class="flashcard-back">
<div class="answer">
<i class="fas fa-lightbulb"></i> ${item.answer}
</div>
</div>
</div>
`;
resultsContainer.appendChild(flashcardContainer);
});
} else { // Quiz
// Logique d'affichage pour le quiz interactif
data.forEach((item, index) => {
const quizEl = document.createElement('div');
quizEl.className = 'quiz-question fade-in';
quizEl.style.animationDelay = `${index * 0.1}s`;
// On stocke la bonne réponse dans un attribut data-*
quizEl.dataset.correctAnswer = item.correctAnswer;
const optionsHtml = item.options.map(option => `
<div class="quiz-option" onclick="checkAnswer(this)">
${option}
</div>
`).join('');
quizEl.innerHTML = `
<h3><i class="fas fa-question-circle"></i> ${item.question}</h3>
<div class="quiz-options">${optionsHtml}</div>
<div class="quiz-explanation" style="display: none;">
<i class="fas fa-info-circle"></i> <strong>Explication :</strong> ${item.explanation}
</div>
`;
resultsContainer.appendChild(quizEl);
});
}
}
function showMessage(message, type) {
const messageEl = document.createElement('div');
messageEl.className = `${type}-message fade-in`;
messageEl.innerHTML = `
<i class="fas ${type === 'success' ? 'fa-check-circle' : 'fa-exclamation-circle'}"></i>
${message}
`;
const oldMessages = document.querySelectorAll('.error-message, .success-message');
oldMessages.forEach(msg => msg.remove());
resultsContainer.insertBefore(messageEl, resultsContainer.firstChild);
setTimeout(() => {
messageEl.remove();
}, 5000);
}
// Nouvelle fonction pour vérifier la réponse du quiz
window.checkAnswer = function(optionEl) {
const quizQuestion = optionEl.closest('.quiz-question');
if (quizQuestion.classList.contains('answered')) return; // Empêche de répondre à nouveau
quizQuestion.classList.add('answered');
const correctAnswer = quizQuestion.dataset.correctAnswer;
const selectedAnswer = optionEl.textContent.trim();
const explanation = quizQuestion.querySelector('.quiz-explanation');
const allOptions = quizQuestion.querySelectorAll('.quiz-option');
if (selectedAnswer === correctAnswer) {
optionEl.classList.add('correct');
} else {
optionEl.classList.add('incorrect');
}
allOptions.forEach(opt => {
const optText = opt.textContent.trim();
if (optText === correctAnswer) {
opt.classList.add('correct');
opt.innerHTML = `<i class="fas fa-check"></i> ${optText}`;
} else if (opt.classList.contains('incorrect')) {
opt.innerHTML = `<i class="fas fa-times"></i> ${optText}`;
}
});
explanation.style.display = 'block';
explanation.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
};
});
</script>
</body>
</html>