Added a typing title and description to the home page
This commit is contained in:
@@ -9,6 +9,21 @@ body {
|
|||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.header {
|
||||||
|
color: #ffffff;
|
||||||
|
text-align: center;
|
||||||
|
margin-top: 5%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.desc {
|
||||||
|
margin-top: 1%;
|
||||||
|
}
|
||||||
|
|
||||||
.container {
|
.container {
|
||||||
background-color: #2c2c2c;
|
background-color: #2c2c2c;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
@@ -43,6 +58,7 @@ body {
|
|||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
color: #000000;
|
color: #000000;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
|
padding: 0 1% 0 1%;
|
||||||
margin: 0 3% 0 1%;
|
margin: 0 3% 0 1%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -1,13 +1,47 @@
|
|||||||
{% extends "layout.html" %}
|
{% extends "layout.html" %}
|
||||||
|
|
||||||
{% block body %}
|
{% block body %}
|
||||||
<div class="container">
|
<body onload="typeTitle()">
|
||||||
<form method="POST" action="">
|
<div class="header">
|
||||||
{{ form.hidden_tag() }}
|
<h1 id="title" class="title"></h1>
|
||||||
<div class="inputs">
|
<h1 id="desc" class="desc"></h1>
|
||||||
{{ form.url(placeholder="Enter the URL here", class="url") }}
|
</div>
|
||||||
{{ form.submit(class="submit") }}
|
|
||||||
</div>
|
<div class="container">
|
||||||
</form>
|
<form method="POST" action="">
|
||||||
</div>
|
{{ form.hidden_tag() }}
|
||||||
|
<div class="inputs">
|
||||||
|
{{ form.url(placeholder="Enter the URL here", class="url") }}
|
||||||
|
{{ form.submit(class="submit") }}
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<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;
|
||||||
|
typeDesc();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function typeDesc() {
|
||||||
|
if (i < desc_text.length) {
|
||||||
|
document.getElementById("desc").innerHTML += desc_text.charAt(i);
|
||||||
|
i++;
|
||||||
|
setTimeout(typeDesc, speed);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|||||||
@@ -8,7 +8,7 @@
|
|||||||
|
|
||||||
<title>tiny0 - Custom URL Shortener</title>
|
<title>tiny0 - Custom URL Shortener</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
|
||||||
{% block body %}{% endblock %}
|
{% block body %}{% endblock %}
|
||||||
</body>
|
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
Reference in New Issue
Block a user