KinglyShade · KinglyShade · Nov 16, 2023 · Nov 16, 2023 · Nov 16, 2023 · Nov 16, 2023
diff --git a/admin/index.html b/admin/index.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="es">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Segunda Página</title>
+    <link rel="stylesheet" href="./style.css">
+</head>
+<body>
+    <div class="container">
+        <h1>Segunda Página</h1>
+        <div class="lista-preguntas-container" id="lista-preguntas-container"></div>
+    </div>
+
+    <script src="../js/tst.js"  type="module"></script>
+    <script src="./index.js" type="module"></script>
+</body>
+</html>
diff --git a/admin/index.js b/admin/index.js
@@ -0,0 +1,16 @@
+import PLB from '../js/tst.js';
+const analizador = new PLB();
+var db = analizador.db
+var cacon = document.querySelector('lista-preguntas-container')
+function Mostrar(){
+    var transaction = bd.transaction(["pregntasyrespuestas"]);
+    var almacen = transaction.objectStore("pregntasyrespuestas");
+    var p = almacen.openCursor()
+    p.addEventListener("success",mostrarinfo)
+}
+function mostrarinfo(evento){
+    var p = evento.target.result;
+    if(p){
+        cacon.innerHTML= "jalo we"
+    }
+}
diff --git a/admin/style.css b/admin/style.css
@@ -0,0 +1,21 @@
+body {
+    font-family: Arial, sans-serif;
+    margin: 0;
+    padding: 0;
+    background-color: #f4f4f4;
+}
+
+.container {
+    max-width: 800px;
+    margin: 50px auto;
+    padding: 20px;
+    background-color: #fff;
+    border-radius: 5px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+}
+
+button {
+    padding: 10px 15px;
+    font-size: 16px;
+    cursor: pointer;
+}
diff --git a/ayuda/index.html b/ayuda/index.html
@@ -7,17 +7,14 @@
     <link rel="stylesheet" href="../Home/style.css">
     <script src="../js/tst.js" type="module"></script>
     <link rel="stylesheet" href="../banners/header/header.css">
-    <title>Libreria GT Ayuda</title>
+    <title>Kingly Shade</title>
+    <link rel="icon" type="image/jpg" href="../img/logos/ks.ico">
 </head>
 <body>
 
-    <div class="custom-alert" id="custom-alert">
-        <span class="close-btn" id="cls">&times;</span>
-        <p>¡Advertencia! Este chat es experimental y no debe tomarse en serio.</p>
-    </div>
     <header class="head">
         <a href="" class="logot">
-          <img src="./../imgs/logos/logo.png" alt="logo">  
+          <img src="../img/logos/aasss.png" alt="logo">  
             <h2 class="text">Libreria GT</h2></a>
             <nav class="navbar">
                 <a href="../Home/index.html" class="">Inicio</a>
@@ -26,17 +23,42 @@ <h2 class="text">Libreria GT</h2></a>
             </nav>
     </header>
 
+    <div class="custom-alert" id="custom-alert">
+        <span class="close-btn" id="cls" onclick="closeAlert()">&times;</span>
+        <p>¡Atención! Este chat es experimental y no debe tomarse en serio.</p>
+    </div>
+
     <div class="chat-container">
         <div class="chat">
             <div class="header">
-                <img src="../imgs/productos/p1.png">
-                <span class="header-text">Kingly Shade</span>
+                <img src="../img/productos/p1.png">
+                <span class="header-text">Kingly Shade - Alpha 0.2</span>
+            </div>
+            <div id="chat-box" class="chat-box"><video id="video-background" autoplay muted loop>
+                <source src="../img/cf5d52341c404f25a030667c0df27773.mp4" type="video/mp4">
+                Your browser does not support the video tag.
+            </video></div>
+            <div class="input-container">
+                <input type="text" id="user-input" class="user-input" placeholder="Escribe tu mensaje..." >
+                <button class="send-btn" id="snd">✔</button>
             </div>
-            <div id="chat-box" class="chat-box"><img class="avat" id="avat"><br></div>
-            <input type="text" id="user-input" class="user-input" placeholder="Escribe tu mensaje...">
-            <button class="send-btn" id="snd">Enviar</button>
         </div>
     </div>
+
+    <div class="name-prompt" id="name-prompt">
+        <div class="prompt-box">
+            <p>¡Hola! Por favor, ingresa tu nombre:</p>
+            <input type="text" id="user-name-input">
+            <button onclick="saveUserName()">Guardar</button>
+        </div>
+    </div>
+
+    <div class="name-animation" id="name-animation">
+        <p id="user-name-display"></p>
+    </div>
+
+
+
     <script src="script.js" type="module"></script>
 
 </body>

