Changed the styling of all the pages

This commit is contained in:
xemeds
2020-08-24 15:25:42 +03:00
parent e65f43e401
commit d5a591317d
10 changed files with 308 additions and 317 deletions
+1 -1
View File
@@ -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

+211 -168
View File
@@ -1,204 +1,273 @@
* {
margin: 0;
padding: 0;
font-family: 'Roboto Mono', monospace;
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;
}
.input-list {
width: 100%;
list-style: none;
max-width: 700px;
text-align: center;
margin: 220px auto 0 auto;
}
.url {
width: 80%;
padding: 10px;
background: #121212;
border: 2px solid #bb86fc;
.url-form h1 {
color: #ffffff;
margin-bottom: 2vh;
text-align: center;
margin-bottom: 30px;
}
.url:focus {
border-color: #7b59a5;
.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;
}
.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 {
@media all and (max-width: 800px) {
.url-form {
max-width: 420px;
}
}
.tooltip {
color: #ffffff;
list-style: none;
text-align: center;
margin: -1vh 0 2vh 0;
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
margin-bottom: 15px;
}
.token-explanation {
.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;
}
.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;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
.form-errors {
color: #ffffff;
font-size: 13px;
list-style: none;
text-align: center;
margin-bottom: 2vh;
margin-top: 15px;
}
.click-tracker {
.form-errors h4 {
margin-bottom: 5px;
}
.clicks {
color: #f68741;
text-align: center;
margin-top: 5vh;
margin-top: 230px;
}
.click-tracker a:link {
color: #bb86fc;
text-decoration: none;
font-size: 25px;
font-weight: bold;
}
.click-tracker a:visited {
color: #bb86fc;
}
.click-tracker a:hover {
color: #7b59a5;
}
.clicks-list {
text-align: center;
margin: 30vh 0 0 0;
}
.clicks-number {
color: #bb86fc;
.clicks h1 {
font-size: 125px;
font-weight: bold;
}
.clicks-text {
color: #bb86fc;
.clicks h2 {
font-size: 25px;
font-weight: bold;
}
.error-message {
text-align: center;
color: #ffffff;
font-size: 50px;
font-weight: bold;
margin: 35vh auto 0 auto;
}
.donation {
color: #ffffff;
list-style: none;
text-align: center;
margin: 30vh auto 0 auto;
margin-top: 200px;
}
.donation-title {
font-size: 40px;
font-weight: bold;
margin-bottom: 2vh;
.donation h1 {
font-size: 50px;
margin-bottom: 30px;
}
.donation-patreon {
.donation h2 {
font-size: 30px;
font-weight: bold;
margin-bottom: 5vh;
margin-bottom: 60px;
}
.donation-bitcoin {
font-size: 16px;
font-weight: bold;
}
.donation a:link {
color: #bb86fc;
.donation h2 a:link {
color: #f68741;
text-decoration: none;
}
.donation a:visited {
color: #bb86fc;
.donation h2 a:visited {
color: #f68741;
}
.donation a:hover {
color: #7b59a5;
.donation h2 a:hover {
color: #e26803;
}
.page-container {
position: relative;
min-height: 100vh;
.error {
color: #ffffff;
text-align: center;
margin-top: 250px;
}
.content-wrap {
padding-bottom: 2.5rem;
.error h1 {
font-size: 100px;
}
.error h2 {
font-size: 50px;
}
footer {
@@ -206,32 +275,6 @@ footer {
bottom: 0;
width: 100%;
height: 2.5rem;
margin-bottom: 5vh;
}
.footer-list {
list-style: none;
color: #ffffff;
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;
}
+4 -7
View File
@@ -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 %}
+6 -6
View File
@@ -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 %}
+4 -4
View File
@@ -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 %}
+15 -20
View File
@@ -1,30 +1,25 @@
{% extends "layout.html" %}
{% block body %}
<form method="POST" action="" class="url-form">
<form method="POST" action="" class="url-form">
<h1>&#60 URL Shortener &#62</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 %}
<ul class="form-error-message">
<div class="form-errors">
{% for error in form.url.errors %}
<li>{{ error }}</li>
<h4>{{ error }}</h4>
{% endfor %}
{% for error in form.token.errors %}
<li>{{ error }}</li>
<h4>{{ error }}</h4>
{% 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>
</div>
{% endif %}
</form>
{% endblock %}
+22 -70
View File
@@ -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>
<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 %}
<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>
{% 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);
}
}
$(document).ready(function(){
$('.btn').click(function(){
$('.items').toggleClass("show");
$('ul li').toggleClass("hide");
});
});
{% block script %}{% endblock %}
</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>
<footer>
<ul class="footer-list">
<li class="copyright">&#169; </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>
&#169; 2020 Muhammed Ali Dilek
</footer>
</html>
+12 -13
View File
@@ -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 method="POST" action="" class="url-form">
<h1>&#60 Click Tracker &#62</h1>
{{ 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.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 %}
+14 -9
View File
@@ -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>&#60 Short URL &#62</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 %}