dev-manufaktur/Dashboard_V2/templates/dashboard.html

<!-- templates/dashboard.html -->
{% extends "base.html" %}
{% block title %}Dashboard{% endblock %}

{% block content %}
<div class="container mx-auto p-4 sm:p-6 lg:p-8 pb-20 flex flex-col items-center">

  <!-- Dark Mode Toggle (Button oben rechts) -->
  <button id="darkModeToggle"
          class="fixed top-4 right-4 w-12 h-12 rounded-xl bg-gray-200 dark:bg-gray-800 z-10 transition-colors duration-300">
      <i class="fas fa-sun text-yellow-400 dark:hidden text-xl"></i>
      <i class="fas fa-moon text-blue-200 hidden dark:inline text-xl"></i>
  </button>

  <!-- Logo / User Greeting -->
  <div class="flex flex-col items-center justify-center space-y-4 text-center mb-6">
      <a id="logo-link" href="https://{{ domain }}" target="_blank">
          <img id="logo-img" src="{{ logo_path }}" alt="Firmenlogo" class="w-20 h-auto mb-2">
      </a>
      <h1 class="text-2xl sm:text-3xl font-bold text-gray-800 dark:text-white transition-colors duration-300">
        Willkommen zurück, {{ user }}
      </h1>
      <div id="clock" class="text-xl sm:text-2xl font-semibold"></div>
  </div>

  <!-- Websuche unter dem Datum -->
  <div class="glassmorphism p-4 shadow-lg mb-6 w-full max-w-lg">
    <form id="searchForm" class="flex flex-col sm:flex-row space-y-2 sm:space-y-0 sm:space-x-2 items-center justify-center">
      <input type="text" id="searchInput" placeholder="Suche..."
             class="flex-grow p-2 border rounded text-gray-800" />
      <select id="searchEngine" class="p-2 border rounded text-gray-800">
          <option value="qwant">Qwant</option>
          <option value="google">Google</option>
      </select>
      <button type="submit" class="bg-green-500 text-white px-4 py-2 rounded hover:bg-green-600">
        Los
      </button>
    </form>
  </div>

  <!-- Flash-Messages -->
  {% with messages = get_flashed_messages(with_categories=true) %}
      {% if messages %}
          <div class="mb-4 w-full max-w-lg">
              {% for category, message in messages %}
              <div class="alert flex items-center bg-{{ category }}-500 text-white text-sm font-bold px-4 py-3 mb-2"
                   role="alert">
                  <p>{{ message }}</p>
                  <svg class="fill-current h-6 w-6 text-white ml-auto close-flash" role="button"
                       xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                      <title>Schließen</title>
                      <path d="M14.348 14.849a1.2 1.2 0 0 1-1.697 0L10 11.819l-2.651 3.029
                               a1.2 1.2 0 1 1-1.697-1.697L8.302 10 5.651 7.349
                               a1.2 1.2 0 1 1 1.697-1.697L10 8.181l2.651-2.529
                               a1.2 1.2 0 1 1 1.697 1.697L11.698 10l2.651 2.651
                               a1.2 1.2 0 0 1 0 1.698z"/>
                  </svg>
              </div>
              {% endfor %}
          </div>
      {% endif %}
  {% endwith %}

  <!-- Widgets: Benachrichtigungen / Zeiterfassung -->
  <div class="grid grid-cols-1 sm:grid-cols-3 gap-4 mb-6 w-full max-w-3xl">
      <!-- Benachrichtigungen -->
      <div class="glassmorphism p-4 shadow-lg rounded">
          <h2 class="text-lg font-semibold mb-2">Benachrichtigungen</h2>
          {% if notifications %}
              <ul class="space-y-2 max-h-56 overflow-auto">
                  {% for note in notifications %}
                      <li class="bg-gray-100 dark:bg-gray-700 p-2 rounded">
                          {{ note.message }}<br>
                          <span class="text-xs text-gray-500">{{ note.created_at }}</span>
                      </li>
                  {% endfor %}
              </ul>
          {% else %}
              <p class="text-sm">Keine neuen Benachrichtigungen</p>
          {% endif %}
      </div>

      <!-- Zeiterfassung -->
      <div class="glassmorphism p-4 shadow-lg sm:col-span-2 rounded">
          <h2 class="text-lg font-semibold mb-2">Zeiterfassung</h2>
          <form action="{{ url_for('time_tracking') }}" method="POST"
                class="mb-4 flex flex-col sm:flex-row items-center">
              <input type="text" name="activity" placeholder="Aktivität"
                     class="p-2 border rounded mb-2 sm:mb-0 sm:mr-2 flex-1 text-gray-800" />
              <button type="submit" name="action" value="start"
                      class="bg-green-500 text-white px-4 py-2 rounded hover:bg-green-600 mr-2">
                  Start
              </button>
              <button type="submit" name="action" value="stop"
                      class="bg-red-500 text-white px-4 py-2 rounded hover:bg-red-600">
                  Stopp
              </button>
          </form>
          <div class="max-h-40 overflow-auto">
              {% for entry in time_entries %}
                  <div class="bg-gray-100 dark:bg-gray-700 p-2 mb-2 rounded">
                      <strong>{{ entry.activity }}</strong><br>
                      Start: {{ entry.start_time }}<br>
                      Ende: {% if entry.end_time %}{{ entry.end_time }}{% else %}<em>läuft</em>{% endif %}
                  </div>
              {% endfor %}
          </div>
      </div>
  </div>

  <!-- App Carousel (für Lesezeichen) -->
  <div class="glassmorphism p-4 mb-12 relative w-full max-w-3xl rounded">
      <div id="appCarousel" class="overflow-hidden">
          <div class="flex transition-transform duration-300 ease-in-out">
              <div class="w-full flex-shrink-0">
                  <div class="grid grid-cols-3 sm:grid-cols-5 gap-4">
                      {% for bm in user_bookmarks %}
                      <a href="{{ bm.url }}" class="flex flex-col items-center" title="{{ bm.title }}" target="_blank">
                          <div class="w-12 h-12 flex items-center justify-center bg-blue-500 rounded-xl mb-1
                                      transition-transform hover:scale-110">
                              <i class="{{ bm.icon_class }} text-white text-xl"></i>
                          </div>
                          <p class="text-center text-xs font-medium">{{ bm.title }}</p>
                      </a>
                      {% endfor %}
                  </div>
              </div>
          </div>
      </div>
  </div>
