init

custom/otssignange/config.php

@@ -0,0 +1,36 @@
+<?php
+/*
+ * Xibo - Digital Signage - http://www.xibo.org.uk
+ * Copyright (C) 2006-2021 Xibo Signage Ltd
+ *
+ * This file is part of Xibo.
+ *
+ * Xibo is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * any later version. 
+ *
+ * Xibo is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with Xibo.  If not, see <http://www.gnu.org/licenses/>.
+ */ 
+defined('XIBO') or die("Sorry, you are not allowed to directly access this page.<br /> Please press the back button in your browser.");
+
+$config = array(
+		'theme_name' => 'otssignange',
+		'theme_title' => 'OTS Signs',
+		'app_name' => 'OTS Signage',
+		'theme_url' => 'CMS Homepage',
+		'cms_source_url' => 'https://github.com/xibosignage/xibo-cms',
+		'cms_install_url' => 'manual/en/install_cms.html',
+		'cms_release_notes_url' => 'manual/en/release_notes.html',
+		'latest_news_url' => 'http://xibo.org.uk/feed/',
+		'client_sendCurrentLayoutAsStatusUpdate_enabled' => false,
+		'client_screenShotRequestInterval_enabled' => false,
+		'view_path' => 'views',
+		'product_support_url' => 'https://community.xibo.org.uk/c/support'
+	);

custom/otssignange/css/client.css

