Devier_Project/snake.html at main · simonet4/Devier_Project · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title>NIRD - Hidden Snake</title>
        <script src="snake.js">
            startGame()
        </script>
        <link href="stylesnake.css" rel="stylesheet" />
        <link href="./chatbot/chat.css" rel="stylesheet"/>
    </head>
    <body>
        <h2 class="title">Vous êtes Microsoft. </h2>
        <p class="desc"> Vous devez collecter les données personnelles des utilisateurs afin d'agrandir votre capital et ainsi, satisfaire vos investisseurs. <p>
        <h1 class="bold">C'est une métaphore du capitalisme...</h1>
        <button class="btn btn-periwinkle" type="button" onclick="startGame()">Start</button>
        <footer>
            <div class="footer-container">
                <div class="footer-section">
                    <h3>NIRD et sources</h3>
                    <a href = "https://nird.forge.apps.education.fr/" target="_blank">Site officiel de la démarche NIRD</a>
                    <a href = "https://video.echirolles.fr/w/hVykGUtRZqRen6eiutqRvQ" target="_blank">Vidéo : les logiciels libres</a>
                    <a href = "https://www.radiofrance.fr/franceinter/podcasts/le-grand-reportage-de-france-inter/le-grand-reportage-du-mardi-14-octobre-2025-4136495" target="_blank">Podcast : les logiciels libres</a>
                    <a href = "https://www.youtube.com/watch?v=76T8oubek-c" target="_blank">Vidéo : jeter des milliers d'ordinateurs ?</a>
                    <a href = "https://www.youtube.com/watch?v=S6GLqkhykmA" target="_blank">Vidéo : l'ordinateur obsolète</a>
                </div>

                <div class="footer-section">
                    <h3>Navigation</h3>
                    <a href="index.html">Accueil</a>
                    <a href="débutHistoire.html">L'Histoire</a>
                    <a href="crédits.html">Crédits</a>
                    <a href="ressources.html">Ressources</a>
                </div>

                <div class="footer-section">
                    <a href="#">
                        <h3>Jeu snake</h3>
                    </a>
                    <a href="#" data-popup="J't'ai bien eu !">Je suis le vrai jeu snake !</a>
                    <a href="#" data-popup="Eh bien enfait... non.">Non, c'est moi !</a>
                    <a href="#" data-popup="C'était vraiment pas moi.">En tout cas, c'est pas moi.</a>
                    <a href="#" data-popup="Ah bon ? C'est pas moi...">Ben oui, c'est moi !</a>
                </div>
                <script>
                    document.querySelectorAll('a[data-popup]').forEach(link => {
                        link.addEventListener('click', function(event) {
                            event.preventDefault(); // Empêche le comportement par défaut du lien
                            const message = this.getAttribute('data-popup'); // Récupère le texte
                            alert(message); // Affiche la popup
                        });
                    });
                </script>

            </div>

            <div class="footer-bottom">
                <p>&copy; 2025 Dev'ier - IUT Informatique de Toulouse. Tous droits réservés.</p>
            </div>
        </footer>
        <div id="chat-icon">
        <img src="./chatbot/chatbotreact.png" alt="Chat">
        </div>
        <div id="chat-box">
            <div class="chat-header">
                <span class="header-title">Moustache</span>
                <img id="chat-corner-icon" src="./chatbot/pate.png" alt="icone">
            </div>
            <div class="chat-body"></div>
            <form id="chat-form">
                <div class="chat-footer">
                    <input type="text" id="user-message" name="message" placeholder="Écrire..." required>
                    <button type="submit">Envoyer</button>
                </div>
            </form>
        </div>
        <script src="./chatbot/chat.js"></script>
    </body>
</html>