`;
thumbs.appendChild(box);
});
// click sulla X rossa per rimuovere quella singola immagine
thumbs.querySelectorAll(".ca-thumb-remove").forEach(btn => {
btn.addEventListener("click", () => {
const index = parseInt(btn.getAttribute("data-index"), 10);
if (!isNaN(index)){
selectedFiles.splice(index, 1);
renderThumbs();
}
});
});
updateEmptyState();
}
/* ---------- MENU + : APERTURA / CHIUSURA ---------- */
btnPlus.addEventListener("click", () => {
root.classList.toggle("is-menu-open");
});
// click su una voce del menu: setta la modalità + testo preimpostato
menuBtns.forEach(btn => {
btn.addEventListener("click", () => {
currentMode = btn.getAttribute("data-mode");
root.classList.remove("is-menu-open");
let template = "Ask AI... ";
if (currentMode === "text2image")
template = "Text to Image: Descrivi l'immagine.";
else if (currentMode === "text2video")
template = "Text to Video: Descrivi il video.";
else if (currentMode === "editimage")
template = "Edit Image: Dimmi come modificare.";
else if (currentMode === "multiimg2img")
template = "Multi Image: Descrivi l'immagine complessiva.";
else if (currentMode === "img2video")
template = "Image to Video: Descrivi la scena video.";
else if (currentMode === "lipsync")
template = "Lip-sync: Cosa vuoi che dica?";
else if (currentMode === "audio")
template = "Audio: Descrivi musica ed effetti sonori.";
else
template = "Ask AI";
templatePrefix = template;
textarea.value = templatePrefix;
textarea.placeholder = "";
autoResize();
// cursore subito dopo il testo preimpostato
textarea.focus();
const len = textarea.value.length;
textarea.setSelectionRange(len, len);
updateEmptyState();
});
});
/* ---------- IMPEDIRE LA CANCELLAZIONE DEL PREFISSO ---------- */
textarea.addEventListener("keydown", (e) => {
const prefixLen = templatePrefix.length;
if (!prefixLen) return;
const start = textarea.selectionStart;
const end = textarea.selectionEnd;
if ((e.key === "Backspace" && start {
const prefixLen = templatePrefix.length;
if (prefixLen && !textarea.value.startsWith(templatePrefix)){
const rest = textarea.value.slice(prefixLen);
textarea.value = templatePrefix + rest;
textarea.setSelectionRange(
Math.max(prefixLen, textarea.selectionStart),
Math.max(prefixLen, textarea.selectionEnd)
);
}
autoResize();
updateEmptyState();
});
// appena l'utente mette il focus, togliamo lo stile "hero"
textarea.addEventListener("focus", () => {
askInner.classList.remove("is-empty");
});
/* ---------- ALLEGA IMMAGINI ---------- */
btnAttach.addEventListener("click", () => {
fileInput.click();
});
fileInput.addEventListener("change", () => {
selectedFiles = Array.from(fileInput.files || []).slice(0, 6);
renderThumbs();
});
/* ---------- ASPECT RATIO: UI COMPATTA A PILL ---------- */
if (arToggle && arDropdown && arWrap && arCurrent){
// apertura/chiusura del pannellino
arToggle.addEventListener("click", (e) => {
e.stopPropagation();
arWrap.classList.toggle("is-open");
});
// selezione di una delle pilloline
arDropdown.querySelectorAll(".ca-ar-option").forEach(btn => {
btn.addEventListener("click", () => {
const val = btn.getAttribute("data-value");
if (!val) return;
currentAspect = val;
arCurrent.textContent = val;
// evidenzia quella scelta
arDropdown.querySelectorAll(".ca-ar-option")
.forEach(b => b.classList.remove("is-selected"));
btn.classList.add("is-selected");
arWrap.classList.remove("is-open");
});
});
// chiudi cliccando fuori
document.addEventListener("click", (e) => {
if (!arWrap.contains(e.target)){
arWrap.classList.remove("is-open");
}
});
}
/* ---------- CHAT POPUP: sposta la card dentro overlay ---------- */
if (historyCard && chatPanelBody){
// spostiamo la card nel popup (una sola volta)
historyCard.style.display = "block";
chatPanelBody.appendChild(historyCard);
}
function openChat(){
if (!chatOverlay) return;
chatOverlay.classList.add("is-open");
document.documentElement.style.overflow = "hidden";
document.body.style.overflow = "hidden";
}
function closeChat(){
if (!chatOverlay) return;
chatOverlay.classList.remove("is-open");
document.documentElement.style.overflow = "";
document.body.style.overflow = "";
}
if (chatToggle) chatToggle.addEventListener("click", (e) => {
e.stopPropagation();
openChat();
});
if (chatClose) chatClose.addEventListener("click", closeChat);
if (chatOverlay) chatOverlay.addEventListener("click", (e) => {
// chiudi cliccando sul backdrop
if (e.target === chatOverlay) closeChat();
});
document.addEventListener("keydown", (e) => {
if (e.key === "Escape") closeChat();
});
(function(){
const row1 = document.getElementById("row1");
const row2 = document.getElementById("row2");
const row3 = document.getElementById("row3");
const MEDIA_ROW1 = [
{ type:"vid", src:"https://cloud-1de12d.becdn.net/media/original/9e54374ce8688a031297c89c49911047.mp4" },
{ type:"img", src:"https://cloud-1de12d.becdn.net/media/original/c35f42d064f5ad6d55e6dfaae9e62751.jpg" },
{ type:"img", src:"https://cloud-1de12d.becdn.net/media/original/38bdaf0f7f585c8e3ea6f8affdf8f768.jpg" },
{ type:"vid", src:"https://cloud-1de12d.becdn.net/media/original/3a56b4b17d83a17003141cbeae4fad77.mp4" },
{ type:"img", src:"https://cloud-1de12d.becdn.net/media/original/57b7ef589b12abc285e5b94e6ccda359.jpg" },
{ type:"img", src:"https://cloud-1de12d.becdn.net/media/original/5ea0436dff36e40bc1ebc97c744caab5.jpg" },
{ type:"vid", src:"https://cloud-1de12d.becdn.net/media/original/ec86fb1db46f92aa85959de2f559be77.mp4" },
{ type:"img", src:"https://cloud-1de12d.becdn.net/media/original/f02a2b7ac17d065b20dd548c501eeb10.jpg" }
];
const MEDIA_ROW2 = [
{ type:"vid", src:"https://cloud-1de12d.becdn.net/media/original/06ed3a85c467544f68a4cf1e14062c2a.mp4" },
{ type:"img", src:"https://cloud-1de12d.becdn.net/media/original/2c1bf884a3718ce0d37328d0365f8df8.jpg" },
{ type:"img", src:"https://cloud-1de12d.becdn.net/media/original/f1f0a33f1955e48d1ffd3f355c935f18.jpg" },
{ type:"vid", src:"https://cloud-1de12d.becdn.net/media/original/09f12bd2877c15919191324d06723129.mp4" },
{ type:"img", src:"https://cloud-1de12d.becdn.net/media/original/0635c67a07d1f776c186aad840e3534a.jpg" },
{ type:"img", src:"https://cloud-1de12d.becdn.net/media/original/a652e8cdcd875a6938555c5b868dfcd1.jpg" },
{ type:"vid", src:"https://cloud-1de12d.becdn.net/media/original/d8bb845b8a5b49864d09eba95b864200.mp4" },
{ type:"img", src:"https://cloud-1de12d.becdn.net/media/original/34d96820493f72903b37395d26c1be89.jpg" }
];
const MEDIA_ROW3 = [
{ type:"vid", src:"https://cloud-1de12d.becdn.net/media/original/1a9c66d136b58ca1020486407f25f013.mp4" },
{ type:"img", src:"https://cloud-1de12d.becdn.net/media/original/f42b290d47803b5f728145a03ea036bc.jpg" },
{ type:"img", src:"https://cloud-1de12d.becdn.net/media/original/e65aabe2742cec79f0910ce11563b713.jpg" },
{ type:"vid", src:"https://cloud-1de12d.becdn.net/media/original/844c0852b48cc8bc0adefa88edeffb48.mp4" },
{ type:"img", src:"https://cloud-1de12d.becdn.net/media/original/ca8193125d75254b17700afb2fd5c353.jpg" },
{ type:"img", src:"https://cloud-1de12d.becdn.net/media/original/fd4a36c2bbac6317db3052ebc29ae1e1.jpg" },
{ type:"vid", src:"https://cloud-1de12d.becdn.net/media/original/d1542b6e4ddc7daad340ac875a2b8020.mp4" },
{ type:"img", src:"https://cloud-1de12d.becdn.net/media/original/fe4e859736256565a4e972e2e24f86ec.jpg" }
];
function makeTile(item){
const el = document.createElement("div");
el.className = "ca-tile";
if(item.type === "img"){
el.innerHTML = `
`;
} else {
el.innerHTML = `
`;
}
return el;
}
function fillRow(container, media){
const doubled = media.concat(media);
doubled.forEach(item => container.appendChild(makeTile(item)));
}
fillRow(row1, MEDIA_ROW1);
fillRow(row2, MEDIA_ROW2);
fillRow(row3, MEDIA_ROW3);
})();
/* Explore: per ora scrolla giù (poi puoi cambiare con link pagina /explore) */
if (exploreBtn){
exploreBtn.addEventListener("click", () => {
// se vuoi link pagina: window.location.href = "/explore";
window.scrollTo({ top: document.body.scrollHeight, behavior:"smooth" });
});
}
/* ---------- INVIO A N8N SOLO CON LA FRECCIA ---------- */
btnSend.addEventListener("click", async () => {
const text = textarea.value.trim();
if (!text && selectedFiles.length === 0){
alert("Scrivi qualcosa o allega almeno un'immagine.");
return;
}
const fd = new FormData();
fd.append("message", text); // include anche il prefisso
if (currentMode) fd.append("mode", currentMode);
if (currentAspect) fd.append("aspect_ratio", currentAspect);
selectedFiles.forEach((file, idx) => {
fd.append("images", file, file.name || ("image_"+idx+".jpg"));
});
try{
const res = await fetch(N8N_ENDPOINT, {
method: "POST",
body: fd
});
if (!res.ok) throw new Error("Bad response");
textarea.value = "";
textarea.placeholder = "Ask AI";
templatePrefix = "";
currentMode = null;
selectedFiles = [];
fileInput.value = "";
renderThumbs();
autoResize();
updateEmptyState();
alert("Messaggio inviato!");
}catch(err){
console.error(err);
alert("Errore durante l'invio, riprova.");
}
});
/* ---------- ENTER = SOLO A CAPO (NO INVIO) ---------- */
textarea.addEventListener("keydown", (ev) => {
// Enter va solo a capo
});
autoResize();
updateEmptyState();
})();
