<!DOCTYPE html>
<html lang="de" xmlns:th="http://www.thymeleaf.org">
<head>
  <title>WSRB Edition</title>
  <meta th:replace="~{fragments/page :: html_header}" />
  <base th:href="@{/}" href="https://digibib.uni-rostock.de/wsrb/" />
	
	<!-- Launch UI (CSS) -->
  <style th:if="${(param.launch != null)}">
         /* Vorhang Container */
        .curtain-container {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1000;
            pointer-events: none;
        }

        .curtain-container.active {
            pointer-events: all;
        }

        /* Vorhang */
        .curtain {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: 
                radial-gradient(ellipse at 50% 50%, rgba(139, 0, 0, 0.3) 0%, transparent 50%),
                linear-gradient(to bottom, #8B0000 0%, #5C0000 50%, #3D0000 100%);
            transition: transform 5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
            box-shadow: 0 10px 50px rgba(0,0,0,0.8), inset 0 0 100px rgba(0,0,0,0.5);
            transform: translateY(0);
        }

        .curtain-left {
            display: none;
        }

        .curtain-right {
            display: none;
        }

        /* Samt-Textur - vertikale Falten */
        .curtain::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: 
                repeating-linear-gradient(
                    90deg,
                    rgba(0,0,0,0.6) 0px,
                    rgba(0,0,0,0.4) 15px,
                    transparent 30px,
                    rgba(255,255,255,0.15) 45px,
                    transparent 60px,
                    rgba(0,0,0,0.4) 75px,
                    rgba(0,0,0,0.6) 90px
                ),
                repeating-linear-gradient(
                    0deg,
                    transparent 0px,
                    rgba(0,0,0,0.2) 2px,
                    transparent 4px
                );
            opacity: 1;
        }

        /* Glanz-Effekt */
        .curtain::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(
                90deg,
                transparent 0%,
                transparent 45%,
                rgba(255,255,255,0.1) 50%,
                transparent 55%,
                transparent 100%
            );
            background-size: 200px 100%;
            animation: shimmer 3s infinite;
        }

        @keyframes shimmer {
            0%, 100% { opacity: 0.3; }
            50% { opacity: 0.6; }
        }

        /* Wenn Vorhang geöffnet */
        .curtain-container.open .curtain {
            transform: translateY(-100%);
        }

        /* Launch Button */
        .launch-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 1001;
            background: rgba(0,0,0,0.3);
            backdrop-filter: blur(5px);
            transition: opacity 0.5s, visibility 0.5s;
        }

        .launch-overlay.hidden {
            opacity: 0;
            visibility: hidden;
        }

        .launch-button {
           padding: 18px 30px 0px 30px;
            font-size: 1.1rem;
           /* background: linear-gradient(135deg, #004a99 0%, #34495e 100%);*/
           background: rgba(255,255,255, 0.5);
            color: white;
            border: 2px solid  #702A00;
            border-radius: 8px;
            cursor: pointer;
            box-shadow: 0 4px 15px rgba(0,0,0,0.3);
            transition: all 0.3s ease;
        
        }

        .launch-button:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 40px rgba(245, 87, 108, 0.6);
        }

        .launch-button:active {
            transform: translateY(-2px);
        }
    </style>
