DPL-Tech.github.io/index.html at main · DPL-Tech/DPL-Tech.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Library Tech Dashboard</title>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">
    <style>
        /* 1. Basic Styles */
        body {
            font-family: 'Inter', sans-serif; /* Using Inter font */
            margin: 0;
            padding: 0;
            background-color: #1a202c; /* Darker, almost black blue */
            color: #e2e8f0; /* Off-white text */
            overflow: hidden; /* Hide scrollbars */
        }

        /* 2. Slide Container Styles */
        .slide {
            display: none; /* Hidden by default by JavaScript */
            width: 100vw; /* Full viewport width */
            height: 100vh; /* Full viewport height */
            box-sizing: border-box; /* Include padding in dimensions */
            padding: 40px; /* More padding around content */
            position: absolute; /* Position for overlaying slides */
            top: 0;
            left: 0;
            background-color: #1a202c; /* Match body for seamless transition */
            animation: fadeIn 1s ease-in-out; /* Fade in animation for new slides */

            /* Flexbox for vertical and horizontal centering of content within each slide */
            display: flex;
            flex-direction: column;
            justify-content: center; /* Center content vertically */
            align-items: center; /* Center content horizontally */
        }

        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        /* 3. Heading Styles */
        .slide h2 {
            color: #63b3ed; /* Brighter blue for main headings */
            font-size: 3.5em; /* Even larger main heading */
            margin-bottom: 30px;
            text-align: center;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.5); /* Subtle text shadow */
        }
        .slide h3 { /* Used for calendar subheadings */
            color: #90cdf4; /* Lighter blue for subheadings */
            font-size: 2em;
            margin-top: 20px;
            margin-bottom: 15px;
            text-align: left; /* Align subheadings left */
        }

        /* 4. iframe Styles - Applies to all AppSheet and Calendar embeds */
        iframe {
            border: none;
            width: 90%; /* Slightly narrower to give more margin */
            max-width: 1400px; /* Max width for very wide screens */
            height: calc(100% - 180px); /* Adjusted height for larger headings/padding */
            background-color: #2d3748; /* Dark grey for iframe background */
            border-radius: 12px; /* More rounded corners */
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4); /* Stronger shadow */

            /* Ensure iframe takes up available space within flex column */
            margin-top: auto;
            margin-bottom: auto;
        }

        /* 5. Specific Calendar Section Adjustments - For the split calendar slide */
        #slide-calendar-agenda .calendar-container { /* Corrected ID here */
            height: calc((100% - 220px) / 2); /* Adjusted for new h2/padding and two calendar iframes */
            margin-bottom: 25px; /* Spacing between the two calendar sections */
            display: flex;
            flex-direction: column; /* Stack h3 and iframe within container */
            width: 90%; /* Match iframe width */
            max-width: 1400px;
        }
        #slide-calendar-agenda .calendar-container:last-child { /* Corrected ID here */
            margin-bottom: 0; /* No extra margin on the last calendar container */
        }
        #slide-calendar-agenda .calendar-container iframe { /* Corrected ID here */
            height: calc(100% - 60px); /* Adjusted iframe height within its calendar container */
            margin: 0; /* Remove auto margins for calendar iframes to allow calc to work */
        }

        /* 6. Responsive Adjustments (Optional, for different screen sizes) */
        /* These media queries adjust sizes for smaller screens if ever viewed elsewhere */
        @media (max-width: 1200px) {
            .slide h2 { font-size: 3em; }
            .slide h3 { font-size: 1.7em; }
            .slide { padding: 30px; }
            iframe { height: calc(100% - 160px); }
            #slide-calendar-agenda .calendar-container { height: calc((100% - 190px) / 2); } /* Corrected ID here */
        }
        @media (max-width: 768px) {
            .slide h2 { font-size: 2.5em; }
            .slide h3 { font-size: 1.5em; }
            .slide { padding: 20px; }
            iframe { height: calc(100% - 140px); width: 95%; }
            #slide-calendar-agenda .calendar-container { height: calc((100% - 160px) / 2); width: 95%; } /* Corrected ID here */
        }
    </style>
