Skip to content

Commit 1ee28ab

Browse files
DPL-TechDPL-Tech
committed
Update index.html
1 parent 64fe014 commit 1ee28ab

File tree

1 file changed

+90
-62
lines changed

1 file changed

+90
-62
lines changed

‎index.html‎

Lines changed: 90 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -5,73 +5,101 @@
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
66
<title>Library Tech Dashboard</title>
77
<style>
8-
/* 1. Basic Styles: Controls the overall page background, text color, and default font. */
9-
body {
10-
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Change this font! */
11-
margin: 0;
12-
padding: 0;
13-
background-color: #2c3e50; /* Dark blue/grey background */
14-
color: #ecf0f1; /* Light text color */
15-
overflow: hidden;
16-
}
8+
/* 1. Basic Styles */
9+
body {
10+
font-family: 'Inter', sans-serif; /* Using Inter font */
11+
margin: 0;
12+
padding: 0;
13+
background-color: #1a202c; /* Darker, almost black blue */
14+
color: #e2e8f0; /* Off-white text */
15+
overflow: hidden;
16+
}
1717

18-
/* 2. Slide Container Styles: Controls how each individual dashboard section (slide) looks. */
19-
.slide {
20-
display: none;
21-
width: 100vw;
22-
height: 100vh;
23-
box-sizing: border-box;
24-
padding: 30px; /* Padding inside each slide */
25-
position: absolute;
26-
top: 0;
27-
left: 0;
28-
background-color: #2c3e50; /* Should match body for seamless transition */
29-
animation: fadeIn 1s ease-in-out; /* Fade in effect for new slides */
30-
}
18+
/* 2. Slide Container Styles */
19+
.slide {
20+
display: none;
21+
width: 100vw;
22+
height: 100vh;
23+
box-sizing: border-box;
24+
padding: 40px; /* More padding */
25+
position: absolute;
26+
top: 0;
27+
left: 0;
28+
background-color: #1a202c;
29+
animation: fadeIn 1s ease-in-out;
30+
display: flex; /* Use flexbox for vertical centering if content is short */
31+
flex-direction: column;
32+
justify-content: center; /* Center content vertically */
33+
align-items: center; /* Center content horizontally */
34+
}
3135

32-
/* 3. Heading Styles: Controls the size and color of titles on each slide. */
33-
.slide h2 {
34-
color: #3498db; /* Bright blue for main headings */
35-
font-size: 3em; /* Larger main heading */
36-
margin-bottom: 25px;
37-
text-align: center;
38-
}
39-
.slide h3 { /* Used for calendar subheadings */
40-
color: #87CEEB; /* Lighter blue for subheadings */
41-
font-size: 1.8em;
42-
margin-top: 15px;
43-
margin-bottom: 10px;
44-
text-align: left;
45-
}
36+
@keyframes fadeIn {
37+
from { opacity: 0; }
38+
to { opacity: 1; }
39+
}
4640

47-
/* 4. iframe Styles: Controls the appearance of the embedded AppSheet and Calendar content. */
48-
iframe {
49-
border: none;
50-
width: 100%;
51-
height: calc(100% - 100px); /* Adjust height for main heading */
52-
background-color: #34495e; /* Slightly lighter background for iframes */
53-
border-radius: 8px; /* Rounded corners for the embedded content */
54-
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Subtle shadow */
55-
}
41+
/* 3. Heading Styles */
42+
.slide h2 {
43+
color: #63b3ed; /* Brighter blue for main headings */
44+
font-size: 3.5em; /* Even larger main heading */
45+
margin-bottom: 30px;
46+
text-align: center;
47+
text-shadow: 2px 2px 4px rgba(0,0,0,0.5); /* Subtle text shadow */
48+
}
49+
.slide h3 {
50+
color: #90cdf4; /* Lighter blue for subheadings */
51+
font-size: 2em;
52+
margin-top: 20px;
53+
margin-bottom: 15px;
54+
text-align: left;
55+
}
5656

57-
/* 5. Specific Calendar Section Adjustments: Fine-tunes the layout for the two calendar iframes. */
58-
#slide-calendars .calendar-container {
59-
height: calc((100% - 160px) / 2);
60-
margin-bottom: 20px;
61-
display: flex;
62-
flex-direction: column;
63-
}
64-
#slide-calendars .calendar-container:last-child {
65-
margin-bottom: 0;
66-
}
67-
#slide-calendars .calendar-container iframe {
68-
height: calc(100% - 50px);
69-
}
57+
/* 4. iframe Styles */
58+
iframe {
59+
border: none;
60+
width: 90%; /* Slightly narrower to give more margin */
61+
max-width: 1400px; /* Max width for very wide screens */
62+
height: calc(100% - 180px); /* Adjusted height for larger headings/padding */
63+
background-color: #2d3748; /* Dark grey for iframe background */
64+
border-radius: 12px; /* More rounded corners */
65+
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4); /* Stronger shadow */
66+
margin-top: auto; /* Push iframe to bottom if content is short */
67+
margin-bottom: auto; /* Push iframe to top if content is short */
68+
}
7069

71-
/* 6. Responsive Adjustments: Ensures the design looks good on different screen sizes (though Chromebox will likely be fixed). */
72-
@media (max-width: 1200px) { /* ... */ }
73-
@media (max-width: 768px) { /* ... */ }
74-
</style>
70+
/* 5. Specific Calendar Section Adjustments */
71+
#slide-calendars .calendar-container {
72+
height: calc((100% - 220px) / 2); /* Adjusted for new h2/padding */
73+
margin-bottom: 25px;
74+
display: flex;
75+
flex-direction: column;
76+
width: 90%; /* Match iframe width */
77+
max-width: 1400px;
78+
}
79+
#slide-calendars .calendar-container:last-child {
80+
margin-bottom: 0;
81+
}
82+
#slide-calendars .calendar-container iframe {
83+
height: calc(100% - 60px); /* Adjusted iframe height within calendar container */
84+
margin: 0; /* Remove auto margins for calendar iframes */
85+
}
86+
87+
/* Responsive Adjustments */
88+
@media (max-width: 1200px) {
89+
.slide h2 { font-size: 3em; }
90+
.slide h3 { font-size: 1.7em; }
91+
.slide { padding: 30px; }
92+
iframe { height: calc(100% - 160px); }
93+
#slide-calendars .calendar-container { height: calc((100% - 190px) / 2); }
94+
}
95+
@media (max-width: 768px) {
96+
.slide h2 { font-size: 2.5em; }
97+
.slide h3 { font-size: 1.5em; }
98+
.slide { padding: 20px; }
99+
iframe { height: calc(100% - 140px); width: 95%; }
100+
#slide-calendars .calendar-container { height: calc((100% - 160px) / 2); width: 95%; }
101+
}
102+
</style>
75103
<!-- ... rest of HTML and JavaScript ... -->
76104
</head>
77105
</html>

0 commit comments

Comments
 (0)