Added links for GitHub, contact, and Buy Me a Coffee

bklaing2 · Jul 2, 2022 · 688f493 · 688f493
1 parent ad47401
commit 688f493
Show file tree

Hide file tree

Showing 7 changed files with 51 additions and 16 deletions.
diff --git a/app/static/css/styles.css b/app/static/css/styles.css
@@ -151,7 +151,7 @@ h1 {
 }
 
 
-form {
+form, .card {
   max-width: 750px;
   max-height: 90%;
 
@@ -311,14 +311,15 @@ input[type="text"]:focus-visible {
 }
 
 .button:hover {
+  color: var(--primary-color);
   background-color: var(--secondary-color);
 }
 
 .button:active,
 input[type="radio"]:checked+.button,
 input[type="checkbox"]:checked+.button {
+  color: var(--accent-color);
   background-color: var(--secondary-color);
-  filter: brightness(140%);
 }
 
 

diff --git a/app/static/js/scripts.js b/app/static/js/scripts.js
@@ -5,7 +5,7 @@ function submitForm(event) {
   form = document.getElementById('create-playlist-form')
   addPlaylist(new FormData(form))
 
-  hideOverlay()
+  hideOverlay('create-playlist-overlay')
 }
 
 
@@ -36,13 +36,13 @@ function searchArtists(input) {
 
 
 // Showing/hiding elements //////////////////////
-function showOverlay() {
-  overlay = document.getElementById('create-playlist-overlay')
+function showOverlay(id) {
+  overlay = document.getElementById(id)
   overlay.removeAttribute('hidden')
 }
 
-function hideOverlay() {
-  overlay = document.getElementById('create-playlist-overlay')
+function hideOverlay(id) {
+  overlay = document.getElementById(id)
   overlay.setAttribute('hidden', '')
 
   hideAdvancedOptions()

diff --git a/app/templates/base.html b/app/templates/base.html
@@ -1,5 +1,5 @@
 <!DOCTYPE>
-<html lang="en" class="container column">
+<html lang="en" class="container column" style="margin-bottom: 4rem; gap: 0;">
 
   <head>
     <meta charset="UTF-8">

diff --git a/app/templates/components/emailOverlay.html b/app/templates/components/emailOverlay.html
@@ -0,0 +1,13 @@
+<div id="email-overlay" class="overlay" onclick="hideOverlay('email-overlay')" hidden>
+  <div class="card body" onclick="event.stopPropagation()">
+    <h2 class="header">Contact</h2>
+
+    <p class="main column" style="gap: 3rem;">
+      If you have any questions or would like to leave some feedback, please email <a href="mailto: [email protected]" class="accent">[email protected]</a>
+    </p>
+
+    <div class="footer row" style="justify-content: space-between;">
+      <button class="button" onclick="hideOverlay('email-overlay')">Cancel</button>
+    </div>
+  </div>
+</div>
diff --git a/app/templates/components/footer.html b/app/templates/components/footer.html
@@ -1,5 +1,26 @@
-{% if auth_url is not defined %}
-  <footer class="row">
-    <a href="/sign_out" class="button">Sign Out</a>
-  </footer>
-{% endif %}
+<footer class="row">
+  <a href="https://github.com/bklaing2/autofy" class="button secondary">GitHub</a>
+
+  <a href="https://www.buymeacoffee.com/autofy" class="button secondary" target="_blank">Support the Site</a>
+  <script
+          data-name="BMC-Widget"
+          data-cfasync="false"
+          src="https://cdnjs.buymeacoffee.com/1.0.0/widget.prod.min.js"
+          data-id="autofy"
+          data-description="Support me on Buy me a coffee!"
+          data-message="If you want to show support and keep this site ad-free, click here!"
+          data-color="#4ECCA3"
+          data-position="Right"
+          data-x_margin="18"
+          data-y_margin="18"></script>
+
+  <button class="button secondary" onclick="showOverlay('email-overlay')">Contact</button>
+
+  {% if auth_url is not defined %}
+    <a href="/sign_out" class="button secondary">Sign Out</a>
+  {% endif %}
+
+</footer>
+
+
+{% include 'components/emailOverlay.html' %}
diff --git a/app/templates/components/overlay.html b/app/templates/components/overlay.html
@@ -1,4 +1,4 @@
-<div id="create-playlist-overlay" class="overlay" onclick="hideOverlay()" hidden>
+<div id="create-playlist-overlay" class="overlay" onclick="hideOverlay('create-playlist-overlay')" hidden>
   <form id="create-playlist-form" class="body" action="#" method="post" onclick="event.stopPropagation()">
 
     <h2 class="header">Create Mega Playlist!</h2>
@@ -12,7 +12,7 @@ <h2 class="header">Create Mega Playlist!</h2>
     </div>
 
     <div class="footer row" style="justify-content: space-between;">
-      <button type="reset" class="button" onclick="hideOverlay()">Cancel</button>
+      <button type="reset" class="button" onclick="hideOverlay('create-playlist-overlay')">Cancel</button>
       <input type="submit" value="Create Playlist" class="button accent" onclick="submitForm(event)">
     </div>
 

diff --git a/app/templates/index.html b/app/templates/index.html
@@ -6,7 +6,7 @@
   <main class="column" style="justify-content: flex-start;">
     <div class="row">
       <h2 style="color: var(--primary-color);">My Playlists</h2>
-      <button class="add-button" onclick="showOverlay()">+</button>
+      <button class="add-button" onclick="showOverlay('create-playlist-overlay')">+</button>
     </div>
 
     <div id="my-playlists"></div>