</div>

<!-- Dock -->
<div class="fixed bottom-4 left-1/2 transform -translate-x-1/2 glassmorphism p-2 flex space-x-4 rounded">
  <!-- Home Modal -->
  <button class="dock-icon w-12 h-12 flex items-center justify-center bg-blue-500 hover:bg-blue-600 rounded-xl
                 transition-colors duration-200" data-modal="homeModal">
      <i class="fas fa-home text-white text-xl"></i>
  </button>

  <!-- Falls du trotzdem einen "Support" willst, kannst du es hier lassen -->
  <button class="dock-icon w-12 h-12 flex items-center justify-center bg-purple-500 hover:bg-purple-600 rounded-xl
                 transition-colors duration-200" data-modal="supportModal">
      <i class="fas fa-question-circle text-white text-xl"></i>
  </button>

  <!-- Admin-Button nur zeigen, wenn is_admin == 1 -->
  {% if session.is_admin == 1 %}
  <a href="{{ url_for('admin_panel') }}"
     class="dock-icon w-12 h-12 flex items-center justify-center bg-yellow-500 hover:bg-yellow-600 rounded-xl
            transition-colors duration-200">
      <i class="fas fa-user-shield text-white text-xl"></i>
  </a>
  {% endif %}
</div>

<!-- Modals (z.B. Home, Support usw.) -->
<div id="homeModal" class="fixed inset-0 bg-black bg-opacity-50 hidden items-center justify-center z-50">
    <div class="glassmorphism bg-white dark:bg-gray-800 p-6 rounded max-w-md w-full mx-auto">
        <h2 class="text-2xl font-bold mb-4">Willkommen Zuhause!</h2>
        <p class="mb-4">Schneller Zugriff auf wichtige Einstellungen.</p>
        <!-- z.B. Logout oder Konto löschen -->
        <form action="{{ url_for('logout') }}" method="POST" class="mb-3 mt-2">
            <button type="submit" class="w-full bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
                Abmelden
            </button>
        </form>
        <button class="mt-4 bg-gray-300 dark:bg-gray-700 hover:bg-gray-400 dark:hover:bg-gray-800 text-gray-800 dark:text-white
                       font-bold py-2 px-4 rounded close-modal">
            Schließen
        </button>
    </div>
