Skip to content

Commit

Permalink
Added Zodiac and Astronomical symbols
Browse files Browse the repository at this point in the history
  • Loading branch information
@pauld0051
pauld0051 committed Jan 22, 2024
1 parent d797558 commit 5841a06
Show file tree
Hide file tree
Showing 6 changed files with 563 additions and 55 deletions.
2 changes: 2 additions & 0 deletions header.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,8 @@
<li><a class="dropdown-item" href="symbols_greek_uc.html">Ω Uppercase Greek</a></li>
<li><a class="dropdown-item" href="symbols_chemistry.html"><i class="fas fa-atom"></i> Chemistry</a></li>
<li><a class="dropdown-item" href="symbols_powers.html"><i class="fas fa-superscript"></i> Exponential and Powers</a></li>
<li><a class="dropdown-item" href="symbols_astronomical.html"><i class="fas fa-mars-stroke"></i> Astronomical</a></li>
<li><a class="dropdown-item" href="symbols_zodiac.html">♑︎ Zodiac</a></li>
<li><a class="dropdown-item" href="symbols_runic.html">ᚡ Runic</a></li>
<li><a class="dropdown-item" href="symbols_gender.html"><i class="fas fa-venus-mars"></i> Gender & Sex</a></li>
</ul>
Expand Down
8 changes: 8 additions & 0 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -130,6 +130,14 @@ <h3>Super and Subscript</h3>
<i class="fas fa-superscript fa-3x"></i>
<h3>Powers</h3>
</a>
<a href="symbols_astronomical.html" class="card" id="astonomicalTextCard">
<i class="fas fa-mars-stroke fa-3x"></i>
<h3>Astronomical Symbols</h3>
</a>
<a href="symbols_astronomical.html" class="card" id="astonomicalTextCard">
<p class="card-icon">♑︎</p>
<h3>Zodiac Symbols</h3>
</a>
<a href="symbols_runic.html" class="card" id="symbolsRunicTextCard">
<p class="card-icon">ᚡ</p>
<h3>Runic</h3>
Expand Down
69 changes: 33 additions & 36 deletions latex.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@
<link rel="stylesheet" href="style/base.css">
<link rel="stylesheet" href="style/cards.css">
<link rel="stylesheet" href="style/symbols.css">
<link rel="stylesheet" href="style/symbols_physics.css">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
<!-- ... favicon ... -->
<link rel="icon" type="image/x-icon" href="images/favicon.ico">
Expand Down Expand Up @@ -45,43 +46,39 @@ <h2>Copy Kinematic Equations</h2>
<small><em>Please note: Due to rendering differences, the generated image may not display correctly in Firefox. For the
best experience, we recommend using Chrome or Edge browsers.</em></small>
<br>
<section>
<h3>Make your own LaTeX</h3>
<div class="equation-grid">
<input type="text" id="latexInput" class="form-control mb-2" placeholder="Enter LaTeX here">

<!-- Use a row to contain the selects and button -->
<div class="row g-2 mb-2"> <!-- 'g-2' adds some gap between the columns -->
<!-- Bootstrap Select for Background Selection -->
<div class="col-sm"> <!-- 'col-sm' will stack on small screens and be horizontal on larger ones -->
<select class="form-select form-select-sm" aria-label="Select Background" id="backgroundSelect">
<option value="transparent" selected>Transparent</option>
<option value="white">White</option>
</select>
</div>

<!-- Bootstrap Select for Size Selection -->
<div class="col-sm">
<select class="form-select form-select-sm" aria-label="Select Size" id="sizeSelect">
<option value="small">Small</option>
<option value="normal" selected>Normal</option>
<option value="large">Large</option>
<option value="veryLarge">Very Large</option>
<option value="huge">Huge</option>
</select>
</div>
<div class="row">
<div class="col-sm-auto"> <!-- This column will auto-size to the content width -->
<button class="btn btn-primary" id="renderButton">Render PNG</button>
</div>
</div>
<section>
<h3>Make your own LaTeX</h3>
<div class="equation-grid">
<input type="text" id="latexInput" class="form-control mb-2" placeholder="Enter LaTeX here">
<!-- Use a row to contain the selects and button -->
<div class="row g-2 mb-2">
<!-- Bootstrap Select for Background Selection -->
<div class="col-sm">
<select class="form-select form-select-sm" aria-label="Select Background" id="backgroundSelect">
<option value="transparent" selected>Transparent</option>
<option value="white">White</option>
</select>
</div>

