Skip to content

Commit

Permalink
Update footer and some CSS
Browse files Browse the repository at this point in the history
  • Loading branch information
@NhanAZ
NhanAZ committed Jul 15, 2024
1 parent d8c2a63 commit 9d86535
Show file tree
Hide file tree
Showing 3 changed files with 140 additions and 115 deletions.
34 changes: 27 additions & 7 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,9 @@
<title>Glyph Tools</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link href="styles.css" rel="stylesheet">

</head>

<body>
Expand Down Expand Up @@ -60,7 +62,8 @@ <h2 class="h5 mb-0">Hex ↔ Emoji Converter</h2>
<div class="card-body">
<p class="card-text">Convert between hexadecimal values and emojis/symbols.</p>
<div class="mb-3">
<button id="conversionModeButton" class="btn btn-outline-primary w-100">
<button id="conversionModeButton"
class="btn btn-outline-primary w-100 conversion-mode-text">
Hex to Emoji
</button>
</div>
Expand Down Expand Up @@ -97,12 +100,29 @@ <h2 class="h5 mb-0">Generated Glyph</h2>
</div>
</div>

<footer class="mt-5 text-center">
<p class="text-muted">
<a href="https://github.com/NhanAZ/glyph" target="_blank" class="text-decoration-none">
<i class="fab fa-github me-2"></i>Contribute on GitHub
</a>
</p>
<footer class="container mt-5 mb-3">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="d-flex justify-content-center flex-wrap gap-3">
<a href="https://github.com/NhanAZ/glyph" class="text-decoration-none text-muted"
target="_blank" rel="noopener noreferrer">
<i class="fab fa-github me-2"></i>Contribute on GitHub
</a>
<a href="https://wiki.bedrock.dev/concepts/emojis.html" class="text-decoration-none text-muted"
target="_blank" rel="noopener noreferrer">
<i class="fas fa-book me-2"></i>Emojis & Symbols Docs
</a>
<a href="https://discord.gg/j2X83ujT6c" class="text-decoration-none text-muted" target="_blank"
rel="noopener noreferrer">
<i class="fab fa-discord me-2"></i>Join our Discord
</a>
<a href="https://github.com/NhanAZ" class="text-decoration-none text-muted" target="_blank"
rel="noopener noreferrer">
<i class="fas fa-user me-2"></i>Author's GitHub Profile
</a>
</div>
</div>
</div>
</footer>
</div>

Expand Down
127 changes: 65 additions & 62 deletions script.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,22 @@
const GRID = 16;
let isHexToEmoji = true;

// Utility functions
function showCopyNotification(element) {
const notification = element.querySelector('.copy-notification');
notification.style.opacity = '1';
setTimeout(() => {
notification.style.opacity = '0';
}, 1000);
}

function updateCopyButtonState() {
const output = document.getElementById('converterOutput');
const copyButton = document.getElementById('copyButton');
copyButton.disabled = output.value.trim() === '';
}

// Glyph-related functions
function Glyph(glyph = "E0") {
const filename = `glyph_${glyph}`;
const startChar = parseInt(filename.split("_").pop() + "00", 16);
Expand Down Expand Up @@ -30,70 +47,14 @@ function Glyph(glyph = "E0") {
});
}

function showCopyNotification(element) {
const notification = element.querySelector('.copy-notification');
notification.style.opacity = '1';
setTimeout(() => {
notification.style.opacity = '0';
}, 1000);
}

function initializeGlyph() {
const glyphOutput = document.getElementById('glyph-output');
if (glyphOutput.innerHTML.trim() === '') {
Glyph("E0");
}
}

window.onload = () => {
initializeGlyph();
};

