QUÈ HEM FET

Hem millorat la web de la LAN Party perquè es vegi millor i funcioni millor. Aquests són els canvis principals:

Coses noves que hem afegit:

Un compte enrere que mostra els dies, hores i minuts que falten per a la LAN Party. S’actualitza sol cada segon.

Un mapa de la sala fet amb codi, on es veu on és la zona de PC, les consoles, el bar i el WC.

Una secció de preguntes freqüents on pots clicar cada pregunta per veure la resposta. Les altres es tanquen soles.

Un Xatbot amb intel·ligència artificial on pots preguntar qualsevol cosa de l’event i et respon en català.

Un menú que sempre es veu a dalt de la pàgina encara que baixes amb el ratolí.

PER QUÈ HO HEM FET AIXÍ

El fons és fosc i els colors són neón perquè les LAN Parties es fan amb poca llum i un fons blanc faria mal als ulls.

Hem posat el compte enrere perquè quan la gent veu els segons passar té més ganes d’apuntar-se.

Hem posat el menú fix perquè la pàgina és llarga i sinó hauries de pujar fins a dalt cada vegada per canviar de secció.

Hem posat la FAQ perquè la gent sempre pregunta el mateix i així troben la resposta sols sense haver d’escriure al Xatbot.

# ==========================================
# 1. INSTAL·LACIÓ
# ==========================================
import subprocess
subprocess.run([“pip”, “install”, “-q”, “-U”, “google-genai”, “flask-cors”, “pyngrok”, “beautifulsoup4”, “requests”], check=False)
subprocess.run([“pip”, “install”, “requests==2.32.4”], check=False)

# ==========================================
# 2. NETEJA I DEPENDÈNCIES
# ==========================================
import os, time, json, threading
os.system(“pkill -f ngrok”)

from flask import Flask, request, jsonify
from flask_cors import CORS
from google import genai
from google.colab import userdata
from pyngrok import ngrok

# ==========================================
# 3. CÀRREGA DE CONTEXT
# ==========================================
def carregar_dades():
docs = [‘Lanparty.json’, ‘Faq.json’, ‘Normativa.json’, ‘dades_party.json’]
resum = “”
for d in docs:
if os.path.exists(d):
with open(d, ‘r’, encoding=’utf-8′) as f:
resum += f.read()[:500]
return resum

# ==========================================
# 4. CONFIGURACIÓ GEMINI
# ==========================================
API_KEY = userdata.get(“GOOGLE_API_KEY”)
client = genai.Client(api_key=API_KEY)

def init_xatbot():
return client.chats.create(
model=”gemini-2.5-flash”,
config=genai.types.GenerateContentConfig(
system_instruction=(
f”Ets Xatbot de la LAN Party Castellbisbal. “
f”Context: {carregar_dades()}. “
f”Estil gamer, català, breu i divertit.”
)
)
)

chat_session = init_xatbot()

# ==========================================
# 5. FLASK
# ==========================================
app = Flask(__name__)
CORS(app) # ← Permet que el teu HTML extern pugui connectar

@app.route(‘/chat’, methods=[‘POST’])
def handle_chat():
global chat_session
try:
user_msg = request.json.get(“message”, “”)
if not user_msg.strip():
return jsonify({“reply”: “Escriu alguna cosa! 👾”})
response = chat_session.send_message(user_msg)
return jsonify({“reply”: response.text.strip()})
except Exception as e:
print(f”Error: {e}”)
chat_session = init_xatbot()
return jsonify({“reply”: “S’ha reiniciat la connexió. Torna a provar! 🔌”})

# Ruta de comprovació — el frontend la usa per saber si el servidor està actiu
@app.route(‘/chat’, methods=[‘GET’])
def health_check():
return jsonify({“status”: “online”}), 200

# ==========================================
# 6. NGROK
# ==========================================
NGROK_TOKEN = userdata.get(“NGROK_TOKEN”)
ngrok.set_auth_token(NGROK_TOKEN)
ngrok.kill()
time.sleep(1)

public_url = ngrok.connect(5000).public_url

print(“=” * 55)
print(“✅ SERVIDOR ACTIU”)
print(f”🌐 URL: {public_url}”)
print(“=” * 55)
print(“📋 Copia aquesta línia al teu fitxer HTML:”)
print(f’ const NGROK_URL = “{public_url}”;’)
print(“=” * 55)
print(“⚠️ No tanquis aquesta cel·la de Colab!”)

# ==========================================
# 7. ARRANCAR FLASK EN SEGON PLA
# ==========================================
def run_flask():
app.run(port=5000, use_reloader=False, debug=False)

t = threading.Thread(target=run_flask, daemon=True)
t.start()

QUÈ HE APRÈS JO

El que més em va costar va ser el compte enrere, perquè al principi sortien números negatius. Ho vaig arreglar posant una condició que comprova si la data ja ha passat.

També em feia por fer el mapa, però vaig descobrir que SVG és molt semblant a HTML i no era tan difícil com semblava.

He après a canviar colors de tota una pàgina tocant un sol lloc del codi, a fer animacions sense JavaScript i a connectar una intel·ligència artificial a una web real.

Resultat

FireShot Capture 202 – Lan Party – Xaboot Lan Party – sites.google.comBaixa