@@ -0,0 +1,285 @@
+/* ============================================================================
+   XIBO CMS CLIENT CSS - HTML Widget Styling
+   ============================================================================
+   This stylesheet applies to HTML/embedded widgets rendered on displays.
+   Use the same design tokens as override.css for visual consistency.
+   ============================================================================ */
+
+:root {
+  /* Color Tokens (mirrored from override.css) */
+  --color-primary: #2563eb;
+  --color-primary-dark: #1d4ed8;
+  --color-success: #10b981;
+  --color-danger: #ef4444;
+  --color-warning: #f59e0b;
+  
+  --color-gray-50: #f9fafb;
+  --color-gray-100: #f3f4f6;
+  --color-gray-200: #e5e7eb;
+  --color-gray-600: #4b5563;
+  --color-gray-700: #374151;
+  --color-gray-900: #111827;
+  
+  --color-background: #ffffff;
+  --color-text-primary: #1f2937;
+  --color-text-secondary: #6b7280;
+  --color-border: #e5e7eb;
+  
+  /* Typography */
+  --font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  --font-size-base: 1rem;
+  --font-size-lg: 1.125rem;
+  --font-weight-normal: 400;
+  --font-weight-semibold: 600;
+  --line-height-normal: 1.5;
+  
+  /* Spacing */
+  --space-2: 0.5rem;
+  --space-3: 0.75rem;
+  --space-4: 1rem;
+  --space-6: 1.5rem;
+  
+  /* Radius & Shadow */
+  --radius-md: 0.5rem;
+  --shadow-base: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+}
+
+/* Dark mode support */
+@media (prefers-color-scheme: dark) {
+  :root {
+    --color-background: #0f172a;
+    --color-text-primary: #f1f5f9;
+    --color-text-secondary: #cbd5e1;
+    --color-border: #475569;
+  }
+}
+
+/* Global widget styles */
+html, body {
+  margin: 0;
+  padding: 0;
+  background-color: var(--color-background);
+  color: var(--color-text-primary);
+  font-family: var(--font-family-base);
+  font-size: var(--font-size-base);
+  line-height: var(--line-height-normal);
+}
+
+body {
+  padding: var(--space-4);
+}
+
+/* Typography */
+h1, h2, h3, h4, h5, h6 {
+  color: var(--color-text-primary);
+  margin-top: var(--space-6);
+  margin-bottom: var(--space-4);
+}
+
+h1 {
+  font-size: 2.25rem;
+  font-weight: 700;
+}
+
+h2 {
+  font-size: 1.875rem;
+  font-weight: 700;
+}
+
+h3 {
+  font-size: 1.5rem;
+  font-weight: 600;
+}
+
+p {
+  margin: 0 0 var(--space-4) 0;
+  line-height: 1.625;
+}
+
+a {
+  color: var(--color-primary);
+  text-decoration: none;
+  transition: color 150ms ease-in-out;
+}
+
+a:hover {
+  color: var(--color-primary-dark);
+  text-decoration: underline;
+}
+
+/* Common widget containers */
+.widget,
+.card,
+.panel {
+  background-color: var(--color-background);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  padding: var(--space-6);
+  margin-bottom: var(--space-6);
+  box-shadow: var(--shadow-base);
+}
+
+/* Buttons */
+button,
+.btn {
+  background-color: var(--color-primary);
+  color: #ffffff;
+  border: 1px solid var(--color-primary);
+  border-radius: var(--radius-md);
+  padding: var(--space-3) var(--space-4);
+  font-family: var(--font-family-base);
+  font-size: var(--font-size-base);
+  font-weight: var(--font-weight-semibold);
+  cursor: pointer;
+  transition: all 150ms ease-in-out;
+}
+
+button:hover,
+.btn:hover {
+  background-color: var(--color-primary-dark);
+  border-color: var(--color-primary-dark);
+}
+
+button:focus,
+.btn:focus {
+  outline: 2px solid var(--color-primary);
+  outline-offset: 2px;
+}
+
+/* Forms */
+input[type="text"],
+input[type="email"],
+input[type="password"],
+input[type="search"],
+input[type="number"],
+textarea,
+select {
+  background-color: var(--color-background);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  padding: var(--space-3) var(--space-4);
+  font-family: var(--font-family-base);
+  font-size: var(--font-size-base);
+  color: var(--color-text-primary);
+  transition: border-color 150ms ease-in-out;
+}
+
+input[type="text"]:focus,
+input[type="email"]:focus,
+input[type="password"]:focus,
+input[type="search"]:focus,
+input[type="number"]:focus,
+textarea:focus,
+select:focus {
+  outline: none;
+  border-color: var(--color-primary);
+  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
+}
+
+/* Tables */
+table {
+  width: 100%;
+  border-collapse: collapse;
+  margin-bottom: var(--space-6);
+}
+
+thead {
+  background-color: var(--color-gray-100);
+}
+
+th {
+  padding: var(--space-4);
+  text-align: left;
+  font-weight: var(--font-weight-semibold);
+  color: var(--color-text-primary);
+  border-bottom: 2px solid var(--color-border);
+}
+
+td {
+  padding: var(--space-4);
+  border-bottom: 1px solid var(--color-border);
+  color: var(--color-text-primary);
+}
+
+tbody tr:hover {
+  background-color: var(--color-gray-50);
+}
+
+/* Alert boxes */
+.alert {
+  border-radius: var(--radius-md);
+  padding: var(--space-4) var(--space-6);
+  margin-bottom: var(--space-6);
+  border-left: 4px solid;
+}
+
+.alert-success {
+  background-color: #d1fae5;
+  border-color: var(--color-success);
+  color: #047857;
+}
+
+.alert-danger {
+  background-color: #fee2e2;
+  border-color: var(--color-danger);
+  color: #991b1b;
+}
+
+.alert-warning {
+  background-color: #fef3c7;
+  border-color: var(--color-warning);
+  color: #92400e;
+}
+
+.alert-info {
+  background-color: #cffafe;
+  border-color: #0ea5e9;
+  color: #0c4a6e;
+}
+
+/* List styles */
+ul, ol {
+  margin-bottom: var(--space-6);
+  padding-left: var(--space-6);
+}
+
+li {
+  margin-bottom: var(--space-2);
+}
+
+/* Code blocks */
+code {
+  background-color: var(--color-gray-100);
+  color: var(--color-gray-900);
+  padding: 0.125rem 0.375rem;
+  border-radius: 0.25rem;
+  font-family: "SF Mono", Monaco, Menlo, Courier, monospace;
+  font-size: 0.875rem;
+}
+
+pre {
+  background-color: var(--color-gray-100);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  padding: var(--space-4);
+  overflow-x: auto;
+  margin-bottom: var(--space-6);
+}
+
+pre code {
+  background-color: transparent;
+  padding: 0;
+}
+
+/* Images */
+img {
+  max-width: 100%;
+  height: auto;
+  border-radius: var(--radius-md);
+}
+
+/* Accessibility */
+*:focus-visible {
+  outline: 2px solid var(--color-primary);
+  outline-offset: 2px;
+}

