Skip to content

Commit ea89332

Browse files
VolkanSahVolkanSah
authored
Create modules.html
1 parent e3d89fb commit ea89332

1 file changed

Lines changed: 179 additions & 0 deletions

File tree

‎modules.html‎

Lines changed: 179 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,179 @@
1+
<!DOCTYPE html>
2+
<html lang="de">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>SHP Module - System Hell Provocation</title>
7+
<link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8+
<script src="https://cdn.tailwindcss.com"></script>
9+
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10+
<script src="https://unpkg.com/feather-icons"></script>
11+
<script>
12+
tailwind.config = {
13+
theme: {
14+
extend: {
15+
colors: {
16+
hell: {
17+
50: '#fee2e2',
18+
100: '#fecaca',
19+
200: '#fca5a5',
20+
300: '#f87171',
21+
400: '#ef4444',
22+
500: '#dc2626',
23+
600: '#b91c1c',
24+
700: '#991b1b',
25+
800: '#7f1d1d',
26+
900: '#450a0a',
27+
}
28+
}
29+
}
30+
}
31+
}
32+
</script>
33+
<style>
34+
.module-card {
35+
transition: all 0.3s ease;
36+
border: 2px solid #7f1d1d;
37+
}
38+
.module-card:hover {
39+
border-color: #dc2626;
40+
transform: translateY(-5px);
41+
box-shadow: 0 10px 30px rgba(220, 38, 38, 0.3);
42+
}
43+
.status-badge {
44+
font-size: 0.75rem;
45+
padding: 0.25rem 0.75rem;
46+
border-radius: 9999px;
47+
}
48+
</style>
49+
</head>
50+
<body class="bg-black text-white font-mono">
51+
<!-- Navigation -->
52+
<nav class="border-b border-hell-700 bg-black/80 backdrop-blur-sm">
53+
<div class="container mx-auto px-4 py-4">
54+
<div class="flex justify-between items-center">
55+
<a href="index.html" class="text-2xl font-bold text-hell-400">
56+
SHP
57+
</a>
58+
<div class="flex space-x-4">
59+
<a href="index.html" class="hover:text-hell-300 transition-colors">Home</a>
60+
<a href="modules.html" class="text-hell-400 border-b-2 border-hell-400">Module</a>
61+
</div>
62+
</div>
63+
</nav>
64+
65+
<!-- Modules Header -->
66+
<section class="py-16 fire-gradient">
67+
<div class="container mx-auto px-4 text-center">
68+
<h1 class="text-5xl md:text-6xl font-black mb-6">
69+
SHP <span class="text-hell-400">Module</span>
70+
</h1>
71+
<p class="text-xl text-gray-300">
72+
Unsere Kern-Pipeline für bürokratische Höllenqualen
73+
</p>
74+
</div>
75+
</section>
76+
77+
<!-- Modules Grid -->
78+
<section class="py-16 bg-black">
79+
<div class="container mx-auto px-4">
80+
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
81+
<!-- Seelen Modul -->
82+
<div class="module-card bg-black/80 rounded-lg p-6">
83+
<div class="flex items-center justify-between mb-4">
84+
<div class="text-hell-400">
85+
<i data-feather="activity" class="w-8 h-8"></i>
86+
</div>
87+
<span class="status-badge bg-yellow-600 text-white">
88+
In Entwicklung
89+
</span>
90+
</div>
91+
<h3 class="text-2xl font-bold text-white mb-3">SHP-Modul-SEELEN</h3>
92+
<p class="text-gray-400 text-sm mb-4">Der Seelen-Verkäufer</p>
93+
<p class="text-gray-300 text-sm mb-6">
94+
Passive-aggressive Zeitfresser Simulation in Vanilla JS. Spielen Sie die Rolle eines Systemmanipulators, der Seelen über ein korruptes Netzwerk erntet und verkauft.
95+
</p>
96+
<div class="flex justify-between items-center">
97+
<span class="text-hell-400 text-sm">Version 1.0.0</span>
98+
<button class="bg-hell-600 hover:bg-hell-500 text-white px-4 py-2 rounded text-sm transition-colors">
99+
Repository
100+
</button>
101+
</div>
102+
</div>
103+
104+
<!-- Z2000 Modul -->
105+
<div class="module-card bg-black/80 rounded-lg p-6">
106+
<div class="flex items-center justify-between mb-4">
107+
<div class="text-hell-400">
108+
<i data-feather="shield" class="w-8 h-8"></i>
109+
</div>
110+
<span class="status-badge bg-green-600 text-white">
111+
Stabil
112+
</span>
113+
</div>
114+
<h3 class="text-2xl font-bold text-white mb-3">SHP-Modul-Z2000-MH</h3>
115+
<p class="text-gray-400 text-sm mb-4">Prozesssteuerungssystem</p>
116+
<p class="text-gray-300 text-sm mb-6">
117+
Die satirische Modellierung rassistischer und diskriminierender Verwaltungsprozesse.
118+
</p>
119+
<div class="flex justify-between items-center">
120+
<span class="text-hell-400 text-sm">Version 1.0.2</span>
121+
<button class="bg-hell-600 hover:bg-hell-500 text-white px-4 py-2 rounded text-sm transition-colors">
122+
Repository
123+
</button>
124+
</div>
125+
</div>
126+
127+
<!-- PKA-004 Modul -->
128+
<div class="module-card bg-black/80 rounded-lg p-6">
129+
<div class="flex items-center justify-between mb-4">
130+
<div class="text-hell-400">
131+
<i data-feather="eye" class="w-8 h-8"></i>
132+
</div>
133+
<span class="status-badge bg-blue-600 text-white">
134+
Alpha
135+
</span>
136+
</div>
137+
<h3 class="text-2xl font-bold text-white mb-3">SHD-PKA-004</h3>
138+
<p class="text-gray-400 text-sm mb-4">STASI Modul</p>
139+
<p class="text-gray-300 text-sm mb-6">
140+
Psychosoziale Konformitätsprüfung für Vektorjustierung. Die zynische Überwachung von Geschlecht und sexueller Identität.
141+
</p>
142+
<div class="flex justify-between items-center">
143+
<span class="text-hell-400 text-sm">Alpha Version</span>
144+
<button class="bg-hell-600 hover:bg-hell-500 text-white px-4 py-2 rounded text-sm transition-colors">
145+
Repository
146+
</button>
147+
</div>
148+
</div>
149+
150+
<!-- FAX-2000 Modul -->
151+
<div class="module-card bg-black/80 rounded-lg p-6">
152+
<div class="flex items-center justify-between mb-4">
153+
<div class="text-hell-400">
154+
<i data-feather="printer" class="w-8 h-8"></i>
155+
</div>
156+
<span class="status-badge bg-purple-600 text-white">
157+
Frei
158+
</span>
159+
</div>
160+
<h3 class="text-2xl font-bold text-white mb-3">SHP-FAX-2000</h3>
161+
<p class="text-gray-400 text-sm mb-4">Systemtransmitter</p>
162+
<p class="text-gray-300 text-sm mb-6">
163+
Das Fundament der deutschen Demokratie. Es ist nur ein FAX!
164+
</p>
165+
<div class="flex justify-between items-center">
166+
<span class="text-hell-400 text-sm">Stabil</span>
167+
<button class="bg-hell-600 hover:bg-hell-500 text-white px-4 py-2 rounded text-sm transition-colors">
168+
Repository
169+
</button>
170+
</div>
171+
</div>
172+
</div>
173+
</section>
174+
175+
<script>
176+
feather.replace();
177+
</script>
178+
</body>
179+
</html>

0 commit comments

Comments
 (0)