zip file generator

To use this code, save it in an HTML file and open it in a web browser. It will display a zip file generator with fields for entering the filename and file content. When you click the "Generate Zip File" button, it will create a zip file with the specified filename and the content provided in the textarea. The zip file will be downloaded automatically.

Please note that this example generates uncompressed zip files using the jszip library. If you require compression functionality, you would need to implement it on the server-side using a programming language like Python or PHP.

<!DOCTYPE html>

<html>

<head>

  <title>Zip File Generator</title>

  <style>

    body {

      font-family: Arial, sans-serif;

      background-color: #f3f3f3;

    }

    .container {

      max-width: 600px;

      margin: 0 auto;

      padding: 20px;

      background-color: #fff;

      box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);

      border-radius: 5px;

    }

    h1 {

      color: #333;

      text-align: center;

    }

    .prompt {

      margin-bottom: 10px;

    }

    .prompt label {

      display: block;

      font-weight: bold;

      margin-bottom: 5px;

    }

    .prompt input[type="text"] {

      width: 100%;

      padding: 5px;

      border: 1px solid #ccc;

      border-radius: 3px;

    }

    .button {

      display: block;

      width: 100%;

      padding: 10px;

      background-color: #4CAF50;

      color: #fff;

      text-align: center;

      text-decoration: none;

      border-radius: 3px;

      cursor: pointer;

    }

    .button:hover {

      background-color: #45a049;

    }

  </style>

</head>

<body>

  <div class="container">

    <h1>Zip File Generator</h1>

    <div class="prompt">

      <label for="filename">Filename:</label>

      <input type="text" id="filename" placeholder="Enter the filename">

    </div>

    <div class="prompt">

      <label for="fileContent">File Content:</label>

      <textarea id="fileContent" placeholder="Enter the file content"></textarea>

    </div>

    <button class="button" onclick="generateZipFile()">Generate Zip File</button>

  </div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.6.0/jszip.min.js"></script>

  <script>

    function generateZipFile() {

      var filename = document.getElementById('filename').value;

      var fileContent = document.getElementById('fileContent').value;

      var zip = new JSZip();

      zip.file(filename, fileContent);

      zip.generateAsync({ type: "blob" })

        .then(function (content) {

          // Save the zip file

          var link = document.createElement('a');

          link.href = URL.createObjectURL(content);

          link.download = filename + ".zip";

          link.click();

        });

    }

  </script>

</body>

</html>