diff --git a/public/index.html b/public/index.html index 4fc7a23..cce9ef1 100644 --- a/public/index.html +++ b/public/index.html @@ -18,24 +18,25 @@ font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: #00003d; /* GE Aerospace Deep Navy */ color: #fff; - overflow-x: hidden; + overflow: hidden; + height: 100vh; } .container { max-width: 100%; margin: 0 auto; - padding: 50px 60px; - padding-bottom: 150px; + padding: 20px 40px; + padding-bottom: 80px; } .header { display: grid; grid-template-columns: auto 1fr auto; align-items: center; - gap: 60px; - margin-bottom: 60px; - border-bottom: 4px solid #4181ff; /* GE Sky Blue */ - padding-bottom: 40px; + gap: 30px; + margin-bottom: 25px; + border-bottom: 3px solid #4181ff; /* GE Sky Blue */ + padding-bottom: 15px; } .logo-container { @@ -44,7 +45,7 @@ } .logo-container img { - height: 160px; + height: 90px; width: auto; } @@ -52,27 +53,27 @@ text-align: center; display: flex; flex-direction: column; - gap: 15px; + gap: 5px; } .location-title { - font-size: 32px; + font-size: 20px; font-weight: 600; color: #eaeaea; /* GE Tungsten */ text-transform: uppercase; - letter-spacing: 3px; + letter-spacing: 2px; } .header-center h1 { - font-size: 72px; + font-size: 42px; font-weight: 700; text-transform: uppercase; - letter-spacing: 3px; + letter-spacing: 2px; color: #fff; } .clock { - font-size: 48px; + font-size: 28px; font-weight: 600; letter-spacing: 1px; color: #4181ff; /* GE Sky Blue */ @@ -82,16 +83,16 @@ .connection-status { position: fixed; - top: 30px; - right: 30px; - padding: 20px 35px; - border-radius: 10px; - font-size: 28px; + top: 0; + right: 0; + padding: 12px 20px; + border-radius: 0 0 0 8px; + font-size: 18px; font-weight: 700; z-index: 1000; display: flex; align-items: center; - gap: 15px; + gap: 10px; text-transform: uppercase; letter-spacing: 1px; } @@ -112,22 +113,22 @@ } .status-dot { - width: 18px; - height: 18px; + width: 12px; + height: 12px; border-radius: 50%; background: #00003d; } .events-section { - margin-bottom: 60px; + margin-bottom: 20px; } .section-title { - font-size: 64px; + font-size: 36px; font-weight: 800; - margin-bottom: 40px; - padding: 25px 40px; - border-radius: 12px; + margin-bottom: 15px; + padding: 12px 25px; + border-radius: 8px; display: inline-block; text-transform: uppercase; letter-spacing: 2px; @@ -148,11 +149,11 @@ .event-card { background: #fff; color: #000; - padding: 50px 60px; - margin-bottom: 35px; - border-radius: 12px; - box-shadow: 0 6px 30px rgba(0, 0, 0, 0.15); - border-left: 15px solid; + padding: 20px 30px; + margin-bottom: 15px; + border-radius: 8px; + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); + border-left: 40px solid; transition: all 0.3s ease; } @@ -178,12 +179,12 @@ display: flex; justify-content: space-between; align-items: center; - margin-bottom: 30px; - gap: 30px; + margin-bottom: 12px; + gap: 20px; } .event-title { - font-size: 56px; + font-size: 32px; font-weight: 700; flex: 1; color: #00003d; /* GE Deep Navy for text */ @@ -191,22 +192,22 @@ } .event-ticket { - font-size: 48px; + font-size: 24px; font-weight: 700; background: #00003d; /* GE Deep Navy */ color: #fff; - padding: 15px 35px; - border-radius: 10px; + padding: 8px 20px; + border-radius: 6px; white-space: nowrap; text-transform: uppercase; letter-spacing: 1px; } .event-time { - font-size: 38px; + font-size: 22px; color: #666; font-weight: 400; - line-height: 1.5; + line-height: 1.4; } .event-time strong { @@ -216,12 +217,12 @@ .no-events { text-align: center; - font-size: 52px; + font-size: 32px; font-weight: 600; - padding: 120px 60px; + padding: 40px 30px; background: rgba(234, 234, 234, 0.1); - border-radius: 12px; - margin-top: 50px; + border-radius: 8px; + margin-top: 20px; color: #eaeaea; /* GE Tungsten */ } @@ -232,31 +233,43 @@ right: 0; background: rgba(0, 0, 0, 0.8); text-align: center; - padding: 25px; - font-size: 32px; + padding: 12px; + font-size: 18px; z-index: 999; font-weight: 500; } .loading { text-align: center; - font-size: 52px; + font-size: 32px; font-weight: 600; - padding: 120px 60px; + padding: 40px 30px; background: rgba(234, 234, 234, 0.1); - border-radius: 12px; - margin-top: 50px; + border-radius: 8px; + margin-top: 20px; } .error-message { background: #dc3545; color: #fff; - padding: 60px; - border-radius: 12px; + padding: 30px; + border-radius: 8px; text-align: center; - font-size: 48px; + font-size: 28px; font-weight: 700; - margin: 50px 0; + margin: 20px 0; + } + + .more-events { + text-align: center; + font-size: 24px; + font-weight: 600; + padding: 15px; + margin-top: 10px; + background: rgba(255, 255, 255, 0.15); + border-radius: 6px; + color: #eaeaea; + font-style: italic; } @@ -338,14 +351,20 @@ const container = document.getElementById('eventsContainer'); let html = ''; - // Current Events + // Limit display to fit on TV screen without scrolling + const MAX_CURRENT = 3; + const MAX_UPCOMING = 3; + + // Current Events (limit to MAX_CURRENT) if (data.current && data.current.length > 0) { html += '