Skip to content

Commit

Permalink
Add new styling, update bootstrap, general update
Browse files Browse the repository at this point in the history
  • Loading branch information
@pauld0051
pauld0051 committed Jan 21, 2024
1 parent 427c707 commit 6177c54
Show file tree
Hide file tree
Showing 31 changed files with 3,950 additions and 1,965 deletions.
26 changes: 24 additions & 2 deletions header.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
<ul class="navbar-nav navbar-custom-nav">
<li class="nav-item">
<a class="nav-link" href="index.html" role="button">
<i class="fas fa-home d-md-none d-lg-none d-xl-inline"></i> Home
<i class="fas fa-home d-md-none d-lg-none d-xl-inline hide-1200-1340"></i> Home
</a></li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown"
Expand All @@ -40,7 +40,7 @@
<li><a class="dropdown-item" href="parenthesis_text.html">⒫ Parenthesis</a></li>
<li><a class="dropdown-item" href="wide_text.html"><i class="fas fa-arrows-alt-h"></i> Wide</a></li>
<li><a class="dropdown-item" href="doublestruck_text.html">𝔻 Double Struck</a></li>
<li><a class="dropdown-item" href="roman_numerals.html">IV Roman Numerals Convertor</a></li>
<li><a class="dropdown-item" href="roman_numerals.html"><strong>IV</strong> Roman Numerals Convertor</a></li>
</ul>
</li>
<li class="nav-item dropdown">
Expand Down Expand Up @@ -99,6 +99,28 @@
<li><a class="dropdown-item" href="physics_C5_doppler_effect.html"><strong>C5</strong> Doppler Effect</a></li>
</li>
</ul> <!-- End of Physics C -->
<div class="dropdown-divider"></div>
<li class="nav-item dropdown dropdown-item-text"> <a href="#" id="menu" data-bs-toggle="dropdown"
class="nav-link dropdown-toggle" data-bs-display="static">D. Fields</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="physics_D1_gravitational_fields.html"><strong>D1</strong> Gravitational Fields</a></li>
<li><a class="dropdown-item" href="physics_D2_electric_magnetic_fields.html"><strong>D2</strong> Electric and Magnetic Fields</a>
</li>
<li><a class="dropdown-item" href="physics_>D3>_motion_electromagnetic_fields.html"><strong>D3</strong> Coming Soon Motion in Electromagnetic Fields</a></li>
<li><a class="dropdown-item" href="physics_>D4>_induction.html"><strong>D4</strong> Ciming Soon Induction</a></li>
</li>
</ul> <!-- End of Physics D -->
<div class="dropdown-divider"></div>
<li class="nav-item dropdown dropdown-item-text"> <a href="#" id="menu" data-bs-toggle="dropdown"
class="nav-link dropdown-toggle" data-bs-display="static">E. Nuclear and quantum physics</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="physics_>E1>_structure_atom.html"><strong>E1</strong> Coming Soon Structure of the Atom</a></li>
<li><a class="dropdown-item" href="physics_>E2>_quantum_physics.html"><strong>E2</strong> Coming Soon Quantum Physics</a></li>
<li><a class="dropdown-item" href="physics_>E3>_radioactive_decay.html"><strong>E3</strong> Coming Soon Radioactive Decay</a>
</li>
<li><a class="dropdown-item" href="physics_>E5>_fusion_stars.html"><strong>E5</strong> Coming Soon Fusion and Stars</a></li>
</li>
</ul> <!-- End of Physics E -->

</ul> <!-- End of Physics Dropdown -->
</li>
Expand Down
6 changes: 3 additions & 3 deletions latex.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,7 @@ <h2>Copy Kinematic Equations</h2>
<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 -->
Expand Down Expand Up @@ -80,9 +81,8 @@ <h3>Make your own LaTeX</h3>
<!-- 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> <!-- Download link will be here -->
</section>

<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"
style="display: none; position: fixed; bottom: 20px; right: 20px;"><i class="fas fa-arrow-up"></i></button>
Expand Down
34 changes: 34 additions & 0 deletions latex_insert.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
<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>
<!-- 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>
249 changes: 126 additions & 123 deletions physics_A1_kinematics.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
<link rel="stylesheet" href="style/styles.css">
<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 All @@ -40,144 +40,147 @@
<header id="globalHeader"></header>
<main>
<h2>Copy Kinematic Equations</h2>
<p class="info-text">
Click the LaTeX buttons to copy LaTeX code for use in your projects or paste into the LaTeX PNG generator below. For
instant use in documents or on social media, or you can copy the basic formatted equations.
</p>
<small>
<em>Note: The LaTeX PNG generator may not display images correctly in Firefox. For the best experience, please use
Chrome or Edge browsers.</em>
<br>
<button type="button" class="btn btn-info" data-bs-toggle="modal" data-bs-target="#instructionModal">
<i class="far fa-question-circle red"></i>
</button>

<p class="info-text">
Click the LaTeX buttons to copy LaTeX code for use in your projects or paste into the LaTeX PNG generator below. For
instant use in documents or on social media, or you can copy the basic formatted equations.
</p>
<small>
<em>Note: The LaTeX PNG generator may not display images correctly in Firefox. For the best experience, please use
Chrome or Edge browsers.</em>
</small>
<br>
<button type="button" class="btn btn-info" data-bs-toggle="modal" data-bs-target="#instructionModal">
<i class="far fa-question-circle red"></i> How to Use
</button>

