Echo — Chat

🪞 Echo

Don't have an account? Sign up

🪞

No clone selected

Create a clone of someone you need to talk to,
or pick one from the sidebar.

No accuracy yet

Their name ⭐⭐⭐ Relationship

Partner

Friend

Boss

Parent

Sibling

Colleague

Other

How long have you known them?

Less than 1 year

1–3 years

3+ years

My whole life

Their age range

Teens

20s

30s

40s

50s+

Add more details first for a more accurate clone

Paste real messages they've sent you ⭐⭐⭐ Communication style

Very formalVery casual

Short repliesLong replies

Never uses emojiEmoji in every message

Phrases they always use ⭐⭐

Describe them in 3–5 words ⭐⭐⭐ How do they react to bad news?

🤐

Goes quiet

💥

Gets emotional

🧊

Gets cold/distant

🧠

Stays calm, analytical

Their conflict style

🔥

Confrontational

🐢

Avoids conflict

🕊

Seeks compromise

💼

Goes passive-aggressive

Sensitive topics ⭐⭐

How do they treat you specifically? ⭐⭐⭐ How open are they with you?

Very guardedVery open

A typical reaction they've had to something you said ⭐⭐⭐ Who usually apologizes first?

I do

They do

Neither

It varies

What do they say when things get heated? ⭐⭐⭐ What makes them defensive? ⭐⭐⭐ What makes them happy or open up? ⭐⭐

<label class="field-label">Anything else? (optional)</label>
        <textarea class="form-input" id="anythingElse" rows="2" placeholder="Any other quirks, habits, or context about them..."/>

<div class="create-nav">
          <button class="create-btn-back" onclick="navStep(-1)">← Back</button>
          <button class="create-btn-next" onclick="createClone()" id="createBtn" style="background:linear-gradient(135deg,var(--accent),var(--purple2));">
            Create Clone ✦
          </button>
        </div>
      </div>

</div>
  </div>
</div>

<script type="module">
import { initializeApp } from "https://www.gstatic.com/firebasejs/10.12.0/firebase-app.js";
import { getFirestore, doc, getDoc, setDoc, updateDoc, addDoc, increment,
         collection, query, where, orderBy, getDocs, serverTimestamp }
  from "https://www.gstatic.com/firebasejs/10.12.0/firebase-firestore.js";
import { getAuth, onAuthStateChanged, GoogleAuthProvider, signInWithPopup,
         signInWithRedirect, getRedirectResult, signInAnonymously,
         createUserWithEmailAndPassword, signInWithEmailAndPassword,
         updateProfile, signOut }
  from "https://www.gstatic.com/firebasejs/10.12.0/firebase-auth.js";

const firebaseConfig = {
  apiKey: "AIzaSyCUtJFI0QCSX196EFQu--cBJFBDnkVZ4ag",
  authDomain: "echominimirror.firebaseapp.com",
  databaseURL: "https://echominimirror-default-rtdb.firebaseio.com",
  projectId: "echominimirror",
  storageBucket: "echominimirror.firebasestorage.app",
  messagingSenderId: "147540310532",
  appId: "1:147540310532:web:0e6ea45093f18cd40ad351"
};

const app = initializeApp(firebaseConfig);
const db = getFirestore(app);
const auth = getAuth(app);
const gProvider = new GoogleAuthProvider();

const BACKEND_URL = window.location.hostname === 'localhost'
  ? 'http://localhost:3000'
  : 'https://echo-render-c8ph.onrender.com';

// ── TELEGRAM DETECT ─────────────────────────────────────────────
const isTelegram = !!window.Telegram?.WebApp?.initData && window.Telegram?.WebApp?.platform !== 'unknown';
const tg = window.Telegram?.WebApp;

// ── LANGUAGE DETECT ─────────────────────────────────────────────
const lang = navigator.language?.startsWith('bn') ? 'bn' : 'en';

// ── STATE ───────────────────────────────────────────────────────
let currentUser = null;
let currentCloneId = null;
let currentCloneData = null;
let clones = [];
let messages = [];
let currentScenario = '';
let currentMood = 'neutral';
let isLoading = false;
let messageCount = 0;
let inactivityTimer = null;
let historyLoaded = false;
let improveBannerShown = false;
let isSignUp = false;
let createPhase = 1;
let currentStep = 0;
let baseAccuracy = 0;
let chipSelections = {};

