ge-aerospace/shopfloor-dashboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve TV display visibility and add Windows deployment guide

Browse Source 
- Increased font sizes across dashboard for better TV readability
  - Headers: 72px (was 48px)
  - Event titles: 56px (was 38px)
  - Clock: 48px (was 36px)
  - Connection status: 28px (was 18px)
- Enhanced spacing and padding throughout
- Larger logo (160px vs 100px)
- Thicker borders for better visibility
- Added comprehensive Windows deployment documentation

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
cproudlock
2025-10-23 15:53:25 -04:00
parent 8e52a05c57
commit 81cb74cdef
2 changed files with 637 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

117
public/index.html
View File

@@ -22,20 +22,20 @@
}
.container {
max-width: 1920px;
max-width: 100%;
margin: 0 auto;
padding: 30px 40px;
padding-bottom: 100px;
padding: 50px 60px;
padding-bottom: 150px;
}
.header {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 40px;
margin-bottom: 40px;
border-bottom: 2px solid #4181ff; /* GE Sky Blue */
padding-bottom: 25px;
gap: 60px;
margin-bottom: 60px;
border-bottom: 4px solid #4181ff; /* GE Sky Blue */
padding-bottom: 40px;
}
.logo-container {
@@ -44,7 +44,7 @@
}
.logo-container img {
height: 100px;
height: 160px;
width: auto;
}
@@ -52,47 +52,48 @@
text-align: center;
display: flex;
flex-direction: column;
gap: 8px;
gap: 15px;
}
.location-title {
font-size: 18px;
font-size: 32px;
font-weight: 600;
color: #eaeaea; /* GE Tungsten */
text-transform: uppercase;
letter-spacing: 2px;
letter-spacing: 3px;
}
.header-center h1 {
font-size: 48px;
font-size: 72px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 2px;
letter-spacing: 3px;
color: #fff;
}
.clock {
font-size: 36px;
font-size: 48px;
font-weight: 600;
letter-spacing: 1px;
color: #4181ff; /* GE Sky Blue */
text-align: right;
line-height: 1.3;
}
.connection-status {
position: fixed;
top: 20px;
right: 20px;
padding: 12px 20px;
border-radius: 6px;
font-size: 18px;
top: 30px;
right: 30px;
padding: 20px 35px;
border-radius: 10px;
font-size: 28px;
font-weight: 700;
z-index: 1000;
display: flex;
align-items: center;
gap: 10px;
gap: 15px;
text-transform: uppercase;
letter-spacing: 0.5px;
letter-spacing: 1px;
}
.connection-status.connected {
@@ -111,25 +112,25 @@
}
.status-dot {
width: 12px;
height: 12px;
width: 18px;
height: 18px;
border-radius: 50%;
background: #00003d;
}
.events-section {
margin-bottom: 40px;
margin-bottom: 60px;
}
.section-title {
font-size: 42px;
font-size: 64px;
font-weight: 800;
margin-bottom: 25px;
padding: 15px 25px;
border-radius: 8px;
margin-bottom: 40px;
padding: 25px 40px;
border-radius: 12px;
display: inline-block;
text-transform: uppercase;
letter-spacing: 1px;
letter-spacing: 2px;
}
.section-title.current {
@@ -147,11 +148,11 @@
.event-card {
background: #fff;
color: #000;
padding: 30px 40px;
margin-bottom: 20px;
border-radius: 8px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
border-left: 8px solid;
padding: 50px 60px;
margin-bottom: 35px;
border-radius: 12px;
box-shadow: 0 6px 30px rgba(0, 0, 0, 0.15);
border-left: 15px solid;
transition: all 0.3s ease;
}
@@ -177,33 +178,35 @@
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
gap: 20px;
margin-bottom: 30px;
gap: 30px;
}
.event-title {
font-size: 38px;
font-size: 56px;
font-weight: 700;
flex: 1;
color: #00003d; /* GE Deep Navy for text */
line-height: 1.2;
}
.event-ticket {
font-size: 32px;
font-size: 48px;
font-weight: 700;
background: #00003d; /* GE Deep Navy */
color: #fff;
padding: 10px 25px;
border-radius: 6px;
padding: 15px 35px;
border-radius: 10px;
white-space: nowrap;
text-transform: uppercase;
letter-spacing: 0.5px;
letter-spacing: 1px;
}
.event-time {
font-size: 26px;
font-size: 38px;
color: #666;
font-weight: 400;
line-height: 1.5;
}
.event-time strong {
@@ -213,12 +216,12 @@
.no-events {
text-align: center;
font-size: 36px;
font-size: 52px;
font-weight: 600;
padding: 80px 40px;
padding: 120px 60px;
background: rgba(234, 234, 234, 0.1);
border-radius: 8px;
margin-top: 30px;
border-radius: 12px;
margin-top: 50px;
color: #eaeaea; /* GE Tungsten */
}
@@ -229,31 +232,31 @@
right: 0;
background: rgba(0, 0, 0, 0.8);
text-align: center;
padding: 15px;
font-size: 22px;
padding: 25px;
font-size: 32px;
z-index: 999;
font-weight: 500;
}
.loading {
text-align: center;
font-size: 36px;
font-size: 52px;
font-weight: 600;
padding: 80px 40px;
padding: 120px 60px;
background: rgba(234, 234, 234, 0.1);
border-radius: 8px;
margin-top: 30px;
border-radius: 12px;
margin-top: 50px;
}
.error-message {
background: #dc3545;
color: #fff;
padding: 40px;
border-radius: 8px;
padding: 60px;
border-radius: 12px;
text-align: center;
font-size: 32px;
font-size: 48px;
font-weight: 700;
margin: 30px 0;
margin: 50px 0;
}
</style>
</head>
@@ -425,7 +428,7 @@
container.innerHTML = `
<div class="error-message">
⚠️ Unable to load events<br>
<span style="font-size: 24px; margin-top: 10px; display: block;">Retrying...</span>
<span style="font-size: 36px; margin-top: 20px; display: block;">Retrying...</span>
</div>
`;
}