Landing Builder

Kod po stronie przeglądarki

<style>
    .droppable {
      min-height: 400px;
      border: 2px dashed #ccc;
      padding: 20px;
      margin-top: 20px;      
    }
    .component {
      cursor: move;
      padding: 10px;
      border: 1px solid #ddd;
      margin-bottom: 10px;      
    }
    .selected {
      outline: 3px solid #0d6efd;
    }
    .style-panel input {
      width: 100%;
      margin-bottom: 10px;
    }
    [contenteditable]:focus {
      outline: 2px dashed #0d6efd;
      background: #e9f5ff;
      color: #212529 !important;  
    }
</style>

<h2 class="mb-4 d-flex align-items-center">Landing Builder
    <button class="btn btn-outline-primary ms-3" data-bs-toggle="modal" data-bs-target="#templateModal"><i class="bi bi-layout-text-window"></i> Wybierz szablon</button>
</h2>
<div class="row">
    <div class="col-md-3">
        <!-- Komponenty -->  
        <h4>Komponenty</h4>
        <!-- NAVBAR -->
        <div class="component" draggable="true" data-html='
            <nav class="navbar navbar-expand-lg navbar-light">
            <div class="container">
            <a class="navbar-brand" href="#" contenteditable="true"><i class="bi bi-bootstrap-fill me-1"></i> Landing Builder</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
            <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav ms-auto">
            <li class="nav-item"><a class="nav-link active" href="#" contenteditable="true">Strona główna</a></li>
            <li class="nav-item"><a class="nav-link" href="#" contenteditable="true">Funkcje</a></li>
            <li class="nav-item"><a class="nav-link" href="#" contenteditable="true">Kontakt</a></li>
            </ul>
            </div>
            </div>
            </nav>'><i class="bi bi-bootstrap-fill"></i> Nagłówek (Navbar)</div>
        <!-- HERO -->
        <div class="component" draggable="true" data-html='
            <section class="text-center py-5">
            <div class="container">
            <h1 contenteditable="true"><i class="bi bi-stars me-2"></i>Twórz stronę bez kodowania</h1>
            <p contenteditable="true">Zbuduj profesjonalny landing page w kilka minut</p>
            <a href="#" class="btn btn-primary btn-lg mt-3"><i class="bi bi-play-circle me-1"></i> Rozpocznij teraz</a>
            </div>
            </section>'><i class="bi bi-stars"></i> Hero sekcja</div>
        <!-- FUNKCJE 3 kolumny -->
        <div class="component" draggable="true" data-html='
            <section class="py-5">
            <div class="container">
            <div class="row text-center">
            <div class="col-md-4">
            <i class="bi bi-arrows-move display-4 text-primary"></i>
            <h4 contenteditable="true">Drag & Drop</h4>
            <p contenteditable="true">Układaj sekcje jak chcesz</p>
            </div>
            <div class="col-md-4">
            <i class="bi bi-palette display-4 text-primary"></i>
            <h4 contenteditable="true">Personalizacja</h4>
            <p contenteditable="true">Zmieniaj kolory i układ</p>
            </div>
            <div class="col-md-4">
            <i class="bi bi-file-earmark-code display-4 text-primary"></i>
            <h4 contenteditable="true">Eksport HTML</h4>
            <p contenteditable="true">Gotowy kod bez bałaganu</p>
            </div>
            </div>
            </div>
            </section>'><i class="bi bi-grid-3x3-gap"></i> Sekcja funkcji</div>
        <!-- OPINIE -->
        <div class="component" draggable="true" data-html='
            <section class="py-5">
            <div class="container">
            <h2 class="text-center mb-4" contenteditable="true"><i class="bi bi-chat-dots me-2"></i>Opinie klientów</h2>
            <div class="row">
            <div class="col-md-4">
            <blockquote class="blockquote">
            <p contenteditable="true">"Najprostszy edytor landing page jaki znam!"</p>
            <footer class="blockquote-footer">Anna, freelancerka</footer>
            </blockquote>
            </div>
            <div class="col-md-4">
            <blockquote class="blockquote">
            <p contenteditable="true">"Szybko, wygodnie, bez programisty!"</p>
            <footer class="blockquote-footer">Marek, startupowiec</footer>
            </blockquote>
            </div>
            <div class="col-md-4">
            <blockquote class="blockquote">
            <p contenteditable="true">"Kod HTML jest czysty i gotowy do użycia."</p>
            <footer class="blockquote-footer">Joanna, marketerka</footer>
            </blockquote>
            </div>
            </div>
            </div>
            </section>'><i class="bi bi-chat-dots"></i> Opinie klientów</div>
        <!-- SEKCJA TEKSTOWA -->
        <div class="component" draggable="true" data-html='<section class="py-5"><div class="container"><h2 contenteditable="true">Nowa sekcja</h2><p contenteditable="true">Dodaj tutaj treść...</p></div></section>'><i class="bi bi-file-text"></i> Sekcja tekstowa</div>
        <!-- CTA -->
        <div class="component" draggable="true" data-html='<section class="text-center py-5"><div class="container"><h2 contenteditable="true">Call to Action</h2><p contenteditable="true">Zachęć użytkownika do działania!</p></div></section>'><i class="bi bi-lightning"></i> CTA</div>
        <!-- TEKST + OBRAZ -->
        <div class="component" draggable="true" data-html='<section class="py-5"><div class="container"><div class="row align-items-center"><div class="col-md-6"><h2 contenteditable="true">Nagłówek z obrazem</h2><p contenteditable="true">Krótki opis...</p></div><div class="col-md-6"><img src="https://placehold.co/400x250" class="img-fluid" alt="Obrazek"></div></div></div></section>'><i class="bi bi-image"></i> Tekst + Obraz</div>
        <!-- 2 KOLUMNY -->
        <div class="component" draggable="true" data-html='<section class="py-5"><div class="container"><div class="row"><div class="col-md-6"><p contenteditable="true">Lewa kolumna</p></div><div class="col-md-6"><p contenteditable="true">Prawa kolumna</p></div></div></div></section>'><i class="bi bi-layout-split"></i> 2 kolumny</div>
        <!-- STOPKA -->
        <div class="component" draggable="true" data-html='<footer class="text-center py-4"><div class="container"><p contenteditable="true">© 2025 Moja Firma – Wszystkie prawa zastrzeżone.</p></div></footer>'><i class="bi bi-box-arrow-in-down"></i> Stopka</div>
        <!-- Panel stylów -->
        <h4>Styl sekcji</h4>
        <div class="style-panel">
            <label>Tło</label>
            <input type="color" id="bgColor">
            <label>Kolor tekstu</label>
            <input type="color" id="textColor">
            <label>Padding (px)</label>
            <input type="number" id="padding" min="0" max="100">
        </div>
    </div>
    <!-- Podgląd i Styl -->
    <div class="col-md-9">
        <h4>Podgląd</h4>
        <div id="canvas" class="droppable"></div>
        <button class="btn btn-primary mt-3" onclick="generateCode()"><i class="bi bi-code-slash"></i> Wygeneruj HTML</button>
        <button class="btn btn-success mt-3" onclick="exportHTML()"><i class="bi bi-download"></i> Eksportuj HTML</button>
        <button class="btn btn-outline-danger mt-3" onclick="clearSite()"><i class="bi bi-trash3"></i> Wyczyść wszystko</button>          
        <pre id="output" class="language-html mt-3" style="height:300px; overflow:auto;"></pre>
    </div>