<div id="mathContainer"></div>
<!-- Container where the copy button will be placed -->
<div id="latexCopyContainer" class="mt-2 mb-2"></div>
<img id="resultImage" style="display:none; max-width:100%; height:auto;">
<a id="downloadLink" href="#" style="display:none;"></a> </div>
<!-- Bootstrap Select for Size Selection -->
<div class="col-sm">
<select class="form-select form-select-sm" aria-label="Select Size" id="sizeSelect">
<option value="small">Small</option>
<option value="normal" selected>Normal</option>
<option value="large">Large</option>
<option value="veryLarge">Very Large</option>
<option value="huge">Huge</option>
</select>
</div>
<div class="col-sm-auto">
<button class="btn btn-primary" id="renderButton">Render PNG</button>
</div>
</div>
<div id="mathContainer"></div>
<!-- Container where the copy button will be placed -->
<div id="latexCopyContainer" class="mt-2 mb-2"></div>
<img id="resultImage" style="display:none; max-width:100%; height:auto;">
<a id="downloadLink" href="#" style="display:none;"></a>
</div>
</section>
<!-- Scroll to Top button (hidden by default with inline style.css) -->
<button onclick="scrollToTop()" id="scrollToTopButton"
Expand Down
43 changes: 24 additions & 19 deletions scripts/symbolsLatex.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -106,35 +106,40 @@ function convertToImage() {
}

function createDownloadLink(imageUrl) {
const downloadLink = document.getElementById('downloadLink');
downloadLink.href = imageUrl;
downloadLink.download = 'equation.png';
downloadLink.style.display = 'block'; // Show the download link
downloadLink.textContent = 'Download Image'; // Text for the download link
downloadLink.style.textAlign = 'center'; // Center the download link
const downloadButton = document.getElementById('downloadLink'); // Assuming this is a button in your HTML
downloadButton.style.display = 'block'; // Show the download button
downloadButton.textContent = 'Download Image'; // Text for the download button
downloadButton.onclick = function() {
const link = document.createElement('a');
link.href = imageUrl;
link.download = 'equation.png';
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
};
}

function createCopyButton(imageUrl) {
// Get the container for the copy button
const latexCopyContainer = document.getElementById('latexCopyContainer');
// Check if a copy link already exists and remove it
const existingCopyLink = latexCopyContainer.querySelector('.copy-png-link');
if (existingCopyLink) {
latexCopyContainer.removeChild(existingCopyLink);

// Check if a copy button already exists and remove it
const existingCopyButton = latexCopyContainer.querySelector('.copy-png-button');
if (existingCopyButton) {
latexCopyContainer.removeChild(existingCopyButton);
}

// Create the new copy text link
const copyTextLink = document.createElement('a');
copyTextLink.className = 'copy-png-link';
copyTextLink.innerText = 'Copy PNG';
copyTextLink.onclick = (event) => {
event.preventDefault(); // Prevent the default anchor action
// Create the new copy button
const copyButton = document.createElement('button');
copyButton.className = 'copy-png-button btn symbol-btn'; // Add classes for styling
copyButton.innerText = 'Copy PNG';
copyButton.onclick = function(event) {
event.preventDefault(); // Prevent the default button action
copyImageToClipboard(imageUrl);
};

// Append the new copy link
latexCopyContainer.appendChild(copyTextLink);
// Append the new copy button
latexCopyContainer.appendChild(copyButton);
}

function setBackground(selectedBackground) {
Expand Down
Loading

0 comments on commit 5841a06

Please sign in to comment.