From 79a584f62521dc476666def355bc5b12d2c4617e Mon Sep 17 00:00:00 2001
From: Matt Batchelder <matt@buzzbee.dev>
Date: Wed, 11 Feb 2026 08:52:52 -0500
Subject: [PATCH] feat: Implement dynamic typing animation for the home page
 hero title and customize the footer template.

---
 custom/public/assets/css/oribi.css          | 49 +++++++++++++++++++
 custom/public/assets/js/typing-animation.js | 54 +++++++++++++++++++++
 custom/templates/base/footer.tmpl           | 22 +++++++++
 custom/templates/home.tmpl                  |  3 +-
 4 files changed, 127 insertions(+), 1 deletion(-)
 create mode 100644 custom/public/assets/js/typing-animation.js
 create mode 100644 custom/templates/base/footer.tmpl

diff --git a/custom/public/assets/css/oribi.css b/custom/public/assets/css/oribi.css
index fa4f19c..5139666 100644
--- a/custom/public/assets/css/oribi.css
+++ b/custom/public/assets/css/oribi.css
@@ -59,6 +59,55 @@ footer {
     -webkit-text-fill-color: transparent;
 }
 
+.orange-heart {
+    color: var(--custom-primary) !important;
+    background: none !important;
+    -webkit-background-clip: unset !important;
+    background-clip: unset !important;
+    -webkit-text-fill-color: var(--custom-primary) !important;
+    display: inline-block;
+    filter: drop-shadow(0 0 5px rgba(208, 64, 0, 0.8));
+    text-shadow: none !important;
+    margin-left: 0.3ch;
+}
+
+.orange-heart::after,
+.orange-heart::before {
+    content: none !important;
+    display: none !important;
+}
+
+@keyframes cursor-blink {
+
+    from,
+    to {
+        opacity: 1;
+    }
+
+    50% {
+        opacity: 0;
+    }
+}
+
+.typing-text {
+    display: inline-block;
+    position: relative;
+}
+
+/* Blinking cursor that moves with the text */
+.typing-text::after {
+    content: "";
+    display: inline-block;
+    width: 2px;
+    height: 1.1em;
+    background-color: var(--custom-primary);
+    animation: cursor-blink 1s step-end infinite;
+    box-shadow: 0 0 8px var(--custom-primary);
+    margin-left: 2px;
+    vertical-align: middle;
+    transform: translateY(-0.05em);
+}
+
 .hero-subtitle {
     font-size: 1.5rem;
     color: #888;
diff --git a/custom/public/assets/js/typing-animation.js b/custom/public/assets/js/typing-animation.js
new file mode 100644
index 0000000..860ab87
--- /dev/null
+++ b/custom/public/assets/js/typing-animation.js
@@ -0,0 +1,54 @@
+// Typing animation for hero title
+(function () {
+    const typingElement = document.querySelector('.typing-text');
+    if (!typingElement) return;
+
+    // Apply gradient styling
+    typingElement.style.background = 'linear-gradient(135deg, #fff, #ccc)';
+    typingElement.style.webkitBackgroundClip = 'text';
+    typingElement.style.backgroundClip = 'text';
+    typingElement.style.webkitTextFillColor = 'transparent';
+
+    const names = ['Oribi Tech', 'OTS Signs'];
+    let currentNameIndex = 0;
+    let currentCharIndex = 0;
+    let isDeleting = false;
+    let isPaused = false;
+
+    function type() {
+        const currentName = names[currentNameIndex];
+
+        if (isPaused) {
+            setTimeout(type, 2000); // Pause for 2 seconds
+            isPaused = false;
+            return;
+        }
+
+        if (isDeleting) {
+            // Erase character
+            currentCharIndex--;
+            typingElement.textContent = currentName.substring(0, currentCharIndex);
+
+            if (currentCharIndex === 0) {
+                isDeleting = false;
+                currentNameIndex = (currentNameIndex + 1) % names.length;
+                setTimeout(type, 500); // Pause before typing next name
+                return;
+            }
+            setTimeout(type, 50); // Erasing speed
+        } else {
+            // Type character
+            currentCharIndex++;
+            typingElement.textContent = currentName.substring(0, currentCharIndex);
+
+            if (currentCharIndex === currentName.length) {
+                isPaused = true;
+                isDeleting = true;
+            }
+            setTimeout(type, isDeleting ? 2000 : 100); // Typing speed
+        }
+    }
+
+    // Start the animation
+    type();
+})();
diff --git a/custom/templates/base/footer.tmpl b/custom/templates/base/footer.tmpl
new file mode 100644
index 0000000..6d9e5c8
--- /dev/null
+++ b/custom/templates/base/footer.tmpl
@@ -0,0 +1,22 @@
+{{/* 
+Custom footer template for Gitea
+This overrides the default footer to remove licenses and API links
+*/}}
+<footer>
+	<div class="ui container">
+		<div class="ui left">
+			{{.locale.Tr "powered_by" "Gitea"}}
+			{{if .ShowFooterVersion}}
+				{{.locale.Tr "version"}}:
+				{{if .IsAdmin}}
+					<a href="{{AppSubUrl}}/admin/config">{{AppVer}}</a>
+				{{else}}
+					{{AppVer}}
+				{{end}}
+			{{end}}
+		</div>
+		<div class="ui right links">
+			{{/* Removed licenses and API links */}}
+		</div>
+	</div>
+</footer>
diff --git a/custom/templates/home.tmpl b/custom/templates/home.tmpl
index d030ca3..a1f98fd 100644
--- a/custom/templates/home.tmpl
+++ b/custom/templates/home.tmpl
@@ -2,9 +2,10 @@
 <div role="main" aria-label="{{.Title}}" class="page-content home">
     <div class="home-container">
         <img class="logo-img" src="{{AppSubUrl}}/assets/img/logo.png" alt="Oribi Technology Services"/>
-        <h1 class="hero-title">Oribi Technology Services</h1>
+        <h1 class="hero-title"><span class="typing-text"></span><span class="orange-heart">&#10084;&#65038;</span> Open Source</h1>
         <div class="hero-subtitle">Internal Code Repository</div>
         
     </div>
 </div>
+<script src="{{AppSubUrl}}/assets/js/typing-animation.js"></script>
 {{template "base/footer" .}}