Skip to content

Commit 435d4f6

Browse files
devninja-sudodevninja-sudo
committed
Optimize background image loading and mobile layout
Background images are now loaded via JavaScript only on desktop/tablet, reducing resource usage on mobile by hiding the slider and freeing memory on resize. CSS and stepper layout have been improved for better mobile readability and usability, including horizontal stepper indicators and enhanced padding. The .html routes are redirected for consistency, and a markup typo in index.html was fixed.
1 parent a1f1c22 commit 435d4f6

7 files changed

Lines changed: 442 additions & 122 deletions

File tree

‎app.js‎

Lines changed: 1 addition & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -30,19 +30,12 @@ app.get('/howto', (req, res) => {
3030
res.sendFile(path.join(__dirname, 'public', 'howto.html'))
3131
})
3232

33-
// Route für Status
34-
app.get('/status', (req, res) => {
35-
res.json({
36-
status: 'Online',
37-
timestamp: new Date().toISOString(),
38-
uptime: Math.floor(process.uptime()) + ' seconds'
39-
})
40-
})
4133

4234
// Redirect .html URLs to their route counterparts
4335
app.get('/teilnahme.html', (req, res) => res.redirect('/teilnahme'))
4436
app.get('/events.html', (req, res) => res.redirect('/events'))
4537
app.get('/kontakt.html', (req, res) => res.redirect('/kontakt'))
38+
app.get('/howto.html', (req, res) => res.redirect('/howto'))
4639

