Changed the styling of all the pages
This commit is contained in:
xemeds
@@ -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 %}
|
||||
|
||||
+28
-76
@@ -7,87 +7,39 @@
|
||||
<link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}">
|
||||
<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