Enigmatic/index.html at main · AngelGab006/Enigmatic · 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
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Enigmatic</title>
  <link rel="stylesheet" href="./resource/css/style.css" />
  <link rel="shortcut icon" href="./resource/img/logo.png" type="image/x-icon" />
</head>

<body>
  <!--home section start-->
  <!-- menu -->
  <div class="menu_header">
    <div class="logo">
      <ion-icon name="eye-outline"></ion-icon>
      <p>Enigmatic</p>
    </div>
    <div class="links">
      <a href="#home">Home</a>
      <a href="#cola">Collaborator</a>
      <a href="#info">About</a>
      <a href="https://github.com/AngelGab006/Enigmatic"> <ion-icon name="logo-github"></ion-icon></a>
    </div>
  </div>
  <!-- menu end-->
  <section class="central-image" id="home">
    <div class="central_section">
      <div class="text">
        <p>Welcome to</p>
        <p class="title">ENICMATIC</p>
        <span>This cryptography tool is an educational resource to help students learn and practice matrix-based encryption. It allows visualizing message data, experimenting with encryption/decryption, and verifying accuracy - enhancing understanding of cryptographic principles. Users should engage with the tool responsibly as a complement to their own work, not as a replacement for comprehensive cryptography knowledge required for academic and real-world applications.</span>
        <div class="buttons">
          <a href="#tools">View Tools</a>
          <a href="#info">Learn More</a>
        </div>
      </div>
      <div class="img">
        <img src="resource/img/logo.jpg" alt="" />
      </div>
    </div>
  </section>
  <!-- home section end-->
  <!-- creators section start-->
  <div class="creators" id="cola">
    <div class="title">
      <p>Collaborators</p>
    </div>
    <div class="colaborators">
      <div class="people">
        <div class="people_img">
          <img src="resource/img/logo.jpg" alt="">
        </div>
        <div class="name">
         <p>Ángel Gabriel Núñez Beltré</p>
        </div>
      </div>


      <div class="people">
        <div class="people_img">
          <img src="resource/img/logo.jpg" alt="">
        </div>
        <div class="name">
          Josias Peguero
        </div>
      </div>

    </div>
  </div>


  <!-- creator section end-->
  <section class="information" id="info" style="padding-top: 80px;">
    <article id="Description">
      <h2>What it's this tool</h2>
      <p>
        This tool helps you create a matrix representation of a message, along with the corresponding matrix table. It also provides a way to verify that a given encrypted matrix, when decrypted, returns the original message. This tool is designed to assist students working on cryptography projects.
      </p>
    </article>
    <article id="Objetive">
      <h2>Objective</h2>
      <p>
        The primary objective of this cryptography tool is to assist students in learning and applying matrix-based encryption and decryption techniques through a practical and interactive platform. The tool enables users to create matrix representations of messages, experiment with encryption/decryption, and verify the accuracy of their methods, helping to bridge the gap between theory and practice in cryptography.
      </p>
    </article>
    <article id="Licese-and-ethics">
      <h2>Ethics</h2>
      <p>
        This cryptography tool is strictly an educational aid for students learning matrix-based encryption techniques. It is not intended for commercial use or to replace the full scope of a student's project work. The tool should be used responsibly to complement the student's own research and problem-solving efforts, not as a substitute. Ethical use of this tool is limited to enhancing the learning experience and supporting the educational objectives of cryptography courses.
      </p>
    </article>
  </section>
  <section class="Select" id="tools">
    <h3>Select an option</h3>
    <div class="btnSelect">
      <div class="election" id="election-1">
        <button id="option1" class="btnOption" onclick="window.location.href='./Pages/Translate.html'">
          Translate Message to Number
        </button>
        <span class="description">The "Translate Message to Number Matrix" function converts a message into a numerical matrix representation, visualizing the data structure and preparing it for matrix-based encryption techniques. This feature supports the educational objectives of cryptography by providing a standardized format for students to explore data manipulation principles.</span>
      </div>
      <div class="election" id="election-2">
        <button id="option2" class="btnOption" onclick="window.location.href='./Pages/decrypt.html'">
          decrypt
        </button>
        <span class="description">The "decrypt" function allows users to test the accuracy of their encryption and decryption processes by decrypting an encrypted matrix and comparing the result to the original message. This feature supports learning objectives by enabling students to validate their work, troubleshoot issues, and reinforce their understanding of cryptographic principles, ultimately building confidence in applying matrix-based techniques.</span>
      </div>
    </div>
  </section>
  <footer>
    <h5>
      Thanks for support and use this open source project, please help use in
      the development with an issue
    </h5>
  </footer>
  <script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
  <script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
  <script src="./resource/js/main.js"></script>
</body>

</html>