// ── AUTH FLOW ───────────────────────────────────────────────────
if (isTelegram) {
  // Telegram: skip auth, sign in anonymously
  document.getElementById('authOverlay').style.display = 'none';
  try { tg.ready(); tg.expand(); } catch(e){}
  signInAnonymously(auth).catch(console.error);
} else {
  // Check redirect result from Google
  getRedirectResult(auth).then(result => {
    if (result?.user) handleUser(result.user);
  }).catch(console.error);
}

onAuthStateChanged(auth, user => {
  if (!user) {
    if (!isTelegram) document.getElementById('authOverlay').style.display = 'flex';
    return;
  }
  handleUser(user);
});

function handleUser(user) {
  currentUser = user;
  document.getElementById('authOverlay').style.display = 'none';

// Set user display
  const name = user.displayName
    || tg?.initDataUnsafe?.user?.first_name
    || user.email?.split('@')[0]
    || 'You';
  const photo = user.photoURL;
  document.getElementById('userName').textContent = name;
  const av = document.getElementById('userAvatar');
  if (photo) av.innerHTML = `<img src="${photo}" alt="avatar"/>`;
  else av.textContent = name[0].toUpperCase();

loadClones();

// Check onboarding (Telegram app pages handle their own)
  if (!isTelegram) {
    try {
      if (!localStorage.getItem('echo_onboarded')) {
        window.location.replace('onboarding.html');
      }
    } catch(e){}
  }
}

// ── GOOGLE SIGN-IN ───────────────────────────────────────────────
window.signInGoogle = async () => {
  try {
    // Try popup first, fall back to redirect
    await signInWithRedirect(auth, gProvider);
  } catch(e) {
    showAuthError('Google sign-in failed. Please try again.');
  }
};

// ── EMAIL SIGN-IN / SIGN-UP ──────────────────────────────────────
window.switchAuthMode = () => {
  isSignUp = !isSignUp;
  document.getElementById('nameFieldWrap').style.display = isSignUp ? 'block' : 'none';
  document.getElementById('confirmWrap').style.display = isSignUp ? 'block' : 'none';
  document.getElementById('emailSubmitBtn').textContent = isSignUp ? 'Create account' : 'Sign In';
  document.getElementById('authToggle').innerHTML = isSignUp
    ? 'Already have an account? <span onclick="switchAuthMode()">Sign in</span>'
    : 'Don\'t have an account? <span onclick="switchAuthMode()">Sign up</span>';
  hideAuthError();
};

window.submitEmail = async () => {
  const email = document.getElementById('authEmail').value.trim();
  const password = document.getElementById('authPassword').value;
  const name = document.getElementById('authName').value.trim();
  const confirm = document.getElementById('authConfirm').value;
  hideAuthError();

if (!email || !password) { showAuthError('Please fill in all fields.'); return; }

try {
    if (isSignUp) {
      if (password !== confirm) { showAuthError('Passwords do not match.'); return; }
      if (password.length < 6) { showAuthError('Password must be at least 6 characters.'); return; }
      const cred = await createUserWithEmailAndPassword(auth, email, password);
      if (name) await updateProfile(cred.user, { displayName: name });
    } else {
      await signInWithEmailAndPassword(auth, email, password);
    }
  } catch(err) {
    const msgs = {
      'auth/email-already-in-use': 'An account with this email already exists.',
      'auth/invalid-email': 'Please enter a valid email address.',
      'auth/wrong-password': 'Incorrect password.',
      'auth/user-not-found': 'No account found with this email.',
      'auth/too-many-requests': 'Too many attempts. Please try again later.'
    };
    showAuthError(msgs[err.code] || 'Sign in failed. Please try again.');
  }
};

function showAuthError(msg) {
  const el = document.getElementById('authError');
  el.textContent = msg;
  el.classList.add('show');
}
function hideAuthError() {
  document.getElementById('authError').classList.remove('show');
}

window.doLogout = async () => {
  if (!confirm('Sign out?')) return;
  await signOut(auth);
  window.location.reload();
};

