pages-encrypted/script.js at main · vildhet/pages-encrypted · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
document.addEventListener('DOMContentLoaded', () => {
  const publicCasesGrid = document.getElementById('public-cases-grid');
  const privateCasesGrid = document.getElementById('private-cases-grid');
  const passwordModal = document.getElementById('password-modal');
  const closeButton = document.querySelector('.close-button');
  const submitPasswordButton = document.getElementById('submit-password');
  const passwordInput = document.getElementById('password-input');

  const publicCases = [
    { name: 'E-commerce Website Redesign', path: 'public_cases/public_case_1.html', image: 'https://images.unsplash.com/photo-1556740738-b6a63e27c4df?q=80&w=2940&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D' }
  ];

  const privateCases = [
    { name: 'Internal Banking App', path: 'encrypted_cases/private_case_1.html.enc', image: 'https://images.unsplash.com/photo-1518770660439-4636190af475?q=80&w=2940&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D' }
  ];

  const createCaseCard = (caseItem, isEncrypted) => {
    const card = document.createElement('div');
    card.classList.add('case-card');
    card.dataset.path = caseItem.path;
    card.dataset.encrypted = isEncrypted;

    card.innerHTML = `
      <img src="${caseItem.image}" alt="${caseItem.name}">
      <div class="overlay">
        <h3>${caseItem.name}</h3>
        <div class="status">
          ${isEncrypted ? '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M8 1a2 2 0 0 1 2 2v4H6V3a2 2 0 0 1 2-2zm3 6V3a3 3 0 0 0-6 0v4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2z"/></svg><span>Private</span>' : '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M11 1a2 2 0 0 0-2 2v4a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2h5V3a3 3 0 0 1 6 0v4a.5.5 0 0 1-1 0V3a2 2 0 0 0-2-2z"/></svg><span>Public</span>'}
        </div>
      </div>
    `;

    card.addEventListener('click', () => {
      const isEncrypted = card.dataset.encrypted === 'true';
      const path = card.dataset.path;

      if (isEncrypted) {
        passwordModal.style.display = 'block';
        submitPasswordButton.onclick = () => {
          const password = passwordInput.value;
          if (password) {
            sessionStorage.setItem('password', password);
            window.location.href = `case.html?case=${path}&encrypted=true`;
          }
        };
      } else {
        window.location.href = `case.html?case=${path}`;
      }
    });

    return card;
  };

  publicCases.forEach(caseItem => {
    publicCasesGrid.appendChild(createCaseCard(caseItem, false));
  });

  privateCases.forEach(caseItem => {
    privateCasesGrid.appendChild(createCaseCard(caseItem, true));
  });

  closeButton.onclick = () => {
    passwordModal.style.display = 'none';
  };

  window.onclick = (event) => {
    if (event.target == passwordModal) {
      passwordModal.style.display = 'none';
    }
  };
});