Add quotes page
This commit is contained in:
parent
3ec85680bb
commit
d4cf8c4300
1 changed files with 87 additions and 0 deletions
87
public/pages/quotes.html
Normal file
87
public/pages/quotes.html
Normal file
|
@ -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>
|
Loading…
Reference in a new issue