-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[Frontend] Bootstrap 5 Upgrade (#90)
* Update to Bootstrap 5 and FontAwesome * Add GitHub links
- Loading branch information
1 parent
48ac865
commit f303c7b
Showing
11 changed files
with
289 additions
and
208 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,47 @@ | ||
| document.addEventListener('DOMContentLoaded', function() { | ||
| const alert = document.getElementById('disclaimer'); | ||
| const dismissLink = document.getElementById('dismiss'); | ||
| const fileInput = document.getElementById('file-upload'); | ||
| const sendBtn = document.getElementById('sendBtn'); | ||
| const checkmarkSpan = document.getElementById('checkmark'); | ||
| const sendIcon = document.getElementById("sendIcon"); | ||
| const spinner = document.getElementById("spinner"); | ||
|
|
||
| // Check if the alert has been closed. | ||
| if (sessionStorage.getItem('alertClosed') === 'true') { | ||
| alert.style.display = 'none'; | ||
| } | ||
|
|
||
| // Check if the alert has been dismissed. | ||
| if (localStorage.getItem('alertDismissed') === 'true') { | ||
| alert.style.display = 'none'; | ||
| } | ||
|
|
||
| // Handle click event on the "Dismiss" link. | ||
| dismissLink.addEventListener('click', function(e) { | ||
| e.preventDefault(); // Prevent default action (navigation). | ||
| localStorage.setItem('alertDismissed', 'true'); // Set item in localStorage. | ||
| new bootstrap.Alert(alert).close(); // Close the alert. | ||
| }); | ||
|
|
||
| // Listen for the close event of the alert. | ||
| alert.addEventListener('close.bs.alert', function() { | ||
| // When the alert is closed, set the item in sessionStorage. | ||
| sessionStorage.setItem('alertClosed', 'true'); | ||
| }); | ||
|
|
||
| fileInput.addEventListener('change', function() { | ||
| if (fileInput.files.length > 0) { | ||
| // Show checkmark if a file is uploaded. | ||
| checkmarkSpan.classList.remove('d-none'); | ||
| } else { | ||
| // Hide checkmark if no file is uploaded. | ||
| checkmarkSpan.classList.add('d-none'); | ||
| } | ||
| }); | ||
|
|
||
| sendBtn.addEventListener("click", function() { | ||
| sendIcon.classList.add("d-none"); // Hide send icon. | ||
| spinner.classList.remove("d-none"); // Show spinner. | ||
| }); | ||
| }); |
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,64 +1,80 @@ | ||
| <!doctype html> | ||
| <!DOCTYPE html> | ||
|
|
||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="utf-8"> | ||
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1"> | ||
| <link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}"> | ||
| <title>{% block title %}{% endblock %} - Bulk SMS Sender</title> | ||
| <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous"> | ||
| <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}"> | ||
| <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script> | ||
| <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script> | ||
| </head> | ||
| <body> | ||
| <nav class="navbar navbar-inverse"> | ||
| <div class="container-fluid "> | ||
| <div class="navbar-header"> | ||
| <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> | ||
| <span class="sr-only">Toggle navigation</span> | ||
| <span class="icon-bar"></span> | ||
| <span class="icon-bar"></span> | ||
| <span class="icon-bar"></span> | ||
| </button> | ||
| <a class="navbar-brand" href="{{ url_for('index') }}"><span class="glyphicon glyphicon-envelope" aria-hidden="true"></span> Bulk SMS Sender</a> | ||
| </div> | ||
| <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> | ||
| <ul class="nav navbar-nav"> | ||
| <li><a href="{{ url_for('index') }}">Home <span class="sr-only">(current)</span></a></li> | ||
| <li><a href="{{ url_for('instructions') }}">Instructions</a></li> | ||
| </ul> | ||
| <ul class="nav navbar-nav navbar-right"> | ||
| </ul> | ||
| </div><!-- /.navbar-collapse --> | ||
| </div><!-- /.container-fluid --> | ||
| </nav> | ||
|
|
||
| <div class="container"> | ||
| {% with messages = get_flashed_messages() %} | ||
| {% if messages %} | ||
| <div class="panel panel-danger"> | ||
| <div class="panel-heading"> | ||
| <h3>Error!</h3> | ||
| </div> | ||
| <div class="panel-body"> | ||
| <ul> | ||
| {% for message in messages %} | ||
| <li>{{ message }}</li> | ||
| {% endfor %} | ||
| </ul> | ||
| </div> | ||
| </div> | ||
| {% endif %} | ||
| {% endwith %} | ||
| <div class="jumbotron"> | ||
| <h1>Bulk SMS Sender</h1> | ||
| <p>Send SMS messages to multiple recipients using Twilio's API</p> | ||
| <head> | ||
| <meta charset="utf-8" /> | ||
| <meta content="IE=edge" http-equiv="X-UA-Compatible" /> | ||
| <meta content="width=device-width, initial-scale=1" name="viewport" /> | ||
| <link href="{{ url_for('static', filename='favicon.ico') }}" rel="shortcut icon" /> | ||
| <title>{% block title %}{% endblock %} - Bulk SMS Sender</title> | ||
| <link crossorigin="anonymous" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" | ||
| integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" rel="stylesheet" /> | ||
| <link href="{{ url_for('static', filename='style.css') }}" rel="stylesheet" /> | ||
| <script crossorigin="anonymous" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" | ||
| integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"></script> | ||
| <link crossorigin="anonymous" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" | ||
| integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" rel="stylesheet" referrerpolicy="no-referrer" /> | ||
| </head> | ||
|
|
||
| <body> | ||
| <nav class="navbar navbar-expand-lg navbar-dark bg-dark"> | ||
| <div class="container-fluid"> | ||
| <a class="navbar-brand" href="{{ url_for('index') }}"><span aria-hidden="true" class="fas fa-envelope"></span> Bulk SMS Sender</a> | ||
| <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> | ||
| <span class="navbar-toggler-icon"></span> | ||
| </button> | ||
| <div class="collapse navbar-collapse" id="navbarNav"> | ||
| <ul class="navbar-nav me-auto mb-2 mb-lg-0"> | ||
| <li class="nav-item"> | ||
| <a class="nav-link" href="{{ url_for('index') }}"> | ||
| <span aria-hidden="true" class="fas fa-paper-plane"></span> Send SMS | ||
| </a> | ||
| </li> | ||
| <li class="nav-item"> | ||
| <a class="nav-link" href="{{ url_for('instructions') }}"> | ||
| <span aria-hidden="true" class="fas fa-info-circle"></span> Instructions | ||
| </a> | ||
| </li> | ||
| </ul> | ||
| <ul class="navbar-nav ms-auto"> | ||
| <li class="nav-item"> | ||
| <a class="nav-link" href="https://rahb-realtors-association.github.io/sms-sender" target="_blank" rel="noopener noreferrer"> | ||
| <span aria-hidden="true" class="fas fa-book"></span> Docs | ||
| </a> | ||
| </li> | ||
| <li class="nav-item"> | ||
| <a class="nav-link" href="https://github.com/RAHB-REALTORS-Association/sms-sender" target="_blank" rel="noopener noreferrer"> | ||
| <span aria-hidden="true" class="fab fa-github"></span> GitHub | ||
| </a> | ||
| </li> | ||
| </ul> | ||
| </div> | ||
| </div> | ||
| </nav> | ||
| <div class="container"> | ||
| {% with messages = get_flashed_messages() %} | ||
| {% if messages %} | ||
| <div class="alert alert-danger mb-3 mt-15" role="alert"> | ||
| <div class="d-flex align-items-center"> | ||
| <i class="fas fa-exclamation-triangle me-2 pb-2"></i> | ||
| <h4>Application Error</h4> | ||
| </div> | ||
| {% block content %} | ||
| {% endblock %} | ||
| <ul> | ||
| {% for message in messages %} | ||
| <p>{{ message }}</p> | ||
| {% endfor %} | ||
| </ul> | ||
| </div> | ||
| {% endif %} | ||
| {% endwith %} | ||
| <div class="container bg-light p-5 my-3 rounded text-center"> | ||
| <h1 class="display-4">📲📩</h1> | ||
| <p class="lead">Send SMS messages to multiple recipients using Twilio's API</p> | ||
| </div> | ||
| <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script> | ||
| <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script> | ||
| </body> | ||
| </html> | ||
| {% block content %} | ||
| {% endblock %} | ||
| </div> | ||
| </body> | ||
|
|
||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.