npm - @autocode-cli/autocode - Versions diffs - 0.22.0 → 0.23.0 - Mend

@autocode-cli/autocode 0.22.0 → 0.23.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (157) hide show

package/.output/public/fake-features/cocktail-generator/index.html ADDED Viewed

@@ -0,0 +1,620 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Générateur de Cocktails Aléatoires</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        body {
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            min-height: 100vh;
+            padding: 20px;
+        }
+        .container {
+            max-width: 900px;
+            margin: 0 auto;
+        }
+        header {
+            text-align: center;
+            color: white;
+            margin-bottom: 30px;
+        }
+        header h1 {
+            font-size: 2.5rem;
+            margin-bottom: 10px;
+            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
+        }
+        header p {
+            font-size: 1.1rem;
+            opacity: 0.9;
+        }
+        /* Filtres */
+        .filters-container {
+            background: white;
+            border-radius: 12px;
+            padding: 20px;
+            margin-bottom: 25px;
+            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
+        }
+        .filters-title {
+            font-size: 1rem;
+            color: #666;
+            margin-bottom: 12px;
+        }
+        .filters {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 10px;
+        }
+        .filter-btn {
+            padding: 10px 18px;
+            border: 2px solid #e0e0e0;
+            background: white;
+            border-radius: 25px;
+            cursor: pointer;
+            font-size: 0.9rem;
+            transition: all 0.3s ease;
+            color: #555;
+        }
+        .filter-btn:hover {
+            border-color: #667eea;
+            color: #667eea;
+        }
+        .filter-btn.active {
+            background: #667eea;
+            border-color: #667eea;
+            color: white;
+        }
+        /* Carte cocktail */
+        .cocktail-card {
+            background: white;
+            border-radius: 16px;
+            padding: 30px;
+            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
+            transition: transform 0.3s ease;
+        }
+        .cocktail-card.loading {
+            opacity: 0.7;
+            transform: scale(0.98);
+        }
+        .cocktail-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: flex-start;
+            margin-bottom: 25px;
+            flex-wrap: wrap;
+            gap: 15px;
+        }
+        .cocktail-title-section {
+            flex: 1;
+        }
+        .cocktail-name {
+            font-size: 2rem;
+            color: #333;
+            margin-bottom: 8px;
+        }
+        .cocktail-meta {
+            display: flex;
+            align-items: center;
+            gap: 15px;
+            flex-wrap: wrap;
+        }
+        .cocktail-badge {
+            display: inline-block;
+            padding: 6px 14px;
+            border-radius: 20px;
+            font-size: 0.85rem;
+            font-weight: 600;
+        }
+        .badge-alcoholic {
+            background: #ffeaa7;
+            color: #b8860b;
+        }
+        .badge-non-alcoholic {
+            background: #81ecec;
+            color: #00838f;
+        }
+        .cocktail-base {
+            color: #666;
+            font-size: 0.95rem;
+        }
+        /* Section verre avec icône */
+        .glass-section {
+            text-align: center;
+            min-width: 100px;
+        }
+        .glass-icon {
+            font-size: 4rem;
+            margin-bottom: 8px;
+        }
+        .glass-name {
+            font-size: 0.9rem;
+            color: #666;
+            font-weight: 500;
+        }
+        /* Sections ingrédients et instructions */
+        .cocktail-content {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 30px;
+            margin-top: 25px;
+        }
+        @media (max-width: 768px) {
+            .cocktail-content {
+                grid-template-columns: 1fr;
+            }
+        }
+        .section-title {
+            font-size: 1.2rem;
+            color: #667eea;
+            margin-bottom: 15px;
+            display: flex;
+            align-items: center;
+            gap: 8px;
+        }
+        .section-title::before {
+            content: '';
+            width: 4px;
+            height: 20px;
+            background: #667eea;
+            border-radius: 2px;
+        }
+        .ingredients-list {
+            list-style: none;
+        }
+        .ingredients-list li {
+            padding: 10px 0;
+            border-bottom: 1px solid #f0f0f0;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        .ingredients-list li:last-child {
+            border-bottom: none;
+        }
+        .ingredient-name {
+            color: #333;
+        }
+        .ingredient-quantity {
+            color: #667eea;
+            font-weight: 600;
+            font-size: 0.95rem;
+        }
+        .instructions-list {
+            list-style: none;
+            counter-reset: step;
+        }
+        .instructions-list li {
+            padding: 12px 0 12px 45px;
+            position: relative;
+            color: #444;
+            line-height: 1.5;
+        }
+        .instructions-list li::before {
+            counter-increment: step;
+            content: counter(step);
+            position: absolute;
+            left: 0;
+            top: 10px;
+            width: 28px;
+            height: 28px;
+            background: #667eea;
+            color: white;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 0.85rem;
+            font-weight: 600;
+        }
+        /* Bouton générer */
+        .generate-section {
+            margin-top: 30px;
+            text-align: center;
+        }
+        .generate-btn {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            color: white;
+            border: none;
+            padding: 16px 40px;
+            font-size: 1.1rem;
+            border-radius: 30px;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
+            display: inline-flex;
+            align-items: center;
+            gap: 10px;
+        }
+        .generate-btn:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 6px 20px rgba(102, 126, 234, 0.5);
+        }
+        .generate-btn:active {
+            transform: translateY(0);
+        }
+        .generate-btn.loading {
+            opacity: 0.7;
+            cursor: wait;
+        }
+        .generate-btn .spinner {
+            display: none;
+            width: 20px;
+            height: 20px;
+            border: 2px solid rgba(255, 255, 255, 0.3);
+            border-top-color: white;
+            border-radius: 50%;
+            animation: spin 0.8s linear infinite;
+        }
+        .generate-btn.loading .spinner {
+            display: block;
+        }
+        .generate-btn.loading .btn-icon {
+            display: none;
+        }
+        @keyframes spin {
+            to { transform: rotate(360deg); }
+        }
+        /* Compteur */
+        .cocktail-count {
+            text-align: center;
+            margin-top: 20px;
+            color: rgba(255, 255, 255, 0.9);
+            font-size: 0.95rem;
+        }
+        /* Responsive */
+        @media (max-width: 600px) {
+            header h1 {
+                font-size: 1.8rem;
+            }
+            .cocktail-name {
+                font-size: 1.5rem;
+            }
+            .cocktail-card {
+                padding: 20px;
+            }
+            .filters {
+                justify-content: center;
+            }
+            .filter-btn {
+                padding: 8px 14px;
+                font-size: 0.85rem;
+            }
+            .generate-btn {
+                padding: 14px 30px;
+                font-size: 1rem;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <header>
+            <h1>🍹 Générateur de Cocktails</h1>
+            <p>Découvrez des recettes de cocktails aléatoires avec leurs ingrédients et instructions</p>
+        </header>
+        <!-- Filtres -->
+        <div class="filters-container">
+            <div class="filters-title">Filtrer par :</div>
+            <div class="filters" data-testid="filters">
+                <button class="filter-btn active" data-filter="all" data-testid="filter-all">Tous</button>
+                <button class="filter-btn" data-filter="alcoholic" data-testid="filter-alcoholic">Avec Alcool</button>
+                <button class="filter-btn" data-filter="non-alcoholic" data-testid="filter-non-alcoholic">Sans Alcool</button>
+                <button class="filter-btn" data-filter="rum" data-testid="filter-rum">🥃 Rhum</button>
+                <button class="filter-btn" data-filter="vodka" data-testid="filter-vodka">🍸 Vodka</button>
+                <button class="filter-btn" data-filter="gin" data-testid="filter-gin">🌿 Gin</button>
+                <button class="filter-btn" data-filter="tequila" data-testid="filter-tequila">🌵 Tequila</button>
+                <button class="filter-btn" data-filter="whiskey" data-testid="filter-whiskey">🥃 Whiskey</button>
+            </div>
+        </div>
+        <!-- Carte du cocktail -->
+        <div class="cocktail-card" data-testid="cocktail-card">
+            <div class="cocktail-header">
+                <div class="cocktail-title-section">
+                    <h2 class="cocktail-name" data-testid="cocktail-name">Chargement...</h2>
+                    <div class="cocktail-meta">
+                        <span class="cocktail-badge badge-alcoholic" data-testid="cocktail-badge">Avec Alcool</span>
+                        <span class="cocktail-base" data-testid="cocktail-base">Base : -</span>
+                    </div>
+                </div>
+                <div class="glass-section">
+                    <div class="glass-icon" data-testid="glass-icon">🍹</div>
+                    <div class="glass-name" data-testid="glass-name">-</div>
+                </div>
+            </div>
+            <div class="cocktail-content">
+                <div class="ingredients-section">
+                    <h3 class="section-title">Ingrédients</h3>
+                    <ul class="ingredients-list" data-testid="ingredients-list">
+                        <!-- Rempli dynamiquement -->
+                    </ul>
+                </div>
+                <div class="instructions-section">
+                    <h3 class="section-title">Préparation</h3>
+                    <ol class="instructions-list" data-testid="instructions-list">
+                        <!-- Rempli dynamiquement -->
+                    </ol>
+                </div>
+            </div>
+            <div class="generate-section">
+                <button class="generate-btn" data-testid="generate-btn">
+                    <span class="btn-icon">🎲</span>
+                    <span class="spinner"></span>
+                    Nouveau Cocktail
+                </button>
+            </div>
+        </div>
+        <div class="cocktail-count" data-testid="cocktail-count">25 cocktails disponibles</div>
+    </div>
+    <script src="cocktails.js"></script>
+    <script>
+        /**
+         * Générateur de Cocktails Aléatoires
+         * Interface interactive pour le dossier fake-features
+         */
+        class CocktailGenerator {
+            constructor() {
+                this.cocktails = COCKTAILS_DATABASE;
+                this.currentFilter = 'all';
+                this.currentCocktail = null;
+                this.lastCocktailId = null;
+                this.isLoading = false;
+                // Mapping des types de verres vers des icônes
+                this.glassIcons = {
+                    'Highball': '🥃',
+                    'Hurricane': '🍹',
+                    'Coupette': '🍸',
+                    'Old Fashioned': '🥃',
+                    'Martini': '🍸',
+                    'Mug en cuivre': '🍺',
+                    'Tumbler': '🥃',
+                    'Verre à Irish Coffee': '☕',
+                    'Grand verre': '🥛'
+                };
+                this.init();
+            }
+            init() {
+                this.bindEvents();
+                this.generateRandomCocktail();
+            }
+            bindEvents() {
+                // Bouton générer
+                document.querySelector('[data-testid="generate-btn"]').addEventListener('click', () => {
+                    this.generateRandomCocktail();
+                });
+                // Filtres
+                document.querySelectorAll('.filter-btn').forEach(btn => {
+                    btn.addEventListener('click', (e) => {
+                        this.setFilter(e.target.dataset.filter);
+                    });
+                });
+            }
+            setFilter(filter) {
+                this.currentFilter = filter;
+                // Mettre à jour l'UI des filtres
+                document.querySelectorAll('.filter-btn').forEach(btn => {
+                    btn.classList.toggle('active', btn.dataset.filter === filter);
+                });
+                // Réinitialiser lastCocktailId pour permettre la sélection de n'importe quel cocktail
+                this.lastCocktailId = null;
+                // Mettre à jour le compteur
+                this.updateCocktailCount();
+                // Générer un nouveau cocktail avec le filtre
+                this.generateRandomCocktail();
+            }
+            getFilteredCocktails() {
+                if (this.currentFilter === 'all') {
+                    return this.cocktails;
+                }
+                if (this.currentFilter === 'alcoholic') {
+                    return this.cocktails.filter(c => c.category === 'alcoholic');
+                }
+                if (this.currentFilter === 'non-alcoholic') {
+                    return this.cocktails.filter(c => c.category === 'non-alcoholic');
+                }
+                return this.cocktails.filter(c => c.base === this.currentFilter);
+            }
+            generateRandomCocktail() {
+                if (this.isLoading) return;
+                const btn = document.querySelector('[data-testid="generate-btn"]');
+                const card = document.querySelector('[data-testid="cocktail-card"]');
+                // Animation de chargement
+                this.isLoading = true;
+                btn.classList.add('loading');
+                card.classList.add('loading');
+                setTimeout(() => {
+                    const filtered = this.getFilteredCocktails();
+                    if (filtered.length === 0) {
+                        this.showNoCocktails();
+                        this.isLoading = false;
+                        btn.classList.remove('loading');
+                        card.classList.remove('loading');
+                        return;
+                    }
+                    // Éviter de répéter le même cocktail
+                    let availableCocktails = filtered;
+                    if (filtered.length > 1 && this.lastCocktailId !== null) {
+                        availableCocktails = filtered.filter(c => c.id !== this.lastCocktailId);
+                    }
+                    const randomIndex = Math.floor(Math.random() * availableCocktails.length);
+                    const cocktail = availableCocktails[randomIndex];
+                    this.lastCocktailId = cocktail.id;
+                    this.currentCocktail = cocktail;
+                    this.displayCocktail(cocktail);
+                    this.updateCocktailCount();
+                    this.isLoading = false;
+                    btn.classList.remove('loading');
+                    card.classList.remove('loading');
+                }, 500);
+            }
+            displayCocktail(cocktail) {
+                // Nom
+                document.querySelector('[data-testid="cocktail-name"]').textContent = cocktail.name;
+                // Badge catégorie
+                const badge = document.querySelector('[data-testid="cocktail-badge"]');
+                if (cocktail.category === 'alcoholic') {
+                    badge.textContent = 'Avec Alcool';
+                    badge.className = 'cocktail-badge badge-alcoholic';
+                } else {
+                    badge.textContent = 'Sans Alcool';
+                    badge.className = 'cocktail-badge badge-non-alcoholic';
+                }
+                // Base
+                const baseText = this.formatBase(cocktail.base);
+                document.querySelector('[data-testid="cocktail-base"]').textContent = `Base : ${baseText}`;
+                // Verre avec icône
+                const glassIcon = this.glassIcons[cocktail.glass] || '🥃';
+                document.querySelector('[data-testid="glass-icon"]').textContent = glassIcon;
+                document.querySelector('[data-testid="glass-name"]').textContent = cocktail.glass;
+                // Ingrédients
+                const ingredientsList = document.querySelector('[data-testid="ingredients-list"]');
+                ingredientsList.innerHTML = cocktail.ingredients.map(ing => `
+                    <li>
+                        <span class="ingredient-name">${ing.name}</span>
+                        <span class="ingredient-quantity">${ing.quantity}</span>
+                    </li>
+                `).join('');
+                // Instructions
+                const instructionsList = document.querySelector('[data-testid="instructions-list"]');
+                instructionsList.innerHTML = cocktail.instructions.map(instr => `
+                    <li>${instr}</li>
+                `).join('');
+            }
+            showNoCocktails() {
+                document.querySelector('[data-testid="cocktail-name"]').textContent = 'Aucun cocktail trouvé';
+                document.querySelector('[data-testid="cocktail-badge"]').textContent = '-';
+                document.querySelector('[data-testid="cocktail-base"]').textContent = 'Base : -';
+                document.querySelector('[data-testid="glass-icon"]').textContent = '🤷';
+                document.querySelector('[data-testid="glass-name"]').textContent = '-';
+                document.querySelector('[data-testid="ingredients-list"]').innerHTML = '<li>Aucun ingrédient</li>';
+                document.querySelector('[data-testid="instructions-list"]').innerHTML = '<li>Essayez un autre filtre</li>';
+            }
+            formatBase(base) {
+                const baseNames = {
+                    'rum': 'Rhum',
+                    'vodka': 'Vodka',
+                    'gin': 'Gin',
+                    'tequila': 'Tequila',
+                    'whiskey': 'Whiskey',
+                    'sans alcool': 'Sans Alcool'
+                };
+                return baseNames[base] || base;
+            }
+            updateCocktailCount() {
+                const filtered = this.getFilteredCocktails();
+                const total = this.cocktails.length;
+                const countEl = document.querySelector('[data-testid="cocktail-count"]');
+                if (this.currentFilter === 'all') {
+                    countEl.textContent = `${total} cocktails disponibles`;
+                } else {
+                    countEl.textContent = `${filtered.length} cocktails sur ${total}`;
+                }
+            }
+        }
+        // Initialiser l'application
+        document.addEventListener('DOMContentLoaded', () => {
+            new CocktailGenerator();
+        });
+    </script>
+</body>
+</html>