{% extends 'base.html' %}

{% block content %}
<div class="grid place-content-center md:h-screen h-150 w-full -z-50 top-0 p-4">
    <div class="text-center">
        <h2 class="font-bold md:text-8xl text-6xl md:mb-8 text-blue-600">qivip</h2>
        <h3 class="mt-4 italic font-extralight sm:text-4xl text-md">forever and forall</h3>
    </div>
    <div class="grid sm:grid-cols-3 place-items-stretch text-center mt-8 gap-4 p-4 border-3 bg-blue-100 border-blue-100 rounded-md">
        <a class="qp-a-button bg-green-500 text-white" href="{% url 'play:join_game' %}">Teilnehmen</a>
        <a class="qp-a-button bg-indigo-500 text-white" href="{% url 'library:overview_quiz' %}">Moderieren</a>
        <a class="qp-a-button bg-purple-500 text-white" href="{% url 'library:new_quiz' %}">Erstellen</a>
    </div>
</div>
{% endblock %}

{% block faqs %}
<style>
   details[open] summary svg {
    transform: rotate(180deg);
  }

</style>


<div class="container mx-auto px-4 sm:px-6 lg:px-8 mt-8 mb-6">
  <div class="flex items-center gap-3">
    <h2 class="text-2xl font-bold text-gray-900">FAQs</h2>
    <div class="h-0.5 flex-grow bg-gradient-to-r from-blue-600 to-transparent rounded-full"></div>
  </div>
</div>


    <div class="input-group !max-w-4xl tracking-wide">
        <h1 class="font-black text-blue-600 flex justify-between gap-2 lg:text-lg">


        FAQs - häufig gestellte Fragen
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
  <path stroke-linecap="round" stroke-linejoin="round" d="M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 5.25h.008v.008H12v-.008Z" />
</svg></h1>
   
</div>


<div class="input-group mt-2.5 !max-w-4xl hover:!bg-gray-50">
        <details>
            <summary class="flex justify-between cursor-pointer font-bold">Was ist qivip?
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-7">
                <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
                </svg>
            </summary> 
            <p class="text-blue-600">qivip ist eine Webseite zum Lernen! Es können vor allem Quizze erstellt, bearbeitet, kopiert und auch gespielt werden. </p>
        </details>
</div>

<div class="input-group mt-2.5 !max-w-4xl hover:!bg-gray-50">
        <details>
            <summary class="flex justify-between cursor-pointer font-bold">Was sind die Vorteile von qivip?
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-7">
                <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
                </svg>
            </summary> 
            <p class="text-blue-600">
                Einige Vorteile von qivip:
                <br>
                - Sie können Quizze moderieren ohne Account (siehe wie man Quizze mit mehreren Personen gemeinsam spielt)
                <br>
                - alle öffentlichen Quizze können auch ohne Account gespielt werden
                <br>
                - qivip ist 100% kostenlos
                                <br>
                - es gibt keine Werbung
                                                <br>
                - qivip ist Open Source
            </p>
        </details>
</div>

<div class="input-group mt-2.5 !max-w-4xl hover:!bg-gray-50">
        <details>
            <summary class="flex justify-between cursor-pointer font-bold">Ist qivip kostenlos?
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-7">
                <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
                </svg>
            </summary> 
            <p class="text-blue-600">Ja! qivip ist zu 100% kostenlos und es gibt keine versteckten Kosten.</p>
        </details>
</div>

<div class="input-group mt-2.5 !max-w-4xl hover:!bg-gray-50">
        <details>
            <summary class="flex justify-between cursor-pointer font-bold">Muss ich mich bei qivip registrieren, wenn ich ein Quiz spielen möchte?
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-7">
                <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
                </svg>
            </summary> 
            <p class="text-blue-600">Nein! qivip ist so ausgelegt, dass man auch ohne Account alle öffentlichen Quizze spielen kann.</p>
        </details>
</div>

<div class="input-group mt-2.5 !max-w-4xl hover:!bg-gray-50">
        <details>
            <summary class="flex justify-between cursor-pointer font-bold">Kann ich ein Quiz von qivip auch alleine spielen?
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-7">
                <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
                </svg>
            </summary> 
            <p class="text-blue-600">Ja! Gehen Sie zur Bibliothek und klicken Sie auf den Button "spielen" (eines von Ihnen ausgewählten Quizzes). Wählen Sie anschließend bei den Spielmodi einfach den Lernmodus aus.</p>
        </details>
</div>
<div class="input-group mt-2.5 !max-w-4xl hover:!bg-gray-50">
        <details>
            <summary class="flex justify-between cursor-pointer font-bold">Wie kann ich ein Quiz erstellen?
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-7">
                <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
                </svg>
            </summary> 
            <p class="text-blue-600">Wichtig: Für diese Funktion müssen Sie angemeldet sein. Gehen Sie dafür auf die Startseite und klicken Sie auf "Erstellen". Nun wird Ihnen ein Formular angezeigt, dass Sie dann ausfüllen.
                Anschließend können Sie Fragen zu dem Quiz hinzufügen, indem Sie auf den Button eines Fragetyps klicken. </p>
        </details>
    </div>

    <div class="input-group mt-2.5 !max-w-4xl hover:!bg-gray-50">
        <details>
            <summary class="flex justify-between cursor-pointer font-bold">Wie kann ich mit mehreren Personen ein Quiz gemeinsam spielen?
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-7">
                <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
                </svg>
            </summary> 
            <p class="text-blue-600">
                Wenn man ein Quiz mit mehreren Personen spielt, gibt es sowohl einen Moderator als auch die Teilnehmer.
                <br>
                <br>
                <b>Moderator: </b>Der Moderator selbst spielt nicht mit. Gehen Sie entweder auf die Startseite und klicken Sie auf "Moderieren" oder klicken einfach auf "spielen" (eines von Ihnen ausgewählten Quizzes) und dann auf Moderiermodus.
                Der Moderator kann das Spiel, wenn die Teilnehmer da sind starten.
                <br>
                <br>
                <b>Teilnehmer: </b>Gehen Sie auf die Startseite und klicken Sie auf "Teilnehmen" und geben Sie dann den beim Moderator angegebenen Zahlencode ein. Anschließlich können Sie noch einen Anzeigenamen eingeben.  
             </p>
        </details>
    </div>


    <div class="input-group mt-2.5 !max-w-4xl hover:!bg-gray-50">
        <details>
            <summary class="flex justify-between cursor-pointer font-bold">Wo steht unser Server?
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-7">
                <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
                </svg>
            </summary> 
            <p class="text-blue-600">Unser Server befindet sich in Deutschland, genauer gesagt in Nürnberg. </p>
        </details>
    </div>

    <div class="input-group mt-2.5 !max-w-4xl hover:!bg-gray-50">
        <details>
            <summary class="flex justify-between cursor-pointer font-bold">Wer steckt hinter qivip?
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-7">
                <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
                </svg>
            </summary> 
            <p class="text-blue-600">Wir sind eine kleine Gruppe von Schülern, die sich im Rahmen eines Enrichmenten Projektes zusammengefunden hat. </p>
        </details>
    </div>
 
{% endblock %}