Texto para arquivo

1492 alqsdeus

Abrir no Editor Publique Seu Código

Recomendado

16 September 2025

Formulário HTML para transferência de moedas com seleção de pagamento

7 November 2024

Efeito de animação de texto flutuante

18 November 2025

Um código do texto

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Text File</title>
  <link href="https://fonts.googleapis.com/css2?family=Fredoka+One&display=swap" rel="stylesheet">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" rel="stylesheet">
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Fredoka One', sans-serif;
    }

body {
      background: #0d0d0d;
      color: white;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 40px;
    }

.header {
      font-size: 32px;
      margin-bottom: 24px;
      color: #00ffb3;
      text-shadow: 0 0 5px #00ffb3aa;
    }

.container {
      background-color: rgba(0, 0, 0, 0.65);
      padding: 24px;
      border-radius: 20px;
      border: 1px solid rgba(0, 255, 128, 0.2);
      backdrop-filter: blur(12px);
      width: 600px;
      box-shadow: 0 0 18px rgba(0, 255, 128, 0.1);
    }

.input-text {
      width: 100%;
      height: 150px;
      background-color: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(0, 255, 128, 0.3);
      color: #e0ffe6;
      border-radius: 12px;
      padding: 12px;
      margin-bottom: 20px;
      resize: none;
    }

.char-count {
      font-size: 12px;
      text-align: right;
      color: #b5bac1;
      margin-top: -16px;
      margin-bottom: 20px;
    }

.dropdown {
      position: relative;
      width: 100%;
      margin-bottom: 20px;
    }

.dropdown-btn {
      background-color: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(0, 255, 128, 0.3);
      color: #e0ffe6;
      padding: 12px;
      width: 100%;
      border-radius: 12px;
      text-align: left;
      cursor: pointer;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

.dropdown-btn i {
      color: #00ff80;
    }

.dropdown-content {
      display: none;
      position: absolute;
      bottom: 60px;
      background-color: #1a1a1a;
      border: 1px solid rgba(0, 255, 128, 0.2);
      width: 100%;
      border-radius: 12px;
      max-height: 200px;
      overflow-y: auto;
      z-index: 2;
      box-shadow: 0 0 8px rgba(0, 255, 128, 0.2);
    }

.dropdown-content div {
      padding: 10px;
      cursor: pointer;
      color: #e0ffe6;
      transition: 0.2s;
    }

.dropdown-content div:hover {
      background-color: rgba(0, 255, 128, 0.1);
    }

.download-button {
      background-color: rgba(0, 255, 128, 0.25);
      color: white;
      padding: 12px;
      border: none;
      border-radius: 12px;
      cursor: pointer;
      font-size: 16px;
      width: 100%;
      transition: 0.3s ease;
    }

.download-button:hover {
      background-color: rgba(0, 255, 128, 0.4);
    }
  </style>
</head>
<body>
  <div class="header"><i class="fas fa-file-alt"></i> Text File Generator</div>

<button class="download-button" onclick="dlfile()"><i class="fas fa-download"></i> Download Text File</button>
  </div>

function showform() {
      const box = document.getElementById('formopts');
      box.style.display = box.style.display === 'block' ? 'none' : 'block';
    }

function setform(ext) {
      fileform = ext;
      document.getElementById('selform').innerHTML = `.${ext} <i class="fas fa-chevron-down"></i>`;
      document.getElementById('formopts').style.display = 'none';
    }

function upchrcnt() {
      const box = document.querySelector('.input-text');
      const cnt = document.getElementById('chrcnt');
      cnt.textContent = `${box.value.length} / 6000`;
    }

function dlfile() {
      const txt = document.querySelector('.input-text').value;

if (!txt) {
        alert("Please enter some text before downloading!");
        return;
      }

const blob = new Blob([txt], { type: 'text/plain' });
      const url = URL.createObjectURL(blob);
      const link = document.createElement('a');
      link.href = url;
      link.download = `file.${fileform}`;
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
      URL.revokeObjectURL(url);
    }

window.onclick = function (e) {
      if (!e.target.closest('.dropdown')) {
        document.getElementById('formopts').style.display = 'none';
      }
    }
  </script>
</body>
</html>

Texto para arquivo

Recomendado

Formulário HTML para transferência de moedas com seleção de pagamento

Efeito de animação de texto flutuante

Um código do texto

HTML

CSS

JS

Recomendado

Formulário HTML para transferência de moedas com seleção de pagamento

Efeito de animação de texto flutuante

Um código do texto

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS