upload code
This commit is contained in:
parent
268b6a4bd5
commit
aa253392fa
BIN
fonts/CipherFontA.ttf
Normal file
BIN
fonts/CipherFontA.ttf
Normal file
Binary file not shown.
BIN
fonts/CipherFontB.ttf
Normal file
BIN
fonts/CipherFontB.ttf
Normal file
Binary file not shown.
BIN
fonts/SECRETCODE.otf
Normal file
BIN
fonts/SECRETCODE.otf
Normal file
Binary file not shown.
BIN
fonts/Strange Runes.ttf
Normal file
BIN
fonts/Strange Runes.ttf
Normal file
Binary file not shown.
BIN
fonts/Theraprism.otf
Normal file
BIN
fonts/Theraprism.otf
Normal file
Binary file not shown.
BIN
fonts/alchemic.otf
Normal file
BIN
fonts/alchemic.otf
Normal file
Binary file not shown.
BIN
fonts/journal3.otf
Normal file
BIN
fonts/journal3.otf
Normal file
Binary file not shown.
39
index.html
Normal file
39
index.html
Normal 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
134
script.js
Normal 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
193
style.css
Normal 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;
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
x
Reference in New Issue
Block a user