Hugging Face's logo

Spaces:
M0zzi
/
glowup-premium-optimizer
Running

App Files Community
M0zzi commited on
Commit
a10d627
·
verified ·
1 Parent(s): 1142709

die Kopfzeile ist nicht fixiert. Features, Preise, Roadmap, Login. Den Premium Glowup machst du bitte wenn die den Feinschlief gemacht hast

Browse files
Files changed (2) hide show
  1. components/navbar.js +12 -8
  2. roadmap.html +127 -0
components/navbar.js CHANGED
@@ -29,8 +29,8 @@ class CustomNavbar extends HTMLElement {
29
  transition: max-height 0.3s ease-in;
30
  }
31
  </style>
32
- <nav class="bg-white shadow-sm">
33
- <div class="container mx-auto px-6 py-4">
34
  <div class="flex justify-between items-center">
35
  <!-- Logo -->
36
  <div class="text-2xl font-bold text-primary">
@@ -39,11 +39,11 @@ class CustomNavbar extends HTMLElement {
39
 
40
  <!-- Desktop Menu -->
41
  <div class="hidden md:flex space-x-8">
42
- <a href="#features" class="nav-link text-gray-700 hover:text-primary">Funktionen</a>
43
  <a href="#pricing" class="nav-link text-gray-700 hover:text-primary">Preise</a>
44
- <a href="#" class="nav-link text-gray-700 hover:text-primary">Ressourcen</a>
45
  <a href="forum.html" class="nav-link text-gray-700 hover:text-primary">Forum</a>
46
- <a href="#" class="nav-link text-gray-700 hover:text-primary">Über uns</a>
47
  </div>
48
 
49
  <!-- Mobile menu button -->
@@ -55,8 +55,12 @@ class CustomNavbar extends HTMLElement {
55
 
56
  <!-- Desktop CTA Buttons -->
57
  <div class="hidden md:flex items-center space-x-4">
58
- <a href="#" class="text-gray-700 hover:text-primary font-medium">Anmelden</a>
59
- <a href="#" class="bg-primary hover:bg-primary/90 text-white px-4 py-2 rounded-full font-medium transition duration-300">Registrieren</a>
 
 
 
 
60
  </div>
61
  </div>
62
 
@@ -67,7 +71,7 @@ class CustomNavbar extends HTMLElement {
67
  <a href="#pricing" class="block text-gray-700 hover:text-primary">Pricing</a>
68
  <a href="#" class="block text-gray-700 hover:text-primary">Resources</a>
69
  <a href="forum.html" class="block text-gray-700 hover:text-primary">Forum</a>
70
- <a href="#" class="block text-gray-700 hover:text-primary">About</a>
71
  <div class="border-t border-gray-200 pt-4 mt-2">
72
  <a href="#" class="block text-gray-700 hover:text-primary mb-3">Log In</a>
73
  <a href="#" class="inline-block bg-primary hover:bg-primary/90 text-white px-4 py-2 rounded-full font-medium transition duration-300">Sign Up</a>
 
29
  transition: max-height 0.3s ease-in;
30
  }
31
  </style>
32
+ <nav class="bg-white shadow-sm sticky top-0 z-50">
33
+ <div class="container mx-auto px-6 py-4">
34
  <div class="flex justify-between items-center">
35
  <!-- Logo -->
36
  <div class="text-2xl font-bold text-primary">
 
39
 
40
  <!-- Desktop Menu -->
41
  <div class="hidden md:flex space-x-8">
42
+ <a href="#features" class="nav-link text-gray-700 hover:text-primary">Features</a>
43
  <a href="#pricing" class="nav-link text-gray-700 hover:text-primary">Preise</a>
44
+ <a href="roadmap.html" class="nav-link text-gray-700 hover:text-primary">Roadmap</a>
45
  <a href="forum.html" class="nav-link text-gray-700 hover:text-primary">Forum</a>
46
+ <a href="#" class="nav-link text-gray-700 hover:text-primary">Login</a>
47
  </div>
48
 
49
  <!-- Mobile menu button -->
 
55
 
56
  <!-- Desktop CTA Buttons -->
57
  <div class="hidden md:flex items-center space-x-4">
58
+ <a href="#" class="bg-glow text-primary hover:bg-primary hover:text-white px-6 py-2 rounded-full font-medium transition duration-300 glow-animate">
59
+ <span class="flex items-center">
60
+ <i data-feather="zap" class="w-4 h-4 mr-2"></i>
61
+ Premium GlowUp
62
+ </span>
63
+ </a>
64
  </div>
65
  </div>
66
 
 
71
  <a href="#pricing" class="block text-gray-700 hover:text-primary">Pricing</a>
72
  <a href="#" class="block text-gray-700 hover:text-primary">Resources</a>
73
  <a href="forum.html" class="block text-gray-700 hover:text-primary">Forum</a>
74
+ <a href="#" class="block text-gray-700 hover:text-primary">Login</a>
75
  <div class="border-t border-gray-200 pt-4 mt-2">
76
  <a href="#" class="block text-gray-700 hover:text-primary mb-3">Log In</a>
77
  <a href="#" class="inline-block bg-primary hover:bg-primary/90 text-white px-4 py-2 rounded-full font-medium transition duration-300">Sign Up</a>
roadmap.html ADDED
@@ -0,0 +1,127 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Roadmap | GlowUp Premium</title>
7
+ <link rel="stylesheet" href="style.css">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://unpkg.com/feather-icons"></script>
10
+ <script src="components/navbar.js"></script>
11
+ <script src="components/footer.js"></script>
12
+ <style>
13
+ .timeline-item::before {
14
+ content: '';
15
+ position: absolute;
16
+ left: -30px;
17
+ top: 0;
18
+ width: 16px;
19
+ height: 16px;
20
+ border-radius: 50%;
21
+ background: #6366F1;
22
+ border: 4px solid #E0E7FF;
23
+ }
24
+ .timeline {
25
+ border-left: 2px solid #E0E7FF;
26
+ }
27
+ .completed {
28
+ opacity: 0.7;
29
+ }
30
+ .completed .timeline-item::before {
31
+ background: #10B981;
32
+ }
33
+ </style>
34
+ </head>
35
+ <body class="bg-gray-50 min-h-screen flex flex-col">
36
+ <custom-navbar></custom-navbar>
37
+
38
+ <main class="flex-grow container mx-auto px-4 py-12">
39
+ <div class="max-w-3xl mx-auto">
40
+ <h1 class="text-4xl font-bold text-gray-900 mb-2">Produkt-Roadmap</h1>
41
+ <p class="text-xl text-gray-600 mb-8">Sehen Sie, was wir entwickeln und was als Nächstes kommt</p>
42
+
43
+ <div class="timeline pl-8 relative">
44
+ <!-- Q4 2023 -->
45
+ <div class="mb-12 relative timeline-item completed">
46
+ <div class="bg-white p-6 rounded-xl shadow-sm">
47
+ <div class="flex justify-between items-start mb-2">
48
+ <h3 class="text-xl font-bold text-gray-900">Q4 2023</h3>
49
+ <span class="inline-block bg-emerald-100 text-emerald-800 text-sm px-3 py-1 rounded-full">Erledigt</span>
50
+ </div>
51
+ <ul class="list-disc pl-5 text-gray-600 space-y-2">
52
+ <li>Performance-Optimierung Version 2.0</li>
53
+ <li>Mobile App Beta-Release</li>
54
+ <li>Integration mit Slack & Teams</li>
55
+ </ul>
56
+ </div>
57
+ </div>
58
+
59
+ <!-- Q1 2024 -->
60
+ <div class="mb-12 relative timeline-item completed">
61
+ <div class="bg-white p-6 rounded-xl shadow-sm">
62
+ <div class="flex justify-between items-start mb-2">
63
+ <h3 class="text-xl font-bold text-gray-900">Q1 2024</h3>
64
+ <span class="inline-block bg-emerald-100 text-emerald-800 text-sm px-3 py-1 rounded-full">Erledigt</span>
65
+ </div>
66
+ <ul class="list-disc pl-5 text-gray-600 space-y-2">
67
+ <li>AI-basierte Empfehlungen</li>
68
+ <li>Erweiterte Analytics-Dashboard</li>
69
+ <li>Mobile App öffentliche Version</li>
70
+ </ul>
71
+ </div>
72
+ </div>
73
+
74
+ <!-- Q2 2024 -->
75
+ <div class="mb-12 relative timeline-item">
76
+ <div class="bg-white p-6 rounded-xl shadow-sm">
77
+ <div class="flex justify-between items-start mb-2">
78
+ <h3 class="text-xl font-bold text-gray-900">Q2 2024</h3>
79
+ <span class="inline-block bg-primary/10 text-primary text-sm px-3 py-1 rounded-full">In Arbeit</span>
80
+ </div>
81
+ <ul class="list-disc pl-5 text-gray-600 space-y-2">
82
+ <li>Browser-Erweiterung</li>
83
+ <li>Challenges & Gamification</li>
84
+ <li>API für Entwickler</li>
85
+ </ul>
86
+ </div>
87
+ </div>
88
+
89
+ <!-- Q3 2024 -->
90
+ <div class="mb-12 relative timeline-item">
91
+ <div class="bg-white p-6 rounded-xl shadow-sm">
92
+ <div class="flex justify-between items-start mb-2">
93
+ <h3 class="text-xl font-bold text-gray-900">Q3 2024</h3>
94
+ <span class="inline-block bg-gray-100 text-gray-800 text-sm px-3 py-1 rounded-full">Geplant</span>
95
+ </div>
96
+ <ul class="list-disc pl-5 text-gray-600 space-y-2">
97
+ <li>Team-Funktionen</li>
98
+ <li>Zielsetzungs-Tools</li>
99
+ <li>Erweiterte Integrationen</li>
100
+ </ul>
101
+ </div>
102
+ </div>
103
+
104
+ <!-- Q4 2024 -->
105
+ <div class="relative timeline-item">
106
+ <div class="bg-white p-6 rounded-xl shadow-sm">
107
+ <div class="flex justify-between items-start mb-2">
108
+ <h3 class="text-xl font-bold text-gray-900">Q4 2024</h3>
109
+ <span class="inline-block bg-gray-100 text-gray-800 text-sm px-3 py-1 rounded-full">In Planung</span>
110
+ </div>
111
+ <ul class="list-disc pl-5 text-gray-600 space-y-2">
112
+ <li>KI-Coach-Funktion</li>
113
+ <li>Automatisierte Reports</li>
114
+ <li>Enterprise-Features</li>
115
+ </ul>
116
+ </div>
117
+ </div>
118
+ </div>
119
+ </div>
120
+ </main>
121
+
122
+ <custom-footer></custom-footer>
123
+
124
+ <script src="script.js"></script>
125
+ <script>feather.replace();</script>
126
+ </body>
127
+ </html>