</div>

<div id="supportModal" class="fixed inset-0 bg-black bg-opacity-50 hidden items-center justify-center z-50">
    <div class="glassmorphism bg-white dark:bg-gray-800 p-6 rounded max-w-md w-full mx-auto">
        <h2 class="text-2xl font-bold mb-4">Support</h2>
        <p class="mb-4">Beschreiben Sie Ihr Problem</p>
        <!-- ... -->
        <button class="mt-4 bg-gray-300 dark:bg-gray-700 hover:bg-gray-400 dark:hover:bg-gray-800 text-gray-800 dark:text-white
                       font-bold py-2 px-4 rounded close-modal">
            Schließen
        </button>
    </div>
</div>

<!-- JavaScript fürs Dashboard -->
<script>
  // Dark Mode Button
  const darkModeToggle = document.getElementById('darkModeToggle');
  darkModeToggle.addEventListener('click', () => {
      document.documentElement.classList.toggle('dark');
      localStorage.setItem('darkMode', document.documentElement.classList.contains('dark'));
  });

  // Uhrzeit
  function updateClock() {
      const now = new Date();
      const timeString = now.toLocaleTimeString('de-DE');
      const dateString = now.toLocaleDateString('de-DE', {
          weekday: 'long', year: 'numeric', month: 'long', day: 'numeric'
      });
      document.getElementById('clock').innerHTML =
         `${timeString}<br><span class="text-sm font-normal">${dateString}</span>`;
  }
  setInterval(updateClock, 1000);
  updateClock();

  // GSAP-Effekte
  gsap.from(".glassmorphism", {
      duration: 1, opacity: 0, y: 50, stagger: 0.2, ease: "power3.out"
  });
  gsap.from(".dock-icon", {
      duration: 0.5, opacity: 0, y: 20, stagger: 0.1, ease: "back.out(1.7)", delay: 1
  });

  // Flash-Meldungen schließen
  document.addEventListener('DOMContentLoaded', function () {
      const closeButtons = document.querySelectorAll('.close-flash');
      closeButtons.forEach(button => {
          button.addEventListener('click', function () {
              const alertBox = this.closest('.alert');
              alertBox.style.transition = 'opacity 0.5s ease';
              alertBox.style.opacity = '0';
              setTimeout(() => alertBox.remove(), 500);
          });
      });
  });

  // Modals (Home, Support)
  const modals = document.querySelectorAll('[id$="Modal"]');
  const modalTriggers = document.querySelectorAll('[data-modal]');
  const closeModalButtons = document.querySelectorAll('.close-modal');

  modalTriggers.forEach(trigger => {
      trigger.addEventListener('click', () => {
          const modalId = trigger.getAttribute('data-modal');
          const modal = document.getElementById(modalId);
          modal.classList.remove('hidden');
          modal.classList.add('flex');
      });
  });
  closeModalButtons.forEach(btn => {
      btn.addEventListener('click', () => {
          const modal = btn.closest('[id$="Modal"]');
          modal.classList.remove('flex');
          modal.classList.add('hidden');
      });
  });
  modals.forEach(m => {
      m.addEventListener('click', (e) => {
          if (e.target === m) {
              m.classList.remove('flex');
              m.classList.add('hidden');
          }
      });
  });

  // Websuche
  const searchForm = document.getElementById('searchForm');
  const searchInput = document.getElementById('searchInput');
  const searchEngine = document.getElementById('searchEngine');
  searchForm.addEventListener('submit', (evt) => {
      evt.preventDefault();
      const query = searchInput.value.trim();
      if (!query) return;
      let url = '';
      if (searchEngine.value === 'qwant') {
          url = `https://www.qwant.com/?q=${encodeURIComponent(query)}`;
      } else {
          url = `https://www.google.com/search?q=${encodeURIComponent(query)}`;
      }
      window.open(url, '_blank');
  });
</script>
{% endblock content %}