custom/otssignange/css/html-preview.css

@@ -0,0 +1,43 @@
+/* Preview Splash Screen - Matches Modern Theme */
+
+div.preview-splash {
+    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
+    url('../preview/img/xibologo.png') no-repeat center center;
+    background-attachment: fixed;
+    background-size: 200px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 100vh;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+    color: #ffffff;
+}
+
+div.preview-splash::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.2);
+    z-index: 1;
+}
+
+/* Preview widget container styling */
+.preview-widget {
+    background-color: #ffffff;
+    border-radius: 0.5rem;
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+    padding: 1.5rem;
+    margin: 1rem;
+}
+
+.preview-widget-title {
+    font-size: 1.125rem;
+    font-weight: 600;
+    color: #1f2937;
+    margin-bottom: 1rem;
+    padding-bottom: 1rem;
+    border-bottom: 1px solid #e5e7eb;
+}

custom/otssignange/js/theme.js

@@ -0,0 +1,74 @@
+/**
+ * OTS Signage Modern Theme - Client-Side Utilities
+ * Sidebar toggle, theme persistence, and UI interactions
+ */
+
+(function() {
+  'use strict';
+
+  const STORAGE_KEYS = {
+    sidebarCollapsed: 'otsTheme:sidebarCollapsed',
+    themeMode: 'otsTheme:mode'
+  };
+
+  /**
+   * Initialize sidebar toggle functionality
+   */
+  function initSidebarToggle() {
+    const toggleBtn = document.querySelector('[data-action="toggle-sidebar"]');
+    const shell = document.querySelector('.ots-shell');
+
+    if (!toggleBtn || !shell) return;
+
+    const isCollapsed = localStorage.getItem(STORAGE_KEYS.sidebarCollapsed) === 'true';
+    if (isCollapsed) {
+      shell.classList.add('ots-sidebar-collapsed');
+    }
+
+    toggleBtn.addEventListener('click', function() {
+      shell.classList.toggle('ots-sidebar-collapsed');
+      const collapsed = shell.classList.contains('ots-sidebar-collapsed');
+      localStorage.setItem(STORAGE_KEYS.sidebarCollapsed, collapsed);
+    });
+  }
+
+  /**
+   * Initialize theme toggle (light/dark mode)
+   */
+  function initThemeToggle() {
+    const themeBtn = document.querySelector('[data-action="toggle-theme"]');
+    const html = document.documentElement;
+
+    if (!themeBtn) return;
+
+    // Restore theme preference
+    const savedTheme = localStorage.getItem(STORAGE_KEYS.themeMode);
+    if (savedTheme) {
+      html.setAttribute('data-theme', savedTheme);
+      themeBtn.setAttribute('aria-pressed', savedTheme === 'dark');
+    }
+
+    themeBtn.addEventListener('click', function() {
+      const currentTheme = html.getAttribute('data-theme') || 'light';
+      const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+
+      html.setAttribute('data-theme', newTheme);
+      localStorage.setItem(STORAGE_KEYS.themeMode, newTheme);
+      themeBtn.setAttribute('aria-pressed', newTheme === 'dark');
+    });
+  }
+
+  /**
+   * Initialize page on DOM ready
+   */
+  function init() {
+    initSidebarToggle();
+    initThemeToggle();
+  }
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', init);
+  } else {
+    init();
+  }
+})();

