टेक्स्ट टू फाइल

संपादक में खोलें अपना कोड प्रकाशित करें क्या आपको एक वेबसाइट चाहिए?

अनुशंसित

30 March 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>

टेक्स्ट टू फाइल

अनुशंसित

टेक्स्ट स्क्रैम्बल प्रभाव

नियॉन टेक्स्ट इफेक्ट

स्लाइस टेक्स्ट प्रभाव

HTML

CSS

JS

अनुशंसित

टेक्स्ट स्क्रैम्बल प्रभाव

नियॉन टेक्स्ट इफेक्ट

स्लाइस टेक्स्ट प्रभाव

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS