Added a typing title and description to the home page

2020-07-19 17:36:21 +00:00
parent 0cddb3e4a6
commit 896e41e8e4
3 changed files with 62 additions and 12 deletions
@@ -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 {
    background-color: #2c2c2c;
    border-radius: 8px;
@@ -43,6 +58,7 @@ body {
    border-radius: 3px;
    color: #000000;
    display: inline-block;
+    padding: 0 1% 0 1%;
    margin: 0 3% 0 1%;
 }

@@ -1,13 +1,47 @@
 {% extends "layout.html" %}

 {% block body %}
-	<div class="container">
-		<form method="POST" action="">
-			{{ form.hidden_tag() }}
-			<div class="inputs">
-				{{ form.url(placeholder="Enter the URL here", class="url") }}
-				{{ form.submit(class="submit") }}
-			</div>
-		</form>
-	</div>
+	<body onload="typeTitle()">
+		<div class="header">
+			<h1 id="title" class="title"></h1>
+			<h1 id="desc" class="desc"></h1>
+		</div>
+
+		<div class="container">
+			<form method="POST" action="">
+				{{ 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 %}
@@ -8,7 +8,7 @@
 		
 		<title>tiny0 - Custom URL Shortener</title>
 	</head>
-	<body>
-		{% block body %}{% endblock %}
-	</body>
+
+	{% block body %}{% endblock %}
+
 </html>