<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Web App Guide Gen</title>
  <style>
    /* Style général */
    body {
      margin: 0;
      padding: 0;
      background: #0f0f0f; /* Fond noir */
      color: #fff; /* Texte blanc */
      font-family: Arial, sans-serif;
      text-align: center;
    }

    .container {
      max-width: 600px;
      margin: 50px auto;
      padding: 20px;
      border: 1px solid #444;
      border-radius: 10px;
      background: #1a1a1a;
    }

    h1 {
      color: #f0f0f0;
      font-size: 2em;
    }

    input, button, textarea {
      width: 100%;
      margin: 10px 0;
      padding: 10px;
      border-radius: 5px;
      border: 1px solid #444;
      background: #222;
      color: #fff;
      font-size: 1em;
    }

    input::placeholder {
      color: #aaa;
    }

    button {
      background: #ff0080;
      color: #fff;
      cursor: pointer;
      transition: background 0.3s ease;
    }

    button:hover {
      background: #e60073;
    }

    textarea {
      height: 200px;
      resize: none;
    }

    .preview {
      margin-top: 20px;
      border: 1px solid #444;
      border-radius: 5px;
      background: #121212;
      padding: 10px;
      text-align: left;
      color: #ccc;
      font-family: monospace;
      font-size: 0.9em;
    }

   .link {
      text-decoration: none;
      color: orange;
}

   .link-Important {
      text-decoration: none;
      color: cyan;
}
  </style>
</head>
<body>
  <div class="container">
    <h1>Web App Guide Generator</h1>
    <label for="titleInput">Web App Title:</label>
    <input id="titleInput" type="text" placeholder="Type the name of your web app/element...">
    
    <label for="imageInput">Header Image URL:</label>
    <input id="imageInput" type="text" placeholder="Type the image URL of your website...">
<p>Don't have an image URL? <strong><a link class="link" href="https://maskedlll.github.io/imgur-uploader/Online.html" target="blank">GET ONE NOW!</a></strong></p>
    
    <button id="generateButton">Generate Code</button>

    <textarea id="generatedCode" readonly></textarea>
    <button id="copyButton">Copy Code</button>

    <div class="preview">
      <h3>Live Preview</h3>
      <div id="preview"></div>
    </div>
   <footer>
      <strong>Powered by <a class="link-Important" href="https://github.com/DEV-s-s">DΣV</a></strong>
</footer>
  </div>

  <script>
    const titleInput = document.getElementById('titleInput');
    const imageInput = document.getElementById('imageInput');
    const generateButton = document.getElementById('generateButton');
    const copyButton = document.getElementById('copyButton');
    const generatedCode = document.getElementById('generatedCode');
    const preview = document.getElementById('preview');

    const templateHTML = (title, imageUrl) => `

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>${title} Guide</title>
  <style>
    /* General */
    body {
      margin: 0;
      padding: 0;
      overflow: hidden; /* No scrolling */
      background: #000; /* Black background */
      color: #fff; /* White text */
      font-family: Arial, sans-serif;
      text-align: center;
      user-select: none; /* Disable the selection */
    }

    html, body {
      height: 100%;
      width: 100%;
    }

    /* Disable zoom */
    body {
      touch-action: manipulation;
      -ms-touch-action: manipulation;
    }

    /* Image protection */
    img {
      max-width: 100%;
      height: auto;
      -webkit-user-drag: none; /* Prevents drag and drop */
      pointer-events: none; /* Prevents right click */
    }

    header {
      background: #808080; /* Grey */
      padding: 20px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      border-bottom: 2px solid #fff; /* White line */
    }

    header img {
      border-radius: 50%; /* Circle */
      border: 4px solid #fff;
      width: 100px;
      height: 100px;
    }

    header h1 {
      margin-top: 15px;
      font-size: 1.8em;
      color: #fff; /* White text */
    }

    main {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 40px;
      height: calc(100% - 200px); /* Adjustment for footers */
      padding: 20px;
    }

    .step {
      text-align: center;
    }

    .step img {
      width: 250px; /* Size of images */
      height: auto;
      object-fit: contain;
    }

    .step p {
      margin-top: 10px;
      font-size: 1.4em;
      color: #fff; /* White text */
    }

    .footer2 {
      font-size: 0.6em; /* Very small text */
      color: #fff; /* White text */
      text-align: center;
      position: absolute;
      bottom: 0;
      width: 100%;
      padding: 5px;
    }

    .link {
      text-decoration: none;
      color: cyan;
    }
  </style>
</head>
<body>
  <header>
    <img src="${imageUrl}" alt="Header Image">
    <h1>${title} Guide</h1>
  </header>

  <main>
    <div class="step">
      <img src="https://i.imgur.com/PmpoUhB.png" alt="Step 1">
      <p>1. Tap the share button.</p>
    </div>
    <div class="step">
      <img src="https://i.imgur.com/ExP99hP.png" alt="Step 2">
      <p>2. Tap "Add to Home Screen".</p>
    </div>
    <div class="step">
      <img src="https://i.imgur.com/bsjJH9j.png" alt="Step 3">
      <p>3. Tap "Add".</p>
    </div>
  </main>

  <div class="footer2">
    Powered by <strong><a class="link" href="https://github.com/DEV-s-s">DΣV</a></strong>
  </div>
</body>
</html>
    `;

    function updatePreview() {
      const title = titleInput.value || 'My Web';
      const imageUrl = imageInput.value || 'https://i.imgur.com/Fq1RNoz.jpeg';
      preview.innerHTML = `
        <header>
          <img src="${imageUrl}" alt="Header Image" style="border-radius: 50%; width: 100px; height: 100px; border: 4px solid #fff;">
          <h1>${title} Guide</h1>
        </header>
      `;
    }

    generateButton.addEventListener('click', () => {
      const title = titleInput.value || 'My Web';
      const imageUrl = imageInput.value || 'https://i.imgur.com/wc0PQyk.png';
      generatedCode.value = templateHTML(title, imageUrl);
      updatePreview();
    });

    copyButton.addEventListener('click', () => {
      generatedCode.select();
      document.execCommand('copy');
      alert('Code copied to clipboard!');
    });

    titleInput.addEventListener('input', updatePreview);
    imageInput.addEventListener('input', updatePreview);
  </script>
</body>
</html>