// ── CLONES ───────────────────────────────────────────────────────
async function loadClones() {
  if (!currentUser) return;
  try {
    const q = query(collection(db,'clones'), where('userId','==',currentUser.uid));
    const snap = await getDocs(q);
    clones = [];
    snap.forEach(d => clones.push({ id: d.id, ...d.data() }));
    renderClonesList();

// Auto-load clone from URL param
    const urlClone = new URLSearchParams(location.search).get('clone');
    if (urlClone) {
      const found = clones.find(c => c.id === urlClone);
      if (found) selectClone(found.id);
    } else if (clones.length === 0) {
      showEmptyState();
    }
  } catch(e) { console.error(e); }
}

window.selectClone = async (id) => {
  if (id === currentCloneId) { closeSidebar(); return; }
  currentCloneId = id;
  currentCloneData = clones.find(c => c.id === id);
  if (!currentCloneData) return;

closeSidebar();

// Update active in sidebar
  document.querySelectorAll('.clone-item').forEach(el => el.classList.remove('active'));
  const ci = document.getElementById(`ci-${id}`);
  if (ci) ci.classList.add('active');

// Update topbar
  const acc = currentCloneData.accuracy || 0;
  document.getElementById('topbarAvatar').textContent = getEmoji(currentCloneData.relationship);
  document.getElementById('topbarAvatar').style.display = 'flex';
  document.getElementById('topbarName').textContent = currentCloneData.name;
  document.getElementById('topbarRel').textContent = currentCloneData.relationship || 'Clone';
  document.getElementById('topbarAcc').textContent = acc + '%';
  document.getElementById('topbarInfo').style.display = 'block';
  document.getElementById('topbarControls').style.display = 'flex';
  document.getElementById('scenarioRow').style.display = 'flex';
  document.getElementById('improveLink').href = `create-clone.html?clone=${id}&phase=2`;
  document.getElementById('inputArea').style.display = 'block';
  document.getElementById('doneBtn').style.display = 'none';

// Reset state
  messages = [];
  messageCount = 0;
  historyLoaded = false;
  improveBannerShown = false;
  currentScenario = '';
  document.querySelectorAll('.scenario-chip').forEach(c=>c.classList.remove('active'));
  document.getElementById('rephraseBar').classList.remove('visible');
  clearTimeout(inactivityTimer);

// Clear messages
  const msgEl = document.getElementById('messages');
  msgEl.innerHTML = '<div class="nudge-card"><div class="nudge-text">🪞 This is your rehearsal space. Say what you\'ve been meaning to say — they can\'t judge you here. Pick a scenario above to set context.</div></div>';
  document.getElementById('emptyState') && (document.getElementById('emptyState').remove?.());

// Load history
  await loadChatHistory();
  document.getElementById('msgInput').focus();
};

function showEmptyState() {
  document.getElementById('topbarInfo').style.display = 'none';
  document.getElementById('topbarControls').style.display = 'none';
  document.getElementById('scenarioRow').style.display = 'none';
  document.getElementById('inputArea').style.display = 'none';
}

