From d4cf8c4300d1fcb04f7919b9679d798be009a549 Mon Sep 17 00:00:00 2001
From: Firepup Sixfifty <firepyp650@gmail.com>
Date: Thu, 15 Aug 2024 23:50:12 -0500
Subject: [PATCH] Add quotes page

---
 public/pages/quotes.html | 87 ++++++++++++++++++++++++++++++++++++++++
 1 file changed, 87 insertions(+)
 create mode 100644 public/pages/quotes.html
diff --git a/public/pages/quotes.html b/public/pages/quotes.html
new file mode 100644
index 0000000..f2c0a02
--- /dev/null
+++ b/public/pages/quotes.html
@@ -0,0 +1,87 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width">
+    <title>FP650 - Quotes</title>
+    <link href="/style.css" rel="stylesheet" type="text/css" />
+    <link href="/styles/bounce.css" rel="stylesheet" type="text/css" />
+    <!-- <script async src="https://api.countapi.xyz/hit/firepup650.repl.co/visits"></script> -->
+  <!-- <script async src="https://api.countapi.xyz/hit/firepup650.repl.co/construction"></script> -->
+  </head>
+  <body>
+    <h5 hidden id='Maintenance' class="center"></h5>
+    <span class="center">
+      <h3 class="force-color">Firepup Quotes to be freely reused as needed by anyone for any reason</h3>
+      <span id="no-stop" class="force-color">I can't stop you</span> <button class="cyan copy-button" onclick="copy('no-stop')">Copy</button><br/>
+      <span id="access" class="force-color">I'll basically never say no to more access to more things... or more access to the same things</span> <button class="cyan copy-button" onclick="copy('access')">Copy</button><br/>
+    </span>
+    <script src="/script.js"></script>
+    <!-- Modified from https://www.geeksforgeeks.org/how-to-create-copy-to-clipboard-button/ /!-->
+    <script>
+function copy(element) {
+  const elemText = document.getElementById(element).innerText
+  let text = `> ${elemText}
+
+~ Firepup Sixfifty ([Source](https://mc.firepi.obl.ong:4443/quotes#:~:text=${encodeURIComponent(elemText).replaceAll("'", '%27')}))`
+  navigator.clipboard.writeText(text);
+  
+}
+  </script>
+  <!-- End Modified GeeksforGeeks code /!-->
+  <!-- Modified from https://codepen.io/nrrrdcore/pen/XbZBpq /!-->
+  <style>
+.copy-button {
+  cursor: pointer;
+  
+  &:before {
+    content: '';
+    display: none;
+    position: absolute;
+    z-index: 9998;
+    top: 35px;
+    left: 15px;
+    width: 0;
+    height: 0;
+    
+    border-left: 5px solid transparent;
+    border-right: 5px solid transparent;
+    border-bottom: 5px solid rgba(0,0,0,.72);
+  }
+
+  &:after {
+    content: 'Copy to Clipboard';
+    display: none;
+    position: absolute;
+    z-index: 9999;
+    top: 30px;
+    left: 0px;
+    width: 114px;
+    height: 36px;
+
+    color: #fff;
+    font-size: 10px;
+    line-height: 36px;
+    text-align: center;
+
+    border-radius: 3px;
+  }
+  
+  &:hover {
+    
+    &:before, &:after {
+      display: block;
+    }
+  }
+  
+  &:active, &:focus {
+    
+    &:after {
+      content: 'Copied!';
+    }
+  }
+}
+  </style>
+  <!-- End Modified codepen code (Julie Horvath) /!-->
+  </body>
+</html>
