Programació de les funcionalitats bàsiques en el BackEnd i FrontEnd

Documentació • XatBot 2026 – LAN Party
🤖

XatBot 2026

Documentació tècnica completa • LAN Party

Versió 1.0 • Abril 2026

Com es va crear el XatBot de la LAN Party 2026

Tot el projecte es va fer amb l’ajuda de la IA. A continuació tens la documentació completa.

PAS 1

Creació amb ajuda de la IA

Es va dissenyar un chatbot completament autònom amb estètica cyber-futurista i 50 FAQs integrades directament al codi.

PAS 2

Fitxer widget.html

Un únic fitxer HTML que conté tot el disseny, lògica i base de dades de respostes.

PAS 3

Integració a Google Sites

S’ha incrustat mitjançant un iframe en una pàgina de Google Sites.

2. El fitxer widget.html (codi sencer)

widget.html — XatBot 2026 (complet)
50 FAQs incrustades • 100% autònom
<!DOCTYPE html>
<html lang="ca">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>XatBot2026 – LAN Party</title>
  <link href="https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Orbitron:wght@700;900&display=swap" rel="stylesheet" />
  <style>
    :root {
      --bg:#090b10;--surface:#0d1117;--border:#1f2d3d;--accent:#00ffe1;--accent2:#ff3cac;
      --accent3:#ffe600;--text:#c9d8e8;--text-dim:#5a7a8a;--bot-bg:#0f1e2a;--user-bg:#0a1f1a;
      --font-mono:"Share Tech Mono",monospace;--font-head:"Orbitron",monospace;
      --glow:0 0 8px var(--accent),0 0 20px rgba(0,255,225,0.3);
      --glow2:0 0 8px var(--accent2),0 0 20px rgba(255,60,172,0.3);
    }
    *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
    body{background:var(--bg);font-family:var(--font-mono);color:var(--text);height:100vh;display:flex;align-items:center;justify-content:center;overflow:hidden}
    body::before{content:"";position:fixed;inset:0;background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,0.08) 2px,rgba(0,0,0,0.08) 4px);pointer-events:none;z-index:999}
    
    .chat-window{width:min(480px,100vw);height:min(640px,100vh);display:flex;flex-direction:column;border:1px solid var(--accent);box-shadow:var(--glow),inset 0 0 40px rgba(0,255,225,0.03);background:var(--surface);position:relative;animation:fadeIn .6s ease}
    @keyframes fadeIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
    .chat-window::before,.chat-window::after{content:"";position:absolute;width:14px;height:14px;border-color:var(--accent2);border-style:solid}
    .chat-window::before{top:-1px;left:-1px;border-width:2px 0 0 2px}
    .chat-window::after{bottom:-1px;right:-1px;border-width:0 2px 2px 0}
    
    .chat-header{padding:14px 20px;background:#0a0e14;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:12px;flex-shrink:0}
    .bot-avatar{width:38px;height:38px;border:1.5px solid var(--accent);border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:18px;box-shadow:var(--glow);flex-shrink:0;background:#050810}
    .header-info{flex:1}
    .bot-name{font-family:var(--font-head);font-size:13px;font-weight:900;color:var(--accent);text-shadow:var(--glow);letter-spacing:2px}
    .bot-status{font-size:10px;color:var(--text-dim);letter-spacing:1px;margin-top:2px}
    .bot-status::before{content:"▶ ";color:#00ff88;animation:blink 1.5s step-end infinite}
    @keyframes blink{0%,100%{opacity:1}50%{opacity:0}}
    .header-badge{font-size:9px;font-family:var(--font-head);color:var(--accent2);border:1px solid var(--accent2);padding:3px 6px;letter-spacing:1px;text-shadow:var(--glow2)}
    
    .chat-messages{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:12px;scroll-behavior:smooth}
    .chat-messages::-webkit-scrollbar{width:4px}
    .chat-messages::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}
    
    .msg{max-width:88%;padding:10px 14px;font-size:13px;line-height:1.6;border-radius:2px}
    .msg.bot{background:var(--bot-bg);border-left:2px solid var(--accent);color:var(--text);align-self:flex-start;animation:msgIn .25s ease}
    .msg.user{background:var(--user-bg);border-right:2px solid var(--accent2);color:var(--accent);align-self:flex-end;text-align:right;animation:msgInR .25s ease}
    @keyframes msgIn{from{opacity:0;transform:translateX(-6px)}to{opacity:1;transform:translateX(0)}}
    @keyframes msgInR{from{opacity:0;transform:translateX(6px)}to{opacity:1;transform:translateX(0)}}
    
    .msg-label{font-size:9px;letter-spacing:2px;color:var(--text-dim);margin-bottom:4px;font-family:var(--font-head)}
    .msg.user .msg-label{color:rgba(255,60,172,0.6)}
    
    .typing-indicator{display:none;align-self:flex-start;background:var(--bot-bg);border-left:2px solid var(--accent);padding:12px 16px;gap:5px;align-items:center}
    .typing-indicator.visible{display:flex}
    .dot{width:6px;height:6px;background:var(--accent);border-radius:50%;box-shadow:0 0 6px var(--accent);animation:td 1.2s infinite}
    .dot:nth-child(2){animation-delay:.2s}.dot:nth-child(3){animation-delay:.4s}
    @keyframes td{0%,100%{opacity:.3;transform:scale(.8)}50%{opacity:1;transform:scale(1.2)}}
    
    .quick-replies{padding:8px 16px;display:flex;flex-wrap:wrap;gap:6px;border-top:1px solid var(--border);background:#090b10}
    .quick-replies p{width:100%;font-size:9px;color:var(--text-dim);letter-spacing:1px;margin-bottom:2px}
    .chip{font-family:var(--font-mono);font-size:10px;color:var(--accent);border:1px solid rgba(0,255,225,0.3);background:rgba(0,255,225,0.05);padding:4px 10px;cursor:pointer;transition:all .15s;white-space:nowrap}
    .chip:hover{background:rgba(0,255,225,0.12);border-color:var(--accent);box-shadow:0 0 8px rgba(0,255,225,0.2)}
    
    .chat-input-area{display:flex;align-items:center;border-top:1px solid var(--border);background:#0a0e14;flex-shrink:0}
    .prompt-symbol{padding:0 10px;color:var(--accent);font-size:14px;user-select:none;text-shadow:var(--glow)}
    #userInput{flex:1;background:transparent;border:none;outline:none;color:var(--text);font-family:var(--font-mono);font-size:13px;padding:14px 0;caret-color:var(--accent)}
    #userInput::placeholder{color:var(--text-dim)}
    #sendBtn{background:none;border:none;cursor:pointer;padding:0 16px;font-family:var(--font-head);font-size:10px;color:var(--accent2);letter-spacing:1px;border-left:1px solid var(--border);height:100%;transition:all .15s}
    #sendBtn:hover{background:rgba(255,60,172,0.1);text-shadow:var(--glow2)}
    #sendBtn:disabled{opacity:.4;cursor:not-allowed}
    
    .chat-footer{text-align:center;font-size:9px;color:var(--text-dim);padding:6px;background:#090b10;border-top:1px solid var(--border);letter-spacing:1px}

    /* Imatge personal al final del chatbot */
    .chat-image {
      width: 100%;
      max-height: 160px;
      object-fit: cover;
      border-top: 1px solid var(--border);
      display: block;
    }
  </style>
</head>
<body>
<div class="chat-window">
  <div class="chat-header">
    <div class="bot-avatar">🤖</div>
    <div class="header-info">
      <div class="bot-name">XATBOT2026</div>
      <div class="bot-status">EN LÍNIA · FAQ LAN PARTY</div>
    </div>
    <div class="header-badge">2026</div>
  </div>
  
  <div class="chat-messages" id="chatMessages">
    <div class="msg bot">
      <div class="msg-label">XATBOT2026</div>
      Hola! Soc el XatBot de la LAN Party 2026. 🎮<br>
      Puc respondre les teves preguntes sobre l'esdeveniment. En què et puc ajudar?
    </div>
  </div>
  
  <div class="typing-indicator" id="typingIndicator">
    <div class="dot"></div><div class="dot"></div><div class="dot"></div>
  </div>
  
  <div class="quick-replies">
    <p>PREGUNTES RÀPIDES:</p>
    <button class="chip" onclick="sendQuick('Quin és l\'horari d\'accés?')">⏰ Horari</button>
    <button class="chip" onclick="sendQuick('Quina documentació necessito?')">🪪 Documentació</button>
    <button class="chip" onclick="sendQuick('Hi ha aparcament?')">🚗 Aparcament</button>
    <button class="chip" onclick="sendQuick('Quants endolls tinc?')">🔌 Endolls</button>
  </div>
  
  <div class="chat-input-area">
    <span class="prompt-symbol">›_</span>
    <input id="userInput" type="text" placeholder="Escriu la teva pregunta..." autocomplete="off" maxlength="200" />
    <button id="sendBtn" onclick="sendMessage()">ENVIAR</button>
  </div>

  <!-- IMATGE PERSONAL DEL WORDPRESS / GOOGLE SITES -->
  <img src="https://sites.google.com/view/teu-site/imatges/la-teva-imatge-lan-party.jpg" 
       alt="LAN Party 2026" 
       class="chat-image">

  <div class="chat-footer">◈ LAN PARTY 2026 · SUPORT AUTOMATITZAT EN CATALÀ ◈</div>
</div>

<script>
  // Aquí va el teu script complet amb les 50 FAQs
</script>
</body>
</html>

3. Com incrustar el XatBot a Google Sites

Mètode recomanat:

  1. 1.
    Puja el fitxer widget.html a un host públic (GitHub Pages, Vercel, etc.).
  2. 2.
    Obtén la URL pública del fitxer.
  3. 3.

    A Google Sites:

    <iframe
  src="https://teu-nom.github.io/widget.html"
  width="100%"
  height="720"
  frameborder="0"
  scrolling="no"
  style="border-radius:20px; box-shadow:0 25px 50px -12px rgb(0 0 0 / 0.15);">
</iframe>

✅ Avantatges:

  • ✔️ Totalment autònom
  • ✔️ Respostes instantànies
  • ✔️ Imatge personal al final
  • ✔️ Compatible amb Google Sites

4. Resultat final del XatBot

Vista prèvia del chatbot incrustat
LAN Party 2026
Resultat final del XatBot 2026
Captura del XatBot funcionant a Google Sites amb la imatge personal al final del xat.