</head>
<body>

    <div id="slide-tickets" class="slide">
        <h2>Active Help Desk Tickets</h2>
        <iframe id="tickets-iframe"
                src="https://www.appsheet.com/start/37945e99-01d5-4dac-ac8f-4ca0f700f77c#view=Open%20Tickets"
                data-original-src="https://www.appsheet.com/start/37945e99-01d5-4dac-ac8f-4ca0f700f77c#view=Open%20Tickets"
                title="Help Desk Tickets">
        </iframe>
    </div>

    <div id="slide-calendar-appt" class="slide">
        <h2>Today's Appointments</h2>
        <iframe id="calendar-iframe"
                src="https://calendar.google.com/calendar/embed?src=c_c2370403444f72ff9ea54b2e0a43efd7ff0a052bdd9eb88fec98b162eb755b23%40group.calendar.google.com&ctz=America%2FNew_York"
                data-original-src="https://calendar.google.com/calendar/embed?src=c_c2370403444f72ff9ea54b2e0a43efd7ff0a052bdd9eb88fec98b162eb755b23%40group.calendar.google.com&ctz=America%2FNew_York"
                style="border-width:0" width="100%" height="100%" frameborder="0" scrolling="no" title="Combined Calendar">
        </iframe>
    </div>

        <div id="slide-calendar-events" class="slide">
        <h2>Today's Event Setup Agenda</h2>
        <iframe id="calendar-iframe"
                src="https://calendar.google.com/calendar/embed?src=c_7ec31c77de4c2156389d656caffad1a76835fc9544b2063f3b342871538c88ad%40group.calendar.google.com&ctz=America%2FNew_York"
                data-original-src="https://calendar.google.com/calendar/embed?src=c_7ec31c77de4c2156389d656caffad1a76835fc9544b2063f3b342871538c88ad%40group.calendar.google.com&ctz=America%2FNew_York"
                style="border-width:0" width="100%" height="100%" frameborder="0" scrolling="no" title="Combined Calendar">
        </iframe>
    </div>

    <div id="slide-tasks" class="slide">
        <h2>Priority Tasks Needing Completion</h2>
        <iframe id="tasks-iframe"
                src="https://www.appsheet.com/start/5d47724f-4e0b-49d9-90fb-96af0b4a967a#view=Tasks%20Dashboard"
                data-original-src="https://www.appsheet.com/start/5d47724f-4e0b-49d9-90fb-96af0b4a967a#view=Tasks%20Dashboard"
                title="Priority Tasks">
        </iframe>
    </div>

    <script>
        const slides = document.querySelectorAll('.slide');
        let currentSlideIndex = 0;
        const slideInterval = 20000; // 20 seconds per slide (adjust as needed, 15000ms = 15s)
        const pageReloadInterval = 300000; // Reload entire page every 5 minutes (300,000ms)

        function showSlide(index) {
            slides.forEach((slide, i) => {
                if (i === index) {
                    slide.style.display = 'block';

                    const iframe = slide.querySelector('iframe');
                    if (iframe) { // Ensure an iframe exists in this slide
                        // Get the original source from the data-attribute
                        const originalSrc = iframe.dataset.originalSrc;

                        // Check if this is the calendar slide
                        if (slide.id === 'slide-calendar-agenda') { // Corrected ID check here!
                            const today = new Date();
                            const year = today.getFullYear();
                            // Month is 0-indexed, so add 1 and pad with leading zero
                            const month = String(today.getMonth() + 1).padStart(2, '0');
                            // Get day and pad with leading zero
                            const day = String(today.getDate()).padStart(2, '0');
                            const todayDateString = `${year}${month}${day}`; // Format: YYYYMMDD

                            // Construct the new URL with today's date as start and end
                            // Appending &mode=agenda to ensure list view, even if not in original base URL
                            iframe.src = `${originalSrc}&mode=agenda&dates=${todayDateString}/${todayDateString}`;
                        } else {
                            // For AppSheet iframes, simply re-set their original source to force a refresh
                            iframe.src = originalSrc;
                        }
                    }
                } else {
                    slide.style.display = 'none';
                }
            });
        }

        function nextSlide() {
            currentSlideIndex = (currentSlideIndex + 1) % slides.length;
            showSlide(currentSlideIndex);
        }

        // Initial display of the first slide
        showSlide(currentSlideIndex);

        // Start the automatic slideshow rotation
        setInterval(nextSlide, slideInterval);

        // Periodically reload the entire page to ensure all iframes (especially AppSheet)
        // get a fresh start and sync the latest data, even if AppSheet's internal refresh
        // isn't immediate or if the network temporarily drops.
        setInterval(() => {
            location.reload();
        }, pageReloadInterval);
    </script>
</body>
</html>