</head>
<body>
  <header class=""><div></div></header>
  <nav th:replace="~{fragments/page :: navigation (navActive='nav-main-home')}">...</nav>
  <main class="container">
    <hr />
    <div class="row mb-5">
	  <div class="col-8 mt-5">
        <div th:utext="${htmlBody}"></div>
      </div>
      <div class="col-4 mt-5 ps-5">
	    <img th:src="@{/images/start/frontpage_ws1.jpg}" alt="Titelseite WS1" class="w-100 ps-4">
	   </div>	  
    </div>
    <div class="row pt-5">
      <div class="col-12 col-md-4 col-xl mb-4">
        <div class="card ir-clickable-card text-center" data-url="./site/intro__ueberblick" onclick="window.location.href=this.dataset.url">
          <div style="position: relative" class="d-none d-lg-block">
            <img class="card-img-top" th:src="@{/images/start/kachel_intro.jpg}" alt="Bildkachel Einführung">
          </div>
          <div class="card-footer pt-1 pb-0 d-flex flex-column justify-content-center" style="min-height: 3.6em;">
            <h4 class="text-white" th:text="#{wsrb.page.headlines.main.intro}">Einführung</h4>
          </div>
        </div>
      </div>

      <div class="col-12 col-md-4 col-xl mb-4">
        <div class="card ir-clickable-card text-center" style="position: relative" data-url="./edition" onclick="window.location.href=this.dataset.url">
          <div style="position: relative" class="d-none d-lg-block">
            <img class="card-img-top" th:src="@{/images/start/kachel_edition.jpg}" alt="Bildkachel Edition">
          </div>
          <div class="card-footer pt-1 pb-0 d-flex flex-column justify-content-center" style="min-height: 3.6em;">
            <h4 class="text-white" th:text="#{wsrb.page.headlines.main.edition}">Edition</h4>
          </div>
        </div>
      </div>

      <div class="col-12 col-md-4 col-xl mb-4">
        <div class="card ir-clickable-card text-center" data-url="./transkription" onclick="window.location.href=this.dataset.url">
          <div style="position: relative" class="d-none d-lg-block">
            <img class="card-img-top" th:src="@{/images/start/kachel_transkription.jpg}" alt="Bildkachel Transkription">
          </div>
          <div class="card-footer pt-1 pb-0 d-flex flex-column justify-content-center" style="min-height: 3.6em;">
            <h4 class="text-white" th:text="#{wsrb.page.headlines.main.transkriptionen}">Transkriptionen</h4>
          </div>
        </div>
      </div>

      <div class="col-12 col-md-4 col-xl mb-4">
        <div class="card ir-clickable-card text-center" data-url="./daten_tei" onclick="window.location.href=this.dataset.url">
          <div style="position: relative" class="d-none d-lg-block">
            <img class="card-img-top" th:src="@{/images/start/kachel_tei.jpg}" alt="Bildkachel Daten/TEI">
          </div>
          <div class="card-footer pt-1 pb-0 d-flex flex-column justify-content-center" style="min-height: 3.6em;">
            <h4 class="text-white" th:text="#{wsrb.page.headlines.main.daten_tei}">Daten/TEI</h4>
          </div>
        </div>
      </div>

      <div class="col-12 col-md-4 col-xl mb-4">
        <div class="card ir-clickable-card text-center" data-url="./site/buchausgabe" onclick="window.location.href=this.dataset.url">
          <div style="position: relative" class="d-none d-lg-block">
            <img class="card-img-top" th:src="@{/images/start/kachel_buchausgabe.jpg}" alt="[Bild]">
          </div>
          <div class="card-footer pt-1 pb-0 d-flex flex-column justify-content-center" style="min-height: 3.6em;">
            <h4 class="text-white" th:text="#{wsrb.page.headlines.main.buchausgabe}">Buchausgabe</h4>
          </div>
        </div>
      </div>
    </div>
  </main>
	
  <!-- Launch UI -->
  <th:block  th:if="${(param.launch != null)}">
    <!-- Vorhang -->
    <div class="curtain-container active">
        <div class="curtain"></div>
    </div>
    
    <!-- Launch Button Overlay -->
    <div class="launch-overlay">
        <button class="launch-button" onclick="openCurtain()">
            <span class="d-block" style="color: #702A00; font-family: Libertinus Sans; font-weight:bold;">
                <span class="d-block float-start" style="font-weight:bold; font-size:48px; margin-top:-18px;">WSRB</span>
                <span class="d-block float-start" style="width: 215px; padding-left: 14px; margin-top:-2px; font-size:16px; line-height:20px;">
                   <span style="letter-spacing:.075em;">Künstlike Werltspröke</span>
                   <span style="white-space:nowrap;"><small style="font-style:normal">und</small> Eyn schön rimbökelin</span>
                </span>
              </span>
        </button>
    </div>

    <script>
        function openCurtain() {
            const curtainContainer = document.querySelector('.curtain-container');
            const launchOverlay = document.querySelector('.launch-overlay');
            
            // Button ausblenden
            launchOverlay.classList.add('hidden');
            
            // Vorhang öffnen
            setTimeout(() => {
                curtainContainer.classList.add('open');
            }, 500);
            
            // Vorhang-Container nach Animation entfernen
            setTimeout(() => {
                curtainContainer.classList.remove('active');
            }, 7500);
        }

        // Optional: Automatisches Öffnen nach 2 Sekunden
        // setTimeout(openCurtain, 2000);
    </script>
  </th:block>
		
  <footer th:replace="~{fragments/page :: footer}"></footer>
  <script th:replace="~{fragments/page :: html_footer}"></script>
</body>
</html>
