Texte vers fichier

Ouvrir dans l'éditeur Publiez votre code Precisa de um site?

Recommandé

21 November 2024

Entrée de téléchargement de fichier avec icône SVG

25 August 2024

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

Texte vers fichier

Recommandé

fichier gratuit

Entrée de téléchargement de fichier avec icône SVG

convertir du texte en voix

HTML

CSS

JS

Recommandé

fichier gratuit

Entrée de téléchargement de fichier avec icône SVG

convertir du texte en voix

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS