From 9bc34c35d55b19eff79b3d3cde51b69e89c73692 Mon Sep 17 00:00:00 2001
From: cubap <cubap@slu.edu>
Date: Mon, 23 Mar 2026 11:06:56 -0500
Subject: [PATCH] Add platform announcement banner and styles

Introduce a new announcement banner for platform early access and corresponding styles.
---
 web/css/tpen.css | 42 ++++++++++++++++++++++++++++++++++++++++++
 web/index.jsp    | 12 ++++++++++--
 2 files changed, 52 insertions(+), 2 deletions(-)

diff --git a/web/css/tpen.css b/web/css/tpen.css
index 41862268..326da6cf 100644
--- a/web/css/tpen.css
+++ b/web/css/tpen.css
@@ -1,3 +1,45 @@
+#announcementBanner.platform-announcement {
+    background: linear-gradient(90deg, #ffe066 0%, #ffd700 100%);
+    color: #333;
+    border: 2px solid #ffae00;
+    border-radius: 8px;
+    padding: 1em 2em;
+    margin: 0.5em auto 0.5em auto;
+    max-width: 700px;
+    font-size: 1.15em;
+    font-weight: 600;
+    display: flex;
+    align-items: center;
+    box-shadow: 0 2px 12px rgba(255, 174, 0, 0.15);
+    animation: pulseBanner 1.2s infinite alternate;
+    z-index: 100;
+}
+
+.announcement-icon {
+    font-size: 2em;
+    margin-right: 0.75em;
+    animation: bounceIcon 1.2s infinite alternate;
+}
+
+.announcement-text a {
+    color: #a65c00;
+    text-decoration: underline;
+    font-weight: bold;
+    transition: color 0.2s;
+}
+.announcement-text a:hover {
+    color: #ff6600;
+}
+
+@keyframes pulseBanner {
+    0% { box-shadow: 0 2px 12px rgba(255, 174, 0, 0.15); }
+    100% { box-shadow: 0 4px 24px 4px rgba(255, 174, 0, 0.35); }
+}
+
+@keyframes bounceIcon {
+    0% { transform: translateY(0); }
+    100% { transform: translateY(-8px) scale(1.1); }
+}
 /* Reset */
 body *{                     /* Change default behavior from content-box */
     -webkit-box-sizing:border-box;
diff --git a/web/index.jsp b/web/index.jsp
index 61b58801..5b98b8de 100644
--- a/web/index.jsp
+++ b/web/index.jsp
@@ -402,12 +402,20 @@
             <div align="center" class="tagline">
                 transcription for paleographical and editorial notation</div>
             <div id="header2">
-                <div id="maintenance" class="loud">
+                <!-- <div id="maintenance" class="loud">
                     <span class="ui-icon ui-icon-info left"></span>
                     Scheduled Maintenance: <span id="schedmaintenance"></span>
                     <span id="countdown"></span> <br>
                     <span id="upgradeMessage"></span>
-                    <script type="text/javascript">maintenanceDate();</script>
+                    <script type="text/javascript">maintenanceDate();</script> -->
+                <div id="announcementBanner" class="platform-announcement">
+                    <span class="announcement-icon" aria-hidden="true">🚀</span>
+                    <span class="announcement-text">
+                        <strong>New Platform Early Access:</strong>
+                        <a href="https://three.t-pen.org/announcements/2026/03/17/early-access-announcement.html" target="_blank" rel="noopener noreferrer">
+                            Try the freedom of TPEN 3.0! Developing in early access&hellip;
+                        </a>
+                    </span>
                 </div>
                     <%
                     // #266 This only returns the person in session at the moment...