Texte vers fichier

Ouvrir dans l'éditeur Publiez votre code

Recommandé

7 September 2024

Extrait HTML d'animation de texte 3D

8 February 2025

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

Univers géocentrique

Extrait HTML d'animation de texte 3D

Texte coulissant

HTML

CSS

JS

Recommandé

Univers géocentrique

Extrait HTML d'animation de texte 3D

Texte coulissant

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS