chris/bookofbill
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

upload code

Browse Source
This commit is contained in:
chris 2025-03-19 18:59:19 -04:00
parent 268b6a4bd5
commit aa253392fa
10 changed files with 366 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
fonts/CipherFontA.ttf Normal file
View File

Binary file not shown.

BIN
fonts/CipherFontB.ttf Normal file
View File

Binary file not shown.

BIN
fonts/SECRETCODE.otf Normal file
View File

Binary file not shown.

BIN
fonts/Strange Runes.ttf Normal file
View File

Binary file not shown.

BIN
fonts/Theraprism.otf Normal file
View File

Binary file not shown.

BIN
fonts/alchemic.otf Normal file
View File

Binary file not shown.

BIN
fonts/journal3.otf Normal file
View File

Binary file not shown.

39
index.html Normal file
View File

@ -0,0 +1,39 @@
<!DOCTYPE html>
<html>
<head>
<title>Bill Cipher</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<script defer data-domain="bookofbill.binarygnome.com" src="https://metric.chrisedwards.tech/js/script.js"></script>
</head>
<body>
</div>
<h1>Bill Cipher</h1>
<!-- Keyboard keys will be dynamically generated here -->
<div id="font-name-tabs">
<!-- Font name tabs -->
</div>
<!-- <div id="keyboard_container"> -->
<div id="keyboard">
<!-- Keyboard keys -->
<!-- <button class=" space">Space</button> -->
</div>
<!-- </div> -->
<!-- <button id="spacebar" class="key">space</button> -->
<div id="output-container"></div>
<div id="output"></div>
<button id="clear-output">Clear Output</button>
<script src="script.js"></script>
</body>
</html>

134
script.js Normal file
View File

@ -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 += `<span class="${currentFont}" style="background-image: linear-gradient(to bottom, transparent 90%, ${activeKeyColor} 90%)">${letter.toUpperCase()}</span>`;
if (currentFont === 'Veranda') {
outputContainer.innerHTML += `<span class="${currentFont}" style="background-image: linear-gradient(to bottom, transparent 90%, ${activeKeyColor} 90%);">${letter.toUpperCase()}</span>`;
} else {
outputContainer.innerHTML += `<span class="${currentFont}">${letter.toUpperCase()}</span>`;
}
});
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 += `<span class="${currentFont}"> </span>`;
});
// 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();

193
style.css Normal file
View File

@ -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;
}
}