textify rosso by @Sergio - Codewith.it

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

References

<title>Definisce il titolo della pagina web.
<object>Incorpora risorse varie nella pagina web.
<html>Tag primario di un documento HTML
maxlengthDetermina il numero massimo di caratteri consentiti in un elemento input
heightDetermina l'altezza di un elemento HTML in pixel
mutedL'attributo muted viene utilizzato impostare risorse HTML audio e video con volume muto

Users

Log in to search for users

Explore

Find inspiration

Tabella primo appello

Costruzione di tabella con html5

HTML

CSS

JS

terminal console

feedback

add_box New

cookie Policy

Privacy information and cookies

We use cookies or technologies for technical purposes and, with your consent, also for other purposes as specified in the cookie policy. Refusal of consent may make some functions unavailable. Read more about the privacy policy

Click on “Agree” to confirm.

<!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>