diff --git a/fonts/CipherFontA.ttf b/fonts/CipherFontA.ttf
new file mode 100644
index 0000000..4aa047f
Binary files /dev/null and b/fonts/CipherFontA.ttf differ
diff --git a/fonts/CipherFontB.ttf b/fonts/CipherFontB.ttf
new file mode 100644
index 0000000..9082b1b
Binary files /dev/null and b/fonts/CipherFontB.ttf differ
diff --git a/fonts/SECRETCODE.otf b/fonts/SECRETCODE.otf
new file mode 100644
index 0000000..36510b1
Binary files /dev/null and b/fonts/SECRETCODE.otf differ
diff --git a/fonts/Strange Runes.ttf b/fonts/Strange Runes.ttf
new file mode 100644
index 0000000..4a3d88c
Binary files /dev/null and b/fonts/Strange Runes.ttf differ
diff --git a/fonts/Theraprism.otf b/fonts/Theraprism.otf
new file mode 100644
index 0000000..e771eaf
Binary files /dev/null and b/fonts/Theraprism.otf differ
diff --git a/fonts/alchemic.otf b/fonts/alchemic.otf
new file mode 100644
index 0000000..ebef02e
Binary files /dev/null and b/fonts/alchemic.otf differ
diff --git a/fonts/journal3.otf b/fonts/journal3.otf
new file mode 100644
index 0000000..a33bf20
Binary files /dev/null and b/fonts/journal3.otf differ
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..28e11ff
--- /dev/null
+++ b/index.html
@@ -0,0 +1,39 @@
+
+
+
+ Bill Cipher
+
+
+
+
+
+
+
+
+
+ Bill Cipher
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..60c9b46
--- /dev/null
+++ b/script.js
@@ -0,0 +1,134 @@
+// Get references to various DOM elements
+const keyboard = document.getElementById('keyboard');
+const output = document.getElementById('output');
+const font_names = document.getElementById('font-name-tabs');
+const outputContainer = document.getElementById('output-container');
+// Define an array of colors for the keyboard keys
+const keyColors = [
+ "#00c3e6", "#00b500", "#9b0381", "#c2d2ed", "#fe2918", "#bc2f98", "#dddfd5", "#8b7b7c",
+ "#fee849", "#8f908b", "#160602", "#433f8e", "#ca662d", "#8dc30d", "#b5eefb", "#f7c0d3",
+ "#ffe9ac", "#bba6c5", "#fffdf5", "#fd2683", "#034a12", "#843807", "#fec79c", "#0098bf",
+ "#ff5703", "#ff9d2a"
+];
+
+// const colorize = () =>
+// {
+// // Apply colors to each key on the keyboard
+// const keys = document.querySelectorAll('.key');
+// for (let i = 0; i < keys.length; i++) {
+// keys[i].style.backgroundImage = `linear-gradient(to bottom, transparent 80%, ${keyColors[i]} 80%)`;
+// }
+// }
+
+const colorize = () => {
+ // Apply colors to each key on the keyboard
+ const keys = document.querySelectorAll('.key');
+ for (let i = 0; i < keys.length; i++) {
+ if (document.getElementById('Veranda').classList.contains('active')) {
+ keys[i].style.backgroundImage = `linear-gradient(to bottom, transparent 80%, ${keyColors[i]} 80%)`;
+ } else {
+ keys[i].style.backgroundImage = 'none';
+ }
+
+
+
+ }
+};
+// Define available fonts and set the default font
+const fonts = ['Veranda', 'Author', 'Bills_Symbols', 'SECRETCODE', 'Runes', 'Theraprism', 'Alchemic', 'Combined'];
+let currentFont = fonts[0];
+
+// Create font selection tabs dynamically based on the available fonts
+for (const font of fonts) {
+ const tab = document.createElement('button');
+ tab.className = 'tab';
+ tab.id = font;
+ tab.textContent = font;
+ if (font == "Veranda") {tab.textContent = "Color"; }
+ // Update the current font and apply it to the keyboard when a tab is clicked
+ tab.addEventListener('click', () => {
+ currentFont = font;
+ keyboard.style.fontFamily = font;
+ });
+
+ font_names.appendChild(tab);
+}
+
+
+// Set the initial active tab
+document.getElementById('Veranda').className = 'tab active';
+
+const tabs = document.querySelectorAll('.tab');
+
+// Add click event listeners to each tab to manage the active state
+tabs.forEach(tab => {
+ tab.addEventListener('click', () => {
+ // Remove the active class from all tabs
+ tabs.forEach(t => t.classList.remove('active'));
+
+ // Add the active class to the clicked tab
+ tab.classList.add('active');
+ colorize();
+ });
+});
+
+
+
+
+for (const letter of 'abcdefghijklmnopqrstuvwxyz') {
+ const key = document.createElement('div');
+ key.className = 'key';
+ key.textContent = letter.toUpperCase();
+
+ key.addEventListener('click', () => {
+ output.textContent += letter.toUpperCase();
+
+ const keys = Array.from(document.querySelectorAll('.key'));
+ const activeKeyColor = keyColors[keys.indexOf(key)];
+ console.log(activeKeyColor);
+ // outputContainer.innerHTML += `${letter.toUpperCase()}`;
+ if (currentFont === 'Veranda') {
+ outputContainer.innerHTML += `${letter.toUpperCase()}`;
+ } else {
+ outputContainer.innerHTML += `${letter.toUpperCase()}`;
+ }
+ });
+
+ keyboard.appendChild(key);
+}
+
+// Create the delete button
+const del = document.createElement('div');
+del.className = "key";
+del.id = "undo-button";
+del.textContent = "delete";
+keyboard.appendChild(del);
+
+// Add an event listener to the delete button to remove the last character
+const undoButton = document.querySelector('#undo-button');
+undoButton.addEventListener('click', () => {
+ output.textContent = output.textContent.slice(0, -1);
+ outputContainer.removeChild(outputContainer.lastElementChild);
+});
+
+// Create the spacebar button
+const space = document.createElement('div');
+space.className = "key";
+space.id = "spacebar";
+space.textContent = "space";
+keyboard.appendChild(space);
+
+// Add an event listener to the spacebar to add a space in the output
+document.getElementById("spacebar").addEventListener('click', () => {
+ output.textContent += " ";
+ outputContainer.innerHTML += ` `;
+});
+
+// Add an event listener to the clear output button to clear the output area
+const clearOutputButton = document.getElementById('clear-output');
+clearOutputButton.addEventListener('click', () => {
+ document.getElementById('output').textContent = '';
+ document.getElementById('output-container').textContent = '';
+});
+
+colorize();
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..74fb79e
--- /dev/null
+++ b/style.css
@@ -0,0 +1,193 @@
+@font-face { font-family: Author; src: url('fonts/CipherFontA.ttf'); }
+@font-face { font-family: Bills_Symbols; src: url('fonts/CipherFontB.ttf'); }
+@font-face { font-family: SECRETCODE; src: url('fonts/SECRETCODE.otf'); }
+@font-face { font-family: Runes; src: url('fonts/Strange Runes.ttf'); }
+@font-face { font-family: Theraprism; src: url('fonts/Theraprism.otf'); }
+@font-face { font-family: Alchemic; src: url('fonts/alchemic.otf'); }
+@font-face { font-family: Combined; src: url('fonts/journal3.otf'); }
+
+
+body {
+ /* font-family: 'Arial', 'Times New Roman', 'Verdana', local('CipherFontA'), local('fonts/CipherFontB'), local('SECRETCODE'), local('Strange Runes'), local('Theraprism'); */
+ display: flex;
+ flex-wrap: wrap;
+ flex-direction: column;
+ align-items: center;
+ color: #c9c6c6;
+ background-color: #222;
+ padding: 20px;
+ /* animation: crt-flicker 2s infinite; */
+}
+
+
+
+h1 {
+ font-size: 3rem;
+ text-align: center;
+ margin-bottom: 20px;
+}
+
+#keyboard {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: space-around;
+ align-items: stretch;
+ gap: 10px;
+ padding: 20px;
+ background-color: #333;
+ border-radius: 10px;
+ width: 30%;
+ /* min-width: ; */
+ /* height: 300px; */
+ margin: auto;
+}
+
+.key {
+ padding: 10px;
+ font-size: 2.5rem;
+ text-align: center;
+ background-color: #444;
+ /* background-image: linear-gradient(to bottom, transparent 70%, #00c3e6 70%); */
+ border-radius: 5px;
+ cursor: pointer;
+ transition: background-color 0.3s ease;
+width: 50px;
+user-select: none;
+-moz-user-select: none;
+-webkit-user-drag: none;
+-webkit-user-select: none;
+-ms-user-select: none;
+}
+.key:hover {
+ background-color: #555;
+}
+
+#output {
+ padding: 10px;
+ font-size: 1.5rem;
+ text-wrap: wrap;
+ overflow: scroll;
+ border: 1px solid #444;
+ border-radius: 5px;
+ margin-bottom: 20px;
+ background-color: #333;
+ max-width: 80%;
+ font-family: Verdana, Geneva, Tahoma, sans-serif !important;
+}
+
+#clear-output {
+ padding: 10px;
+ font-size: 2rem;
+ border: 1px solid #444;
+ border-radius: 5px;
+ cursor: pointer;
+ background-color: #444;
+ color: #fff;
+ transition: background-color 0.3s ease;
+}
+
+#clear-output:hover {
+ background-color: #555;
+}
+
+#font-name-tabs {
+ display: flex;
+ justify-content: center;
+ margin-bottom: 20px;
+ font-size: 2rem;
+ flex-wrap: wrap;
+}
+
+.tab {
+ padding: 5px 10px;
+ border: 1px solid #444;
+ border-radius: 5px;
+ cursor: pointer;
+ transition: background-color 0.3s ease;
+ font-size: 1.2rem;
+}
+
+.tab:hover {
+ background-color: #555;
+ color: white;
+}
+
+.active {
+ background-color: #444;
+}
+
+#undo-button{
+ font-family: Verdana, Geneva, Tahoma, sans-serif !important;
+ /* width: 100px; */
+ flex-grow: 1.2;
+ min-width: fit-content;
+}
+
+#spacebar{
+ /* display:flex;
+ justify-self: center;
+ margin-bottom: 20px; */
+ /* color: white; */
+ min-width: fit-content;
+ display: flex;
+ justify-content: center;
+ flex-grow: 2;
+ font-family: Verdana, Geneva, Tahoma, sans-serif !important;
+}
+
+.active {
+ background-color: #444;
+ font-weight: bold;
+ color: white;
+}
+
+#output-container {
+ /* text-wrap: wrap; */
+ padding: 10px;
+ font-size: 1.5rem;
+ max-width: 80%;
+ overflow: scroll;
+ border: 1px solid #444;
+ border-radius: 5px;
+ margin-bottom: 20px;
+ margin-top: 20px;
+ background-color: #333;
+ /* font-family: inherit; */
+}
+
+.Author{
+ font-family: Author;
+}
+.Bills_Symbols{
+ font-family: Bills_Symbols;
+}
+.SECRETCODE{
+ font-family: SECRETCODE;
+}
+.Runes{
+ font-family: Runes;
+}
+.Theraprism{
+ font-family: Theraprism;
+}
+.Alchemic{
+ font-family: Alchemic;
+}
+.Combined{
+ font-family: Combined;
+}
+.Veranda{
+ font-family: Verdana, Geneva, Tahoma, sans-serif;
+}
+
+@media screen and (max-width: 2000px) {
+ #keyboard {
+ /* max-width: 100%; */
+ min-width: 320px;
+ height: auto;
+ }
+
+ .key {
+ width: 30px;
+ }
+}
\ No newline at end of file