diff --git a/ayuda/script.js b/ayuda/script.js
@@ -1,44 +1,102 @@
-import plb from '../js/tst.js';
-const analizador = new plb();
-document.getElementById('snd').addEventListener('click', function () {
-    var userInput = document.getElementById('user-input').value;
-    var chatBox = document.getElementById('chat-box');
-    var catImage = document.getElementById('cat-image');
-    var messageContainer = document.createElement('div');
-    messageContainer.className = 'message-container';
-    var avatar = document.createElement('div');
-    avatar.className = 'cat';
-    messageContainer.appendChild(avatar);
-    var messageText = document.createElement('div');
-    messageText.className = 'message-text';
-    messageText.innerText = 'User: ' + userInput;
-    messageContainer.appendChild(messageText);
-    chatBox.appendChild(messageContainer);
-    document.getElementById('user-input').value = '';
-
-    a(userInput);
-});
+import PLB from '../js/tst.js';
+
+document.addEventListener('DOMContentLoaded', (event) => {
+    const analizador = new PLB();
+
+    // document.getElementById('custom-alert').style.display = 'block';
 
-async function a(userInput) {
-    const decision = await analizador.tomarDecision(userInput);
-    var chatBox = document.getElementById('chat-box');
-    var messageContainer = document.createElement('div');
-    messageContainer.className = 'message-container';
+    window.closeAlert = function() {
+        document.getElementById('custom-alert').style.display = 'none';
+
 
-    var avatar = document.getElementById('avat');
-
+    };
+    var nlc = window.localStorage.getItem('nombre')
+    if(!nlc){
+        showNamePrompt();
+    }
+    function showNamePrompt() {
+        document.getElementById('name-prompt').style.display = 'block';
+    }
+
+    window.saveUserName = function() {
+        var userName = document.getElementById('user-name-input').value.trim();
+        if (userName) {
+            window.localStorage.setItem('nombre', userName)
+            document.getElementById('name-prompt').style.display = 'none';
+            document.getElementById('user-name-display').innerText = `Bienvenido, ${userName}!`;
+            document.getElementById('name-animation').style.display = 'block';
+
+            document.getElementById('video-background').style.display = 'block';
+            setTimeout(() => {
+                document.getElementById('user-name-display').style.display = 'none';
+                document.getElementById('user-name-display').innerText = ``;
+                document.getElementById('name-animation').style.display = 'none';
+
+                document.getElementById('video-background').style.display = 'none';
+            }, 5000);
+        }
+    };
+
+    document.getElementById('user-input').addEventListener('keypress', function (event) {
+        if (event.key === 'Enter') {
+            sendMessage();
+        }
+    });
+
+    document.getElementById('snd').addEventListener('click', sendMessage);
+
+    function sendMessage() {
+        var userInput = document.getElementById('user-input').value.trim();
+
+        if (!userInput) {
+            return;
+        }
 
-    // var randomAvatar = Math.floor(Math.random() * 3) + 1;
-    // avatar.src = `../imgs/avatar/avatar${randomAvatar}.jpg`;
-    var messageText = document.createElement('div');
-    messageText.className = 'message-text';
+        var chatBox = document.getElementById('chat-box');
+        var messageContainer = document.createElement('div');
+        messageContainer.className = 'message-container';
 
-    messageText.innerText = 'KinglyShade:' + decision;
+        // var avatar = document.getElementById('avat');
 
-    messageText.style.backgroundColor = 'rgb(76, 127, 175)';
+        var messageText = document.createElement('div');
+        messageText.className = 'message-text';
+        var nlc = window.localStorage.getItem('nombre')
+        if(!nlc){
+            messageText.innerText = 'Usuario: ' + userInput;
 
-    messageContainer.appendChild(avatar);
-    messageContainer.appendChild(messageText);
+        }else{
+            messageText.innerText = `${nlc}: ` + userInput;
 
-    chatBox.appendChild(messageContainer);
-}
+        }
+
+        // messageContainer.appendChild(avatar);
+        messageContainer.appendChild(messageText);
+        chatBox.appendChild(messageContainer);
+
+        document.getElementById('user-input').value = '';
+
+        a(userInput);
+    }
+
+    async function a(userInput) {
+        const decision = await analizador.tomarDecision(userInput);
+        var chatBox = document.getElementById('chat-box');
+        var messageContainer = document.createElement('div');
+        messageContainer.className = 'message-container';
+
+        // var avatar = document.getElementById('avat');
+
+        var messageText = document.createElement('div');
+        messageText.className = 'message-text';
+        messageText.innerText = 'KinglyShade: ' + decision;
+        messageText.style.animation = 'slideInRight 0.5s ease-in-out';
+
+        messageText.style.backgroundColor = 'rgb(76, 127, 175)';
+        setTimeout(() => {
+        // messageContainer.appendChild(avatar);
+        messageContainer.appendChild(messageText);
+
+        chatBox.appendChild(messageContainer);
+        },1000);
+    }
+});