Update app.py

app.py

@@ -28,7 +28,7 @@ DISCORD_INVITE = "https://discord.gg/YHECTft87Z"
 DISCORD_CHANNEL = "build-small-hackathon-official"
 
 
-HEADER_HTML = """
+HEADER_HTML_OLD = """
 <div class="bsh-banner">
     <h1>🪵 Build Small Hackathon</h1>
     <div class="tagline">Making AI Fun Again</div>
@@ -37,6 +37,13 @@ HEADER_HTML = """
 </div>
 """
 
+HEADER_HTML = """
+<div class="bsh-banner-img">
+    <img src="https://cdn-uploads.huggingface.co/production/uploads/60d2dc1007da9c17c72708f8/Ctx1Jh4nImulMYS2PRClZ.png"
+         alt="Build Small Hackathon — Small Models, Big Adventures" />
+</div>
+"""
+
 INFO_ROW_HTML = """
 <div class="bsh-info-row">
     <div class="bsh-card">
@@ -77,16 +84,16 @@ DATES_ROW_HTML = """
     <div class="bsh-dates">
         <div class="bsh-title">✦ Trail Map · Key Dates</div>
         <div class="bsh-dates-grid">
-            <div>📅 <b>Reg closes:</b> Wed, May 27 · 23:59 UTC</div>
-            <div>🎟️ <b>Credits:</b> Thu, May 28</div>
-            <div>🚀 <b>Hack opens:</b> Fri, May 29</div>
-            <div>🏁 <b>Submit by:</b> Mon, June 8</div>
+            <div>📅 <b>Reg closes:</b> Wed, June 3 · 23:59 UTC</div>
+            <div>🎟️ <b>Credits:</b> Thu, June 4</div>
+            <div>🚀 <b>Hack opens:</b> Fri, June 5 · 00:01 UTC</div>
+            <div>🏁 <b>Submit by:</b> Mon, June 15 · 23:59 UTC</div>
         </div>
-        <div class="bsh-warn">⛔ No registrations accepted once the event starts. Lock it in before May 27!</div>
+        <div class="bsh-warn">⛔ No registrations accepted once the event starts. Lock it in before June 3!</div>
     </div>
     <div class="bsh-counter">
-        <div class="bsh-counter-title">🏕️ Hack opens in</div>
-        <div class="bsh-counter-target">May 29, 2026 · 00:00 UTC</div>
+        <div class="bsh-counter-title">⏳ Registration closes in</div>
+        <div class="bsh-counter-target">June 3, 2026 · 23:59 UTC</div>
         <div class="bsh-nums">
             <div class="bsh-unit"><span class="bsh-num" id="bsh-days">--</span><span class="bsh-lbl">Days</span></div>
             <div class="bsh-unit"><span class="bsh-num" id="bsh-hours">--</span><span class="bsh-lbl">Hrs</span></div>
@@ -105,7 +112,7 @@ DISCORD_RIBBON_HTML = f"""
 
 COUNTDOWN_JS = """
 () => {
-    const targetDate = new Date(Date.UTC(2026, 4, 29, 0, 0, 0));
+    const targetDate = new Date(Date.UTC(2026, 5, 4, 0, 0, 0));
     function update() {
         const now = new Date();
         const diff = targetDate - now;
@@ -463,44 +470,18 @@ body.dark .gradio-container,
 }
 
 /* Banner */
-.bsh-banner {
-    background: var(--bsh-banner-bg);
-    color: var(--bsh-banner-text);
-    border-radius: 14px;
-    padding: 20px 22px;
+.bsh-banner-img {
     margin: 0 0 12px 0;
-    text-align: center;
+    border-radius: 14px;
+    overflow: hidden;
     border: 1px solid var(--bsh-card-border);
     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
+    line-height: 0;  /* kills the phantom gap under the img */
 }
-.bsh-banner h1 {
-    margin: 0 0 4px 0 !important;
-    font-size: 28px !important;
-    font-weight: 800 !important;
-    letter-spacing: -0.5px !important;
-    color: var(--bsh-banner-text) !important;
-    line-height: 1.15 !important;
-}
-.bsh-banner .tagline {
-    font-size: 16px;
-    font-style: italic;
-    opacity: 0.92;
-    margin-bottom: 4px;
-}
-.bsh-banner .meta {
-    font-size: 14px;
-    opacity: 0.85;
-}
-.bsh-banner .placeholder {
-    margin-top: 12px;
-    display: inline-block;
-    background: rgba(245, 236, 217, 0.12);
-    border: 1px dashed rgba(245, 236, 217, 0.40);
-    border-radius: 6px;
-    padding: 4px 12px;
-    font-size: 11px;
-    opacity: 0.80;
-    letter-spacing: 0.3px;
+.bsh-banner-img img {
+    display: block;
+    width: 100%;
+    height: auto;
 }
 
 /* Three-card info row */
@@ -597,7 +578,7 @@ body.dark .gradio-container,
     font-size: 13px;
     color: var(--bsh-text);
 }
-.bsh-dates-grid b { color: var(--bsh-accent); font-weight: 700; }
+.bsh-dates-grid b { color: var(--bsh-accent) !important; font-weight: 700; }
 .bsh-warn {
     margin-top: 10px;
     background: var(--bsh-warn-bg);
@@ -614,14 +595,14 @@ body.dark .gradio-container,
     border: 1px solid var(--bsh-card-border);
     border-radius: 10px;
     padding: 12px 14px;
-    color: var(--bsh-counter-num);
+    color: var(--bsh-counter-num) !important;
     text-align: center;
     display: flex;
     flex-direction: column;
     justify-content: center;
 }
 .bsh-counter-title {
-    color: var(--bsh-counter-num);
+    color: var(--bsh-counter-num) !important;
     font-size: 11px;
     letter-spacing: 1.5px;
     font-weight: 800;
@@ -629,7 +610,7 @@ body.dark .gradio-container,
     margin-bottom: 2px;
 }
 .bsh-counter-target {
-    color: var(--bsh-counter-label);
+    color: var(--bsh-counter-label) !important;
     font-size: 11px;
     font-style: italic;
     margin-bottom: 8px;
@@ -649,13 +630,13 @@ body.dark .gradio-container,
     font-family: 'Courier New', monospace;
     font-size: 22px;
     font-weight: 700;
-    color: var(--bsh-counter-num);
+    color: var(--bsh-counter-num) !important;
     line-height: 1;
 }
 .bsh-lbl {
     font-size: 9px;
     letter-spacing: 1px;
-    color: var(--bsh-counter-label);
+    color: var(--bsh-counter-label) !important;
     margin-top: 4px;
     text-transform: uppercase;
 }
@@ -721,7 +702,6 @@ body.dark .gradio-container,
 @media (max-width: 760px) {
     .bsh-info-row { grid-template-columns: 1fr; }
     .bsh-dates-row { grid-template-columns: 1fr; }
-    .bsh-banner h1 { font-size: 24px !important; }
 }
 """