Initial commit

wwwroot/css/site.css

@@ -0,0 +1,340 @@
+/* PlanTempusAdmin - Technical/Terminal Style */
+
+:root {
+    --bg-color: #fafafa;
+    --text-color: #1a1a1a;
+    --border-color: #d0d0d0;
+    --border-color-dark: #999;
+    --menu-bg: #f5f5f5;
+    --hover-bg: #eaeaea;
+    --accent-color: #0066cc;
+    --success-color: #28a745;
+    --warning-color: #f0a500;
+    --danger-color: #dc3545;
+    --muted-color: #666;
+    --radius-sm: 4px;
+    --radius-md: 8px;
+    --radius-lg: 12px;
+    --shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+}
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: 'JetBrains Mono', 'Consolas', 'Monaco', monospace;
+    font-size: 12px;
+    line-height: 1.5;
+    background-color: var(--bg-color);
+    color: var(--text-color);
+}
+
+/* Layout */
+.app-container {
+    display: flex;
+    min-height: 100vh;
+}
+
+/* Sidebar Menu */
+.sidebar {
+    width: 200px;
+    background-color: var(--menu-bg);
+    border-right: 1px solid var(--border-color);
+    position: fixed;
+    height: 100vh;
+    overflow-y: auto;
+}
+
+.sidebar-header {
+    padding: 16px;
+    border-bottom: 1px solid var(--border-color);
+    font-weight: bold;
+    font-size: 14px;
+}
+
+.sidebar-nav {
+    padding: 8px 0;
+}
+
+.nav-section {
+    margin-bottom: 8px;
+}
+
+.nav-section-title {
+    padding: 8px 16px 4px;
+    font-size: 10px;
+    text-transform: uppercase;
+    color: var(--muted-color);
+    letter-spacing: 0.5px;
+}
+
+.nav-link {
+    display: block;
+    padding: 8px 16px;
+    margin: 2px 8px;
+    color: var(--text-color);
+    text-decoration: none;
+    border-radius: var(--radius-sm);
+    transition: all 0.15s ease;
+}
+
+.nav-link:hover {
+    background-color: var(--hover-bg);
+}
+
+.nav-link.active {
+    background-color: var(--hover-bg);
+    font-weight: bold;
+}
+
+/* Main Content */
+.main-content {
+    flex: 1;
+    margin-left: 200px;
+    padding: 24px;
+}
+
+/* Page Header */
+.page-header {
+    margin-bottom: 24px;
+    padding-bottom: 16px;
+    border-bottom: 1px solid var(--border-color);
+    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
+}
+
+.page-title {
+    font-size: 18px;
+    font-weight: bold;
+    margin-bottom: 4px;
+}
+
+.page-subtitle {
+    font-size: 11px;
+    color: var(--muted-color);
+}
+
+/* Cards */
+.card {
+    background-color: #fff;
+    border: 1px solid var(--border-color);
+    border-radius: var(--radius-md);
+    margin-bottom: 16px;
+    box-shadow: var(--shadow);
+    overflow: hidden;
+}
+
+.card-header {
+    padding: 12px 16px;
+    border-bottom: 1px solid var(--border-color);
+    font-weight: bold;
+    font-size: 11px;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    background-color: var(--menu-bg);
+}
+
+.card-body {
+    padding: 16px;
+}
+
+/* Status Grid */
+.status-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+    gap: 16px;
+}
+
+.status-item {
+    background-color: #fff;
+    border: 1px solid var(--border-color);
+    border-radius: var(--radius-md);
+    padding: 16px;
+    box-shadow: var(--shadow);
+}
+
+.status-label {
+    font-size: 10px;
+    text-transform: uppercase;
+    color: var(--muted-color);
+    margin-bottom: 4px;
+}
+
+.status-value {
+    font-size: 20px;
+    font-weight: bold;
+}
+
+.status-value.success { color: var(--success-color); }
+.status-value.warning { color: var(--warning-color); }
+.status-value.danger { color: var(--danger-color); }
+
+/* Buttons - Outline Style */
+.btn {
+    display: inline-block;
+    padding: 6px 14px;
+    font-family: inherit;
+    font-size: 11px;
+    text-decoration: none;
+    background-color: transparent;
+    border: 1px solid var(--border-color-dark);
+    border-radius: var(--radius-sm);
+    color: var(--text-color);
+    cursor: pointer;
+    transition: all 0.2s ease;
+}
+
+.btn:hover {
+    background-color: var(--text-color);
+    color: var(--bg-color);
+}
+
+.btn-primary {
+    border-color: var(--accent-color);
+    color: var(--accent-color);
+}
+
+.btn-primary:hover {
+    background-color: var(--accent-color);
+    color: #fff;
+}
+
+.btn-success {
+    border-color: var(--success-color);
+    color: var(--success-color);
+}
+
+.btn-success:hover {
+    background-color: var(--success-color);
+    color: #fff;
+}
+
+.btn-danger {
+    border-color: var(--danger-color);
+    color: var(--danger-color);
+}
+
+.btn-danger:hover {
+    background-color: var(--danger-color);
+    color: #fff;
+}
+
+/* Tables */
+.table {
+    width: 100%;
+    border-collapse: separate;
+    border-spacing: 0;
+    font-size: 11px;
+}
+
+.table th,
+.table td {
+    padding: 10px 14px;
+    text-align: left;
+    border-bottom: 1px solid var(--border-color);
+}
+
+.table th {
+    font-weight: bold;
+    text-transform: uppercase;
+    font-size: 10px;
+    letter-spacing: 0.5px;
+    background-color: var(--menu-bg);
+}
+
+.table th:first-child {
+    border-top-left-radius: var(--radius-sm);
+}
+
+.table th:last-child {
+    border-top-right-radius: var(--radius-sm);
+}
+
+.table tbody tr:last-child td:first-child {
+    border-bottom-left-radius: var(--radius-sm);
+}
+
+.table tbody tr:last-child td:last-child {
+    border-bottom-right-radius: var(--radius-sm);
+}
+
+.table tbody tr:hover {
+    background-color: var(--hover-bg);
+}
+
+.table tbody tr:last-child td {
+    border-bottom: none;
+}
+
+/* Status Badges */
+.badge {
+    display: inline-block;
+    padding: 3px 8px;
+    font-size: 10px;
+    font-weight: bold;
+    text-transform: uppercase;
+    border: 1px solid;
+    border-radius: var(--radius-sm);
+}
+
+.badge-success {
+    border-color: var(--success-color);
+    color: var(--success-color);
+}
+
+.badge-warning {
+    border-color: var(--warning-color);
+    color: var(--warning-color);
+}
+
+.badge-danger {
+    border-color: var(--danger-color);
+    color: var(--danger-color);
+}
+
+/* Utility Classes */
+.text-muted { color: var(--muted-color); }
+.text-success { color: var(--success-color); }
+.text-warning { color: var(--warning-color); }
+.text-danger { color: var(--danger-color); }
+
+.mt-1 { margin-top: 8px; }
+.mt-2 { margin-top: 16px; }
+.mb-1 { margin-bottom: 8px; }
+.mb-2 { margin-bottom: 16px; }
+
+/* Code/Pre */
+pre, code {
+    font-family: inherit;
+    background-color: var(--menu-bg);
+    padding: 2px 6px;
+    font-size: 11px;
+    border-radius: var(--radius-sm);
+}
+
+pre {
+    padding: 14px;
+    overflow-x: auto;
+    border: 1px solid var(--border-color);
+    border-radius: var(--radius-md);
+}
+
+/* Loading Indicator */
+.loading {
+    color: var(--muted-color);
+    font-style: italic;
+}
+
+.loading::after {
+    content: '...';
+    animation: dots 1.5s steps(4, end) infinite;
+}
+
+@keyframes dots {
+    0%, 20% { content: ''; }
+    40% { content: '.'; }
+    60% { content: '..'; }
+    80%, 100% { content: '...'; }
+}

