{% extends 'base.html.twig' %}

{% block title %} Bilder-Segelparade {% endblock %}

{% block body %}



<!-- welcome hero -->


<div class="row bg px-3" id='home'>
		<div class="col-lg-2"></div>
				<div class="col-lg-8">
            <h1 class="text-center">Dein Bild in der Segelparade!</h1>
             
 
            {# welcome animation #}

            <div class="welcome_annimation">
              <img src="assets/images/annimation/background.png" alt="welcome image" width="100%" class="annimation_background_sky"/>

              <img src="assets/images/annimation/waves_original.png" alt="welcome image" width="100%" class="annimation_waves annimation_waves_layer0"/>
              <img src="assets/images/annimation/waves_original2.png" alt="welcome image" width="100%" class="annimation_waves annimation_waves_layer1"/>
              <img src="assets/images/annimation/waves_original3.png" alt="welcome image" width="100%" class="annimation_waves annimation_waves_layer2"/>

              <img src="assets/images/annimation/ship-lotta.png" alt="shipt" class="annimation_ship ship1"/>
              <img src="assets/images/annimation/ship2.png" alt="shipt" class="annimation_ship ship2"/>
              <img src="assets/images/annimation/ship3.png" alt="shipt" class="annimation_ship ship3"/>
              <img src="assets/images/annimation/balloon.png" alt="ballon" class="annimation_balloon"/>
              <img src="assets/images/annimation/cloud.png" alt="ballon" class="annimation_cloud cloud1"/>
              <img src="assets/images/annimation/cloud.png" alt="ballon" class="annimation_cloud cloud2"/>
              <img src="assets/images/annimation/cloud.png" alt="ballon" class="annimation_cloud cloud3"/>
            </div>
            



            <!--<img src="assets/images/welcome_image2.jpg" alt="welcome image" width="100%"/><br>-->

            <br>

            {# welcome text #}
            <div class="text-white">
              Auch dieses Jahr soll eine Bilder-Segelparade mit euren Zeichungen entstehen. Dafür brauchen wir deine Unterstützung!
              <br>
              Lade hier bis zum 31. Mai 2024 Dein Bild hoch!<br>
            </div>
            <br>

            {# button navigates to upload menu #}
            <div class="text-center">
              <a href="#upload"><button type="button" class="btn blue-btn btn-lg px-4 gap-3">Bild hochladen</button></a>
            </div>
          


            <br>
        </div>
		<div class="col-lg-2"></div>
</div>


<div class="row" id="project">
<br>
</div>



{# message shown when upload period has ended #}

{% if message is empty %} 
  
{% else %}
<div class="row bg px-3" id="bts">
		<div class="col-lg-2"></div>
				<div class="col-lg-8">
        
          <h2 class="text-center">{{ message }}</h2>
          </div>
      </div>
  </div>
<div class="row" id="project">
<br>
</div>
{% endif %}





<!-- project description -->
<div class="row bg  px-3" id="project">
		<div class="col-lg-2"></div>
				<div class="col-lg-8">
          <h2 class="text-center">Zum Projekt</h2>

          <div class="text-white">
            <!-- In diesem Jahr veranstalten wir die fünfte Bilder-Segelparade. Von Kindern gemalte Schiffe sollen auch im Jahr 2024 in einem Video über eine animierte Kieler Förde fahren – ähnlich der großen Windjammerparade der Kieler Woche. Für
            die Mitmach-Aktion werden Kinder und Jugendliche gebeten, Segelschiffe oder Heißluftballons zu malen und einzusenden.
                        Schaut euch hier das Ergebnis aus dem letzten Jahr an:

            -->
            In diesem Jahr haben wir die fünfte Bilder-Segelparad veranstaltet. Von Kindern gemalte Schiffe fahren auch im Jahr 2024 in einem Video über eine animierte Kieler Förde – ähnlich der großen Windjammerparade der Kieler Woche.
            <br>
            <br>
            Schaut euch hier das Ergebnis  an:
            <br><br>
          </div>

          <iframe width="100%"
          class="custom_iframe"
      src="/cookie_not_accepted.html"
      src_youtube="https://www.youtube.com/embed/ox9rxy1DOEg?rel=0&amp;amp;&amp;showinfo=0&amp;autoplay=0&amp;loop=0" frameborder="0" allowfullscreen=""> </iframe>
      <br><br>
  </div>
  <div class="col-lg-2"></div>
</div>


<!-- project hero -->


<div class="row" id="project"><br></div>



<!-- inspiration hero -->
  {% include '/frontend/index_inspiration.html.twig'  %}


<!-- already uploaded pictures as inspiration in carousel -->
<div class="row bg px-3" id="inspiration">
	<div class="col-lg-2"></div>
	<div class="col-lg-8">
    <h2 class="text-center">Ein paar Inspirationen</h2>


    {% if images is defined %} 
       {% include '/animation/carousel/animation_carousel.twig' with {'images': images} %}
    {% endif %}
    <br><br>
  </div>
  <div class="col-lg-2"></div>
</div>

<!-- project hero -->



<div class="row" id="project">
<br>
</div>





{# only shown during upload period #}

{% if message is empty %} 
  {# parameters for uploaded pictures #}
  {% include '/frontend/upload-image-parameters.html.twig' %}

  <div class="row" id="project"><br></div>

  {# upload form #}
  {% include '/frontend/upload.html.twig' with {'errorMessage': errorMessage|default('')} %}



<div class="row" id="project">
<br>
</div>

    
     


<!-- making of video -->
<div class="row bg px-3" id="bts">
		<div class="col-lg-2"></div>
				<div class="col-lg-8">
          <h2 class="text-center">So entsteht die Segelparade</h2>

          

          <iframe width="100%"
          class="custom_iframe"
      src="/cookie_not_accepted.html"
      src_youtube="https://www.youtube.com/embed/NcXRe0Wejcg?si=gWnGel19kgPw0vE2" frameborder="0" allowfullscreen=""> </iframe>
      <br><br>
  </div>
  <div class="col-lg-2"></div>
</div>

<!-- making of video -->


<div class="row" id="project">
<br>
</div>




{% endblock %}