ben7sys/web7sys
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Clean, clickable cards that expand/collapse on click

Browse Source 
Independent operation of each card
Smooth animations for better user experience
Mobile-friendly design with appropriate spacing and touch targets
Keyboard accessibility (Escape key support)
Click-outside behavior to close cards
Removed complex checkbox-based implementation in favor of simple JavaScript toggling
This commit is contained in:
ben7sys
2024-11-17 08:51:30 +01:00
parent 317cc79234
commit feeaf093d5
4 changed files with 199 additions and 209 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
public/index.html
View File

@@ -31,19 +31,21 @@
<span class="logo-sub">Simplicity is a great virtue but it requires hard work to achieve it and education to appreciate it. And to make matters worse: complexity sells better. - Edsger Wybe Dijkstra (1930–2002)</span>
<div class="mission-vision">
<div class="tooltip-container">
<h3>Meine Vision</h3>
<p>Digitale Souveränität</p>
<div class="tooltip">
<div class="tooltip-header">
<h3>Meine Vision</h3>
<p>Digitale Souveränität</p>
</div>
<div class="tooltip-content">
Ich strebe eine Zukunft an, in der jedes Individuum die volle Kontrolle über ihre digitalen Ressourcen hat. Digitale Souveränität bedeutet für mich, eine sichere, unabhängige und datenschutzkonforme Nutzung moderner Technologien zu ermöglichen, bei der jede Person die Kontrolle über ihre Daten, Zugriffe und IT-Systeme behält, ohne von externen Anbietern oder unsicheren Lösungen abhängig zu sein.
</div>
</div>
<div class="tooltip-container">
<h3>Meine Mission</h3>
<p>Sichere und nachhaltige IT-Lösungen</p>
<div class="tooltip">
<div class="tooltip-header">
<h3>Meine Mission</h3>
<p>Sichere und nachhaltige IT-Lösungen</p>
</div>
<div class="tooltip-content">
Meine Mission ist es, Sie auf dem Weg zur digitalen Souveränität kompetent zu begleiten.
</div>
</div>
</div>
@@ -58,16 +60,15 @@
<li>Analyse Ihrer bestehenden Systeme und Situation mit Blick auf die Zukunft</li>
<li>Individuelle Lösungen für Ihre Bedürfnisse</li>
<li>Zukunftsorientierte Technologieberatung</li>
</div>
<div class="service-card">
<h3>Systemadministration</h3>
<p>Professionelle Verwaltung und Wartung Ihrer IT-Systeme</p>
<li>Server-Management</li>
<li>Netzwerkadministration</li>
<li>Backup-Konzepte</li>
<li>Security-Lösungen</li>
<li>Netzwerkadministration</li>
<li>Backup-Konzepte</li>
<li>Security-Lösungen</li>
</div>
<div class="service-card">
@@ -79,21 +80,21 @@
<div class="service-card">
<h3>Self-Hosted & Cloud Solutions</h3>
<p> <li>Wartung von Cloud- oder Self-Hosted-Infrastrukturen</li>
<li>Planung, Migration und Administration</li>
<p>
<li>Wartung von Cloud- oder Self-Hosted-Infrastrukturen</li>
<li>Planung, Migration und Administration</li>
</p>
</div>
<div class="service-card">
<h3>Kernkompetenzen</h3>
<li>Microsoft Infrastrukturen (M365, Azure, AD, Windows Server, DNS, DHCP)</li>
<li>Linux-Server (RedHat or Debian based distributions)</li>
<li>Virtualisierung (Proxmox, vSphere, Xen Server)</li>
<li>Netzwerktechnik (Secure Point, Cisco, Mikrotik)</li>
<li>Sicherheit (Firewalls, VPN, Antivirus, Backup)</li>
<li>Automatisierung (Ansible, PowerShell, Bash).</li>
<li>Linux-Server (RedHat or Debian based distributions)</li>
<li>Virtualisierung (Proxmox, vSphere, Xen Server)</li>
<li>Netzwerktechnik (Secure Point, Cisco, Mikrotik)</li>
<li>Sicherheit (Firewalls, VPN, Antivirus, Backup)</li>
<li>Automatisierung (Ansible, PowerShell, Bash).</li>
</div>
</section>
<section id="contact">