Moderne Visuele Stijlen in de Gebruikersbeheer WebApplicatie

Introductie

Bij het omvormen van de Windows Forms-applicatie naar Blazor lag de focus niet alleen op functionaliteit, maar ook op een visueel aantrekkelijke en intuïtieve interface. Hieronder een overzicht van de belangrijkste opmaakkeuzes, inclusief codevoorbeelden.

1. Dynamische Achtergrond met CSS Animatie

<div class="animated-background"></div>

                                <style>
                                  .animated-background {
                                    background: linear-gradient(-45deg, #ff6b6b, #4ecdc4, #45b7d1, #96c93d);
                                    animation: gradientFlow 20s ease infinite;
                                  }

                                  @keyframes gradientFlow {
                                    0% { background-position: 0% 50%; }
                                    50% { background-position: 100% 50%; }
                                    100% { background-position: 0% 50%; }
                                  }
                                </style>

2. Zwevende Partikels voor Diepte

                            <div class="particles" @ref="particlesRef"></div>

                                <script>
                                  function createParticles(container) {
                                    for (let i = 0; i < 50; i++) {
                                      const particle = document.createElement('div');
                                      particle.className = 'particle';
                                      particle.style.left = Math.random() * 100 + '%'; // Willekeurige positie
                                      container.appendChild(particle);
                                    }
                                  }
                                </script>

                                <style>
                                  .particle {
                                    animation: float 15s infinite linear; 
                                  }

                                  @keyframes float {
                                    to { transform: translateY(-100vh) rotate(720deg); } // Draaiende beweging
                                  }
                                </style>
                                
                                

3. Dashboard met Glasachtige Effecten

<div class="dashboard-container">
  <div class="dashboard-box header-box">
    <h1><i class="fas fa-fingerprint"></i> Gebruikersbeheer</h1>
  </div>
</div>

<style>
  .dashboard-container {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(10px); /* Glaseffect */
    border: 1px solid rgba(255, 255, 255, 0.2); 
  }

  .dashboard-box {
    background: rgba(255, 255, 255, 0.7);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); 
  }
</style>

4. Statusindicatoren met Kleurcodering

<div class="status-indicator @(isConnected ? "connected" : "disconnected")">
  <i class="fas fa-bluetooth-b"></i>
  @statusText
</div>

<style>
  .connected {
    background: rgba(46, 204, 113, 0.2); 
    border: 2px solid #2ecc71; 
  }

  .disconnected {
    background: rgba(231, 76, 60, 0.2); 
    border: 2px solid #e74c3c; 
  }
</style>

5. Animerende Actieknoppen

<RadzenButton class="action-button pulse">
                      Nieuwe vingerafdruké  
                    </style>

6. Logboek met Technische Uitstraling

<div class="log-container">
                              @foreach (var log in logs) {
                                <div class="log-entry">
                                  <span class="log-time">@DateTime.Now.ToString("HH:mm:ss")</span>
                                  @log
                                </div>
                              }
                            </div>

                            <style>
                              .log-container {
                                background: rgba(0, 0, 0, 0.05); 
                                font-family: 'Courier New', monospace; /* Monospace-font */
                              }
                            </style>

Uitkomst:

Volgende maand

Volgende maand zal ik werken aan de functionaliteit van het project om eventueel nog het blazor project om te vormen naar een app.