SygnaWorld – Générateur de Contrats Sécurisés

Générateur de Contrats

Contrat anonyme (masque les identités dans l’aperçu)

Titre du contrat Type

Parties

Montant (optionnel)

Durée (optionnel)

Description / Objet

</div>

<div class="mb-3">
                <label class="form-label" for="contractLanguage">
                  <i class="fas fa-language"></i> Langue
                </label>
                <select class="form-select" id="contractLanguage">
                  <option value="fr">Français</option>
                  <option value="en">English</option>
                  <option value="es">Español</option>
                  <option value="de">Deutsch</option>
                  <option value="it">Italiano</option>
                  <option value="pt">Português</option>
                  <option value="zh-CN">中文 (Simplifié)</option>
                  <option value="ar">العربية</option>
                  <option value="ru">Русский</option>
                  <option value="ja">日本語</option>
                  <option value="ko">한국어</option>
                </select>
 </div>

<button type="button" class="btn btn-primary w-100 btn-lg" onclick="generat>
                <i class="fas fa-magic"></i> Générer le Contrat Sécurisé
              </button>
            </form>
          </div>
        </div>
      </div>

<div class="col-md-6">
        <div class="card">
          <div class="card-header bg-success text-white">
            <h5 class="m-0"><i class="fas fa-file-contract"></i> Contrat Généré</h5>
          </div>
          <div class="card-body">
            <div id="contractPreview" class="contract-preview">
              <p class="text-muted text-center">
                <i class="fas fa-file-alt fa-3x mb-3"></i><br>
                Remplissez le formulaire pour générer votre contrat sécurisé.
              </p>
            </div>

<div id="loadingSpinner" class="loading-spinner">
              <div class="spinner-border text-primary" role="status">
                <span class="visually-hidden">Génération en cours...</span>
              </div>
              <p class="mt-2">Génération du contrat sécurisé...</p>
            </div>

<div id="downloadStatus" class="download-status">
              <i class="fas fa-spinner fa-spin"></i> Génération du PDF protégé...
            </div>
