textify rosso by @Sergio - Codewith.it

#main, .loader-cont { display: none; } JavaScript disabilitato.
Non puoi usare Codewith.it senza JavaScript.

Referenze

<a>Inserisce link e collegamenti ipertestuali
maxlengthDetermina il numero massimo di caratteri consentiti in un elemento input
acceptDefinisce e filtra il formato dei file per il tag <input type=file>
<h5>Titolo di intestazione di quinto livello
<h3>Titolo di intestazione di terzo livello
loopL'attributo loop è usato per la riproduzione continua dei contenuti video e audio

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

Form per il torneo misto disfo

Genera Tavola Pitagorica (PHP)

Inserimento immagini in un testo

Pagina sul lorem ipsum

JS Elementi del linguaggio es3

Prep. Esame pt.4

HTML

CSS

JS

terminal console

feedback

add_box Nuovo

cookie Informativa

Informativa privacy e cookies

Utilizziamo cookie o tecnologie per finalità tecniche e, con il tuo consenso, anche per altre finalità come specificato nella cookie policy. Il rifiuto del consenso può rendere non disponibili alcune funzioni. Leggi di più sull'informativa privacy

Clicca su “Accetta” per acconsentire.

<!DOCTYPE html>
<html lang="it">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>Textify - Mobile</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css">
 
  <script src="https://www.gstatic.com/firebasejs/10.14.1/firebase-app-compat.js"></script>
  <script src="https://www.gstatic.com/firebasejs/10.14.1/firebase-auth-compat.js"></script>
  <script src="https://www.gstatic.com/firebasejs/10.14.1/firebase-firestore-compat.js"></script>
  
  <style>
    body { font-family: system-ui, -apple-system, sans-serif; }
    .editor { 
      min-height: calc(100vh - 220px); 
      outline: none; 
      background: linear-gradient(145deg, #2a1a1a, #1a0f0f);
      color: #fee2e2;
    }
    .neon-glow { box-shadow: 0 0 20px rgb(239 68 68 / 60%); }
    .btn-gradient {
      background: linear-gradient(90deg, #ef4444, #f43f5e);
      transition: all 0.3s ease;
    }
  </style>
</head>
<body class="bg-gradient-to-br from-red-950 via-rose-950 to-orange-950 text-white">

<!-- Blocco Desktop -->
<div id="desktop-block" class="hidden fixed inset-0 bg-black/90 flex items-center justify-center z-50">
  <div class="text-center text-white px-6">
    <i class="fas fa-mobile-alt text-6xl mb-6 text-red-400"></i>
    <h1 class="text-4xl font-bold mb-3 bg-gradient-to-r from-red-300 to-rose-300 bg-clip-text text-transparent">Solo per Smartphone</h1>
    <a href="https://cybergit-svg.github.io/textify/" class="mt-8 inline-block bg-white text-black px-8 py-4 rounded-3xl font-bold">Vai alla versione Desktop →</a>
  </div>
</div>

<div class="flex flex-col h-screen">
  <!-- Header -->
  <div class="bg-gradient-to-r from-red-900 to-rose-900 border-b border-red-500/30 px-4 py-4 flex items-center justify-between shadow-xl">
    <div class="flex items-center gap-3">
      <div class="w-9 h-9 bg-gradient-to-br from-red-500 to-rose-500 rounded-2xl flex items-center justify-center text-2xl font-black">T</div>
      <h1 class="text-3xl font-black tracking-tighter bg-gradient-to-r from-white to-red-200 bg-clip-text text-transparent">TEXTIFY</h1>
    </div>
    <div class="flex items-center gap-4">
      <div id="user-header" class="hidden items-center gap-3">
        <div id="avatar-small" class="w-8 h-8 bg-gradient-to-br from-red-400 to-rose-400 rounded-2xl flex items-center justify-center font-bold ring-2 ring-white/30"></div>
        <span id="username-small" class="font-medium text-sm"></span>
      </div>
      <button onclick="logout()" class="text-red-300 hover:text-red-200 p-2">
        <i class="fas fa-sign-out-alt text-2xl"></i>
      </button>
    </div>
  </div>

  <!-- Schermata File -->
  <div id="files-screen" class="flex-1 overflow-auto">
    <div class="p-5">
      <button onclick="newDocument()" class="w-full btn-gradient text-white py-5 rounded-3xl flex items-center justify-center gap-3 text-xl font-bold neon-glow">
        <i class="fas fa-plus"></i> NUOVO DOCUMENTO
      </button>
    </div>
    <div class="px-6 py-3 text-xs font-bold tracking-widest text-red-300">I MIEI DOCUMENTI</div>
    <div id="documents-list" class="px-4"></div>
  </div>

  <!-- Schermata Editor -->
  <div id="editor-screen" class="flex-1 flex flex-col hidden relative">
    <!-- Header Editor -->
    <div class="bg-gradient-to-r from-zinc-900 to-red-900 border-b border-white/10 px-4 py-4 flex items-center gap-3">
      <button onclick="showFilesScreen()" class="text-red-300 p-2">
        <i class="fas fa-chevron-left text-3xl"></i>
      </button>
      <input type="text" id="doc-title" 
             class="flex-1 text-xl font-semibold outline-none bg-transparent placeholder-zinc-400"
             placeholder="Titolo documento">
    </div>
    
    <!-- Area di scrittura -->
    <div class="flex-1 p-5 overflow-auto">
      <div id="editor" contenteditable="true" class="editor text-lg leading-relaxed p-6 rounded-3xl"></div>
    </div>

    <!-- Toolbar inferiore -->
    <div class="bg-gradient-to-t from-zinc-900 to-zinc-800 border-t border-red-500/30 p-4 flex items-center justify-between">
      <div class="flex gap-6">
        <button onclick="formatText('bold')" class="w-12 h-12 flex items-center justify-center text-2xl text-red-300 active:scale-95 transition">
          <i class="fas fa-bold"></i>
        </button>
        <button onclick="formatText('italic')" class="w-12 h-12 flex items-center justify-center text-2xl text-rose-300 active:scale-95 transition">
          <i class="fas fa-italic"></i>
        </button>
        <button onclick="formatText('underline')" class="w-12 h-12 flex items-center justify-center text-2xl text-orange-300 active:scale-95 transition">
          <i class="fas fa-underline"></i>
        </button>
      </div>
      
      <!-- Tasto SALVA in basso a destra -->
      <button onclick="saveDocument()" 
              class="btn-gradient text-white px-8 py-3.5 rounded-2xl font-bold flex items-center gap-2 shadow-lg active:scale-95 transition">
        <i class="fas fa-save"></i>
        <span>SALVA</span>
      </button>
    </div>
  </div>
</div>

<!-- Auth Modal -->
<div id="auth-modal" class="fixed inset-0 bg-black/80 backdrop-blur-xl flex items-center justify-center hidden z-50">
  <div class="bg-zinc-900 rounded-3xl w-full max-w-sm mx-4 p-8 border border-red-500/30">
    <h2 id="modal-title" class="text-3xl font-bold mb-8 text-center bg-gradient-to-r from-red-300 to-rose-300 bg-clip-text text-transparent">Accedi</h2>
    <div id="login-form">
      <input type="email" id="login-email" placeholder="Email" class="w-full bg-zinc-800 border border-red-500/30 focus:border-red-400 rounded-2xl px-6 py-4 mb-4 text-white">
      <input type="password" id="login-password" placeholder="Password" class="w-full bg-zinc-800 border border-red-500/30 focus:border-red-400 rounded-2xl px-6 py-4 mb-8 text-white">
      <button onclick="login()" class="w-full btn-gradient py-4 rounded-2xl text-lg font-bold">ACCEDI</button>
      <p class="text-center mt-6 text-red-300">Non hai un account? <span onclick="switchToRegister()" class="text-rose-400 cursor-pointer">Registrati</span></p>
    </div>
    <div id="register-form" class="hidden">
      <input type="email" id="reg-email" placeholder="Email" class="w-full bg-zinc-800 border border-red-500/30 focus:border-red-400 rounded-2xl px-6 py-4 mb-4 text-white">
      <input type="password" id="reg-password" placeholder="Password (min 6)" class="w-full bg-zinc-800 border border-red-500/30 focus:border-red-400 rounded-2xl px-6 py-4 mb-8 text-white">
      <button onclick="register()" class="w-full btn-gradient py-4 rounded-2xl text-lg font-bold">CREA ACCOUNT</button>
      <p class="text-center mt-6 text-red-300">Hai già un account? <span onclick="switchToLogin()" class="text-rose-400 cursor-pointer">Accedi</span></p>
    </div>
  </div>
</div>

<script>
// ================== FIREBASE CONFIG ==================
const firebaseConfig = {
  apiKey: "AIzaSyCOdvjyrG1h3mKLtBE9cf2K6j9M_sw5wzU",
  authDomain: "textify-11b6b.firebaseapp.com",
  projectId: "textify-11b6b",
  storageBucket: "textify-11b6b.firebasestorage.app",
  messagingSenderId: "715682461511",
  appId: "1:715682461511:web:8ca4e5fd161d68882efe62"
};
firebase.initializeApp(firebaseConfig);
const auth = firebase.auth();
const db = firebase.firestore();
let currentUser = null;
let currentDocId = null;

function getDisplayName(email) {
  return email.split('@')[0];
}

function checkDevice() {
  if (window.innerWidth > 768) {
    document.getElementById('desktop-block').classList.remove('hidden');
  }
}

// ====================== AUTH ======================
function showAuthModal() {
  document.getElementById('auth-modal').classList.remove('hidden');
}
function switchToRegister() {
  document.getElementById('login-form').classList.add('hidden');
  document.getElementById('register-form').classList.remove('hidden');
}
function switchToLogin() {
  document.getElementById('login-form').classList.remove('hidden');
  document.getElementById('register-form').classList.add('hidden');
}
async function register() {
  const email = document.getElementById('reg-email').value;
  const password = document.getElementById('reg-password').value;
  try {
    const res = await auth.createUserWithEmailAndPassword(email, password);
    currentUser = res.user;
    initAfterLogin();
  } catch (e) { alert(e.message); }
}
async function login() {
  const email = document.getElementById('login-email').value;
  const password = document.getElementById('login-password').value;
  try {
    const res = await auth.signInWithEmailAndPassword(email, password);
    currentUser = res.user;
    initAfterLogin();
  } catch (e) { alert(e.message); }
}
function logout() {
  if (confirm("Vuoi davvero uscire?")) auth.signOut();
}
function initAfterLogin() {
  document.getElementById('auth-modal').classList.add('hidden');
  const name = getDisplayName(currentUser.email);
  document.getElementById('username-small').textContent = name;
  document.getElementById('avatar-small').textContent = name[0].toUpperCase();
  document.getElementById('user-header').classList.remove('hidden');
  showFilesScreen();
  loadUserDocuments();
}

// ====================== NAVIGAZIONE ======================
function showFilesScreen() {
  document.getElementById('files-screen').classList.remove('hidden');
  document.getElementById('editor-screen').classList.add('hidden');
}
function showEditorScreen() {
  document.getElementById('files-screen').classList.add('hidden');
  document.getElementById('editor-screen').classList.remove('hidden');
}

// ====================== DOCUMENTI ======================
async function newDocument() {
  currentDocId = 'doc_' + Date.now();
  document.getElementById('doc-title').value = 'Nuovo Documento';
  document.getElementById('editor').innerHTML = '<p>Inizia a scrivere qui...</p>';
  showEditorScreen();
  loadUserDocuments();
}
async function saveDocument() {
  if (!currentDocId) return;
  const title = document.getElementById('doc-title').value.trim() || 'Documento senza titolo';
  const content = document.getElementById('editor').innerHTML;
  try {
    await db.collection('documents').doc(currentDocId).set({
      userId: currentUser.uid,
      title: title,
      content: content,
      updatedAt: firebase.firestore.FieldValue.serverTimestamp()
    });
    alert("✅ Salvato!");
    loadUserDocuments();
  } catch (e) { alert("Errore salvataggio"); }
}
async function loadUserDocuments() {
  const list = document.getElementById('documents-list');
  list.innerHTML = '<p class="text-center py-10 text-red-300">Caricamento...</p>';
  try {
    const snapshot = await db.collection('documents').where('userId', '==', currentUser.uid).get();
    list.innerHTML = '';
    if (snapshot.empty) {
      list.innerHTML = `<p class="text-center py-16 text-red-300">Nessun documento salvato</p>`;
      return;
    }
    snapshot.forEach(doc => {
      const data = doc.data();
      const el = document.createElement('div');
      el.className = `px-5 py-5 mb-3 rounded-3xl flex justify-between items-center ${doc.id === currentDocId ? 'bg-white/10 border border-red-400' : 'bg-white/5 hover:bg-white/10'}`;
      el.innerHTML = `
        <div onclick="loadDocument('${doc.id}')" class="flex-1 cursor-pointer">
          <p class="font-medium text-lg">${data.title}</p>
        </div>
        <button onclick="deleteDocument('${doc.id}'); event.stopImmediatePropagation()" class="w-10 h-10 flex items-center justify-center text-red-400 hover:bg-red-900/30 rounded-2xl">
          <i class="fas fa-trash"></i>
        </button>
      `;
      list.appendChild(el);
    });
  } catch (e) {
    list.innerHTML = `<p class="text-red-400 text-center py-10">Errore di caricamento</p>`;
  }
}
async function loadDocument(id) {
  currentDocId = id;
  try {
    const docSnap = await db.collection('documents').doc(id).get();
    if (docSnap.exists) {
      const data = docSnap.data();
      document.getElementById('doc-title').value = data.title;
      document.getElementById('editor').innerHTML = data.content || '';
      showEditorScreen();
    }
  } catch (e) { alert("Errore caricamento"); }
}
async function deleteDocument(id) {
  if (!confirm("Vuoi eliminare questo documento?")) return;
  try {
    await db.collection('documents').doc(id).delete();
    if (currentDocId === id) showFilesScreen();
    loadUserDocuments();
  } catch (e) { alert("Errore eliminazione"); }
}
function formatText(cmd) {
  document.execCommand(cmd);
}

// ====================== AVVIO ======================
auth.onAuthStateChanged(user => {
  if (user) {
    currentUser = user;
    initAfterLogin();
  } else {
    showAuthModal();
  }
});
window.onload = checkDevice;
</script>
</body>
</html>