diff --git a/assets/css/custom.css b/assets/css/custom.css new file mode 100644 index 0000000..4dd5158 --- /dev/null +++ b/assets/css/custom.css @@ -0,0 +1,134 @@ + +:root { + --primary-color: #8F8F91; /* Monochromatic accent */ + --background-color: #F7F7F8; /* Lighter silver */ + --surface-color: rgba(236, 236, 236, 0.6); /* Translucent glass */ + --text-color: #222222; /* Darker text for contrast */ + --text-secondary-color: #6c757d; /* Bootstrap's muted text color */ + --border-color: rgba(0, 0, 0, 0.07); + --shadow-color: rgba(0, 0, 0, 0.04); + --off-day-bg: #F8F9FA; /* Very light grey for off days */ + --font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; +} + +body { + background-color: var(--background-color); + background-image: radial-gradient(circle, #FFFFFF 0%, #EAECEF 100%); + font-family: var(--font-family); + color: var(--text-color); + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +.glass-panel { + background-color: var(--surface-color); + backdrop-filter: blur(12px); + -webkit-backdrop-filter: blur(12px); + border: 1px solid var(--border-color); + border-radius: 0.75rem; + box-shadow: 0 8px 32px 0 var(--shadow-color); +} + +.main-header { + padding: 1rem 1.5rem; + margin-bottom: 2rem; +} + +/* Container for the grid to enable horizontal scrolling */ +.schedule-grid-container { + overflow-x: auto; +} + +.schedule-grid { + border-collapse: collapse; /* Change to collapse for rigid borders */ + border-spacing: 0; + width: 100%; + table-layout: fixed; +} + +.schedule-grid th, +.schedule-grid td { + vertical-align: middle; + text-align: center; + border: 1px solid #dee2e6; /* A single, consistent border for all cells */ + white-space: nowrap; /* Prevent wrapping in all cells */ + height: 60px; /* Rigid, uniform height */ + padding: 0.5rem; /* Minimal padding */ +} + +/* Set width for data columns */ +.schedule-grid td:not(:first-child) { + min-width: 200px; + width: 200px; +} + +.schedule-grid th { + color: var(--text-secondary-color); + font-weight: 600; /* Make headers a bit bolder */ + background-color: var(--surface-color); /* Give headers a slight background */ +} + +/* STICKY COLUMN STYLES FOR ABSOLUTE GRID INTEGRITY */ +.schedule-grid th:first-child, +.schedule-grid td:first-child { + position: sticky; + left: 0; + z-index: 1; + width: 180px; + min-width: 180px; /* Fix the width */ + text-align: left; + font-weight: 600; + background-color: #f8f9fa; /* A very light, solid background for the sticky column */ +} + +.schedule-grid th:first-child { + z-index: 3; /* Highest z-index for the top-left corner */ +} + +.schedule-grid thead th { + position: sticky; + top: 0; + z-index: 2; /* Keep headers visible when scrolling vertically */ + background-color: #f8f9fa; +} + +/* Shift text styling (now directly in cells) */ +.shift-time { + font-weight: 600; + font-size: 0.9rem; + display: block; /* Place time on its own line */ +} + +.shift-location { + font-size: 0.8rem; + color: var(--text-secondary-color); + display: block; /* Place location on its own line */ +} + +.shift-location i { + margin-right: 0.3rem; +} + +.avatar { + width: 40px; + height: 40px; + border-radius: 50%; + background-color: var(--text-color); /* Use dark text color for avatar */ + color: white; + display: flex; + align-items: center; + justify-content: center; + font-weight: 600; +} + +/* Adjust bootstrap button to match the theme */ +.btn-primary { + background-color: var(--text-color); + border-color: var(--text-color); + font-weight: 600; +} + +.btn-primary:hover { + background-color: #000; + border-color: #000; +} diff --git a/assets/js/main.js b/assets/js/main.js new file mode 100644 index 0000000..99bbe9b --- /dev/null +++ b/assets/js/main.js @@ -0,0 +1,5 @@ +// Future JavaScript for interactivity + +document.addEventListener('DOMContentLoaded', function () { + console.log("Scheduler UI Initialized"); +}); diff --git a/index.php b/index.php index 7205f3d..ada7899 100644 --- a/index.php +++ b/index.php @@ -1,150 +1,148 @@ 1, 'name' => 'Daniel Miller'], + ['id' => 2, 'name' => 'Sophia Chen'], + ['id' => 3, 'name' => 'James Wilson'], + ['id' => 4, 'name' => 'Olivia Garcia'], +]; + +// Get current week +$date = new DateTime(); +$week_start = clone $date; +$week_start->modify('monday this week'); +$days_of_week = []; +for ($i = 0; $i < 7; $i++) { + $days_of_week[] = (clone $week_start)->modify("+$i days"); +} + +$shifts = [ + // Monday + ['date' => $days_of_week[0]->format('Y-m-d'), 'employee_id' => 1, 'start_time' => '08:00', 'end_time' => '16:00', 'location' => 'Main Office'], + ['date' => $days_of_week[0]->format('Y-m-d'), 'employee_id' => 3, 'start_time' => '09:00', 'end_time' => '17:00', 'location' => 'Warehouse'], + // Tuesday + ['date' => $days_of_week[1]->format('Y-m-d'), 'employee_id' => 2, 'start_time' => '10:00', 'end_time' => '18:00', 'location' => 'Main Office'], + // Wednesday + ['date' => $days_of_week[2]->format('Y-m-d'), 'employee_id' => 1, 'start_time' => '08:30', 'end_time' => '16:30', 'location' => 'Remote'], + ['date' => $days_of_week[2]->format('Y-m-d'), 'employee_id' => 4, 'start_time' => '11:00', 'end_time' => '19:00', 'location' => 'Main Office'], + // Thursday + ['date' => $days_of_week[3]->format('Y-m-d'), 'employee_id' => 2, 'start_time' => '09:00', 'end_time' => '17:00', 'location' => 'Warehouse'], + ['date' => $days_of_week[3]->format('Y-m-d'), 'employee_id' => 3, 'start_time' => '12:00', 'end_time' => '20:00', 'location' => 'Main Office'], + // Friday + ['date' => $days_of_week[4]->format('Y-m-d'), 'employee_id' => 4, 'start_time' => '09:00', 'end_time' => '17:00', 'location' => 'Main Office'], +]; + +function find_shifts_for_employee_and_day($employee_id, $date, $shifts) { + $result = []; + foreach ($shifts as $shift) { + if ($shift['employee_id'] == $employee_id && $shift['date'] == $date) { + $result[] = $shift; + } + } + return $result; +} -$phpVersion = PHP_VERSION; -$now = date('Y-m-d H:i:s'); ?> - + - - - New Style - - - - - - - - - - - - - - - - - - - + + + <?php echo htmlspecialchars($project_name); ?> - Weekly Schedule + + + + + + + + + + + + + + + + + + + + -
-
-

Analyzing your requirements and generating your website…

-
- Loading… -
-

AI is collecting your requirements and applying the first changes.

-

This page will update automatically as the plan is implemented.

-

Runtime: PHP — UTC

+ +
+ + +
+

+
+ +
M
+
+
+ + +
+
+ + + + + + + + + + + + + + + + + + + +
Employee + format('D'); ?>
+ format('M j'); ?> +
+ format('Y-m-d'), $shifts); + + - + + + + + +
+
+
+
-
- + + + + + + - + \ No newline at end of file