Skip to content

Commit 7c5f959

Browse files
wuriyanto48wuriyanto48
authored
Create index.html
add crypsi sub link
1 parent 6fe7292 commit 7c5f959

File tree

1 file changed

+191
-0
lines changed

1 file changed

+191
-0
lines changed

‎crypsi/index.html‎

Lines changed: 191 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,191 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Crypsi Crypto Library Ecosystem</title>
7+
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/crypsi.min.js"></script>
8+
<style>
9+
body {
10+
font-family: Arial, sans-serif;
11+
background-color: #f4f4f4;
12+
display: flex;
13+
justify-content: center;
14+
align-items: center;
15+
height: 100vh;
16+
margin: 0;
17+
}
18+
19+
.container {
20+
background: white;
21+
padding: 20px;
22+
border-radius: 10px;
23+
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
24+
width: 90%;
25+
max-width: 500px;
26+
text-align: center;
27+
}
28+
29+
h2 {
30+
color: #333;
31+
}
32+
33+
label {
34+
font-weight: bold;
35+
display: block;
36+
margin: 10px 0 5px;
37+
}
38+
39+
input {
40+
width: 95%;
41+
padding: 10px;
42+
margin-bottom: 10px;
43+
border: 1px solid #ccc;
44+
border-radius: 5px;
45+
}
46+
47+
button {
48+
background-color: #007bff;
49+
color: white;
50+
padding: 10px 15px;
51+
border: none;
52+
border-radius: 5px;
53+
cursor: pointer;
54+
transition: background 0.3s ease;
55+
width: 50%;
56+
margin-top: 10px;
57+
}
58+
59+
button:hover {
60+
background-color: #0056b3;
61+
}
62+
63+
h3 {
64+
margin-top: 20px;
65+
color: #444;
66+
}
67+
68+
p {
69+
background: #eee;
70+
padding: 10px;
71+
border-radius: 5px;
72+
min-height: 20px;
73+
word-break: break-word;
74+
}
75+
76+
ul {
77+
list-style-type: none;
78+
padding: 0;
79+
margin: 15px 0;
80+
}
81+
82+
ul li {
83+
background: #f8f9fa;
84+
padding: 10px;
85+
margin: 5px 0;
86+
border-radius: 5px;
87+
border-left: 5px solid #007bff;
88+
transition: background 0.3s ease;
89+
}
90+
91+
ul li:hover {
92+
background: #e2e6ea;
93+
}
94+
95+
ul li a {
96+
text-decoration: none;
97+
color: #007bff;
98+
font-weight: bold;
99+
}
100+
101+
ul li a:hover {
102+
text-decoration: underline;
103+
}
104+
</style>
105+
</head>
106+
<body>
107+
108+
<div class="container">
109+
<h3>Crypsi Crypto Library Ecosystem</h3>
110+
<p>https://github.com/telkomdev/crypsi.js</p>
111+
CrypsiJs is compatible with each other with the following server side libraries
112+
<ul>
113+
<li><a href="https://github.com/telkomdev/c-crypsi" target="blank">C/C++</a></li>
114+
<li><a href="https://github.com/telkomdev/go-crypsi" target="blank">Golang</a></li>
115+
<li><a href="https://github.com/telkomdev/pycrypsi" target="blank">Python</a></li>
116+
<li><a href="https://github.com/telkomdev/crypsi" target="blank">NodeJs</a></li>
117+
<li><a href="https://github.com/telkomdev/NetCrypsi" target="blank">C# (.NET)</a></li>
118+
<li><a href="https://github.com/telkomdev/jcrypsi" target="blank">Java/JVM</a></li>
119+
<li><a href="https://github.com/telkomdev/c-crypsi" target="blank">C/C++</a></li>
120+
<li><a href="https://github.com/telkomdev/pgcrypsi" target="blank">PostgreSQL</a></li>
121+
<li><a href="https://github.com/telkomdev/crypsi-mysql-udf" target="blank">MySQL/MariDB</a></li>
122+
</ul>
123+
124+
<h3>AES Encryption Demo</h3>
125+
126+
<label for="modeSelect">Select Encryption Mode:</label>
127+
<select id="modeSelect">
128+
<option value="cbc">AES-256-CBC</option>
129+
<option value="gcm">AES-256-GCM</option>
130+
</select>
131+
132+
<label for="keyInput">Enter AES Key:</label>
133+
<input type="text" id="keyInput" placeholder="Enter 32-byte key">
134+
135+
<label for="dataInput">Enter Data to Encrypt:</label>
136+
<input type="text" id="dataInput" placeholder="Enter text to encrypt">
137+
138+
<button onclick="encryptData()">Encrypt</button>
139+
140+
<h3>Encrypted Output:</h3>
141+
<p id="encryptedOutput"></p>
142+
143+
<label for="encryptedDataInput">Enter Encrypted Data:</label>
144+
<input type="text" id="encryptedDataInput" placeholder="Enter encrypted text">
145+
146+
<button onclick="decryptData()">Decrypt</button>
147+
148+
<h3>Decrypted Output:</h3>
149+
<p id="output"></p>
150+
151+
<script>
152+
async function encryptData() {
153+
const key = document.getElementById("keyInput").value;
154+
const data = document.getElementById("dataInput").value;
155+
const mode = document.getElementById("modeSelect").value;
156+
157+
try {
158+
let encryptedData;
159+
if (mode === "cbc") {
160+
encryptedData = await crypsi.aes.encryptWithAes256Cbc(key, data);
161+
} else {
162+
encryptedData = await crypsi.aes.encryptWithAes256Gcm(key, data);
163+
}
164+
document.getElementById("encryptedOutput").innerText = encryptedData;
165+
} catch (error) {
166+
document.getElementById("encryptedOutput").innerText = "Encryption failed: " + error.message;
167+
}
168+
}
169+
170+
async function decryptData() {
171+
const key = document.getElementById("keyInput").value;
172+
const encryptedData = document.getElementById("encryptedDataInput").value;
173+
const mode = document.getElementById("modeSelect").value;
174+
const decoder = new TextDecoder();
175+
176+
try {
177+
let decryptedData;
178+
if (mode === "cbc") {
179+
decryptedData = await crypsi.aes.decryptWithAes256Cbc(key, encryptedData);
180+
} else {
181+
decryptedData = await crypsi.aes.decryptWithAes256Gcm(key, encryptedData);
182+
}
183+
document.getElementById("output").innerText = decoder.decode(decryptedData);
184+
} catch (error) {
185+
document.getElementById("output").innerText = "Decryption failed: " + error.message;
186+
}
187+
}
188+
</script>
189+
190+
</body>
191+
</html>

0 commit comments

Comments
 (0)