nahakubuilder/flask_url_shortener
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added a typing title and description to the home page

Browse Source
This commit is contained in:
xemeds
2020-07-19 17:36:21 +00:00
parent 0cddb3e4a6
commit 896e41e8e4
3 changed files with 62 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tiny0/static/style.css
+16
View File
@@ -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%;
} }
tiny0/templates/index.html
+34
View File
@@ -1,6 +1,12 @@
{% extends "layout.html" %} {% extends "layout.html" %}
{% block body %} {% block body %}
<body onload="typeTitle()">
<div class="header">
<h1 id="title" class="title"></h1>
<h1 id="desc" class="desc"></h1>
</div>
<div class="container"> <div class="container">
<form method="POST" action=""> <form method="POST" action="">
{{ form.hidden_tag() }} {{ form.hidden_tag() }}
@@ -10,4 +16,32 @@
</div> </div>
</form> </form>
</div> </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 %}
tiny0/templates/layout.html
+2 -2
View File
@@ -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>