Text in Datei

Im Editor öffnen Veröffentlichen Sie Ihren Code

Empfohlen

26 May 2025

Eine Webseitenvorlage für „Anes Development“ mit einer Begrüßungsnachricht und Navigation.

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>

Text in Datei

Empfohlen

Ein Code von mironovbogdan341

Einfache Taschenrechner

Eine Webseitenvorlage für „Anes Development“ mit einer Begrüßungsnachricht und Navigation.

HTML

CSS

JS

Empfohlen

Ein Code von mironovbogdan341

Einfache Taschenrechner

Eine Webseitenvorlage für „Anes Development“ mit einer Begrüßungsnachricht und Navigation.

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS