<!DOCTYPE html>

<head>

<title>Carify - Trova la tua auto con l AI</title>

<style>

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {

–bg: #ffffff;

–text: #1c1c1e;

–text-secondary: #6e6e73;

–accent: #3a7bd5;

–accent-hover: #2563d4;

–white: #f5f5f7;

–border: #e8e8ea;

–titanium: #f5f5f7;

}

html { scroll-behavior: smooth; }

body {

font-family: ‘DM Sans’, -apple-system, sans-serif;

background: var(–bg);

color: var(–text);

-webkit-font-smoothing: antialiased;

overflow-x: hidden;

}

nav {

position: fixed;

top: 0; left: 0; right: 0;

z-index: 1000;

background: rgba(255,255,255,0.92);

backdrop-filter: saturate(180%) blur(20px);

-webkit-backdrop-filter: saturate(180%) blur(20px);

border-bottom: 1px solid var(–border);

height: 52px;

display: flex;

align-items: center;

justify-content: center;

padding: 0 24px;

}

.nav-inner {

display: flex;

align-items: center;

justify-content: space-between;

width: 100%;

max-width: 1200px;

}

.nav-logo {

display: flex;

align-items: center;

text-decoration: none;

flex-shrink: 0;

padding: 0 16px;

}

.nav-links {

display: flex;

gap: 0;

list-style: none;

align-items: center;

}

.nav-item { position: relative; }

.nav-item > a {

font-size: 13px;

font-weight: 400;

color: var(–text);

text-decoration: none;

opacity: 0.8;

transition: opacity 0.2s;

padding: 16px 12px;

display: flex;

align-items: center;

white-space: nowrap;

}

.nav-item > a:hover { opacity: 1; }

.dropdown {

display: none;

position: absolute;

top: 52px;

left: 50%;

transform: translateX(-50%);

background: rgba(255,255,255,0.97);

backdrop-filter: blur(20px);

border: 1px solid var(–border);

border-radius: 14px;

padding: 20px;

min-width: 200px;

box-shadow: 0 20px 40px rgba(0,0,0,0.10);

z-index: 200;

}

.nav-item:hover .dropdown { display: block; }

.dropdown-title {

font-size: 10px;

font-weight: 500;

letter-spacing: 1px;

text-transform: uppercase;

color: var(–text-secondary);

margin-bottom: 10px;

padding: 0 4px;

}

.dropdown a {

display: block;

font-size: 14px;

font-weight: 400;

color: var(–text);

text-decoration: none;

padding: 8px 4px;

border-radius: 6px;

transition: all 0.15s;

}

.dropdown a:hover {

background: var(–titanium);

padding-left: 10px;

}

.hero {

min-height: 100vh;

display: flex;

flex-direction: column;

align-items: center;

justify-content: center;

text-align: center;

padding: 120px 24px 80px;

position: relative;

overflow: hidden;

}

.hero::before {

content: ‘’;

position: absolute;

top: -200px; left: 50%;

transform: translateX(-50%);

width: 800px; height: 800px;

background: radial-gradient(ellipse, rgba(58,123,213,0.08) 0%, transparent 70%);

pointer-events: none;

}

.hero-badge {

display: inline-flex;

align-items: center;

gap: 6px;

background: rgba(58,123,213,0.08);

border: 1px solid rgba(58,123,213,0.2);

color: var(–accent);

font-size: 12px;

font-weight: 500;

padding: 5px 14px;

border-radius: 100px;

margin-bottom: 32px;

animation: fadeUp 0.6s ease both;

}

.hero-title {

font-size: clamp(44px, 7vw, 80px);

font-weight: 600;

letter-spacing: -2px;

line-height: 1.05;

color: var(–text);

max-width: 820px;

margin-bottom: 24px;

animation: fadeUp 0.6s 0.1s ease both;

}