</div>
<!-- Modal z szablonami -->
<div class="modal fade" id="templateModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Wybierz szablon</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="list-group">
                    <button class="list-group-item list-group-item-action" onclick="loadTemplate('template1')"><i class="bi bi-building"></i> Klasyczna strona firmowa</button>
                    <button class="list-group-item list-group-item-action" onclick="loadTemplate('template2')"><i class="bi bi-box-seam"></i> Landing Page produktu</button>
                    <button class="list-group-item list-group-item-action" onclick="loadTemplate('template3')"><i class="bi bi-envelope-paper"></i> Newsletter z formularzem</button>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
  const templates = {
      template1: `
      <header class="bg-dark text-white text-center py-5">
        <div class="container">
          <h1 contenteditable="true">Witamy w naszej firmie</h1>
          <p contenteditable="true">Tworzymy rozwiązania przyszłości</p>
        </div>
      </header>
      <section class="py-5">
        <div class="container">
          <h2 contenteditable="true">O nas</h2>
          <p contenteditable="true">Jesteśmy zespołem pasjonatów tworzących nowoczesne aplikacje.</p>
        </div>
      </section>
      <section class="bg-primary text-white text-center py-5">
        <div class="container">
          <h2 contenteditable="true">Zacznijmy współpracę</h2>
          <p contenteditable="true">Skontaktuj się z nami już dziś</p>
        </div>
      </section>
      <footer class="bg-dark text-white text-center py-3">
        <div class="container">
          <p contenteditable="true">© 2025 Moja Firma</p>
        </div>
      </footer>
    `,
      template2: `
      <section class="text-center py-5">
        <div class="container">
          <h1 contenteditable="true">Poznaj nasz produkt</h1>
          <p contenteditable="true">Nowoczesne rozwiązanie dla Twojego biznesu</p>
          <img src="https://placehold.co/600x300" class="img-fluid my-4">
          <p><a href="#" class="btn btn-primary btn-lg" contenteditable="false">Kup teraz</a></p>
        </div>
      </section>
    `,
      template3: `
      <section class="py-5">
        <div class="container text-center">
          <h2 contenteditable="true">Zapisz się do newslettera</h2>
          <p contenteditable="true">Otrzymuj nowości i promocje</p>
          <form class="row justify-content-center mt-4">
            <div class="col-md-6">
              <input type="email" class="form-control" placeholder="Twój email">
            </div>
            <div class="col-md-3">
              <button class="btn btn-success w-100" type="submit">Zapisz się</button>
            </div>
          </form>
        </div>
      </section>
    `
  };

  function loadTemplate(name) {
      const html = templates[name];
      document.getElementById('canvas').innerHTML = html;
      const modal = bootstrap.Modal.getInstance(document.getElementById('templateModal'));
      modal.hide();
  }

  const components = document.querySelectorAll('.component');
  const canvas = document.getElementById('canvas');
  let selected = null;

  components.forEach(component => {
      component.addEventListener('dragstart', e => {
          e.dataTransfer.setData('text/plain', component.dataset.html);
      });
  });

  canvas.addEventListener('dragover', e => e.preventDefault());

  canvas.addEventListener('drop', e => {
      e.preventDefault();
      const html = e.dataTransfer.getData('text/plain');
      canvas.insertAdjacentHTML('beforeend', html);
  });

  canvas.addEventListener('click', e => {
      const target = e.target.closest('section, footer, header, div');
      if (!canvas.contains(target)) return;
      if (selected) selected.classList.remove('selected');
      selected = target;
      selected.classList.add('selected');

      // Wczytaj style
      const style = getComputedStyle(selected);
      document.getElementById('bgColor').value = rgbToHex(style.backgroundColor);
      document.getElementById('textColor').value = rgbToHex(style.color);
      document.getElementById('padding').value = parseInt(style.paddingTop);
  });

  // Edycja stylu
  document.getElementById('bgColor').addEventListener('input', e => {
      if (selected) selected.style.backgroundColor = e.target.value;
  });
  document.getElementById('textColor').addEventListener('input', e => {
      if (selected) selected.style.color = e.target.value;
  });
  document.getElementById('padding').addEventListener('input', e => {
      if (selected) selected.style.padding = e.target.value + "px";
  });

  function rgbToHex(rgb) {
      const result = rgb.match(/\d+/g);
      if (!result) return "#ffffff";
      return "#" + result.slice(0, 3).map(x => parseInt(x).toString(16).padStart(2, '0')).join('');
  }

  function escapeHTML(str) {
      return str
          .replace(/&/g, '&amp;')
          .replace(/</g, '&lt;')
          .replace(/>/g, '&gt;')
          .replace(/"/g, '&quot;')
          .replace(/'/g, '&#39;');
  }

  function generateCode() {
      const clone = canvas.cloneNode(true);
      clone.querySelectorAll('[contenteditable]').forEach(el => el.removeAttribute('contenteditable'));
      if (selected) selected.classList.remove('selected');

      const raw = clone.innerHTML;
      const el = document.getElementById('output');
      el.textContent = formatHtml(raw);

      if (el.hasAttribute('data-highlighted'))
          el.removeAttribute('data-highlighted');
      if (el.hasAttribute('data-highlighter'))
          el.removeAttribute('data-highlighter');
      if (el.classList.contains('hljs'))
          el.classList.remove(...Array.from(el.classList).filter(cls => cls.startsWith('hljs')));
      el.innerHTML = escapeHTML(el.textContent);
      hljs.highlightElement(el);
  }

  function clearSite() {
      document.getElementById('canvas').textContent = '';
      document.getElementById('output').textContent = '';
  }

  function formatHtml(html) {
      const div = document.createElement('div');
      div.innerHTML = html.trim();
      return beautifyHtml(div, 0).trim();
  }

  function beautifyHtml(node, level) {
      let output = '';
      const indent = '  '.repeat(level);

      for (let child of node.childNodes) {
          if (child.nodeType === Node.TEXT_NODE) {
              const text = child.textContent.trim();
              if (text) output += indent + text + '\n';
          } else if (child.nodeType === Node.ELEMENT_NODE) {
              let openingTag = indent + `<${child.tagName.toLowerCase()}`;
              for (let attr of child.attributes) {
                  openingTag += ` ${attr.name}="${attr.value}"`;
              }
              openingTag += '>';

              output += openingTag + '\n';

              // Rekurencja dla dzieci
              output += beautifyHtml(child, level + 1);

              const closingTag = `${indent}</${child.tagName.toLowerCase()}>\n`;
              output += closingTag;
          }
      }

      return output;
  }

  function exportHTML() {
      const preview = document.getElementById("canvas");
      preview.querySelectorAll('[contenteditable="true"]').forEach(el => {
          el.removeAttribute('contenteditable');
      });
      const previewContent = preview.innerHTML;

      // Opcjonalnie: zawijamy w pełny szablon HTML
      const fullHTML = `
<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Strona wygenerowana</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
</head>
<body>
  ${previewContent}
</body>
</html>`;

      const blob = new Blob([fullHTML], {
          type: "text/html"
      });
      const url = URL.createObjectURL(blob);

      const a = document.createElement("a");
      a.href = url;
      a.download = "webpage.html";
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);
      URL.revokeObjectURL(url);
  }
</script>

Kod po stronie serwera

Licencja

## BSD-3-Clause License Agreement
BSD-3-Clause
Сopyright (c) 2026 Dariusz Rorat

All rights reserved.

Redistribution and use in source and binary forms, with or without
modification, are permitted provided that the following conditions are met:

1. Redistributions of source code must retain the above copyright notice,
   this list of conditions and the following disclaimer.

2. Redistributions in binary form must reproduce the above copyright notice,
   this list of conditions and the following disclaimer in the documentation
   and/or other materials provided with the distribution.

3. Neither the name of the copyright holder nor the names of its
   contributors may be used to endorse or promote products derived from
   this software without specific prior written permission.

THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.