From edcbad7d65b0da69eb9f685c2805b8e849add865 Mon Sep 17 00:00:00 2001
From: Vladimir Prelovac <vprelovac@gmail.com>
Date: Tue, 28 Jan 2025 13:45:41 -0800
Subject: [PATCH] kite updates

---
 kite.html | 35 ++++++++++++++++++++++++++++++-----
 1 file changed, 30 insertions(+), 5 deletions(-)

diff --git a/kite.html b/kite.html
index b8b5769..3aeb0f0 100644
--- a/kite.html
+++ b/kite.html
@@ -1270,7 +1270,10 @@ <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">${data.title}
         <div x-show="initialLoading" x-transition class="fixed inset-0 flex items-center justify-center bg-white dark:bg-dark-bg z-50">
             <div class="text-center">
                 <img :src="$store.theme.current === 'dark' ? '{{ static_path }}/svg/kite_dark.svg' : '{{ static_path }}/svg/kite.svg'" alt="Kite Logo" class="w-24 h-24 mx-auto mb-4 animate-bounce" />
-                <h1 class="text-2xl font-bold text-gray-800 dark:text-dark-text mb-2">Kite</h1>
+                <h1 class="text-2xl font-bold text-gray-800 dark:text-dark-text mb-2 flex items-center">
+                    Kite
+                    <span class="bg-yellow-200 font-medium mt-0.5 ml-2 rounded-lg px-2 py-0.5 text-xs text-black">BETA</span>
+                </h1>
                 <p class="text-xl text-gray-600 dark:text-gray-400">News. Elevated.</p>
                 <p x-text="loadingProgress > 20 ? loadingProgress + '%' : ''" class="mt-4 text-sm text-gray-500 dark:text-gray-400 min-h-[1.5rem]"></p>
             </div>
@@ -1329,7 +1332,7 @@ <h2 class="text-xl font-semibold text-gray-900 dark:text-white mb-3">Contact</h2
                                 @click="closeIntro()"
                                 class="px-6 py-3 bg-black text-white font-semibold rounded-lg hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-opacity-75 transition-colors duration-200 ease-in-out"
                             >
-                                Close
+                                Start
                             </button>
                         </div>
                     </div>
@@ -1604,8 +1607,30 @@ <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200">World turbule
                     <template x-if="viewMode === 'list' && currentCategory === 'OnThisDay'">
                         <div class="py-4" x-data="{ hoveredLink: null, popupContent: null, popupVisible: false, popupPosition: { x: 0, y: 0 } }">
                             <h2 class="text-2xl font-bold mb-4 text-gray-800 dark:text-gray-200" x-text="new Date().toLocaleString('en-US', { month: 'long', day: 'numeric' })"></h2>
+                            
+                            <!-- Events Section -->
+                            <h3 class="text-xl font-bold mb-4 text-gray-700 dark:text-gray-300">Events</h3>
+                            <div class="timeline mb-8">
+                                <template x-for="(event, index) in stories.filter(e => !e.content.toLowerCase().includes('born on this day') && !e.content.toLowerCase().includes('died on this day'))" :key="index">
+                                    <div class="row">
+                                        <div class="head">
+                                            <span class="step"></span>
+                                            <span class="item-title" x-text="event.year"></span>
+                                        </div>
+                                        <div class="body">
+                                            <span 
+                                                class="text-gray-700 dark:text-gray-300"
+                                                x-html="event.content.replace(/href=/g, 'class=\'underline\' href=')"
+                                            ></span>
+                                        </div>
+                                    </div>
+                                </template>
+                            </div>
+
+                            <!-- People Section -->
+                            <h3 class="text-xl font-bold mb-4 text-gray-700 dark:text-gray-300">People</h3>
                             <div class="timeline">
-                                <template x-for="(event, index) in stories" :key="index">
+                                <template x-for="(event, index) in stories.filter(e => e.content.toLowerCase().includes('born on this day') || e.content.toLowerCase().includes('died on this day'))" :key="index">
                                     <div class="row">
                                         <div class="head">
                                             <span class="step"></span>
@@ -2331,8 +2356,8 @@ <h4 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-2">Help imp
                                     <option value="it">Italiano (Italian)</option>
                                     <option value="fr">Français (French)</option>
                                     <option value="es">Español (Spanish)</option>                                    
-<!--                                     <option value="de">Deutsch (German)</option>
-                                    <option value="zh">中文 (Chinese)</option>
+                                    <option value="de">Deutsch (German)</option>
+<!--                                    <option value="zh">中文 (Chinese)</option>
                                     <option value="ja">日本語 (Japanese)</option>
                                     <option value="hi">हिन्दी (Hindi)</option>
  -->                                </select>