<!-- LaTeX Equation Buttons -->
<section>
<div class="row">
<h3>A.1 Kinematic Equations - LaTeX</h3>
</div>
<!-- First Equation -->
<div class="symbol-container">
<button class="symbol-btn" data-symbol="s = \frac{u + v}{2} \cdot t">
\( s = \frac{u + v}{2} \cdot t \)
</button>
<div class="copied-overlay">Copied!</div>
<!-- Display as normal text -->
<label><code>s = \frac{u + v}{2} \cdot t</code></label>
<section>
<h3>A.1 Kinematic Equations - LaTeX</h3>
<div class="equation-grid">
<!-- First Equation -->
<div class="equation-container">
<div class="equation">
\( s = \frac{u + v}{2} \cdot t \)
</div>

<!-- Second Equation -->
<div class="symbol-container">
<button class="symbol-btn" data-symbol="v = u + at">
\( v = u + at \)
</button>
<div class="copied-overlay">Copied!</div>
<!-- Display as normal text -->
<label><code>v = u + at</code></label>
<button class="symbol-btn equation-btn" data-symbol="s = \frac{u + v}{2} \cdot t">
Copy LaTeX
</button>
<div class="copied-overlay">Copied!</div>
</div>
<!-- Second Equation -->
<div class="equation-container">
<div class="equation">
\( v = u + at \)
</div>

<!-- Third Equation -->
<div class="symbol-container">
<button class="symbol-btn" data-symbol="s = ut + \frac{1}{2}at^2">
\( s = ut + \frac{1}{2}at^2 \)
</button>
<div class="copied-overlay">Copied!</div>
<!-- Display as normal text -->
<label><code>s = ut + \frac{1}{2}at^2</code></label>
<button class="symbol-btn equation-btn" data-symbol="v = u + at">
Copy LaTeX
</button>
<div class="copied-overlay">Copied!</div>
</div>
<!-- Third Equation -->
<div class="equation-container">
<div class="equation">
\( s = ut + \frac{1}{2}at^2 \)
</div>

<!-- Fourth Equation -->
<div class="symbol-container">
<button class="symbol-btn" data-symbol="v^2 = u^2 + 2as">
\( v^2 = u^2 + 2as \)
</button>
<div class="copied-overlay">Copied!</div>
<!-- Display as normal text -->
<label><code>v^2 = u^2 + 2as</code></label>
<button class="symbol-btn equation-btn" data-symbol="s = ut + \frac{1}{2}at^2">
Copy LaTeX
</button>
<div class="copied-overlay">Copied!</div>
</div>
<!-- Fourth Equation -->
<div class="equation-container">
<div class="equation">
\( v^2 = u^2 + 2as \)
</div>
</section>

<section>
<h3>A.1 Kinematic Equations - Basic</h3>
<!-- Basic Equation Buttons -->

<!-- First Equation -->
<div class="symbol-container">
<button class="symbol-btn" data-symbol="s = (u + v)/2 × t">
s = (u + v)/2 × t
</button>
<div class="copied-overlay">Copied!</div>
<label></label>
<button class="symbol-btn equation-btn" data-symbol="v^2 = u^2 + 2as">
Copy LaTeX
</button>
<div class="copied-overlay">Copied!</div>
</div>
</div>
</section>
<section>
<h3>A.1 Kinematic Equations - Basic</h3>
<div class="equation-grid">
<!-- First Basic Equation -->
<div class="equation-container">
<div class="equation">
s = (u + v)/2 × t
</div>

<!-- Second Equation -->
<div class="symbol-container">
<button class="symbol-btn" data-symbol="v = u + at">
v = u + at
</button>
<div class="copied-overlay">Copied!</div>
<label></label>
<button class="symbol-btn equation-btn" data-symbol="s = (u + v)/2 × t">
Copy Text
</button>
<div class="copied-overlay">Copied!</div>
</div>
<!-- Second Basic Equation -->
<div class="equation-container">
<div class="equation">
v = u + at
</div>

<!-- Third Equation -->
<div class="symbol-container">
<button class="symbol-btn" data-symbol="s = ut + 1/2 at²">
s = ut + 1/2 at²
</button>
<div class="copied-overlay">Copied!</div>
<label></label>
<button class="symbol-btn equation-btn" data-symbol="v = u + at">
Copy Text
</button>
<div class="copied-overlay">Copied!</div>
</div>
<!-- Third Basic Equation -->
<div class="equation-container">
<div class="equation">
s = ut + 1/2 at²
</div>

<!-- Fourth Equation -->
<div class="symbol-container">
<button class="symbol-btn" data-symbol="v² = u² + 2as">
v² = u² + 2as
</button>
<div class="copied-overlay">Copied!</div>
<label></label>
<button class="symbol-btn equation-btn" data-symbol="s = ut + 1/2 at²">
Copy Text
</button>
<div class="copied-overlay">Copied!</div>
</div>
<!-- Fourth Basic Equation -->
<div class="equation-container">
<div class="equation">
v² = u² + 2as
</div>
</section>
<button class="symbol-btn equation-btn" data-symbol="v² = u² + 2as">
Copy Text
</button>
<div class="copied-overlay">Copied!</div>
</div>
</div>
</section>

<section>
<h3>Make your own LaTeX</h3>
<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 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>
<!-- 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>

<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> <!-- Download link will be here -->
</section>

<!-- Scroll to Top button (hidden by default with inline style.css) -->
<!-- Scroll to Top button (hidden by default with inline style.css) -->
<button onclick="scrollToTop()" id="scrollToTopButton"
style="display: none; position: fixed; bottom: 20px; right: 20px;"><i class="fas fa-arrow-up"></i></button>

Expand Down
Loading

0 comments on commit 6177c54

Please sign in to comment.