// ── CHAT HISTORY ─────────────────────────────────────────────────
async function loadChatHistory() {
  if (!currentUser || !currentCloneId) return;
  try {
    const path = `chatSessions/${currentCloneId}_${currentUser.uid}/messages`;
    const q = query(collection(db, path), orderBy('timestamp','asc'));
    const snap = await getDocs(q);
    historyLoaded = true;
    if (snap.empty) return;

const container = document.getElementById('messages');
    const groups = {};
    snap.forEach(d => {
      const data = d.data();
      const date = data.sessionDate || 'Unknown';
      if (!groups[date]) groups[date] = [];
      groups[date].push(data);
    });

// ── MESSAGING ────────────────────────────────────────────────────
window.sendMessage = async () => {
  const input = document.getElementById('msgInput');
  const text = input.value.trim();
  if (!text || isLoading || !currentCloneData) return;

isLoading = true;
  document.getElementById('sendBtn').disabled = true;
  input.value = '';
  input.style.height = 'auto';
  document.getElementById('rephraseBar').classList.remove('visible');

appendBubble('user', text);
  messages.push({ role:'user', content:text });
  messageCount++;
  resetInactivity();
  showTyping();

try {
    const res = await fetch(`${BACKEND_URL}/api/chat`, {
      method:'POST',
      headers:{'Content-Type':'application/json'},
      body: JSON.stringify({
        systemPrompt: currentCloneData.systemPrompt,
        messages: messages.slice(-14),
        scenario: currentScenario,
        mood: currentMood
      })
    });
    const data = await res.json();
    hideTyping();
    const reply = data.reply || '...';
    const tag = data.reactionTag || '';
    messages.push({ role:'assistant', content:reply });
    appendBubble('clone', reply, tag);

// Save to Firestore
    await saveMsg('user', text);
    await saveMsg('assistant', reply);
    try { await updateDoc(doc(db,'clones',currentCloneId), { chatCount: increment(1) }); } catch(e){}

// Improve banner (once per session, after first reply)
    if (!improveBannerShown) {
      improveBannerShown = true;
      const acc = currentCloneData.accuracy || 0;
      const name = currentCloneData.name;
      const banner = document.createElement('div');
      banner.className = 'improve-banner';
      banner.innerHTML = `<div class="improve-banner-text">🪞 <strong>${name}'s clone</strong> is <strong>${acc}% accurate</strong>. Add more details to make it feel more like the real ${name}.</div>
        <div class="improve-banner-btn" onclick="window.location.href='create-clone.html?clone=${currentCloneId}&phase=2'">Improve clone →</div>`;
      document.getElementById('messages').appendChild(banner);
    }
    document.getElementById('messages').scrollTop = 9999;
  } catch(err) {
    hideTyping();
    appendBubble('clone', 'Something went wrong. Please try again.');
  }

isLoading = false;
  document.getElementById('sendBtn').disabled = false;
  input.focus();
};

async function saveMsg(role, content) {
  if (!currentUser || !historyLoaded) return;
  try {
    await addDoc(collection(db, `chatSessions/${currentCloneId}_${currentUser.uid}/messages`), {
      role, content,
      timestamp: serverTimestamp(),
      sessionDate: new Date().toISOString().slice(0,10)
    });
  } catch(e) {}
}

// ── UI HELPERS ───────────────────────────────────────────────────
function appendBubble(role, text, tag='') {
  const el = document.getElementById('messages');
  const g = document.createElement('div');
  g.className = `msg-group ${role}`;
  g.innerHTML = `<div class="bubble">${escHtml(text)}</div>${tag ? `<div class="reaction-tag">🔍 ${escHtml(tag)}</div>` : ''}`;
  el.appendChild(g);
  el.scrollTop = el.scrollHeight;
  if (role === 'user') document.getElementById('rephraseBar').classList.add('visible');
}
function appendDivider(text) {
  const el = document.getElementById('messages');
  const d = document.createElement('div');
  d.className = 'date-divider';
  d.textContent = text;
  el.appendChild(d);
}
function showTyping() {
  const el = document.getElementById('messages');
  const t = document.createElement('div');
  t.className = 'msg-group clone'; t.id = 'typingRow';
  t.innerHTML = '<div class="typing"><div class="typing-dot"></div><div class="typing-dot"></div><div class="typing-dot"></div></div>';
  el.appendChild(t);
  el.scrollTop = el.scrollHeight;
}
function hideTyping() { document.getElementById('typingRow')?.remove(); }

function escHtml(str) {
  return str.replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>').replace(/\n/g,'<br>');
}

function resetInactivity() {
  clearTimeout(inactivityTimer);
  if (messageCount >= 1) document.getElementById('doneBtn').style.display = 'block';
  inactivityTimer = setTimeout(() => {
    const el = document.getElementById('messages');
    const n = document.createElement('div');
    n.className = 'nudge-card';
    n.innerHTML = `<div class="nudge-text">Still rehearsing? Tap Done when you're ready.</div><div class="nudge-btn" onclick="endSession()">Done</div>`;
    el.appendChild(n);
    el.scrollTop = el.scrollHeight;
  }, 10 * 60 * 1000);
}

window.setScenario = (s, el) => {
  currentScenario = s;
  document.querySelectorAll('.scenario-chip').forEach(c=>c.classList.remove('active'));
  el.classList.add('active');
};

window.autoResize = (el) => {
  el.style.height = 'auto';
  el.style.height = Math.min(el.scrollHeight, 100) + 'px';
};

// ── MOOD ─────────────────────────────────────────────────────────
window.openMoodModal = () => document.getElementById('moodOverlay').classList.add('open');
window.closeMoodModal = () => document.getElementById('moodOverlay').classList.remove('open');
window.selectMood = (el) => {
  document.querySelectorAll('.mood-card').forEach(c=>c.classList.remove('selected'));
  el.classList.add('selected');
  currentMood = el.dataset.mood;
  document.getElementById('moodBtn').textContent = el.querySelector('.mood-emoji').textContent + ' Mood';
};

// ── SIDEBAR ───────────────────────────────────────────────────────
window.toggleSidebar = () => {
  document.getElementById('sidebar').classList.toggle('open');
  document.getElementById('sidebarOverlay').classList.toggle('open');
};
window.closeSidebar = () => {
  document.getElementById('sidebar').classList.remove('open');
  document.getElementById('sidebarOverlay').classList.remove('open');
};

// ── THEME ─────────────────────────────────────────────────────────
window.toggleTheme = () => {
  const light = document.documentElement.classList.toggle('light');
  document.getElementById('themeBtn').textContent = light ? '☀️' : '🌙';
  try { localStorage.setItem('echo_theme', light ? 'light' : 'dark'); } catch(e){}
};
try {
  if (localStorage.getItem('echo_theme')==='light')
    document.getElementById('themeBtn').textContent = '☀️';
} catch(e){}

// ── CREATE CLONE ─────────────────────────────────────────────────
window.openCreateModal = () => {
  createPhase = 1;
  currentStep = 0;
  baseAccuracy = 0;
  chipSelections = {};
  // Reset form
  ['cloneName','realMessages','catchphrases','personality','sensTopics',
   'treatYou','pastReaction','heatedWords','defensive','makesHappy','anythingElse'].forEach(id => {
    const el = document.getElementById(id);
    if (el) el.value = '';
  });
  document.querySelectorAll('.chip,.reaction-card,.mood-card').forEach(el=>el.classList.remove('selected'));
  updateAccuracy();
  showStep(0);
  document.getElementById('progressWrap').style.display = 'none';
  document.getElementById('createModalTitle').textContent = 'New Clone';
  document.getElementById('phase2Link').style.display = 'block';
  document.getElementById('createOverlay').classList.add('open');
};
window.closeCreateModal = () => document.getElementById('createOverlay').classList.remove('open');

window.goPhase2 = () => {
  createPhase = 2;
  document.getElementById('progressWrap').style.display = 'block';
  document.getElementById('phase2Link').style.display = 'none';
  document.getElementById('createModalTitle').textContent = 'Build their clone';
  navStep(0, 1);
};

window.navStep = (dir, forceTo) => {
  const newStep = forceTo !== undefined ? forceTo : currentStep + dir;
  const maxStep = createPhase === 2 ? 4 : 0;
  if (newStep < (createPhase === 2 ? 1 : 0) || newStep > maxStep) return;
  showStep(newStep);
};

window.selectChip = (el, group) => {
  el.closest('.chips').querySelectorAll('.chip').forEach(c=>c.classList.remove('selected'));
  el.classList.add('selected');
  chipSelections[group] = el.textContent.trim();
  updateAccuracy();
};
window.selectCard = (el, group) => {
  el.closest('.reaction-grid').querySelectorAll('.reaction-card').forEach(c=>c.classList.remove('selected'));
  el.classList.add('selected');
  chipSelections[group] = el.textContent.trim();
  updateAccuracy();
};

window.updateSlider = (el) => {
  el.style.setProperty('--val', el.value + '%');
};
// Init sliders
document.querySelectorAll('input[type=range]').forEach(s => {
  s.style.setProperty('--val', s.value + '%');
});

window.startChat = async () => {
  const name = document.getElementById('cloneName').value.trim();
  const rel = chipSelections['rel'] || '';
  if (!name) { alert('Please enter their name first.'); return; }
  if (!currentUser) return;

const btn = document.getElementById('startChatBtn');
  btn.textContent = 'Creating...';
  btn.disabled = true;

try {
    // Generate basic system prompt via backend
    const res = await fetch(`${BACKEND_URL}/api/generate-clone`, {
      method: 'POST',
      headers: {'Content-Type':'application/json'},
      body: JSON.stringify({
        name, relationship: rel,
        duration: chipSelections['duration'] || '',
        age: chipSelections['age'] || '',
      })
    });
    const data = await res.json();

const cloneRef = doc(collection(db,'clones'));
    await setDoc(cloneRef, {
      userId: currentUser.uid,
      name, relationship: rel,
      duration: chipSelections['duration'] || '',
      ageRange: chipSelections['age'] || '',
      systemPrompt: data.systemPrompt || `You are roleplaying as ${name}, a ${rel} of the user.`,
      accuracy: 0,
      chatCount: 0,
      createdAt: serverTimestamp()
    });

closeCreateModal();
    await loadClones();
    selectClone(cloneRef.id);
  } catch(e) {
    console.error(e);
    alert('Failed to create clone. Please try again.');
    btn.textContent = `Meet ${name} →`;
    btn.disabled = false;
  }
};

window.createClone = async () => {
  const name = document.getElementById('cloneName').value.trim();
  const rel = chipSelections['rel'] || '';
  if (!name) { alert('Please enter their name.'); return; }
  if (!currentUser) return;

const btn = document.getElementById('createBtn');
  btn.textContent = 'Creating...';
  btn.disabled = true;

const payload = {
    name, relationship: rel,
    duration: chipSelections['duration']||'',
    ageRange: chipSelections['age']||'',
    realMessages: document.getElementById('realMessages')?.value||'',
    formalness: document.getElementById('formalSlider')?.value||50,
    replyLength: document.getElementById('lengthSlider')?.value||50,
    emojiUse: document.getElementById('emojiSlider')?.value||30,
    catchphrases: document.getElementById('catchphrases')?.value||'',
    personality: document.getElementById('personality')?.value||'',
    badNewsReaction: chipSelections['badNews']||'',
    conflictStyle: chipSelections['conflict']||'',
    sensitiveTopics: document.getElementById('sensTopics')?.value||'',
    treatYou: document.getElementById('treatYou')?.value||'',
    openness: document.getElementById('openSlider')?.value||50,
    pastReaction: document.getElementById('pastReaction')?.value||'',
    apologizes: chipSelections['apologize']||'',
    heatedWords: document.getElementById('heatedWords')?.value||'',
    defensive: document.getElementById('defensive')?.value||'',
    makesHappy: document.getElementById('makesHappy')?.value||'',
    anythingElse: document.getElementById('anythingElse')?.value||''
  };

// Calculate accuracy
  let acc = 0;
  if (payload.realMessages.length > 10) acc += 30;
  if (payload.personality.length > 2) acc += 15;
  if (payload.treatYou.length > 10) acc += 15;
  if (payload.pastReaction.length > 10) acc += 15;
  if (payload.heatedWords.length > 5) acc += 10;
  if (payload.defensive.length > 5) acc += 10;
  if (payload.badNewsReaction) acc += 8;
  if (payload.conflictStyle) acc += 7;
  if (payload.catchphrases) acc += 5;
  if (payload.name) acc += 5;
  acc = Math.min(acc, 95);

try {
    const res = await fetch(`${BACKEND_URL}/api/generate-clone`, {
      method:'POST', headers:{'Content-Type':'application/json'},
      body: JSON.stringify(payload)
    });
    const data = await res.json();

const cloneRef = doc(collection(db,'clones'));
    await setDoc(cloneRef, {
      userId: currentUser.uid,
      ...payload,
      systemPrompt: data.systemPrompt || `You are roleplaying as ${name}.`,
      accuracy: acc,
      chatCount: 0,
      createdAt: serverTimestamp()
    });

closeCreateModal();
    await loadClones();
    selectClone(cloneRef.id);
  } catch(e) {
    console.error(e);
    alert('Failed to create clone. Please try again.');
    btn.textContent = 'Create Clone ✦';
    btn.disabled = false;
  }
};

// ── HELPERS ───────────────────────────────────────────────────────
function getEmoji(rel) {
  const map = {partner:'💑',friend:'👫',bestfriend:'🤝',sibling:'👨‍👧',boss:'💼',colleague:'🤝',parent:'👨‍👩‍👧',other:'👤'};
  if (!rel) return '👤';
  const k = rel.toLowerCase().replace(/\s/g,'');
  for (const [key,val] of Object.entries(map)) { if(k.includes(key)) return val; }
  return '👤';
}
function accClass(acc) {
  return acc >= 80 ? 'acc-high' : acc >= 50 ? 'acc-mid' : 'acc-low';
}
</script>

</body>
</html>