Changed the styling of all the pages
This commit is contained in:
xemeds
+1
-1
@@ -48,7 +48,7 @@ def validate_token(form, field):
|
||||
return
|
||||
|
||||
# If the token is the same as a pages route
|
||||
if field.data == "donate" or field.data == "tracker" or field.data == "lookup":
|
||||
if field.data == "tracker" or field.data == "lookup" or field.data == "report" or field.data == "donate":
|
||||
# Raise a ValidationError
|
||||
raise ValidationError("Token already exists")
|
||||
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 15 KiB After Width: | Height: | Size: 107 KiB |
+218
-175
@@ -1,237 +1,280 @@
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: 'Roboto Mono', monospace;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
font-family: 'Robot Mono', monospace;
|
||||
}
|
||||
|
||||
nav {
|
||||
background: #0c2431;
|
||||
padding: 5px 40px;
|
||||
}
|
||||
|
||||
nav ul {
|
||||
list-style: none;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
nav ul li {
|
||||
padding: 15px 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
nav ul li.items {
|
||||
position: relative;
|
||||
width: auto;
|
||||
margin: 0 16px;
|
||||
text-align: center;
|
||||
order: 3;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
nav ul li.items:after {
|
||||
position: absolute;
|
||||
content: '';
|
||||
left: 0;
|
||||
bottom: 5px;
|
||||
height: 2px;
|
||||
width: 100%;
|
||||
background: #f68741;
|
||||
opacity: 0;
|
||||
transition: all 0.2s linear;
|
||||
}
|
||||
|
||||
nav ul li.items:hover:after {
|
||||
opacity: 1;
|
||||
bottom: 8px;
|
||||
}
|
||||
|
||||
nav ul li.logo {
|
||||
flex: 1;
|
||||
color: white;
|
||||
font-size: 23px;
|
||||
font-weight: 600;
|
||||
cursor: default;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
nav ul li a {
|
||||
color: white;
|
||||
font-size: 18px;
|
||||
text-decoration: none;
|
||||
transition: .4s;
|
||||
}
|
||||
|
||||
nav ul li:hover a {
|
||||
color: #f68741;
|
||||
}
|
||||
|
||||
nav ul li i {
|
||||
font-size: 23px;
|
||||
}
|
||||
|
||||
nav ul li.btn {
|
||||
display: none;
|
||||
}
|
||||
|
||||
nav ul li.btn.hide i:before {
|
||||
content: '\f00d';
|
||||
}
|
||||
|
||||
@media all and (max-width: 900px) {
|
||||
nav {
|
||||
padding: 5px 30px;
|
||||
}
|
||||
nav ul li.items {
|
||||
width: 100%;
|
||||
display: none;
|
||||
}
|
||||
nav ul li.items.show {
|
||||
display: block;
|
||||
}
|
||||
nav ul li.btn {
|
||||
display: block;
|
||||
}
|
||||
nav ul li.items:hover {
|
||||
border-radius: 5px;
|
||||
box-shadow: 0px 5px 5px #f68741, 0px -5px 5px #f68741;
|
||||
}
|
||||
nav ul li.items:hover:after {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
background: #121212;
|
||||
|
||||
}
|
||||
|
||||
.headers {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 3vh;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.title:link {
|
||||
color: #bb86fc;
|
||||
text-decoration: none;
|
||||
font-size: 50px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.title:visited {
|
||||
color: #bb86fc;
|
||||
}
|
||||
|
||||
.title:hover {
|
||||
color: #7b59a5;
|
||||
}
|
||||
|
||||
.desc {
|
||||
font-size: 25px;
|
||||
font-weight: bold;
|
||||
color: #ffffff;
|
||||
background: #0c2431;
|
||||
}
|
||||
|
||||
.url-form {
|
||||
position: relative;
|
||||
z-index: 100;
|
||||
background-color: #2c2c2c;
|
||||
border-radius: 8px;
|
||||
padding: 30px;
|
||||
box-shadow: 0px 10px 20px #000000;
|
||||
margin: 35vh 10vw 0 10vw;
|
||||
max-width: 700px;
|
||||
text-align: center;
|
||||
margin: 220px auto 0 auto;
|
||||
}
|
||||
|
||||
.input-list {
|
||||
width: 100%;
|
||||
list-style: none;
|
||||
text-align: center;
|
||||
.url-form h1 {
|
||||
color: #ffffff;
|
||||
text-align: center;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.url {
|
||||
width: 80%;
|
||||
padding: 10px;
|
||||
background: #121212;
|
||||
border: 2px solid #bb86fc;
|
||||
color: #ffffff;
|
||||
margin-bottom: 2vh;
|
||||
.feedback-input {
|
||||
color: white;
|
||||
font-weight: 500;
|
||||
font-size: 18px;
|
||||
border-radius: 5px;
|
||||
line-height: 22px;
|
||||
background-color: transparent;
|
||||
border: 2px solid #fc913a;
|
||||
transition: all 0.3s;
|
||||
padding: 13px;
|
||||
margin-bottom: 15px;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
.url:focus {
|
||||
border-color: #7b59a5;
|
||||
}
|
||||
|
||||
.token {
|
||||
width: 80%;
|
||||
padding: 10px;
|
||||
background: #121212;
|
||||
border: 2px solid #bb86fc;
|
||||
color: #ffffff;
|
||||
margin-bottom: 2vh;
|
||||
}
|
||||
|
||||
.token:focus {
|
||||
border-color: #7b59a5;
|
||||
.feedback-input:focus {
|
||||
border: 2px solid #c95c03;
|
||||
}
|
||||
|
||||
.button {
|
||||
width: 100px;
|
||||
background: #bb86fc;
|
||||
border: 2px solid #bb86fc;
|
||||
border-radius: 3px;
|
||||
padding: 10px;
|
||||
color: #000000;
|
||||
font-weight: bold;
|
||||
width: 100%;
|
||||
background: #fc913a;
|
||||
border-radius: 5px;
|
||||
border: 0;
|
||||
cursor: pointer;
|
||||
color: white;
|
||||
font-size: 24px;
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
transition: all 0.3s;
|
||||
margin-top: -4px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.button:hover {
|
||||
background: #7b59a5;
|
||||
border-color: #7b59a5;
|
||||
background: #e26803;
|
||||
}
|
||||
|
||||
.form-error-message {
|
||||
color: #ffffff;
|
||||
list-style: none;
|
||||
text-align: center;
|
||||
margin: -1vh 0 2vh 0;
|
||||
@media all and (max-width: 800px) {
|
||||
.url-form {
|
||||
max-width: 420px;
|
||||
}
|
||||
}
|
||||
|
||||
.token-explanation {
|
||||
color: #ffffff;
|
||||
font-size: 13px;
|
||||
list-style: none;
|
||||
text-align: center;
|
||||
margin-bottom: 2vh;
|
||||
.tooltip {
|
||||
color: #ffffff;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
border-bottom: 1px dotted black;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.click-tracker {
|
||||
text-align: center;
|
||||
margin-top: 5vh;
|
||||
.tooltip .tooltiptext {
|
||||
visibility: hidden;
|
||||
width: 400px;
|
||||
background-color: black;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
border-radius: 6px;
|
||||
padding: 10px;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
bottom: 150%;
|
||||
left: 50%;
|
||||
margin-left: -200px;
|
||||
}
|
||||
|
||||
.click-tracker a:link {
|
||||
color: #bb86fc;
|
||||
text-decoration: none;
|
||||
font-size: 25px;
|
||||
font-weight: bold;
|
||||
.tooltip .tooltiptext::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 50%;
|
||||
margin-left: -5px;
|
||||
border-width: 5px;
|
||||
border-style: solid;
|
||||
border-color: black transparent transparent transparent;
|
||||
}
|
||||
|
||||
.click-tracker a:visited {
|
||||
color: #bb86fc;
|
||||
.tooltip:hover .tooltiptext {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.click-tracker a:hover {
|
||||
color: #7b59a5;
|
||||
.form-errors {
|
||||
color: #ffffff;
|
||||
text-align: center;
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.clicks-list {
|
||||
text-align: center;
|
||||
margin: 30vh 0 0 0;
|
||||
.form-errors h4 {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.clicks-number {
|
||||
color: #bb86fc;
|
||||
font-size: 125px;
|
||||
font-weight: bold;
|
||||
.clicks {
|
||||
color: #f68741;
|
||||
text-align: center;
|
||||
margin-top: 230px;
|
||||
}
|
||||
|
||||
.clicks-text {
|
||||
color: #bb86fc;
|
||||
font-size: 25px;
|
||||
font-weight: bold;
|
||||
.clicks h1 {
|
||||
font-size: 125px;
|
||||
}
|
||||
|
||||
.error-message {
|
||||
text-align: center;
|
||||
color: #ffffff;
|
||||
font-size: 50px;
|
||||
font-weight: bold;
|
||||
margin: 35vh auto 0 auto;
|
||||
.clicks h2 {
|
||||
font-size: 25px;
|
||||
}
|
||||
|
||||
.donation {
|
||||
color: #ffffff;
|
||||
list-style: none;
|
||||
text-align: center;
|
||||
margin: 30vh auto 0 auto;
|
||||
color: #ffffff;
|
||||
text-align: center;
|
||||
margin-top: 200px;
|
||||
}
|
||||
|
||||
.donation-title {
|
||||
font-size: 40px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 2vh;
|
||||
.donation h1 {
|
||||
font-size: 50px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.donation-patreon {
|
||||
font-size: 30px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 5vh;
|
||||
.donation h2 {
|
||||
font-size: 30px;
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
|
||||
.donation-bitcoin {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
.donation h2 a:link {
|
||||
color: #f68741;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.donation a:link {
|
||||
color: #bb86fc;
|
||||
text-decoration: none;
|
||||
.donation h2 a:visited {
|
||||
color: #f68741;
|
||||
}
|
||||
|
||||
.donation a:visited {
|
||||
color: #bb86fc;
|
||||
.donation h2 a:hover {
|
||||
color: #e26803;
|
||||
}
|
||||
|
||||
.donation a:hover {
|
||||
color: #7b59a5;
|
||||
.error {
|
||||
color: #ffffff;
|
||||
text-align: center;
|
||||
margin-top: 250px;
|
||||
}
|
||||
|
||||
.page-container {
|
||||
position: relative;
|
||||
min-height: 100vh;
|
||||
.error h1 {
|
||||
font-size: 100px;
|
||||
}
|
||||
|
||||
.content-wrap {
|
||||
padding-bottom: 2.5rem;
|
||||
.error h2 {
|
||||
font-size: 50px;
|
||||
}
|
||||
|
||||
footer {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 2.5rem;
|
||||
margin-bottom: 5vh;
|
||||
}
|
||||
|
||||
.footer-list {
|
||||
list-style: none;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.footer-list li {
|
||||
color: #ffffff;
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.footer-list a:link {
|
||||
color: #bb86fc;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.footer-list a:visited {
|
||||
color: #bb86fc;
|
||||
}
|
||||
|
||||
.footer-list a:hover {
|
||||
color: #7b59a5;
|
||||
}
|
||||
|
||||
.copyright {
|
||||
font-family: serif;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 2.5rem;
|
||||
color: #ffffff;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@@ -1,11 +1,8 @@
|
||||
{% extends "layout.html" %}
|
||||
|
||||
{% block body %}
|
||||
<ul class="clicks-list">
|
||||
<li><p class="clicks-number">{{ clicks }}</p></li>
|
||||
<li><p class="clicks-text">Click(s)</p></li>
|
||||
</ul>
|
||||
<div class="click-tracker">
|
||||
<a href="{{ url_for('tracker') }}">Track Another</a>
|
||||
</div>
|
||||
<div class="clicks">
|
||||
<h1>{{ clicks }}</h1>
|
||||
<h2>Click(s)</h2>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
{% extends "layout.html" %}
|
||||
|
||||
{% block body %}
|
||||
<ul class="donation">
|
||||
<li><p class="donation-title">Patreon</p></li>
|
||||
<li><a href="https://www.patreon.com/xemeds" target="_blank"><p class="donation-patreon">patreon.com/xemeds</p></a></li>
|
||||
<li><p class="donation-title">Bitcoin</p></li>
|
||||
<li><p class="donation-bitcoin">1Mg55rPVuQ2P8zKsCcLdsmgqH24uLXfLbR</p></li>
|
||||
</ul>
|
||||
<div class="donation">
|
||||
<h1>Patreon</h1>
|
||||
<h2><a href="https://www.patreon.com/xemeds" target="_blank">patreon.com/xemeds</a></h2>
|
||||
<h1>Bitcoin</h1>
|
||||
<p>1Mg55rPVuQ2P8zKsCcLdsmgqH24uLXfLbR</p>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
{% extends "layout.html" %}
|
||||
|
||||
{% block body %}
|
||||
<ul class="error-message">
|
||||
<li><p>{{ error_code }}</p></li>
|
||||
<li><p>{{ error_message }}</p></li>
|
||||
</ul>
|
||||
<div class="error">
|
||||
<h1>{{ error_code }}</h1>
|
||||
<h2>{{ error_message }}</h2>
|
||||
</div>
|
||||
{% endblock %}
|
||||
+20
-25
@@ -1,30 +1,25 @@
|
||||
{% extends "layout.html" %}
|
||||
|
||||
{% block body %}
|
||||
<form method="POST" action="" class="url-form">
|
||||
{% if form.errors %}
|
||||
<ul class="form-error-message">
|
||||
{% for error in form.url.errors %}
|
||||
<li>{{ error }}</li>
|
||||
{% endfor %}
|
||||
{% for error in form.token.errors %}
|
||||
<li>{{ error }}</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
{% endif %}
|
||||
{{ form.hidden_tag() }}
|
||||
<ul class='input-list'>
|
||||
<li>{{ form.url(placeholder="Enter the URL here", autofocus=true, class="url") }}</li>
|
||||
<li>{{ form.token(placeholder="Enter the token (optional)", autofocus=true, class="token") }}</li>
|
||||
<ul class="token-explanation">
|
||||
<li>tiny0.cc/token</li>
|
||||
<li>Token must be between 6 and 16 characters long</li>
|
||||
<li>It can only contain letters, numbers, underscores(_) and dashes(-)</li>
|
||||
</ul>
|
||||
<li>{{ form.submit(class="button") }}</li>
|
||||
</ul>
|
||||
</form>
|
||||
<div class="click-tracker">
|
||||
<a href="{{ url_for('tracker') }}">Click Tracker</a>
|
||||
<form method="POST" action="" class="url-form">
|
||||
<h1>< URL Shortener ></h1>
|
||||
{{ form.hidden_tag() }}
|
||||
{{ form.url(placeholder="Enter the URL here", autofocus=true, class="feedback-input") }}
|
||||
{{ form.token(placeholder="Enter the token (optional)", autofocus=true, class="feedback-input") }}
|
||||
<div class="tooltip">
|
||||
What's a token?
|
||||
<span class="tooltiptext"><p>tiny0.cc/token</p><p>Token must be between 6 and 16 characters long</p><p>It can only contain letters, numbers, underscores(_) and dashes(-)</p></span>
|
||||
</div>
|
||||
{{ form.submit(class="button") }}
|
||||
{% if form.errors %}
|
||||
<div class="form-errors">
|
||||
{% for error in form.url.errors %}
|
||||
<h4>{{ error }}</h4>
|
||||
{% endfor %}
|
||||
{% for error in form.token.errors %}
|
||||
<h4>{{ error }}</h4>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</form>
|
||||
{% endblock %}
|
||||
|
||||
+27
-75
@@ -8,86 +8,38 @@
|
||||
<link href="{{ url_for('static', filename='font.css') }}" rel="stylesheet">
|
||||
<link href="/static/style.css" rel="stylesheet" type="text/css"/>
|
||||
|
||||
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
|
||||
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
|
||||
|
||||
<title>tiny0 - Custom URL Shortener</title>
|
||||
</head>
|
||||
<body>
|
||||
<nav>
|
||||
<ul>
|
||||
<li class="logo">tiny0 - URL Shortener</li>
|
||||
<li class="items"><a href="{{ url_for('index') }}">Shortener</a></li>
|
||||
<li class="items"><a href="{{ url_for('tracker') }}">Tracker</a></li>
|
||||
<li class="items"><a href="#">Lookup</a></li>
|
||||
<li class="items"><a href="#">Report</a></li>
|
||||
<li class="items"><a href="{{ url_for('donate') }}">Donate</a></li>
|
||||
<li class="btn"><a href="#"><i class="fas fa-bars"></i></a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<div id="page-container">
|
||||
<div id="content-wrap">
|
||||
{% if form %}
|
||||
{% if not form.errors %}
|
||||
<body onload="typeTitle()">
|
||||
<div class="headers">
|
||||
<a class="title" id="title" href="{{ url_for('index') }}"></a>
|
||||
<p id="desc" class="desc"></p>
|
||||
</div>
|
||||
{% else %}
|
||||
<body>
|
||||
<div class="headers">
|
||||
<a class="title" href="{{ url_for('index') }}">tiny0</a>
|
||||
<h1 class="desc">Custom URL Shortener</h1>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% else %}
|
||||
<body>
|
||||
<div class="headers">
|
||||
<a class="title" href="{{ url_for('index') }}">tiny0</a>
|
||||
<h1 class="desc">Custom URL Shortener</h1>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% block body %}{% endblock %}
|
||||
|
||||
{% block body %}{% endblock %}
|
||||
|
||||
{% if form %}
|
||||
{% if not form.errors %}
|
||||
<script>
|
||||
var i = 0;
|
||||
var title_text = "tiny0";
|
||||
var desc_text = "Custom URL Shortener";
|
||||
var speed = 120;
|
||||
|
||||
function typeTitle() {
|
||||
if (i < title_text.length) {
|
||||
document.getElementById("title").innerHTML += title_text.charAt(i);
|
||||
i++;
|
||||
setTimeout(typeTitle, speed);
|
||||
}
|
||||
else {
|
||||
i = 0;
|
||||
setTimeout(typeDesc, 200)
|
||||
}
|
||||
}
|
||||
|
||||
function typeDesc() {
|
||||
if (i < desc_text.length) {
|
||||
document.getElementById("desc").innerHTML += desc_text.charAt(i);
|
||||
i++;
|
||||
setTimeout(typeDesc, speed);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
{% endif %}
|
||||
{% elif url %}
|
||||
<script>
|
||||
function copyURL() {
|
||||
var url = document.getElementById("url");
|
||||
url.select();
|
||||
url.setSelectionRange(0, 99999)
|
||||
document.execCommand("copy");
|
||||
}
|
||||
</script>
|
||||
{% endif %}
|
||||
</body>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
$(document).ready(function(){
|
||||
$('.btn').click(function(){
|
||||
$('.items').toggleClass("show");
|
||||
$('ul li').toggleClass("hide");
|
||||
});
|
||||
});
|
||||
{% block script %}{% endblock %}
|
||||
</script>
|
||||
</body>
|
||||
|
||||
<footer>
|
||||
<ul class="footer-list">
|
||||
<li class="copyright">© </li>
|
||||
<li>2020 Muhammed Ali Dilek</li>
|
||||
<ul>
|
||||
<li><a href="{{ url_for('donate') }}">Donate</a></li>
|
||||
<li><a href="https://github.com/xemeds" target="_blank">GitHub</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
© 2020 Muhammed Ali Dilek
|
||||
</footer>
|
||||
</html>
|
||||
|
||||
@@ -1,18 +1,17 @@
|
||||
{% extends "layout.html" %}
|
||||
|
||||
{% block body %}
|
||||
<form method="POST" action="" class="url-form">
|
||||
{% if form.errors %}
|
||||
<ul class="form-error-message">
|
||||
{% for error in form.url.errors %}
|
||||
<li>{{ error }}</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
{% endif %}
|
||||
{{ form.hidden_tag() }}
|
||||
<ul class='input-list'>
|
||||
<li>{{ form.url(placeholder="Enter the short URL here", autofocus=true, class="url") }}</li>
|
||||
<li>{{ form.submit(class="button") }}</li>
|
||||
</ul>
|
||||
</form>
|
||||
<form method="POST" action="" class="url-form">
|
||||
<h1>< Click Tracker ></h1>
|
||||
{{ form.hidden_tag() }}
|
||||
{{ form.url(placeholder="Enter the short URL here", autofocus=true, class="feedback-input") }}
|
||||
{{ form.submit(class="button") }}
|
||||
{% if form.errors %}
|
||||
<div class="form-errors">
|
||||
{% for error in form.url.errors %}
|
||||
<h4>{{ error }}</h4>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</form>
|
||||
{% endblock %}
|
||||
|
||||
@@ -1,13 +1,18 @@
|
||||
{% extends "layout.html" %}
|
||||
|
||||
{% block body %}
|
||||
<div class="url-form">
|
||||
<ul class='input-list'>
|
||||
<li><input type="text" value="{{ url }}" id="url" class="url" readonly></li>
|
||||
<li><button onclick="copyURL()" class="button">Copy</button></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="click-tracker">
|
||||
<a href="{{ url_for('tracker') }}">Click Tracker</a>
|
||||
</div>
|
||||
<div class="url-form">
|
||||
<h1>< Short URL ></h1>
|
||||
<input type="text" value="{{ url }}" id="url" class="feedback-input" readonly>
|
||||
<button onclick="copyURL()" class="button">Copy</button>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block script %}
|
||||
function copyURL() {
|
||||
var url = document.getElementById("url");
|
||||
url.select();
|
||||
url.setSelectionRange(0, 99999)
|
||||
document.execCommand("copy");
|
||||
}
|
||||
{% endblock %}
|
||||
|
||||
Reference in New Issue
Block a user