.gradient-text {

background: linear-gradient(135deg, #3a7bd5, #60a5fa);

-webkit-background-clip: text;

-webkit-text-fill-color: transparent;

background-clip: text;

}

.hero-subtitle {

font-size: clamp(17px, 2.5vw, 21px);

font-weight: 300;

color: var(–text-secondary);

max-width: 560px;

line-height: 1.6;

margin-bottom: 48px;

animation: fadeUp 0.6s 0.2s ease both;

}

.btn-primary {

display: inline-flex;

align-items: center;

gap: 8px;

background: var(–accent);

color: white;

padding: 14px 32px;

border-radius: 980px;

text-decoration: none;

font-weight: 500;

transition: all 0.2s ease;

animation: fadeUp 0.6s 0.3s ease both;

border: none;

font-family: inherit;

font-size: inherit;

cursor: pointer;

}

.btn-primary:hover {

background: var(–accent-hover);

transform: scale(1.02);

box-shadow: 0 8px 24px rgba(58,123,213,0.3);

}

.features { padding: 100px 24px; max-width: 1100px; margin: 0 auto; }

.section-label { text-align: center; font-size: 13px; font-weight: 500; color: var(–accent); margin-bottom: 16px; letter-spacing: 1px; text-transform: uppercase; }

.section-title { text-align: center; font-size: clamp(32px, 4vw, 48px); font-weight: 600; margin-bottom: 16px; letter-spacing: -1.5px; }

.features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

.feature-card {

background: var(–titanium);

border: 1px solid var(–border);

border-radius: 18px;

padding: 32px 28px;

transition: all 0.2s ease;

}

.feature-card:hover { transform: translateY(-4px); box-shadow: 0 20px 40px rgba(0,0,0,0.06); }

.feature-icon { width: 44px; height: 44px; background: rgba(58,123,213,0.08); border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 20px; font-size: 22px; }

.feature-title { font-size: 18px; font-weight: 600; margin-bottom: 10px; }

.feature-desc { font-size: 14px; font-weight: 300; color: var(–text-secondary); line-height: 1.65; }

.chat-section { padding: 100px 24px; background: var(–titanium); border-top: 1px solid var(–border); }

.chat-window { max-width: 720px; margin: 0 auto; background: white; border-radius: 20px; border: 1px solid var(–border); overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,0.08); }

.chat-header { background: var(–titanium); border-bottom: 1px solid var(–border); padding: 16px 20px; display: flex; align-items: center; gap: 10px; }

.chat-avatar { width: 32px; height: 32px; background: linear-gradient(135deg, var(–accent), #60a5fa); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-size: 14px; }

.chat-messages { padding: 24px 20px; height: 420px; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; }

.msg { max-width: 90%; padding: 12px 16px; border-radius: 16px; font-size: 14px; line-height: 1.6; }

.msg-ai { background: var(–titanium); align-self: flex-start; border-bottom-left-radius: 4px; }

.msg-user { background: var(–accent); color: white; align-self: flex-end; border-bottom-right-radius: 4px; }

.chat-input-area {

display: flex;

padding: 16px 20px;

gap: 10px;

background: white;

border-top: 1px solid var(–border);

}

.chat-input {

flex: 1;

padding: 12px 18px;

border-radius: 980px;

border: 1px solid var(–border);

outline: none;

font-family: inherit;

font-size: 14px;

}

.msg-ai .chat-card {

background: white;

border: 1px solid var(–border);

border-radius: 12px;

padding: 14px;

margin: 8px 0;

transition: all 0.2s;

}

.msg-ai .chat-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.06); }

.msg-ai .chat-card-title { font-size: 15px; font-weight: 600; color: var(–text); margin-bottom: 4px; }