wwwroot/js/site.js

@@ -0,0 +1,58 @@
+// PlanTempusAdmin - Site JavaScript
+
+document.addEventListener('DOMContentLoaded', () => {
+    // Set active nav link based on current path
+    const currentPath = window.location.pathname;
+    const navLinks = document.querySelectorAll('.nav-link');
+
+    navLinks.forEach(link => {
+        const href = link.getAttribute('href');
+        if (href === currentPath || (currentPath === '/' && href === '/')) {
+            link.classList.add('active');
+        }
+    });
+});
+
+// Utility function for API calls
+async function fetchApi(url, options = {}) {
+    try {
+        const response = await fetch(url, {
+            headers: {
+                'Content-Type': 'application/json',
+                ...options.headers
+            },
+            ...options
+        });
+
+        if (!response.ok) {
+            throw new Error(`HTTP error! status: ${response.status}`);
+        }
+
+        return await response.json();
+    } catch (error) {
+        console.error('API Error:', error);
+        throw error;
+    }
+}
+
+// Format date for display
+function formatDate(dateString) {
+    const date = new Date(dateString);
+    return date.toLocaleString('da-DK', {
+        year: 'numeric',
+        month: '2-digit',
+        day: '2-digit',
+        hour: '2-digit',
+        minute: '2-digit',
+        second: '2-digit'
+    });
+}
+
+// Format bytes to human readable
+function formatBytes(bytes) {
+    if (bytes === 0) return '0 B';
+    const k = 1024;
+    const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+}