diff --git a/get_online_session_communities.php b/get_online_session_communities.php
index ae97a35..3ebf8d0 100644
--- a/get_online_session_communities.php
+++ b/get_online_session_communities.php
@@ -77,10 +77,7 @@
$info_arrays = generate_info_arrays($room_assignments);
// $final_join_links = generate_join_links($room_assignments);
-// $modal_html = create_qr_code_modals_html($info_arrays);
-// $table_html = get_table_html($info_arrays);
-// $title = "Self-updating list of active Session Communities";
-// $final_html = create_html_page_from_html_data($table_html, $title, $timestamp);
+
$final_html = generateHTML($timestamp, $info_arrays);
// print_r($wild_join_links);
diff --git a/html_generator.php b/html_generator.php
index d3f4863..32d5dbc 100644
--- a/html_generator.php
+++ b/html_generator.php
@@ -166,18 +166,32 @@
return $html;
}
+ /*
+ * Generate the HTML for the toast/snackbar when you copy a join link
+ */
+ function get_copy_snackbar() {
+ $snackbar_html =
+ "
" .
+ "Copied the URL to the clipboard. Paste into Session app to join." .
+ "
";
+
+ return $snackbar_html;
+ }
+
/*
* TODO: Description
*/
function generateHTML($timestamp, $info_arrays) {
$title = "Self-updating list of active Session Communities";
- $modal_html = create_qr_code_modals_html($info_arrays);
$table_html = get_table_html($info_arrays);
+ $modal_html = create_qr_code_modals_html($info_arrays);
+ $snackbar_html = get_copy_snackbar();
$html =
+ $table_html . PHP_EOL .
$modal_html . PHP_EOL .
- $table_html . PHP_EOL;
+ $snackbar_html . PHP_EOL;
$final_html = create_html_page_from_html_data($html, $title, $timestamp);
diff --git a/output/script2.js b/output/script2.js
index 392f533..a119fdc 100644
--- a/output/script2.js
+++ b/output/script2.js
@@ -72,6 +72,13 @@ function hideElementByID(id) {
function copyToClipboard(text) {
navigator.clipboard.writeText(text);
+
+ // Snackbar
+ const snackbar = document.getElementById("copy-snackbar");
+ // Add the "show" class to DIV
+ snackbar.className = "show";
+ // After 3 seconds, remove the show class from DIV
+ setTimeout(function(){ snackbar.className = snackbar.className.replace("show", ""); }, 3000);
}
function setLastChecked(timestamp) {
diff --git a/output/styles2.css b/output/styles2.css
index 544e0b8..442f2d8 100644
--- a/output/styles2.css
+++ b/output/styles2.css
@@ -80,3 +80,50 @@
text-decoration: none;
color: #000000;
}
+
+/* */
+/* The snackbar - position it at the bottom and in the middle of the screen */
+#copy-snackbar {
+ visibility: hidden; /* Hidden by default. Visible on click */
+ min-width: 250px; /* Set a default minimum width */
+ margin-left: -125px; /* Divide value of min-width by 2 */
+ background-color: #333; /* Black background color */
+ color: #fff; /* White text color */
+ text-align: center; /* Centered text */
+ border-radius: 2px; /* Rounded borders */
+ padding: 16px; /* Padding */
+ position: fixed; /* Sit on top of the screen */
+ z-index: 1; /* Add a z-index if needed */
+ left: 50%; /* Center the snackbar */
+ bottom: 30px; /* 30px from the bottom */
+}
+
+/* Show the snackbar when clicking on a button (class added with JavaScript) */
+#copy-snackbar.show {
+ visibility: visible; /* Show the snackbar */
+ /* Add animation: Take 0.5 seconds to fade in and out the snackbar.
+ However, delay the fade out process for 2.5 seconds */
+ -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
+ animation: fadein 0.5s, fadeout 0.5s 2.5s;
+}
+
+/* Animations to fade the snackbar in and out */
+@-webkit-keyframes fadein {
+ from {bottom: 0; opacity: 0;}
+ to {bottom: 30px; opacity: 1;}
+}
+
+@keyframes fadein {
+ from {bottom: 0; opacity: 0;}
+ to {bottom: 30px; opacity: 1;}
+}
+
+@-webkit-keyframes fadeout {
+ from {bottom: 30px; opacity: 1;}
+ to {bottom: 0; opacity: 0;}
+}
+
+@keyframes fadeout {
+ from {bottom: 30px; opacity: 1;}
+ to {bottom: 0; opacity: 0;}
+}