.msg-ai .chat-card-price { font-size: 18px; font-weight: 600; color: #16a34a; margin-bottom: 6px; }

.msg-ai .chat-card-meta { font-size: 12px; color: var(–text-secondary); margin-bottom: 8px; }

.msg-ai .chat-card-note { font-size: 12px; color: var(–text-secondary); padding: 8px 10px; background: #fffbeb; border-left: 3px solid #f59e0b; border-radius: 0 6px 6px 0; line-height: 1.5; }

.msg-ai .chat-card-source { display: inline-block; font-size: 10px; font-weight: 600; color: var(–accent); background: rgba(58,123,213,0.08); padding: 2px 8px; border-radius: 4px; margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.5px; }

.msg-ai .chat-badge {

display: inline-block;

font-size: 11px;

font-weight: 600;

padding: 3px 10px;

border-radius: 50px;

margin: 4px 2px;

}

.msg-ai .badge-green { background: #dcfce7; color: #16a34a; }

.msg-ai .badge-yellow { background: #fef9c3; color: #a16207; }

.msg-ai .badge-red { background: #fee2e2; color: #dc2626; }

.msg-ai .badge-blue { background: rgba(58,123,213,0.08); color: var(–accent); }

.msg-ai table {

width: 100%;

border-collapse: collapse;

margin: 8px 0;

font-size: 12px;

}

.msg-ai table th {

background: var(–titanium);

padding: 8px 10px;

text-align: left;

font-weight: 600;

font-size: 11px;

color: var(–text-secondary);

text-transform: uppercase;

letter-spacing: 0.3px;

border-bottom: 1px solid var(–border);

}

.msg-ai table td {

padding: 8px 10px;

border-bottom: 1px solid var(–border);

color: var(–text);

}

.msg-ai table tr:last-child td { border-bottom: none; }

.profile-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }

.profile-chip {

background: white;

border: 1px solid var(–border);

padding: 8px 14px;

border-radius: 50px;

font-size: 13px;

cursor: pointer;

transition: all 0.15s;

font-family: inherit;

color: var(–text);

}

.profile-chip:hover { border-color: var(–accent); color: var(–accent); background: rgba(58,123,213,0.04); }

.stats { padding: 80px 24px; max-width: 900px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; text-align: center; }

.stat-number { font-size: 48px; font-weight: 600; color: var(–text); }

.stat-accent { color: var(–accent); }

footer { border-top: 1px solid var(–border); padding: 40px 24px; text-align: center; color: var(–text-secondary); font-size: 13px; }

@keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 768px) { .features-grid, .stats { grid-template-columns: 1fr; } .nav-links { display: none; } }

</style>

</head>

<body>

<nav>

<a href="#">Cerca Auto</a>

<div class="dropdown-title">Ricerca</div>

<a href="#">Cerca con AI</a><a href="#">Auto usate</a><a href="#">Confronta modelli</a>

</div>

</li>

<a href="#">Servizi</a>

<a href="#">Detailing</a><a href="#">Officine</a><a href="#">Prezzi carburante</a>

</div>

</li>

<a href="#">Mercato</a>

<div class="dropdown-title">Analisi</div>

<a href="#">Andamento prezzi</a><a href="#">Modelli più cercati</a>

</div>

</li>

</ul>

```

<defs>

</linearGradient>

</defs>

</svg>

<span style="font-size:9px;font-weight:600;letter-spacing:3px;color:#1c1c1e;text-transform:uppercase;">CARIFY</span>

</div>

</a>

<a href="#">Supporto</a>

<div class="dropdown"><a href="#">FAQ</a><a href="#">Contattaci</a></div>

</li>

</ul>

```

</div>

</nav>

<div class="hero-badge"><span>✦</span> Intelligenza artificiale per le auto</div>

<h1 class="hero-title">Trova la tua auto ideale<br>con <span class="gradient-text">l'intelligenza artificiale</span></h1>

<p class="hero-subtitle">Carify analizza migliaia di annunci per trovare l'auto giusta per te. Risparmia tempo, evita fregature, guida sereno.</p>

<button class="btn-primary" onclick="document.getElementById('cerca').scrollIntoView({behavior:'smooth'})">Inizia la ricerca</button>

</section>

<p class="section-label">Come funziona</p>

<h2 class="section-title">L'auto giusta è a un messaggio</h2>

<h3 class="feature-title">Ricerca intelligente</h3>

<p class="feature-desc">Scrivi in linguaggio naturale: "BMW Serie 3 diesel sotto i 20.000€". L'AI capisce e cerca per te.</p>

</div>

<h3 class="feature-title">Report affidabilità</h3>

<p class="feature-desc">Ogni auto viene analizzata per storico incidenti, problemi noti e coerenza del prezzo.</p>

</div>

<h3 class="feature-title">Costo reale</h3>

<p class="feature-desc">Calcoliamo assicurazione, carburante, bollo e manutenzione media annua.</p>

</div>

<h3 class="feature-title">Detailing</h3>

<p class="feature-desc">Trova i migliori centri di detailing e officine vicino a te.</p>

</div>

<h3 class="feature-title">Carburante</h3>

<p class="feature-desc">Confronta i prezzi della benzina e del gasolio in tempo reale.</p>

</div>

<h3 class="feature-title">Mercato</h3>

<p class="feature-desc">Migliaia di annunci aggiornati ogni giorno con notifiche istantanee.</p>

</div>

</section>

<div><strong>Carify AI</strong><br><small style="color:#34c759">● Online</small></div>

</div>

</div>

<button onclick="sendMessage()" style="background:var(--accent); border:none; color:white; padding:10px 20px; border-radius:20px; cursor:pointer; font-family:inherit;">Invia</button>

</div>

</section>

<div><div class="stat-number">50<span class="stat-accent">K+</span></div><p>Annunci analizzati</p></div>

<div><div class="stat-number">98<span class="stat-accent">%</span></div><p>Soddisfazione</p></div>

<div><div class="stat-number">3<span class="stat-accent">min</span></div><p>Tempo medio</p></div>

</div>

</footer>

var PROXY_URL = "https://carify-proxy.decicco-danilo.workers.dev/api/chat";

var MAX_HISTORY_TURNS = 14;

var SYSTEM_PROMPT = "Sei Carify AI, il consulente auto piu avanzato d'Italia. Sei preciso, diretto, professionale ma amichevole. Non fai mai risposte vaghe.\n\n"

+ "FASE 0: PROFILAZIONE UTENTE\n"

+ "Alla PRIMA interazione, se l'utente non ha gia specificato tutto, fai 2-3 domande mirate per capire:\n"

+ "- Budget (fascia di prezzo)\n"

+ "- Uso principale (citta, autostrada, famiglia, lavoro, neopatentato)\n"

+ "- Preferenze (carburante, cambio, marca, nuovo/usato)\n"

+ "- Zona (per stimare assicurazione e carburante)\n"

+ "NON fare tutte le domande insieme. Sii naturale, una o due alla volta.\n"

+ "Una volta che hai il profilo, ricordalo per tutta la conversazione.\n\n"

+ "MODALITA 1: BROKER USATO\n"

+ "Attivata quando l'utente cerca auto usate.\n"

+ "Per OGNI auto proposta, fornisci SEMPRE:\n"

+ "1. Nome modello, anno, km, prezzo\n"

+ "2. Motorizzazione e potenza\n"

+ "3. PROBLEMI NOTI del motore specifico con livello di gravita\n"

+ "4. Costo medio manutenzione annua stimato\n"

+ "5. Assicurazione stimata per profilo utente\n"

+ "6. VERDETTO con punteggio stelle\n\n"

+ "FORMATO OBBLIGATORIO per le proposte - usa ESATTAMENTE questi tag:\n"

+ "[CARD]\n"

+ "titolo: BMW 320d Touring 2019\n"

+ "prezzo: 22.500 euro\n"

+ "fonte: Autoscout24\n"

+ "km: 85.000 km - Diesel - Automatico\n"

+ "verdetto: 4 stelle su 5 - Buon rapporto qualita prezzo\n"

+ "nota: Motore B47 affidabile se tagliandato ogni 15k km.\n"

+ "[/CARD]\n\n"

+ "Proponi SEMPRE 3 annunci simulando fonti reali (Autoscout24, Subito.it, Automobile.it, Autohero).\n\n"

+ "Dopo le 3 card, aggiungi una TABELLA COMPARATIVA:\n"

+ "[TABLE]\n"

+ "Modello | Prezzo | Km | Costo annuo | Verdetto\n"

+ "BMW 320d | 22.500 | 85k | 1.800 | 4 stelle\n"

+ "Audi A4 2.0 TDI | 21.000 | 92k | 1.600 | 4 stelle\n"

+ "[/TABLE]\n\n"

+ "MODALITA 2: CONFIGURATORE NUOVO\n"

+ "Attivata quando l'utente vuole un'auto nuova.\n"

+ "Per OGNI modello suggerito fornisci modello, allestimento, prezzo listino, motorizzazione, optional essenziali e inutili, costo reale annuo.\n"

+ "Usa lo stesso formato [CARD] e [TABLE].\n\n"

+ "MODALITA 3: CONSULENZA\n"

+ "Per domande su manutenzione, assicurazione, bollo, carburante, mercato.\n"

+ "Rispondi con DATI CONCRETI e cifre.\n\n"

+ "REGOLE DI FORMATTAZIONE:\n"

+ "- Usa **grassetto** per i concetti chiave\n"

+ "- Usa [BADGE:green]testo[/BADGE] per positivi, [BADGE:yellow]testo[/BADGE] per attenzione, [BADGE:red]testo[/BADGE] per negativi\n"

+ "- Le risposte devono essere COMPLETE ma STRUTTURATE\n"

+ "- Non inventare MAI statistiche o prezzi\n"

+ "- Se hai bisogno di dati aggiornati, cerca sul web\n\n"

+ "REGOLE DI COMPORTAMENTO:\n"

+ "- Sii diretto e onesto. Se un'auto e una fregatura, dillo chiaramente.\n"

+ "- Se un difetto e gestibile, spiega come.\n"

+ "- Se un difetto e fatale, sconsiglia.\n"

+ "- Guida sempre l'utente verso la scelta migliore per il SUO profilo.\n"

+ "- Quando l'utente e indeciso, proponi tu.\n"

+ "- Non usare frasi fatte o generiche.";

var history = [];

function escapeHtml(str) {

var div = document.createElement('div');

div.textContent = str;

return div.innerHTML;

}

function showWelcome() {

var messages = document.getElementById('chatMessages');

var welcomeMsg = document.createElement('div');

welcomeMsg.className = 'msg msg-ai';

welcomeMsg.innerHTML = 'Ciao! Sono <strong>Carify AI</strong>, il tuo consulente auto personale.<br><br>Per trovarti l\'auto perfetta, dimmi: <strong>stai cercando un\'auto nuova o usata?</strong>'

+ '<div class="profile-chips">'

+ '<button class="profile-chip" onclick="quickReply(\'Cerco un auto usata\')">Usata</button>'

+ '<button class="profile-chip" onclick="quickReply(\'Voglio configurare un auto nuova\')">Nuova</button>'

+ '<button class="profile-chip" onclick="quickReply(\'Non sono sicuro, aiutami a capire\')">Non so ancora</button>'

+ '</div>';

messages.appendChild(welcomeMsg);

}

function quickReply(text) {

document.getElementById('chatInput').value = text;

sendMessage();

}

async function sendMessage() {

var input = document.getElementById('chatInput');

var messages = document.getElementById('chatMessages');

if (!input.value.trim()) return;

var text = input.value.trim();

var userMsg = document.createElement('div');

userMsg.className = 'msg msg-user';

userMsg.textContent = text;

messages.appendChild(userMsg);

messages.scrollTop = messages.scrollHeight;

input.value = '';

var loadingMsg = document.createElement('div');

loadingMsg.className = 'msg msg-ai';

loadingMsg.innerHTML = '<em>Sto analizzando...</em>';

loadingMsg.id = 'loadingMsg';

messages.appendChild(loadingMsg);

messages.scrollTop = messages.scrollHeight;

history.push({ role: "user", parts: [{ text: text }] });

if (history.length > MAX_HISTORY_TURNS * 2) {

history = history.slice(-MAX_HISTORY_TURNS * 2);

}

try {

var response = await fetch(PROXY_URL, {

method: "POST",

headers: { "Content-Type": "application/json" },

body: JSON.stringify({

systemPrompt: SYSTEM_PROMPT,

history: history

})

});

var loading = document.getElementById('loadingMsg');

if (loading) loading.remove();

if (!response.ok) {

var errData = {};

try { errData = await response.json(); } catch(e) {}

throw new Error(errData.error || "Errore " + response.status);

}

var data = await response.json();

if (!data.text) {

throw new Error("Risposta vuota dall'AI.");

}

history.push({ role: "model", parts: [{ text: data.text }] });

renderAIMessage(data.text);

} catch (e) {

var loading2 = document.getElementById('loadingMsg');

if (loading2) loading2.remove();

var errMsg = document.createElement('div');

errMsg.className = 'msg msg-ai';

errMsg.style.color = '#ef4444';

errMsg.textContent = e.message || 'Errore di connessione. Riprova tra poco.';

messages.appendChild(errMsg);

}

messages.scrollTop = messages.scrollHeight;

}

function renderAIMessage(text) {

var messages = document.getElementById('chatMessages');

var aiMsg = document.createElement('div');

aiMsg.className = 'msg msg-ai';

var html = text;

html = html.replace(/\[CARD\]([\s\S]*?)\[\/CARD\]/g, function(match, content) {

var fields = {};

var lines = content.trim().split('\n');

for (var i = 0; i < lines.length; i++) {

var colonIdx = lines[i].indexOf(':');

if (colonIdx > -1) {

var key = lines[i].substring(0, colonIdx).trim().toLowerCase();

var val = lines[i].substring(colonIdx + 1).trim();

fields[key] = val;

}

var cardHtml = '<div class="chat-card">';

if (fields.fonte) cardHtml += '<div class="chat-card-source">' + escapeHtml(fields.fonte) + '</div>';

cardHtml += '<div class="chat-card-title">' + escapeHtml(fields.titolo || 'Auto') + '</div>';

cardHtml += '<div class="chat-card-price">' + escapeHtml(fields.prezzo || '') + '</div>';

cardHtml += '<div class="chat-card-meta">' + escapeHtml(fields.km || '') + '</div>';

if (fields.verdetto) cardHtml += '<div style="margin:6px 0">' + renderBadgeFromVerdetto(fields.verdetto) + '</div>';

if (fields.nota) cardHtml += '<div class="chat-card-note">' + escapeHtml(fields.nota) + '</div>';

cardHtml += '</div>';

return cardHtml;

});

html = html.replace(/\[TABLE\]([\s\S]*?)\[\/TABLE\]/g, function(match, content) {

var rows = content.trim().split('\n');

var validRows = [];

for (var i = 0; i < rows.length; i++) {

if (rows[i].trim()) validRows.push(rows[i]);

}

if (validRows.length < 2) return escapeHtml(content);

var headers = validRows[0].split('|');

var tableHtml = '<table><thead><tr>';

for (var h = 0; h < headers.length; h++) {

tableHtml += '<th>' + escapeHtml(headers[h].trim()) + '</th>';

}

tableHtml += '</tr></thead><tbody>';

for (var r = 1; r < validRows.length; r++) {

var cells = validRows[r].split('|');

tableHtml += '<tr>';

for (var c = 0; c < cells.length; c++) {

tableHtml += '<td>' + escapeHtml(cells[c].trim()) + '</td>';

}

tableHtml += '</tr>';

}

tableHtml += '</tbody></table>';

return tableHtml;

});

html = html.replace(/\[BADGE:(green|yellow|red|blue)\](.*?)\[\/BADGE\]/g, function(match, color, badgeText) {

return '<span class="chat-badge badge-' + color + '">' + escapeHtml(badgeText) + '</span>';

});

var htmlElements = [];

html = html.replace(/(<div class="chat-card">[\s\S]*?<\/div>\s*<\/div>|<table>[\s\S]*?<\/table>|<span class="chat-badge[^"]*">.*?<\/span>)/g, function(match) {

htmlElements.push(match);

return '%%HTML_' + (htmlElements.length - 1) + '%%';

});

html = escapeHtml(html);

html = html.replace(/\n/g, '<br>');

html = html.replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>');

for (var i = 0; i < htmlElements.length; i++) {

html = html.replace('%%HTML_' + i + '%%', htmlElements[i]);

}

aiMsg.innerHTML = html;

messages.appendChild(aiMsg);

messages.scrollTop = messages.scrollHeight;

}

function renderBadgeFromVerdetto(verdetto) {

var color = 'blue';

if (verdetto.indexOf('5') > -1) color = 'green';

else if (verdetto.indexOf('4') > -1) color = 'green';

else if (verdetto.indexOf('3') > -1) color = 'yellow';

else if (verdetto.indexOf('2') > -1 || verdetto.indexOf('1') > -1) color = 'red';

return '<span class="chat-badge badge-' + color + '">' + escapeHtml(verdetto) + '</span>';

}

document.getElementById('chatInput').addEventListener('keypress', function(e) {

if (e.key === 'Enter') sendMessage();

});

showWelcome();

</script>

</body>

</html>