tughra
Version:
The Tughra Library offers robust End-to-End Encryption (E2EE), ensuring that data remains private and secure from the point it leaves the sender to the moment it reaches the intended recipient. With E2EE, data is encrypted on the sender's device, transmit
1,270 lines (1,082 loc) • 298 kB
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>Tughra</title>
<meta name="theme-color">
<style>
a {
color: #007bff;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
.toc {
margin: 20px 0;
padding: 10px;
}
.toc a {
display: block;
margin: 5px 0;
}
.section {
margin: 20px 0;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
display: flex;
justify-content: center;
align-items: center;
}
.group-names {
display: flex;
overflow-x: auto;
white-space: nowrap;
margin-top: 0px !important;
scrollbar-width: none;
/* Hide scrollbar for Firefox */
}
.group-names::-webkit-scrollbar {
display: none;
/* Hide scrollbar for Chrome, Safari, Opera */
}
.group-name {
padding-right: 10px;
border: 1px solid #3263b3;
cursor: pointer;
transition: background-color 0.3s;
white-space: nowrap;
}
.character-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(30px, 1fr));
gap: 5px;
font-size: 18px;
text-align: center;
max-height: 155px;
/* Set a fixed height for the result */
overflow-y: auto;
scrollbar-width: none;
/* Hide scrollbar for Firefox */
margin-bottom: 20px;
border: 1px solid #3263b3;
border-radius: 5px;
padding: 10px;
}
.character-grid::-webkit-scrollbar {
display: none;
/* Hide scrollbar for Chrome, Safari, Opera */
}
.buttons::-webkit-scrollbar {
display: none;
/* Hide scrollbar for Chrome, Safari, Opera */
}
.character {
padding: 10px;
border: 1px solid #6f91c9;
background-color: #eaeff7;
cursor: pointer;
transition: background-color 0.3s;
border-radius: 2px;
}
.character:hover {
background-color: #3263b3;
color: #fff;
}
.container {
background-color: #fff;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
min-width: 400px;
max-width: 800px;
margin-top: 20px;
margin-bottom: 20px;
}
h1 {
text-align: center;
margin-bottom: 20px;
font-size: 24px;
}
h2 {
padding-top: 13px;
margin-bottom: 13px;
font-size: 20px;
}
strong {
padding-top: 7px;
padding-bottom: 7px;
}
.input-group,
.output-group {
margin-bottom: 15px;
}
label {
display: block;
margin-bottom: 5px;
}
textarea,
input[type="text"],
input[type="password"] {
width: 100%;
padding: 10px;
border: 0.05rem solid #3263b3;
border-radius: 5px;
font-size: 16px;
}
textarea {
height: 30vh;
}
.buttons {
display: flex;
justify-content: space-between;
border-radius: 5px;
border: 0.05rem solid #3263b3;
position: relative;
/* For positioning the tooltip */
overflow: auto;
/* Enables scrolling if content overflows */
max-width: 100%;
/* Optional: Restrict the container's maximum width */
}
button {
margin: 5px;
padding: 10px;
background-color: transparent;
color: #3263b3;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s, transform 0.2s;
}
.cycle-container {
display: flex;
align-items: center;
margin-bottom: 20px;
}
.cycle-btn {
padding: 10px 15px;
background-color: #3263b3;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 18px;
transition: background-color 0.3s, transform 0.2s;
}
.cycle-btn:hover {
background-color: transparent;
color: #3263b3;
border: 0.05rem solid #3263b3;
}
.cycle {
width: 100%;
padding: 10px;
border: 0.05rem solid #3263b3;
font-size: 16px;
text-align: center;
color: #3263b3;
border-radius: 5px;
}
.cycle-btn:active {
background-color: #1a3563;
}
button:hover {
background-color: #3263b3;
color: #fff;
}
.cycle:disabled {
color: #799ad4;
background-color: transparent;
cursor: not-allowed;
}
button:disabled {
color: #799ad4;
background-color: transparent;
cursor: not-allowed;
}
.input-wrapper {
display: flex;
flex-wrap: wrap;
/* Allow items to wrap into a new row */
min-width: 380px;
max-width: 800px;
margin-bottom: 10px;
align-items: center;
justify-content: start;
}
.input-item {
width: calc(100% / 6 - 5px);
/* Divide width for 6 items, subtract margin */
margin-right: 10px;
/* Space between input items */
margin-bottom: 10px;
/* Space below each item */
}
.input-container {
display: flex;
align-items: center;
/* Center align input and button */
}
.input-number:last-child {
margin-right: 0;
}
.input-item {
position: relative;
margin-right: 5px;
/* Position relative for absolute positioning of button */
}
.remove-button {
position: absolute;
top: 0px;
background-color:
color: red;
padding: 0px;
border: none;
cursor: pointer;
font-size: 18px;
}
.remove-button:hover {
background-color: transparent;
color: red;
/* Darker red on hover */
}
button:focus {
outline: none;
/* Remove outline */
}
.tooltip {
display: none;
position: absolute;
background-color: #333;
/* Dark background */
color: #fff;
/* White text */
padding: 5px 10px;
border-radius: 5px;
font-size: 12px;
white-space: nowrap;
/* Prevent text from wrapping */
z-index: 10;
/* Make sure tooltip is above other elements */
}
.show {
display: block;
/* Show the tooltip */
}
.content {
padding: 0 18px;
display: none;
/* Hidden by default */
overflow: hidden;
margin-bottom: 20px;
}
a {
color: #3263b3;
}
code {
color: #e63e3e;
}
.toast-container {
position: fixed;
top: 40px !important;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1001001;
display: flex;
flex-direction: column;
gap: 10px;
}
.light.toast-container {
background-color: transparent !important;
}
/* Toast style with sky blue background */
.toast {
margin-top: 20px;
min-width: 250px;
max-width: 550px;
background-color: #fff;
/* Sky blue */
color: #3263b3;
padding: 5px;
border-radius: 4px;
border: 1px solid #3263b3;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
display: flex;
justify-content: space-between;
align-items: center;
animation: slide-in 0.5s ease-out;
font-family: Arial, sans-serif;
}
/* Toast close button */
.toast button {
background: none;
border: none;
color: #3263b3;
font-size: 16px;
cursor: pointer;
margin-left: 10px;
}
/* Animation for the toast */
@keyframes slide-in {
from {
transform: translateY(100%);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
/* Animation for toast removal */
@keyframes slide-out {
from {
transform: translateY(0);
opacity: 1;
}
to {
transform: translateY(100%);
opacity: 0;
}
}
mark {
background-color: #3263b3;
color: #fff;
border-radius: 2px;
padding-right: 4px;
padding-left: 4px;
}
#spinner {
display: none;
/* Hidden by default */
border: 8px solid #f3f3f3;
/* Light grey */
border-top: 8px solid #3263b3;
/* Blue */
border-radius: 50%;
/* Circular shape */
width: 50px;
/* Width of the spinner */
height: 50px;
/* Height of the spinner */
animation: spin 1s linear infinite;
/* Animation for spinning */
position: relative;
/* Position relative to its container */
pointer-events: none;
/* Prevent mouse events on the spinner */
z-index: 1110001;
}
.blur-background {
filter: blur(1px);
/* Adjust the blur strength as needed */
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
/* Progress bar container */
#progressBarContainer {
width: 100%;
background-color: #e0e0e0;
border-radius: 5px;
margin: 10px 0;
text-align: center;
align-items: center;
}
/* Progress bar */
#progressBar {
height: 100%;
width: 0%;
background-color: #3263b3;
text-align: center;
line-height: 20px;
color: #fff;
border-radius: 5px;
transition: width 0.4s ease;
}
.navigation {
display: flex;
align-items: center;
justify-content: center;
z-index: 1;
background-color: transparent;
border: 1px solid #3263b3;
padding: 0.125em 0;
border-radius: 0.5em;
width: 100%;
margin-bottom: 20px;
}
.action-btn {
background-color: transparent;
border: 0;
color: #3263b3 !important;
font-size: 0.875rem;
width: 2em;
cursor: pointer;
margin: 0 0.5em;
padding: 0.5em 0.25em;
}
.action-btn.action-btn-big {
color: #3263b3 !important;
font-size: 0.95rem;
}
.action-btn:hover {
outline: 0;
color: #7ea3de !important;
background-color: transparent;
}
.progress-container {
background: #eee;
border-radius: 0.25em;
cursor: pointer;
margin: 0.5em;
height: 0.25em;
width: 95%;
}
.progress {
background-color: #3263b3;
border-radius: 0.25em;
height: 100%;
width: 0%;
transition: width 0.1s linear;
}
.player_slider {
width: 0.75rem;
height: 3rem;
}
.time {
color: #3263b3;
font-size: 0.9rem;
padding-right: 0.25em;
}
#video-container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
border-radius: 8px;
width: 100%;
margin: 0 auto;
border: 1px solid #3263b3;
margin-bottom: 20px;
}
.video_player {
width: 100%;
height: 360px;
border-radius: 8px 8px 0 0;
}
/* Controls navigation-video bar */
.navigation-video {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: 10px 0;
}
.action-btn-video {
background-color: transparent;
border: 0;
color: #3263b3 !important;
font-size: 0.875rem;
width: 2em;
cursor: pointer;
margin: 0 0.5em;
padding: 0.5em 0.25em;
}
.action-btn-video.action-btn-big-video {
color: #3263b3 !important;
font-size: 0.95rem;
}
.action-btn-video:hover {
outline: 0;
color: #7ea3de !important;
background-color: transparent;
}
/* progress-video bar container */
.progress-video-container-video {
flex-grow: 1;
height: 5px;
background-color: #eee;
margin: 0 15px;
border-radius: 5px;
position: relative;
cursor: pointer;
}
.progress-video {
height: 100%;
background-color: #3263b3;
width: 0%;
border-radius: 5px;
transition: width 0.1s ease;
}
/* timevideo display (current timevideo and duration) */
.timevideo {
display: flex;
align-items: center;
color: #fff;
font-size: 14px;
}
.timevideo span {
margin-left: 5px;
margin-right: 5px;
}
#removevideo:hover {
color: #b00711;
}
#thumbnail {
margin-top: 15px;
border-radius: 8px;
}
#togglerecordBtn:hover,
#uploadTextBtn:hover,
#extractQRCode:hover,
#copy:hover,
#paste:hover,
#makeCode:hover,
#downloadTextBtn:hover {
background: none;
/* Removes the background */
outline: none;
/* Removes the outline */
color: #7ea3de;
}
/* Modal container */
.modal {
display: none;
/* Hidden by default */
position: fixed;
z-index: 110000;
/* On top */
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
/* Black background with opacity */
justify-content: center;
align-items: center;
}
/* Modal content */
.modal-content {
background-color: #fff;
padding: 20px;
border-radius: 8px;
width: 300px;
text-align: center;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
/* Buttons */
.modal-buttons {
margin-top: 20px;
}
#continueBtn {
background-color: #3263b3;
color: #fff;
}
#closeBtn {
color: #3263b3;
border: 1px solid #3263b3;
}
/* Fullscreen modalrecordVideo styling */
#modalrecordVideo {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.9);
display: none;
justify-content: center;
align-items: center;
z-index: 90099;
}
/* Fit video to cover the modalrecordVideo */
#previewVideo,
#recordedvideo {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
background-color: black;
}
/* Controls when recording */
.record-controls,
.video-record-actions {
position: fixed;
bottom: 20px;
width: 100%;
display: flex;
justify-content: center;
gap: 10px;
}
.record-controls button,
.video-record-actions button {
padding: 10px 15px;
font-size: 16px;
cursor: pointer;
}
/* Hide recordedvideo video controls initially */
.video-record-actions {
display: none;
}
.recordbutton {
margin: 5px;
background-color: transparent;
outline: none;
border: none;
cursor: pointer;
transition: background-color 0.3s, transform 0.2s;
}
.recordbutton:hover {
background-color: transparent;
}
.recordbutton:disabled {
background-color: transparent;
color: #cccccc;
cursor: not-allowed;
}
#photoContainer {
position: fixed;
top: 10px;
left: 10px;
display: none;
border-radius: 8px;
overflow: hidden;
width: 90vw;
/* Adjust width for smaller screens */
max-width: 400px;
/* Limit width on larger screens */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
background-color: #fff;
}
/* Ensure the image fills the container */
#snapshot {
width: 100%;
height: auto;
display: block;
object-fit: cover;
z-index: 1;
/* Image stays underneath the buttons */
}
/* Float buttons over the image */
.photo-buttons {
display: flex;
justify-content: space-between;
padding: 10px;
position: absolute;
bottom: 0;
/* Align buttons at the bottom of the image */
width: 100%;
/* Ensure buttons stretch across the image */
z-index: 2;
/* Keep buttons above the image */
}
/* Style buttons */
.photo-buttons button {
flex: 1;
/* Ensure equal width */
margin: 0 5px;
/* Add some space between buttons */
}
/* Adjustments for smaller screens (mobile) */
@media (max-width: 600px) {
#photoContainer {
width: 50vw;
/* Use almost full width on small screens */
}
.photo-buttons button {
padding: 8px;
/* Slightly smaller buttons on mobile */
font-size: 12px;
/* Smaller font size */
}
}
.loading {
cursor: wait;
/* Change cursor to 'wait' when processing */
}
.setting-modal-overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 1001000;
}
.setting-modal {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
min-width: 400px;
max-height: 80vh;
/* Set maximum height */
overflow-y: auto;
/* Enable vertical scrolling */
}
.setting-modal h2 {
margin-top: 0;
text-align: center;
}
/* Close Button */
.setting-close-btn {
border: 1px solid #3263b3;
color: #3263b3;
padding: 8px 12px;
border-radius: 6px;
cursor: pointer;
}
input.empty-input {
border: 2px solid red !important;
/* Change border color to red */
background-color: #ffe6e6 !important;
/* Light red background */
}
label {
display: block;
margin-bottom: 5px;
color: #3263b3;
}
select {
width: 100%;
padding: 10px;
border: 1px solid #3263b3;
border-radius: 4px;
box-sizing: border-box;
transition: border-color 0.3s;
}
select:focus {
border-color: #ccc;
}
.light {
background-color: #ffffff !important;
color: #15202b !important;
}
.dark {
background-color: #15202b !important;
color: #ffffff !important;
}
body.light {
background-color: #f4f4f4 !important;
}
/* Dark Mode */
body.dark {
background-color: #192734 !important;
}
input.light {
background-color: #f4f4f4 !important;
}
/* Dark Mode */
input.dark {
background-color: #253747 !important;
}
textarea.light {
background-color: #f4f4f4 !important;
}
/* Dark Mode */
textarea.dark {
background-color: #253747 !important;
}
.checkbox-container {
display: flex;
flex-direction: column;
gap: 10px;
max-height: 28vh;
/* Set maximum height */
overflow-y: auto;
/* Enable vertical scrolling */
}
.checkbox-item {
display: flex;
align-items: center;
margin-bottom: 20px;
}
.switch {
position: relative;
display: inline-block;
width: 34px;
height: 20px;
margin-right: 10px;
margin-left: 10px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
transition: .4s;
border-radius: 20px;
}
.slider:before {
position: absolute;
content: "";
height: 14px;
width: 14px;
left: 3px;
bottom: 3px;
background-color: white;
transition: .4s;
border-radius: 50%;
}
input:checked+.slider {
background-color: #3263b3;
}
input:checked+.slider:before {
transform: translateX(14px);
}
/* Style for baseOutput div */
#baseOutput {
padding: 10px;
/* Add some padding */
margin-top: 20px;
/* Space above the div */
}
/* Style for the paragraph inside the baseOutput */
#baseOutput p {
font-size: 14px;
/* Larger text for heading */
font-weight: bold;
/* Make it bold */
margin-bottom: 10px;
/* Space below the text */
}
/* Style for the select dropdown */
#alphabetSelect {
width: 100%;
/* Full width dropdown */
padding: 10px;
/* Padding inside the dropdown */
font-size: 16px;
/* Larger text */
border: 1px solid #ccc;
/* Light grey border */
border-radius: 5px;
/* Slightly rounded corners */
background-color: #fff;
/* White background */
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
/* Inner shadow */
outline: none;
/* Remove outline */
appearance: none;
/* Remove default styling */
}
/* Add a little arrow for dropdown */
#alphabetSelect::-ms-expand {
display: none;
/* For Internet Explorer */
}
/* Add a custom icon for dropdown */
#alphabetSelect {
background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yMy4yNDUgNGwtMTEuMjQ1IDE0LjM3NC0xMS4yMTktMTQuMzc0LS43ODEuNjE5IDEyIDE1LjM4MSAxMi0xNS4zOTEtLjc1NS0uNjA5eiIvPjwvc3ZnPg==');
background-repeat: no-repeat;
background-position: right 10px center;
background-size: 12px;
}
html[dir="rtl"] #alphabetSelect {
background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yMy4yNDUgNGwtMTEuMjQ1IDE0LjM3NC0xMS4yMTktMTQuMzc0LS43ODEuNjE5IDEyIDE1LjM4MSAxMi0xNS4zOTEtLjc1NS0uNjA5eiIvPjwvc3ZnPg==');
background-repeat: no-repeat;
background-position: left 10px center;
background-size: 12px;
}
.hidden {
display: none;
}
</style>
</head>
<body>
<div class="container " id="container">
<div style="display: flex; justify-content: space-between;">
<button style="right: 0;" id="openSettingModalBtn">
<svg width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linejoin="round" stroke-width="2" d="M7.58209 8.96025 9.8136 11.1917l-1.61782 1.6178c-1.08305-.1811-2.23623.1454-3.07364.9828-1.1208 1.1208-1.32697 2.8069-.62368 4.1363.14842.2806.42122.474.73509.5213.06726.0101.1347.0133.20136.0098-.00351.0666-.00036.1341.00977.2013.04724.3139.24069.5867.52125.7351 1.32944.7033 3.01552.4971 4.13627-.6237.8375-.8374 1.1639-1.9906.9829-3.0736l4.8107-4.8108c1.0831.1811 2.2363-.1454 3.0737-.9828 1.1208-1.1208 1.3269-2.80688.6237-4.13632-.1485-.28056-.4213-.474-.7351-.52125-.0673-.01012-.1347-.01327-.2014-.00977.0035-.06666.0004-.13409-.0098-.20136-.0472-.31386-.2406-.58666-.5212-.73508-1.3294-.70329-3.0155-.49713-4.1363.62367-.8374.83741-1.1639 1.9906-.9828 3.07365l-1.7788 1.77875-2.23152-2.23148-1.41419 1.41424Zm1.31056-3.1394c-.04235-.32684-.24303-.61183-.53647-.76186l-1.98183-1.0133c-.38619-.19746-.85564-.12345-1.16234.18326l-.86321.8632c-.3067.3067-.38072.77616-.18326 1.16235l1.0133 1.98182c.15004.29345.43503.49412.76187.53647l1.1127.14418c.3076.03985.61628-.06528.8356-.28461l.86321-.8632c.21932-.21932.32446-.52801.2846-.83561l-.14417-1.1127ZM19.4448 16.4052l-3.1186-3.1187c-.7811-.781-2.0474-.781-2.8285 0l-.1719.172c-.7811.781-.7811 2.0474 0 2.8284l3.1186 3.1187c.7811.781 2.0474.781 2.8285 0l.1719-.172c.7811-.781.7811-2.0474 0-2.8284Z" />
</svg>
</button>
<button style="left: 0;" id="theme-toggle"><svg width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 21a9 9 0 0 1-.5-17.986V3c-.354.966-.5 1.911-.5 3a9 9 0 0 0 9 9c.239 0 .254.018.488 0A9.004 9.004 0 0 1 12 21Z" />
</svg>
</button>
</div>
<h1 style="padding: 20px; font-size: 55px; color: #3263b3; font-family: 'Times New Roman', Times, serif;">Tughra</h1>
<div id="progressBarContainer">
<div id="progressBar"></div>
</div>
<div id="typewriter"></div>
<div id="estimatedTime" style="text-align: center; color: #3263b3;"></div><br>
<div id="containerMagic">
<div class="input-group" style="position: relative;">
<button onclick="pasteText()" id="paste" data-title="Paste">
<svg aria-hidden="true" width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 20H5a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1h2.429M7 8h3M8 8V4h4v2m4 0V5h-4m3 4v3a1 1 0 0 1-1 1h-3m9-3v9a1 1 0 0 1-1 1h-7a1 1 0 0 1-1-1v-6.397a1 1 0 0 1 .27-.683l2.434-2.603a1 1 0 0 1 .73-.317H19a1 1 0 0 1 1 1Z" />
</svg>
</button>
<button id="openmodalrecordVideoBtnrecordVideo" style="display: block;"><svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M7.5 4.586A2 2 0 0 1 8.914 4h6.172a2 2 0 0 1 1.414.586L17.914 6H19a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h1.086L7.5 4.586ZM10 12a2 2 0 1 1 4 0 2 2 0 0 1-4 0Zm2-4a4 4 0 1 0 0 8 4 4 0 0 0 0-8Z" clip-rule="evenodd" />
</svg>
</button>
<textarea id="inputText" style="resize: none;" placeholder="Type text here"></textarea>
<button id="togglerecordBtn"><svg aria-hidden="true" width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9v3a5.006 5.006 0 0 1-5 5h-4a5.006 5.006 0 0 1-5-5V9m7 9v3m-3 0h6M11 3h2a3 3 0 0 1 3 3v5a3 3 0 0 1-3 3h-2a3 3 0 0 1-3-3V6a3 3 0 0 1 3-3Z" />
</svg>
</button>
<button id="uploadTextBtn" data-title="Upload"><input type="file" hidden id="fileUpload" />
<svg width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v9m-5 0H5a1 1 0 0 0-1 1v4a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-4a1 1 0 0 0-1-1h-2M8 9l4-5 4 5m1 8h.01" />
</svg>
</button>
<button id="extractQRCode" data-title="Upload QR">
<svg width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linejoin="round" stroke-width="2" d="M4 4h6v6H4V4Zm10 10h6v6h-6v-6Zm0-10h6v6h-6V4Zm-4 10h.01v.01H10V14Zm0 4h.01v.01H10V18Zm-3 2h.01v.01H7V20Zm0-4h.01v.01H7V16Zm-3 2h.01v.01H4V18Zm0-4h.01v.01H4V14Z" />
<path stroke="currentColor" stroke-linejoin="round" stroke-width="2" d="M7 7h.01v.01H7V7Zm10 10h.01v.01H17V17Z" />
</svg>
</button>
<div id="charCount"></div>
<input type="file" id="QRCode" hidden>
</div>
<div class="input-group-container" id="encryptionArrayContainer">
<div class="input-wrapper" id="input-wrapper">
<div class="input-item">
<div class="input-container">
<input type="text" class="input-number" placeholder="" />
<button class="remove-button">×</button>
</div>
</div>
<div class="input-item">
<div class="input-container">
<input type="text" class="input-number" placeholder="" />
<button class="remove-button">×</button>
</div>
</div>
<div class="input-item">
<div class="input-container">
<input type="text" class="input-number" placeholder="" />
<button class="remove-button">×</button>
</div>
</div>
<div class="input-item">
<div class="input-container">
<input type="text" class="input-number" placeholder="" />
<button class="remove-button">×</button>
</div>
</div>
<div class="input-item">
<div class="input-container">
<input type="text" class="input-number" placeholder="" />
<button class="remove-button">×</button>
</div>
</div>
<div class="input-item">
<div class="input-container">
<input type="text" class="input-number" placeholder="" />
<button class="remove-button">×</button>
</div>
</div>
</div>
<div class="cycle-container">
<button id="copyFrequency" class="cycle-btn" onclick="copyfrequency()" data-title="Copy Frequency">
<svg aria-hidden="true" width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linejoin="round" stroke-width="2" d="M9 8v3a1 1 0 0 1-1 1H5m11 4h2a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1h-7a1 1 0 0 0-1 1v1m4 3v10a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1v-7.13a1 1 0 0 1 .24-.65L7.7 8.35A1 1 0 0 1 8.46 8H13a1 1 0 0 1 1 1Z" />
</svg>
</button>
<button id="decreaseCycle" class="cycle-btn">-</button>
<input type="number" id="cycleCount" class="cycle" value="10" min="1">
<button id="increaseCycle" class="cycle-btn">+</button>
<button id="pasteFrequency" class="cycle-btn" onclick="pastefrequency()" data-title="Paste Frequency">
<svg aria-hidden="true" width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 20H5a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1h2.429M7 8h3M8 8V4h4v2m4 0V5h-4m3 4v3a1 1 0 0 1-1 1h-3m9-3v9a1 1 0 0 1-1 1h-7a1 1 0 0 1-1-1v-6.397a1 1 0 0 1 .27-.683l2.434-2.603a1 1 0 0 1 .73-.317H19a1 1 0 0 1 1 1Z" />
</svg>
</button>
</div>
<div class="buttons">
<button id="generateEncryptionArray" onclick="generateEncryptionArray()" data-title="Generate Encryption Array">
<svg aria-hidden="true" width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16.872 9.687 20 6.56 17.44 4 4 17.44 6.56 20 16.873 9.687Zm0 0-2.56-2.56M6 7v2m0 0v2m0-2H4m2 0h2m7 7v2m0 0v2m0-2h-2m2 0h2M8 4h.01v.01H8V4Zm2 2h.01v.01H10V6Zm2-2h.01v.01H12V4Zm8 8h.01v.01H20V12Zm-2 2h.01v.01H18V14Zm2 2h.01v.01H20V16Z" />
</svg>
</button>
<button id="encryptText" onclick="encryptText()" data-title="Encrypt Text">
<svg aria-hidden="true" width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 14v3m-3-6V7a3 3 0 1 1 6 0v4m-8 0h10a1 1 0 0 1 1 1v7a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1v-7a1 1 0 0 1 1-1Z" />
</svg>
</button>
<button id="decryptText" onclick="decryptText()" data-title="Decrypt Text">
<svg aria-hidden="true" width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14v3m4-6V7a3 3 0 1 1 6 0v4M5 11h10a1 1 0 0 1 1 1v7a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-7a1 1 0 0 1 1-1Z" />
</svg>
</button>
<button id="toggleChars" data-title="Show Charcters">
<svg viewBox="0 0 24 24" width="24" height="24" fill="currentColor">
<path d="M20 2a2 2 0 0 0-2 2v2h-2v2h-2v2h-2v2H7v2H5v2H3v4h2v-2h2v-2h2v-2h4v-4h2v-2h2v-2h2v-2h2V4a2 2 0 0 0-2-2zm-7 12h-2v2h2v-2zm2-4h-2v2h2v-2zm2-4h-2v2h2V6z " />
</svg>
</button>
<button id="addNumberInput" onclick="addNumberInput()" data-title="Add Number Input">
<svg aria-hidden="true" width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 7.757v8.486M7.757 12h8.486M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
</svg>
</button>
<button id="copyNumbers" onclick="copyNumbers()" data-title="Copy Numbers">
<svg aria-hidden="true" width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linejoin="round" stroke-width="2" d="M9 8v3a1 1 0 0 1-1 1H5m11 4h2a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1h-7a1 1 0 0 0-1 1v1m4 3v10a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1v-7.13a1 1 0 0 1 .24-.65L7.7 8.35A1 1 0 0 1 8.46 8H13a1 1 0 0 1 1 1Z" />
</svg>
</button>
<button id="pasteNumbers" onclick="pasteNumbers()" data-title="Paste Numbers">
<svg aria-hidden="true" width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 20H5a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1h2.429M7 8h3M8 8V4h4v2m4 0V5h-4m3 4v3a1 1 0 0 1-1 1h-3m9-3v9a1 1 0 0 1-1 1h-7a1 1 0 0 1-1-1v-6.397a1 1 0 0 1 .27-.683l2.434-2.603a1 1 0 0 1 .73-.317H19a1 1 0 0 1 1 1Z" />
</svg>
</button>
<button id="swapText" onclick="swapText()" data-title="Swap Text">
<svg aria-hidden="true" width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 20V7m0 13-4-4m4 4 4-4m4-12v13m0-13 4 4m-4-4-4 4" />
</svg>
</button>
<button id="clearAll" data-title="Clear All Inputs">
<svg aria-hidden="true" width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.651 7.65a7.131 7.131 0 0 0-12.68 3.15M18.001 4v4h-4m-7.652 8.35a7.13 7.13 0 0 0 12.68-3.15M6 20v-4h4" />
</svg>
</button>
</div>
<div class="tooltip" id="tooltip"></div>
</div>
<br>
<div id="characterContainer" style="border-radius: 15px 15px 0 0; border: 1px solid #3263b3; background-color: #fff; z-index: 10000; padding: 10px; max-height: 305px; min-width: 100%; display: none; bottom:0; right: 0; left:0; position: fixed;">
<div style="display: flex; align-items: center; margin-top: 10px; gap: 10px;">
<input type="text" id="searchInput" style="flex: 1; padding-bottom: 0px; margin-bottom: 0px !important; height: 35px;" placeholder="Search groups..." oninput="searchGroups()" />
<button onclick="clearLastNonEmptyInputNumberValue()"><svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14M5 12l4-4m-4 4 4 4" />
</svg>
</button>
<button style="height: 35px; width: 10%;" onclick="toggleChars()">Close</button>
</div>
<div class="group-names" id="groupNames"></div>
<div class="character-grid" id="characterGrid" style=" margin-bottom: 10px;"></div>
</div>
<div id="music-container" style="display: none;">
<audio preload="metadata" id="savebtnsound" src="data:audio/mpeg;base64,//vQZAAAByRux8Ux4AJuL8cwoDQAJnITU/mcgAE8w+E/AqAAQAJQIF7/sEgSBIUFcAQAACAHBIPHLr3lKZu/vh4r1ezx9/w1eaBoGgaBoHQhiGKBD0PQ9DznNM61Ht+/fv1er0PV6vVjynvf+7x48pq974hv4+6MCsQxDDTNND1fPAViGKBD0PNM0zTQ9XsavQxDFZEhq85y3j1hIA1AuBCCcFwNBQVVjJKnzTNM0zTNMnBODQUESGxq9Xsjx5E1e8iGD1kLOtzgJw5C2E4FzHrJ2dajV7+99ZhsavV7Pt4n0PV7PuA8VisV7PHw8eRJU+TgnBoHQoGSJT/3ve94avQxDFZE1HDwD//////////////////////v/dBBDUgggmmmmmmmmmgggggggggmmmmmmmmmggggggYFwuF8vl8vl8vl8vkuPQeg9BhBhBhBhByEobmZfHuOMYclyoJ4AL4CLAo4XsYce49x7kuShcLhcLhcLho0MTEDKKoNkDGFA4EAIBAQBch7AcAzQlWLxLndxFAxxU0QQ22F+wSUcCgkqwmD4cBy4XBLkShtohKXzfBAAsvQNHhuSS2H6Juk6uwqBLqpGZVH0Zw0yKvMuhh4ZQAVYODGioyJBgAm/H4MfjkpBz5a9kS9HEsmGUFSk9k215L97GLnaaUS+/Yp5lNdeCsCrC0qAAt0MqALcxh8+9s7x3leL8LzXurupYiEOQ2IHzkGEsjBQa8RAs0mQwCzn2xVz7/fttNafSPeuxriQCw+Tns4MqcJjYOosPJlkTITBzB1hjcbZbeWu3e65WwuUmOuYuo/9+/hhvt6MY5yO4pwkCyR+n+h+27LnLTkbG1sKQQlfzff///////////////4pGLNPX///////////////12yFYV2rUADgDgEADgDgHAwGAwGAoEXl+fod53+bnf+bO/9Nf/9NdP//XOqb///OOmmzjpv////6Zud/////+VEMPQVCG///+oU4HgXf///yhCIUR1VMgBAQAAAALqpDD8daJlkCTL/l8nYSdo3TKwgiAw4/higsQUoC4RaUFxBzmRRsUEsych/IYmaYxDA0PIx4IwyMCimuy2P2Iadef/70mQkgAjHdVMma0AAeS2mCsDQACeFfU/5zQAAAAA0gwAAAGkRZrAMBABOBmMlnJI6Kpcasu+uIDxrHZRXEQdf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