document.getElementById('glyph-input').addEventListener('input', function () {
const glyphInput = this.value.trim();
const glyphSuccessMsg = document.getElementById('glyphSuccessMsg');
const glyphErrorMsg = document.getElementById('glyphErrorMsg');

if (/^[A-Fa-f0-9]{1,2}$/.test(glyphInput)) {
Glyph(glyphInput || "E0");
glyphSuccessMsg.textContent = 'Glyph generated successfully!';
glyphSuccessMsg.classList.remove('d-none');
glyphErrorMsg.classList.add('d-none');
} else {
glyphErrorMsg.textContent = 'Please enter a valid hex value (1-2 hex digits).';
glyphErrorMsg.classList.remove('d-none');
glyphSuccessMsg.classList.add('d-none');
}
});

let isHexToEmoji = true;

document.getElementById('conversionModeButton').addEventListener('click', function () {
isHexToEmoji = !isHexToEmoji;
this.textContent = isHexToEmoji ? "Hex to Emoji" : "Emoji to Hex";
document.getElementById('inputPrefix').style.display = isHexToEmoji ? "inline-block" : "none";
document.getElementById('converterInput').placeholder = isHexToEmoji ? "Enter hex value" : "Enter emoji/symbol";
document.getElementById('converterOutput').value = '';
updateCopyButtonState();
});

function convert() {
const input = document.getElementById('converterInput').value.trim();
const errorMsg = document.getElementById('errorMsg');
const successMsg = document.getElementById('successMsg');
const output = document.getElementById('converterOutput');
errorMsg.classList.add('d-none');
successMsg.classList.add('d-none');
output.value = '';

if (isHexToEmoji) {
convertHexToEmoji(input);
} else {
convertEmojiToHex(input);
}
updateCopyButtonState();
}

