kickerscup-layout/header.html at main · WebworkStudios/kickerscup-layout · 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
<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <title>Kickerscup - Football Manager</title>

    <!-- Preconnect für externe Ressourcen -->
    <link crossorigin href="https://fonts.googleapis.com" rel="preconnect">
    <link crossorigin href="https://fonts.gstatic.com" rel="preconnect">

    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&family=Rajdhani:wght@600;700&display=swap"
          rel="stylesheet">

    <!-- Preload Background Images -->
    <link as="image" href="img/background-header.webp" media="(min-width: 769px)" rel="preload" type="image/webp">
    <link as="image" href="img/background-header-mobile.webp" media="(max-width: 768px)" rel="preload"
          type="image/webp">

    <!-- Core Layout CSS (immer geladen) -->
    <link href="css/layout.css" rel="stylesheet">

    <!--
        ⚡ PERFORMANCE: ES Modules mit defer/type="module"
        - Laden parallel zu HTML (schneller als <body>-Ende)
        - Ausführung garantiert nach DOM Ready
        - Reihenfolge garantiert durch import-Statements
        - type="module" aktiviert ES6 Module Support
    -->

    <!-- Navigation System (importiert ModuleManager automatisch) -->
    <script defer src="javascript/navigation.js" type="module"></script>

    <!--
        HINWEIS: Weitere Scripts (dashboard.js, team.js, etc.)
        werden dynamisch durch ModuleManager geladen via import()
    -->
</head>
<body>
<!-- Fixed Background -->
<div class="hero-background">
    <picture>
        <source media="(max-width: 768px)" srcset="img/background-header-mobile.webp" type="image/webp">
        <source media="(min-width: 769px)" srcset="img/background-header.webp" type="image/webp">
        <img alt="Stadium Background" class="hero-bg-image" src="img/background-header.webp">
    </picture>
</div>

<!-- Animated Overlay -->
<div class="animated-bg-overlay"></div>

<!-- Top Status Bar -->
<div class="top-status-bar">
    <div class="status-left">
        <div class="compact-logo">KICKERSCUP</div>
        <div class="team-info-pill">
            <div class="team-logo-small">⚽</div>
            <span class="team-name-top">FC Thunderbolts</span>
        </div>
        <div class="date-time">
            <div class="current-date">Saison 2024/25 • Spieltag 12</div>
            <div class="current-time" id="currentTime">15:45 Uhr</div>
        </div>
    </div>

    <div class="status-right">
        <div class="budget-info">
            <div class="budget-icon">💰</div>
            <div class="budget-details">
                <div class="budget-label">Vermögen</div>
                <div class="budget-amount" id="budgetAmount">2.485.750 €</div>
            </div>
        </div>
        <div class="notification-icon" title="Benachrichtigungen">
            <span>🔔</span>
            <div class="notification-dot"></div>
        </div>
    </div>
</div>

<!-- Floating Navigation -->
<nav aria-label="Hauptnavigation" class="floating-nav" role="navigation">
    <div aria-label="Dashboard" class="nav-btn active" data-page="dashboard" role="button" tabindex="0">
        <div class="nav-btn-icon">🏠</div>
        <div class="nav-btn-label">Home</div>
    </div>
    <div aria-label="Team" class="nav-btn" data-page="team" role="button" tabindex="0">
        <div class="nav-btn-icon">👥</div>
        <div class="nav-btn-label">Team</div>
    </div>
    <div aria-label="Lineup" class="nav-btn" data-page="lineup" role="button" tabindex="0">
        <div class="nav-btn-icon">📋</div>
        <div class="nav-btn-label">Aufstellung</div>
    </div>
    <div aria-label="Training" class="nav-btn" data-page="training" role="button" tabindex="0">
        <div class="nav-btn-icon">💪</div>
        <div class="nav-btn-label">Training</div>
    </div>
    <div aria-label="Taktik" class="nav-btn" data-page="tactics" role="button" tabindex="0">
        <div class="nav-btn-icon">📋</div>
        <div class="nav-btn-label">Taktik</div>
    </div>
    <div aria-label="Stadion" class="nav-btn" data-page="stadium" role="button" tabindex="0">
        <div class="nav-btn-icon">🏟️</div>
        <div class="nav-btn-label">Stadion</div>
    </div>
    <div aria-label="Liga" class="nav-btn" data-page="league" role="button" tabindex="0">
        <div class="nav-btn-icon">🏆</div>
        <div class="nav-btn-label">Liga</div>
        <div class="nav-badge">3</div>
    </div>
    <div aria-label="Finanzen" class="nav-btn" data-page="finance" role="button" tabindex="0">
        <div class="nav-btn-icon">💰</div>
        <div class="nav-btn-label">Finanzen</div>
    </div>
    <div aria-label="Pokal" class="nav-btn" data-page="cup" role="button" tabindex="0">
        <div class="nav-btn-icon">🥇</div>
        <div class="nav-btn-label">Pokal</div>
    </div>
    <div aria-label="Einstellungen" class="nav-btn" data-page="settings" role="button" tabindex="0">
        <div class="nav-btn-icon">⚙️</div>
        <div class="nav-btn-label">Settings</div>
    </div>
</nav>

<!-- Content Wrapper - wird dynamisch geladen -->
<main class="content-wrapper" id="contentWrapper" role="main">
    <!-- Content wird hier dynamisch vom NavigationSystem geladen -->
</main>
</body>
</html>