custom/otssignange/views/authed-sidebar.twig

@@ -0,0 +1,88 @@
+{#
+  OTS Signage Modern Theme - Sidebar Override
+  Modern left navigation sidebar with collapsible state
+#}
+<nav class="ots-sidebar" aria-label="Main navigation">
+  <div class="sidebar-header">
+    <a href="{{ baseUrl }}/" class="brand-link">
+      <img src="{{ baseUrl }}/theme/custom/otssignange/img/192x192.png" alt="{{ app_name }}" class="brand-logo" />
+      <span class="brand-text">{{ app_name }}</span>
+    </a>
+  </div>
+
+  <div class="sidebar-content">
+    <ul class="sidebar-nav">
+      <li class="nav-section">
+        <a href="{{ baseUrl }}" class="nav-item {% if pageTitle == 'Dashboard' %}active{% endif %}">
+          <span class="nav-icon">📊</span>
+          <span class="nav-text">Dashboard</span>
+        </a>
+      </li>
+
+      <li class="nav-section-title">Content</li>
+      <li><a href="{{ baseUrl }}/library" class="nav-item">
+        <span class="nav-icon">📁</span>
+        <span class="nav-text">Media Library</span>
+      </a></li>
+      <li><a href="{{ baseUrl }}/layout" class="nav-item">
+        <span class="nav-icon">📐</span>
+        <span class="nav-text">Layouts</span>
+      </a></li>
+      <li><a href="{{ baseUrl }}/playlist" class="nav-item">
+        <span class="nav-icon">▶</span>
+        <span class="nav-text">Playlists</span>
+      </a></li>
+
+      <li class="nav-section-title">Display</li>
+      <li><a href="{{ baseUrl }}/display" class="nav-item">
+        <span class="nav-icon">🖥</span>
+        <span class="nav-text">Displays</span>
+      </a></li>
+      <li><a href="{{ baseUrl }}/display-group" class="nav-item">
+        <span class="nav-icon">📺</span>
+        <span class="nav-text">Display Groups</span>
+      </a></li>
+
+      <li class="nav-section-title">Scheduling</li>
+      <li><a href="{{ baseUrl }}/schedule" class="nav-item">
+        <span class="nav-icon">📅</span>
+        <span class="nav-text">Schedules</span>
+      </a></li>
+      <li><a href="{{ baseUrl }}/dayparting" class="nav-item">
+        <span class="nav-icon">⏰</span>
+        <span class="nav-text">Day Parting</span>
+      </a></li>
+
+      <li class="nav-section-title">Administration</li>
+      <li><a href="{{ baseUrl }}/user" class="nav-item">
+        <span class="nav-icon">👤</span>
+        <span class="nav-text">Users</span>
+      </a></li>
+      <li><a href="{{ baseUrl }}/user-group" class="nav-item">
+        <span class="nav-icon">👥</span>
+        <span class="nav-text">User Groups</span>
+      </a></li>
+      <li><a href="{{ baseUrl }}/settings" class="nav-item">
+        <span class="nav-icon">⚙️</span>
+        <span class="nav-text">Settings</span>
+      </a></li>
+    </ul>
+  </div>
+
+  <div class="sidebar-footer">
+    <div class="sidebar-user">
+      <div class="user-info">
+        <div class="user-avatar">{{ user.username|first|upper }}</div>
+        <div class="user-name">{{ user.username }}</div>
+      </div>
+    </div>
+    <div class="sidebar-controls">
+      <button class="btn-ghost" data-action="toggle-theme" aria-label="Toggle theme" title="Toggle dark/light mode">
+        <span class="icon">🌓</span>
+      </button>
+      <a href="{{ baseUrl }}/logout" class="btn-ghost" aria-label="Sign out" title="Sign out">
+        <span class="icon">🚪</span>
+      </a>
+    </div>
+  </div>
+</nav>

custom/otssignange/views/authed.twig

@@ -0,0 +1,76 @@
+{#
+  OTS Signage Modern Theme - Authenticated Shell Override
+  Replaces the header and shell structure with a modern topbar + sidebar layout
+#}
+{% extends "base.twig" %}
+
+{% block head %}
+  {{ parent() }}
+  <link rel="stylesheet" href="{{ baseUrl }}/theme/custom/otssignange/css/override.css" />
+  <link rel="stylesheet" href="{{ baseUrl }}/theme/custom/otssignange/css/client.css" />
+{% endblock %}
+
+{% block htmlTag %}
+<html lang="en" data-ots-theme="v1">
+{% endblock %}
+
+{% block body %}
+<body class="ots-theme">
+  <div class="ots-shell">
+    {% include "authed-sidebar.twig" %}
+
+    <div class="ots-main">
+      {% block header %}
+      <header class="ots-topbar">
+        <div class="topbar-left">
+          <button class="btn-ghost topbar-toggle" data-action="toggle-sidebar" aria-label="Toggle sidebar" title="Toggle sidebar">
+            <span class="icon">☰</span>
+          </button>
+          <div class="topbar-title">
+            <h1 class="page-title">{{ pageTitle|default('Dashboard') }}</h1>
+            {% if pageSubtitle is defined %}<p class="page-subtitle">{{ pageSubtitle }}</p>{% endif %}
+          </div>
+        </div>
+
+        <div class="topbar-right">
+          <form action="{{ baseUrl }}/search" class="topbar-search" method="get" role="search">
+            <input type="text" name="q" placeholder="Search…" aria-label="Search" class="search-input" />
+          </form>
+          <div class="topbar-actions">
+            <a href="{{ baseUrl }}/notification" class="topbar-btn" aria-label="Notifications" title="Notifications">
+              <span class="icon">🔔</span>
+            </a>
+            <div class="dropdown user-menu">
+              <button class="topbar-btn user-btn" aria-label="User menu" aria-expanded="false">
+                <span class="avatar">{{ user.username|first|upper }}</span>
+              </button>
+              <ul class="dropdown-menu" role="menu">
+                <li><a href="{{ baseUrl }}/profile" role="menuitem">Profile</a></li>
+                <li><a href="{{ baseUrl }}/logout" role="menuitem">Sign out</a></li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </header>
+      {% endblock %}
+
+      <main class="ots-content">
+        {% block content %}
+        <!-- Content inserted here by page templates -->
+        {% endblock %}
+      </main>
+
+      {% block footer %}
+      <footer class="ots-footer">
+        <p class="text-muted">&copy; {{ currentDate|date('Y') }} {{ app_name }}. Powered by <a href="https://xibosignage.com">Xibo</a>.</p>
+      </footer>
+      {% endblock %}
+    </div>
+  </div>
+
+  {% block scripts %}
+    {{ parent() }}
+    <script src="{{ baseUrl }}/theme/custom/otssignange/js/theme.js"></script>
+  {% endblock %}
+</body>
+{% endblock %}

custom/otssignange/views/dashboard.twig

@@ -0,0 +1,112 @@
+{#
+  OTS Signage Modern Theme - Dashboard Page Override
+  Modern dashboard with KPI cards, status panels, and quick actions
+#}
+{% extends "authed.twig" %}
+
+{% block pageTitle %}Dashboard{% endblock %}
+
+{% block content %}
+<div class="ots-theme dashboard-page">
+  <section class="dashboard-hero">
+    <div class="hero-content">
+      <h2>Dashboard</h2>
+      <p class="text-muted">Overview of your digital signage network</p>
+    </div>
+    <div class="hero-actions">
+      <a class="btn btn-primary" href="{{ baseUrl }}/layout">
+        <span class="icon">➕</span> New Layout
+      </a>
+    </div>
+  </section>
+
+  {# KPI Row #}
+  <section class="kpi-row">
+    <div class="kpi-card">
+      <div class="kpi-icon">🖥</div>
+      <div class="kpi-content">
+        <div class="kpi-label">Displays</div>
+        <div class="kpi-number">{{ stats.displays.total|default(0) }}</div>
+        <div class="kpi-status">
+          {% if stats.displays.online|default(0) > 0 %}
+            <span class="badge-success">{{ stats.displays.online }} Online</span>
+          {% endif %}
+          {% if stats.displays.offline|default(0) > 0 %}
+            <span class="badge-danger">{{ stats.displays.offline }} Offline</span>
+          {% endif %}
+        </div>
+      </div>
+    </div>
+
+    <div class="kpi-card">
+      <div class="kpi-icon">📅</div>
+      <div class="kpi-content">
+        <div class="kpi-label">Schedules</div>
+        <div class="kpi-number">{{ stats.schedules.total|default(0) }}</div>
+        <div class="kpi-status">
+          <span class="text-muted">Scheduled events</span>
+        </div>
+      </div>
+    </div>
+
+    <div class="kpi-card">
+      <div class="kpi-icon">👤</div>
+      <div class="kpi-content">
+        <div class="kpi-label">Users</div>
+        <div class="kpi-number">{{ stats.users.total|default(0) }}</div>
+        <div class="kpi-status">
+          <span class="text-muted">{{ stats.users.active|default(0) }} Active</span>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  {# Main Panels Row #}
+  <section class="dashboard-panels">
+    <article class="panel panel-large">
+      <div class="panel-header">
+        <h3>Display Status</h3>
+        <a href="{{ baseUrl }}/display" class="link-subtle">View all →</a>
+      </div>
+      <div class="panel-body">
+        <p class="text-muted">No displays configured yet. Add a display to get started.</p>
+      </div>
+    </article>
+
+    <article class="panel panel-large">
+      <div class="panel-header">
+        <h3>Upcoming Schedules</h3>
+        <a href="{{ baseUrl }}/schedule" class="link-subtle">View all →</a>
+      </div>
+      <div class="panel-body">
+        <p class="text-muted">No schedules found. Create a schedule to get started.</p>
+      </div>
+    </article>
+  </section>
+
+  {# Quick Actions #}
+  <section class="quick-actions">
+    <article class="panel">
+      <div class="panel-header">
+        <h3>Quick Actions</h3>
+      </div>
+      <div class="panel-body">
+        <div class="actions-grid">
+          <a href="{{ baseUrl }}/schedule" class="action-card">
+            <span class="action-icon">📅</span>
+            <span class="action-text">Create Schedule</span>
+          </a>
+          <a href="{{ baseUrl }}/display" class="action-card">
+            <span class="action-icon">🖥</span>
+            <span class="action-text">Manage Displays</span>
+          </a>
+          <a href="{{ baseUrl }}/user" class="action-card">
+            <span class="action-icon">👤</span>
+            <span class="action-text">Add User</span>
+          </a>
+        </div>
+      </div>
+    </article>
+  </section>
+</div>
+{% endblock %}

custom/otssignange/views/displays.twig

@@ -0,0 +1,85 @@
+{#
+  OTS Signage Modern Theme - Displays Page Override
+  Two-column layout with folder panel on left
+#}
+{% extends "authed.twig" %}
+
+{% block pageTitle %}Displays{% endblock %}
+
+{% block content %}
+<div class="ots-theme two-column-layout">
+  <aside class="left-panel">
+    <div class="panel-header">
+      <h3>Folders</h3>
+      <button class="btn-icon-sm" aria-label="Expand/collapse">
+        <span>✎</span>
+      </button>
+    </div>
+    <div class="folder-tree">
+      <div class="folder-item active">
+        <span class="folder-icon">📁</span>
+        <span class="folder-name">All Items</span>
+      </div>
+      <div class="folder-item">
+        <span class="folder-icon">📂</span>
+        <span class="folder-name">Root Folder</span>
+      </div>
+    </div>
+  </aside>
+
+  <main class="content-panel">
+    <div class="page-header">
+      <h1>Displays</h1>
+      <p class="text-muted">Manage and monitor your digital signage displays</p>
+    </div>
+
+    <div class="content-toolbar">
+      <input type="search" placeholder="Search displays…" class="form-control search-field" />
+      <div class="toolbar-actions">
+        <button class="btn btn-outline">Columns</button>
+        <a href="{{ baseUrl }}/display/add" class="btn btn-primary">Add Display</a>
+      </div>
+    </div>
+
+    <div class="stat-row">
+      <div class="stat-box">
+        <div class="stat-label">Total</div>
+        <div class="stat-value">1</div>
+      </div>
+      <div class="stat-box">
+        <div class="stat-label">Online</div>
+        <div class="stat-value text-success">1</div>
+      </div>
+      <div class="stat-box">
+        <div class="stat-label">Offline</div>
+        <div class="stat-value text-danger">0</div>
+      </div>
+    </div>
+
+    <div class="table-wrapper">
+      <table class="table table-striped">
+        <thead>
+          <tr>
+            <th>Display</th>
+            <th>Status</th>
+            <th>Folder</th>
+            <th>Group</th>
+            <th>Last Check-in</th>
+            <th>Actions</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>Test1</td>
+            <td><span class="badge badge-success">Online</span></td>
+            <td>Test Screens</td>
+            <td>-</td>
+            <td>just now</td>
+            <td><button class="btn-icon-sm" aria-label="Actions">⋮</button></td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </main>
+</div>
+{% endblock %}

custom/otssignange/views/media.twig

@@ -0,0 +1,73 @@
+{#
+  OTS Signage Modern Theme - Media Library Page Override
+  Two-column layout with folder panel on left, media grid on right
+#}
+{% extends "authed.twig" %}
+
+{% block pageTitle %}Media Library{% endblock %}
+
+{% block content %}
+<div class="ots-theme two-column-layout">
+  <aside class="left-panel">
+    <div class="panel-header">
+      <h3>Folders</h3>
+      <button class="btn-icon-sm" aria-label="New folder">
+        <span>+</span>
+      </button>
+    </div>
+    <div class="folder-tree">
+      <div class="folder-item active">
+        <span class="folder-icon">📁</span>
+        <span class="folder-name">All Files</span>
+      </div>
+      <div class="folder-item">
+        <span class="folder-icon">📂</span>
+        <span class="folder-name">Root Folder</span>
+      </div>
+      <div class="folder-item">
+        <span class="folder-icon">🖼</span>
+        <span class="folder-name">Images</span>
+      </div>
+      <div class="folder-item">
+        <span class="folder-icon">🎬</span>
+        <span class="folder-name">Videos</span>
+      </div>
+    </div>
+  </aside>
+
+  <main class="content-panel">
+    <div class="page-header">
+      <h1>Media Library</h1>
+      <p class="text-muted">Upload and manage media files for your displays</p>
+    </div>
+
+    <div class="content-toolbar">
+      <input type="search" placeholder="Search media…" class="form-control search-field" />
+      <div class="toolbar-actions">
+        <button class="btn btn-outline">Upload</button>
+        <a href="{{ baseUrl }}/library/add" class="btn btn-primary">Add Media</a>
+      </div>
+    </div>
+
+    <div class="stat-row">
+      <div class="stat-box">
+        <div class="stat-label">Files</div>
+        <div class="stat-value">0</div>
+      </div>
+      <div class="stat-box">
+        <div class="stat-label">Storage Used</div>
+        <div class="stat-value">0 MB</div>
+      </div>
+    </div>
+
+    <div class="media-grid">
+      <div class="empty-state">
+        <div class="empty-icon">🎞</div>
+        <h3>No media files</h3>
+        <p>Upload images, videos, and documents to get started.</p>
+        <a href="{{ baseUrl }}/library/add" class="btn btn-primary">Upload Media</a>
+      </div>
+    </div>
+  </main>
+</div>
+{% endblock %}