// Converter functions
function convertHexToEmoji(input) {
if (/^[0-9A-Fa-f]{1,6}$/.test(input)) {
try {
Expand Down Expand Up @@ -123,6 +84,23 @@ function convertEmojiToHex(input) {
}
}

function convert() {
const input = document.getElementById('converterInput').value.trim();
const errorMsg = document.getElementById('errorMsg');
const successMsg = document.getElementById('successMsg');
const output = document.getElementById('converterOutput');
errorMsg.classList.add('d-none');
successMsg.classList.add('d-none');
output.value = '';

if (isHexToEmoji) {
convertHexToEmoji(input);
} else {
convertEmojiToHex(input);
}
updateCopyButtonState();
}

function copyOutput() {
const output = document.getElementById('converterOutput');
const copyButton = document.getElementById('copyButton');
Expand All @@ -143,11 +121,36 @@ function copyOutput() {
});
}

function updateCopyButtonState() {
const output = document.getElementById('converterOutput');
const copyButton = document.getElementById('copyButton');
copyButton.disabled = output.value.trim() === '';
}
// Event listeners
window.onload = () => {
initializeGlyph();
};

document.getElementById('glyph-input').addEventListener('input', function () {
const glyphInput = this.value.trim();
const glyphSuccessMsg = document.getElementById('glyphSuccessMsg');
const glyphErrorMsg = document.getElementById('glyphErrorMsg');

if (/^[A-Fa-f0-9]{1,2}$/.test(glyphInput)) {
Glyph(glyphInput || "E0");
glyphSuccessMsg.textContent = 'Glyph generated successfully!';
glyphSuccessMsg.classList.remove('d-none');
glyphErrorMsg.classList.add('d-none');
} else {
glyphErrorMsg.textContent = 'Please enter a valid hex value (1-2 hex digits).';
glyphErrorMsg.classList.remove('d-none');
glyphSuccessMsg.classList.add('d-none');
}
});

document.getElementById('conversionModeButton').addEventListener('click', function () {
isHexToEmoji = !isHexToEmoji;
this.textContent = isHexToEmoji ? "Hex to Emoji" : "Emoji to Hex";
document.getElementById('inputPrefix').style.display = isHexToEmoji ? "inline-block" : "none";
document.getElementById('converterInput').placeholder = isHexToEmoji ? "Enter hex value" : "Enter emoji/symbol";
document.getElementById('converterOutput').value = '';
updateCopyButtonState();
});

document.getElementById('convertButton').addEventListener('click', convert);
document.getElementById('copyButton').addEventListener('click', copyOutput);
Expand Down
94 changes: 48 additions & 46 deletions styles.css
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
/* Base styles */
body {
background-color: #f8f9fa;
}
Expand All @@ -6,6 +7,7 @@ body {
max-width: 1200px;
}

/* Card styles */
.card {
border: none;
border-radius: 15px;
Expand All @@ -22,6 +24,7 @@ body {
border-bottom: none;
}

/* Button styles */
.btn-primary {
background-color: #4a89dc;
border-color: #4a89dc;
Expand All @@ -42,6 +45,11 @@ body {
color: white;
}

#conversionModeButton {
transition: all 0.3s ease;
}

/* Glyph output styles */
#glyph-output {
display: grid;
grid-template-columns: repeat(16, minmax(30px, 1fr));
Expand Down Expand Up @@ -72,6 +80,7 @@ body {
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

/* Tooltip styles */
.tooltip {
position: absolute;
bottom: 100%;
Expand All @@ -93,6 +102,7 @@ body {
transform: translateX(-50%) translateY(-5px);
}

/* Copy notification styles */
.copy-notification {
position: absolute;
background-color: rgba(0, 0, 0, 0.7);
Expand Down Expand Up @@ -121,27 +131,36 @@ body {
}
}

#conversionModeButton {
transition: all 0.3s ease;
/* Description styles */
.glyph-description {
text-align: justify;
color: #6c757d;
font-size: 0.9em;
}

@media (max-width: 767.98px) {
#glyph-output {
font-size: 0.8em;
}
.glyph-input-label {
font-weight: bold;
}

#convertButton {
width: 100%;
margin-top: 10px;
}
.conversion-mode-text {
font-weight: bold;
}

@media (min-width: 768px) {
#glyph-output {
overflow-x: visible;
}
/* Footer styles */
footer {
border-top: 1px solid #dee2e6;
padding-top: 20px;
}

footer a {
transition: color 0.3s ease;
}

footer a:hover {
color: #007bff !important;
}

/* Media queries */
@media (max-width: 767.98px) {
#glyph-output {
font-size: 0.8em;
Expand All @@ -151,38 +170,33 @@ body {
flex-wrap: wrap;
}

#convertButton {
#convertButton,
#generate-glyph {
width: 100%;
margin-top: 10px;
border-top-left-radius: 0.25rem !important;
border-top-right-radius: 0.25rem !important;
border-radius: 0.25rem !important;
}

#converterInput {
border-bottom-right-radius: 0.25rem !important;
#converterInput,
#glyph-input {
border-radius: 0.25rem !important;
}
}

@media (min-width: 768px) {
#glyph-output {
overflow-x: visible;
#copyButton {
border-top-left-radius: 0 !important;
border-bottom-left-radius: 0 !important;
}
}

@media (max-width: 767.98px) {
#generate-glyph {
width: 100%;
margin-top: 10px;
border-top-left-radius: 0.25rem !important;
border-top-right-radius: 0.25rem !important;
}

#glyph-input {
border-bottom-right-radius: 0.25rem !important;
.input-group> :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
margin-left: 0;
}
}

@media (min-width: 768px) {
#glyph-output {
overflow-x: visible;
}

.converter-input-group {
display: flex;
}
Expand All @@ -198,19 +212,7 @@ body {
#inputPrefix {
width: auto;
}
}

.glyph-description {
text-align: justify;
color: #6c757d;
font-size: 0.9em;
}

.glyph-input-label {
font-weight: bold;
}

@media (min-width: 768px) {
.glyph-description {
padding-right: 1rem;
padding-left: 1rem;
Expand Down

0 comments on commit 9d86535

Please sign in to comment.