From a760a4def7a2c3916c404361011c862b4b7f9d93 Mon Sep 17 00:00:00 2001
From: Nikita A <66848627+nikita-1801@users.noreply.github.com>
Date: Sat, 1 May 2021 01:03:13 +0530
Subject: [PATCH 1/2] Add html file for splash screen
---
views/splash.html | 19 +++++++++++++++++++
1 file changed, 19 insertions(+)
create mode 100644 views/splash.html
diff --git a/views/splash.html b/views/splash.html
new file mode 100644
index 0000000..b0888a1
--- /dev/null
+++ b/views/splash.html
@@ -0,0 +1,19 @@
+
+
+
+
+ Splash Screen
+
+
+
+
+
+
+
+
+
From 78fd045e67015ed7f991ce86e939257cbb3b0b18 Mon Sep 17 00:00:00 2001
From: Nikita A <66848627+nikita-1801@users.noreply.github.com>
Date: Sat, 1 May 2021 01:03:38 +0530
Subject: [PATCH 2/2] Add css file for splash screen
---
public/css/splash.css | 59 +++++++++++++++++++++++++++++++++++++++++++
1 file changed, 59 insertions(+)
create mode 100644 public/css/splash.css
diff --git a/public/css/splash.css b/public/css/splash.css
new file mode 100644
index 0000000..cffdb78
--- /dev/null
+++ b/public/css/splash.css
@@ -0,0 +1,59 @@
+@import url('https://fonts.googleapis.com/css?family=Staatliches');
+
+body {
+ margin: 0;
+ font-family: 'Staatliches', cursive;
+}
+
+.loader {
+ position: fixed;
+ left: 0;
+ top: 0;
+ background: #e6e2dd;
+ width: 100%;
+ height: 100vh;
+ animation: backgroundChange .5s linear 3.5s forwards;
+}
+
+.load-text {
+ left: 50%;
+ top: 50%;
+ transform: translate(-50%, -50%);
+ position: absolute;
+ font-size: 10vmax;
+ width: fit-content;
+ display: flex;
+ animation: colorChange .5s linear 3.5s forwards;
+}
+
+.loaded-text {
+ transform: scale(1.5);
+ animation: scaleText .5s linear 1s forwards;
+}
+
+.loading-text {
+ width: 0;
+ color: #d48369;
+ overflow: hidden;
+ animation: expand .5s linear 2s forwards;
+}
+
+@keyframes scaleText {
+ from {transform: scale(1.5)}
+ to {transform: scale(1)}
+}
+
+@keyframes expand {
+ from {width: 0;}
+ to {width: 35vmax;}
+}
+
+@keyframes backgroundChange {
+ from {background-color: #e6e2dd}
+ to {background-color: #373a36}
+}
+
+@keyframes colorChange {
+ from {color: #373a36}
+ to {color: #e6e2dd}
+}