<div id="securityInfo" class="security-info">
              <h6 class="mb-2"><i class="fas fa-shield-alt"></i> Sécurité Implémentée</h6>
              <ul class="mb-0">
                <li><i class="fas fa-check text-success"></i> Chiffrement AES-256 côté se>
                <li><i class="fas fa-check text-success"></i> Intégrité par hash SHA-256<>
                <li><i class="fas fa-check text-success"></i> Stockage décentralisé (IPFS>
                <li><i class="fas fa-check text-success"></i> PDF protégé par mot de pass>
                <li><i class="fas fa-check text-success"></i> Prêt pour notarisation bloc>
              </ul>
            </div>

<div id="blockchainInfo" class="blockchain-info">
              <h6 class="mb-2"><i class="fas fa-link"></i> Informations Blockchain</h6>
              <p><strong>ID Contrat :</strong> <span id="contractId" class="hash-display">
              <p><strong>Hash SHA-256 :</strong> <span id="contractHash" class="hash-disp>
              <p><strong>Hash IPFS :</strong> <span id="ipfsHash" class="hash-display"></>
              <p><strong>Transaction ID :</strong> <span id="transactionId" class="hash-d>
              <p><strong>Mot de passe PDF :</strong> <span id="contractPassword" class="h>
            </div>

<div class="mt-3" id="actionButtons" style="display:none;">
              <button class="btn btn-success me-2 mb-2" onclick="downloadProtectedPdf()">
                <i class="fas fa-download"></i> Télécharger PDF Protégé
              </button>
              <button class="btn btn-info me-2 mb-2" onclick="saveToIPFS()">
                <i class="fas fa-cloud"></i> Sauver IPFS
              </button>
              <button class="btn btn-warning mb-2" onclick="sendToBlockchain()">
                <i class="fas fa-link"></i> Blockchain
              </button>
            </div>
          </div>
        </div>
      </div>
  
    </div>
  </div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.2.0/crypto-js.min.js" d>

// Ajouter / supprimer des parties
    document.addEventListener('click', (e) => {
      if (e.target.closest('#addPartyBtn')) {
        const partiesContainer = document.getElementById('partiesContainer');
        const div = document.createElement('div');
        div.className = 'party-input-group';
        div.innerHTML = `
          <input type="text" class="form-control party-input" placeholder="Nom de la part>
          <button type="button" class="btn btn-danger btn-sm remove-party-btn" title="Sup>
            <i class="fas fa-times"></i>
          </button>`;
        partiesContainer.appendChild(div);
        updateRemoveButtonsVisibility();
      }
      if (e.target.closest('.remove-party-btn')) {
        const group = e.target.closest('.party-input-group');
        if (group) group.remove();
        updateRemoveButtonsVisibility();
      }
    });

function updateRemoveButtonsVisibility() {
      const groups = document.querySelectorAll('.party-input-group');
      groups.forEach(g => {
        const btn = g.querySelector('.remove-party-btn');
        btn.style.display = (groups.length > 2) ? 'inline-block' : 'none';
      });
    }
    updateRemoveButtonsVisibility();

// Mode anonyme
    document.getElementById('anonymousContract').addEventListener('change', function () {
  const isAnonymous = this.checked;
      const titleInput = document.getElementById('contractTitle');
      const partyInputs = document.querySelectorAll('.party-input');
      const descriptionInput = document.getElementById('contractDescription');

if (isAnonymous) {
        titleInput.removeAttribute('required');
        descriptionInput.removeAttribute('required');
        partyInputs.forEach(input => input.removeAttribute('required'));

titleInput.value = "Contrat Anonyme";
        descriptionInput.value = "Ce contrat est généré de manière anonyme. Les noms des >
        partyInputs.forEach((input, index) => { input.value = `Partie Anonyme ${index + 1>
      } else {
        titleInput.setAttribute('required', 'required');
        descriptionInput.setAttribute('required', 'required');
        partyInputs.forEach(input => input.setAttribute('required', 'required'));
        titleInput.value = "";
        descriptionInput.value = "";
        partyInputs.forEach(input => input.value = "");
      }
    });

function generateSecureContract() {
      const isAnonymous = document.getElementById('anonymousContract').checked;
      let title = document.getElementById('contractTitle').value.trim();
      let type = document.getElementById('contractType').value;
      const parties = Array.from(document.querySelectorAll('.party-input')).map(inp => in>
      let amount = document.getElementById('contractAmount').value.trim();
      let duration = document.getElementById('contractDuration').value.trim();
      let description = document.getElementById('contractDescription').value.trim();
      const targetLanguage = document.getElementById('contractLanguage').value;

if (!isAnonymous) {
        if (!title || !type || !description || parties.some(p => p === '')) {
   alert('⚠️ Veuillez remplir tous les champs obligatoires et toutes les parties.');
          return;
        }
      } else {
        if (!title) title = "Contrat Anonyme";
        if (!type) type = "custom";
        parties.forEach((p, i, arr) => { if (!p) arr[i] = `Partie Anonyme ${i+1}`; });
        if (!description) description = "Ce contrat est généré de manière anonyme.";
      }

document.getElementById('loadingSpinner').style.display = 'block';
      document.getElementById('contractPreview').style.display = 'none';
      document.getElementById('securityInfo').style.display = 'none';
      document.getElementById('blockchainInfo').style.display = 'none';
      document.getElementById('actionButtons').style.display = 'none';

setTimeout(() => {
        const contractId = generateUniqueId();
        const currentDate = new Date().toLocaleDateString('fr-FR');
        const currentTime = new Date().toLocaleTimeString('fr-FR');
        const password = generateSecurePassword();

const contractContent = title + type + parties.join('') + amount + duration + des>
        const contractHash = generateSHA256(contractContent);
        const ipfsHash = generateIPFSHash();
        const transactionId = generateTransactionId();

const contractHTML = `
          <div class="contract-content">
            <div class="text-center mb-4">
              <h4 class="text-primary">${title}</h4>
              <p class="text-muted">Contrat numérique sécurisé par blockchain & PDF proté>
            </div>

<div class="row mb-3">
              <div class="col-6"><strong>ID Contrat :</strong></div>
              <div class="col-6">${contractId}</div>
            </div>
            <div class="row mb-3">
              <div class="col-6"><strong>Date de création :</strong></div>
              <div class="col-6">${currentDate} à ${currentTime}</div>
            </div>
            <div class="row mb-3">
              <div class="col-6"><strong>Type :</strong></div>
              <div class="col-6">${getTypeLabel(type)}</div>
            </div>

<hr>
            <h5 class="text-primary">📋 Parties Contractuelles</h5>
            ${partiesHTML}

<hr>
 <h5 class="text-primary">💰 Conditions Financières</h5>
            <div class="row mb-2">
              <div class="col-4"><strong>Montant :</strong></div>
              <div class="col-8">${amount ? amount + ' €' : 'À définir'}</div>
            </div>
            <div class="row mb-3">
              <div class="col-4"><strong>Durée :</strong></div>
              <div class="col-8">${duration || 'À définir'}</div>
            </div>

<hr>
            <h5 class="text-primary">📝 Objet du Contrat</h5>
            <p class="mb-3">${description || '(vide)'}</p>

<hr>
            <h5 class="text-primary">⚖️ Clauses Légales</h5>
            <p class="small mb-0">
              • Ce contrat est régi par le droit français<br>
              • Tout litige sera soumis aux tribunaux compétents<br>
              • Intégrité garantie par hash SHA-256<br>
              • Stockage décentralisé (IPFS simulé)<br>
              • PDF protégé par mot de passe (AES-256)
            </p>

<hr>
            <div class="text-center">
              <h6 class="text-primary">✍️ Signatures Électroniques</h6>
              <div class="row">
                ${signaturesHTML}
              </div>
            </div>

<div class="text-center mt-3">
              <small class="text-muted">
                <i class="fas fa-shield-alt"></i> Document sécurisé — Hash: ${contractHas>
       </small>
            </div>
          </div>
        `;

document.getElementById('contractPreview').innerHTML = contractHTML;
        document.getElementById('loadingSpinner').style.display = 'none';
        document.getElementById('contractPreview').style.display = 'block';
        document.getElementById('securityInfo').style.display = 'block';
        document.getElementById('blockchainInfo').style.display = 'block';
        document.getElementById('actionButtons').style.display = 'block';

currentContract = {
          id: contractId,
          title,
          type,
          parties,
          amount,
          duration,
          description,
          date: currentDate,
          time: currentTime,
          hash: contractHash,
          ipfsHash: ipfsHash,
          transactionId: transactionId,
          password: password,
          targetLanguage
        };

// Renseigner les encarts d'infos
        document.getElementById('contractId').textContent = currentContract.id;
        document.getElementById('contractHash').textContent = currentContract.hash;
        document.getElementById('ipfsHash').textContent = currentContract.ipfsHash;
        document.getElementById('transactionId').textContent = currentContract.transactio>
        document.getElementById('contractPassword').textContent = currentContract.passwor>
    }, 600);
    }

async function downloadProtectedPdf() {
      if (!currentContract) {
        alert("Veuillez d'abord générer un contrat.");
        return;
      }

document.getElementById('downloadStatus').style.display = 'block';
      document.getElementById('actionButtons').style.display = 'none';

// Le service PDF coupe sur les lignes vides => \n\n = nouvelle page
      const texte = [
        `Titre: ${currentContract.title}`,
        `Type: ${getTypeLabel(currentContract.type)}`,
        `ID: ${currentContract.id} — ${currentContract.date} ${currentContract.time}`,
        '',
        'PARTIES',
        ...currentContract.parties.map((p, i) => `Partie ${i+1}: ${p}`),
        '',
        'CONDITIONS',
        `Montant: ${currentContract.amount || 'À définir'}`,
        `Durée: ${currentContract.duration || 'À définir'}`,
        '',
        'DESCRIPTION',
        currentContract.description || '(vide)'
      ].join('\n\n');

try {
        const res = await fetch('/api/pdf/render-protected', {
          method: 'POST',
          headers: { 'content-type': 'application/json' },
          // Vous pouvez aussi passer "filename" si vous voulez forcer le nom côté serveur
          body: JSON.stringify({ text: texte, password: currentContract.password, filenam>
   });
        if (!res.ok) {
          const msg = await res.text().catch(()=> '');
          throw new Error(`API PDF ${res.status}: ${msg || 'erreur'}`);
        }
        const blob = await res.blob();
        const url = URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.href = url;
        a.download = `${currentContract.id}.pdf`;
        document.body.appendChild(a);
        a.click();
        a.remove();
        URL.revokeObjectURL(url);
      } catch (e) {
        alert('❌ Erreur PDF: ' + e.message);
      } finally {
        document.getElementById('downloadStatus').style.display = 'none';
        document.getElementById('actionButtons').style.display = 'block';
      }
    }

function sendToBlockchain() {
      if (!currentContract) { alert("Veuillez d'abord générer un contrat."); return; }
      alert(`(Démo) Notarisation blockchain.\nTransaction ID: ${currentContract.transacti>
    }
  </script>

<div class="container my-4 text-center">
    <button id="btn" type="button" class="btn btn-outline-light">
      Télécharger PDF protégé (test)
    </button>
  </div>

🔐 SygnaWorld

Générateur de Contrats