diff --git a/frontend/src/lib/assets/landing_new/edit.webp b/frontend/src/lib/assets/landing_new/edit.webp new file mode 100644 index 0000000..3180c5c Binary files /dev/null and b/frontend/src/lib/assets/landing_new/edit.webp differ diff --git a/frontend/src/lib/assets/landing_new/find.webp b/frontend/src/lib/assets/landing_new/find.webp new file mode 100644 index 0000000..adf5e2d Binary files /dev/null and b/frontend/src/lib/assets/landing_new/find.webp differ diff --git a/frontend/src/lib/assets/landing_new/import.webp b/frontend/src/lib/assets/landing_new/import.webp new file mode 100644 index 0000000..20a38ae Binary files /dev/null and b/frontend/src/lib/assets/landing_new/import.webp differ diff --git a/frontend/src/lib/assets/landing_new/result-admin.webp b/frontend/src/lib/assets/landing_new/result-admin.webp new file mode 100644 index 0000000..8b4aa3f Binary files /dev/null and b/frontend/src/lib/assets/landing_new/result-admin.webp differ diff --git a/frontend/src/lib/assets/landing_new/result.webp b/frontend/src/lib/assets/landing_new/result.webp new file mode 100644 index 0000000..b74f2b7 Binary files /dev/null and b/frontend/src/lib/assets/landing_new/result.webp differ diff --git a/frontend/src/lib/assets/landing_new/select.webp b/frontend/src/lib/assets/landing_new/select.webp new file mode 100644 index 0000000..41ae2cc Binary files /dev/null and b/frontend/src/lib/assets/landing_new/select.webp differ diff --git a/frontend/src/lib/assets/landing_new/solution.webp b/frontend/src/lib/assets/landing_new/solution.webp new file mode 100644 index 0000000..d822a24 Binary files /dev/null and b/frontend/src/lib/assets/landing_new/solution.webp differ diff --git a/frontend/src/lib/assets/landing_new/winners.webp b/frontend/src/lib/assets/landing_new/winners.webp new file mode 100644 index 0000000..66a3e6a Binary files /dev/null and b/frontend/src/lib/assets/landing_new/winners.webp differ diff --git a/frontend/src/routes/+page.svelte b/frontend/src/routes/+page.svelte index 3bd868f..48c77e8 100644 --- a/frontend/src/routes/+page.svelte +++ b/frontend/src/routes/+page.svelte @@ -10,9 +10,16 @@ import WebPOpenGraph from '$lib/assets/landing/opengraph-home.webp'; import JpgOpenGraph from '$lib/assets/landing/opengraph-home.jpg'; import Newsletter from '$lib/landing/newsletter.svelte'; - import { fly } from 'svelte/transition'; + import { fly, fade } from 'svelte/transition'; - import LandingPromo from '$lib/landing/landing-promo.svelte'; + /* import LandingPromo from '$lib/landing/landing-promo.svelte';*/ + + import FindScreenshot from '$lib/assets/landing_new/find.webp'; + import ImportScreenshot from '$lib/assets/landing_new/import.webp'; + import EditScreenshot from '$lib/assets/landing_new/edit.webp'; + import SelectScreenshot from '$lib/assets/landing_new/select.webp'; + import ResultScreenshot from '$lib/assets/landing_new/result.webp'; + import WinnersScreenshot from '$lib/assets/landing_new/winners.webp'; import { onMount } from 'svelte'; const { t } = getLocalization(); @@ -24,15 +31,83 @@ user_count: number; } - const getStats = async (): Promise => { - const response = await fetch('/api/v1/stats/combined'); - return await response.json(); - }; + /* const getStats = async (): Promise => { + const response = await fetch('/api/v1/stats/combined'); + return await response.json(); + };*/ let newsletterModalOpen; onMount(() => { const ls = localStorage.getItem('newsletter'); newsletterModalOpen = ls === null; }); + + enum SelectedCreateThing { + Create, + Find, + Import + } + + enum SelectedPlayThing { + Select, + Results, + Winners + } + + let selected_create_thing = SelectedCreateThing.Create; + let selected_play_thing = SelectedPlayThing.Select; + + /*
  • No; + Tracking < /li> + < li > Self - hostable < /li> + < li > German; + Server < /li> + < li > user - friendly < /li> + < li > Completely; + free < /li> + < li > Quiz - results; + are; + downloadable < /li>;*/ + + const classquiz_reasons = [ + { + headline: 'No Tracking', + content: + "Kahoot tracks with at least 2 american 3rd-parties and ClassQuiz doesn't track with any 3rd-parties at all!" + }, + { + headline: 'Self-Hostable', + content: 'ClassQuiz can easily be self-hosted, so the data is only in your control!' + }, + { + headline: 'German Server', + content: "ClassQuiz's servers are located in Germany and hosted by netcup." + }, + { + headline: 'User-friendly', + content: + 'ClassQuiz tries to be as user-friendly as possible, so it is easy to use for everyone' + }, + { + headline: 'Completely Free', + content: + 'ClassQuiz is completely free without any paid plans or annoying redirects to the upgrade-page. A donation is still appreciated!' + }, + { + headline: 'Quiz-results can be downloaded', + content: + "Quiz-results can be easily exported into an Excel-spreadsheet. (Didn't know others couldn't do that)" + }, + { + headline: 'Multilingual', + content: + 'ClassQuiz is already fully translated into English, German, Turkish, French and Italian. It is also partly translated into Indonesian and Catalan.' + }, + { + headline: 'Dark-Mode', + content: 'One of the most important features a website can have!' + } + ]; + let selected_classquiz_reason = 0; @@ -64,7 +139,7 @@ -
    + +
    +
    +
    +

    ClassQuiz

    +

    {$t('index_page.slogan')}

    +
    +
    +
    +
    +

    + 1. Get a quiz +

    +
    +
    +
    +
    + {#if selected_create_thing === SelectedCreateThing.Create} + Screenshot of the import-page showing an URL to Kahoot! entered + {:else if selected_create_thing === SelectedCreateThing.Find} + Screenshot of the search-page showing one found quiz for the term 'Country' + {:else if selected_create_thing === SelectedCreateThing.Import} + Screenshot of the import-page showing an URL to Kahoot! entered + {:else} +

    Shouldn't happen!

    + {/if} +
    +
    +
    +
    { + selected_create_thing = SelectedCreateThing.Create; + }} + class:shadow-2xl={selected_create_thing === SelectedCreateThing.Create} + class:opacity-70={selected_create_thing !== SelectedCreateThing.Create} + > +
    + + + +
    +
    Create
    +

    Create a quiz from scratch with the editor and include pictures and more

    +
    +
    { + selected_create_thing = SelectedCreateThing.Find; + }} + class:shadow-2xl={selected_create_thing === SelectedCreateThing.Find} + class:opacity-70={selected_create_thing !== SelectedCreateThing.Find} + > +
    + + + +
    +
    Find
    +

    Find (or explore) quizzes made or imported by other people

    +
    +
    { + selected_create_thing = SelectedCreateThing.Import; + }} + class:shadow-2xl={selected_create_thing === SelectedCreateThing.Import} + class:opacity-70={selected_create_thing !== SelectedCreateThing.Import} + > +
    + + + +
    +
    Import
    +

    Import a quiz from Kahoot! and edit it on ClassQuiz

    +
    +
    +
    +
    + +
    +
    +

    + 2. Play the quiz +

    +
    + +
    +
    +
    + {#if selected_play_thing === SelectedPlayThing.Select} + Screenshot of the screen where an answer can be selected + {:else if selected_play_thing === SelectedPlayThing.Results} + Screenshot of the results with a table showing how many players chose which answer + {:else if selected_play_thing === SelectedPlayThing.Winners} + Screenshot of the import-page showing an URL to Kahoot! entered + {:else} +

    Shouldn't happen!

    + {/if} +
    +
    +
    +
    { + selected_play_thing = SelectedPlayThing.Select; + }} + class:shadow-2xl={selected_play_thing === SelectedPlayThing.Select} + class:opacity-70={selected_play_thing !== SelectedPlayThing.Select} + > +
    + + + +
    +
    Select the answer
    +

    Choose your answer wisely

    +
    +
    { + selected_play_thing = SelectedPlayThing.Results; + }} + class:shadow-2xl={selected_play_thing === SelectedPlayThing.Results} + class:opacity-70={selected_play_thing !== SelectedPlayThing.Results} + > +
    + + + +
    +
    View results
    +

    Check, if you have chosen wisely

    +
    +
    { + selected_play_thing = SelectedPlayThing.Winners; + }} + class:shadow-2xl={selected_play_thing === SelectedPlayThing.Winners} + class:opacity-70={selected_play_thing !== SelectedPlayThing.Winners} + > +
    + + + +
    +
    List winners
    +

    Get the ranking and see who won

    +
    +
    +
    +
    + +
    +
    +

    + Why ClassQuiz? +

    +
    + +
    +
    +
    +

    + {classquiz_reasons[selected_classquiz_reason].content} +

    +
    +
    +
    + {#each classquiz_reasons as reason, index} +
    { + selected_classquiz_reason = index; + }} + class:shadow-2xl={selected_classquiz_reason === index} + class:opacity-70={selected_classquiz_reason !== index} + > +
    {reason.headline}
    +
    + {/each} +
    +
    +
    {#if newsletterModalOpen}