-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
146 lines (130 loc) · 7.54 KB
/
index.html
File metadata and controls
146 lines (130 loc) · 7.54 KB
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
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.7/tailwind.min.css">
<!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css"> -->
<!-- <link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}" type="image/x-icon"> -->
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='style.css') }}">
<title>En-De-Crypt</title>
</head>
<body class="bg-gray-100">
<header class="py-4 px-3 md:py-8 md:px-3">
<nav class="flex justify-between items-center">
<h1 class="text-2xl md:text-3xl font-bold text-grey-500">En-De-Crypt</h1>
<button id="menu-toggle" class="md:hidden focus:outline-none p-2">
<i class="bi bi-list font-bold text-2xl"></i>
</button>
</nav>
</header>
<script src="script.js"> </script>
<div class="container mx-auto p-4">
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div class="card rounded-lg p-4 text-center hover:shadow-lg transition-shadow">
<h1 class="text-xl font-bold mb-2">File Encryption</h1>
<form class="mt-auto" action="{{ url_for('encrypt_file') }}" method="post" enctype="multipart/form-data">
<div class="mb-4">
<label for="file" class="block text-gray-700 font-bold mb-2 text-left">Select file to encrypt:</label>
<input type="file" class="border rounded w-full py-2 px-3" name="file" required>
</div>
<button type="submit" class="bg-blue-500 text-white font-bold py-2 px-4 mx-auto rounded hover:bg-blue-700 transition-colors">Encrypt</button>
</form>
</div>
<div class="card rounded-lg p-4 text-center hover:shadow-lg transition-shadow">
<h1 class="text-xl font-bold mb-2">File Decryption</h1>
<form action="{{ url_for('decrypt_file') }}" method="post" enctype="multipart/form-data">
<div class="mb-4">
<label for="file" class="block text-gray-700 font-bold mb-2 text-left">Select file to decrypt:</label>
<input type="file" class="border rounded w-full py-2 px-3" name="file" required>
</div>
<div class="mb-4">
<label for="key" class="block text-gray-700 font-bold mb-2 text-left">Upload .key file:</label>
<input type="file" class="border rounded w-full py-2 px-3" name="key">
</div>
<button type="submit" class="bg-blue-500 text-white font-bold py-2 px-4 mx-auto mt-0 rounded hover:bg-blue-700 transition-colors">Decrypt</button>
</form>
</div>
</div>
{% if decrypted_file %}
<div class="my-10">
<h2 class="text-3xl font-bold mb-5">Decrypted file</h2>
<a href="{{ url_for('download_file', filename=decrypted_file) }}" class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded">Download decrypted file</a>
</div>
{% endif %}
<div class="my-10 text-center">
<form method="GET" action="/clear">
<button type="submit" class="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded">Clear Uploads</button>
</form>
{% with messages = get_flashed_messages() %}
{% if messages %}
<ul class="my-10 message">
{% for message in messages %}
<li class="font-bold message-text"> {{ message }}</li>
{% endfor %}
</ul>
{% endif %}
{% endwith %}
</div>
</div>
<div class="container mx-auto p-4" >
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div class="card rounded-lg px-4 pt-4 pb-2 text-center hover:shadow-lg transition-shadow">
<h1 class="text-xl font-bold mb-2">Text Encryption</h1>
<form class="mt-auto" action="{{ url_for('text_encryption') }}" method="post" enctype="multipart/form-data">
{% if encrypted_text %}
<div class="mb-4">
<label for="file" class="block text-gray-700 font-bold mb-2 text-left">Encrypted text:</label>
<textarea rows=4 class="border rounded w-full py-2 px-3" readonly>{{ encrypted_text }}</textarea>
</div>
<div class="mb-4">
<label for="file" class="block text-gray-700 font-bold mb-2 text-left">Encryption key:</label>
<input type="text" class="border rounded w-full py-2 px-3" readonly value="{{ key }}">
</div>
{% else %}
<div class="mb-4">
<label for="file" class="block text-gray-700 font-bold mb-2 text-left">Enter text to encrypt:</label>
<textarea rows=4 class="border rounded w-full py-2 px-3" name="en-text" required>{{ text }}</textarea>
</div>
<button type="submit" class="bg-blue-500 text-white font-bold py-2 px-4 mx-auto rounded hover:bg-blue-700 transition-colors">Encrypt</button>
{% endif %}
</form>
{% if encrypted_text %}
<form method="POST" action="/clear_flask_vars">
<button type="submit" class="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded">Clear</button>
</form>
{% endif %}
</div>
<div class="card rounded-lg px-4 pt-4 pb-2 text-center hover:shadow-lg transition-shadow">
<h1 class="text-xl font-bold mb-2">Text Decryption</h1>
<form action="{{ url_for('decrypt_text') }}" method="post" enctype="multipart/form-data">
{% if decrypted_text %}
<div class="mb-4">
<label for="file" class="block text-gray-700 font-bold mb-2 text-left">Decrypted text:</label>
<textarea rows=4 class="border rounded w-full py-2 px-3" readonly>{{ decrypted_text }}</textarea>
</div>
{% else %}
<div class="mb-4">
<label for="file" class="block text-gray-700 font-bold mb-2 text-left">Enter text to decrypt:</label>
<textarea rows="4" class="border rounded w-full py-2 px-3" name="en-text" required></textarea>
</div>
<div class="mb-4">
<label for="key" class="block text-gray-700 font-bold mb-2 text-left">Enter your key:</label>
<input type="text" class="border rounded w-full py-2 px-3" name="key">
</div>
<button type="submit" class="bg-blue-500 text-white font-bold py-2 px-4 mx-auto mt-0 rounded hover:bg-blue-700 transition-colors">Decrypt</button>
{% endif %}
</form>
{% if decrypted_text %}
<form method="POST" action="/clear_flask_vars">
<button type="submit" class="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded">Clear</button>
</form>
{% endif %}
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@2.10.2/dist/umd/popper.min.js"></script>
<!-- <script src="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.js"></script> -->
</body>
</html>