diff --git a/css/animations.css b/css/animations.css
index 7b2c15b..6f28dc3 100644
--- a/css/animations.css
+++ b/css/animations.css
@@ -75,3 +75,12 @@
background: var(--border-color-flash-1);
}
}
+
+@keyframes tfBannerAnimation {
+ from {
+ margin-top: -200px;
+ }
+ to {
+ margin-top: 0px;
+ }
+}
diff --git a/css/style.css b/css/style.css
index c5f7b17..874fcff 100644
--- a/css/style.css
+++ b/css/style.css
@@ -55,3 +55,27 @@ html {
animation-duration: 20s;
animation-name: backgroundAnimation;
}
+
+#teafire-banner {
+ height: 50px;
+ width: 180px;
+ padding: 20px;
+ margin-top: -200px;
+ z-index: 1;
+ animation-timing-function: linear;
+ float: right;
+}
+
+#teafire-banner p {
+ color: teal;
+ float: left;
+ font-size: 23pt;
+ font-weight: bolder;
+ padding-top: 8px;
+ padding-left: 5px;
+}
+#teafire-banner img {
+ color: teal;
+ height: 50px;
+ float: left;
+}
diff --git a/frame.html b/frame.html
index 36161b2..3d1ebfc 100644
--- a/frame.html
+++ b/frame.html
@@ -11,6 +11,10 @@
+
+
+
TealFire
+
0
diff --git a/img/logo128x128.png b/img/logo128x128.png
new file mode 100644
index 0000000..26c04d5
Binary files /dev/null and b/img/logo128x128.png differ
diff --git a/js/app.js b/js/app.js
index ff27f7b..3d75e33 100644
--- a/js/app.js
+++ b/js/app.js
@@ -1,5 +1,6 @@
const subCount = document.getElementById("subCount");
const frame = document.getElementById("frame");
+const tfBanner = document.getElementById("teafire-banner");
let subCountNumber = 0;
@@ -33,4 +34,34 @@ function sub(subName) {
updateSubCount();
}, 11000);
}
+
+function showTealFireBanner() {
+ tfBanner.style.animationName = "tfBannerAnimation";
+ tfBanner.style.animationDuration = "3s";
+ tfBanner.style.animationDirection = "normal";
+ setTimeout(() => {
+ tfBanner.style.marginTop = "0px";
+ tfBanner.style.animationName = "";
+ tfBanner.style.animationDuration = "";
+ }, 3000);
+}
+
+function closeTealFireBanner() {
+ tfBanner.style.animationName = "tfBannerAnimation";
+ tfBanner.style.animationDuration = "3s";
+ tfBanner.style.animationDirection = "reverse";
+
+ setTimeout(() => {
+ tfBanner.style.marginTop = "-200px";
+ tfBanner.style.animationName = "";
+ tfBanner.style.animationDuration = "";
+ }, 3000);
+}
+
+setInterval(() => {
+ showTealFireBanner();
+ setTimeout(() => {
+ closeTealFireBanner();
+ }, 20000);
+}, 300000);
updateSubCount();