4740
// 404 Handler
4841
app.use((req, res) => {

‎public/css/styles.css‎

Lines changed: 140 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ body {
4141
max-width: 1100px;
4242
margin: 30px auto;
4343
background: var(--container-bg);
44-
padding: 32px 28px 24px 28px;
44+
padding: 32px 32px 28px 32px; /* Increased padding on all sides */
4545
border-radius: 14px;
4646
box-shadow: 0 6px 32px var(--shadow-color), 0 1.5px 4px var(--shadow-light);
4747
transition: background 0.3s ease, box-shadow 0.3s ease;
@@ -564,10 +564,11 @@ a:focus {
564564

565565
@media (max-width: 600px) {
566566
body {
567-
padding: 6px;
567+
padding: 10px; /* Increased from 6px for better edge margin */
568568
}
569569
.container {
570-
padding: 7px 2px;
570+
padding: 16px 15px; /* Increased from 7px 2px for better readability */
571+
margin: 20px auto; /* Add some vertical space */
571572
}
572573
.nav {
573574
flex-direction: column;
@@ -583,60 +584,145 @@ a:focus {
583584
.grid {
584585
grid-template-columns: 1fr;
585586
}
586-
/* Stepper Responsive */
587-
.step {
587+
588+
/* Mobile Stepper Improvements - Fix line centering */
589+
.stepper {
590+
padding-top: 60px; /* Space for horizontal indicators */
591+
position: relative;
592+
}
593+
594+
/* Create horizontal step indicators at the top */
595+
.stepper::before {
596+
content: '';
597+
display: flex;
598+
position: absolute;
599+
top: 0;
600+
left: 0;
601+
right: 0;
602+
height: 50px;
603+
background: var(--container-bg);
604+
z-index: 5;
605+
}
606+
607+
.stepper .step {
588608
flex-direction: column;
589609
align-items: stretch;
590610
gap: 12px;
611+
position: relative;
591612
}
613+
614+
/* Remove vertical connector line */
592615
.step:not(:last-child)::after {
593-
left: 28px;
594-
top: 56px;
595-
width: 3px;
596-
height: calc(100% - 56px);
616+
display: none;
597617
}
598-
.step-icon {
599-
margin-bottom: 8px;
600-
margin-right: 0;
601-
align-self: flex-start;
618+
619+
/* Position step numbers horizontally at the top */
620+
.step .step-icon {
621+
position: absolute;
622+
top: -50px;
623+
left: calc((100% / 5) * (var(--step-index, 0)) - 20px);
624+
margin: 0;
625+
width: 40px;
626+
height: 40px;
627+
font-size: 1.5em;
628+
z-index: 10;
602629
}
603-
.stepper-controls {
604-
flex-direction: column;
605-
gap: 10px;
630+
631+
/* Fix horizontal progress bar to center with bubbles */
632+
.stepper::after {
633+
content: '';
634+
position: absolute;
635+
top: 20px; /* Center with the step bubbles */
636+
left: 20px; /* Start from first bubble center */
637+
right: 20px; /* End at last bubble center */
638+
height: 4px;
639+
background: #e0e0e0;
640+
z-index: 6;
606641
}
607-
.stepper-controls button {
642+
643+
/* Add active step highlighting for the horizontal bar */
644+
.stepper[data-current-step="1"]::after {
645+
background: linear-gradient(to right,
646+
#1976d2 10%, /* First step is active */
647+
#e0e0e0 10%);
648+
}
649+
650+
.stepper[data-current-step="2"]::after {
651+
background: linear-gradient(to right,
652+
#1976d2 30%, /* First two steps active */
653+
#e0e0e0 30%);
654+
}
655+
656+
.stepper[data-current-step="3"]::after {
657+
background: linear-gradient(to right,
658+
#1976d2 50%, /* First three steps active */
659+
#e0e0e0 50%);
660+
}
661+
662+
.stepper[data-current-step="4"]::after {
663+
background: linear-gradient(to right,
664+
#1976d2 70%, /* First four steps active */
665+
#e0e0e0 70%);
666+
}
667+
668+
.stepper[data-current-step="5"]::after {
669+
background: linear-gradient(to right,
670+
#1976d2 90%, /* All steps active */
671+
#e0e0e0 90%);
672+
}
673+
674+
/* Better positioning for the steps at smaller sizes */
675+
.step:nth-child(1) { --step-index: 0.5; }
676+
.step:nth-child(2) { --step-index: 1.5; }
677+
.step:nth-child(3) { --step-index: 2.5; }
678+
.step:nth-child(4) { --step-index: 3.5; }
679+
.step:nth-child(5) { --step-index: 4.5; }
680+
681+
/* Additional mobile padding for text content */
682+
.step-content {
608683
width: 100%;
609-
min-width: 0;
610-
padding: 12px 0;
611-
font-size: 1.05em;
684+
padding: 15px 8px 5px 8px; /* Add horizontal padding */
685+
}
686+
687+
/* Fix stepper controls for better mobile experience */
688+
.stepper-controls {
689+
flex-direction: row;
690+
justify-content: space-between;
691+
gap: 15px; /* Increased from 10px */
692+
margin-top: 25px;
693+
padding: 0 5px; /* Add padding to prevent touching edges */
612694
}
613695
}
614696

615-
/* Extra: Make links in step-desc wrap and not overflow */
616-
.step-desc a {
617-
word-break: break-all;
618-
width: 100%;
619-
text-align: center;
620-
padding: 12px;
621-
}
622-
623-
/* Add padding to ensure content doesn't overlap with toggle button */
624-
body {
625-
padding-top: 70px; /* Space for the toggle button */
626-
}
627-
628-
.mobile-header-controls {
629-
position: fixed;
630-
top: 10px;
631-
right: 10px;
632-
z-index: 1000;
633-
}
697+
/* Fix for the overall page layout - prevent content from touching edges */
698+
@media (max-width: 767px) {
699+
body {
700+
padding: 12px 15px 20px 15px; /* Better padding all around */
701+
}
702+
703+
.content {
704+
margin: 15px 5px; /* Add horizontal margin */
705+
}
706+
707+
.footer {
708+
margin: 30px 10px 15px 10px; /* Add margin around footer */
709+
padding: 20px 5px 10px 5px;
710+
}
711+
}
712+
713+
/* Dark mode style for the horizontal progress bar */
714+
[data-theme="dark"] .stepper::after {
715+
background: #1e293b; /* Darker background for the inactive part */
634716
}
635717

636-
/* Extra: Make links in step-desc wrap and not overflow */
637-
.step-desc a {
638-
word-break: break-all;
718+
[data-theme="dark"] .stepper[data-current-step="1"]::after,
719+
[data-theme="dark"] .stepper[data-current-step="2"]::after,
720+
[data-theme="dark"] .stepper[data-current-step="3"]::after,
721+
[data-theme="dark"] .stepper[data-current-step="4"]::after,
722+
[data-theme="dark"] .stepper[data-current-step="5"]::after {
723+
background-image: linear-gradient(to right, #1976d2, #1e293b); /* Gradient for active/inactive in dark mode */
639724
}
725+
640726
/* Background slider styles */
641727
.background {
642728
z-index: -1;
@@ -651,6 +737,18 @@ a:focus {
651737
--image-duration: 5;
652738
}
653739

740+
/* Hide background on mobile devices to save resources */
741+
@media (max-width: 767px) {
742+
.background {
743+
display: none;
744+
}
745+
746+
/* Add a simple gradient background for mobile instead */
747+
body {
748+
background: linear-gradient(135deg, var(--bg-gradient-start) 0%, var(--bg-gradient-end) 100%) fixed;
749+
}
750+
}
751+
654752
.slider-container {
655753
display: flex;
656754
width: calc(8 * 100vw);

‎public/events.html‎

Lines changed: 52 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -38,18 +38,11 @@
3838
</button>
3939
<div class="logo" aria-label="VATSIM Germany Logo">VATSIM Germany</div>
4040
<h1>Piloten-Mentoren-Programm</h1>
41-
<div class="background">
42-
<div class="slider-container">
43-
<img src="https://cdn.pmp.hosting201623.ae912.netcup.net/1.png" alt="Aircraft Background" class="slider-image">
44-
<img src="https://cdn.pmp.hosting201623.ae912.netcup.net/2.png" alt="Aircraft Background" class="slider-image">
45-
<img src="https://cdn.pmp.hosting201623.ae912.netcup.net/3.png" alt="Aircraft Background" class="slider-image">
46-
<img src="https://cdn.pmp.hosting201623.ae912.netcup.net/5.png" alt="Aircraft Background" class="slider-image">
47-
<img src="https://cdn.pmp.hosting201623.ae912.netcup.net/6.png" alt="Aircraft Background" class="slider-image">
48-
<img src="https://cdn.pmp.hosting201623.ae912.netcup.net/7.png" alt="Aircraft Background" class="slider-image">
49-
<img src="https://cdn.pmp.hosting201623.ae912.netcup.net/8.png" alt="Aircraft Background" class="slider-image">
50-
<img src="https://cdn.pmp.hosting201623.ae912.netcup.net/9.png" alt="Aircraft Background" class="slider-image">
51-
</div>
41+
<div class="background" id="background-slider">
42+
<div class="slider-container" id="slider-container">
43+
<!-- Images will be loaded via JavaScript for desktop/tablet only -->
5244
</div>
45+
</div>
5346
</div>
5447
<nav class="nav" aria-label="Hauptnavigation">
5548
<a href="/" id="nav-home">Home</a>
@@ -146,6 +139,54 @@ <h1>Piloten-Mentoren-Programm</h1>
146139
headerContainer.classList.add('manual-toggle');
147140
});
148141

142+
// Conditional background image loading for desktop/tablet only
143+
function loadBackgroundImages() {
144+
const isMobile = window.innerWidth < 768;
145+
const sliderContainer = document.getElementById('slider-container');
146+
const backgroundSlider = document.getElementById('background-slider');
147+
148+
// Only load images if not on mobile
149+
if (!isMobile && sliderContainer.children.length === 0) {
150+
// Background image URLs
151+
const imageUrls = [
152+
'https://cdn.pmp.hosting201623.ae912.netcup.net/1.PNG',
153+
'https://cdn.pmp.hosting201623.ae912.netcup.net/2.PNG',
154+
'https://cdn.pmp.hosting201623.ae912.netcup.net/3.PNG',
155+
'https://cdn.pmp.hosting201623.ae912.netcup.net/5.PNG',
156+
'https://cdn.pmp.hosting201623.ae912.netcup.net/6.PNG',
157+
'https://cdn.pmp.hosting201623.ae912.netcup.net/7.PNG',
158+
'https://cdn.pmp.hosting201623.ae912.netcup.net/8.PNG',
159+
'https://cdn.pmp.hosting201623.ae912.netcup.net/9.PNG'
160+
];
161+
162+
// Create and add image elements
163+
imageUrls.forEach(url => {
164+
const img = document.createElement('img');
165+
img.src = url;
166+
img.alt = "Aircraft Background";
167+
img.className = "slider-image";
168+
sliderContainer.appendChild(img);
169+
});
170+
171+
// Make sure background is visible
172+
backgroundSlider.style.display = 'block';
173+
} else if (isMobile) {
174+
// Ensure background is hidden on mobile
175+
backgroundSlider.style.display = 'none';
176+
177+
// Clear images to free up resources if screen is resized to mobile
178+
if (sliderContainer.children.length > 0) {
179+
sliderContainer.innerHTML = '';
180+
}
181+
}
182+
}
183+
184+
// Load images on page load
185+
document.addEventListener('DOMContentLoaded', loadBackgroundImages);
186+
187+
// Update on resize
188+
window.addEventListener('resize', loadBackgroundImages);
189+
149190
// Run once on load and attach to resize
150191
handleResize();
151192
window.addEventListener('resize', handleResize);

0 commit comments

Comments
 (0)